/* ==========================================================================
   Goatch — identité visuelle, à brancher dans l'application
   Couloir Produit, 2 octobre 2026. Mode d'emploi : LISEZMOI.md (même dossier).
   Valeurs de référence : ../jetons.json (contrôle : ../police/verifier_jetons.py).

   Une seule apparence, sombre : Goatch est « bleu de nuit et or » partout, de
   jour comme de nuit. Il n'y a donc PAS de variante claire ni de bloc
   @media (prefers-color-scheme) : le supprimer côté application.
   Les noms --fond, --carte, --texte… sont ceux de l'application actuelle :
   ce bloc remplace ses deux blocs :root, nom pour nom.
   ========================================================================== */

/* La police des titres, servie par l'application elle-même (la politique de
   sécurité interdit les polices venues d'ailleurs). Licence libre SIL OFL 1.1,
   inscrite dans le fichier : voir polices/LICENCE.md. */
@font-face {
  font-family: "Marcellus";
  src: url("/polices/Marcellus-Regular.ttf") format("truetype");
  /* Sans les chiffres : le 1 et le 0 de Marcellus se lisent I et O (« IOOM », « 2O27 »). Les chiffres passent
     à la police suivante de --police-titre : Iowan Old Style sur iPhone et Mac (chiffres alignés, à empattements). */
  unicode-range: U+0000-002F, U+003A-10FFFF;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* --- les couleurs de la marque ---------------------------------------- */
  --nuit: #0F1A2E;        /* fond principal */
  --abysse: #16233D;      /* cartes, panneaux */
  --relief: #22314F;      /* survol, éléments posés sur une carte */
  --nuit-trait: #2A3A5C;  /* filets, bordures */
  --ivoire: #F3EEDF;      /* texte */
  --etain: #AEB6C6;       /* texte secondaire */
  --or: #D4AF5A;          /* la couleur de Goatch : action, progrès, marque */
  --or-clair: #E3C67E;    /* or au survol */
  --or-fonce: #B8913A;    /* or appuyé : graphiques et traits ; en texte, 24 px au moins (4,4:1 sur relief) */

  /* --- les noms de l'application, remappés ----------------------------- */
  --fond: var(--nuit);
  --carte: var(--abysse);
  --texte: var(--ivoire);
  --doux: var(--etain);
  --trait: var(--nuit-trait);
  --accent: var(--or);
  --accent-fonce: var(--or-clair);   /* sur fond sombre, « appuyé » = plus clair */
  --accent-pale: #2F2B22;            /* fond d'une puce ou d'un badge choisi */
  --sur-accent: var(--nuit);         /* texte posé sur l'or (bouton principal) */
  --intertitre: var(--etain);
  --trait-champ: #6B7CA0;            /* bord d'un champ : 3:1 au moins sur nuit, abysse et relief (WCAG 1.4.11) */        /* intertitres et légendes : jamais l'or (voir plus bas) */
  --bleu: #8FB3E8;  --bleu-pale: #1B2B48;     /* information, liens */
  --vert: #7CC79A;  --vert-pale: #15302A;     /* fait, réussi */
  --alerte: #EBA97C; --alerte-pale: #36261C;  /* prudence, refus */
  --pastille: #E5484D;                        /* la pastille « nouveau message » d'Orel, et rien d'autre (Thomas, 7 octobre) */
  --violet: #BFA9E8; --violet-pale: #252547;  /* tests, notes */
  --ombre: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .28);

  /* --- graphiques (remplacent les couleurs écrites dans app.js) ------- */
  --g-charge: var(--or);
  --g-allegee: var(--vert);
  --g-test: var(--violet);
  --g-affutage: var(--bleu);
  --g-transition: #7F8BA6;
  --g-phases: #93A0BC, #D4AF5A, #B8913A, #BFA9E8, #8FB3E8, #6FB7AE, #7F8BA6; /* liste, pour mémoire */

  /* --- typographie ------------------------------------------------------ */
  --police-titre: "Marcellus", "Iowan Old Style", "Times New Roman", serif;
  --police-texte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;

  --taille-titre-ecran: 26px; --taille-titre-carte: 18px; --taille-chiffre: 22px;
  --taille-texte: 15px; --taille-petit: 13px; --taille-legende: 12px;
  --taille-titre-min: 16px;  /* Marcellus jamais en dessous : plus petit, c'est la police du texte */
  --taille-titre-tuile: 28px; --taille-chiffre-grand: 32px;

  /* --- espacements et formes ------------------------------------------- */
  --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px;
  --espace-5: 20px; --espace-6: 24px; --espace-7: 32px; --espace-8: 48px;
  --rayon: 14px;
  --rayon-petit: 8px;
  --rayon-pilule: 999px;
  --rayon-tuile: 22px;
  --hauteur-onglets: 52px;
}

