/* Scanner Action Flow · mobile d'abord (360 à 430 px), utilisable sur tablette et ordinateur.
   Habillage du design system Action Flow : les jetons (couleurs, rayons, ombres, polices) sont dans
   tokens.css, chargé avant ce fichier ; le logo et l'icône dans img/. Polices auto-hébergées (SIL OFL).
   Écarts voulus au design system : boutons de 52 px et texte à 16 px (téléphone tenu en atelier),
   anneau de focus en vert 500 (le vert 300 n'atteint pas 3:1 sur blanc).
   Mise en page : fond chaud (warm 50) et contenus posés sur des cartes blanches ; l'en-tête est une
   bande blanche sur toute la largeur. */

@font-face {
  font-family: "Onest";
  src: url("/polices/onest-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/polices/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* Couleurs du jeu : imprimées sur les cartes et le plateau, elles ne viennent pas du design system. */
:root {
  --brun: #8E4A2E;               /* cartes frein */
  --brun-titre: var(--terra-900);
  --picto: var(--terra-700);     /* pictogrammes des emplacements, comme sur le plan Word */
  --vert-action: #12352B;        /* lettre de phase */
  --phase-I: #DFEDE7;
  --phase-A: #C2DCD2;
  --phase-M: #9CC6B6;
  --phase-R: #6FA696;
  --focus: var(--green-500);
  --marge: max(16px, env(safe-area-inset-left));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 1rem/1.55 var(--font-sans);
  color: var(--text-body);
  background: var(--bg-panel);
  min-height: 100dvh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--font-display); font-weight: var(--fw-display); color: var(--text-heading);
  letter-spacing: var(--ls-title); margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 7vw, 2.375rem); line-height: 1.1; letter-spacing: var(--ls-display); }
