/* ==========================================================================
   RETROVAULT — forgeos.css · v4 « BENTO × MEMPHIS » (direction G)
   Réf : docs/DA-V4-G.md + docs/maquettes-G/*.dc.html

   Chrome commun (header, nav pilules, barre basse mobile, pied), blocs bento,
   cartes, pilules, badges, pastilles prix, formes géométriques de fond,
   écran de connexion, panneau TRANSMETTRE.

   Supprimé en v4 (ne plus jamais réintroduire) : ouverture du vault (boot),
   rideau/CRT, scanlines, curseur custom, rémanence phosphore, mode DMG,
   stickers pixel, mascotte Vaulty, bips 8-bit.
   ========================================================================== */

/* ==========================================================================
   1. FORMES GÉOMÉTRIQUES DE FOND
   ========================================================================== */
.fo-formes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fo-formes svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* C3 — durées et courbes : css/tokens.css ; réglage fin : css/motion.css §5. */
.fo-formes .flot { animation: fo-flot var(--dur-flot) var(--ease-standard) infinite alternate; transform-origin: center; }
.fo-formes .flot:nth-child(2n) { animation-duration: var(--dur-flot-2); animation-delay: calc(var(--dur-flot) / -5); }
.fo-formes .flot:nth-child(3n) { animation-duration: var(--dur-flot-3); animation-delay: calc(var(--dur-flot) / -2.5); }
.fo-formes .tourne { animation: fo-tourne var(--dur-tourne) linear infinite; transform-origin: center; transform-box: fill-box; }

@keyframes fo-flot { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes fo-tourne { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fo-formes .flot, .fo-formes .tourne { animation: none; }
}

/* ==========================================================================
   2. BLOC BENTO — brique de base de toute la v4
   ========================================================================== */
.bento {
  position: relative;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--blanc);
  transition: transform var(--step-med) var(--ease-standard), box-shadow var(--step-med) var(--ease-standard);
}
.bento:hover { transform: translateY(-6px); }
.bento.plat:hover { transform: none; }

