/* ===========================================================================
   / — le seuil de la marque (#801)
   ---------------------------------------------------------------------------
   Ce fichier ne DÉCLARE aucune couleur, aucune police, aucun rayon : il cite
   `optifisc-tokens.css`. Un `#hex` ici est un bug, pas un choix — la page
   d'accueil était jusqu'ici du HTML inline dans `routes/web.php`, c'est-à-dire
   la seule surface front qu'aucun audit ne lisait.

   Composition (maquette « Accueil 29 pouces ») : fond océan plein écran, marque
   centrée, une carte claire de 720 px posée dessus. Un seul état de carte
   visible à la fois — c'est `accueil.js` qui en révèle un.
   =========================================================================== */

/* Le socle pose une grille à deux pistes pour le shell (`body>*{grid-column:2}`).
   `/` n'a pas de shell (cf. le balisage) : on repasse en flux normal. */
body{
  display:block;
  background:var(--of-ocean-950);
  background-attachment:scroll;
  color:var(--of-white);
}

.acc-seuil{
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:40px;
  padding:72px 24px;
}

.acc-logo{display:flex;align-items:center;gap:12px}
.acc-logo .of-marque-etoile svg{width:32px;height:32px}
.acc-logo-mot{
  font-family:var(--of-font-display);
  font-size:31px;line-height:34px;font-weight:500;
  letter-spacing:.2px;color:var(--of-white);
}

.acc-hote{display:block;width:100%;max-width:720px}

/* ---------- La carte ---------- */

.acc-carte{
  width:100%;
  padding:40px;
  border-radius:var(--of-radius-lg);
  background:var(--of-surface-200);
  color:var(--of-ink-950);
  box-shadow:var(--of-shadow-2);
  /* #807 — geste partagé `ofEmerge` (optifisc.css). La translation passe de
     14 à 8 px : trois « émerge » vivaient avec trois distances, et c'est le
     socle qui fait foi. */
  animation:ofEmerge .3s var(--of-ease-emerge) both;
}
.acc-carte[hidden]{display:none}
/* L'attente est plus discrète que les deux états de contenu : elle ne doit pas
   se lire comme une réponse. */
.acc-carte--attente{padding:28px 40px}


.acc-surtitre{
  margin:0;
  font:var(--of-eyebrow-s);letter-spacing:.08em;text-transform:uppercase;
  color:var(--of-ink-550);
}
.acc-carte h1{
  margin:8px 0 0;
  font-family:var(--of-font-display);
  font-size:40px;line-height:46px;font-weight:500;letter-spacing:-.2px;
  color:var(--of-ink-950);
}
.acc-phrase{margin:10px 0 0;font-size:15px;line-height:24px;color:var(--of-ink-650)}
.acc-carte--attente .acc-phrase{margin-top:4px;font-size:13px;line-height:20px}

/* ---------- Les tuiles ---------- */

.acc-tuiles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:26px;
}
.acc-tuile{
  padding:15px 16px;
  border-radius:var(--of-radius-md);
  background:var(--of-surface-100);
  box-shadow:inset 0 0 0 1px var(--of-line-200);
}
/* ⚠️ PAS DE LAITON SUR LA TUILE D'ÉCHÉANCE, alors que la maquette la teinte.
   Le laiton est la SIGNATURE du rail fiscal, et sa liste de porteurs est fermée
   (`DesignSystemeFabriquesTest`) : `/` est un seuil de marque, pas une surface
   fiscale. C'est exactement l'arbitrage que l'ancienne page inline avait déjà
   rendu pour ses pastilles (#765) — le libellé porte le sens, la couleur non.
   Les trois tuiles partagent donc le même habillage. */
.acc-tuile-l{
  margin:0;
  font:var(--of-eyebrow-s);letter-spacing:.08em;text-transform:uppercase;
  color:var(--of-ink-550);
}
.acc-tuile-v{
  margin:3px 0 0;
  font-family:var(--of-font-data);
  font-size:21px;line-height:26px;font-weight:600;
  color:var(--of-ink-950);
  font-variant-numeric:tabular-nums lining-nums;
}
/* Une valeur non mesurée se dit en prose, pas en chiffres : elle sort donc de la
   police de données et perd le rang du chiffre. */
.acc-tuile-v.est-non-mesure{
  font-family:var(--of-font-ui);
  font-size:14px;line-height:26px;font-weight:550;
  color:var(--of-ink-550);
}
/* #888/#890 — UNE ÉCHÉANCE DÉPASSÉE SE VOIT, MAIS ELLE SE LIT D'ABORD.
   La teinte SOULIGNE le retard ; c'est la sous-ligne qui le DIT (« dépassée de
   N j », rédigée par `OF.ui.echeance`). Retirer cette règle ne retire aucune
   information — c'est la condition pour que l'information ne soit pas portée
   par la couleur seule. Jeton existant, aucune valeur de palette redéclarée. */
.acc-tuile-v.est-depassee{color:var(--of-negative-700)}
.acc-tuile-s{margin:2px 0 0;font-size:11px;line-height:16px;color:var(--of-ink-550)}

/* ---------- Actions ---------- */

.acc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.acc-cta{
  display:inline-flex;align-items:center;
  height:46px;padding:0 20px;
  border-radius:var(--of-radius-md);
  background:var(--of-teal-650);color:var(--of-white);
  font-size:15px;font-weight:700;text-decoration:none;
  transition:background .15s;
}
.acc-cta:hover{background:var(--of-petrol-800);color:var(--of-white);text-decoration:none}
.acc-cta:focus-visible{outline:2px solid var(--of-teal-650);outline-offset:2px}
.acc-cta--soft{
  padding:0 18px;
  background:var(--of-white);color:var(--of-petrol-800);
  font-size:14px;font-weight:650;
  box-shadow:var(--of-anneau);
}
.acc-cta--soft:hover{background:var(--of-white);color:var(--of-petrol-800);box-shadow:var(--of-anneau-actif)}

.acc-quitter{
  margin-left:auto;
  height:46px;padding:0 16px;
  border:0;border-radius:var(--of-radius-md);
  background:transparent;color:var(--of-ink-650);
  font-family:var(--of-font-ui);font-size:13px;font-weight:600;
  cursor:pointer;
}
.acc-quitter:hover{color:var(--of-petrol-800)}
.acc-quitter:focus-visible{outline:2px solid var(--of-teal-650);outline-offset:2px}

.acc-note{
  margin:22px 0 0;padding-top:16px;
  border-top:1px solid var(--of-line-200);
  font-size:12px;line-height:18px;color:var(--of-ink-650);
}

.acc-pied{
  margin:0;max-width:720px;
  font-size:12px;line-height:18px;color:var(--of-sur-marine-faible);
  text-align:center;
}

/* ---------- Replis ---------- */

@media (max-width:768px){
  .acc-seuil{gap:28px;padding:40px 18px}
  .acc-carte{padding:28px 22px}
  .acc-carte h1{font-size:30px;line-height:36px}
  .acc-tuiles{grid-template-columns:minmax(0,1fr)}
  .acc-actions{gap:10px}
  .acc-cta,.acc-cta--soft{width:100%;justify-content:center}
  .acc-quitter{margin-left:0;width:100%}
}

@media (prefers-reduced-motion:reduce){
  .acc-carte{animation:none}
  .acc-cta{transition:none}
}