/* ===========================================================================
   servicefait.fr — la feuille de style du site public.

   Deux principes, et ils commandent tout le reste.

   1. LE SITE RESSEMBLE AU LOGICIEL. Mêmes couleurs, mêmes polices, même
      papier. Quelqu'un qui passe du site à l'application ne doit pas avoir
      l'impression de changer de maison. La palette est reprise telle quelle
      de api/statique/app/app.css.

   2. TOUT EST LISIBLE SANS ANIMATION. Le contenu est visible par défaut ;
      l'animation ne s'ajoute que si le navigateur en est capable ET si le
      visiteur ne l'a pas refusée. C'est la règle de l'escalier : on construit
      d'abord les marches, l'ascenseur vient après — et s'il tombe en panne,
      on monte quand même.

   Aucun appel à un site tiers : les polices sont servies depuis polices/.
   =========================================================================== */

:root {
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --surface-2: #FAF9F6;
  --surface-3: #F0EFEA;
  --border: #E2E1DA;
  --border-strong: #CFCEC5;
  --ink: #16171A;
  --ink-2: #53585F;
  --ink-3: #6E737B;
  --marine: #1F5FA0;          /* le bleu du logiciel */
  --marine-fonce: #143E6B;
  --marine-doux: #EBF1F8;
  --vert: #1F6B45;            /* le vert « validé » */
  --vert-doux: #ECF5EF;
  --ambre: #8A5A00;
  --ambre-doux: #FDF3E0;
  --ombre: 0 10px 30px rgba(20, 22, 26, .10);
  --ombre-douce: 0 2px 10px rgba(20, 22, 26, .06);
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --large: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131417; --surface: #1C1E22; --surface-2: #202329; --surface-3: #272A30;
    --border: #2F333A; --border-strong: #454A53;
    --ink: #ECEBE7; --ink-2: #B4B8BE; --ink-3: #8F959D;
    --marine: #82B2E9; --marine-fonce: #A8CBF2; --marine-doux: #1A2938;
    --vert: #83CAA2; --vert-doux: #18271E;
    --ambre: #E6BC74; --ambre-doux: #2D2617;
    --ombre: 0 10px 30px rgba(0, 0, 0, .45);
    --ombre-douce: 0 2px 10px rgba(0, 0, 0, .3);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.large { max-width: var(--large); margin: 0 auto; padding: 0 20px; }
.etroit { max-width: 760px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .4em; }
h1 { font-size: clamp(34px, 6vw, 56px); font-weight: 600; }
h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 600; }
h3 { font-size: 19px; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--marine); }

.sur-titre {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 10px;
}

/* ------------------------------------------------------------------ bandeau */
.bandeau {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(10px)) { .bandeau { background: var(--bg); } }