/* ==========================================================================
   Ce que les couleurs seules ne changent pas
   ========================================================================== */

html { background: var(--fond); }                 /* pas de flash blanc à l'ouverture */
::selection { background: var(--or); color: var(--nuit); }
:focus-visible { outline-color: var(--or); }

/* Titres : Marcellus, une seule graisse (400), jamais en gras forcé. */
h1, h2, .titre-marque {
  font-family: var(--police-titre);
  font-weight: 400;
  letter-spacing: .02em;
}
.carte h2.titre { font-size: var(--taille-titre-carte); }

/* Le logo remplace le titre texte dans l'en-tête (voir LISEZMOI.md, page.html). */
.marque { display: flex; align-items: center; }
.marque img { display: block; height: 26px; width: auto; }

/* L'or est rare : l'action (bouton principal, onglet actif, focus), le choix (de l'utilisateur, ou
   recommandé par le staff : « suggéré », séance « clé ») et la donnée « charge » ; jamais une
   étiquette qui décrit. Les intertitres des séances et les légendes passent donc en étain. */
.section h3, legend { color: var(--intertitre); }

/* Bouton principal : texte nuit sur or (le blanc sur or ne se lit pas). */
button.principal { color: var(--sur-accent); letter-spacing: .01em; }
button.principal:hover { background: var(--or-clair); }

/* Onglets : l'onglet actif porte l'or, sans ombre portée. */
.onglets { background: var(--abysse); border: 1px solid var(--trait); }
.onglets button.actif { background: var(--relief); color: var(--or); box-shadow: none; }

/* Bandes de phases du plan : texte nuit sur les couleurs claires des phases. */
.phases div { color: var(--nuit); }

/* Champs : posés sur la carte, avec l'or au focus. */
select, input[type=number], input[type=text], input[type=date], input[type=password] {
  background: var(--nuit);
  border-color: var(--trait-champ);
}
select:focus, input:focus { border-color: var(--or); outline: none; }

/* ==========================================================================
   Accueil à tuiles, barre d'onglets, tableau de bord (maquette : accueil/maquette.html)
   Les images sont servies à côté de cette feuille : /accueil/ et /coach/.
   ========================================================================== */

/* Salutation : le prénom vient du profil, jamais écrit en dur. */
.salut { font-family: var(--police-titre); font-weight: 400; font-size: var(--taille-titre-ecran);
  margin: var(--espace-2) var(--espace-5) var(--espace-4); }

/* Les tuiles : grandes, plein cadre, qui défilent de côté et s'arrêtent net sur chacune. */
.tuiles { display: flex; gap: var(--espace-3); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--espace-5); padding: 0 var(--espace-5);
  scrollbar-width: none; }
.tuiles::-webkit-scrollbar { display: none; }
.tuile { position: relative; flex: 0 0 82%; max-width: 360px; aspect-ratio: 3 / 5; max-height: 66vh;
  scroll-snap-align: start; border-radius: var(--rayon-tuile); overflow: hidden; border: 1px solid var(--trait);
  background: var(--relief) center / cover no-repeat; color: var(--texte); text-decoration: none;
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--espace-6); }
.tuile::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 26, 46, .94) 0%, rgba(15, 26, 46, .55) 30%, rgba(15, 26, 46, 0) 58%); }
.tuile > * { position: relative; }
.tuile .surtitre { font-size: var(--taille-legende); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--intertitre); margin: 0; }
.tuile h2 { font-size: var(--taille-titre-tuile); line-height: 1.1; margin: var(--espace-1) 0 var(--espace-1); }
.tuile p { margin: 0; color: var(--doux); font-size: var(--taille-petit); }
.tuile:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.tuile-seance  { background-image: url("accueil/tuile-seance.svg?v=6a4090c4a8"); }
.tuile-renfo   { background-image: url("accueil/tuile-renfo.svg?v=6a4090c4a8"); }
.tuile-plan    { background-image: url("accueil/tuile-plan.svg?v=6a4090c4a8"); }
.tuile-talents { background-image: url("accueil/tuile-talents.svg?v=6a4090c4a8"); }

