/* Le Passeport Produit.

   Parti pris : le site est une LECTURE ANNOTÉE DE TEXTE OFFICIEL, pas une page
   de présentation de logiciel. Trois conséquences qui gouvernent tout le reste.

   1. Une seule famille pour le texte, une serif de presse (Newsreader), corps
      et titres compris. Le contraste de graisse et de taille suffit à la
      hiérarchie ; changer de famille entre titre et texte fabrique l'aspect
      « gabarit » qu'on cherche à éviter.
   2. Une monospace (JetBrains Mono) réservée à la COUCHE TECHNIQUE : références
      d'articles, dates, statuts, identifiants de sources, navigation. Elle dit
      « ceci vient d'un document », et elle ne sert jamais à de la prose.
   3. Des filets, pas des boîtes. Aucune carte, aucun coin arrondi décoratif,
      aucun dégradé, aucune ombre portée. Ce qui sépare, c'est l'espace et un
      trait d'un pixel.

   Palette : papier et encre, chauds, plus UN accent de correction. Les trois
   statuts réglementaires empruntent au sens plutôt qu'à l'arc-en-ciel :
   le ferme prend l'encre, la plus forte ; l'indicatif un ocre ; le déduit un
   simple contour.

   Toute la palette claire est définie sur :root. Les thèmes sombres ne
   redéfinissent QUE des variables. */

:root{
  --papier:#F8F5EC;
  --papier-creux:#F0EBDF;
  --encre:#171B19;
  --encre-douce:#66706C;
  --trait:#D8D2C5;
  --trait-fort:#A9B0AB;

  --petrole:#0E5049;
  --petrole-fond:#E3EEEA;
  --accent:#C45143;
  --accent-fond:#F8E7E2;
  --ocre:#8B6408;
  --ocre-fond:#FFF0C9;
  --bleu-gris:#4F6672;
  --bleu-gris-fond:#E7EDF0;
  --vert:var(--petrole);
  --vert-fond:var(--petrole-fond);

  --sur-accent:#FAF8F3;
  --focus:#0E5049;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#101714;
    --papier-creux:#17201C;
    --encre:#F0ECE2;
    --encre-douce:#A8B2AD;
    --trait:#2B3833;
    --trait-fort:#52625B;

    --petrole:#79BDB0;
    --petrole-fond:#132A25;
    --accent:#EE8B7E;
    --accent-fond:#321E1A;
    --ocre:#E2BB62;
    --ocre-fond:#30260F;
    --bleu-gris:#9BB0BA;
    --bleu-gris-fond:#1C292F;
    --vert:var(--petrole);
    --vert-fond:var(--petrole-fond);

    --sur-accent:#14130F;
    --focus:#79BDB0;
  }
}

:root[data-theme="dark"]{
  --papier:#101714;
  --papier-creux:#17201C;
  --encre:#F0ECE2;
  --encre-douce:#A8B2AD;
  --trait:#2B3833;
  --trait-fort:#52625B;

  --petrole:#79BDB0;
  --petrole-fond:#132A25;
  --accent:#EE8B7E;
  --accent-fond:#321E1A;
  --ocre:#E2BB62;
  --ocre-fond:#30260F;
  --bleu-gris:#9BB0BA;
  --bleu-gris-fond:#1C292F;
  --vert:var(--petrole);
  --vert-fond:var(--petrole-fond);

  --sur-accent:#14130F;
  --focus:#79BDB0;
}

/* ------------------------------------------------------------- base */

*{box-sizing:border-box}
/* Pas d'overflow-x:hidden ici : une racine en debordement masque neutralise
   position:sticky dans plusieurs moteurs, et le sommaire cessait de suivre le
   defilement. Le filet est retire apres verification qu'aucune des vingt pages
   ne deborde a 360, 768, 1024 et 1440 px. */
html{scroll-behavior:smooth;max-width:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  /* La serif demande un corps un peu plus grand que la sans pour la même
     lisibilité. 18 px avec un interligne de 1,62. */
  font:18px/1.62 var(--serif);
  font-variant-numeric:oldstyle-nums proportional-nums;
  -webkit-text-size-adjust:100%;
  max-width:100%;
}

/* Les chiffres reviennent en alignement tabulaire partout où on les compare :
   tableaux, dates, compteurs. Ailleurs, les chiffres elzéviriens de Newsreader
   s'assoient dans la ligne de texte au lieu de la crever. */
table,time,.dt,.date,.ci dd,.mono{font-variant-numeric:lining-nums tabular-nums}

p,li,dd,figcaption{max-width:68ch}

h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--encre);
  letter-spacing:-.012em;line-height:1.18}
h1{font-size:2.35rem;margin:.1em 0 .55em}
h2{font-size:1.5rem;margin:2.2em 0 .55em}
h3{font-size:1.12rem;margin:1.9em 0 .4em}

a{color:var(--encre);text-decoration-color:var(--accent);
  text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

strong{font-weight:600}
em{font-style:italic}

.wrap{max-width:780px;margin:0 auto;padding:0 24px;min-width:0}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--papier);
  padding:12px 18px;z-index:20;font-family:var(--mono);font-size:.8rem}
.saut:focus{left:0}

/* Marqueur de lien externe : une information, pas une décoration. */
.ext::after{content:"\2197";font-family:var(--mono);font-size:.72em;
  color:var(--encre-douce);margin-left:.15em}

/* ------------------------------------------------------------- en-tête */

header.site{border-bottom:1px solid var(--trait)}
.bascule-hote{order:3}
nav.principale{order:2}
.logo{order:1}
header.site .wrap{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:20px;padding-bottom:16px;max-width:1080px}

