/* Magischroum — feuille de style unique.
 *
 * Deux partis pris commandent tout le reste :
 *
 * 1. L'application est consultée sur un iPhone, debout dans les transports
 *    autant qu'assise à un bureau. Tout est donc dimensionné au pouce : cibles
 *    tactiles d'au moins 44 px, navigation en bas de l'écran là où le pouce
 *    l'atteint, et retraits calculés sur env(safe-area-*) pour ne rien glisser
 *    sous l'encoche ni sous la barre d'accueil.
 *
 * 2. Laura a une mémoire visuelle. Les mots clés ne sont pas décorés au hasard :
 *    chaque couleur porte un sens constant dans les quatre modes, si bien que la
 *    forme d'une fiche se retient comme une image. Le code est fixé une fois
 *    pour toutes dans les variables --cle-* et rappelé par la légende de
 *    l'accueil. Ne pas réattribuer une couleur : ce serait réécrire une
 *    mémoire déjà constituée.
 */

/* ---------------------------------------------------------------- jetons */

:root {
  color-scheme: light dark;

  /* Le thème clair est défini sur :root nu, sans requête de média : c'est la
     base, que le thème sombre ne fait que redéfinir. Une couleur qui n'existe
     que dans un bloc @media disparaît quand la requête ne s'applique pas. */
  --fond:            #f7f5f0;
  --fond-carte:      #ffffff;
  --fond-creux:      #edeae2;
  --fond-barre:      #fffffff2;
  --trait:           #ddd8cc;
  --trait-fort:      #c3bcab;
  --texte:           #1b1a17;
  --texte-doux:      #5f5a50;
  --texte-tres-doux: #8b857a;
  --accent:          #7a1f2b;
  --accent-doux:     #7a1f2b14;
  --accent-texte:    #ffffff;
  --ok:              #1d6b3f;
  --ok-fond:         #1d6b3f14;
  --ko:              #a4152c;
  --ko-fond:         #a4152c14;

  /* Le code de couleurs des mots clés. */
  --cle-notion:      #8a5a00;   /* notion, qualification, régime          */
  --cle-notion-fond: #f0b42926;
  --cle-texte:       #0b52b8;   /* article de code, texte européen        */
  --cle-juris:       #6b2fb5;   /* arrêt, décision                        */
  --cle-delai:       #b3123a;   /* délai, quantum, chiffre                */
  --cle-piege:       #a8460a;   /* piège, exception, condition à ne pas rater */

  --rayon:      14px;
  --rayon-doux: 10px;
  --ombre:      0 1px 2px #00000012, 0 6px 18px #00000008;

  --marge:      max(16px, env(safe-area-inset-left));
  --haut-barre: 52px;
  --bas-barre:  calc(58px + env(safe-area-inset-bottom));

  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, monospace;
}

/* Thème sombre : par préférence système, sauf choix explicite du clair. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:            #12141c;
    --fond-carte:      #1a1d27;
    --fond-creux:      #232734;
    --fond-barre:      #12141cf2;
    --trait:           #2c3040;
    --trait-fort:      #414759;
    --texte:           #eceef5;
    --texte-doux:      #a8adbd;
    --texte-tres-doux: #767c8f;
    --accent:          #e0616f;
    --accent-doux:     #e0616f1f;
    --accent-texte:    #12141c;
    --ok:              #4ade80;
    --ok-fond:         #4ade801f;
    --ko:              #f87171;
    --ko-fond:         #f871711f;

    --cle-notion:      #f5c451;
    --cle-notion-fond: #f5c4512e;
    --cle-texte:       #7cb2ff;
    --cle-juris:       #c99bf7;
    --cle-delai:       #ff8b99;
    --cle-piege:       #ffab6b;

    --ombre: 0 1px 2px #0000004d, 0 8px 24px #00000040;
  }
}

/* Choix explicite du sombre : doit l'emporter même sous un système clair. */
:root[data-theme="dark"] {
  --fond:            #12141c;
  --fond-carte:      #1a1d27;
  --fond-creux:      #232734;
  --fond-barre:      #12141cf2;
  --trait:           #2c3040;
  --trait-fort:      #414759;
  --texte:           #eceef5;
  --texte-doux:      #a8adbd;
  --texte-tres-doux: #767c8f;
  --accent:          #e0616f;
  --accent-doux:     #e0616f1f;
  --accent-texte:    #12141c;
  --ok:              #4ade80;
  --ok-fond:         #4ade801f;
  --ko:              #f87171;
  --ko-fond:         #f871711f;

  --cle-notion:      #f5c451;
  --cle-notion-fond: #f5c4512e;
  --cle-texte:       #7cb2ff;
  --cle-juris:       #c99bf7;
  --cle-delai:       #ff8b99;
  --cle-piege:       #ffab6b;

  --ombre: 0 1px 2px #0000004d, 0 8px 24px #00000040;
}

/* ---------------------------------------------------------------- socle */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  /* Le rebond élastique de Safari décollerait les barres fixes du bord. */
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