/* Sous les tuiles, une seule ligne : où en est la semaine. */
.resume-semaine { display: flex; justify-content: space-between; align-items: center; gap: var(--espace-3);
  margin: 0 var(--espace-5); padding: var(--espace-3) var(--espace-4); background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--rayon); font-size: var(--taille-petit); color: var(--doux); }
.resume-semaine b { color: var(--texte); font-weight: 600; }

/* Les pastilles sous les tuiles : où l'on est (ivoire), pas une action (pas d'or). */
.pastilles { display: flex; justify-content: center; gap: 6px; margin: var(--espace-4) 0; }
.pastilles i { width: 6px; height: 6px; border-radius: var(--rayon-pilule); background: var(--trait); transition: width .2s; }
.pastilles i.actif { width: 18px; background: var(--ivoire); }

/* La barre d'onglets, en bas : quatre entrées, l'onglet actif en or. */
.barre-onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid;
  grid-template-columns: repeat(4, 1fr); background: rgba(15, 26, 46, .94); border-top: 1px solid var(--trait);
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.barre-onglets a, .barre-onglets button { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: var(--hauteur-onglets); border: 0; background: none; color: var(--doux); font: inherit;
  font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; }
.barre-onglets [aria-current="page"] { color: var(--or); }
.barre-onglets svg { width: 24px; height: 24px; }   /* l'icône est collée telle quelle dans la page : accueil/onglet-*.svg */
body.avec-onglets { padding-bottom: calc(var(--hauteur-onglets) + 8px + env(safe-area-inset-bottom)); }

/* Le bouton du coach IA : au-dessus de la barre d'onglets, à droite. */
.coach-bouton { position: fixed; right: var(--espace-4); z-index: 21; width: 56px; height: 56px; padding: 0; border: 0;
  bottom: calc(var(--hauteur-onglets) + 8px + var(--espace-4) + env(safe-area-inset-bottom));
  background: url("coach/coach-repos.svg?v=6a4090c4a8") center / contain no-repeat; cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35)); }
.coach-bouton.nouveau { background-image: url("coach/coach-nouveau.svg?v=6a4090c4a8"); }
.coach-bouton[aria-expanded="true"] { background-image: url("coach/coach-ouvert.svg?v=6a4090c4a8"); }

/* Le tableau de bord : une grille de cartes de mesure, deux colonnes. */
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-3); }
.grille .large { grid-column: 1 / -1; }
.mesure { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--espace-4);
  display: flex; flex-direction: column; gap: var(--espace-2); min-width: 0; }
.mesure .etiquette { font-size: var(--taille-legende); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--intertitre); margin: 0; }
.mesure .valeur { font-family: var(--police-titre); font-size: var(--taille-chiffre-grand); line-height: 1; margin: 0; }
.mesure .valeur small { font-family: var(--police-texte); font-size: var(--taille-petit); color: var(--doux); margin-left: 4px; }
.mesure .note { font-size: var(--taille-legende); color: var(--doux); margin: 0; }

/* Jauge de progrès fine (or plein permis : voir LISEZMOI) : un <progress>, sans style en ligne. */
progress.jauge { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 0;
  border-radius: var(--rayon-pilule); background: var(--nuit); overflow: hidden; }
progress.jauge::-webkit-progress-bar { background: var(--nuit); border-radius: var(--rayon-pilule); }
progress.jauge::-webkit-progress-value { background: var(--or); border-radius: var(--rayon-pilule); }
progress.jauge::-moz-progress-bar { background: var(--or); border-radius: var(--rayon-pilule); }