.logo{text-decoration:none;color:var(--petrole);white-space:nowrap;display:inline-flex;
  align-items:center;gap:.42em;
  font-family:var(--serif);font-size:1.22rem;font-weight:600;letter-spacing:-.015em}
.logo-marque{display:block;width:24px;height:24px;object-fit:contain;flex:none}
.logo em{font-style:normal;color:var(--accent)}
.logo::after{content:"FR";font-family:var(--mono);font-size:.6rem;font-weight:400;
  letter-spacing:.1em;color:var(--encre-douce);align-self:flex-start;margin:.05em 0 0 .08em}

nav.principale{display:flex;gap:0;flex-wrap:wrap;font-family:var(--mono)}
nav.principale a{font-size:.76rem;letter-spacing:.04em;color:var(--encre-douce);
  text-decoration:none;padding:11px 12px;min-height:44px;display:inline-flex;
  align-items:center}
nav.principale a:hover{color:var(--accent)}
nav.principale a[aria-current="page"]{color:var(--encre);
  box-shadow:inset 0 -2px 0 var(--accent)}

main{padding:44px 24px 72px}

/* ------------------------------------------------------------- carte d'identité */

/* Les quatre éléments que le lecteur doit trouver sans faire défiler :
   la réponse courte, le statut, la date de vérification, la source. */
.carte-identite{margin:0 0 40px}
.lead{font-size:1.2rem;line-height:1.55;margin:0 0 22px;max-width:64ch}

dl.ci{display:flex;flex-wrap:wrap;gap:14px 40px;margin:0;
  border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  padding:14px 0}
dl.ci .ci-item{min-width:0}
dl.ci dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--encre-douce);margin-bottom:5px}
dl.ci dd{margin:0;font-size:.94rem;max-width:56ch}

/* Étiquettes de statut : pas de pilule colorée, un filet et une capitale. */
.chip{display:inline-block;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;
  border:1px solid currentColor;color:var(--encre)}
.chip.ok{color:var(--encre);background:var(--papier-creux);border-color:var(--trait-fort)}
.chip.attente{color:var(--ocre);border-color:var(--ocre)}
.chip.derive{color:var(--encre-douce);border-style:dashed}
.chip.info{color:var(--accent);border-color:var(--accent)}

.note{font-size:.9rem;color:var(--encre-douce)}

/* ------------------------------------------------------------- sommaire */

.sommaire{margin:0 0 44px;padding:0 0 0 20px;border-left:2px solid var(--trait)}
.sommaire h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--encre-douce);margin:0 0 10px;font-weight:400}
.sommaire ol{margin:0;padding:0;list-style:none;counter-reset:som}
.sommaire li{margin:6px 0;counter-increment:som;font-size:.98rem}
.sommaire li::before{content:counter(som,decimal-leading-zero);font-family:var(--mono);
  font-size:.7rem;color:var(--encre-douce);margin-right:.7em}
.sommaire a{text-decoration:none}
.sommaire a:hover{text-decoration:underline;text-decoration-color:var(--accent)}

/* ------------------------------------------------------------- contenu */

ul,ol{padding-left:1.3em}
li{margin:9px 0}
.li-amorce{font-weight:600}

dl.defs{margin:22px 0}
dl.defs dt{font-weight:600;margin-top:22px}
dl.defs dd{margin:4px 0 0;color:var(--encre-douce)}

/* Tableau : il défile dans son propre cadre, jamais il n'élargit la page.
   Pas de fond, pas de bord arrondi : des filets horizontaux, comme un relevé. */
.tablebox{overflow-x:auto;margin:26px 0;max-width:100%;
  border-top:1px solid var(--encre);border-bottom:1px solid var(--trait)}
.tablebox:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:14px 18px 14px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--trait)}
th{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-douce);font-weight:400;
  padding-top:10px;padding-bottom:10px}
tr:last-child td{border-bottom:none}
td:last-child,th:last-child{padding-right:0}
td.dt{white-space:nowrap;font-family:var(--mono);font-size:.82rem}
td.dt strong{font-weight:400}
td p,td li{max-width:none}

/* Encadré : une à deux fois par page, pour ce qui vaut d'interrompre.
   Filet à gauche, fond très légèrement teinté, jamais de coin arrondi. */
.note-bloc{border-left:2px solid var(--ocre);background:var(--ocre-fond);
  padding:16px 22px;margin:26px 0}
.note-bloc.info{border-color:var(--accent);background:var(--accent-fond)}
.note-bloc.ok{border-color:var(--vert);background:var(--vert-fond)}
.note-bloc p{margin:.45em 0;max-width:62ch}
.note-titre{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--encre-douce);margin:0 0 8px !important;
  font-weight:400}

/* Le trou : ce que nous ignorons s'affiche. Il ne ressemble à aucun autre bloc,
   parce qu'il ne dit pas la même chose qu'eux. */
.trou{border:1px dashed var(--trait-fort);background:transparent;
  padding:16px 22px;margin:30px 0}
.trou p{margin:.45em 0;max-width:62ch}

.faq details{border-bottom:1px solid var(--trait)}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;min-height:44px;
  display:flex;align-items:center;list-style-position:outside}
.faq summary:hover{color:var(--accent)}
.faq .rep{padding:0 0 14px}
.faq .rep p{margin-top:0}

.sources-bloc{margin-top:56px;border-top:1px solid var(--encre);padding-top:4px}
ol.src{padding-left:1.5em}
ol.src li{margin:18px 0}

/* ------------------------------------------------------------- accueil */

.hero{padding:8px 0 4px}
.hero h1{font-size:2.9rem;max-width:19ch;line-height:1.06}
.hero .lead{max-width:58ch;color:var(--encre-douce);font-size:1.22rem}
section.bloc{padding:0}