h2 { font-size: 1.375rem; line-height: 1.2; }
p { margin: 0; }
a { color: var(--green-600); text-underline-offset: 2px; }
a:hover { color: var(--green-900); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Le titre de chaque écran reçoit le focus par script (app.js, afficher) pour que le lecteur
   d'écran l'annonce ; il n'est jamais atteint au clavier, donc pas d'anneau. */
.ecran h1:focus { outline: none; }
[hidden] { display: none !important; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Petites capitales espacées du design system (« micro-label ») */
.entete-titre, .alerte-niveau, .ce-qui-le-leve {
  font-size: .6875rem; line-height: 1.4; font-weight: 600; letter-spacing: var(--ls-micro); text-transform: uppercase;
}

/* ─────────── cadre */
.bandeau-demo {
  margin: 0; padding: 8px var(--marge); background: var(--terra-100); color: var(--brun-titre);
  font-size: .875rem; font-weight: 600; text-align: center;
}
/* La bande blanche prend toute la largeur ; son contenu s'aligne sur la colonne de main (40rem). */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px max(var(--marge), calc((100% - 40rem) / 2 + var(--marge)));
  background: var(--surface-card); border-bottom: 1px solid var(--border-warm);
}
.marque { height: 24px; width: auto; flex: none; }
.entete-titre { color: var(--neutral-600); text-align: right; }
main { max-width: 40rem; margin: 0 auto; padding: 24px var(--marge) calc(32px + env(safe-area-inset-bottom)); }
.intro { display: flex; flex-direction: column; gap: var(--sp-3); }
.ecran { display: flex; flex-direction: column; gap: var(--sp-6); }
.chapo { font-size: 1.0625rem; line-height: 1.55; color: var(--text-secondary); }
.aide { font-size: .9375rem; color: var(--text-secondary); }
.pile { display: flex; flex-direction: column; gap: var(--sp-3); }
.rangee { display: flex; gap: 10px; align-items: stretch; }
.rangee > .bouton:first-child { flex: 1; }
.attente-courte { color: var(--text-secondary); }

/* ─────────── boutons (cibles de 44 px au moins) */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 20px; border-radius: var(--radius-card); border: 1.5px solid transparent;
  font-family: var(--font-sans); font-weight: 600; font-size: 1.0625rem; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.bouton:active:not(:disabled) { transform: scale(.98); }
.principal { background: var(--action-primary); border-color: var(--action-primary); color: var(--action-primary-fg); }
.principal:hover:not(:disabled) { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
.principal:not(.petit):not(:disabled) { box-shadow: var(--shadow-glow-cta); }   /* l'action principale de l'écran */
.principal:disabled { opacity: .45; cursor: not-allowed; }
.secondaire { background: var(--surface-card); color: var(--action-secondary-fg); border-color: var(--action-secondary-border); }
.secondaire:hover { background: var(--action-secondary-hover-bg); }
.icone { min-width: 52px; padding: 0; background: var(--surface-card); color: var(--green-900); border-color: var(--border-strong); }
.icone:hover { background: var(--action-secondary-hover-bg); }
.lien {
  background: none; border: 0; padding: 10px 4px; min-height: 44px; color: var(--green-900);
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  cursor: pointer; align-self: center;
}
.lien:hover { color: var(--green-600); }
.petit { min-height: 44px; padding: 8px 14px; font-size: .9375rem; }

/* ─────────── encadrés (états du design system : texte 600 sur fond 100, sans filet de côté) */
.encadre {
  border-radius: var(--radius-card); padding: 14px 16px; font-size: .9375rem; line-height: 1.5;
  background: var(--surface-card); border: 1px solid var(--border-warm);
}
.encadre.ok { background: var(--state-success-bg); border-color: transparent; color: var(--state-success-fg); font-weight: 600; }
.encadre.probleme { background: var(--state-warning-bg); border-color: transparent; }
.encadre.erreur { background: var(--state-danger-bg); border-color: transparent; }
.encadre strong { display: block; margin-bottom: 2px; color: var(--state-warning-fg); }
.encadre.erreur strong { color: var(--state-danger-fg); }
.confirmation { color: var(--state-success-fg); font-weight: 600; text-align: center; min-height: 1.5em; }

/* ─────────── 1 · accueil : le plateau rempli, les trois temps, photos de démonstration */
/* L'onde du logo, en filigrane derrière la photo (deux tracés, vert 200 et vert 100). */
.vitrine {
  position: relative; overflow: hidden; border-radius: var(--radius-panel);
  padding: 16px 14px 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 55 C 50 15 100 15 150 55 S 250 95 300 55 S 400 15 450 55' fill='none' stroke='%239DCCC3' stroke-width='2.5'/%3E%3Cpath d='M-30 65 C 30 30 80 30 130 65 S 240 100 290 65 S 390 30 440 65' fill='none' stroke='%23CDE6E1' stroke-width='2.5'/%3E%3C/svg%3E") center 22% / 100% 90px no-repeat,
    var(--green-50);
}
.vitrine img {
  width: 100%; border-radius: 10px; box-shadow: var(--shadow-lg);
  transform: rotate(-1.2deg); outline: 4px solid #fff; outline-offset: -1px;
}
.trois-temps {
  list-style: none; margin: 0; padding: 18px 0 16px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.trois-temps li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; font-size: .8125rem; line-height: 1.25; font-weight: 600; color: var(--green-900);
}
/* le pointillé qui relie un temps au précédent, de cercle à cercle */
.trois-temps li + li::before {
  content: ""; position: absolute; top: 22px; right: calc(50% + 28px); width: calc(100% + 8px - 56px);
  border-top: 2px dotted var(--green-300);
}
.temps-icone {
  width: 44px; height: 44px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--surface-card); color: var(--green-600); box-shadow: var(--shadow-sm);
}
.demo-photos {
  border-top: 1px solid var(--border-default); padding-top: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.liste-demo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.liste-demo button {
  width: 100%; text-align: left; min-height: 52px; padding: 12px 16px; border-radius: var(--radius-card);
  border: 1px solid var(--border-warm); background: var(--surface-card); color: var(--text-body);
  cursor: pointer; font-size: .9375rem; transition: box-shadow var(--dur-base) var(--ease-standard);
}
.liste-demo button:hover { box-shadow: var(--shadow-md); }
.liste-demo .refus { color: var(--brun-titre); }

/* ─────────── 2 · conseils */
.viseur { margin: 0; padding: 10px; border-radius: var(--radius-card); background: #B89A72; position: relative; }
.viseur::after {
  content: ""; position: absolute; inset: 4px; border: 2px dashed rgba(255,255,255,.85); border-radius: 10px; pointer-events: none;
}
.viseur img { border-radius: 4px; }
.conseils {
  margin: 0; padding: 4px 16px; list-style: none; display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--border-warm); border-radius: var(--radius-panel);
}
.conseils li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0;
}
.conseils li + li { border-top: 1px solid var(--border-default); }
.conseil-icone {
  width: 44px; height: 44px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--green-50); color: var(--green-600);
}