.bandeau .large {
  display: flex; align-items: center; gap: 18px;
  height: 66px;
}
.marque {
  font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.marque i { font-style: normal; color: var(--vert); }
.marque small {
  display: block; font-size: 11px; font-weight: 400; letter-spacing: .08em;
  color: var(--ink-3); text-transform: uppercase; margin-top: -4px;
}
.bandeau nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bandeau nav a {
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  color: var(--ink-2); font-size: 15px;
}
.bandeau nav a:hover { background: var(--surface-3); color: var(--ink); }
.bandeau nav a[aria-current] { color: var(--ink); font-weight: 500; }

/* Les règles du menu ci-dessus sont plus fortes que celles des boutons, et
   elles repeignaient le texte de « Se connecter » en gris sombre sur fond
   bleu : illisible. On redit donc ici, plus fort, ce qu'un bouton du bandeau
   doit être. *Le peintre est passé après le menuisier, et a repeint la
   poignée.* */
.bandeau nav a.btn { color: var(--ink); }
.bandeau nav a.btn:hover { background: var(--surface); }
.bandeau nav a.btn-primaire,
.bandeau nav a.btn-primaire:hover { background: var(--marine); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bandeau nav a.btn-primaire,
  :root:not([data-theme="light"]) .bandeau nav a.btn-primaire:hover { color: #0F1F2E; }
}

/* Sur un téléphone, le bandeau ne tient plus en une ligne : le logo, deux
   liens et un bouton font 400 px là où l'écran en donne 390, et toute la page
   se met à glisser latéralement. On resserre, et « Accueil » s'efface — le nom
   en haut à gauche y ramène déjà, c'est l'usage partout. */
@media (max-width: 620px) {
  .bandeau .large { gap: 10px; padding: 0 14px; }
  .bandeau nav { gap: 2px; }
  .bandeau nav a { padding: 8px 9px; font-size: 14px; }
  .bandeau nav a[href="index.html"] { display: none; }
  .marque { font-size: 19px; }
  .btn { padding: 9px 13px; font-size: 14px; }
}

.btn {
  display: inline-block; padding: 11px 18px; border-radius: 10px;
  font-family: inherit; font-size: 15px; font-weight: 500; text-decoration: none;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { box-shadow: var(--ombre-douce); }
.btn:active { transform: translateY(1px); }
.btn-primaire { background: var(--marine); border-color: var(--marine); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primaire { color: #0F1F2E; }
}
.btn-grand { padding: 15px 26px; font-size: 17px; }

/* --------------------------------------------------------------------- hero */
.hero { padding: 80px 0 40px; }
.hero h1 { max-width: 15ch; }
.hero .chapo {
  font-size: clamp(18px, 2.2vw, 21px); color: var(--ink-2);
  max-width: 58ch; margin-bottom: 28px;
}
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .note-modele {
  margin-top: 28px; padding: 14px 18px; border-radius: 12px;
  background: var(--vert-doux); border: 1px solid color-mix(in srgb, var(--vert) 22%, transparent);
  font-size: 15px; color: var(--ink-2); max-width: 62ch;
}
.hero .note-modele b { color: var(--ink); }

.invite-defilement {
  margin-top: 56px; display: flex; align-items: center; gap: 10px;
  color: var(--ink-3); font-size: 14px;
}
.invite-defilement span[aria-hidden] { display: inline-block; }

/* ======================================================================
   L'HISTOIRE EN TROIS ACTES

   Le contenu est écrit en clair dans la page. Sans l'animation, on lit
   trois blocs l'un sous l'autre, avec leurs schémas : c'est déjà complet.
   ====================================================================== */
.histoire { padding: 40px 0 20px; position: relative; }

.acte {
  padding: 56px 0;
  border-top: 1px solid var(--border);
}
.acte:first-of-type { border-top: 0; }

.acte .large {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 860px) {
  .acte .large { grid-template-columns: 1fr; gap: 28px; }
}

.acte .numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--marine-doux); color: var(--marine);
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  margin-bottom: 14px;
}
.acte h2 { max-width: 16ch; }
.acte .texte > p { color: var(--ink-2); max-width: 46ch; }
.acte .qui {
  display: inline-block; margin-top: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--border);
}
.acte-3 .qui { background: var(--vert-doux); color: var(--vert); border-color: color-mix(in srgb, var(--vert) 25%, transparent); }

/* --- le schéma : un petit écran de logiciel, dessiné en HTML --- */
.scene {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--ombre); overflow: hidden;
}
.scene .tete {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--ink-3);
}
.scene .tete b { color: var(--ink-2); font-weight: 500; }
.scene .pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.scene .corps { padding: 6px 0; }