/* L'échéance : un relevé, pas une carte. */
.echeance{border-top:2px solid var(--encre);padding:18px 0 0;margin:8px 0 0}
.echeance .date .date-nature{display:block;margin-bottom:8px}
.echeance .date{font-family:var(--mono);font-size:1.5rem;letter-spacing:-.02em;
  margin:0 0 4px;color:var(--accent)}
.echeance .quoi{margin-top:0;font-size:1.06rem}
.echeance p:last-child{margin-bottom:0}

/* Les chemins d'entrée : une liste annotée, pas une grille de cartes.
   Le numéro en gouttière tient lieu de repère visuel. */
.chemins{list-style:none;padding:0;margin:22px 0 0;counter-reset:chemin}
.chemins li{counter-increment:chemin;margin:0;padding:20px 0 20px 3.2em;
  position:relative;border-top:1px solid var(--trait);max-width:none}
.chemins li:last-child{border-bottom:1px solid var(--trait)}
.chemins li::before{content:counter(chemin,decimal-leading-zero);position:absolute;
  left:0;top:22px;font-family:var(--mono);font-size:.72rem;color:var(--encre-douce)}
.chemins a{font-weight:600;text-decoration-color:var(--trait-fort)}
.chemins p{margin:.3em 0 0;color:var(--encre-douce);font-size:.96rem;max-width:60ch}

.entree{border-top:1px solid var(--trait);padding-top:10px;margin-top:44px}
.entree h2{font-size:1.22rem;margin-top:.5em}
.entree time{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-douce);margin-bottom:.3em}

/* ------------------------------------------------------------- pied */

footer.site{border-top:1px solid var(--trait);margin-top:88px;padding:44px 0 40px}
footer.site .wrap{max-width:1080px}
.pied-cols{display:grid;gap:30px;margin-bottom:36px}
@media (min-width:620px){ .pied-cols{grid-template-columns:repeat(2,1fr)} }
@media (min-width:920px){ .pied-cols{grid-template-columns:repeat(4,1fr)} }
.pied-cols h2{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--encre-douce);margin:0 0 12px;font-weight:400}
.pied-cols a{display:block;font-size:.94rem;text-decoration:none;padding:5px 0;
  text-decoration-color:var(--trait)}
.pied-cols a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.independance{border-top:1px solid var(--trait);padding-top:24px;font-size:.94rem;
  max-width:72ch}
footer.site .note{max-width:72ch}

/* ------------------------------------------------------------- glossaire */

/* Sans JavaScript, le terme reste un lien ordinaire vers le glossaire : la
   définition est toujours à un clic et rien ne casse. */
a.glo{color:inherit;text-decoration:none;
  border-bottom:1px dotted var(--trait-fort);cursor:help}
a.glo:hover{border-bottom-color:var(--accent);color:var(--accent)}
.glo-pop{position:absolute;z-index:30;max-width:min(340px,calc(100vw - 32px));
  background:var(--encre);color:var(--papier);
  padding:14px 17px;font-size:.9rem;line-height:1.5;font-family:var(--serif);
  border-left:2px solid var(--accent)}
.glo-pop b{display:block;margin-bottom:5px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:400;opacity:.7}

/* ------------------------------------------------------------- mobile */

@media (max-width:620px){
  body{font-size:17px}
  h1{font-size:1.85rem}
  .hero h1{font-size:2.05rem;max-width:none}
  .hero .lead{font-size:1.08rem}
  h2{font-size:1.28rem;margin-top:2.1em}
  main{padding:30px 20px 56px}
  .wrap{padding:0 20px}
  dl.ci{gap:12px 26px}
  th,td{padding:12px 14px 12px 0}
  .chemins li{padding-left:2.6em}
  .note-bloc,.trou{padding:14px 18px}
}

/* ------------------------------------------------------------- système 2026 */

/* La refonte conserve la logique éditoriale, mais traite enfin les pages
   complexes comme un instrument de décision : rail contextuel, colonne de
   lecture et tableau probatoire peuvent coexister sans élargir la prose. */

body{font-size:17px;line-height:1.58}
.wrap{max-width:820px}
header.site .wrap,footer.site .wrap{max-width:1320px;padding-left:32px;padding-right:32px}
header.site .wrap{align-items:center;padding-top:17px;padding-bottom:14px}
.logo{font-size:1.28rem}
.logo em{color:var(--accent)}
nav.principale a:hover{color:var(--petrole)}
nav.principale a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--petrole)}
main.main-wrap{max-width:1280px;padding:52px 32px 84px}
.page{min-width:0}
.page:not(.comparateur)>h1{max-width:22ch}
.page>h1{font-size:clamp(2.25rem,4vw,3.25rem);line-height:1.03;margin-bottom:.45em}
.surtitre,.rail-etape{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bleu-gris);margin:0 0 10px}

.layout-page{display:grid;grid-template-columns:minmax(210px,250px) minmax(0,760px);
  gap:clamp(42px,5vw,76px);align-items:start;justify-content:center}
.rail-page{position:sticky;top:24px;align-self:start;min-width:0;padding-top:6px}
.rail-titre{font-size:1.2rem;font-weight:600;line-height:1.25;margin:0 0 22px;
  padding-bottom:16px;border-bottom:1px solid var(--trait-fort)}
