/* PRIMOE — gabarit des pages de contenu (pilote : /moex, 12/11/2026 ; lot 2 : huit pages). Classes « pg- ».
   Chargé après socle.css (qui déclare General Sans) sur les pages dont <html> porte data-pg ; ne dépend ni de contenu.css
   ni d'un <style> de page. Langage du héros 15c : filets de 1 px, rangées, panneau marine, aplat du parcours, grand titre à gauche.
   Texte courant : 17 px sur ordinateur, 16 px sur téléphone. Deux mouvements par page : l'entrée de l'ouverture et l'avancée du déroulé.
   Sans JavaScript et en mouvement réduit : tout est visible et à sa place. */

html[data-pg]{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
html[data-pg] body{margin:0;background:#fbfbfa;color:#0F2438;font:400 1.0625rem/1.6 "General Sans","General Sans repli",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.pg{--ink:#0F2438;--c:#CADDF2;--papier:#fbfbfa;--pierre:#efeeea;--g:clamp(20px,3.5vw,50px);--col:clamp(20px,2.4vw,40px);
  --f:rgba(15,36,56,.22);--mut:rgba(15,36,56,.8);--eo:cubic-bezier(.16,1,.3,1);--tx:1.0625rem;display:block;overflow-x:clip}
html[data-sc-p="dev"] .pg{--c:#E9D8C2}
html[data-sc-p="val"] .pg{--c:#F1D2CF}
.pg *,.pg *::before,.pg *::after{box-sizing:border-box}
.pg ::selection{background:var(--ink);color:#fff}
.pg .m ::selection,.pg-hero ::selection{background:var(--c);color:var(--ink)}
/* remise à zéro à faible priorité : chaque composant reste maître de ses marges */
.pg :where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0;padding:0}
.pg :where(ul,ol){list-style:none}
.pg :where(img){display:block;max-width:100%}
.pg :where(a){color:inherit}
.pg :focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- cadre, tons, typographie ---------- */
.pg-w{max-width:1440px;margin:0 auto;padding:0 var(--g)}
.pg-s{padding:clamp(64px,11vh,132px) 0;background:var(--papier)}
.pg-s.r{background:var(--pierre)}
.pg-s.b{background:var(--c)}
.pg-s.m{background:var(--ink);color:#fff;--f:rgba(255,255,255,.28);--mut:rgba(255,255,255,.86)}
/* Valorisation : l'argile reste un trait, jamais un grand aplat */
html[data-sc-p="val"] .pg-s.b,html[data-sc-p="val"] .pg-cta{background:var(--pierre);box-shadow:inset 0 3px 0 var(--c)}
.pg-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col)}
.pg-h2{font-size:clamp(2rem,3.9vw,3.75rem);font-weight:500;letter-spacing:-.036em;line-height:1.03;text-wrap:balance}
.pg-ld{font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.38;letter-spacing:-.012em}
.pg-tx p+p{margin-top:1.1em}
.pg-tx p{max-width:66ch;font-size:var(--tx);color:var(--mut)}
.pg-tx .pg-ld{color:inherit}
.pg-tx a,.pg-lk,.pg-hd p a,.pg-lst a,.pg-cols a,.pg-tab td a.l,.pg-step p a,.pg-lois a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color .25s ease}
.pg-tx a:hover,.pg-lk:hover,.pg-hd p a:hover,.pg-lst a:hover,.pg-cols a:hover,.pg-tab td a.l:hover,.pg-step p a:hover,.pg-lois a:hover{text-decoration-color:currentColor}
.pg-s.m .pg-tx a,.pg-s.m .pg-lk,.pg-s.m .pg-hd p a,.pg-s.m .pg-step p a,.pg-s.m .pg-lois a{color:var(--c)}
.pg-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pg-k{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pg-go{display:inline-block;font-size:1.25rem;line-height:1;transition:translate .35s var(--eo)}

.pg-btn{display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:0 24px;border-radius:2px;background:var(--c);color:var(--ink);
  font-weight:500;font-size:1.0625rem;letter-spacing:-.01em;text-decoration:none;transition:background-color .3s ease}
.pg-btn:hover{background:#fff}
.pg-btn:hover .pg-go{translate:6px 0}
.pg-btn.n{background:var(--ink);color:#fff}
.pg-btn.n:hover{background:#1b3a57}
.pg-tel{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:1.125rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:color-mix(in srgb,currentColor 50%,transparent)}
.pg-tel:hover{text-decoration-color:currentColor}

/* en-tête de section : la question à gauche, sa réponse courte à droite */
.pg-hd{align-items:end;row-gap:24px}
.pg-hd .pg-h2{grid-column:1/span 7}
.pg-hd>p{grid-column:9/-1;font-size:var(--tx);line-height:1.55;color:var(--mut)}
.pg-hd.l>.pg-h2{grid-column:1/span 6}
.pg-hd.l>p{grid-column:7/-1;font-size:clamp(1.25rem,1.75vw,1.625rem);line-height:1.34;letter-spacing:-.016em;color:inherit}

/* rappel d'action après une preuve : une ligne, un bouton, le téléphone */
.pg-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;margin-top:clamp(40px,6.5vh,76px);padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--ink)}
.pg-s.m .pg-in{border-top-color:rgba(255,255,255,.6)}
.pg-in>p{font-size:clamp(1.25rem,1.9vw,1.75rem);font-weight:500;letter-spacing:-.026em;line-height:1.12;max-width:24em;text-wrap:balance}
.pg-in>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}

/* ---------- 1. ouverture : le titre à gauche, l'image au centre, les rangées à droite ---------- */
.pg-hero{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,29fr) minmax(0,29fr);min-height:max(600px,85svh);background:var(--ink);color:#fff;--f:rgba(255,255,255,.28)}
.pg-hero-t{display:flex;flex-direction:column;padding:clamp(26px,4.4vh,48px) clamp(24px,3.2vw,60px) clamp(22px,3.4vh,36px) max(var(--g),calc((100vw - 1440px)/2 + var(--g)))}
.pg-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.pg-crumb a{display:inline-flex;align-items:center;min-height:32px;color:var(--c);text-decoration:none}
.pg-crumb a:hover{text-decoration:underline;text-underline-offset:5px}
.pg-crumb li{display:flex;align-items:center;gap:12px}
.pg-crumb li+li::before{content:"";width:22px;border-top:1px solid rgba(255,255,255,.5)}
.pg-h1{margin-top:auto!important;padding-top:28px!important;font-size:clamp(2.35rem,3.9vw,4.15rem);font-weight:500;letter-spacing:-.04em;line-height:1;text-wrap:balance}
.pg-h1 span{color:var(--c)}
.pg-h1 span.nw{white-space:nowrap}
.pg-lede{margin-top:clamp(18px,2.8vh,28px)!important;max-width:33em;font-size:1.0625rem;line-height:1.5;color:rgba(255,255,255,.94)}
.pg-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(22px,3.4vh,34px)}
.pg-sig{margin-top:clamp(22px,3.6vh,38px)!important;padding-top:14px!important;border-top:1px solid var(--f);font-size:.8125rem;color:rgba(255,255,255,.78)}
.pg-hero-im{position:relative;overflow:hidden;border-left:1px solid var(--f);background:#1a3248}
.pg-hero-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 34%)}
.pg-cap{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;padding:13px clamp(16px,1.6vw,24px) 14px;
  background:rgba(15,36,56,.66);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);border-top:1px solid var(--f);
  color:#fff;text-decoration:none;font-size:.875rem;line-height:1.35;transition:background-color .35s ease,color .35s ease}
