/* Tokens, remise à zéro, typographie, utilitaires, titres de section et rythme des bandes (maquette docs/i4s-accueil.html) */
:root{
  --white:#FFFFFF; --steel:#E8EFF4; --steel2:#DBE6EE; --wash:#F2F6F9;
  --line:#C7D6E0; --line-s:#DFE8EE;
  --navy:#152A38; --body:#3D5766; --mute:#5A7482;
  --blue:#0A5E90; --blue-d:#073F63; --sky:#1B98CC; --sky-d:#0E7FB8;
  --max:1280px; --pad:clamp(20px,4vw,40px);
  --sh:0 1px 2px rgba(21,42,56,.07);
  --sh-2:0 2px 6px rgba(21,42,56,.10),0 14px 28px -18px rgba(21,42,56,.35);
  --ui:"Manrope","Helvetica Neue",Arial,sans-serif;
  --tx:"Inter","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{background:var(--white);color:var(--body);font-family:var(--tx);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
/* Une <picture> qui laisse sa photo prendre la place d'un enfant de grille (display:contents, lot 7) : ses <source>
   ne doivent pas devenir des cases de la grille. Le choix de la source ne dépend pas de leur affichage. */
picture > source{display:none}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
/* Lien dans un texte saisi (balisage minimal, lot 8) : souligné, il se distingue du texte autrement que par sa couleur */
a.lt{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a.lt:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
p{max-width:64ch}
sup{font-size:.62em;vertical-align:.45em}
h1,h2,h3,h4{font-family:var(--ui);color:var(--navy);line-height:1.12;
  letter-spacing:-.022em;text-wrap:balance;font-weight:800}
h1{font-size:clamp(2.05rem,3.9vw,3.15rem);letter-spacing:-.031em}
h2{font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.027em}
h3{font-size:1.16rem;font-weight:700}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:14px 22px;z-index:500}
.skip:focus{left:0;top:0}
/* Texte pour les lecteurs d'écran seulement */
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{width:1em;height:1em;fill:currentColor;flex:0 0 auto;vertical-align:-.115em}
.ic--s{width:.78em;height:.78em}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- titres de section ---------- */
.eyb{display:inline-flex;align-items:center;gap:11px;font-family:var(--ui);
  font-weight:800;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue)}
.eyb i{display:block;width:26px;height:3px;background:var(--sky)}
.sh{display:grid;gap:15px;justify-items:start;margin-bottom:44px;max-width:62ch}
.sh__c{color:var(--body);font-size:1.03rem}
.sh--c{justify-items:center;text-align:center;margin-inline:auto}
.sh--l h2{color:#fff} .sh--l .sh__c{color:#D3E6F2}
.sh--l .eyb{color:#fff} .sh--l .eyb i{background:#7FCBEC}

/* ---------- rythme ---------- */
.band{padding-block:clamp(56px,7vw,92px)}
.band--ice{background:var(--steel);border-block:1px solid var(--line)}
.band--blue{background:var(--blue);color:#fff}

[hidden]{display:none!important}
/* Remplace les deux style="margin-top:28px" de la maquette : la CSP du site interdit les styles en ligne */
.apres-bloc{margin-top:28px}

/* Point focal d'une photo recadrée par object-fit (correctif graphique après le lot 8, App\Service\Medias\PhotoEtTexte) :
   une grille de positions par pas de 10 %, posée par classes (CSP : aucun attribut style), lue par
   object-position:var(--pf-x,50%) var(--pf-y,50%). Le centre n'a pas de classe. Une image de tête cadrée porte en plus
   « pf », qui pose le centre avant les classes qui l'écartent (sans elle, la bande garde son cadrage par défaut). */
.pf{--pf-x:50%;--pf-y:50%}
.pf-x0{--pf-x:0%} .pf-x10{--pf-x:10%} .pf-x20{--pf-x:20%} .pf-x30{--pf-x:30%} .pf-x40{--pf-x:40%} .pf-x60{--pf-x:60%} .pf-x70{--pf-x:70%} .pf-x80{--pf-x:80%} .pf-x90{--pf-x:90%} .pf-x100{--pf-x:100%}
.pf-y0{--pf-y:0%} .pf-y10{--pf-y:10%} .pf-y20{--pf-y:20%} .pf-y30{--pf-y:30%} .pf-y40{--pf-y:40%} .pf-y60{--pf-y:60%} .pf-y70{--pf-y:70%} .pf-y80{--pf-y:80%} .pf-y90{--pf-y:90%} .pf-y100{--pf-y:100%}