/* Le surlignage bleu au toucher fait paraître l'interface bricolée ; les états
   pressés sont rendus explicitement par :active sur chaque contrôle. */
* { -webkit-tap-highlight-color: transparent; }

button, input, select, textarea { font: inherit; color: inherit; }

button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

a { color: var(--accent); text-decoration: none; }

svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- entête */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(var(--haut-barre) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--marge) 0;
  background: var(--fond-barre);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--trait);
}

.entete-titre {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entete-retour, .entete-theme {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  color: var(--accent);
}
.entete-retour:active, .entete-theme:active { background: var(--fond-creux); }
.entete-theme { color: var(--texte-tres-doux); }
/* Réserve la place du bouton retour quand il est masqué, pour que le titre
   centré ne se déplace pas d'une vue à l'autre. */
.entete-retour[hidden] { display: block; visibility: hidden; }

/* ---------------------------------------------------------------- vue */

.vue {
  padding: calc(var(--haut-barre) + env(safe-area-inset-top) + 16px)
           var(--marge)
           calc(var(--bas-barre) + 28px);
  outline: none;
  max-width: 760px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------- onglets */

.onglets {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--fond-barre);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--trait);
}

.onglets a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 56px;
  color: var(--texte-tres-doux);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.onglets a svg { width: 23px; height: 23px; }
.onglets a[aria-current="page"] { color: var(--accent); }
.onglets a:active { opacity: 0.5; }

/* ---------------------------------------------------------------- blocs */

.carte {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 16px;
  margin-bottom: 12px;
}

.titre-section {
  margin: 26px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
}
.titre-section:first-child { margin-top: 0; }

.liste { display: flex; flex-direction: column; gap: 10px; }

/* Rangée cliquable : le motif de navigation de toute l'application. */
.rangee {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 13px 15px;
  text-align: left;
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  color: var(--texte);
}
.rangee:active { background: var(--fond-creux); transform: scale(0.988); }
.rangee-corps { flex: 1; min-width: 0; }
.rangee-titre { font-weight: 600; letter-spacing: -0.01em; }
.rangee-note { font-size: 13.5px; color: var(--texte-doux); margin-top: 2px; }
.rangee-fleche { color: var(--texte-tres-doux); flex: 0 0 auto; }
.rangee-fleche svg { width: 18px; height: 18px; }

/* Pastille d'initiale colorée par matière. */
.pastille {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.pastille[data-matiere="civil"]        { background: #0b52b81f; color: var(--cle-texte); }
.pastille[data-matiere="penal"]        { background: #a4152c1f; color: var(--cle-delai); }
.pastille[data-matiere="contemporain"] { background: #1d6b3f1f; color: var(--ok); }

/* ---------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-texte);
  font-size: 16.5px;
  font-weight: 600;
  width: 100%;
}
.bouton:active { filter: brightness(0.9); transform: scale(0.99); }
.bouton[disabled] { opacity: 0.4; }

.bouton.secondaire {
  background: var(--fond-carte);
  color: var(--texte);
  border: 1px solid var(--trait-fort);
}

.bouton.fantome {
  background: none;
  color: var(--accent);
  min-height: 44px;
}

.rangee-boutons { display: flex; gap: 10px; }
.rangee-boutons .bouton { flex: 1; }

/* Puces de sélection (choix des thèmes, des matières, des années). */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
  background: var(--fond-carte);
  color: var(--texte-doux);
  font-size: 14.5px;
  font-weight: 500;
}
.puce[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-texte);
}
.puce:active { transform: scale(0.96); }

/* ---------------------------------------------------- mots clés colorés */

/* Le cœur du dispositif visuel. Chaque classe correspond à un délimiteur du
   balisage source (voir js/format.js) et garde le même sens partout. */

.k-notion {
  color: var(--cle-notion);
  background: var(--cle-notion-fond);
  font-weight: 650;
  padding: 0.5px 3px;
  margin: 0 -1px;
  border-radius: 4px;
}

.k-texte {
  color: var(--cle-texte);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.k-juris {
  color: var(--cle-juris);
  font-weight: 600;
  font-style: italic;
}

.k-delai {
  color: var(--cle-delai);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.k-piege {
  color: var(--cle-piege);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Légende du code de couleurs, rappelée sur l'accueil. */
.legende { display: flex; flex-direction: column; gap: 7px; }
.legende div { font-size: 14.5px; color: var(--texte-doux); }

/* ---------------------------------------------------------------- prose */

.prose { font-size: 17px; }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 13px; }
.prose h3 {
  margin: 24px 0 9px;
  font-family: var(--serif);
  font-size: 19.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.prose h4 {
  margin: 18px 0 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-tres-doux);
}
.prose ul { margin: 0 0 13px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--texte-tres-doux); }

/* Encadré « à retenir » / méthode. */
.prose blockquote {
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--rayon-doux) var(--rayon-doux) 0;
  background: var(--accent-doux);
  font-size: 16px;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- QCM */

.qcm-progression {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--texte-tres-doux);
  margin-bottom: 10px;
}

.jauge { height: 4px; border-radius: 2px; background: var(--fond-creux); overflow: hidden; margin-bottom: 18px; }
.jauge > i { display: block; height: 100%; background: var(--accent); transition: width 0.25s ease; }

.qcm-question {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}

.qcm-choix { display: flex; flex-direction: column; gap: 9px; }

.choix {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  background: var(--fond-carte);
  border: 1.5px solid var(--trait);
  border-radius: var(--rayon-doux);
  font-size: 16px;
  line-height: 1.45;
  color: var(--texte);
}
.choix:active { background: var(--fond-creux); }
.choix .lettre {
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-top: 1px;
  border-radius: 7px;
  background: var(--fond-creux);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texte-doux);
}
.choix[data-etat="juste"]  { border-color: var(--ok); background: var(--ok-fond); }
.choix[data-etat="juste"]  .lettre { background: var(--ok); color: var(--fond-carte); }
.choix[data-etat="faux"]   { border-color: var(--ko); background: var(--ko-fond); }
.choix[data-etat="faux"]   .lettre { background: var(--ko); color: var(--fond-carte); }
.choix[data-etat="grise"]  { opacity: 0.45; }
.choix[disabled] { cursor: default; }

/* Le verdict apparaît immédiatement sous la question, sans écran intermédiaire :
   c'est là que se fait l'apprentissage. */
.verdict {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--rayon-doux);
  border: 1px solid var(--trait);
  background: var(--fond-carte);
  animation: apparait 0.22s ease both;
}
.verdict[data-issue="juste"] { border-color: var(--ok); background: var(--ok-fond); }
.verdict[data-issue="faux"]  { border-color: var(--ko); background: var(--ko-fond); }