.bento.indigo { background: var(--vert-profond); color: #fff; box-shadow: 10px 12px 0 var(--omb-indigo); }
/* v5 : le bloc « rose » est désormais vert #22C55E → texte ENCRE (blanc = 2,3). */
.bento.rose   { background: var(--vert); color: var(--encre); box-shadow: 10px 12px 0 var(--omb-vert); }
.bento.jaune  { background: var(--jaune);  color: var(--jaune-encre); box-shadow: 10px 12px 0 var(--omb-jaune); }
.bento.corail { background: var(--corail); color: var(--corail-encre); box-shadow: 10px 12px 0 var(--omb-corail); }
.bento.clair  { background: var(--indigo-pale); color: var(--encre); box-shadow: 10px 12px 0 var(--omb-indigo); }
.bento.blanc  { background: var(--blanc); border: 1.5px solid var(--bord-carte); box-shadow: 10px 12px 0 var(--omb-rose); }

.bento.indigo h1, .bento.indigo h2, .bento.indigo h3 { color: #fff; }
.bento.rose h1, .bento.rose h2, .bento.rose h3 { color: var(--encre); }

/* QA v4 : un bloc bento cliquable est un <a>, qui porte une couleur de lien de
   l'UA (ou un `color: inherit` de couche de page) — les deux cassaient le
   contraste sur fond plein (encre sur indigo = 2,54). On reprend la main avec
   une spécificité supérieure (0,2,1) pour que le ton du bloc gagne toujours. */
a.bento.indigo, a.bento.indigo:hover, a.bento.indigo:visited { color: #fff; }
a.bento.rose, a.bento.rose:hover, a.bento.rose:visited { color: var(--encre); }
a.bento.jaune, a.bento.jaune:hover, a.bento.jaune:visited { color: var(--jaune-encre); }
a.bento.corail, a.bento.corail:hover, a.bento.corail:visited { color: var(--corail-encre); }
a.bento.clair, a.bento.blanc,
a.bento.clair:hover, a.bento.blanc:hover,
a.bento.clair:visited, a.bento.blanc:visited { color: var(--encre); }

.ombre-indigo { box-shadow: 10px 12px 0 var(--omb-indigo) !important; }
.ombre-rose   { box-shadow: 10px 12px 0 var(--omb-rose) !important; }
.ombre-vert   { box-shadow: 10px 12px 0 var(--omb-vert) !important; }
.ombre-jaune  { box-shadow: 10px 12px 0 var(--omb-jaune) !important; }
.ombre-corail { box-shadow: 10px 12px 0 var(--omb-corail) !important; }

@media (max-width: 720px) {
  .bento.indigo, .bento.rose, .bento.jaune, .bento.corail,
  .bento.clair, .bento.blanc { box-shadow: 6px 8px 0 var(--omb-indigo); }
  .bento.blanc { box-shadow: 6px 8px 0 var(--omb-rose); }
  .bento.rose { box-shadow: 6px 8px 0 var(--omb-vert); }
  .bento.jaune { box-shadow: 6px 8px 0 var(--omb-jaune); }
  .bento.corail { box-shadow: 6px 8px 0 var(--omb-corail); }
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.fo-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--blanc);
  border-bottom: 1.5px solid var(--bord-tete);
}
.fo-titlebar > .wrap {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-6);
}

.fo-brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--encre); flex: 0 0 auto;
}
.fo-brand:hover { color: var(--encre); }
.fo-mark {
  width: 40px; height: 40px; border-radius: 14px;
  background: var(--indigo);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.fo-mark svg { width: 21px; height: 21px; }
.fo-brand > span:not(.fo-os) {
  font-family: var(--f-titre); font-weight: 600; font-size: 25px;
  letter-spacing: -0.025em; line-height: 1;
}
.fo-brand > span b { font-weight: 600; }
.fo-os {
  font-family: var(--f-corps); font-weight: 600; font-size: 12px;
  color: var(--gris-2); border-radius: var(--r-p);
  background: var(--indigo-pale); padding: 5px 11px;
}

.fo-nav { flex: 1 1 auto; min-width: 0; }
.fo-nav > .wrap { padding: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fo-tab {
  display: inline-flex; align-items: center;
  border-radius: var(--r-p);
  padding: 10px 16px;
  font-family: var(--f-corps); font-weight: 600; font-size: 15.5px;
  color: var(--gris); background: transparent;
  transition: background var(--step-fast) var(--ease-standard), color var(--step-fast) var(--ease-standard);
}
.fo-tab kbd { display: none; }
.fo-tab:hover { background: var(--indigo-pale); color: var(--encre); }
.fo-tab[aria-current="page"] { background: var(--indigo-pale); color: var(--encre); }

.fo-status { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.fo-clock { font-family: var(--f-corps); font-weight: 600; font-size: 14px; color: var(--gris-2); }
.fo-open {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--r-p); padding: 7px 14px;
  font-size: 13px; font-weight: 600;
  background: var(--indigo-pale); color: var(--gris-2);
}
.fo-open i { width: 9px; height: 9px; border-radius: var(--r-p); background: var(--bord-champ); }
.fo-open.is-open { background: var(--menthe-pale); color: var(--vert-profond); }
.fo-open.is-open i { background: var(--menthe); }

.fo-vault {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-p); padding: 12px 22px; min-height: 48px;
  font-weight: 700; font-size: 19px;
  color: #fff; background: var(--violet);
  transition: transform var(--step-fast) var(--ease-standard);
}
.fo-vault svg { stroke: #fff; }
.fo-vault:hover { transform: translateY(-2px); color: #fff; background: var(--violet-fonce); }
.fo-vault.is-on { background: var(--vert-profond); }

/* pas de ligne « run », de tape-meter ni de toggle SFX en v4 */
.fo-runline, .fo-run, .fo-sfx, .fo-tape-meter, .fo-press, .crt-overlay { display: none !important; }

@media (max-width: 1180px) {
  .fo-titlebar > .wrap { gap: var(--s-4); flex-wrap: wrap; }
  .fo-nav { order: 3; flex-basis: 100%; }
  .fo-nav > .wrap { padding-bottom: 10px; }
}
@media (max-width: 720px) {
  .fo-nav { display: none; }
  .fo-clock { display: none; }
  .fo-os { display: none; }
  .fo-brand > span:not(.fo-os) { font-size: 21px; }
  /* 15 px : trop petit pour du blanc sur violet (4,23) → vert profond (7,1) */
  .fo-vault { padding: 10px 16px; font-size: 15px; min-height: 44px; background: var(--vert-profond); }
  .fo-vault:hover { background: var(--vert-nuit); }
}
/* très petits écrans : l'état de l'atelier et « Mon compte » passent en pastilles */
@media (max-width: 560px) {
  .fo-titlebar > .wrap { gap: var(--s-3); }
  .fo-open span { display: none; }
  .fo-open { padding: 9px 11px; gap: 0; }
  .fo-vault span { display: none; }
  .fo-vault { padding: 11px; gap: 0; min-width: 44px; justify-content: center; background: var(--violet); }
}

/* ==========================================================================
   4. BARRE BASSE MOBILE (5 icônes)
   ========================================================================== */
.fo-keybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--blanc);
  border-top: 1.5px solid var(--bord-tete);
  padding-bottom: env(safe-area-inset-bottom);
  display: none;
}
.fo-keybar ul { display: flex; }
.fo-keybar li { flex: 1 1 0; min-width: 0; }
.fo-key {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: var(--keybar-h); padding: 8px 2px;
  color: var(--gris-2); font-size: 11px; font-weight: 600;
  text-align: center; background: none; box-shadow: none;
}
.fo-key svg { stroke: var(--gris-2); }
.fo-key[aria-current="page"] { color: var(--indigo); }
.fo-key[aria-current="page"] svg { stroke: var(--indigo); }
.fo-key:hover { transform: none; box-shadow: none; color: var(--indigo); }

@media (max-width: 720px) {
  .fo-keybar { display: block; }
  body { padding-bottom: calc(var(--keybar-h) + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   5. PIED DE PAGE
   ========================================================================== */
.fo-footer {
  margin-top: var(--s-9);
  background: var(--indigo-pale);
  padding: var(--s-7) 0 var(--s-6);
}
.fo-foot-row, .fo-foot-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500;
}
.fo-foot-row { font-size: 16px; font-weight: 600; }
.fo-foot-legal { margin-top: var(--s-4); color: var(--gris-2); font-weight: 400; font-size: 14px; }
/* QA v4 : le « · » est purement décoratif (il est aussi aria-hidden côté JS).
   L'ancienne couleur --bord-champ donnait 1,16 sur le fond indigo-pâle :
   on passe à --gris-2 (7,30 sur --indigo-pale), AA même pour un lecteur qui
   le vocaliserait. */
.fo-footer .sep { color: var(--gris-2); }
.fo-footer a { color: var(--indigo); }
.fo-footer a:hover { color: var(--encre); }

/* QA v4 — cibles tactiles du pied : elles faisaient 25 px de haut. WCAG 2.5.8
   ne dépend pas de la largeur d'écran (un portable tactile de 1440 px compte
   autant qu'un téléphone), donc la règle s'applique à TOUTES les largeurs.
   Le rythme visuel ne bouge pas : la ligne est un flex qui se contente d'être
   plus haute, on annule son `row-gap` pour compenser. */
.fo-foot-row a, .fo-foot-legal a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: 2px;
}
.fo-foot-row, .fo-foot-legal { row-gap: 0; }
.fo-brand { min-height: 44px; }
.fo-mem { color: var(--gris-2); }

/* ==========================================================================
   6. PILULES (boutons)
   ========================================================================== */
.pill, .btn, .key {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-p);
  padding: 15px 26px;
  min-height: 48px;
  font-family: var(--f-corps); font-weight: 700; font-size: 19px;
  text-transform: none; letter-spacing: 0;
  /* v5 : la pilule pleine par défaut = CTA primaire violet (maquette M3).
     Blanc sur violet = 4,23 → 19 px gras obligatoire. Variantes plus bas. */
  background: var(--violet); color: #fff;
  border: 0;
  transition: transform var(--step-fast) var(--ease-standard), background var(--step-fast) var(--ease-standard), color var(--step-fast) var(--ease-standard);
}
.pill svg, .btn svg, .key svg { stroke: currentColor; }
.pill:hover, .btn:hover, .key:hover { transform: translateY(-2px); color: #fff; }
.pill:not([class*="pill-"]):not([class*="btn-"]):hover,
.btn:not([class*="pill-"]):not([class*="btn-"]):hover { background: var(--violet-fonce); }
/* Les touches (.key) restent des bascules encre, pas des CTA. */
.key { background: var(--noir); font-size: 16px; font-weight: 600; }

.pill-ghost, .btn-ghost, .btn-secondaire {
  background: var(--blanc); color: var(--encre); font-size: 16px; font-weight: 600;
  border: 1.5px solid var(--bord-champ);
}
.pill-ghost:hover, .btn-ghost:hover, .btn-secondaire:hover { color: var(--encre); border-color: var(--encre); }

.pill-blanc { background: var(--blanc); color: var(--encre); }
.pill-blanc:hover { color: var(--encre); }
.pill-voile { background: transparent; color: #fff; border: 1.5px solid #fff; }
.pill-voile:hover { background: rgba(255, 255, 255, .22); }

/* CTA primaire v5 = violet. Blanc sur #8B5CF6 = 4,23 → grand texte obligatoire :
   19 px gras minimum (WCAG 1.4.3, seuil 3:1 à 18,66 px gras). */
.btn-braise, .btn-primaire, .pill-rose { background: var(--violet); color: #fff; font-size: 19px; font-weight: 700; }
.btn-braise:hover, .btn-primaire:hover, .pill-rose:hover { background: var(--violet-fonce); color: #fff; }

.pill-indigo, .btn-bleu { background: var(--vert-profond); color: #fff; font-size: 16px; font-weight: 600; }
.pill-indigo:hover, .btn-bleu:hover { background: var(--vert-nuit); color: #fff; }

.pill-jaune, .btn-jaune { background: var(--menthe); color: var(--encre); }
.pill-jaune:hover, .btn-jaune:hover { color: var(--jaune-encre); }

.btn-mute { background: var(--surface-2); color: var(--gris); font-size: 16px; font-weight: 600; }
.btn-mute:hover { background: var(--bord-sep); color: var(--encre); }

.btn-danger { background: var(--blanc); color: var(--encre); border: 1.5px solid var(--encre); font-size: 16px; font-weight: 600; }
.btn-danger:hover { background: var(--encre); color: #fff; }

.key[aria-pressed="true"] { background: var(--vert-profond); color: #fff; }
.key[aria-pressed="false"] { background: var(--indigo-pale); color: var(--gris); }
.key[aria-pressed="false"]:hover { color: var(--encre); }

.btn-sm { min-height: 42px; padding: 10px 18px; font-size: 15px; font-weight: 600; }
.btn-lg { min-height: 56px; padding: 17px 32px; font-size: 19px; }
.btn-full, .pill-full { width: 100%; }
.pill[disabled], .btn[disabled], .key[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-lien {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
  background: none; box-shadow: none; border: 0; padding: 0;
  color: var(--indigo); font-weight: 600; font-size: 16px;
}
.btn-lien:hover { color: var(--encre); transform: none; }

/* ==========================================================================
   7. CARTES & FENÊTRES (.win = bloc bento blanc)
   ========================================================================== */
.card, .win {
  position: relative;
  background: var(--blanc);
  border: 1.5px solid var(--bord-carte);
  border-radius: var(--r-2);
  box-shadow: 10px 12px 0 var(--omb-rose);
  transition: transform var(--step-med) var(--ease-standard), box-shadow var(--step-med) var(--ease-standard);
}
.card:hover, a.win:hover, .win.is-clic:hover { transform: translateY(-6px); }
.card.omb-bleu, .win.omb-bleu, .win.accent { box-shadow: 10px 12px 0 var(--omb-indigo); }
.card.omb-jaune, .win.omb-jaune { box-shadow: 10px 12px 0 var(--omb-jaune); }
.card.omb-lavande, .win.omb-lavande { box-shadow: 10px 12px 0 var(--omb-corail); }

.win-bar {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: 20px 22px 0;
  font-family: var(--f-titre); font-weight: 600;
}
.win-t { font-size: var(--t-m); color: var(--encre); flex: 1 1 auto; min-width: 0; }
.win-x {
  font-family: var(--f-corps); font-weight: 600; font-size: 13px;
  background: var(--indigo-pale); color: var(--indigo-txt);
  border-radius: var(--r-p); padding: 6px 13px;
}
.win-btns { display: none; }
.win-body { padding: 14px 22px 24px; }
.win-body.tight { padding: 12px 20px 20px; }
.win-foot {
  padding: 14px 22px;
  border-top: 1.5px solid var(--bord-carte);
  font-size: 14px; color: var(--gris);
}
.win.is-min .win-body, .win.is-min .win-foot { display: none; }

/* ==========================================================================
   8. BADGES, PASTILLES, ÉTIQUETTES
   ========================================================================== */
.chip, .etiq, .badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-p); padding: 8px 14px;
  font-family: var(--f-corps); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0; text-transform: none;
  background: var(--indigo-pale); color: var(--indigo-txt);
  border: 0;
}
.chip.jaune, .etiq.jaune, .badge.jaune { background: var(--jaune-pale); color: var(--jaune-txt); }
.chip.bleu,  .etiq.bleu,  .badge.bleu,
.chip.indigo, .etiq.indigo, .badge.indigo { background: var(--indigo-pale); color: var(--indigo-txt); }
.chip.rose, .etiq.rose, .badge.rose, .chip.reservee { background: var(--rose-pale); color: var(--rose-txt); }
.chip.lavande, .etiq.lavande, .badge.lavande, .chip.corail { background: var(--surface-2); color: var(--encre); }
/* v5 : DISPO = menthe/encre · RÉSERVÉE = surface/encre · VENDUE = gris clair · état = surface-2 */
.chip.menthe, .etiq.menthe, .badge.menthe, .chip.dispo { background: var(--menthe); color: var(--encre); }
.chip.gris, .etiq.gris, .badge.gris, .chip.vendue { background: var(--surface-2); color: var(--gris); }
.chip[aria-pressed="true"] { background: var(--vert-profond); color: #fff; }

/* étiquette d'accroche jaune (hero) */
.kick, .sect-head .kick {
  display: inline-flex; align-items: center; align-self: flex-start;
  border-radius: var(--r-p); background: var(--menthe);
  color: var(--encre); padding: 9px 18px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0;
  text-transform: none; margin-bottom: var(--s-4);
}

/* v5 : sur un bloc menthe ou vert, l'accroche menthe disparaîtrait → pilule blanche */
.bento.jaune .kick, .bento.rose .kick { background: var(--blanc); color: var(--encre); }

/* pastille prix */
/* v5 : pastille prix violette, texte blanc Sora 700 ≥ 19 px (grand texte, 4,23). */
.prix {
  display: inline-flex; align-items: center;
  background: var(--violet); color: #fff;
  border-radius: var(--r-p);
  padding: 10px 19px;
  font-family: var(--f-titre); font-weight: 700; font-size: max(19px, var(--e-m));
  line-height: 1;
}
/* v5 : toutes les pastilles prix sont violettes (les tons v4 indigo/jaune s'alignent). */
.prix.indigo, .prix.bleu, .prix.jaune { background: var(--violet); color: #fff; }
.prix.tourne { transform: rotate(-4deg); }
.prix.grand { font-size: var(--e-l); padding: 13px 24px; }

/* étiquette « photo réelle » sur la photo */
.tag-photo {
  background: rgba(255, 255, 255, .94);
  border-radius: var(--r-p); padding: 7px 14px;
  font-size: 12px; font-weight: 600; color: var(--encre);
}

.legende, .vo-legend, [data-legende] {
  font-size: 13px; font-weight: 500; color: var(--gris-2);
  text-transform: none; letter-spacing: 0;
}

/* ==========================================================================
   9. PHOTOS
   ========================================================================== */
.screen {
  position: relative;
  background: var(--indigo-pale);
  border: 0;
  border-radius: var(--r-2);
  overflow: hidden;
}
.screen::before, .screen::after { content: none !important; }
.screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modele-wrap { position: relative; background: var(--indigo-pale); border-radius: var(--r-2); overflow: hidden; }
.modele { width: 100%; height: 100%; object-fit: contain; }
.modele.halo { filter: none; }

/* photo de console qui déborde du bloc coloré */
.bento-photo {
  position: absolute; pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(11, 31, 23, .18));
}

.coulee-bar, .coulee-on, .flame-anim, .spark, .crt-flash, .crt-roll, .crt-veil,
.rem, .vaulty, .vaulty-bulle, .stick, .store, .etagere, .vlt-core, .vlt-door,
.vlt-amp, .vlt-line, .vlt-skip, .vlt-bolts, .vlt-enseigne, .vlt-leaf,
.fo-boot-inner { display: none !important; }

/* ==========================================================================
   10. SECTIONS
   ========================================================================== */
.sect { padding: var(--s-7) 0 0; position: relative; }
.sect-head { margin-bottom: var(--s-5); }
.sect-head h2 { font-size: var(--t-xxl); margin-bottom: var(--s-3); }
.sect-head p { color: var(--gris); max-width: 62ch; font-size: var(--c-m); }
.sect-hex, .sect-lab { display: none !important; }
.rule-dash { border-top: 2px solid var(--bord-sep); border-radius: 2px; margin: var(--s-6) 0; }

/* en-tête de section « titre à gauche / note à droite » (maquette G) */
.tete-sect {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-5); flex-wrap: wrap;
}
.tete-sect h2 { margin: 0; font-size: var(--t-xxl); }
.tete-sect > span, .tete-sect > a { font-size: 15px; color: var(--gris); font-weight: 500; }
.tete-sect > a { color: var(--indigo); font-weight: 600; font-size: 16px; }

/* ==========================================================================
   11. TEXTES TECHNIQUES (.term, .log)
   ========================================================================== */
.term, .prompt {
  font-family: var(--f-corps); font-weight: 400; font-size: var(--c-s);
  color: var(--gris); line-height: 1.6;
}
.term .ok { color: var(--menthe-nuit); font-weight: 600; }
.term .dim { color: var(--gris-2); }
.term b { color: var(--encre); font-weight: 600; }
.cur::after, .cursor { content: none !important; display: none !important; }

.log { display: flex; flex-direction: column; gap: 9px; }
.log li {
  position: relative; padding-left: 26px;
  font-size: var(--c-s); color: var(--gris); font-weight: 400;
}
.log li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 11px; height: 11px; border-radius: var(--r-p); background: var(--indigo);
}
.log li b { color: var(--encre); font-weight: 600; }

.vide {
  border-radius: var(--r-2); background: var(--indigo-pale);
  padding: var(--s-6); text-align: center; color: var(--gris);
}

/* ==========================================================================
   12. CHAMPS
   ========================================================================== */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="date"], select, textarea,
.ad-in, .champ {
  width: 100%;
  background: var(--blanc);
  border: 1.5px solid var(--bord-champ);
  border-radius: var(--r-1);
  padding: 14px 16px;
  min-height: 48px;
  font-family: var(--f-corps); font-weight: 400; font-size: 16px;
  color: var(--encre);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--step-fast) var(--ease-standard);
}
input::placeholder, textarea::placeholder { color: var(--gris-2); }
/* QA v4 : cette règle (chargée après tokens.css, même spécificité) écrasait
   le liseré de focus clavier global sur TOUS les champs — il ne restait qu'un
   changement de bordure de 1,5 px. On ne neutralise plus que le focus souris. */
input:focus, select:focus, textarea:focus { border-color: var(--indigo); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--indigo); outline-offset: 3px;
}
textarea { min-height: 110px; line-height: 1.6; resize: vertical; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234A4866' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 42px;
}
.switch, .pot, .bar { border-radius: var(--r-p); }

/* ==========================================================================
   13. APPARITION (cascade)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  /* C3 — la cascade complète (index `--rv-i` × `--pas-cascade`) est dans
     css/motion.css §1, chargé après ce fichier. Ici : l'état de départ. */
  transition:
    opacity   var(--dur-base) var(--ease-enter) calc(var(--rv-i, 0) * var(--pas-cascade)),
    transform var(--dur-base) var(--ease-enter) calc(var(--rv-i, 0) * var(--pas-cascade));
}
.reveal.is-in { opacity: 1; transform: none; }
.decoding { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   13 bis. TRANSITIONS DE PAGE — P4 (docs/UX-AUDIT-2026.md §2 et §3/R5)

   Vraies transitions CROSS-DOCUMENT, en CSS pur : le navigateur les joue
   lui-même d'une page à l'autre, sans JS, sans framework, sans routeur.
   Chrome 126+ et Safari 18.2+ les exécutent ; Firefox navigue normalement
   (dégradation silencieuse voulue — R5 : « ne pas polyfiller »).

   La classe `.fo-part` reste le REPLI pour les navigateurs sans
   @view-transition : js/forgeos.js ne l'applique plus que dans ce cas.
   ========================================================================== */
@view-transition { navigation: auto; }

/* R1/R5 : 220 ms sur la courbe unique du site, jamais de durée en dur. */
::view-transition-group(*) {
  animation-duration: var(--step-med);
  animation-timing-function: var(--ease);
}
/* Le chrome (en-tête, barre basse) ne clignote pas : il est « le même
   élément » d'une page à l'autre, donc il ne fait pas partie du fondu. */
.fo-header { view-transition-name: rv-header; }
.fo-keybar { view-transition-name: rv-keybar; }
::view-transition-group(rv-header),
::view-transition-group(rv-keybar) {
  animation-duration: var(--step-fast);
}

/* R8 : en mouvement réduit, on ne SUPPRIME pas la transition côté repli
   (le fondu d'opacité reste acceptable), mais la transition de vue, qui
   déplace et redimensionne des éléments, est coupée. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .fo-header, .fo-keybar { view-transition-name: none; }
}

/* Repli JS (navigateurs sans @view-transition) : fondu de sortie court. */
html.fo-part body { opacity: 0; transition: opacity var(--v-crt) var(--ease-standard); }
@media (prefers-reduced-motion: reduce) { html.fo-part body { opacity: 1; transition: none; } }

/* ==========================================================================
   13 ter. MODALE NATIVE — P9 · le composant forgeos.dialog()

   `<dialog>` + `showModal()` : le navigateur fournit le top layer, le piège
   de focus, l'inertie du fond et Échap. Le CSS ne fait plus que la mise en
   page et l'habillage — plus aucun z-index à surenchérir.

   ⚠️ DA (P9) : l'ombre colorée décalée reste sur la CARTE (.fiche-win,
   .ac-art), jamais sur le ::backdrop, qui ne sait pas la tenir.
   ========================================================================== */
.fo-dialog {
  /* Un <dialog> modal est centré par l'UA ; on reprend la main pour pouvoir
     faire défiler une fiche longue et coller la carte en haut sur mobile. */
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  margin: 0;
  padding: var(--s-5);
  border: 0;
  background: transparent;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--encre);
}
.fo-dialog::backdrop { background: rgba(11, 31, 23, .42); }

/* Entrée : opacité seule (R2 — aucun overshoot sur un contenu de lecture),
   sortie en 2/3 du temps d'entrée. `allow-discrete` est indispensable, sinon
   la sortie est instantanée (piège nº 1 de ce motif — §3/R6). */
.fo-dialog,
.fo-dialog::backdrop {
  opacity: 0;
  transition: opacity calc(var(--step-med) * 2 / 3) var(--ease),
              overlay calc(var(--step-med) * 2 / 3) var(--ease) allow-discrete,
              display  calc(var(--step-med) * 2 / 3) var(--ease) allow-discrete;
}
.fo-dialog[open],
.fo-dialog[open]::backdrop {
  opacity: 1;
  transition-duration: var(--step-med);
}
@starting-style {
  .fo-dialog[open],
  .fo-dialog[open]::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fo-dialog, .fo-dialog::backdrop { transition: none; }
}

@media (max-width: 720px) {
  .fo-dialog { padding: 0; }
}

/* ==========================================================================
   14. TOAST
   ========================================================================== */
.fo-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 200;
  background: var(--noir); color: #fff;
  border-radius: var(--r-p); padding: 13px 24px;
  font-weight: 600; font-size: 15px; max-width: 92vw;
}
@media (max-width: 720px) { .fo-toast { bottom: calc(var(--keybar-h) + 16px); } }

/* ==========================================================================
   15. PANNEAU TRANSMETTRE (modal)
   ========================================================================== */
/* P9 — le panneau TRANSMETTRE est un <dialog> natif (.fo-dialog) : position,
   top layer, backdrop et défilement viennent de .fo-dialog. Il ne reste ici
   que sa mise en page propre. */
.fo-modal {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
}
.fo-modal .win { width: 100%; max-width: 640px; margin: auto; box-shadow: 12px 14px 0 var(--omb-indigo); }
.fo-modal .win:hover { transform: none; }
.fo-x {
  border-radius: var(--r-p); background: var(--indigo-pale); color: var(--indigo-txt);
  font-weight: 600; font-size: 14px; padding: 9px 15px; min-height: 40px;
}
.fo-x:hover { background: var(--noir); color: #fff; }
.fo-msg {
  width: 100%; min-height: 150px;
  background: var(--indigo-pale); border: 1.5px solid var(--bord-champ);
  border-radius: var(--r-1); padding: 14px; font-size: 14.5px;
}
.fo-canaux { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s-4); }
.fo-canal {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: var(--blanc); color: var(--encre);
  border: 1.5px solid var(--bord-champ); border-radius: var(--r-1);
  padding: 13px 16px; min-height: 52px; font-weight: 500; font-size: 15.5px;
  transition: border-color var(--step-fast) var(--ease-standard), transform var(--step-fast) var(--ease-standard);
}
.fo-canal:hover { border-color: var(--indigo); transform: translateX(2px); color: var(--encre); }
.fo-canal svg { stroke: var(--indigo); flex: 0 0 auto; }
.fo-canal span:first-of-type { flex: 1 1 auto; }
.fo-canal .k {
  flex: 0 0 auto; border-radius: var(--r-p); background: var(--indigo-pale);
  color: var(--indigo-txt); padding: 5px 11px; font-size: 12.5px; font-weight: 600;
}
.fo-shake { animation: none; }
.fo-transmis { color: var(--menthe-nuit); font-weight: 600; }

.fo-dem { background: var(--indigo-pale); border-radius: var(--r-1); padding: var(--s-4); margin-bottom: var(--s-4); }
.fo-dem-ok { color: var(--menthe-nuit); font-weight: 600; }
.fo-dem-lien { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--indigo); }

/* ==========================================================================
   16. ÉCRAN DE CONNEXION — maquette G-Connexion
   ========================================================================== */
.adl {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-6) var(--s-4);
  background: var(--indigo-pale);
  overflow: hidden;
  max-width: none;
}
.adl-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px;
  background: var(--blanc);
  border-radius: var(--r-3);
  box-shadow: 12px 14px 0 var(--omb-rose);
  padding: 32px 28px 34px;
}
.adl-store { display: none; }
.adl-body { display: flex; flex-direction: column; gap: 18px; }
.adl-marque { display: flex; align-items: center; gap: 12px; }
.adl-marque .fo-mark { width: 40px; height: 40px; }
.adl-marque span {
  font-family: var(--f-titre); font-weight: 600; font-size: 23px; letter-spacing: -0.025em;
}
.adl-t {
  font-family: var(--f-titre); font-weight: 600; font-size: 34px;
  line-height: 1.04; letter-spacing: -0.025em; text-transform: none; color: var(--encre);
}
.adl-t b { font-weight: 600; color: var(--indigo); }
.adl-sub { font-size: 15.5px; line-height: 1.5; color: var(--gris); }
.adl-msg { font-size: 14.5px; color: var(--gris-2); }
.adl-hello { display: none; }