/* Anneau : un <svg> à deux cercles, pathLength="100", stroke-dasharray="<pourcentage> 100". */
.anneau { width: 100%; max-width: 132px; aspect-ratio: 1; margin: 0 auto; display: block; }
.anneau circle { fill: none; stroke-width: 9; }
.anneau .fond { stroke: var(--nuit); }
.anneau .part { stroke: var(--or); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.anneau text { fill: var(--texte); font-family: var(--police-titre); font-size: 26px; text-anchor: middle; dominant-baseline: central; }

/* Niveau sur 10, en dix traits : <span class="niveau"> avec dix <i>, les acquis en class="plein". */
.niveau { display: inline-flex; gap: 3px; }
.niveau i { width: 9px; height: 4px; border-radius: 2px; background: var(--trait); }
.niveau i.plein { background: var(--or); }
.ligne-niveau { display: grid; grid-template-columns: 1fr auto 3.2em; align-items: center; gap: var(--espace-3); padding: var(--espace-2) 0; }
.ligne-niveau b { text-align: right; }
.ligne-niveau + .ligne-niveau { border-top: 1px solid var(--trait); }
.ligne-niveau b { font-family: var(--police-titre); font-weight: 400; font-size: var(--taille-titre-min); }

/* Commande segmentée (Profil) : le segment choisi en relief et ivoire, l'or reste aux actions. */
.segments { display: flex; background: var(--abysse); border: 1px solid var(--trait); border-radius: 12px; padding: 3px; }
.segments button { flex: 1; border: 0; background: none; color: var(--doux); font: inherit; font-size: var(--taille-petit);
  font-weight: 600; padding: 8px 4px; border-radius: 9px; cursor: pointer; }
.segments [aria-selected="true"] { background: var(--relief); color: var(--texte); }

/* ==========================================================================
   Le composant « information » : un bouton i qui ouvre une feuille (maquette : composants/information.html)
   ========================================================================== */

/* Le bouton : un rond fin en étain de 22 px, dans une zone tactile de 44 × 44. Jamais en or. */
button.info { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: -11px -11px -11px -6px; padding: 0; border: 0; background: none; color: var(--doux);
  vertical-align: middle; cursor: pointer; flex: none; }
button.info svg { width: 22px; height: 22px; }
button.info:hover, button.info:focus-visible { color: var(--texte); }

/* La feuille : un <dialog> ouvert par showModal(). Sur téléphone, elle monte du bas ; plus large, elle se centre. */
dialog.feuille { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 85vh;
  overflow: auto; border: 0; border-top: 1px solid var(--trait); border-radius: 20px 20px 0 0;
  background: var(--abysse); color: var(--texte);
  padding: var(--espace-2) var(--espace-5) calc(var(--espace-6) + env(safe-area-inset-bottom)); }
dialog.feuille::backdrop { background: rgba(5, 10, 20, .6); }
dialog.feuille .poignee { width: 36px; height: 4px; border-radius: 2px; background: var(--trait-champ); margin: 4px auto var(--espace-4); }
dialog.feuille h2 { font-size: var(--taille-titre-carte); margin: 0 0 var(--espace-2); }
dialog.feuille .bref { color: var(--texte); font-size: var(--taille-texte); margin: 0 0 var(--espace-3); }
dialog.feuille h3 { font-size: var(--taille-legende); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--intertitre); margin: var(--espace-5) 0 var(--espace-1); }
dialog.feuille p, dialog.feuille li { color: var(--doux); font-size: var(--taille-texte); line-height: 1.5; margin: 0 0 var(--espace-2); }
dialog.feuille ul { padding-left: 1.1em; margin: 0; }
dialog.feuille .sources, dialog.feuille .sources li { font-size: var(--taille-legende); }
dialog.feuille .fermer { margin-top: var(--espace-5); width: 100%; }
@media (min-width: 768px) {
  dialog.feuille { inset: 0; margin: auto; width: min(520px, 92vw); max-height: 80vh;
    border: 1px solid var(--trait); border-radius: var(--rayon); padding-bottom: var(--espace-6); }
  dialog.feuille .poignee { display: none; }
}

/* ==========================================================================
   La montre de Goatch : envoyer une séance à la montre (lots 17 quater et 18 ; maquette : exemples/montre.html)
   Icônes collées dans la page : composants/montre.svg (à envoyer), montre-envoyee.svg (déjà sur la montre).
   ========================================================================== */

/* Le rond : 44 × 44, l'icône en 22 px. Plein en or = l'action du jour (accueil) ; en contour fin = une séance du Plan,
   ou celle du jour une fois sur la montre. La coche du cadran est en or sur le contour, en nuit sur l'or. */
