/* ==========================================================================
   Base Sociétés — feuille de style commune (identité « net et précis », 25/09/2026)
   Accueil, Conformité et Pour les DSI, en français et en anglais. La section
   « Pages de contenu » en fin de fichier habille les composants propres aux
   pages Conformité et DSI.
   Police Hanken Grotesk servie depuis ce site (paquet @fontsource,
   licence SIL Open Font License 1.1) : aucun appel à un service tiers.
   ========================================================================== */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/hanken-grotesk-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/hanken-grotesk-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/hanken-grotesk-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/hanken-grotesk-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/hanken-grotesk-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:800;src:url(fonts/hanken-grotesk-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:800;src:url(fonts/hanken-grotesk-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --encre:#0b1b2e; --texte:#3d4a5c; --discret:#5b6778; --trait:#e3e8ef; --trait-fort:#d5dce6; --ligne:#eef1f5;
  --doux:#f5f7fa; --accent:#0b5f7a; --accent-fonce:#08465a; --accent-doux:#e8f3f7; --accent-clair:#9ec5d4;
  --ok:#067647; --ok-doux:#ecfdf3; --alerte:#93370d; --alerte-doux:#fef6ee; --alerte-bord:#f9dbaf;
  --rejet:#b42318; --rejet-doux:#fef3f2; --rejet-bord:#fecdca; --nuit-texte:#c3cedb;
  --gouttiere:clamp(20px,5vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.6;color:var(--encre);background:#fff;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%}
a{color:var(--accent)}a:hover{color:var(--accent-fonce)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--encre);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:16px}
.skip:hover{color:#fff}

.contenant{max-width:1440px;margin:0 auto;padding:0 var(--gouttiere)}
.sec{padding:clamp(72px,9vw,112px) 0}
.sec.soft{background:var(--doux)}
.sec.filet{border-top:1px solid var(--trait)}
.pile{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.surtitre{font-size:14px;font-weight:700;color:var(--accent);letter-spacing:.01em}
.titre{font-size:clamp(32px,4.2vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.06}
.titre-m{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.025em}
.chapeau{font-size:clamp(17px,1.4vw,18px);line-height:1.65;color:var(--texte)}
.deux-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px);align-items:center}
.deux-col.bas{align-items:end}
.entete{display:flex;flex-direction:column;gap:18px}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:8px;font:inherit;font-size:16px;font-weight:700;text-decoration:none;border:0;cursor:pointer;text-align:center}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-fonce);color:#fff}
.btn-clair{background:#fff;color:var(--encre);border:1px solid #c3ccd8}
.btn-clair:hover{border-color:var(--accent);color:var(--accent)}
.lien-fleche{font-weight:600;text-decoration:none}
.lien-fleche:hover{text-decoration:underline}

/* ---------- en-tête ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--trait);backdrop-filter:saturate(1.4) blur(8px)}
header.nav .inner{max-width:1440px;margin:0 auto;padding:0 var(--gouttiere);min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.marque{display:flex;align-items:center;gap:12px;min-width:0}
.marque .nom{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--encre);text-decoration:none;white-space:nowrap}
.marque .par{font-size:13px;color:var(--discret);padding-left:12px;border-left:1px solid var(--trait-fort);text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.marque .par:hover{color:var(--accent)}
.nav-droite{display:flex;align-items:center;gap:8px}
nav.links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);font-size:15px;font-weight:500}
nav.links a{color:var(--texte);text-decoration:none;white-space:nowrap}
nav.links a:hover,nav.links a[aria-current="page"]{color:var(--encre)}
nav.links a.cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:8px;background:var(--accent);color:#fff;font-weight:600}
nav.links a.cta:hover{background:var(--accent-fonce)}
a.lang{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--texte);text-decoration:none;padding:8px 10px;border-radius:8px}
a.lang:hover{background:var(--doux);color:var(--encre)}
a.lang svg{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(11,27,46,.15)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--trait-fort);border-radius:8px;background:#fff;font-size:20px;color:var(--encre);cursor:pointer}

/* ---------- héros ---------- */
.heros{padding:clamp(56px,7vw,96px) 0 clamp(64px,7vw,104px)}
.heros h1{font-size:clamp(38px,5vw,60px);font-weight:800;line-height:1.04;letter-spacing:-.03em}
.heros .gauche{display:flex;flex-direction:column;gap:28px}
.heros .chapeau{font-size:clamp(17px,1.5vw,19px);max-width:34em}
.heros .chapeau b{color:var(--encre)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.garanties{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px;color:var(--texte)}
.garanties li{display:flex;align-items:center;gap:8px}
.garanties li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}

.fiche{background:#fff;border:1px solid var(--trait-fort);border-radius:14px;box-shadow:0 1px 2px rgba(11,27,46,.06),0 12px 32px rgba(11,27,46,.08);overflow:hidden}
.fiche .haut{padding:18px 24px;border-bottom:1px solid var(--trait);display:flex;justify-content:space-between;align-items:center;gap:16px}
.fiche .haut .t{font-weight:700;font-size:17px}
.fiche .haut .s{font-size:13px;color:var(--discret);margin-top:2px}
.pastille{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.pastille.alerte{color:var(--alerte);background:var(--alerte-doux);border:1px solid var(--alerte-bord)}
.pastille.info{color:var(--accent);background:var(--accent-doux)}
.pastille.rejet{color:var(--rejet);background:var(--rejet-doux);border:1px solid var(--rejet-bord)}
.pastille.plein{color:#fff;background:var(--rejet)}
.lignes{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr) auto;font-size:14px}
.lignes > *{padding:13px 0;border-bottom:1px solid var(--ligne)}
.lignes > :nth-child(3n+1){padding-left:24px;color:var(--discret);padding-right:12px}
.lignes > :nth-child(3n){padding-right:24px;padding-left:12px;text-align:right;color:var(--ok);font-weight:600}
.lignes > :nth-last-child(-n+3){border-bottom:0}
.lignes .attente{color:var(--alerte);font-weight:600}
.lignes .neutre{color:var(--discret)!important;font-weight:400!important}

/* tableau à deux colonnes (rejet, procédure) */
.duo{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);font-size:15px}
.duo > *{padding:14px 24px 14px 0;border-bottom:1px solid var(--ligne)}
.duo > :nth-child(odd){padding-left:24px;padding-right:12px;color:var(--discret)}
.duo > :nth-last-child(-n+2){border-bottom:0}
.cadre{border:1px solid var(--trait-fort);border-radius:14px;overflow:hidden;background:#fff}
.cadre .bandeau{padding:16px 24px;background:var(--doux);border-bottom:1px solid var(--trait);font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:12px}
.cadre.rouge{border-color:var(--rejet-bord)}
.cadre.rouge .bandeau{background:var(--rejet-doux);border-color:var(--rejet-bord)}
.cadre .note{padding:10px 24px;font-size:12px;color:var(--discret);border-top:1px solid var(--ligne)}

/* ---------- la base bouge ---------- */
.evenements{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.evenement{border:1px solid var(--trait-fort);border-radius:12px;padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.evenement h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
.evenement p{font-size:14px;line-height:1.55;color:var(--texte)}
.chaine-titre{font-size:20px;font-weight:800;margin-bottom:20px}
.chaine{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr);align-items:start;margin:0;padding:0;list-style:none}
.maillon{background:var(--doux);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.maillon .e{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--discret)}
.maillon .q{font-size:17px;font-weight:700}
.maillon .d{font-size:13px;line-height:1.5;color:#7a271a}
.maillon.perime .e{color:var(--rejet)}
.maillon.rejet{background:var(--rejet-doux);border:1px solid var(--rejet-bord)}
.maillon.rejet .e{color:var(--rejet)}
.maillon.fantome{background:none;border:1px dashed #c3ccd8;color:var(--discret)}
.fleche{display:flex;justify-content:center;padding-top:26px;color:#8a94a3}
.fleche.pale{color:#c3ccd8}
.fleche svg{width:20px;height:20px}
.alerte-bodacc .surtitre{color:var(--rejet)}
.alerte-bodacc h3{font-size:clamp(26px,2.8vw,36px);font-weight:800;line-height:1.12}
.alerte-bodacc .gauche{display:flex;flex-direction:column;gap:18px}
.discret{font-size:15px;color:var(--discret)}
.cycle{background:var(--encre);color:#fff;border-radius:16px;padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column;gap:28px}
.cycle .tete{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 40px}
.cycle .tete h3{font-size:clamp(22px,2.2vw,26px);font-weight:800}
.cycle .tete p{font-size:15px;color:var(--nuit-texte)}
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.etapes li{border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px}
.etapes .n{font-size:13px;font-weight:700;color:var(--accent-clair)}
.etapes .q{font-size:17px;font-weight:700}
.etapes .d{font-size:14px;line-height:1.5;color:var(--nuit-texte)}
.cycle .boucle{display:flex;align-items:center;gap:12px;color:var(--accent-clair);font-size:14px;font-weight:600}
.cycle .boucle svg{flex-shrink:0;width:22px;height:22px}

/* ---------- échéances ---------- */
.deadline{background:var(--encre);color:#fff;padding:clamp(48px,5vw,64px) 0}
.deadline .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.deadline .phase{display:flex;flex-direction:column;gap:12px;padding-right:56px}
.deadline .phase + .phase{padding:0 0 0 56px;border-left:1px solid rgba(255,255,255,.16)}
.deadline .cible{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-clair)}
.deadline .etat{font-size:clamp(24px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.deadline p{font-size:16px;line-height:1.6;color:var(--nuit-texte)}
.deadline p b,.deadline strong{color:#fff}
.deadline .count{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.deadline .count .n{font-size:clamp(44px,4.4vw,56px);font-weight:800;line-height:1;letter-spacing:-.03em}
.deadline .count .n-unit{font-size:18px;font-weight:600;color:var(--nuit-texte)}
.deadline-lien{margin-top:36px!important}
.deadline-lien a{color:#fff;font-weight:600}
.deadline-lien a:hover{color:var(--accent-clair)}

/* ---------- doublons ---------- */
.cas{margin:0;padding:0;list-style:none}
.cas li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:16px 24px;border-bottom:1px solid var(--ligne)}
.cas li:last-child{border-bottom:0}
.cas .pastille{grid-row:1/3;align-self:start;text-align:center}
.cas .q{font-weight:700;font-size:16px}
.cas .d{font-size:14px;line-height:1.55;color:var(--texte)}
.pastille.ok{color:var(--ok);background:var(--ok-doux)}

/* ---------- gouvernance ---------- */
.proposition{background:#fff;border:1px solid var(--trait-fort);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:18px}
.proposition .tete{display:flex;justify-content:space-between;align-items:center;gap:12px}
.proposition .tete span:first-child{font-weight:700;font-size:18px}
.proposition dl{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:10px 12px;margin:0;font-size:15px}
.proposition dt{color:var(--discret)}
.proposition dd{margin:0}
.proposition .avant{color:var(--discret);text-decoration:line-through}
.proposition .apres{font-weight:700}
.proposition p{font-size:14px;line-height:1.6;color:var(--texte)}
.proposition .gestes{display:flex;gap:12px}
.proposition .gestes span{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:8px;font-weight:700;font-size:15px}
.proposition .oui{background:var(--accent);color:#fff}
.proposition .non{border:1px solid #c3ccd8;color:var(--encre);font-weight:600!important}
.gouv .droite{display:flex;flex-direction:column;gap:22px;align-items:flex-start}

/* ---------- clients étrangers ---------- */
.annuaires{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px;align-items:start}
.bloc-pays .tete{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 16px;border-bottom:2px solid var(--encre);padding-bottom:12px}
.bloc-pays .tete h3{font-size:20px;font-weight:800;letter-spacing:-.01em}
.compte{font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.compte.ok{color:var(--ok);background:var(--ok-doux)}
.compte.info{color:var(--accent);background:var(--accent-doux)}
.bloc-pays .expl{margin-top:14px;font-size:14px;line-height:1.55;color:var(--texte)}
.pays-liste{margin:0;padding:0;list-style:none}
.pays-liste.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.pays-liste.quatre{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));column-gap:28px}
.pays-liste li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--ligne)}
.pays-liste .drapeau{flex-shrink:0;width:33px;height:22px;border-radius:3px;box-shadow:0 0 0 1px rgba(11,27,46,.15);margin-top:2px}
.pays-liste .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.pays-liste .p{font-size:16px;font-weight:700}
.pays-liste .r{font-size:14px;color:var(--texte)}
.pays-liste .d{font-size:13px;font-weight:600;color:var(--ok)}
.pays-liste.adresse .d{color:var(--accent)}
.pays-liste.mesure .d{color:var(--discret)}
.pays-liste .n{font-size:13px;line-height:1.5;color:var(--alerte)}
.sur-mesure{background:var(--doux);border-radius:16px;padding:clamp(24px,3vw,36px) clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:20px}
.sur-mesure .tete{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 32px}
.sur-mesure .tete h3{font-size:20px;font-weight:800}
.sur-mesure .tete p{font-size:14px;color:var(--texte)}
.sur-mesure > p{font-size:14px;line-height:1.6;color:var(--texte)}

/* ---------- sources (bloc repris) ---------- */
#solution .section-head{display:flex;flex-direction:column;gap:18px;max-width:52em;margin-bottom:48px}
#solution h2.display{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.025em}
#solution h3{font-weight:800}
.section-head .eyebrow,.eyebrow{font-size:14px;font-weight:700;color:var(--accent)}
.section-head .lead,.lead{font-size:clamp(17px,1.4vw,18px);line-height:1.65;color:var(--texte)}
.grid{display:grid;gap:20px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.src{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--trait-fort);border-radius:12px;padding:22px 24px}
.src .tag{flex-shrink:0;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--accent);background:var(--accent-doux);padding:5px 9px;border-radius:6px;min-width:64px;text-align:center}
.src h4{font-size:17px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.src p{font-size:15px;line-height:1.6;color:var(--texte)}

/* ---------- vidéo (bloc repris) ---------- */
#video .container-narrow{max-width:1040px;margin:0 auto;padding:0 var(--gouttiere)}
#video .section-head{display:flex;flex-direction:column;gap:14px;align-items:center}
#video h2.display{font-size:clamp(28px,3.4vw,44px);font-weight:800}
.videobloc{border-radius:14px;overflow:hidden;border:1px solid var(--trait-fort);background:var(--encre);box-shadow:0 12px 32px rgba(11,27,46,.1)}
.videobloc video{display:block;width:100%;height:auto}
.video-suite{margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;text-decoration:none;color:var(--encre)}
.video-suite img{width:44px;height:44px}
.video-suite .t{font-weight:700;font-size:17px}
.video-suite .s{color:var(--accent);font-weight:600}

/* ---------- pour qui (bloc repris) ---------- */
#pourqui .section-head,#demarrer .section-head,.nots-sec .section-head{display:flex;flex-direction:column;gap:18px;max-width:56em;margin-bottom:48px}
#pourqui h2.display,#demarrer h2.display,.nots-sec h2.display,#questions h2.display,#contact h2.display{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.025em}
.profil{border-top:1px solid var(--trait-fort);padding-top:22px;display:flex;flex-direction:column;gap:12px}
.profil .role{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.profil h3{font-size:22px;font-weight:800}
.profil p{font-size:15px;line-height:1.65;color:var(--texte)}
.profil .quote{font-weight:600;color:var(--encre)}

/* ---------- par où commencer ---------- */
.choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.option{border:1px solid var(--trait-fort);border-radius:16px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:18px;background:#fff}
.option.forte{border:2px solid var(--accent)}
.option .tete{display:flex;flex-direction:column;gap:4px}
.option .tete .n{font-size:22px;font-weight:800}
.option .tete .s{font-size:15px;color:var(--discret)}
.option .pour{font-size:15px;font-weight:600;background:var(--doux);border-radius:8px;padding:12px 14px}
.option.forte .pour{background:var(--accent-doux);color:var(--accent-fonce)}
.option ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.option li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:var(--texte)}
.option li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--trait-fort)}
.option.forte li::before{background:var(--accent)}
.option .btn{align-self:flex-start}

/* ---------- ce que ce n'est pas / démarrer (blocs repris) ---------- */
.nots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.not{border:1px solid var(--trait-fort);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:12px}
.not .x{width:32px;height:32px;border-radius:50%;background:var(--doux);color:var(--discret);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.not h3{font-size:19px;font-weight:800}
.not p{font-size:15px;line-height:1.6;color:var(--texte)}
.not .then{margin-top:auto;padding-top:12px;border-top:1px solid var(--ligne);font-size:14px;font-weight:600;color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.step-card{background:#fff;border:1px solid var(--trait-fort);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:12px}
.step-card .idx{font-size:13px;font-weight:800;color:var(--accent)}
.step-card h3{font-size:20px;font-weight:800}
.step-card p,.step-card li{font-size:15px;line-height:1.6;color:var(--texte)}
.step-card ul{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.callout{margin-top:40px;border:1px solid var(--trait-fort);background:var(--doux);border-radius:12px;padding:24px 28px}
.callout h4{font-size:18px;font-weight:800;margin-bottom:8px}
.callout p{font-size:15px;line-height:1.65;color:var(--texte)}
.callout a{font-weight:700;text-decoration:none}

/* ---------- questions (bloc repris) ---------- */
#questions .section-head{text-align:center;margin:0 auto 40px;display:flex;flex-direction:column;gap:14px;align-items:center}
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--trait-fort)}
.faq details{border-bottom:1px solid var(--trait-fort)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:24px;font-weight:500;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq .rep{padding:0 0 22px;display:flex;flex-direction:column;gap:12px}
.faq .rep p{font-size:16px;line-height:1.65;color:var(--texte)}

/* ---------- contact (bloc repris) ---------- */
#contact .container-narrow{max-width:760px;margin:0 auto;padding:0 var(--gouttiere)}
#contact .section-head{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.form-wrap{background:#fff;border:1px solid var(--trait-fort);border-radius:16px;padding:clamp(24px,4vw,40px);position:relative}
.form-logo{display:block;margin:0 auto 20px;width:48px;height:48px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-row > div,.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
label{font-size:14px;font-weight:600}
input,select,textarea{font:inherit;font-size:16px;color:var(--encre);background:#fff;border:1px solid #c3ccd8;border-radius:8px;padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-doux)}
textarea{min-height:140px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:14px;font-size:14px;text-align:center}
.form-msg.err{color:var(--rejet)}
.rgpd{margin-top:18px!important;font-size:13px;line-height:1.55;color:var(--discret);text-align:center}
.form-ok{display:none;text-align:center;padding:24px 0}
.form-ok .big{font-size:24px;font-weight:800;margin-bottom:8px}
.contact-alt{margin-top:24px!important;text-align:center;font-size:15px;color:var(--texte)}

/* ---------- pied de page (bloc repris) ---------- */
footer{background:var(--encre);color:var(--nuit-texte);padding:64px 0 32px;font-size:15px}
footer .container{max-width:1440px;margin:0 auto;padding:0 var(--gouttiere)}
.f-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:48px}
.f-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:18px;margin-bottom:14px}
.f-brand img{filter:brightness(0) invert(1)}
footer h4{color:#fff;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
footer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
footer a{color:var(--nuit-texte);text-decoration:none}
footer a:hover{color:#fff}
.f-site{display:inline-flex;align-items:center;gap:6px;color:#fff!important;font-weight:600}
.f-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px}

/* ---------- apparition ---------- */
.js-on .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js-on .reveal.in{opacity:1;transform:none}
.js-on .reveal.d1{transition-delay:.06s}.js-on .reveal.d2{transition-delay:.12s}.js-on .reveal.d3{transition-delay:.18s}.js-on .reveal.d4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js-on .reveal{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   Adaptation aux écrans
   ========================================================================== */
@media (max-width:1180px){
  .evenements{grid-template-columns:repeat(3,minmax(0,1fr))}
  .annuaires{grid-template-columns:minmax(0,1fr)}
  nav.links{gap:18px}
}
@media (max-width:1024px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  nav.links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--trait);padding:8px var(--gouttiere) 20px;box-shadow:0 12px 24px rgba(11,27,46,.08)}
  nav.links.open{display:flex}
  nav.links a{padding:14px 0;border-bottom:1px solid var(--ligne);font-size:16px}
  nav.links a.cta{margin-top:14px;justify-content:center;border-bottom:0}
  .chaine{grid-template-columns:minmax(0,1fr);gap:0}
  .fleche{padding:6px 0;justify-content:flex-start;padding-left:24px}
  .fleche svg{transform:rotate(90deg)}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.g3,.nots,.steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .deux-col,.choix,.grid.g2{grid-template-columns:minmax(0,1fr)}
  .deux-col.bas{align-items:start}
  .evenements{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deadline .wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  .deadline .phase{padding:0}
  .deadline .phase + .phase{padding:36px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .f-grid{grid-template-columns:minmax(0,1fr)}
  .gouv .gauche-visuel{order:2}
}
@media (max-width:600px){
  body{font-size:16px}
  .marque .par{display:none}
  .evenements,.etapes,.pays-liste.deux,.form-row{grid-template-columns:minmax(0,1fr)}
  .lignes{grid-template-columns:minmax(0,1fr) auto}
  .lignes > :nth-child(3n+1){grid-column:1/-1;padding:12px 18px 0;border-bottom:0;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
  .lignes > :nth-child(3n+2){padding-left:18px}
  .lignes > :nth-child(3n){padding-right:18px}
  .duo{grid-template-columns:minmax(0,1fr)}
  .duo > :nth-child(odd){padding:12px 18px 0;border-bottom:0;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
  .duo > :nth-child(even){padding:4px 18px 12px}
  .fiche .haut,.cadre .bandeau{padding:14px 18px;flex-wrap:wrap}
  .proposition{padding:20px}
  .proposition dl{grid-template-columns:minmax(0,1fr)}
  .proposition dd{margin-bottom:6px}
  .src{flex-direction:column;gap:10px}
  .actions .btn{width:100%}
  .cas li{grid-template-columns:minmax(0,1fr);padding:14px 18px}
  .cas .pastille{grid-row:auto;justify-self:start}
}

/* ==========================================================================
   Pages de contenu (Conformité, DSI)
   ========================================================================== */
:root{--text-muted:var(--discret);--text-light:var(--discret);--bg-soft:var(--doux);--border:var(--trait-fort)}
.container{max-width:1440px;margin:0 auto;padding:0 var(--gouttiere)}
.container-narrow{max-width:900px;margin:0 auto;padding:0 var(--gouttiere)}
.balance{text-wrap:balance}
.section-head{display:flex;flex-direction:column;gap:18px;max-width:56em;margin-bottom:48px}
.section-head .lead{max-width:62ch}
h1.display{font-size:clamp(36px,4.8vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
h2.display{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.page-heros{padding:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px);border-bottom:1px solid var(--trait)}
.page-heros .container{display:flex;flex-direction:column;gap:22px}
.page-heros .lead{max-width:62ch;font-size:clamp(17px,1.5vw,19px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn-ghost,.btn-ghost-dark{background:#fff;color:var(--encre);border:1px solid #c3ccd8}
.btn-ghost:hover,.btn-ghost-dark:hover{border-color:var(--accent);color:var(--accent)}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.g-2-1{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:center}
.grid.g-2-1 .lead + .lead{margin-top:16px}
.grid.g-2-1 .eyebrow{display:block;margin-bottom:16px}
.grid.g-2-1 h2.display{margin-bottom:20px}
.card{background:#fff;border:1px solid var(--trait-fort);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:20px;font-weight:800;letter-spacing:-.015em}
.card p{font-size:15px;line-height:1.65;color:var(--texte)}
.card strong{color:var(--encre)}
/* pictogrammes des anciennes cartes : masqués, l'identité actuelle n'en utilise pas */
.card .ico{display:none}
.card .note,.src .note{margin-top:10px;background:var(--doux);border-radius:10px;padding:14px 16px;font-size:14px;line-height:1.6;color:var(--texte)}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--doux);color:var(--texte)}
.pill.info{color:var(--accent);background:var(--accent-doux)}
.pill.ok{color:var(--ok);background:var(--ok-doux)}
.pill.warn{color:var(--alerte);background:var(--alerte-doux)}
.callout.alerte{border-color:var(--alerte-bord);background:var(--alerte-doux)}
.sec .callout{margin-top:40px}
.tbl{width:100%;border-collapse:collapse;margin-top:40px;background:#fff;border:1px solid var(--trait-fort);border-radius:14px;overflow:hidden;font-size:15px}
.tbl th{text-align:left;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--discret);background:var(--doux);padding:14px 18px;border-bottom:1px solid var(--trait-fort)}
.tbl td{padding:16px 18px;border-bottom:1px solid var(--ligne);vertical-align:top;line-height:1.6;color:var(--texte)}
.tbl tr:last-child td{border-bottom:0}
.tbl td strong{color:var(--encre)}
.tl{position:relative;margin:8px 0 0;padding-left:28px;border-left:2px solid var(--trait-fort);display:flex;flex-direction:column;gap:36px}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;left:-36px;top:5px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.tl-item.past::before{background:var(--accent)}
.tl-item .when{font-size:14px;font-weight:700;color:var(--accent);margin-bottom:6px}
.tl-item h3{font-size:20px;font-weight:800;margin-bottom:8px}
.tl-item p{font-size:16px;line-height:1.65;color:var(--texte);max-width:70ch}
.mock{background:#fff;border:1px solid var(--trait-fort);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(11,27,46,.06),0 12px 32px rgba(11,27,46,.08)}
.mock .bar{display:flex;align-items:center;gap:6px;padding:12px 18px;background:var(--doux);border-bottom:1px solid var(--trait)}
.mock .dot{width:9px;height:9px;border-radius:50%;background:#c3ccd8}
.mock .ttl{margin-left:8px;font-size:13px;font-weight:700;color:var(--texte)}
.mock .body{padding:10px 22px 20px}
.mock .row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--ligne);font-size:15px}
.mock .row:last-of-type{border-bottom:0}
.mock .k{color:var(--discret)}
.mock .v{font-weight:600;text-align:right}
.mock .v.off{color:var(--discret);font-weight:400}
.schema{margin:0;background:#fff;border:1px solid var(--trait-fort);border-radius:16px;padding:clamp(12px,2vw,28px)}
.schema svg{display:block;width:100%;height:auto}
.schema figcaption{margin-top:14px;font-size:14px;color:var(--discret);text-align:center}
.src.src-large{grid-column:1/-1}
.src > div{min-width:0;flex:1}
.src em{font-style:normal;color:var(--discret);font-size:13px}
.domaines{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px 24px}
.domaines li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 10px;align-items:baseline;font-size:14px;line-height:1.5}
.domaines .pays-c{font-size:12px;font-weight:800;color:var(--accent)}
.domaines code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:13.5px;color:var(--encre);overflow-wrap:anywhere}
.domaines .quoi{grid-column:2;color:var(--discret);font-size:13px}
.src .tag.facultatif{color:var(--discret);background:var(--doux)}
header.nav .subnav{border-top:1px solid var(--trait)}
header.nav .subnav .inner{min-height:44px;gap:28px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
header.nav .subnav a{font-size:14px;font-weight:500;color:var(--discret);text-decoration:none;white-space:nowrap;padding:10px 0;border-bottom:2px solid transparent}
header.nav .subnav a:hover{color:var(--encre)}
header.nav .subnav a.actif{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:1024px){
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.g-2-1{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .grid.g4{grid-template-columns:minmax(0,1fr)}
  .domaines{display:block}
  .domaines li{padding:6px 0}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%!important}
  .tbl thead{display:none}
  .tbl tr{border-bottom:1px solid var(--trait-fort)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{border-bottom:0;padding:4px 18px}
  .tbl td:first-child{padding-top:16px}
  .tbl td:last-child{padding-bottom:16px}
  .schema{padding:8px;overflow-x:auto}
  .schema svg{max-width:none;width:720px}
  header.nav .subnav .inner{gap:20px}
}