/* Les pages de contenu — une seule feuille pour toutes.
   Elles etaient nees avec leur style en ligne, ce qui allait pour une page et
   plus pour cinq : la meme regle recopiee cinq fois diverge a la premiere
   retouche. Le navigateur ne la telecharge qu'une fois pour tout le groupe. */
:root{--bleu:#000091;--rouge:#e1000f;--papier:#fbfbfd;--encre:#0d0f14;
  --gris:#4e5563;--gris-clair:#7c8494;--filet:#dfe2ea;
  --ui:'Archivo','Segoe UI',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--papier);color:var(--encre);font-family:var(--ui);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
.env{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
a{color:var(--bleu)}

header{border-bottom:1px solid var(--filet);padding:22px 0;margin-bottom:52px}
header .env{display:flex;align-items:center;justify-content:space-between;gap:20px}
.retour{text-decoration:none;font-weight:650;font-size:15px;display:inline-flex;
  align-items:center;gap:9px}
.retour b{color:var(--encre)}.retour i{font-style:normal;color:var(--rouge)}
nav{display:flex;gap:20px;font-size:13.5px;flex-wrap:wrap}
nav a{color:var(--gris);text-decoration:none}
nav a:hover,nav a[aria-current]{color:var(--encre)}

main{padding-bottom:80px}
h1{font-size:clamp(30px,4.4vw,42px);font-weight:800;letter-spacing:-.03em;
  line-height:1.1;margin-bottom:10px}
h2{font-size:clamp(19px,2.2vw,23px);font-weight:700;letter-spacing:-.02em;
  margin:40px 0 12px;padding-top:20px;border-top:1px solid var(--filet)}
h3{font-size:17px;font-weight:650;margin:26px 0 8px}
p,ul,ol,table{margin-bottom:16px}
ul,ol{padding-left:22px}
li{margin-bottom:6px}
.maj{color:var(--gris-clair);font-size:14px;margin-bottom:40px}
.chapo{font-size:18.5px;color:var(--gris);margin-bottom:34px}
strong{font-weight:650}
blockquote{border-left:3px solid var(--filet);padding-left:16px;color:var(--gris);
  margin-bottom:16px}
table{border-collapse:collapse;width:100%;font-size:15px;display:block;
  overflow-x:auto}
th,td{border:1px solid var(--filet);padding:9px 12px;text-align:left;
  vertical-align:top}
th{background:#f2f4f9;font-weight:650}

/* Le modele : il se lit autrement que le texte courant — on le survole, on le
   copie, on y revient. Le meler au corps obligerait a chercher ou il commence. */
.modele{background:#fff;border:1px solid var(--filet);border-radius:8px;
  padding:clamp(20px,4vw,30px);margin-bottom:22px;font-size:15.5px;
  line-height:1.7}
.modele p{margin-bottom:14px}
.modele p:last-child{margin-bottom:0}
.modele .role{display:block;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris-clair);font-weight:650;
  margin-bottom:5px}

.encart{background:#fff;border:1px solid var(--filet);
  border-left:3px solid var(--bleu);border-radius:0 8px 8px 0;
  padding:20px 22px;margin:26px 0}
.encart p:last-child{margin-bottom:0}
.encart b{color:var(--bleu)}
.encart.rouge{border-left-color:var(--rouge)}
.encart.rouge b{color:var(--rouge)}

/* Le calcul : deux lignes et un total, parce qu'une somme se lit mieux posee
   qu'ecrite dans une phrase. */
.calcul{background:#fff;border:1px solid var(--filet);border-radius:8px;
  padding:20px 22px;margin:22px 0;font-variant-numeric:tabular-nums}
.calcul div{display:flex;justify-content:space-between;gap:16px;
  padding:7px 0;border-bottom:1px solid var(--filet)}
.calcul div:last-child{border:0;font-weight:700;font-size:17px;
  padding-top:12px}
.calcul span:last-child{white-space:nowrap}
.calcul .var{color:var(--gris)}

.appel{background:var(--bleu);color:#fff;border-radius:10px;
  padding:clamp(24px,4vw,34px);margin:44px 0 0}
.appel h2{color:#fff;border:0;margin:0 0 10px;padding:0}
.appel p{color:rgba(255,255,255,.78);margin-bottom:18px}
.appel a{display:inline-block;background:#fff;color:var(--bleu);
  text-decoration:none;font-weight:700;font-size:15px;padding:13px 22px;
  border-radius:7px}

/* Les autres pages du groupe, en fin d'article. Un lecteur qui a fini une page
   est le plus dispose a en ouvrir une seconde, et Google suit ces liens. */
.suite{margin-top:44px;padding-top:24px;border-top:1px solid var(--filet)}
.suite h2{border:0;padding:0;margin:0 0 14px;font-size:17px}
.suite ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
@media(min-width:640px){.suite ul{grid-template-columns:1fr 1fr}}
.suite a{display:block;background:#fff;border:1px solid var(--filet);
  border-radius:8px;padding:13px 15px;text-decoration:none;font-weight:650;
  font-size:15px;color:var(--encre)}
.suite a:hover{border-color:var(--bleu);color:var(--bleu)}
.suite a span{display:block;font-weight:400;font-size:13.5px;
  color:var(--gris-clair);margin-top:3px}

footer{border-top:1px solid var(--filet);padding:32px 0;font-size:13.5px;
  color:var(--gris-clair)}
footer .env{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between}
footer a{color:inherit;text-decoration:none}footer a:hover{color:var(--encre)}