button.rond-montre { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--trait-champ); border-radius: 50%; background: transparent; color: var(--texte); cursor: pointer; }
button.rond-montre svg { width: 22px; height: 22px; }
button.rond-montre.plein { border-color: var(--accent); background: var(--accent); color: var(--sur-accent); }
button.rond-montre .coche { stroke: var(--or); }
button.rond-montre.plein .coche { stroke: currentColor; }
/* Dans un bouton écrit (« Envoyer à ma montre », écran de la séance) : l'icône en 20 px avant le texte. */
button .icone-montre { width: 20px; height: 20px; vertical-align: -4px; margin-right: var(--espace-2); }
/* La séance du jour faite : une coche verte après « SÉANCE DU JOUR » (le vert dit « fait », l'or dit « sur la montre »). */
.coche-faite { width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; color: var(--vert); }

/* ==========================================================================
   Pages allégées : composants communs (exemples : exemples/*.html)
   ========================================================================== */

/* Trois chiffres au plus, chacun avec son mot ; le « i » éventuel se pose après le mot. */
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-2); margin: 0; }
.chiffres > div { background: var(--nuit); border: 1px solid var(--trait); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.chiffres dt { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--intertitre); }
.chiffres dd { margin: 2px 0 0; font-family: var(--police-titre); font-size: 20px; }
.chiffres button.info { width: 32px; height: 32px; margin: -9px -9px -9px 0; }
.chiffres button.info svg { width: 16px; height: 16px; }

/* Un avertissement en vue : une phrase, un filet orangé, pas de fond. */
.attention { margin: 0; padding: 2px 0 2px var(--espace-3); border-left: 3px solid var(--alerte); font-size: 14px; color: var(--texte); }

/* Le déroulé d'une séance : une ligne par bloc (nom, ce qu'on fait, durée). */
.blocs { list-style: none; margin: 0; padding: 0; }
.blocs li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--espace-3); padding: var(--espace-3) 0;
  border-top: 1px solid var(--trait); align-items: center; }
.blocs li:first-child { border-top: 0; }
.blocs .nom { font-size: var(--taille-legende); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--intertitre); }
.blocs .quoi { grid-column: 1; font-size: 15px; }
.blocs .duree { grid-row: 1 / span 2; grid-column: 2; color: var(--doux); font-size: 13px; display: flex; align-items: center; gap: 4px; }

/* Une liste de réglages : libellé à gauche, valeur à droite, chevron ; toucher ouvre une feuille. */
.reglages { list-style: none; margin: 0; padding: 0; }
.reglages button { display: flex; width: 100%; align-items: center; gap: var(--espace-3); min-height: 48px; padding: 0;
  border: 0; border-top: 1px solid var(--trait); background: none; color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.reglages li:first-child button { border-top: 0; }
.reglages .libelle { flex: 1; }
.reglages .valeur { color: var(--doux); font-size: 14px; text-align: right; }
.reglages button::after { content: "›"; color: var(--doux); font-size: 20px; line-height: 1; }

/* Les actions secondaires (Agenda, Copier, Imprimer, fichier de montre…) : dans une feuille, une par ligne. */
.liste-actions { list-style: none; margin: 0; padding: 0; }
.liste-actions button { width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--trait); background: none;
  color: var(--texte); font: inherit; text-align: left; cursor: pointer; }
.liste-actions li:first-child button { border-top: 0; }

/* Un long formulaire devient des étapes : « Étape 1 sur 3 » et trois traits. */
.etapes { display: flex; align-items: center; gap: var(--espace-3); font-size: 12px; color: var(--doux); }
.etapes .traits { display: flex; gap: 4px; flex: 1; }
.etapes .traits i { flex: 1; height: 4px; border-radius: 2px; background: var(--trait); }
.etapes .traits i.fait { background: var(--ivoire); }

/* Une rangée d'actions : la principale en entier, puis des secondaires côte à côte. */
.rangee { display: flex; gap: var(--espace-2); }
.rangee > * { flex: 1; }

/* Un choix parmi quelques réponses écrites en mots (expérience du renforcement, sauts…) : des boutons radio
   natifs, une ligne par réponse, la réponse choisie bordée d'or pâle. Jamais un chiffre à taper. */
.choix, dialog.feuille .choix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-2); }
.choix label { display: flex; gap: var(--espace-3); align-items: flex-start; padding: 10px 14px; border: 1px solid var(--trait-champ);
  border-radius: 12px; cursor: pointer; }
