/* WORK : la feuille unique. Tokens en tête, puis socle, navigation, composants.
   Aucune valeur brute hors :root sans commentaire de justification. */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 400 800; font-display: swap; src: url("/fontes/Bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212 }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 400 800; font-display: swap; src: url("/fontes/Bricolage-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400 700; font-display: swap; src: url("/fontes/Hanken-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212 }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400 700; font-display: swap; src: url("/fontes/Hanken-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F }
@font-face { font-family: "Spline Sans Mono"; font-weight: 400 600; font-display: swap; src: url("/fontes/Spline-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212 }
@font-face { font-family: "Spline Sans Mono"; font-weight: 400 600; font-display: swap; src: url("/fontes/Spline-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F }

:root {
  --blanc: #FFFFFF; --clair: #F7F7F7; --clair-2: #F2F2F2; --ligne: #DDDDDD; --ligne-forte: #8A8A8A;
  --texte: #222222; --texte-2: #6A6A6A;
  --corail: #E11D48; --corail-2: #BE123C; --corail-fond: #FFF1F2;
  --succes-texte: #157400; --succes-fond: #F0FAEB;
  --focus: var(--corail);
  --t-1: 13px; --t-2: 14px; --t-3: 16px; --t-4: 18px;
  --t-h2: clamp(22px, 3vw, 28px); --t-h1: clamp(26px, 4vw, 34px);
  --e-1: 4px; --e-2: 8px; --e-3: 16px; --e-4: 24px; --e-5: 40px; --e-6: 64px;
  --r-petit: 10px; --r: 16px; --r-grand: 24px; --r-pilule: 999px;
  --o-1: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06);
  --o-2: 0 2px 4px rgba(0, 0, 0, .04), 0 12px 28px rgba(0, 0, 0, .12);
  --o-3: 0 6px 16px rgba(0, 0, 0, .12), 0 24px 48px rgba(0, 0, 0, .16);
  --h-cible: 44px; --h-btn: 48px; --h-nav: 64px; --l-nav: 240px;
  --h-entete-laterale: 128px; /* barre latérale : padding 24 + marque 44 + bouton 44 + 16 */
  --icone: 24px; --l-menu: 240px; --l-contenu: 1200px; --l-connexion: 420px; --l-feuille: 560px;
  --duree: .2s; --courbe: ease-out;
  --titres: "Bricolage Grotesque", system-ui, sans-serif;
  --corps: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
}

/* ── Socle ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--blanc); color: var(--texte); font-family: var(--corps); font-size: var(--t-3); line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100dvh }
h1, h2, h3 { margin: 0; font-family: var(--titres); font-weight: 700; line-height: 1.1; letter-spacing: -.01em }
h1 { font-size: var(--t-h1) } h2 { font-size: var(--t-h2) } h3 { font-size: var(--t-4) }
p { margin: 0 }
a { color: inherit }
svg { display: block }
[hidden] { display: none !important }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }
.btn--principal:focus-visible { outline-color: var(--blanc); outline-offset: -3px } /* anneau blanc À L'INTÉRIEUR de l'aplat corail : 4,70:1 */
.mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums }
.icone { width: var(--icone); height: var(--icone); flex: none }
.evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--corail); color: var(--blanc); font-weight: 700; padding: 12px 20px; /* lien d'évitement : hors échelle, visible seulement au focus */ border-radius: 0 0 var(--r-petit) 0; text-decoration: none }
.evitement:focus { left: 0 }

/* ── En-tête et navigation (mobile d'abord : barre inférieure) ─────────── */
.entete { position: sticky; top: 0; z-index: 25; /* échelle des plans : contenu 0, barre 20, en-tête 25, menu 30, voile 40, feuille 50 : l'en-tête passe au-dessus de la barre, sous son propre menu */ display: flex; align-items: center; justify-content: space-between; height: calc(var(--h-nav) + env(safe-area-inset-top)); padding: 0 var(--e-3); padding-top: env(safe-area-inset-top); background: var(--blanc); border-bottom: 1px solid var(--ligne) }
.entete__marque { display: inline-flex; align-items: center; min-height: var(--h-cible); font-family: var(--titres); font-weight: 800; font-size: 22px; /* logotype : cran hors échelle assumé */ text-decoration: none; color: var(--corail-2) }
.entete__menu { display: inline-flex; align-items: center; justify-content: center; width: var(--h-cible); height: var(--h-cible); border: 0; border-radius: var(--r-pilule); background: transparent; cursor: pointer }
.entete__menu:hover { background: var(--clair-2) }
.menu { position: absolute; right: var(--e-3); top: calc(var(--h-nav) + env(safe-area-inset-top) + var(--e-1)); min-width: var(--l-menu); padding: var(--e-2); background: var(--blanc); border-radius: var(--r); box-shadow: var(--o-3); z-index: 30 }
.menu__titre { padding: var(--e-2) var(--e-3) var(--e-1); font-family: var(--mono); font-size: var(--t-1); color: var(--texte-2); text-transform: uppercase; letter-spacing: .04em }
.menu__lien { display: flex; align-items: center; gap: var(--e-2); width: 100%; min-height: var(--h-cible); padding: 0 var(--e-3); border: 0; border-radius: var(--r-petit); background: transparent; text-decoration: none; text-align: left; cursor: pointer }
.menu__lien:hover { background: var(--clair) }
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--h-nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--blanc); border-top: 1px solid var(--ligne) }
.nav__lien { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; /* resserré : icône + libellé sur 64 px */ min-height: var(--h-cible); font-size: var(--t-1); text-decoration: none; color: var(--texte-2) }
.nav__lien:hover { color: var(--texte) }
.nav__lien--actif { color: var(--corail-2); font-weight: 700 }
.pastille { position: absolute; top: 6px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pilule); background: var(--corail); color: var(--blanc); font-family: var(--mono); font-size: 11px; /* pastille : lisible à 18 px, jamais du texte courant */ line-height: 18px; text-align: center }
.contenu { padding: var(--e-3) var(--e-3) calc(var(--h-nav) + var(--e-5) + env(safe-area-inset-bottom)); max-width: var(--l-contenu); margin-inline: auto }
.sans-nav .contenu { padding-bottom: var(--e-5); min-height: 100dvh; display: grid; place-items: center }
@media (min-width: 640px) { .contenu { padding-inline: var(--e-4) } }
@media (min-width: 1024px) {
  .entete { position: fixed; left: 0; top: 0; z-index: 25; width: var(--l-nav); height: var(--h-entete-laterale); flex-direction: column; align-items: stretch; border-bottom: 0; padding: var(--e-4) var(--e-3) var(--e-3) }
  .entete__marque { font-size: 26px } /* logotype, cran hors échelle assumé */
  .nav { top: var(--h-entete-laterale); bottom: 0; right: auto; width: var(--l-nav); height: auto; display: flex; flex-direction: column; padding: var(--e-3) var(--e-2); border-top: 0; border-right: 1px solid var(--ligne); gap: var(--e-1) }
  .nav__lien { flex-direction: row; justify-content: flex-start; gap: var(--e-2); padding: 0 var(--e-3); font-size: var(--t-3); border-radius: var(--r-petit) }
  .nav__lien:hover { background: var(--clair) }
  .nav__lien--actif { background: var(--corail-fond) }
  .pastille { position: static; margin-left: auto }
  .menu { left: var(--e-3); right: auto; top: calc(var(--e-4) + var(--h-cible) * 2 + var(--e-2)) }
  .avec-nav .contenu { margin-left: var(--l-nav); padding: var(--e-5) var(--e-5) var(--e-6) }
}