.rang {
  display: grid; grid-template-columns: 1fr 74px 74px;
  gap: 10px; align-items: center;
  padding: 10px 16px; font-size: 14px;
  border-bottom: 1px solid var(--surface-3);
}
.rang:last-child { border-bottom: 0; }
.rang .lib { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang .val {
  font-family: var(--mono); font-size: 13px; text-align: right;
  padding: 3px 8px; border-radius: 6px; background: var(--surface-3); color: var(--ink);
}
.rang .val.vide { color: var(--ink-3); background: transparent; border: 1px dashed var(--border-strong); }
.rang .val.ok { background: var(--vert-doux); color: var(--vert); }
.rang .val.corrige { background: var(--ambre-doux); color: var(--ambre); }
.rang .val.masque { visibility: hidden; }

.scene .pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 14px; color: var(--ink-2);
}
.scene .pied .total { font-family: var(--mono); font-weight: 600; color: var(--ink); }

.jeton {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--vert-doux); color: var(--vert);
  border: 1px solid color-mix(in srgb, var(--vert) 25%, transparent);
}
.jeton.marine { background: var(--marine-doux); color: var(--marine); border-color: color-mix(in srgb, var(--marine) 25%, transparent); }
.jeton svg { width: 14px; height: 14px; }

.legende {
  margin-top: 14px; font-size: 13px; color: var(--ink-3); text-align: center;
}

/* --- acte 3 : le document qui sort --- */
.feuille {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; box-shadow: var(--ombre);
}
.feuille .entete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.feuille .entete b { font-family: var(--serif); font-size: 16px; }
.feuille .entete span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.feuille .trait { height: 8px; border-radius: 4px; background: var(--surface-3); margin-bottom: 9px; }
.feuille .trait.court { width: 62%; }
.feuille .trait.moyen { width: 84%; }
.feuille .somme {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--ink);
  font-family: var(--mono); font-weight: 600;
}
.feuille .cachet {
  margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap;
}

/* ======================================================================
   L'ANIMATION — ajoutée seulement par site.js, seulement si tout va bien

   Rien de ce qui suit ne s'applique tant que <html> ne porte pas la classe
   « anime ». Sans JavaScript, sans IntersectionObserver, ou si le visiteur
   a demandé moins d'animations : la classe n'est jamais posée, et la page
   reste celle qu'on vient de décrire — complète et immobile.
   ====================================================================== */
.anime .acte .texte,
.anime .acte .visuel {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
.anime .acte .visuel { transition-delay: .12s; }
.anime .acte.vu .texte,
.anime .acte.vu .visuel { opacity: 1; transform: none; }

/* les lignes du tableau arrivent l'une après l'autre */
.anime .acte .rang {
  opacity: 0; transform: translateX(-10px);
  transition: opacity .45s ease, transform .45s ease;
}
.anime .acte.vu .rang { opacity: 1; transform: none; }
.anime .acte.vu .rang:nth-child(1) { transition-delay: .30s; }
.anime .acte.vu .rang:nth-child(2) { transition-delay: .42s; }
.anime .acte.vu .rang:nth-child(3) { transition-delay: .54s; }
.anime .acte.vu .rang:nth-child(4) { transition-delay: .66s; }

/* les valeurs qui « se remplissent » : elles apparaissent après leur ligne */
.anime .acte .val.arrive { opacity: 0; transform: scale(.9); transition: opacity .35s ease, transform .35s ease; }
.anime .acte.vu .val.arrive { opacity: 1; transform: none; transition-delay: .9s; }

/* le jeton de validation, et le cachet du document */
.anime .acte .jeton,
.anime .acte .somme,
.anime .acte .cachet { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.anime .acte.vu .jeton,
.anime .acte.vu .somme,
.anime .acte.vu .cachet { opacity: 1; transform: none; transition-delay: 1.15s; }

/* les traits du document qui se posent un à un */
.anime .acte .feuille .trait { opacity: 0; transform: translateX(-12px); transition: opacity .4s ease, transform .4s ease; }
.anime .acte.vu .feuille .trait { opacity: 1; transform: none; }
.anime .acte.vu .feuille .trait:nth-of-type(1) { transition-delay: .45s; }
.anime .acte.vu .feuille .trait:nth-of-type(2) { transition-delay: .57s; }
.anime .acte.vu .feuille .trait:nth-of-type(3) { transition-delay: .69s; }
.anime .acte.vu .feuille .trait:nth-of-type(4) { transition-delay: .81s; }

/* le fil qui relie les trois actes, et qui se remplit au défilement */
.fil { display: none; }
.anime .fil {
  display: block; position: fixed; left: max(14px, calc(50vw - var(--large) / 2 - 26px));
  top: 50%; transform: translateY(-50%); z-index: 20;
}
@media (max-width: 1000px) { .anime .fil { display: none; } }
.fil ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fil a {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--border-strong); text-indent: -9999px; overflow: hidden;
  transition: background .3s ease, transform .3s ease;
}
.fil a.actif { background: var(--marine); transform: scale(1.45); }

/* ----------------------------------------------------------------- sections */
.bande { padding: 64px 0; border-top: 1px solid var(--border); }
.bande.creux { background: var(--surface-2); }

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 28px; }
.carte {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px; box-shadow: var(--ombre-douce);
}
.carte h3 { margin-bottom: 8px; }
.carte p { color: var(--ink-2); font-size: 15px; margin: 0; }