.choix input { accent-color: var(--or); margin: 3px 0 0; width: 18px; height: 18px; flex: none; }
.choix .quoi { display: flex; flex-direction: column; gap: 2px; }
.choix .quoi b { font-weight: 600; }
.choix .quoi small { color: var(--doux); font-size: 13px; }
.choix label:has(input:checked) { border-color: var(--or); background: var(--accent-pale); }
.choix label:has(input:checked) .quoi small { color: var(--texte); }
.choix input:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

/* La page de connexion : le logo, le formulaire, puis l'aide à l'installation en lien discret. */
.connexion { display: flex; flex-direction: column; gap: var(--espace-4); padding-top: 72px; }
.connexion .logo { width: 70%; margin: 0 auto 24px; display: block; }
button.lien { background: none; border: 0; color: var(--doux); font: inherit; font-size: 14px; text-decoration: underline;
  text-underline-offset: 3px; padding: 12px; min-height: 44px; }
.etapes-installer { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }

/* ==========================================================================
   La finition : lumière, grain, or travaillé (décision de Thomas, 3 octobre 2026)
   Planche de comparaison : premium/planche.png. Les règles sont préfixées par « body » pour passer devant
   app.css et les styles des maquettes sans !important. Aucune couleur nouvelle : des nuances des jetons.
   ========================================================================== */

:root {
  --halo: #1F3155;                        /* le haut de l'écran, éclairé */
  --fond-bas: #0A1322;                    /* le bas de l'écran, plus sombre */
  --carte-haut: #1B2A47;                  /* une carte, en haut de son dégradé */
  --carte-bas: #141F37;                   /* une carte, en bas */
  --liseré: rgba(243, 238, 223, .07);     /* le fin bord clair, en haut des cartes et des boutons */
  --bord-doux: rgba(243, 238, 223, .06);  /* le contour des cartes (les champs gardent --trait-champ) */
  --ombre-carte: inset 0 1px 0 var(--liseré), 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .32);
  --or-metal-plat: linear-gradient(90deg, #B8913A 0%, #E9CF8A 55%, #C9A24E 100%);   /* jauges, traits */
  --or-liseré: rgba(212, 175, 90, .38);
}

/* 1. La lumière : un halo descend du haut de l'écran. Il est posé sur <html> (le fond de toute la page). */
html { background: radial-gradient(120% 55% at 50% -8%, var(--halo) 0%, rgba(31, 49, 85, 0) 62%) no-repeat,
  linear-gradient(180deg, var(--nuit) 0%, var(--fond-bas) 100%) no-repeat, var(--fond-bas); min-height: 100%; }

/* Les cartes : un léger dégradé, un liseré clair en haut, une ombre portée. */
body .carte, body .mesure, body .resume-semaine, body .segments {
  background: linear-gradient(180deg, var(--carte-haut) 0%, var(--carte-bas) 100%);
  border: 1px solid var(--bord-doux); box-shadow: var(--ombre-carte); }
