/* Le commun du site v10 : polices servies par le site, noms courts des prototypes, page, barre et pied (une seule copie).
   Repris des prototypes publiés (sections 6-7, version 3 du 22/10 ; la barre est celle de l'ouverture), sélecteurs de la barre et du
   pied rangés sous .barre et .pied pour qu'aucune règle ne déborde sur une section (§ 2.7). Couleurs : jetons de la charte. */

@font-face { font-family: "Jost"; src: url("../fonts/jost-v20-latin.woff2?v=928f4210") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "osifont"; src: url("../fonts/osifont-cotes.woff2?v=583eeb37") format("woff2"); font-display: block; }

/* Les noms courts des prototypes, déclarés UNE fois, alias des jetons (design/tokens/sorties/tokens.css) : une seule source */
:root {
  --papier: var(--ax-fond-page);
  --feuille: var(--ax-fond-surface);
  --brume: var(--ax-fond-survol);
  --encre: var(--ax-texte-principal);
  --encre-2: var(--ax-texte-secondaire);
  --encre-3: var(--ax-texte-discret);
  --grille: var(--ax-trait-separation);
  --filet: var(--ax-trait-champ);
  --bleu-plan: var(--ax-texte-lien);
  --calque: var(--ax-fond-selection);
  --rouge-cote: var(--ax-dessin-cote);
  --kraft: var(--ax-dessin-bois);
  --vert: var(--ax-etat-conforme);
  --cramoisi: var(--ax-etat-erreur);
  --arret-1: var(--ax-arret-1); --arret-1-chiffre: var(--ax-arret-1-chiffre); --arret-2: var(--ax-arret-2); --arret-2-chiffre: var(--ax-arret-2-chiffre);
  --arret-3: var(--ax-arret-3); --arret-3-chiffre: var(--ax-arret-3-chiffre); --arret-4: var(--ax-arret-4); --arret-4-chiffre: var(--ax-arret-4-chiffre);
  --arret-5: var(--ax-arret-5); --arret-5-chiffre: var(--ax-arret-5-chiffre); --arret-6: var(--ax-arret-6); --arret-6-chiffre: var(--ax-arret-6-chiffre);
  --arret-7: var(--ax-arret-7); --arret-7-chiffre: var(--ax-arret-7-chiffre); --arret-8: var(--ax-arret-8); --arret-8-chiffre: var(--ax-arret-8-chiffre);
  --police: var(--ax-police-marque);
  --police-cote: var(--ax-police-cote);
  --marge: 16px;
  --barre: 64px;
  color-scheme: light;
}
@media (min-width: 744px) { :root { --marge: 32px; --barre: 72px; } }   /* la tablette dès 744 px (décision n° 34 d'Alex) */
@media (min-width: 1280px) { :root { --marge: 64px; } }
*, *::before, *::after { box-sizing: border-box; }
/* une section ouverte par une ancre arrive 16 px sous la barre collée, son filet d'1 px compté ; en bas, 8 px pour l'anneau du clavier */
html { scroll-padding-top: calc(var(--barre) + 1px + 16px + env(safe-area-inset-top, 0px)); scroll-padding-bottom: 8px; }
body { background: var(--papier); color: var(--encre); font-family: var(--police); font-size: 16px; line-height: 1.5; caret-color: var(--encre); }
::selection { background: var(--calque); color: var(--encre); }
a { color: inherit; text-underline-offset: 3px; }
.monde { overflow-x: clip; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* lu, pas vu */
.page { width: min(1280px, 100% - 2 * var(--marge)); margin-inline: auto; }
.page:focus { outline: none; }
.evitement { position: absolute; left: 16px; top: -64px; z-index: 50; display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 6px; background: var(--encre); color: var(--feuille); font-size: 15px; text-decoration: none; }
.evitement:focus { top: 8px; }

/* la barre (plan du site, § 2.2 ; charte, Navigation) : collée en haut ; logotype, quatre liens, « Se connecter », l'essai ; sous
   1 024 px, l'essai reste à côté de « Menu », qui ouvre le menu plein écran */
.barre { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--papier); border-bottom: 1px solid var(--grille); }
.barre .contenu { display: flex; align-items: center; gap: 32px; width: min(1280px, 100% - 2 * var(--marge)); height: var(--barre); margin-inline: auto; }
.barre .logo { position: relative; display: block; flex: 0 0 auto; width: 112px; padding-block: 11px; margin-block: -11px; color: var(--encre); --rouge: var(--rouge-cote); }   /* 44 px de cible, barre inchangée */
.barre .logo svg { display: block; width: 100%; height: auto; }
/* le logotype souligné bleu, blanc, rouge : trois tiers égaux de sa largeur, à 5 px sous sa ligne de base, 3 px au bureau, 2 au
   téléphone, tenus par un filet d'encre de 1 px (charte, Logo ; décisions d'Alex du 17/10 et du 24/10, n° 3) ; la seule touche
   tricolore du site, immobile */