.adl-oauth { display: flex; flex-direction: column; gap: 10px; }
.adl-g, .adl-apple {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; border-radius: var(--r-p);
  padding: 15px 26px; font-weight: 600; font-size: 16px;
  transition: transform var(--step-fast) var(--ease-standard), border-color var(--step-fast) var(--ease-standard);
}
.adl-g { background: var(--blanc); color: var(--encre); border: 1.5px solid var(--bord-champ); }
.adl-g:hover { transform: translateY(-2px); border-color: var(--encre); }
.adl-g svg { width: 20px; height: 20px; }
.adl-apple { background: var(--indigo-pale); color: var(--gris-2); cursor: not-allowed; }
.adl-apple svg { width: 20px; height: 20px; stroke: var(--gris-2); }

.adl-ou { display: flex; align-items: center; gap: 14px; }
.adl-ou span.tr { flex: 1 1 auto; height: 2px; border-radius: 2px; background: var(--bord-sep); }
.adl-ou span.m { font-size: 12.5px; font-weight: 600; color: var(--gris-2); }

.adl-champ { display: flex; flex-direction: column; gap: 8px; }
.adl-champ input, .adl-champ .ad-in { flex: 0 0 auto; height: 48px; }
.adl-magic { width: 100%; }

.adl-plus { border: 0; }
.adl-plus > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; font-size: 15px; font-weight: 600; color: var(--indigo);
}
.adl-plus > summary::-webkit-details-marker { display: none; }
.adl-plus > summary svg { stroke: var(--indigo); }
.adl-plus[open] > summary { margin-bottom: var(--s-3); }
.adl-plus .label { margin-bottom: 6px; }
.adl-plus .ad-acts { margin-top: var(--s-4); }