.pg-cap b{display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.pg-cap .pg-go{grid-row:1/span 2;grid-column:2}
a.pg-cap:hover,a.pg-cap:focus-visible{background:var(--c);color:var(--ink)}
a.pg-cap:hover .pg-go{translate:6px 0}
.pg-cap:focus-visible{outline-offset:-3px}
.pg-pan{display:flex;flex-direction:column;border-left:1px solid var(--f)}
.pg-pan-h{padding:clamp(20px,3.4vh,34px) clamp(18px,2.2vw,36px) clamp(13px,2vh,20px) clamp(26px,2.8vw,44px);border-bottom:1px solid var(--f);
  font-size:.72rem;font-weight:600;letter-spacing:.18em;line-height:1.5;text-transform:uppercase;color:rgba(255,255,255,.86)}
.pg-rows{flex:1;display:grid;grid-auto-rows:1fr}
.pg-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;column-gap:18px;min-height:64px;
  padding:10px clamp(18px,2.2vw,36px) 10px clamp(26px,2.8vw,44px);border-top:1px solid var(--f);color:#fff;text-decoration:none;
  font-size:clamp(1.0625rem,1.22vw,1.1875rem);font-weight:500;letter-spacing:-.015em;line-height:1.25;transition:background-color .35s ease,color .35s ease}