.rail-page .sommaire{margin:0;padding:0 0 22px;border-left:0;border-bottom:1px solid var(--trait)}
.rail-page .sommaire h2{margin:0 0 14px}
.rail-page .sommaire li{margin:0;padding:7px 0;line-height:1.35;font-size:.86rem}
.rail-page .sommaire li::before{display:none}
.rail-page .sommaire a{display:block;color:var(--encre-douce)}
.rail-page .sommaire a:hover{color:var(--petrole)}
.rail-preuve{margin-top:22px;font-size:.88rem;line-height:1.5;color:var(--encre-douce)}
.rail-preuve p{margin:.4em 0}
.rail-preuve a{font-size:.86rem}

.carte-identite{margin-bottom:48px}
.carte-identite .lead{font-size:1.18rem;line-height:1.5;max-width:62ch}
dl.ci{border-top:3px solid var(--petrole);padding:16px 0;gap:16px 34px}
.chip.ok{color:var(--petrole);background:var(--petrole-fond);border-color:var(--petrole)}
.chip.attente{background:var(--ocre-fond)}
.chip.info{color:var(--bleu-gris);border-color:var(--bleu-gris)}
.date-nature{display:block;width:max-content;max-width:220px;margin:0 0 8px;padding:3px 7px;
  font-family:var(--mono);font-size:.58rem;line-height:1.35;letter-spacing:.06em;
  text-transform:uppercase;border-left:3px solid currentColor;white-space:normal}
.date-nature.ok{color:var(--petrole);background:var(--petrole-fond)}
.date-nature.attente{color:var(--ocre);background:var(--ocre-fond)}
.date-nature.derive{color:var(--bleu-gris);background:var(--bleu-gris-fond)}

.orientation{margin:48px 0 72px}
.orientation h2{font-size:clamp(1.8rem,3vw,2.55rem);max-width:24ch;margin:.2em 0 .7em}
.chemins-principaux{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--petrole);
  border-bottom:1px solid var(--trait);margin-top:28px}
.chemins-principaux li{padding:24px 26px 24px 2.8em;border-top:0;border-right:1px solid var(--trait)}
.chemins-principaux li:last-child{border-right:0;border-bottom:0}
.chemins-principaux .chemin-titre{font-size:1.16rem;text-decoration:none}
.chemins-principaux .chemin-titre:hover{color:var(--petrole)}
/* Chaque entree porte ses destinations : c'est ce qui a permis de supprimer la
   seconde liste de navigation, qui refaisait la premiere plus bas dans la page. */
.chemins-principaux .vers{display:flex;flex-direction:column;gap:7px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--trait)}
.chemins-principaux .vers a{font-family:var(--mono);font-size:.72rem;
  letter-spacing:.03em;font-weight:400;color:var(--encre-douce);
  text-decoration-color:var(--trait)}
.chemins-principaux .vers a:hover{color:var(--petrole)}
.appel-comparateur{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:17px 0;border-bottom:1px solid var(--trait);font-size:.92rem;color:var(--encre-douce)}
.appel-comparateur a{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--petrole);white-space:nowrap}
.page-index .main-wrap{max-width:1120px}
.page-index .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  align-items:center;gap:34px;padding-top:20px;padding-bottom:18px}
.page-index .hero h1{font-size:clamp(3rem,6vw,5.1rem);max-width:15ch;line-height:.98}
.page-index .hero .lead{font-size:1.28rem;max-width:60ch}
/* Le releve de l'accueil remplace l'illustration generee du 15/08 : des
   nombres recomptes au build valent mieux qu'une image qui ne prouve rien.
   Des filets, aucune boite, aucun fond colore. */
.hero-releve{margin:0;align-self:center;border-top:2px solid var(--encre);
  padding-top:14px}
.hero-releve .surtitre{margin:0 0 4px}
.hero-releve dl{margin:0}
.hero-releve dl>div{display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;padding:11px 0;border-bottom:1px solid var(--trait)}
.hero-releve dt{color:var(--encre-douce);font-size:.98rem;max-width:22ch}
.hero-releve dd{margin:0;text-align:right;font-family:var(--mono);
  font-size:1.5rem;line-height:1.1;color:var(--encre);white-space:nowrap}
.hero-releve dd.dd-date{font-size:1.02rem}
.hero-releve dd span{display:block;font-family:var(--serif);font-size:.84rem;
  color:var(--encre-douce);white-space:normal;margin-top:3px}
.hero-releve .note{margin:12px 0 0;font-size:.82rem;max-width:38ch}

/* La chaine de preuve de la page methode : un schema en texte, lisible sans
   CSS et au lecteur d'ecran. Le trait vertical relie les etapes, il ne les
   enferme pas. */
.chaine-preuve{margin:14px 0 44px;padding:0}
.chaine-preuve figcaption{font-size:.92rem;color:var(--encre-douce);
  padding-bottom:14px;border-bottom:1px solid var(--trait);max-width:62ch}
.chaine-preuve ol{list-style:none;margin:0;padding:0}
.chaine-preuve li{display:grid;grid-template-columns:3.4rem minmax(9ch,13ch) minmax(0,1fr);
  align-items:baseline;gap:0 14px;padding:13px 0;
  border-bottom:1px solid var(--trait)}
.chaine-preuve .rang{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--petrole);margin:0}
.chaine-preuve .quoi{margin:0;font-size:1.02rem}
.chaine-preuve li>p:last-child{margin:0;font-size:.92rem;color:var(--encre-douce);
  line-height:1.5;max-width:56ch}

/* Rythme entre les sections de l'accueil. Il n'y en avait aucun : une section
   ne se detachait que par la marge de son titre, donc celle qui commence par
   un surtitre se collait a la precedente. */
.page-index section.bloc + section.bloc{margin-top:clamp(46px,5vw,74px)}

/* Les titres etaient brides a 30 caracteres. Sur un ecran large ils cassaient
   en deux lignes alors que la moitie droite restait vide : le retour a la
   ligne paraissait accidentel. La prose, elle, garde sa mesure de lecture. */