.verdict-entete {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  margin-bottom: 9px;
}
.verdict[data-issue="juste"] .verdict-entete { color: var(--ok); }
.verdict[data-issue="faux"]  .verdict-entete { color: var(--ko); }
.verdict-entete svg { width: 17px; height: 17px; }

.verdict .prose { font-size: 15.5px; }

.source {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed var(--trait-fort);
  font-size: 13px;
  color: var(--texte-doux);
}

@keyframes apparait { from { opacity: 0; transform: translateY(6px); } }

/* ---------------------------------------------------------------- cartes */

.carte-flash {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 340px;
  padding: 24px 20px;
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: 18px;
  box-shadow: var(--ombre);
  text-align: center;
}
.carte-flash .recto {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.carte-flash .verso {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
  font-size: 16.5px;
  line-height: 1.55;
  text-align: left;
  animation: apparait 0.2s ease both;
}
.carte-flash .indice {
  margin-top: 20px;
  font-size: 13px;
  color: var(--texte-tres-doux);
}

.notes-rappel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 14px; }
.notes-rappel .bouton { padding: 0 4px; font-size: 14px; flex-direction: column; gap: 1px; min-height: 58px; }
.notes-rappel .bouton small { font-size: 10.5px; font-weight: 500; opacity: 0.75; }
.notes-rappel .bouton[data-note="0"] { background: var(--ko); color: #fff; }
.notes-rappel .bouton[data-note="1"] { background: #c2620a; color: #fff; }
.notes-rappel .bouton[data-note="2"] { background: #1d6b3f; color: #fff; }
.notes-rappel .bouton[data-note="3"] { background: #0b52b8; color: #fff; }

/* ---------------------------------------------------------------- divers */

.vide {
  padding: 40px 20px;
  text-align: center;
  color: var(--texte-tres-doux);
  font-size: 15px;
}

.bienvenue {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 6px;
}
.bienvenue em { font-style: normal; color: var(--accent); }

.sous-titre { color: var(--texte-doux); font-size: 15.5px; margin: 0 0 22px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { text-align: center; padding: 14px 6px; }
.stat b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--texte-tres-doux); letter-spacing: 0.02em; }

.avert {
  font-size: 13px;
  line-height: 1.5;
  color: var(--texte-doux);
  background: var(--fond-creux);
  border-radius: var(--rayon-doux);
  padding: 12px 14px;
  margin-top: 14px;
}

.recherche {
  width: 100%;
  min-height: 46px;
  padding: 0 15px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid var(--trait);
  background: var(--fond-carte);
  font-size: 16px; /* < 16px déclencherait un zoom automatique sur iOS */
}
.recherche:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.minuteur {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.minuteur[data-fini="oui"] { color: var(--ko); }

.repli { margin-bottom: 10px; }
.repli > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 15px;
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--texte-tres-doux);
  border-bottom: 2px solid var(--texte-tres-doux);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.repli[open] > summary::after { transform: rotate(-135deg); }
.repli[open] > summary { border-radius: var(--rayon) var(--rayon) 0 0; border-bottom-color: transparent; }
.repli-corps {
  padding: 4px 15px 15px;
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-top: 0;
  border-radius: 0 0 var(--rayon) var(--rayon);
}

.etiquette {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fond-creux);
  color: var(--texte-doux);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.etiquette[data-ton="annale"] { background: var(--accent-doux); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}