/* ── Composants ─────────────────────────────────────────────────────────── */
.section { display: grid; gap: var(--e-3); margin-bottom: var(--e-5) }
.section__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3) }
/* L'en-tête de page (kicker + h1) est un `.section__tete` posé directement dans le contenu :
   il respire comme une section, au même cran que l'écart entre deux sections. */
.contenu > .section__tete { margin-bottom: var(--e-5) }
.kicker { font-family: var(--mono); font-size: var(--t-1); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-2) }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); padding: var(--e-3); box-shadow: var(--o-1) }
.carte--retard { background: var(--corail-fond); border-color: transparent }
.vide { color: var(--texte-2); padding: var(--e-4); text-align: center; border: 1px dashed var(--ligne-forte); border-radius: var(--r) }
.lien { color: var(--corail-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px /* lisibilité du soulignement */ }
.lien:hover { color: var(--corail) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--h-btn); padding: 0 var(--e-4); border: 1px solid transparent; border-radius: var(--r-petit); font-weight: 700; text-decoration: none; cursor: pointer; transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe) }
.btn--principal { background: var(--corail); color: var(--blanc) }
.btn--principal:hover { background: var(--corail-2) }
.btn--secondaire { background: var(--blanc); color: var(--texte); border-color: var(--ligne-forte) }
.btn--secondaire:hover { background: var(--clair) }
.btn--discret { background: transparent; color: var(--corail-2) }
.btn--discret:hover { background: var(--corail-fond) }
.btn--bloc { width: 100% }
.btn:disabled { opacity: .5; cursor: not-allowed }
.champ { display: grid; gap: var(--e-1); margin-bottom: var(--e-3) }
.champ__libelle { font-weight: 700; font-size: var(--t-2) }
.champ__saisie { min-height: var(--h-btn); padding: 0 var(--e-3); border: 1px solid var(--ligne-forte); border-radius: var(--r-petit); background: var(--blanc); font-size: var(--t-3) }
.champ__saisie:focus { border-color: var(--corail); outline: 2px solid var(--focus); outline-offset: 0 }
.champ__aide { font-size: var(--t-2); color: var(--texte-2) }
.pilule { display: inline-flex; align-items: center; gap: var(--e-1); height: 28px; /* pilule : étiquette compacte, jamais un bouton */ padding: 0 var(--e-2); border-radius: var(--r-pilule); background: var(--clair); font-family: var(--mono); font-size: var(--t-1); font-weight: 500 }
.pilule--succes { background: var(--succes-fond); color: var(--succes-texte) }
.pilule--alerte { background: var(--corail-fond); color: var(--corail-2) }
.alerte { display: flex; gap: var(--e-2); align-items: flex-start; padding: var(--e-3); border-radius: var(--r-petit); background: var(--corail-fond); color: var(--corail-2); font-weight: 700 }
.alerte--succes { background: var(--succes-fond); color: var(--succes-texte) }
.tableau { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.tableau th, .tableau td { padding: var(--e-2) var(--e-3); text-align: left; border-bottom: 1px solid var(--ligne) }
.tableau th { font-family: var(--mono); font-size: var(--t-1); color: var(--texte-2); text-transform: uppercase; letter-spacing: .04em }
.defile-x { overflow-x: auto; -webkit-overflow-scrolling: touch }
details > summary { list-style: none; cursor: pointer }
details > summary::-webkit-details-marker { display: none }
.tableau__action { display: inline-block; margin-right: var(--e-2) }
.connexion { width: min(100%, var(--l-connexion)); display: grid; gap: var(--e-3) }
.connexion__marque { font-family: var(--titres); font-weight: 800; font-size: 40px; /* affiche de connexion : cran unique */ color: var(--corail-2) }

/* ── Feuilles bas d'écran (dialog) ─────────────────────────────────────── */
.voile { position: fixed; inset: 0; z-index: 40; background: rgba(34, 34, 34, .45); /* --texte à 45 % */ }
.feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 90dvh; /* laisse voir le voile */ overflow: auto; padding: var(--e-3) var(--e-3) calc(var(--e-3) + env(safe-area-inset-bottom)); background: var(--blanc); border-radius: var(--r-grand) var(--r-grand) 0 0; box-shadow: var(--o-3) }
.feuille__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e-3) }
.feuille__fermer { display: inline-flex; align-items: center; justify-content: center; width: var(--h-cible); height: var(--h-cible); border: 0; border-radius: var(--r-pilule); background: var(--clair); cursor: pointer }
.feuille__fermer:hover { background: var(--clair-2) }
.feuille__actions { position: sticky; bottom: 0; display: flex; gap: var(--e-2); padding-top: var(--e-3); background: var(--blanc) }
@media (min-width: 640px) { .feuille { left: 50%; right: auto; bottom: 50%; width: min(var(--l-feuille), calc(100% - var(--e-5))); transform: translate(-50%, 50%); border-radius: var(--r) } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important } }