.encart-citation {
  margin: 28px 0 0; padding: 20px 24px; border-left: 3px solid var(--marine);
  background: var(--marine-doux); border-radius: 0 12px 12px 0;
  font-family: var(--serif); font-size: 18px; color: var(--ink);
}

.appel { text-align: center; padding: 76px 0; }
.appel h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.appel p { color: var(--ink-2); max-width: 54ch; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------- formulaire */
.champ { margin-bottom: 18px; }
.champ label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: 11px 13px; font-family: inherit; font-size: 16px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: 2px solid var(--marine); outline-offset: 1px; border-color: var(--marine);
}
.champ .aide { display: block; font-size: 13px; color: var(--ink-3); margin-top: 5px; }
.champ textarea { min-height: 130px; resize: vertical; }

/* ------------------------------------------------------------------- pied */
.pied-site {
  border-top: 1px solid var(--border); background: var(--surface-2);
  padding: 40px 0 28px; font-size: 14px; color: var(--ink-3);
}
.pied-site .colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; }
.pied-site h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin: 0 0 10px; }
.pied-site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pied-site a { color: var(--ink-2); text-decoration: none; }
.pied-site a:hover { color: var(--marine); text-decoration: underline; }
.pied-site .bas { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------- ce qui reste à renseigner */
/* Une marque volontairement voyante : tant qu'il en reste une sur le site,
   le site n'est pas prêt à être publié. */
.a-completer {
  background: repeating-linear-gradient(45deg, var(--ambre-doux), var(--ambre-doux) 8px, transparent 8px, transparent 16px);
  border: 1px dashed var(--ambre); border-radius: 6px;
  padding: 1px 7px; color: var(--ambre); font-weight: 500; font-style: normal;
  font-family: var(--mono); font-size: .88em;
}

/* --------------------------------------------------------- pages de contenu */
.contenu { padding: 56px 0 20px; }
.contenu h2 { margin-top: 36px; }
.contenu li { margin-bottom: 6px; color: var(--ink-2); }
.contenu table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.contenu th, .contenu td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.contenu th { color: var(--ink-2); font-weight: 500; width: 34%; }

/* Le lien d'évitement, pour qui navigue au clavier : invisible tant qu'on ne
   l'atteint pas, puis bien en vue. On le sort par le HAUT et non par la
   gauche — « left: -9999px » élargit la page de 9999 px, et sur un téléphone
   cela se voit : une barre de défilement horizontale apparaît. */
.saut-contenu {
  position: fixed; left: 0; top: 0; transform: translateY(-200%);
  background: var(--marine); color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 0; z-index: 100; transition: transform .15s ease;
}
.saut-contenu:focus { transform: none; }

@media print {
  .bandeau, .fil, .invite-defilement, .appel .btn { display: none; }
  body { background: #fff; }
}