/* ===========================================================================
   218C -- systeme de design.
   Toutes les valeurs viennent du fichier Figma "Web app - beta.fig", decode
   le 2026-09-20 : palette relevee sur les remplissages, typographie sur les
   noeuds TEXT, geometrie des boutons et du potard sur les frames. Rien n'est
   approche a l'oeil.
   =========================================================================== */

:root {
  /* --- palette, relevee dans le .fig -------------------------------------- */
  --noir:         #1E1E1E;   /* fond des ecrans sombres, 487 occurrences     */
  --blanc:        #F1F1F1;   /* fond de l'accueil et texte sur sombre        */
  --rouge-fonce:  #8D1D13;   /* la couleur de marque, 410 occurrences        */
  --creme:        #E5D5C8;   /* 329 occurrences                              */
  --rouge:        #D11D1C;   /* le disque du potard                          */
  --gris:         #505050;
  --gris-clair:   #DEDEDE;
  --gris-sourd:   #3F3F3F;
  --metal:        #E1E1E1;   /* le chapeau du potard                         */

  --vert:         #6FBF73;
  --orange:       #E0A33C;

  /* --- typographie --------------------------------------------------------
     Futura, Medium et Bold, tout en capitales. Presente sur macOS ; ailleurs
     on retombe sur les geometriques les plus proches. Aucune police n'est
     chargee par le reseau : c'est un outil d'etabli, il doit marcher hors
     ligne. */
  --geo: "Futura", "Jost", "Century Gothic", "Avenir Next", "Twentieth Century",
         system-ui, sans-serif;

  /* --- geometrie, relevee sur les frames ---------------------------------- */
  --r-bouton: 8px;           /* Frame 55, 223x80, rayon 8                     */
  --r-carte: 16px;
  --rang: 53px;              /* hauteur d'une entree de menu                  */
  --gouttiere: 25px;         /* marge laterale des ecrans 393                 */
  --largeur: 393px;          /* la maquette est mobile d'abord                */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--geo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===========================================================================
   L'ossature : une colonne de 393 px au telephone, elargie au bureau.
   =========================================================================== */

#app { min-height: 100vh; display: flex; flex-direction: column; }

.ecran {
  flex: 1;
  display: none;
  flex-direction: column;
  padding: 0 var(--gouttiere) 40px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.ecran.actif { display: flex; }
.ecran.clair { background: var(--blanc); color: var(--noir); }
body.clair { background: var(--blanc); }

/* --- l'entete, presente sur tous les ecrans ------------------------------ */
.entete {
  display: flex; align-items: baseline; gap: 12px;
  padding: 34px 0 0;
  font-size: 14px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
}
.entete .retour {
  border: none; background: none; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer; letter-spacing: 0;
}
.entete .retour:hover { opacity: .6; }
.entete .titre { opacity: .55; font-weight: 500; }
.entete .droite { margin-left: auto; font-weight: 500; opacity: .55; }

/* --- les titres ---------------------------------------------------------- */
h1.geant {
  font-size: clamp(44px, 13vw, 84px);
  font-weight: 700; line-height: .92; letter-spacing: -.01em;
  text-transform: uppercase; margin: 0;
}
h2.section {
  font-size: 24px; font-weight: 700; letter-spacing: .01em;
  text-transform: uppercase; line-height: 1.12; margin: 0 0 18px;
}
p.chapeau {
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  line-height: 1.75; margin: 0; opacity: .82;
}

/* --- le menu a quatre entrees -------------------------------------------- */
.menu { display: flex; flex-direction: column; }
.menu button {
  all: unset;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--rang); cursor: pointer;
  font-size: 15px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  transition: padding-left .12s ease, opacity .12s;
}
.menu button:first-child { border-top: 1px solid currentColor; }
.menu button::after { content: "→"; opacity: .35; }
.menu button:hover { padding-left: 8px; }
.menu button:hover::after { opacity: 1; }
.menu button[disabled] { opacity: .3; cursor: not-allowed; }
.menu button[disabled]::after { content: "soon"; font-size: 10px; letter-spacing: .1em; }

/* --- le bouton principal, 223 x 80, rayon 8 ------------------------------ */
.principal {
  all: unset;
  display: flex; align-items: center; justify-content: center;
  width: 223px; max-width: 100%; height: 80px;
  border-radius: var(--r-bouton);
  background: var(--noir); color: var(--blanc);
  font-size: 18px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer;
  transition: transform .1s ease, opacity .12s;
}
.ecran:not(.clair) .principal { background: var(--blanc); color: var(--noir); }
.principal:hover { transform: translateY(-2px); }
.principal:active { transform: translateY(0); }
.principal[disabled] { opacity: .35; cursor: not-allowed; transform: none; }

.secondaire {
  all: unset;
  font-size: 11px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.secondaire:hover { opacity: .6; }

/* --- pied de page d'un ecran --------------------------------------------- */
.pied {
  margin-top: auto; padding-top: 28px;
  font-size: 11px; font-weight: 500; letter-spacing: .04em;
  line-height: 1.7; opacity: .7;
}
.pied a, .pied .lien { color: inherit; text-decoration: underline; cursor: pointer; }

/* ===========================================================================
   Le potard. Geometrie relevee dans le .fig : disque 144, chapeau 74.
   =========================================================================== */
.cadran {
  width: 144px; height: 144px; position: relative;
  touch-action: none; cursor: ns-resize;
  user-select: none; -webkit-user-select: none;
}
.disque {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #E8564A 0%, var(--rouge) 38%,
                              #A81B16 80%, #7A1310 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.42), inset 0 -3px 10px rgba(0,0,0,.3);
}
.aiguille {
  position: absolute; left: 50%; top: 7px;
  width: 12px; height: 40px; margin-left: -6px;
  background: linear-gradient(180deg, var(--creme), #B9AB99);
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  transform-origin: 50% 65px;          /* 7 + 40 + 18 = centre du disque */
  transform: rotate(-135deg);
  transition: transform .06s linear;
}
.metal {
  position: absolute; inset: 24.3%;    /* 74 / 144 */
  border-radius: 50%;
  background: conic-gradient(from 210deg, #F2F2F2, #9A9A9A 12%, #FDFDFD 26%,
                             #8E8E8E 42%, #EDEDED 55%, #8A8A8A 70%, #FBFBFB 86%, #F2F2F2);
  box-shadow: 0 0 0 5px rgba(209,29,28,.95), 0 3px 8px rgba(0,0,0,.35),
              inset 0 0 6px rgba(0,0,0,.22);
}

/* ===========================================================================
   Le moniteur.
   =========================================================================== */
.grille {
  display: grid; gap: 12px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
}
.potard {
  background: var(--rouge-fonce); border-radius: var(--r-carte);
  padding: 24px 16px 18px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; min-height: 322px;
}
.potard .cadran { margin-bottom: 22px; }
.potard.inerte { opacity: .42; }
.potard.selection { box-shadow: inset 0 0 0 2px var(--creme); }
.potard .nom {
  font-size: 17px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(229,213,200,.5); margin-bottom: 6px;
}
.potard .valeur {
  font-size: clamp(28px, 5.5vw, 46px); font-weight: 700; line-height: 1.04;
  text-transform: uppercase; color: var(--creme); word-break: break-word;
}
.potard.vierge .valeur { color: rgba(229,213,200,.45); }
.potard .note {
  margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(229,213,200,.55); min-height: 14px;
}
.potard .brut {
  margin-top: auto; padding-top: 12px;
  font-size: 10px; font-weight: 500; letter-spacing: .1em;
  color: rgba(229,213,200,.42); font-variant-numeric: tabular-nums;
}

.bloc {
  background: var(--rouge-fonce); border-radius: var(--r-carte);
  padding: 16px 18px; margin-top: 12px;
}
.bloc h3 {
  margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(229,213,200,.55);
}
.pas { display: grid; grid-template-columns: repeat(32, 1fr); gap: 3px; }
.pas i { height: 22px; border-radius: 3px; background: rgba(0,0,0,.28); display: block;
         transition: background .08s; }
.pas i.actif { background: var(--rouge); }
.pas i.tete  { background: var(--creme); }
.pas i.hors  { opacity: .32; }

.chiffres {
  display: flex; flex-wrap: wrap; gap: 9px 24px;
  font-size: 11px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--creme);
  font-variant-numeric: tabular-nums;
}
.chiffres b { font-weight: 700; }
.chiffres span { opacity: .6; }
.chiffres b { opacity: 1; }

.banniere {
  background: var(--rouge-fonce); border-left: 3px solid var(--orange);
  border-radius: var(--r-carte); padding: 14px 18px; margin-top: 18px;
  font-size: 11px; font-weight: 500; letter-spacing: .06em; line-height: 1.7;
  color: var(--creme);
}
.banniere[hidden] { display: none; }

/* --- l'etat de la source ------------------------------------------------- */
.etat {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--gris); flex: none; }
.pastille.vivant { background: var(--vert); box-shadow: 0 0 10px var(--vert); }
.pastille.faux   { background: var(--orange); box-shadow: 0 0 10px var(--orange); }

.commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.commandes button, .commandes select {
  font-family: var(--geo); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--creme); background: transparent;
  border: 1px solid rgba(229,213,200,.45); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
}
.commandes button:hover, .commandes select:hover { border-color: var(--creme); }
.commandes button.actif { background: var(--creme); color: var(--rouge-fonce); border-color: var(--creme); }
.aide { font-size: 11px; font-weight: 500; letter-spacing: .06em; line-height: 1.7;
        color: rgba(229,213,200,.7); margin: 10px 0 0; }
.aide code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0; color: var(--creme); }