.page-index section.bloc>h2{max-width:46ch}
.page-index section.bloc>p{max-width:66ch}
/* La note est en petit corps : 66 caracteres de SON corps font une colonne
   deux fois plus etroite que le tableau au-dessus, et la coupure paraissait
   accidentelle. */
.page-index section.bloc>p.note{max-width:80ch}

@media (min-width:1024px){
  /* L'echeance : la date a gauche, ce qu'elle impose a droite, au lieu d'une
     colonne unique qui laissait les deux tiers de la largeur vides. */
  .page-index .echeance{display:grid;
    grid-template-columns:minmax(0,15rem) minmax(0,1fr);
    gap:4px 48px;align-items:baseline}
  .page-index .echeance .date{grid-column:1;grid-row:1 / span 2}
  .page-index .echeance>p:not(.date){grid-column:2;max-width:62ch}
  /* Les regles du site tiennent en deux colonnes plutot qu'en une longue
     colonne de quatre paragraphes. */
  .liste-regles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 56px;max-width:none}
  .liste-regles li{margin:0}
}

/* Comparateur : aucune note globale, l'information commerciale n'entre pas
   dans l'ordre et la preuve reste attachée à chaque valeur. */
.page-comparateur .main-wrap{max-width:1420px;padding-left:24px;padding-right:24px}
/* L'en-tete etait masque ici au-dela de 1024 px : le comparateur perdait la
   navigation ET la bascule jour/nuit, donc le mode clair y etait inatteignable.
   Le rail garde son role de contexte, il ne remplace pas l'en-tete. */
.page-comparateur .rail-logo{display:none}
.page-comparateur .main-wrap{padding-top:24px}
.layout-comparateur{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start}
.rail-comparateur{padding-right:18px;border-right:1px solid var(--trait)}
.rail-logo{display:block;margin:6px 0 54px;font-size:1.2rem;font-weight:600;text-decoration:none}
.rail-logo span{font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;color:var(--encre-douce);vertical-align:.45em}
.rail-independance{background:var(--petrole);color:var(--papier);padding:18px;margin-top:28px}
.rail-independance .note-titre,.rail-independance a{color:var(--papier)}
.rail-independance p{max-width:none}
.comparateur{min-width:0}
.comparateur h1{font-size:clamp(2.55rem,3.4vw,3.35rem);line-height:1.01;max-width:27ch;margin:.3em 0 .35em}
.comparateur>.lead{font-size:1.18rem;max-width:68ch;color:var(--encre-douce)}
.bandeau-indicatif{display:flex;justify-content:space-between;gap:24px;padding:11px 16px;
  border:1px solid var(--ocre);background:var(--ocre-fond);color:var(--ocre);
  font-family:var(--mono);font-size:.67rem;letter-spacing:.04em;text-transform:uppercase}
.promesse-independance{margin:24px 0 26px;padding:12px 0;border-top:1px solid var(--petrole);
  border-bottom:1px solid var(--petrole);color:var(--petrole);font-size:1.04rem;font-weight:600}
.meta-comparaison{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 24px;
  border-bottom:1px solid var(--trait)}
.meta-comparaison>div{padding:12px 18px 16px 0}
.meta-comparaison dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--encre-douce);margin-bottom:7px}
.meta-comparaison dd{margin:0;font-size:.9rem;line-height:1.4}
.table-comparateur{margin-top:0;border-top:4px solid var(--petrole);overflow:auto}
.table-comparateur table{width:100%;min-width:0;table-layout:fixed;font-size:.84rem}
.table-comparateur thead th:first-child{width:19%}
.table-comparateur th,.table-comparateur td{padding:15px 14px;border-right:1px solid var(--trait)}
.table-comparateur thead th{font-family:var(--serif);font-size:1rem;letter-spacing:0;
  text-transform:none;color:var(--encre);min-width:170px;background:var(--papier)}
.table-comparateur thead th:first-child{font-family:var(--mono);font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;min-width:210px}
.table-comparateur th:first-child{position:sticky;left:0;z-index:2;background:var(--papier)}
.table-comparateur tbody th{font-family:var(--mono);font-size:.62rem;line-height:1.35;
  letter-spacing:.05em;text-transform:uppercase;color:var(--encre);min-width:210px}
.table-comparateur tbody th small{display:block;margin-top:5px;font-family:var(--serif);
  font-size:.78rem;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--encre-douce);font-weight:400}
.relation{display:block;margin-top:5px;font-family:var(--mono);font-size:.52rem;line-height:1.3;
  letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce);font-weight:400}
.valeur-comparaison{display:block;min-height:2.8em}
.preuve{display:block;width:max-content;max-width:100%;margin-top:8px;font-family:var(--mono);
  font-size:.54rem;line-height:1.35;letter-spacing:.05em;text-transform:uppercase}
.preuve.verifie{color:var(--petrole)}
.preuve.declare{color:var(--ocre)}
.preuve.non-verifie{color:var(--accent)}
.source-cellule{display:block;margin-top:5px;font-size:.76rem;color:var(--encre-douce)}
.date-cellule{display:block;margin-top:2px;font-family:var(--mono);font-size:.5rem;
  letter-spacing:.03em;color:var(--encre-douce)}
.disclosure-commerciale{margin-top:24px;padding:17px 20px;border-left:3px solid var(--accent);
  background:var(--accent-fond)}
.disclosure-commerciale p{margin:.25em 0;max-width:82ch}
.fin-comparateur{margin-top:22px;max-width:86ch}