/* ─────────── 3 · aperçu */
.apercu { margin: 0; border-radius: var(--radius-panel); overflow: hidden; background: var(--surface-card); min-height: 120px; box-shadow: var(--shadow-md); }
.apercu img { width: 100%; max-height: 52vh; object-fit: contain; background: var(--neutral-900); }
.apercu figcaption { padding: 24px 16px; color: var(--text-secondary); text-align: center; }

/* ─────────── 4 · lecture en cours : la photo balayée, puis les étapes */
.scan {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-panel);
  background: var(--neutral-900); box-shadow: var(--shadow-md);
}
.scan img { width: 100%; max-height: 38vh; object-fit: cover; }
.scan::before { content: ""; position: absolute; inset: 0; background: rgba(0, 54, 45, .18); }
/* la bande lumineuse descend sur la photo : un tiers de la hauteur, déplacé par transform */
.scan::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%;
  background: linear-gradient(to bottom, rgba(107, 176, 164, 0), rgba(107, 176, 164, .5) 85%, rgba(205, 230, 225, .95));
  border-bottom: 3px solid #fff; box-shadow: 0 6px 18px rgba(232, 244, 241, .9);
  transform: translateY(-100%); animation: balaye 2.4s var(--ease-standard) infinite;
}
.scan.arrete::after { display: none; }
@keyframes balaye { to { transform: translateY(340%); } }
.etapes {
  list-style: none; margin: 0; padding: 18px 16px; display: flex; flex-direction: column; gap: 16px;
  background: var(--surface-card); border: 1px solid var(--border-warm); border-radius: var(--radius-panel);
}
.etapes li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--text-secondary); font-weight: 500; }
.etapes li::before {
  content: ""; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); box-sizing: border-box;
}
.etapes li.en-cours { color: var(--text-body); }
.etapes li.en-cours::before { border-color: var(--green-500); border-top-color: transparent; animation: tourne .9s linear infinite; }
.etapes li.fait { color: var(--green-900); }
.etapes li.fait::before {
  border: 0; background: var(--green-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .etapes li.en-cours::before { animation: none; border-top-color: var(--green-500); }
  .scan::after { display: none; }
  .bouton, .carte, .liste-demo button { transition: none; }
}

/* ─────────── 5 · validation */
#validation { display: flex; flex-direction: column; gap: 20px; }
.resume { display: flex; flex-direction: column; gap: var(--sp-3); }
.compteurs {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
}
.compteur {
  display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--radius-card);
  background: var(--surface-card); border: 1px solid var(--border-warm);
}
.compteur-nombre { font: 500 1.875rem/1 var(--font-display); letter-spacing: var(--ls-title); color: var(--green-900); }
.compteur-libelle { font-size: .8125rem; line-height: 1.25; color: var(--text-secondary); }
.compteur.a-verifier { background: var(--state-warning-bg); border-color: transparent; }
.compteur.a-verifier .compteur-nombre, .compteur.a-verifier .compteur-libelle { color: var(--state-warning-fg); }
.compteur.bloquant { background: var(--state-danger-bg); border-color: transparent; }
.compteur.bloquant .compteur-nombre, .compteur.bloquant .compteur-libelle { color: var(--state-danger-fg); }
.compteur.ok { background: var(--state-success-bg); border-color: transparent; }
.compteur.ok .compteur-nombre, .compteur.ok .compteur-libelle { color: var(--state-success-fg); }