.adl-aide { font-size: 13.5px; color: var(--gris-2); line-height: 1.55; }
.adl-erreur {
  background: var(--rose-pale); border-radius: var(--r-1); padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}

@media (max-width: 420px) {
  .adl-box { padding: 24px 20px 26px; box-shadow: 8px 10px 0 var(--omb-rose); }
  .adl-t { font-size: 28px; }
}

/* ==========================================================================
   17. CARTE PRODUIT (accueil / consoles / journal)
   ========================================================================== */
.rv-carte { overflow: hidden; display: flex; flex-direction: column; }
.rv-carte .photo { position: relative; background: var(--indigo-pale); height: 204px; overflow: hidden; }
.rv-carte .photo img { width: 100%; height: 100%; object-fit: cover; }
.rv-carte .tag-photo { position: absolute; top: 14px; left: 14px; }
.rv-carte .prix { position: absolute; right: 14px; bottom: 14px; }
.rv-carte .corps { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.rv-carte h3 { font-size: var(--t-m); }
.rv-carte p { font-size: 15px; line-height: 1.55; color: var(--gris); }

/* P7 — réassurance sur la carte : ce qui est refait, puis garantie / test /
   état. Micro-typo assumée (13,5 px) : c'est de la méta, pas de la lecture. */
.rv-carte .refait,
.rv-carte .rassure {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gris-2);
  margin: 0;
}
.rv-carte .refait { color: var(--gris); }
.rv-carte .refait b { color: var(--encre); font-weight: 600; }
.rv-carte .rassure {
  border-top: 1.5px solid var(--bord-sep);
  padding-top: 10px;
}