@media (max-width:1119px){
  .page-comparateur .main-wrap{padding-top:44px}
  .layout-page,.layout-comparateur{display:block}
  .rail-page{position:static;margin:0 0 38px;padding:0 0 20px;border-right:0;border-bottom:1px solid var(--trait)}
  .rail-page .sommaire ol{columns:2;column-gap:28px}
  .rail-preuve{display:none}
  .layout-page>.page{max-width:780px;margin:0 auto}
  .page-index .hero{grid-template-columns:minmax(0,1fr) minmax(280px,.65fr);gap:18px}
}

@media (max-width:760px){
  header.site .wrap,footer.site .wrap{padding-left:20px;padding-right:20px}
  main.main-wrap{padding:34px 20px 64px}
  header.site .wrap{align-items:flex-start}
  nav.principale{width:100%;overflow-x:auto;flex-wrap:nowrap;border-top:1px solid var(--trait)}
  nav.principale{scrollbar-width:none;-ms-overflow-style:none}
  nav.principale::-webkit-scrollbar{display:none}
  nav.principale a{flex:0 0 auto;padding-left:9px;padding-right:9px}
  .chemins-principaux{display:block}
  .chemins-principaux li{border-right:0;border-top:1px solid var(--trait)}
  .chemins-principaux li:first-child{border-top:0}
  .appel-comparateur{display:block}
  .appel-comparateur a{display:block;margin-top:8px;white-space:normal}
  .meta-comparaison{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bandeau-indicatif{display:block}
  .bandeau-indicatif span{display:block;margin-top:5px}
  .rail-page .sommaire ol{columns:1}
  .page-index .hero{display:block}
  .hero-releve{margin:28px 0 0}
  .chaine-preuve li{grid-template-columns:2.8rem minmax(0,1fr);gap:0 12px}
  .chaine-preuve li>p:last-child{grid-column:2;margin-top:4px}
}

@media (max-width:620px){
  .page-index .hero h1{font-size:2.65rem}
  .page>h1,.comparateur h1{font-size:2.35rem}
  .responsive-stack table{min-width:0}
  .responsive-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .responsive-stack table,.responsive-stack tbody,.responsive-stack tr,.responsive-stack td{display:block;width:100%}
  .responsive-stack tr{padding:12px 0;border-bottom:1px solid var(--trait)}
  .responsive-stack td{padding:7px 0;border:0}
  .responsive-stack td::before{content:attr(data-label);display:block;margin-bottom:4px;
    font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce)}
  .page-calendrier-dpp .tablebox td.dt{white-space:normal}
  .meta-comparaison{display:block}
  .meta-comparaison>div{border-top:1px solid var(--trait)}
}

/* Bascule jour et nuit. Le bouton est pose par assets/theme.js : sans
   JavaScript il n'existe pas, et le site suit alors le theme du systeme.
   Un mot, pas une icone, comme toute la couche technique du site. */
.bascule-hote{display:flex;align-items:center}
.bascule-theme{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--encre-douce);background:none;
  border:1px solid var(--trait);border-radius:0;padding:8px 12px;min-height:38px;
  cursor:pointer}
.bascule-theme:hover{color:var(--encre);border-color:var(--trait-fort)}
.bascule-theme:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:760px){
  /* La bascule tient sur la ligne du logo. Avec un ordre superieur a celui
     de la navigation, elle passait a la ligne toute seule et l'en-tete
     mangeait trois rangees sur un telephone. */
  /* 237 px de logo + 20 d'ecart + 52 de bouton = 309, pour 305 disponibles :
     il manquait quatre pixels, et la bascule tombait a la ligne. */
  header.site .wrap{flex-wrap:wrap;gap:12px}
  .bascule-hote{order:2;margin-left:auto}
  nav.principale{order:3}
  .bascule-theme{padding:6px 10px;min-height:34px}
}

@media (max-width:420px){
  /* Le suffixe FR est un ornement : il coute la place qui manque au logo. */
  .logo::after{display:none}
}

/* Index date du journal. Des filets et une gouttiere de date, pas des cartes :
   la page se parcourait sans aucun repere passe quelques ecrans. */
.index-journal{margin:6px 0 8px;padding:0;border-left:0}
.index-journal>h2{font-family:var(--serif);font-size:1.05rem;letter-spacing:0;
  text-transform:none;color:var(--encre);margin:0 0 4px}
.index-journal .jour{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);
  gap:0 28px;padding:14px 0;border-top:1px solid var(--trait)}
.index-journal .dt{margin:0;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.04em;color:var(--encre-douce);padding-top:3px}
.index-journal ul{list-style:none;margin:0;padding:0}
.index-journal li+li{margin-top:7px}
.index-journal a{font-size:.98rem;text-decoration-color:var(--trait-fort)}
@media (max-width:620px){
  .index-journal .jour{grid-template-columns:minmax(0,1fr);gap:8px}
}

/* Index alphabetique du glossaire. Meme grammaire que l'index du journal :
   une gouttiere pour la lettre, des filets, aucune boite. */
.index-alpha{margin:6px 0 40px;padding:0;border-left:0}
.index-alpha>h2{font-family:var(--serif);font-size:1.05rem;letter-spacing:0;
  text-transform:none;color:var(--encre);margin:0 0 4px}
.index-alpha .lettre{display:grid;grid-template-columns:2.4rem minmax(0,1fr);
  gap:0 20px;padding:11px 0;border-top:1px solid var(--trait)}
.index-alpha .dt{margin:0;font-family:var(--mono);font-size:.8rem;
  color:var(--petrole);padding-top:2px}
.index-alpha ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:5px 0}
/* Le compteur vient de .sommaire : numeroter les termes d'un index
   alphabetique n'a aucun sens, le separateur suffit. */