/* ===========================================================================
   Le manuel.
   =========================================================================== */
.manuel { padding-top: 26px; }
.manuel .intro { margin-bottom: 36px; }
.manuel h2.section { margin-top: 34px; }
.chapitre { border-top: 1px solid rgba(241,241,241,.22); }
.chapitre:last-child { border-bottom: 1px solid rgba(241,241,241,.22); }
.chapitre > button {
  all: unset; display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: var(--rang); cursor: pointer;
  font-size: 15px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  gap: 14px; padding: 8px 0;
}
.chapitre > button:hover { opacity: .65; }
.chapitre .signe { font-weight: 700; opacity: .5; flex: none; }
.chapitre .corps {
  display: none; padding: 2px 0 26px;
  font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1.85;
  color: rgba(241,241,241,.8); max-width: 62ch;
}
.chapitre.ouvert .corps { display: block; }
.chapitre .corps p { margin: 0 0 14px; }
.chapitre .corps b { color: var(--blanc); font-weight: 700; }
.chapitre .corps .etiquette {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; background: var(--rouge-fonce); color: var(--creme);
  padding: 3px 9px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
.chapitre .corps dl { margin: 0 0 14px; display: grid;
  grid-template-columns: max-content 1fr; gap: 6px 18px; }
.chapitre .corps dt { font-weight: 700; color: var(--blanc);
  text-transform: uppercase; font-size: 11px; letter-spacing: .1em; padding-top: 3px; }
.chapitre .corps dd { margin: 0; }

/* ===========================================================================
   L'accueil.
   =========================================================================== */
.accueil { justify-content: space-between; }
.accueil .haut { padding-top: 12vh; }
.accueil h1.geant { margin-bottom: 8vh; }
.accueil .bas { display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
                padding-bottom: 8vh; }
.accueil .dessin { align-self: center; opacity: .9; }

@media (min-width: 900px) {
  /* ⚠️ ".actif" est indispensable ici : sans lui, ce display:grid ecrase le
     display:none de .ecran et l'accueil reste visible SOUS les autres ecrans.
     Vu a l'ecran le 2026-09-21. */
  .ecran.accueil.actif { display: grid; grid-template-columns: 1fr 1fr;
             align-items: center; gap: 60px; padding-top: 0; }
  .accueil .haut { padding-top: 0; }
  .accueil .bas { padding-bottom: 0; }
}

/* ===========================================================================
   Telephone.
   =========================================================================== */
@media (max-width: 560px) {
  :root { --gouttiere: 20px; }
  .grille { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .potard { min-height: 244px; padding: 16px 9px 13px; }
  .potard .cadran { width: 104px; height: 104px; margin-bottom: 16px; }
  .aiguille { top: 5px; height: 29px; width: 9px; margin-left: -4.5px;
              transform-origin: 50% 47px; }
  .potard .nom { font-size: 12px; letter-spacing: .12em; }
  .potard .valeur { font-size: clamp(16px, 5.2vw, 30px); }
  .potard .note, .potard .brut { font-size: 9px; letter-spacing: .06em; }
  .pas { grid-template-columns: repeat(16, 1fr); }
  h2.section { font-size: 20px; }
  /* L'entete tenait sur deux lignes au telephone : on la resserre plutot que
     de la laisser casser au milieu d'un nom de mode. */
  .entete { font-size: 12px; letter-spacing: .06em; gap: 8px; padding-top: 26px; }
  .entete .droite { font-size: 10px; }
  .etat { gap: 6px; }
}

/* ===========================================================================
   L'assistant PATCH & FLASH. Un seul ecran qui change de contenu : le flot
   compte plus que la page, et un enchainement se lit mieux qu'un menu.
   =========================================================================== */
.flash .scene {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 22px;
  padding: 24px 0 8px; min-height: 58vh;
}
.flash h2.grand {
  font-size: clamp(24px, 6.4vw, 38px); line-height: 1.1; margin: 0; max-width: 18ch;
}
.flash .chapeau { max-width: 44ch; margin: 0 auto; text-align: center; }
.flash .principal { width: 223px; }
.flash .pied { text-align: center; max-width: 52ch; margin-left: auto; margin-right: auto; }
.flash code {
  font-family: ui-monospace, Menlo, monospace; letter-spacing: 0;
  background: rgba(241,241,241,.1); padding: 2px 6px; border-radius: 4px;
}

/* Le potard sert d'illustration, comme dans la maquette : il tourne quand on
   attend, il se fige quand il n'y a plus rien a attendre. */
.flash .illus { width: 116px; height: 116px; flex: none; opacity: .95; }
.flash .illus .aiguille { transform-origin: 50% 53px; height: 32px; top: 6px; }
.flash[data-vue] .illus { transition: opacity .3s; }
#flash-etapes[data-etape="depot"] ~ * .illus { opacity: .3; }
.flash .scene .illus .aiguille { animation: tourne 9s linear infinite; }
@keyframes tourne {
  0%   { transform: rotate(-135deg); }
  50%  { transform: rotate(135deg); }
  100% { transform: rotate(-135deg); }
}

.barre {
  width: min(320px, 100%); height: 6px; border-radius: 3px;
  background: rgba(241,241,241,.16); overflow: hidden;
}
.barre i { display: block; height: 100%; background: var(--blanc);
           border-radius: 3px; transition: width .25s ease; }

.alerte {
  max-width: 46ch; margin: 0; padding: 12px 16px;
  border-left: 3px solid var(--orange); background: rgba(141,29,19,.42);
  border-radius: 0 var(--r-carte) var(--r-carte) 0;
  font-size: 11px; font-weight: 500; letter-spacing: .04em; line-height: 1.7;
  text-align: left; color: var(--creme);
}
.alerte[hidden] { display: none; }

/* Les jalons : cinq points, celui de l'etape courante est plein. */
.jalons { display: flex; gap: 7px; list-style: none; margin: 0; padding: 0; }
.jalons li {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(241,241,241,.25);
}
#flash-etapes[data-etape="depot"]    li:nth-child(1),
#flash-etapes[data-etape="pret"]     li:nth-child(1),
#flash-etapes[data-etape="preparer"] li:nth-child(2),
#flash-etapes[data-etape="travail"]  li:nth-child(2),
#flash-etapes[data-etape="allumer"]  li:nth-child(3),
#flash-etapes[data-etape="attente"]  li:nth-child(3),
#flash-etapes[data-etape="trouve"]   li:nth-child(4),
#flash-etapes[data-etape="flash"]    li:nth-child(4),
#flash-etapes[data-etape="fini"]     li:nth-child(5) { background: var(--blanc); }
#flash-etapes[data-etape="erreur"] li { background: var(--orange); }

/* L'avertissement de tete : il reste visible tout le long de l'assistant,
   parce qu'il porte sur ce que l'outil n'a pas encore prouve. */
.alerte.avert {
  max-width: none; margin: 18px 0 0; align-self: stretch;
  border-left-color: var(--orange);
}

/* La mention d'independance et d'absence de garantie. Discrete mais lisible :
   la cacher derriere un lien reviendrait a ne pas la faire. */
.mentions {
  max-width: 54ch; margin: 4px 0 0;
  font-size: 10px; font-weight: 500; letter-spacing: .04em; line-height: 1.75;
  color: rgba(48, 48, 48, .62);
}
.mentions b { color: rgba(30, 30, 30, .88); font-weight: 700; }