/* Feuille commune des pages intérieures (questions écrites…). La page d'accueil garde son CSS intégré. */
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url(/polices/spectral-400.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url(/polices/spectral-400-italique.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url(/polices/spectral-600.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400;font-display:swap;src:url(/polices/atkinson-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:700;font-display:swap;src:url(/polices/atkinson-700.woff2) format("woff2")}

:root{
  --nuit:#13213F;--nuit-clair:#1E3160;--pierre:#E9EAE4;--encre:#18233A;--gris:#525B6C;
  --bleu:#1F4E8C;--bleu-drapeau:#1F3F8F;--rouge:#C1121F;
  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --sans:"Atkinson Hyperlegible Next", "Segoe UI", Arial, sans-serif;
  --mesure:68ch;--marge:clamp(20px, 5vw, 72px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--encre);font:400 19px/1.62 var(--serif)}
a{color:var(--bleu);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.sombre :focus-visible{outline-color:#fff}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0}
p{margin:0 0 1em}
sup{font-size:.62em;line-height:0;vertical-align:.5em}
.masque{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:12px;top:-60px;z-index:10;background:#fff;color:var(--nuit);padding:10px 16px;font:700 16px var(--sans);border-radius:4px}
.evitement:focus{top:12px}
.drapeau{height:6px;background:linear-gradient(90deg,var(--bleu-drapeau) 0 33.34%,#fff 33.34% 66.67%,var(--rouge) 66.67%)}

.entete{background:var(--nuit);color:#fff;padding:18px var(--marge);display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;justify-content:space-between}
.entete .marque{color:#fff;text-decoration:none;font:600 21px/1.2 var(--serif)}
.entete .marque span{display:block;font:400 15px/1.3 var(--sans);color:rgba(255,255,255,.72);margin-top:2px}
.entete nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 26px}
.entete nav a{color:rgba(255,255,255,.86);text-decoration:none;font:400 17px/1.4 var(--sans);padding:4px 0;border-bottom:2px solid transparent}
.entete nav a:hover,.entete nav a[aria-current]{color:#fff;border-bottom-color:var(--rouge)}

.page{padding:56px var(--marge) 88px;max-width:calc(var(--mesure) + 2 * var(--marge));margin:0 auto;box-sizing:content-box}
.ariane{font:400 16px/1.5 var(--sans);color:var(--gris);margin:0 0 28px}
.ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.ariane li+li::before{content:"›";margin:0 8px 0 4px}
.page h1{font-size:clamp(32px,4.4vw,46px);margin-bottom:20px}
.chapeau{font-size:21px;color:var(--gris);margin-bottom:12px}
.statut{display:inline-block;font:700 15px/1.3 var(--sans);padding:6px 12px;border-radius:3px;background:var(--pierre);color:var(--encre)}
.statut.repondu{background:#E3ECF7;color:var(--bleu)}
.page h2{font-size:28px;margin:48px 0 16px}
.texte{border-left:4px solid var(--nuit);padding:2px 0 2px 24px;margin:0}
.texte.reponse{border-left-color:var(--rouge)}
.texte p{margin:0 0 .9em}
.meta{font:400 16px/1.5 var(--sans);color:var(--gris);margin:0 0 14px}
.source{font:400 15px/1.6 var(--sans);color:var(--gris);margin-top:48px;border-top:1px solid #D5D7DD;padding-top:16px}

.liste{list-style:none;margin:40px 0 0;padding:0}
.liste li{border-top:1px solid #D5D7DD;padding:22px 0}
.liste li:last-child{border-bottom:1px solid #D5D7DD}
.liste .meta{margin:0 0 6px}
.liste h2{font-size:23px;line-height:1.3;margin:0 0 10px}
.liste h2 a{color:var(--encre);text-decoration:none}
.liste h2 a:hover{text-decoration:underline}
.compte{font:400 17px/1.5 var(--sans);color:var(--gris)}

.pied{background:#0E1830;color:rgba(255,255,255,.8);padding:36px var(--marge) 44px;font:400 16px/1.6 var(--sans)}
.pied a{color:#fff}
.pied .ligne{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}

@media (max-width:640px){
  body{font-size:18px}
  .page{padding-top:36px}
  .chapeau{font-size:19px}
  .texte{padding-left:16px}
}
@media print{
  .drapeau,.entete nav{display:none}
  .entete,.pied{background:none;color:#000}
  .entete .marque{color:#000}
}