body .segments [aria-selected="true"] { background: linear-gradient(180deg, #2A3B5E, var(--relief));
  box-shadow: inset 0 1px 0 var(--liseré), 0 2px 6px rgba(0, 0, 0, .35); }
body button.second { background: linear-gradient(180deg, #26365A, #1F2D4B); border-color: var(--bord-doux);
  box-shadow: inset 0 1px 0 var(--liseré), 0 2px 6px rgba(0, 0, 0, .25); }
/* La barre d'onglets : un verre dépoli. */
body .barre-onglets { background: rgba(12, 21, 38, .72); -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%); border-top: 1px solid var(--bord-doux); }
body progress.jauge::-webkit-progress-bar { background: #0B1426; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
body .anneau .fond { stroke: #0B1426; }

/* 2. La matière : un grain fin sur tout l'écran (mosaïque de 256 px, premium/grain.png), au-dessus de tout,
   sans capter ni le toucher ni le lecteur d'écran ; le laurier en filigrane en haut à droite, derrière le contenu. */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483000;
  background: url("premium/grain.png?v=6a4090c4a8") repeat; background-size: 128px 128px; opacity: .9; mix-blend-mode: overlay; }
/* Le laurier déborde à droite sans élargir la page : la boîte s'arrête au bord (right: 0, 190 px de large) et
   l'image de 260 px, calée à gauche, est coupée par la boîte (Sport, 3 octobre : right: -70px faisait 445 px sur 375). */
body::before { content: ""; position: absolute; top: 40px; right: 0; width: 190px; height: 260px; z-index: -1;
  pointer-events: none; background: url("marque/goatch-symbole-or.svg?v=6a4090c4a8") left center / 260px 260px no-repeat; opacity: .045; }

/* 3. L'or travaillé : un métal (champagne → or → or foncé) sur les jauges, l'anneau, les barres et le bouton
   principal. L'anneau et les barres demandent le dégradé SVG « or-metal » / « or-metal-v » dans la page
   (voir LISEZMOI, « La finition ») ; sans lui, ils restent en or plein. */
body progress.jauge::-webkit-progress-value { background: var(--or-metal-plat); box-shadow: 0 0 10px rgba(212, 175, 90, .35); }
body progress.jauge::-moz-progress-bar { background: var(--or-metal-plat); }
body .anneau .part { stroke: url(#or-metal) var(--or); filter: drop-shadow(0 0 6px rgba(212, 175, 90, .3)); }
body .histo rect.charge { fill: url(#or-metal-v) var(--or); }
body .niveau i.plein, body .pastilles i.actif { background: var(--or-metal-plat); }
body button.principal { background: linear-gradient(180deg, #EBCF8C 0%, var(--or) 48%, #BE9842 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(212, 175, 90, .22); }
body button.principal:hover { background: linear-gradient(180deg, #F0D99A 0%, var(--or-clair) 48%, var(--or) 100%); }
/* Le filet d'or : 18 px sous l'étiquette d'une carte (le texte de l'étiquette reste en étain). */
body .mesure .etiquette::after, body .carte.action h3::after { content: ""; display: block; width: 18px; height: 1px;
  margin-top: 8px; background: var(--or-metal-plat); }
/* La tuile : un liseré d'or à peine visible, et une vignette en bas qui porte le texte. */
body .tuile { border: 1px solid var(--bord-doux);
  box-shadow: inset 0 0 0 1px var(--or-liseré), var(--ombre-carte), 0 24px 48px rgba(0, 0, 0, .35); }
body .tuile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 22%,
  rgba(8, 14, 26, 0) 55%, rgba(8, 14, 26, .55) 100%); }
body .tuile > * { z-index: 1; }

/* 4. Le guilloché : des ondes gravées, sur DEUX cartes seulement (« Cette semaine » et « Talents » de Progrès),
   par la classe « grave ». Partout ailleurs, il perdrait son effet. */
body .grave { background: url("premium/guilloche.svg?v=6a4090c4a8") center / 400px 400px,
  linear-gradient(180deg, var(--carte-haut) 0%, var(--carte-bas) 100%); }

/* Mouvement et transparence réduits : pas de verre dépoli, pas de grain. */
@media (prefers-reduced-transparency: reduce) {
  body .barre-onglets { background: var(--nuit); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body::after { display: none; }
}

/* ==========================================================================
   Le mouvement (Thomas, 7 octobre 2026 : « Apple feeling ») — jetons.json « mouvement »
   L'appli répond au doigt tout de suite, et rien ne bouge pour décorer. Règle complète : LISEZMOI.md, « Le mouvement ».
   ========================================================================== */
:root {
  --duree-toucher: 90ms;   --duree-relache: 220ms;  --duree-court: 200ms;   --duree-onglet: 150ms;
  --duree-passage: 350ms;  --duree-retour: 300ms;   --duree-feuille: 420ms; --duree-feuille-ferme: 260ms;
  --courbe-ios: cubic-bezier(.32, .72, 0, 1);       /* départ vif, arrivée très douce : celle des écrans d'iOS */
  --courbe-douce: cubic-bezier(.25, .1, .25, 1);
  --enfoncement: .97;      --enfoncement-carte: .985;
  --attente-delai: 300ms;  --attente-pulsation: 1600ms;
}
* { -webkit-tap-highlight-color: transparent; }

/* 1. Ce qui s'enfonce : les boutons et les cartes qu'on touche. Vite à l'appui, plus doux au relâché. */
button, a.tuile, a.carte, .tuile[role="button"], .puce, .segments button {
  transition: transform var(--duree-relache) var(--courbe-ios), background-color var(--duree-court) var(--courbe-douce),
    opacity var(--duree-court) var(--courbe-douce); }
button:active:not(:disabled), .puce:active { transform: scale(var(--enfoncement)); transition-duration: var(--duree-toucher); }
a.tuile:active, a.carte:active, .tuile[role="button"]:active { transform: scale(var(--enfoncement-carte));
  transition-duration: var(--duree-toucher); }
/* 2. Ce qui s'éclaire : les lignes d'une liste (séances, semaines, réglages) ne rétrécissent pas, leur fond s'allume. */
.sea, .dix-jour, .blocs li > button, .liste-actions button { transition: background-color var(--duree-relache) var(--courbe-douce); }
.sea:active, .dix-jour:active, .blocs li > button:active, .liste-actions button:active {
  background-color: var(--relief); transition-duration: 0ms; }
/* 3. Ce qui change d'état (puce choisie, segment, interrupteur) : tout de suite, sans glisser. */
.puce[aria-checked="true"], .segments [aria-selected="true"] { transition-duration: var(--duree-toucher); }

/* 4. Les passages. La feuille monte du bas et redescend plus vite ; le voile suit. */
dialog.feuille[open] { animation: feuille-monte var(--duree-feuille) var(--courbe-ios); }
dialog.feuille[open]::backdrop { animation: voile-entre var(--duree-feuille) var(--courbe-douce); }
dialog.feuille.ferme { animation: feuille-descend var(--duree-feuille-ferme) var(--courbe-douce) forwards; }
@keyframes feuille-monte { from { transform: translateY(100%); } }
@keyframes feuille-descend { to { transform: translateY(100%); } }
@keyframes voile-entre { from { opacity: 0; } }
/* Une vue qui s'ouvre glisse de la droite (la précédente recule d'un tiers) ; le retour fait l'inverse, un peu plus
   vite. Avec l'API View Transitions quand Safari l'offre ; sinon, la vue apparaît sans animation (jamais d'à-coup). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--duree-passage);
  animation-timing-function: var(--courbe-ios); }
html.avance::view-transition-new(root) { animation-name: vue-entre-droite; }
html.avance::view-transition-old(root) { animation-name: vue-recule; }
html.recule::view-transition-new(root) { animation-name: vue-revient; animation-duration: var(--duree-retour); }
html.recule::view-transition-old(root) { animation-name: vue-sort-droite; animation-duration: var(--duree-retour); }
@keyframes vue-entre-droite { from { transform: translateX(100%); } }
@keyframes vue-recule { to { transform: translateX(-30%); opacity: .6; } }
@keyframes vue-revient { from { transform: translateX(-30%); opacity: .6; } }
@keyframes vue-sort-droite { to { transform: translateX(100%); } }
/* Un onglet : un fondu court, sans glissement (les onglets sont côte à côte, pas l'un derrière l'autre). */
html.onglet::view-transition-old(root), html.onglet::view-transition-new(root) { animation-duration: var(--duree-onglet);
  animation-timing-function: var(--courbe-douce); }

/* 5. L'attente : le squelette de l'écran, en gris pâle, après 300 ms seulement (sinon, rien : pas d'éclair). */
.squelette { pointer-events: none; animation: squelette-apparait var(--duree-court) var(--courbe-douce) var(--attente-delai) both; }
.squelette .sq { background: var(--relief); border-radius: 8px; opacity: .55;
  animation: squelette-pulse var(--attente-pulsation) var(--courbe-douce) infinite alternate; }
.squelette .sq-ligne { height: 12px; } .squelette .sq-titre { height: 24px; width: 62%; border-radius: 10px; }
.squelette .sq-rond { border-radius: 50%; } .squelette .sq-carte { border-radius: var(--rayon); }
@keyframes squelette-apparait { from { opacity: 0; } }
@keyframes squelette-pulse { to { opacity: .3; } }

/* 6. Quand l'iPhone demande de réduire les animations : ni glissement, ni agrandissement, ni pulsation. Les passages
   deviennent un fondu de 150 ms ; l'enfoncement devient un fond qui s'allume. */
@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled), .puce:active, a.tuile:active, a.carte:active, .tuile[role="button"]:active {
    transform: none; opacity: .75; }
  dialog.feuille[open], dialog.feuille.ferme { animation: voile-entre var(--duree-onglet) linear; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  html::view-transition-new(root) { animation: voile-entre var(--duree-onglet) linear !important; }
  .squelette .sq { animation: none; }
}