.barre .logo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 4px; background: linear-gradient(90deg, var(--bleu-plan) 0 33.34%, var(--feuille) 33.34% 66.67%, var(--rouge-cote) 66.67%) 0 0 / 100% 3px no-repeat var(--encre); pointer-events: none; }
/* liens de navigation : couleur du texte, soulignés au survol (Alex, 18/10, décision n° 23 ; charte, Composants, Lien) */
.barre .liens-barre { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.barre .liens-barre a { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; font-size: 15px; color: var(--encre-2); text-decoration: none; border-radius: 6px; }
.barre .liens-barre a:hover { color: var(--encre); text-decoration: underline; }
.barre .actions { display: flex; gap: 12px; margin-left: auto; }
.barre .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border-radius: 6px; font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.barre .btn.plein { background: var(--encre); color: var(--feuille); border: 0; }
.barre .btn.plein:hover { background: var(--encre-2); }
.barre .btn.borde { background: var(--feuille); color: var(--encre); border: 0; box-shadow: inset 0 0 0 2px var(--encre); }
.barre .btn.borde:hover { background: var(--brume); }
/* le menu du téléphone est un <details> : il s'ouvre même sans script ; menu.js lui ajoute « Fermer », la page inerte, le focus et Échap */
.barre .menu-tel { display: none; flex: 0 0 auto; }
.barre .menu { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; padding: 0 16px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--grille); font-size: 15px; color: var(--encre); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.barre .menu::-webkit-details-marker { display: none; }
.barre .menu:hover { background: var(--brume); }
.barre .menu .icone { display: none; flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.barre .menu .icone path { vector-effect: non-scaling-stroke; }
.barre .menu-tel[open] .icone .ouvrir, .barre .menu-tel:not([open]) .icone .fermer { display: none; }
.barre .panneau-menu { position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: calc(100vh - var(--barre) - 1px); height: calc(100dvh - var(--barre) - 1px); overflow-y: auto; padding: 8px var(--marge) 32px; background: var(--papier); }
.barre .panneau-menu .dedans { max-width: 640px; }
.barre .panneau-menu ul { margin: 0; padding: 0; list-style: none; }
.barre .panneau-menu li a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--grille); font-size: 24px; line-height: 1.5; color: var(--encre); text-decoration: none; }
.barre .panneau-menu li a:hover { text-decoration: underline; }
.barre .panneau-menu .btn { width: 100%; margin-top: 32px; }
@media (max-width: 1023px) {
  .barre .sections, .barre .connexion { display: none; }
  .barre .menu-tel { display: block; }
  .barre .contenu { gap: 12px; }
}
@media (max-width: 743px) {
  .barre .actions .btn { padding: 0 12px; }
  .barre .logo { width: 88px; }   /* la taille minimale du logotype à l'écran (charte) */
  .barre .logo::after { bottom: 5px; height: 3px; background-size: 100% 2px; }
}
@media (max-width: 359px) {
  .barre .contenu { gap: 4px; }
  .barre .actions .btn { padding: 0 8px; }
  .barre .menu { width: 44px; padding: 0; }
  .barre .menu .icone { display: block; }
  .barre .menu .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* le pied (plan du site, § 2.3) : quatre groupes, sans fond de couleur ; liens comme ceux de la barre (couleur du texte, soulignés
   au survol), cibles de 44 px ; à l'étape 1, sans CGV, export, cookies, nouveautés ni sécurité (B3, n° 4), sans « FR | EN » (étape 2) */
.pied { border-top: 1px solid var(--grille); background: var(--papier); }
.pied .contenu { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; width: min(1280px, 100% - 2 * var(--marge)); margin-inline: auto; padding-block: 48px calc(64px + env(safe-area-inset-bottom, 0px)); }
.pied ul { display: grid; margin: 0; padding: 0; list-style: none; }
.pied ul a { line-height: 22px; }   /* un lien sur deux lignes tient dans ses 44 px : les deux listes restent alignées */
.pied a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; font-size: 15px; line-height: 1.5; color: var(--encre-2); text-decoration: none; text-wrap: balance; }
.pied a:hover { color: var(--encre); text-decoration: underline; }
.pied .marque { display: grid; justify-items: start; align-content: start; }
.pied .logo-pied { display: flex; align-items: center; width: 112px; height: 44px; color: var(--encre); --rouge: var(--rouge-cote); }   /* une rangée de 44 px, comme chaque lien voisin */
.pied .logo-pied svg { display: block; width: 100%; height: auto; }
.pied .mentions { display: grid; align-content: start; gap: 8px; }
.pied .mentions p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--encre-3); text-wrap: pretty; }
@media (max-width: 743px) {
  .pied .logo-pied { width: 88px; }
  .pied .contenu { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }   /* les deux listes côte à côte */
  .pied .marque, .pied .mentions { grid-column: 1 / -1; }
}
@media (min-width: 744px) {
  .pied .contenu { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .pied .contenu > * { grid-column: span 6; }
  .pied .mentions { padding-top: calc((44px - 15px * 1.5) / 2); }   /* sa première ligne sur celle des liens voisins */
}
@media (min-width: 1024px) { .pied .contenu > * { grid-column: span 3; } }

:is(.evitement, .barre a, .barre summary, .pied a):focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 2px; }
/* couleurs forcées (Windows) : l'ombre intérieure des boutons bordés disparaît, un vrai bord la remplace */
@media (forced-colors: active) {
  .barre .btn.borde, .barre .btn.plein, .barre .menu { border: 2px solid ButtonText; }
}