.index-alpha li::before{content:none}
.index-alpha li{margin:0}
.index-alpha li:not(:last-child)::after{content:"·";color:var(--trait-fort);
  padding:0 9px}
.index-alpha a{font-size:.95rem;text-decoration-color:var(--trait-fort)}

/* Rappel tactile dans l'info-bulle du glossaire. Pose par le script, et
   seulement sur un appareil sans survol. */
.glo-pop .glo-aide{display:block;margin-top:9px;padding-top:8px;
  border-top:1px solid var(--trait);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.05em;color:var(--encre-douce)}

/* Rappel de fin de page. Il ne sert qu'a l'ecran ou le rail n'existe pas :
   au-dela de 1024 px le statut et les sources restent visibles a gauche, le
   repeter serait du bruit. */
.rappel-fin{display:none}
.rappel-fin .rappel-titre{font-family:var(--mono);font-size:.62rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--bleu-gris);
  margin:0 0 10px}
.rappel-fin p{margin:0 0 7px}
.rappel-fin p:last-child{margin-bottom:0}
/* Une page sans rail n'a jamais le statut sous les yeux : le rappel s'y
   montre a toutes les largeurs, pas seulement sur petit ecran. */
.rappel-fin.toujours{display:block}
.rappel-fin{margin-top:46px;padding-top:18px;border-top:2px solid var(--encre)}
@media (max-width:1024px){
  .rappel-fin{display:block}
}

/* Une ligne visee par l'index des criteres ne doit pas se coller au bord haut
   du cadre defilant : on lui laisse de l'air. */
.table-comparateur tbody tr{scroll-margin-top:28px}
.table-comparateur tbody tr:target th[scope="row"]{box-shadow:inset 3px 0 0 var(--petrole)}


/* --------------------------------------------- comparateur sur telephone

   Six colonnes ne s'empilent pas : sous 1024 px, le tableau se lit CRITERE
   PAR CRITERE. Chaque ligne devient un bloc titre par le critere, et chaque
   cellule une entree precedee du nom de l'editeur, deja porte par
   data-editeur. Aucun script, la meme grammaire que responsive-stack. */
@media (max-width:1024px){
  .table-comparateur{overflow:visible;margin:0;padding:0}
  .table-comparateur table{min-width:0;table-layout:auto;display:block;
    font-size:.92rem}
  .table-comparateur thead{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-comparateur tbody,.table-comparateur tr,
  .table-comparateur td,.table-comparateur th{display:block;width:auto}
  .table-comparateur tbody tr{padding:0 0 26px;margin-bottom:26px;
    border-bottom:1px solid var(--trait)}
  .table-comparateur tbody tr:last-child{border-bottom:0}
  .table-comparateur tbody th[scope="row"]{position:static;padding:16px 0 12px;
    border-right:0;border-bottom:2px solid var(--encre);font-size:.68rem;
    min-width:0}
  .table-comparateur tbody th[scope="row"] small{font-size:.9rem}
  .table-comparateur td{padding:13px 0;border-right:0;
    border-bottom:1px solid var(--trait)}
  .table-comparateur td:last-child{border-bottom:0}
  .table-comparateur td::before{content:attr(data-editeur);display:block;
    margin-bottom:5px;font-family:var(--mono);font-size:.6rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--petrole)}
  .table-comparateur .valeur-comparaison{min-height:0}
  /* La ligne visee par l'index doit se detacher, sans filet lateral :
     ici le critere est un titre, plus une cellule de gauche. */
  .table-comparateur tbody tr:target th[scope="row"]{box-shadow:none;
    border-bottom-color:var(--petrole)}
  .table-comparateur tbody tr:target th[scope="row"] span{color:var(--petrole)}
}

/* Neuf encadres portent le ton « attention » et retombaient sur l'ocre par
   defaut, faute de regle. Il se distingue maintenant de « info ». */
.note-bloc.attention{border-left-color:var(--accent);background:var(--accent-fond)}
.note-bloc.attention .note-titre{color:var(--accent)}

/* ------------------------------------------------- correctifs d'audit 15/08

   Les valeurs chiffrees viennent de l'audit d'accessibilite : chaque regle
   ci-dessous corrige un couple mesure sous le seuil, ou un repere absent. */

/* Les 32 questions de FAQ n'avaient plus aucun signe qu'elles s'ouvrent :
   display:flex sur un summary supprime le marqueur natif. */
.faq summary{position:relative;padding-right:28px}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;
  transform:translateY(-50%);font-family:var(--mono);font-size:1.1rem;
  line-height:1;color:var(--petrole)}
details.faq[open] summary::after,.faq details[open] summary::after{content:"−"}

/* L'anneau de focus valait exactement la couleur du fond petrole, soit 1,00:1. */
.rail-independance a:focus-visible{outline-color:var(--papier)}

/* La ligne d'aide tactile de l'info-bulle etait a 1,85:1 en theme sombre :
   le fond du bloc s'inverse, la couleur du texte ne suivait pas. */
.glo-pop .glo-aide{color:var(--papier);opacity:.8;border-top-color:currentColor}

/* Le lien survole tombait a 4,18:1, et le soulignement des termes de
   glossaire a 2,03:1, sous le seuil de 3:1 des elements non textuels. */