li:first-child>.pg-row{border-top:0}
.pg-rows li{display:grid}
.pg-row::before{content:"";position:absolute;left:-1px;top:50%;width:6px;height:52%;translate:0 -50%;background:var(--c);transition:background-color .35s ease}
.pg-row:hover,.pg-row:focus-visible{background:var(--c);color:var(--ink);outline:0}
.pg-row:hover::before,.pg-row:focus-visible::before{background:var(--ink)}
.pg-row:hover .pg-go,.pg-row:focus-visible .pg-go{translate:0 5px}
.pg-row:focus-visible{box-shadow:inset 0 0 0 3px var(--ink)}

/* ---------- 2. notre différence : une règle, un engagement, des faits ---------- */
.pg-dif-hd .pg-h2{grid-column:1/span 8;font-size:clamp(2.1rem,4.6vw,4.5rem);line-height:1}
.pg-dif-hd>p{padding-bottom:.5em;color:inherit}
.pg-dif{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);margin-top:clamp(40px,7vh,84px);border-top:1px solid var(--ink)}
.pg-dif>*{padding:clamp(22px,3.4vh,36px) clamp(20px,2.6vw,44px) 0}
.pg-dif>*:first-child{padding-left:0}
.pg-dif>*+*{border-left:1px solid var(--f)}
.pg-dif>*:last-child{padding-right:0}
.pg-dif-a.n{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(18px,2.4vw,40px);align-items:start}
.pg-num{font-size:clamp(8rem,15.5vw,15rem);font-weight:500;letter-spacing:-.07em;line-height:.74;margin-left:-.04em}
.pg-dif h3{font-size:clamp(1.5rem,2.3vw,2.25rem);font-weight:500;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.pg-dif h3+p{margin-top:clamp(14px,2.2vh,22px);max-width:34em;font-size:var(--tx);line-height:1.55;color:var(--mut)}
.pg-facts{display:grid;align-content:start}
.pg-facts li{padding:0 0 clamp(14px,2.2vh,22px)}
.pg-facts li+li{padding-top:clamp(14px,2.2vh,22px);border-top:1px solid var(--f)}
.pg-facts b{display:block;font-size:clamp(1.5rem,2.3vw,2.25rem);font-weight:500;letter-spacing:-.03em;line-height:1.06}
.pg-facts li>span,.pg-facts a>span{display:block;margin-top:6px;font-size:1rem;line-height:1.4;color:var(--mut)}
.pg-facts a{display:block;text-decoration:none}
.pg-facts a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* ---------- 3. la définition : la question et les mots de la page restent en place, la réponse défile ---------- */
.pg-def>.pg-def-l{grid-column:1/span 5;align-self:start;position:sticky;top:96px}
.pg-def>.pg-tx{grid-column:7/-1}
.pg-def .pg-ld{font-size:clamp(1.35rem,2.05vw,1.9rem);line-height:1.3;letter-spacing:-.02em;max-width:none}
.pg-def .pg-ld+p{margin-top:clamp(24px,4vh,40px);padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--f)}
.pg-rep{margin-top:clamp(30px,5.4vh,60px);max-width:30em}
.pg-rep-h{padding-bottom:12px;border-bottom:1px solid var(--ink)}
.pg-rep dl>div,.pg-rep li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:18px;padding:13px 0;border-bottom:1px solid var(--f);font-size:1rem;line-height:1.42}
.pg-rep li{display:block}
.pg-rep dt{font-weight:500;letter-spacing:-.01em}
.pg-rep dd,.pg-rep li{color:var(--mut)}

