/* ==========================================================================
   COMPARATEUR — bandeau de navigation ENTRE les maquettes.
   Ne fait PAS partie du site : c'est l'outil de choix d'Alain Cochard.
   Volontairement neutre, gris, sans caractère : il ne doit ressembler à
   aucune des quatre propositions, sinon il en avantage une.
   Se retire en supprimant deux lignes — voir README, « Passer en production ».
   ========================================================================== */
.cmp{
  --cmp-fond:#16181C; --cmp-txt:#C9CDD4; --cmp-vif:#FFFFFF; --cmp-trait:#2C3037;
  position:sticky; top:0; z-index:900;
  background:var(--cmp-fond); color:var(--cmp-txt);
  font:500 13px/1.3 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  border-bottom:1px solid var(--cmp-trait);
  -webkit-font-smoothing:antialiased;
}
.cmp *{box-sizing:border-box}
.cmp__in{
  max-width:100rem; margin-inline:auto; padding:.5rem clamp(.75rem,2vw,1.5rem);
  display:flex; align-items:center; gap:clamp(.5rem,2vw,1.5rem); flex-wrap:wrap;
}
.cmp__retour{
  display:inline-flex; align-items:center; gap:.4rem; color:var(--cmp-txt);
  text-decoration:none; padding:.35rem .6rem; border-radius:6px;
  border:1px solid var(--cmp-trait); white-space:nowrap;
}
.cmp__retour:hover{color:var(--cmp-vif); border-color:#4A5058}
.cmp__fleche{width:15px;height:15px;transform:scaleX(-1)}
.cmp__liens{display:flex; gap:.25rem; flex-wrap:wrap; flex:1 1 auto}
.cmp__lien{
  display:inline-flex; align-items:baseline; gap:.4rem;
  padding:.35rem .65rem; border-radius:6px; text-decoration:none;
  color:var(--cmp-txt); white-space:nowrap;
}
.cmp__lien:hover{background:#22262C; color:var(--cmp-vif)}
.cmp__lien[aria-current]{background:#EDEFF2; color:#16181C}
.cmp__num{font-variant-numeric:tabular-nums; color:#A2A9B3; font-size:11px}
.cmp__lien[aria-current] .cmp__num{color:#5A6069}
.cmp__page{margin:0; color:#A2A9B3; white-space:nowrap; font-weight:400}
.cmp a:focus-visible{outline:2px solid #7FB3FF; outline-offset:2px}
@media (max-width:44rem){
  .cmp__page{display:none}
  .cmp__nom{display:none}
  .cmp__lien{padding:.35rem .55rem}
  .cmp__num{font-size:13px}   /* pas d'opacité : elle éclaircissait le
                                 numéro de l'onglet actif sous 4,5:1 */
}
@media print{.cmp{display:none}}

/* Lien d'évitement — commun aux quatre maquettes, sinon il faudrait le
   réécrire quatre fois et il serait oublié trois fois. */
.saut-contenu{
  position:absolute; left:50%; translate:-50% -200%; z-index:1000;
  background:#16181C; color:#fff; padding:.7rem 1.2rem; border-radius:0 0 8px 8px;
  font:500 14px/1 ui-sans-serif,system-ui,sans-serif; text-decoration:none;
  transition:translate 180ms ease;
}
.saut-contenu:focus{translate:-50% 0}

/* Marqueur « à valider » — commun, pour la même raison.
   Il porte son PROPRE fond opaque : posé aussi bien sur une section claire que
   sur une section sombre, il doit rester lisible sans que chaque maquette ait
   à y penser. Un avertissement qu'on ne lit pas ne sert à rien. */
.a-valider{
  display:flex; gap:.6rem; align-items:flex-start;
  margin:1.25rem 0; padding:.75rem .95rem;
  background:#FBEEEA; border-left:3px solid #9E2F17;
  color:#3E2A24; border-radius:0 var(--av-r,6px) var(--av-r,6px) 0;
  font:400 clamp(13px,.8rem + .2vw,14px)/1.55 ui-sans-serif,system-ui,sans-serif;
}
.a-valider strong{color:#8C2913}
.a-valider__ic{width:18px;height:18px;flex:none;color:#9E2F17;margin-top:.15em}