/* ==========================================================================
   QA v4 (16/09) — LISIBILITÉ MOBILE
   Audit à 320 / 390 px : une grande partie du corps de texte descendait à
   14,5–15 px (token --c-s, `.desc`, `.accroche`, `.rep-d`, `.ac-chapo`, les
   <li> des listes de règles…). Sur un téléphone c'est sous le plancher de
   16 px. On remonte le CORPS uniquement : les légendes de photo, les méta,
   les puces et les étiquettes (.legende, .tag-photo, .chip, .etiq, .kick,
   .*-meta) restent en micro-typo, c'est leur rôle.
   ========================================================================== */
@media (max-width: 720px) {
  :root { --c-s: 16px; }

  /* corps de texte : plancher 16 px. Les micro-typos assumées (légendes de
     photo, méta, étiquettes, puces, champs) sont exclues nommément — leur
     taille est un choix de hiérarchie, pas un oubli. */
  main p:not(.legende):not(.ac-meta):not(.ac-c-maj):not(.cfg-stage-meta):not(.recap-note):not(.etape-note):not(.adl-aide):not(.tag-photo):not(.term):not(.refait):not(.rassure),
  main li:not(.rvide),
  main dd,
  .desc, .accroche, .rep-d, .ac-chapo, .piece-quoi, .etat-line,
  .prix-val, .tete-compte, .adl-sub,
  .rv-carte p:not(.refait):not(.rassure), .term {
    /* !important assumé : c'est un plancher d'accessibilité, il doit passer
       devant les règles de page plus spécifiques (.pg-consoles .notes li…). */
    font-size: 16px !important;
  }
  .pg-home .rayon p, .pg-pc .offre p { font-size: 16px !important; max-width: none; }

}

/* QA v4 — cibles tactiles des en-têtes de section (« Tout l'inventaire »,
   « Tous les guides »…) : 25 px → 44 px, à toutes les largeurs comme le pied.
   Les liens EN LIGNE dans une phrase restent hors périmètre : WCAG 2.5.8 les
   exempte explicitement, et les agrandir casserait l'interligne du texte. */
.tete-sect > a, .tete-sect-bento a.pill-ghost {
  display: inline-flex; align-items: center; min-height: 44px;
}