/* ---------- 4. le déroulé : des rangées numérotées, du premier acte au dernier ---------- */
.pg-der{position:relative;margin-top:clamp(40px,7vh,84px)}
.pg-ph{display:flex;align-items:center;gap:16px;padding:clamp(26px,4vh,40px) 0 14px;color:var(--c)}
.pg-ph:first-child{padding-top:0}
.pg-ph::after{content:"";flex:1;border-top:1px solid var(--f)}
.pg-step{position:relative;display:grid;grid-template-columns:clamp(56px,6.5vw,104px) minmax(0,30fr) minmax(0,44fr) minmax(0,26fr);column-gap:var(--col);align-items:start;
  padding:clamp(20px,3.2vh,30px) 0;border-top:1px solid var(--f);scroll-margin-top:84px}
.pg-steps>li:first-child{border-top:0}
.pg-der>.pg-steps:first-child>li:first-child{border-top:1px solid var(--f)}
.pg-step-n{font-size:clamp(2.2rem,3.4vw,3.25rem);font-weight:500;letter-spacing:-.04em;line-height:.9;color:var(--c);font-variant-numeric:tabular-nums}
.pg-step h3{font-size:clamp(1.25rem,1.75vw,1.625rem);font-weight:500;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
.pg-step>p{font-size:var(--tx);line-height:1.55;color:var(--mut)}
.pg-step.w>p{grid-column:3/-1;max-width:62ch}
.pg-step .pg-step-r{padding-left:clamp(14px,1.4vw,22px);border-left:1px solid var(--f);font-size:1rem;line-height:1.45;color:inherit}
.pg-step-r b{display:block;margin-bottom:5px;font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.pg-step:target h3{color:var(--c)}
.pg-lois{margin-top:clamp(48px,8vh,96px)}
.pg-lois>h3{grid-column:1/-1;padding-bottom:clamp(18px,3vh,28px);font-size:clamp(1.5rem,2.3vw,2.25rem);font-weight:500;letter-spacing:-.03em;line-height:1.06}
.pg-lois>p{grid-column:span 4;max-width:none;padding-top:18px;border-top:1px solid var(--f);font-size:var(--tx);line-height:1.58;color:var(--mut)}
.pg-lois.n2>p{grid-column:span 6;font-size:var(--tx)}
.pg-lois.n1>p{grid-column:1/span 8;font-size:var(--tx)}

/* ---------- 5. le tableau ---------- */
.pg-tab{width:100%;margin-top:clamp(36px,6vh,68px);border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums}
.pg-tab caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pg-tab th,.pg-tab td{padding:clamp(16px,2.4vh,22px) var(--col) clamp(16px,2.4vh,22px) 0;vertical-align:top;border-top:1px solid var(--f)}
.pg-tab thead th{padding-top:0;padding-bottom:12px;border-top:0;border-bottom:1px solid var(--ink);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pg-tab tbody tr:first-child>*{border-top:0}
.pg-tab tbody th{width:32%;font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.pg-tab td{font-size:var(--tx);line-height:1.5;color:var(--mut)}
.pg-tab td:last-child{padding-right:0}
.pg-tab td.e{width:22%;white-space:nowrap}
.pg-tab td a.e{display:inline-flex;align-items:baseline;gap:10px;color:var(--ink);font-weight:500;text-decoration:none}
.pg-tab td a.e i{font-style:normal;display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--ink);border-radius:50%;font-size:.8125rem;line-height:1;transition:background-color .25s ease,color .25s ease}
.pg-tab td a.e:hover i{background:var(--ink);color:#fff}
.pg-tab td a.e:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pg-tab td a.l{color:var(--ink)}
.pg-ft{margin-top:clamp(28px,4.6vh,48px);padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--ink)}
.pg-ft.c2{columns:2;column-gap:var(--col)}
.pg-ft.c2 p{break-inside:avoid}
.pg-ft p{max-width:70ch}
.pg-ft.s{border-top:0;padding-top:0}
.pg-av{margin-top:clamp(24px,4vh,40px)}
.pg-av+.pg-tab{margin-top:clamp(24px,4vh,40px)}
.pg-lst-k,.pg-cols-k{margin-top:clamp(28px,4.6vh,48px);font-weight:500}
.pg-lst-k+.pg-lst,.pg-cols-k+.pg-cols{margin-top:14px}

/* ---------- 5 bis. la liste à filets : un nom à gauche, son contenu à droite ---------- */
.pg-lst{margin-top:clamp(36px,6vh,68px);border-top:1px solid var(--ink)}
.pg-lst>li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--col);row-gap:8px;padding:clamp(18px,2.8vh,26px) 0;border-bottom:1px solid var(--f)}
.pg-lst.o{counter-reset:pgl}
.pg-lst.o>li{grid-template-columns:clamp(56px,6.5vw,104px) minmax(0,4fr) minmax(0,7fr);counter-increment:pgl}
.pg-lst.o>li::before{content:counter(pgl);font-size:clamp(2.2rem,3.4vw,3.25rem);font-weight:500;letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
.pg-lst>li{scroll-margin-top:96px}
.pg-lst>li:target h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.pg-lst h3{font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.pg-lst p{max-width:66ch;font-size:var(--tx);line-height:1.55;color:var(--mut)}

/* ---------- 6. la preuve : des opérations réelles ---------- */
.pg-ops{align-items:start;row-gap:32px}
.pg-ops-im{grid-column:1/span 7;position:sticky;top:96px}
.pg-ops-im img{width:100%;height:auto}
.pg-ops-im figcaption{margin-top:12px;font-size:.875rem;color:var(--mut)}
.pg-ops-t{grid-column:8/-1}
.pg-ops.p .pg-ops-im{grid-column:1/span 5}
.pg-ops.p .pg-ops-t{grid-column:7/-1}
.pg-ops-t .pg-h2{font-size:clamp(1.9rem,3.1vw,3rem)}
.pg-op{margin-top:clamp(26px,4.4vh,44px);padding-top:clamp(18px,2.8vh,26px);border-top:1px solid var(--ink)}
.pg-op h3{font-size:clamp(1.375rem,2vw,1.875rem);font-weight:500;letter-spacing:-.028em;line-height:1.08}
.pg-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;margin-top:14px!important;font-size:1rem;line-height:1.45}
.pg-dl dt{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding-top:.36em}
.pg-op p{margin-top:14px;font-size:var(--tx);line-height:1.55;color:var(--mut)}
.pg-more{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:clamp(24px,4vh,40px);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.pg-more:hover .pg-go{translate:6px 0}
.pg-ops-t .pg-in{margin-top:clamp(28px,4.6vh,48px)}
.pg-ops-t .pg-in>p{font-size:clamp(1.25rem,1.6vw,1.5rem)}

/* ---------- 7. les situations : des colonnes séparées par des filets, puis le rappel d'action ---------- */
.pg-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin-top:clamp(40px,7vh,84px);border-top:1px solid var(--ink)}
.pg-cols>li{padding:clamp(22px,3.4vh,36px) clamp(18px,2.2vw,36px) clamp(6px,1vh,12px);scroll-margin-top:96px}
.pg-cols>li:first-child{padding-left:0}
.pg-cols>li:last-child{padding-right:0}
.pg-cols>li+li{border-left:1px solid var(--f)}
.pg-cols h3{font-size:clamp(1.3rem,1.9vw,1.75rem);font-weight:500;letter-spacing:-.028em;line-height:1.1;text-wrap:balance}
.pg-cols p{margin-top:clamp(12px,2vh,18px);font-size:var(--tx);line-height:1.55;color:var(--mut)}
.pg-cols p.d{padding-top:12px;border-top:1px solid var(--f);color:inherit;font-weight:500}
.pg-cols p.d b{display:block;margin-bottom:3px;font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.pg-cols li:target h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.pg-cols+.pg-tx{margin-top:clamp(28px,4.6vh,48px)}
.pg-cta{background:var(--c)}
.pg-cta .pg-w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-top:clamp(30px,5vh,52px);padding-bottom:clamp(30px,5vh,52px)}
.pg-cta p{font-size:clamp(1.5rem,2.6vw,2.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.06;max-width:20em;text-wrap:balance}
.pg-cta div{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}

/* ---------- 8. questions : des rangées qui s'ouvrent ---------- */
.pg-faq>.pg-faq-t{grid-column:1/span 4;align-self:start;position:sticky;top:96px}
.pg-faq-t p{margin-top:clamp(18px,3vh,28px);max-width:26em;font-size:var(--tx);line-height:1.55;color:var(--mut)}
.pg-faq-t .pg-act{margin-top:clamp(20px,3vh,28px)}
.pg-s.m .pg-faq-t a.pg-btn{color:var(--ink);text-decoration:none}
.pg-faq-l{grid-column:6/-1;border-bottom:1px solid var(--f)}
.pg-q{border-top:1px solid var(--f)}
.pg-q summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;column-gap:24px;min-height:76px;padding:18px 4px 18px clamp(18px,1.8vw,28px);cursor:pointer;list-style:none;
  transition:background-color .35s ease,color .35s ease}
.pg-q summary::-webkit-details-marker{display:none}
.pg-q summary::before{content:"";position:absolute;left:0;top:50%;width:6px;height:46%;translate:0 -50%;background:var(--c);transition:background-color .35s ease}
.pg-q h3{font-size:clamp(1.125rem,1.55vw,1.4375rem);font-weight:500;letter-spacing:-.022em;line-height:1.2;text-wrap:balance}
.pg-q-i{position:relative;width:22px;height:22px;justify-self:end}
.pg-q-i::before,.pg-q-i::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid currentColor;transition:rotate .35s var(--eo)}
.pg-q-i::after{rotate:90deg}
.pg-q[open] .pg-q-i::after{rotate:0deg}
.pg-q summary:hover,.pg-q summary:focus-visible{background:var(--c);color:var(--ink)}
.pg-q summary:hover::before,.pg-q summary:focus-visible::before{background:var(--ink)}
.pg-q summary:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--ink)}
.pg-q-a{padding:2px clamp(40px,5vw,84px) 26px clamp(18px,1.8vw,28px)}
.pg-q-a p{max-width:62ch;font-size:var(--tx);line-height:1.6;color:rgba(255,255,255,.92)}