/* alertes : « À vérifier » en ambre (warning), « Bloquant » en rouge (danger), remarques en gris */
.alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.alerte {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--radius-card);
  background: var(--state-warning-bg); font-size: .9375rem;
}
.alerte.bloquant { background: var(--state-danger-bg); }
.alerte-niveau { color: var(--state-warning-fg); }
.alerte.bloquant .alerte-niveau { color: var(--state-danger-fg); }
.alerte-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.alerte-actions button, .emplacement-alertes button {
  min-height: 44px; padding: 6px 14px; border-radius: var(--radius-card); border: 1px solid var(--state-warning-fg);
  background: var(--surface-card); color: var(--state-warning-fg); font-size: .875rem; font-weight: 600; cursor: pointer;
}
.alerte-actions button:hover, .emplacement-alertes button:hover { background: var(--neutral-50); }
.alerte.bloquant .alerte-actions button, .emplacement-alertes li.bloquant button { border-color: var(--state-danger-fg); color: var(--state-danger-fg); }
.emplacement-alertes button { display: block; margin-top: 6px; }
details.remarques { border: 1px solid var(--border-warm); border-radius: var(--radius-card); background: var(--surface-card); }
details.remarques summary { padding: 12px 14px; cursor: pointer; font-weight: 600; color: var(--text-secondary); min-height: 44px; }
details.remarques ul { margin: 0; padding: 0 14px 12px 32px; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--text-secondary); }