a:hover{color:#B0432F}
a.glo{border-bottom-color:var(--encre-douce)}

/* La bordure du bouton de theme etait a 1,38:1, alors que c'est le seul
   moyen d'atteindre le theme clair depuis un systeme en sombre. */
.bascule-theme{border-color:var(--encre-douce);min-height:44px}
@media (max-width:760px){ .bascule-theme{min-height:44px} }

/* Les titres d'encadre passaient de justesse ou echouaient selon le fond. */
.note-bloc.info .note-titre,.note-bloc.ok .note-titre{color:#5A635F}

/* ------------------------------------------- reglages signales par Jordan

   1. Le releve de l'accueil touchait le titre, et le titre cassait en quatre
      lignes parce qu'il etait bride a 15 caracteres. */
@media (min-width:1025px){
  .page-index .hero{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    gap:clamp(48px,6vw,96px);align-items:start;padding-top:34px}
    /* Quatre lignes de titre pour six mots : la taille primait sur la
     lisibilite. A 3,4 rem il tient en trois lignes. */
  .page-index .hero h1{font-size:clamp(2.6rem,3.8vw,3.4rem);max-width:20ch}
  .hero-releve{margin-top:14px}
}

/* 2. Le numero des chemins etait cale a gauche de la cellule, donc colle au
      filet de la colonne precedente. */
.chemins-principaux li{padding-left:3.6em}
.chemins-principaux li::before{left:24px}
@media (max-width:760px){
  .chemins-principaux li{padding-left:3.2em}
  .chemins-principaux li::before{left:4px}
}

/* ------------------------------------------- en-tete de page hors grille

   Le rail precedait le titre : sur telephone, le h1 arrivait a 593 px sur la
   page batteries et a 798 px sur celle des roles. Le titre et la carte
   d'identite sortent donc de la grille, sur les deux largeurs. */
.entete-page{max-width:1080px;margin:0}
.layout-page,.layout-comparateur{margin-top:0}
.entete-page>h1{margin-top:0}
.entete-page .carte-identite{margin-bottom:0}
.layout-page,.layout-comparateur{margin-top:38px}
.page-comparateur .entete-page{max-width:none}

@media (min-width:1025px){
  /* Le titre, le chapo et la carte d'identite partagent UNE seule marge
     gauche, celle du texte de la page. Les caler sur la gouttiere pour occuper
     le vide en haut a gauche donnait un decalage visible entre le titre et son
     propre chapo. Le vide est le prix de l'alignement, et il est moins cher. */
  /* L'en-tete est un element de la grille, place dans la colonne de contenu :
     sa marge gauche EST celle du texte, elle n'est plus recalculee a cote. */
  .entete-page{grid-column:2;grid-row:1;padding-left:0;max-width:none;
    justify-self:stretch;margin-inline:0}
  /* L'ecart de la grille servait aussi de gouttiere verticale : sur une page
     sans en-tete, la rangee 1 vide poussait le contenu de 76 px sous le rail. */
  .layout-page,.layout-comparateur{row-gap:0}
  .layout-page>.rail-page,.layout-comparateur>.rail-page{grid-row:1 / span 2}
  .layout-page>.page,.layout-comparateur>.comparateur{grid-column:2;grid-row:2}
  .layout-page>.page>h2:first-child,
  .layout-page>.page>*:first-child{margin-top:0}
}

/* ------------------------------------------- compacite sur petit ecran

   Le sommaire et la carte d'identite arrivent avant le contenu : chacun
   coutait un ecran entier a 360 px. Ils se resserrent sans rien perdre. */
@media (max-width:620px){
  /* Deux colonnes, comme sur tablette : la hauteur du sommaire est divisee
     par deux et la liste reste entierement visible. */
  .rail-page .sommaire ol{columns:2;column-gap:20px}
  .rail-page .sommaire li{padding:4px 0;break-inside:avoid;line-height:1.3}
  .rail-page .sommaire a{font-size:.84rem}
  .rail-page .sommaire h2{margin-bottom:9px}
  .rail-page{padding-bottom:14px;margin-bottom:26px}
  /* La date de verification et la source tiennent sur une seule rangee. */
  .carte-identite .ci{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 18px}
  .carte-identite .ci-item:first-child{grid-column:1 / -1}
  .entete-page .carte-identite{margin-bottom:6px}
}

@media (max-width:400px){
  /* Huit pixels de gouttiere rendus a la ligne de texte. */
  main.main-wrap{padding-left:16px;padding-right:16px}
  header.site .wrap,footer.site .wrap{padding-left:16px;padding-right:16px}
}


/* Preuve technique d'une cellule, repliee par defaut. Elle ne doit jamais
   concurrencer la reponse : plus petite, plus grise, et le chevron dit
   qu'il y a quelque chose dessous. */
.detail-cellule{margin-top:10px;font-size:.86em}
.detail-cellule summary{cursor:pointer;color:var(--bleu-gris);
  font-weight:600;list-style:none}
.detail-cellule summary::-webkit-details-marker{display:none}
.detail-cellule summary::after{content:" +";font-weight:700}
.detail-cellule[open] summary::after{content:" \2212"}
.detail-cellule summary:hover{color:var(--encre)}
.detail-cellule summary:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;border-radius:2px}
.detail-cellule p{margin:8px 0 0;color:var(--encre-douce);
  border-left:2px solid var(--trait);padding-left:10px}

/* Acces direct au contenu utile, pour le lecteur presse. Mesure a 360 px le
   16/08/2026 : sans lui, le tableau commencait a 1 541 px, soit deux ecrans
   de defilement avant la moindre comparaison. */
.acces-direct{margin:14px 0 0}
.acces-direct a{display:inline-block;padding:11px 16px;min-height:44px;
  box-sizing:border-box;border:1px solid var(--petrole);color:var(--petrole);
  font-weight:600;text-decoration:none;border-radius:2px}
.acces-direct a:hover{background:var(--petrole);color:var(--fond)}
.acces-direct a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.detail-etiquettes{margin-top:16px}