/* ---------- 9. guides et pages voisines : des rangées ---------- */
.pg-gd{align-items:start;row-gap:40px}
.pg-gd>.pg-h2{grid-column:1/-1;margin-bottom:clamp(28px,5vh,56px)}
.pg-gd-l{grid-column:1/span 8;border-bottom:1px solid var(--f)}
.pg-gd-row{position:relative;display:grid;grid-template-columns:clamp(96px,10vw,148px) minmax(0,1fr) 24px;align-items:center;column-gap:clamp(18px,2vw,32px);padding:12px 12px 12px 0;border-top:1px solid var(--f);text-decoration:none;
  transition:background-color .35s ease,padding-left .35s var(--eo)}
.pg-gd-row img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.pg-gd-row b{display:block;margin-bottom:4px;font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.pg-gd-row span.t{display:block;font-size:clamp(1.0625rem,1.45vw,1.3125rem);font-weight:500;letter-spacing:-.02em;line-height:1.22;text-wrap:balance}
.pg-gd-row:hover,.pg-gd-row:focus-visible{background:var(--c);padding-left:12px}
.pg-gd-row:hover .pg-go{translate:6px 0}
.pg-vois{grid-column:10/-1}
.pg-vois h3{padding-bottom:14px;border-bottom:1px solid var(--ink);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pg-vois a{display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:12px;min-height:60px;padding:10px 0;border-bottom:1px solid var(--f);text-decoration:none;font-size:1.0625rem;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.pg-vois a small{display:block;margin-top:2px;font-size:.875rem;font-weight:400;letter-spacing:0;color:var(--mut)}
.pg-vois a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.pg-vois a:hover .pg-go{translate:6px 0}

/* ---------- très grand écran : le texte garde sa largeur de lecture dans le cadre de 1 440 px ---------- */
@media (min-width:1600px){
  .pg-hero{grid-template-columns:minmax(0,46fr) minmax(0,27fr) minmax(0,27fr)}
  .pg-h1{font-size:3.75rem}
}
/* ---------- tablette ---------- */
@media (max-width:1099.98px){
  .pg-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}
  .pg-hero-t{grid-column:1/-1;padding-right:var(--g);padding-top:34px;padding-bottom:30px}
  .pg-h1{margin-top:clamp(40px,9vh,90px)!important;font-size:clamp(2.35rem,7vw,4rem)}
  .pg-hero-im{border-left:0;border-top:1px solid var(--f);min-height:560px}
  .pg-pan{border-top:1px solid var(--f)}
  .pg-hd .pg-h2,.pg-hd.l>.pg-h2{grid-column:1/-1}
  .pg-hd>p,.pg-hd.l>p{grid-column:1/span 10;padding-bottom:0}
  .pg-dif{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pg-dif-a{grid-column:1/-1;padding-right:0;padding-bottom:clamp(24px,4vh,40px)}
  .pg-dif-b{border-left:0!important;padding-left:0!important;border-top:1px solid var(--f)}
  .pg-dif-c{border-top:1px solid var(--f)}
  .pg-def>.pg-def-l,.pg-faq>.pg-faq-t{grid-column:1/-1;position:static;margin-bottom:clamp(24px,4vh,40px)}
  .pg-def>.pg-tx,.pg-faq-l{grid-column:1/-1}
  .pg-def>.pg-def-l{display:contents}
  .pg-def>.pg-def-l>.pg-h2{grid-column:1/-1;grid-row:1;margin-bottom:clamp(24px,4vh,40px)}
  .pg-def>.pg-tx{grid-row:2}
  .pg-def .pg-rep{grid-column:1/-1;grid-row:3;max-width:none;margin-top:clamp(32px,5vh,48px)}
  .pg-step{grid-template-columns:56px minmax(0,1fr) minmax(0,1.4fr)}
  .pg-step.w>p{grid-column:3}
  .pg-step .pg-step-r{grid-column:2/-1;margin-top:14px;padding:12px 0 0;border-left:0;border-top:1px solid var(--f)}
  .pg-step-r b{display:inline;margin-right:10px}
  .pg-lois>p,.pg-lois.n2>p,.pg-lois.n1>p{grid-column:1/-1}
  .pg-lois>p+p{margin-top:18px}
  .pg-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-cols>li{padding-left:0!important;padding-right:clamp(18px,2.2vw,36px)!important;padding-bottom:clamp(22px,3.4vh,36px);border-left:0!important}
  .pg-cols>li:nth-child(n+3){border-top:1px solid var(--f)}
  .pg-ft.c2{columns:1}
  .pg-ops-im,.pg-ops.p .pg-ops-im{grid-column:1/-1;position:static}
  .pg-ops.p .pg-ops-im img{max-width:520px}
  .pg-ops-t,.pg-ops.p .pg-ops-t{grid-column:1/-1}
  .pg-gd-l,.pg-vois{grid-column:1/-1}
}
/* ---------- téléphone ---------- */
@media (max-width:699.98px){
  html[data-pg] body{font-size:1rem}
  .pg{--tx:1rem}
  .pg-hero{grid-template-columns:minmax(0,1fr)}
  .pg-hero-im{min-height:0;aspect-ratio:4/5}
  .pg-lede{font-size:1rem}
  .pg-s{padding:64px 0}
  .pg-h1{margin-top:44px!important}
  .pg-h1 span.nw{white-space:normal}
  .pg-act .pg-btn,.pg-in .pg-btn{width:100%;justify-content:space-between}
  .pg-in>div{width:100%}
  .pg-hd>p,.pg-hd.l>p{grid-column:1/-1}
  .pg-dif{grid-template-columns:minmax(0,1fr)}
  .pg-dif>*{padding-left:0!important;padding-right:0!important;border-left:0!important}
  .pg-dif-a.n{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .pg-dif-b,.pg-dif-c{padding-bottom:clamp(22px,3.4vh,36px)}
  .pg-rep dl>div{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .pg-step{grid-template-columns:44px minmax(0,1fr);row-gap:10px}
  .pg-step>p,.pg-step .pg-step-r,.pg-step.w>p{grid-column:2}
  .pg-step .pg-step-r{margin-top:6px}
  .pg-step-r b{display:block}
  .pg-tab,.pg-tab tbody,.pg-tab tr,.pg-tab th,.pg-tab td{display:block;width:auto!important}
  .pg-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pg-tab tbody tr{padding:18px 0;border-top:1px solid var(--f)}
  .pg-tab tbody tr:first-child{border-top:1px solid var(--ink)}
  .pg-tab tbody th,.pg-tab td{padding:0;border:0;white-space:normal!important}
  .pg-tab td{margin-top:8px}
  .pg-tab td[data-l]::before{content:attr(data-l);display:block;margin-bottom:2px;font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
  .pg-tab td.e{margin-top:12px}
  .pg-lst>li,.pg-lst.o>li{grid-template-columns:minmax(0,1fr)}
  .pg-lst.o>li{grid-template-columns:44px minmax(0,1fr)}
  .pg-lst.o>li>p{grid-column:2}
  .pg-cols{grid-template-columns:minmax(0,1fr)}
  .pg-cols>li{padding-right:0!important}
  .pg-cols>li+li{border-top:1px solid var(--f)}
  .pg-cta .pg-btn{width:100%;justify-content:space-between}
  .pg-cta div{width:100%}
  .pg-q summary{min-height:68px;column-gap:14px}
  .pg-q-a{padding-right:8px}
  .pg-gd-row{grid-template-columns:84px minmax(0,1fr);column-gap:16px}
  .pg-gd-row .pg-go{display:none}
}

/* ---------- mouvement : deux moments par page, pas davantage ---------- */
@media (prefers-reduced-motion:no-preference){
  html[data-pg]{scroll-behavior:smooth}
  /* 1. l'ouverture : le titre et la réponse sont là tout de suite (lecture et vitesse d'affichage) ; l'image se cale, les rangées se posent */
  .pg-hero-im img{animation:pgSet 1.4s var(--eo) both}
  .pg-pan-h,.pg-rows li{animation:pgUp .8s var(--eo) both;animation-delay:calc(.12s + var(--i,0) * .07s)}
  @keyframes pgSet{from{scale:1.09}to{scale:1}}
  @keyframes pgUp{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
  /* 2. le déroulé : le trait avance avec la lecture, chaque numéro s'allume quand son étape arrive (page.js) */
  html.pg-js .pg-step-n{color:rgba(255,255,255,.3);transition:color .9s var(--eo)}
  html.pg-js .pg-step.on .pg-step-n{color:var(--c)}
  @supports (animation-timeline:view()){
    .pg-der::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;margin-left:calc(var(--g) * -.5);background:var(--c);transform-origin:top;
      animation:pgLine linear both;animation-timeline:view();animation-range:entry 30% exit 60%}
    @keyframes pgLine{from{scale:1 0}to{scale:1 1}}
  }
}
@media print{.pg-hero-im,.pg-cta,.pg-in{display:none}}