.emplacements { display: flex; flex-direction: column; gap: var(--sp-4); }
.emplacement {
  border: 1px solid var(--border-warm); border-radius: var(--radius-panel); overflow: hidden;
  background: var(--surface-card); box-shadow: var(--shadow-sm); scroll-margin-top: 12px;
}
/* Le filet ambre seul se confond avec le brun des freins : un halo clair de la même teinte le signale. */
.emplacement.en-alerte { border-color: var(--state-warning-fg); box-shadow: 0 0 0 3px var(--state-warning-bg); }
.emplacement.en-alerte:has(.emplacement-alertes li.bloquant) { border-color: var(--state-danger-fg); box-shadow: 0 0 0 3px var(--state-danger-bg); }
.emplacement-entete {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border-warm);
}
.emplacement-entete .picto { color: var(--picto); display: inline-flex; }
.emplacement-numero { font: 500 1.0625rem/1 var(--font-display); letter-spacing: var(--ls-title); color: var(--brun-titre); }
.emplacement-corps { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.emplacement-alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.emplacement > .emplacement-alertes { padding: 12px 12px 0; }
.emplacement-alertes li { font-size: .875rem; background: var(--state-warning-bg); border-radius: var(--radius-field); padding: 8px 10px; }
.emplacement-alertes li.bloquant { background: var(--state-danger-bg); }
.emplacement-alertes li.info { background: var(--surface-sunken); color: var(--text-secondary); }

.carte {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start;
  width: 100%; padding: 12px 14px; border-radius: var(--radius-card); text-align: left; cursor: pointer;
  border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); min-height: 56px;
  transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.carte:hover { box-shadow: var(--shadow-md); }
.carte.frein { background: var(--bg-panel); border-color: var(--border-warm); }
.carte.en-alerte { border-color: var(--state-warning-fg); box-shadow: 0 0 0 3px var(--state-warning-bg); }
.carte.en-alerte:hover { box-shadow: 0 0 0 3px var(--state-warning-bg), var(--shadow-md); }
.carte-code { font: 600 1rem/1.2 var(--font-display); color: var(--text-body); }
.carte.frein .carte-code { color: var(--brun); }
.carte-titre { grid-column: 1 / -1; font: 500 1.0625rem/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--green-900); }
.carte.frein .carte-titre { color: var(--brun-titre); }
.carte-detail { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .875rem; color: var(--text-secondary); align-items: center; }
.carte-modifier { font-size: .8125rem; font-weight: 600; color: var(--green-600); text-decoration: underline; text-underline-offset: 2px; }
.carte-vide { color: var(--text-secondary); font-style: italic; }
.ex { font-size: .8125rem; color: var(--neutral-600); }
.note { grid-column: 1 / -1; font-size: .875rem; font-weight: 600; color: var(--state-warning-fg); }
.pastille { display: inline-flex; align-items: center; gap: 6px; }
.pastille::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--couleur, var(--neutral-400)); flex: none; }
/* famille du frein : le brun de la carte (le plus clair, Apprenant, a besoin d'un liseré pour se voir sur blanc) */
.pastille.famille::before { box-shadow: inset 0 0 0 1px rgba(70, 31, 17, .3); }
.phase {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px;
  border-radius: 6px; font: 600 .8125rem/1 var(--font-display); color: var(--vert-action);
}
.ce-qui-le-leve { color: var(--green-500); margin-top: 4px; }
.proposition {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius-card);
  border: 1.5px dashed var(--state-warning-fg); background: var(--state-warning-bg);
}
.proposition p { font-size: .9375rem; }
.proposition .rangee button { flex: 1; }
.frein-vierge {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius-card);
  border: 1px solid var(--border-warm); background: var(--bg-panel);
}
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ > span { font-size: .8125rem; font-weight: 600; color: var(--text-secondary); }
.champ input, .champ textarea, .champ select, .recherche input {
  width: 100%; font-size: 1rem; padding: 10px 12px; min-height: 46px; border-radius: var(--radius-field);
  border: 1px solid var(--neutral-500); background: var(--surface-card); color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.champ :is(input, textarea, select):focus-visible, .recherche input:focus-visible {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(31, 114, 100, .25);
}
.champ textarea { min-height: 88px; resize: vertical; }
.segments { display: flex; gap: 6px; flex-wrap: wrap; }
.segments button {
  flex: 1; min-height: 44px; border-radius: var(--radius-field); border: 1px solid var(--border-strong);
  background: var(--surface-card); color: var(--text-body); cursor: pointer; font-size: .875rem; font-weight: 600;
}
.segments button[aria-pressed="true"] { background: var(--brun); border-color: var(--brun); color: #fff; }
.ajouter { align-self: flex-start; }
.frein-libre { color: var(--text-secondary); font-style: italic; padding: 4px 2px; }

details.page-de-garde { border: 1px solid var(--border-warm); border-radius: var(--radius-panel); background: var(--surface-card); }
details.page-de-garde summary { padding: 14px 16px; cursor: pointer; font-weight: 600; color: var(--green-900); min-height: 48px; }
.page-de-garde .champs { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }

.barre-generer {
  position: sticky; bottom: 0; margin: 8px calc(-1 * var(--marge)) 0; padding: 12px var(--marge) calc(12px + env(safe-area-inset-bottom));
  background: var(--surface-card); border-top: 1px solid var(--border-warm); box-shadow: 0 -4px 12px rgba(44, 39, 38, .06);
  display: flex; flex-direction: column; gap: 8px;
}
.barre-generer .raison { font-size: .875rem; color: var(--state-danger-fg); }
.barre-generer .rappel { font-size: .875rem; color: var(--text-secondary); text-align: center; }
.occupe { opacity: .6; pointer-events: none; }

/* ─────────── 6 · plan prêt */
.reussite { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.reussite-coche {
  width: 60px; height: 60px; border-radius: var(--radius-pill); display: grid; place-items: center;
  background: var(--state-success-bg); color: var(--state-success-fg);
  box-shadow: 0 0 0 8px rgba(220, 243, 236, .5);
  animation: apparait .5s var(--ease-standard) both;
}
@keyframes apparait { from { transform: scale(.5); opacity: 0; } }
.fichier {
  display: flex; gap: 18px; align-items: center; padding: 18px 16px; border-radius: var(--radius-panel);
  background: var(--surface-card); border: 1px solid var(--border-warm); box-shadow: var(--shadow-md);
}
/* miniature dessinée de la page de garde du plan : titre vert, lignes à écrire, frise des quatre phases */
.miniature {
  position: relative; flex: none; width: 66px; height: 90px; padding: 9px 7px 7px;
  display: flex; flex-direction: column; gap: 5px;
  background: #fff; border: 1px solid var(--border-strong); border-radius: 4px; box-shadow: var(--shadow-sm);
  transform: rotate(-3deg);
}
.mini-marque { width: 45%; height: 3px; border-radius: 2px; background: var(--green-300); }
.mini-titre { font: 600 8px/1.05 var(--font-display); letter-spacing: -0.01em; color: var(--green-900); }
.mini-lignes { flex: 1; background: repeating-linear-gradient(to bottom, var(--neutral-200) 0 1px, transparent 1px 6px); }
.mini-frise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 7px; }
.mini-frise i:nth-child(1) { background: var(--phase-I); }
.mini-frise i:nth-child(2) { background: var(--phase-A); }
.mini-frise i:nth-child(3) { background: var(--phase-M); }
.mini-frise i:nth-child(4) { background: var(--phase-R); }
.mini-word {
  position: absolute; right: -9px; bottom: -7px; width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center; background: #2B579A; color: #fff; font: 700 13px/1 var(--font-display);
  box-shadow: var(--shadow-sm); transform: rotate(3deg);
}
.fichier-nom { display: block; font-weight: 600; overflow-wrap: anywhere; }
.fichier-detail { display: block; font-size: .875rem; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .reussite-coche { animation: none; } }

/* ─────────── liste de choix (feuille du bas) */
dialog.feuille {
  width: 100%; max-width: 40rem; max-height: 88dvh; margin: auto auto 0; padding: 0; border: 0;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0; display: none; flex-direction: column; overflow: hidden;
  background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-lg);
}
dialog.feuille[open] { display: flex; }
dialog.feuille::backdrop { background: rgba(28, 25, 23, .45); }
.feuille-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 8px 16px; margin: 0; }
.feuille-entete h2 { font-size: 1.125rem; }
.feuille-entete .icone { border: 0; }
.feuille-actions { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 8px; }
.feuille-actions:empty { display: none; }
.recherche { padding: 4px 16px 10px; }
.recherche input { min-height: 48px; padding: 10px 14px; }
.choix-liste { list-style: none; margin: 0; padding: 0 8px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
.choix-liste button {
  width: 100%; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 2px 10px; text-align: left; padding: 10px 8px;
  min-height: 52px; border: 0; border-bottom: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body); cursor: pointer;
}
.choix-liste button:hover, .choix-liste button[aria-current="true"] { background: var(--green-50); }
.choix-liste .code { font: 600 .9375rem/1.3 var(--font-display); }
.choix-liste .titre { font-size: .9375rem; line-height: 1.3; }
.choix-liste .meta { grid-column: 2; font-size: .8125rem; color: var(--text-secondary); }
.choix-liste .vide { padding: 16px 8px; color: var(--text-secondary); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 16px; border-radius: var(--radius-card); background: var(--neutral-950); color: #fff;
  font-size: .9375rem; z-index: 10; box-shadow: var(--shadow-lg);
}

@media (min-width: 720px) {
  main { padding-top: 28px; }
  .ecran { gap: var(--sp-8); }
  .marque { height: 28px; }
  .entete-titre { font-size: .75rem; }
  .pile > .bouton { align-self: flex-start; min-width: 20rem; }
  .pile > .rangee { max-width: 26rem; }
}