/* eco-mar.fr : feuille commune (GÖREV 2, 2026-10-02). Couleurs reprises du logo (assets/brand). Mobile d'abord. */
@font-face{font-family:"Archivo X";src:url(/assets/fonts/archivo-x.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/assets/fonts/jost-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/assets/fonts/jost-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Jost;src:url(/assets/fonts/jost-600.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
:root{
  --marine:#112147;--marine-f:#0B1733;--rouge:#B32D29;--rouge-f:#8F2622;
  --encre:#14182B;--gris:#4D5366;--ligne:#D9DBE3;--fond:#fff;--creme:#F4F2EE;--bleu-pale:#EDF0F7;--halka:#2B5BD7;
  --titre:"Archivo X","Arial Black",Arial,sans-serif;--texte:Jost,"Segoe UI",Arial,sans-serif;
  --r:12px;--r-img:16px;--petit:.9375rem;--bloc:clamp(56px,9vw,112px);--gout:16px;
  /* alias attendus par le gabarit de recrutement repris de prosar.fr */
  --bleu:var(--marine);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fond);color:var(--encre);font:400 1.0625rem/1.6 var(--texte);overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--titre);font-weight:800;line-height:1.08;letter-spacing:-.01em;margin:0;color:var(--marine)}
h1{font-size:clamp(2rem,7.4vw,3.9rem)}
h2{font-size:clamp(1.6rem,5vw,2.6rem)}
h3{font-size:1.125rem;line-height:1.25}
p{margin:0}
a{color:var(--marine);text-underline-offset:3px}
a:hover{color:var(--rouge)}
:focus-visible{outline:3px solid var(--halka);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:12px;top:-60px;background:var(--marine);color:#fff;padding:10px 16px;border-radius:8px;z-index:20}
.saut:focus{top:12px;color:#fff}
.cadre{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gout)}
@media (min-width:768px){:root{--gout:32px}}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* boutons : angles nets (2026-10-07) ; le gabarit de recrutement utilise les mêmes classes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:0;border:2px solid transparent;font:600 1.0625rem/1.2 var(--texte);text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-align:center}
.btn-p{background:var(--rouge);color:#fff}
.btn-p:hover{background:var(--rouge-f);color:#fff}
.btn-b{background:#fff;color:var(--marine)}
.btn-b:hover{background:var(--creme);color:var(--marine)}
.btn-s{background:transparent;color:var(--marine);border-color:var(--marine);min-height:44px;padding:8px 18px;font-size:1rem}
.btn-s:hover{background:var(--marine);color:#fff}
.btn[disabled]{opacity:.65;cursor:progress}
.btn.large{width:100%}
.lien{font-weight:600;color:var(--marine)}

/* en-tête */
.tete{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--ligne)}
@supports (backdrop-filter:blur(8px)){.tete{background:rgba(255,255,255,.85);backdrop-filter:blur(8px)}}
.tete .cadre{display:flex;align-items:center;gap:16px;min-height:68px}
.tete .logo{display:block;width:150px;flex:none}
.tete nav{display:none;margin-left:auto}
.tete nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.tete nav a{font-weight:500;text-decoration:none;color:var(--encre)}
.tete nav a:hover,.tete nav a[aria-current]{color:var(--rouge)}
.tete .btn{margin-left:auto;min-height:44px;padding:8px 18px;font-size:1rem}
@media (min-width:960px){.tete nav{display:block}.tete .btn{margin-left:8px}.tete .logo{width:170px}}

/* motif du logo : deux traits obliques rouge / marine */
.traits{display:inline-flex;gap:6px;height:22px;vertical-align:middle}
.traits i{display:block;width:9px;height:100%;transform:skewX(-24deg);border-radius:2px;background:var(--rouge)}
.traits i+i{background:var(--marine)}

/* héros */
.hero{position:relative;overflow:hidden;background:var(--creme);padding-block:clamp(40px,8vw,96px) clamp(48px,8vw,104px)}
.hero::after{content:"";position:absolute;right:-60px;bottom:-40px;width:260px;height:260px;background:linear-gradient(90deg,var(--rouge) 0 40%,transparent 40% 60%,var(--marine) 60%);transform:skewX(-24deg);opacity:.07;pointer-events:none}
.hero .cadre{position:relative;z-index:1;display:grid;gap:28px}
.etiquette{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rouge)}
.hero h1{max-width:16ch}
.hero .lead{max-width:56ch;font-size:clamp(1.0625rem,2.4vw,1.25rem);color:var(--encre)}
.points{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.points li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--ligne);font-weight:500;font-size:.9375rem}
.points .ico{width:18px;height:18px;color:var(--rouge)}
.actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.hero-logo{display:none}
@media (min-width:900px){.hero .cadre{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}.hero-logo{display:block;padding:32px;background:#fff;border-radius:var(--r-img);box-shadow:0 18px 50px rgba(17,33,71,.12)}}

/* sections */
.sec{padding-block:var(--bloc)}
.sec-tete{display:grid;gap:12px;max-width:62ch;margin-bottom:clamp(28px,4vw,48px)}
.sec-tete p{color:var(--gris);font-size:1.125rem}
.creme{background:var(--creme)}
.marine{background:var(--marine);color:#fff}
.marine h2,.marine h3{color:#fff}

/* pour qui : grille d'icônes */
.metiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.metiers li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px;border:1px solid var(--ligne);border-radius:var(--r);background:#fff;font-weight:600;line-height:1.25}
.metiers .ico{width:34px;height:34px;color:var(--rouge);stroke-width:1.6}
@media (min-width:640px){.metiers{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){.metiers{grid-template-columns:repeat(7,minmax(0,1fr))}.metiers li{align-items:center;text-align:center}}

/* rayons */
.rayons{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.rayons li{display:grid;grid-template-columns:52px 1fr;gap:4px 16px;align-items:start;padding:20px;border-radius:var(--r-img);background:#fff;border:1px solid var(--ligne)}
.rayons .pastille{grid-row:1/3;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--bleu-pale);color:var(--marine)}
.rayons .pastille .ico{width:28px;height:28px}
.rayons p{color:var(--gris);font-size:var(--petit)}
@media (min-width:700px){.rayons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rayons{grid-template-columns:repeat(4,minmax(0,1fr))}.rayons li{grid-template-columns:1fr}.rayons .pastille{grid-row:auto;margin-bottom:8px}}

/* carte ECO PRO+ (bloc accueil, ancre #inscription) */
.procart .cadre{display:grid;gap:32px}
.procart .lead{margin-top:16px;max-width:52ch;font-size:1.125rem;color:#DDE2EE}
/* la carte en 3D (assets/carte3d.js, attributs data-carte3d ; reprise de la carte Faz 3 sans bouton ni nom vivant, 2026-10-07) :
   même place et même largeur maximale que l'ancienne carte statique ; tailles en cqw, tout suit la largeur de la carte.
   Sans JS : recto fixe, aucune animation. .c3d-on (posé par le script) : bouton (curseur, anneau de focus), lévitation, reflet, faisceau. */
.c3d{width:100%;max-width:380px}
.c3d-scene{perspective:1100px;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.c3d-on .c3d-scene{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}   /* glisser ne sélectionne pas le texte de la page */
.c3d-scene img{pointer-events:none;-webkit-user-drag:none}   /* pas de glisser-déposer natif du logo (il interromprait le geste) */
.c3d-scene:focus-visible{outline:none}
.c3d-scene:focus-visible .c3d-face{outline:3px solid var(--halka);outline-offset:5px}
.marine .c3d-scene:focus-visible .c3d-face{outline-color:#fff}
.c3d-flot,.c3d-objet{transform-style:preserve-3d}
.c3d-objet{position:relative;aspect-ratio:1.586;container-type:inline-size}
.c3d-face{position:absolute;inset:0;overflow:hidden;border-radius:18px;border-radius:4.4cqw;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 24px 48px rgba(4,9,26,.42)}
.c3d-avant{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:30px 25px 28px;padding:8cqw 6.5cqw 7.5cqw;background:#fff;color:var(--marine)}   /* recto : logo, ECO PRO+, code-barres à intervalles égaux */
.c3d-dos{background:var(--creme);transform:rotateY(180deg)}
.c3d-art{position:absolute;top:-12%;bottom:-12%;right:-1%;display:flex;gap:2.6cqw}
.c3d-art i{display:block;width:11cqw;background:var(--rouge);transform:skewX(-24deg)}
.c3d-art i+i{background:var(--marine)}
.c3d-logo{position:relative;width:50cqw;height:auto}
.c3d-type{position:relative;font:800 30px/1 var(--titre);font-size:7.6cqw;color:var(--rouge);white-space:nowrap}
.c3d-code{position:relative;display:flex;gap:.65cqw;height:11cqw;overflow:hidden}
.c3d-code i{display:block;background:var(--marine)}
.c3d-laser{position:absolute;inset:0;opacity:0;transform:translateX(-105%)}
.c3d-laser::before{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:#FF3B30;box-shadow:0 0 6px 2px rgba(255,59,48,.65)}
.c3d-code::after{content:"";position:absolute;inset:0;background:rgba(255,59,48,.42);opacity:0}
.c3d-reflet{position:absolute;inset:-45%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.6),rgba(255,255,255,0) 36%);mix-blend-mode:soft-light;opacity:.55}
.c3d-piste{position:absolute;left:0;right:0;top:9%;height:18%;background:var(--encre)}
.c3d-dos-t{position:absolute;left:6.5cqw;top:35%;font:800 18px/1.1 var(--titre);font-size:4.4cqw;color:var(--marine)}
.c3d-dos ul{position:absolute;left:6.5cqw;right:6.5cqw;top:49%;display:grid;gap:1.5cqw;margin:0;padding:0;list-style:none;font:500 14px/1.25 var(--texte);font-size:3.4cqw;color:var(--encre)}
.c3d-dos li{display:flex;gap:2cqw;align-items:baseline}
.c3d-dos li::before{content:"";flex:none;width:1.4cqw;height:2.6cqw;background:var(--rouge);transform:skewX(-24deg)}
.c3d-logo-d{position:absolute;right:6cqw;bottom:5cqw;width:22cqw;height:auto}
@media (prefers-reduced-motion:no-preference){
  .c3d-on .c3d-flot{animation:c3d-flotter 7s ease-in-out infinite}
  .c3d-on .c3d-reflet{animation:c3d-reflet 7s ease-in-out infinite}
  .c3d-on .c3d-laser{animation:c3d-scan 5.5s ease-in-out 1.2s infinite}
  .c3d-on .c3d-code::after{animation:c3d-flash 5.5s ease-out 1.2s infinite}
  .c3d-actif .c3d-flot,.c3d-hors .c3d-flot,.c3d-hors .c3d-laser,.c3d-hors .c3d-code::after,.c3d-hors .c3d-reflet{animation-play-state:paused}
  .c3d-on.c3d-actif .c3d-reflet{animation:none;opacity:1;transition:opacity .25s}
}
@keyframes c3d-flotter{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-10px) rotate(.8deg)}}
@keyframes c3d-reflet{0%,100%{transform:translate(-22%,-14%)}50%{transform:translate(22%,14%)}}
@keyframes c3d-scan{0%{opacity:1;transform:translateX(-105%)}16%{opacity:1;transform:translateX(2%)}19%,100%{opacity:0;transform:translateX(2%)}}
@keyframes c3d-flash{0%,14%{opacity:0}17%{opacity:1}30%,100%{opacity:0}}
.colonnes{display:grid;gap:16px}
.bloc-pc{padding:22px;border-radius:var(--r-img);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.bloc-pc h3{font-size:1.0625rem;margin-bottom:12px}
.bloc-pc ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bloc-pc li{display:grid;grid-template-columns:22px 1fr;gap:10px;line-height:1.45}
.bloc-pc .ico{width:22px;height:22px;color:#FF8A84;margin-top:1px}
@media (min-width:768px){.colonnes{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.procart .cadre{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}.procart .droite{order:2}}

/* bientôt */
.bientot-l{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.bientot-l li{display:grid;grid-template-columns:48px 1fr;gap:4px 16px;padding:20px;border:1px dashed #B9BDCB;border-radius:var(--r-img);background:#fff}
.bientot-l .ico{grid-row:1/3;width:40px;height:40px;color:var(--marine)}
.bientot-l p{color:var(--gris)}
.note{margin-top:18px;color:var(--gris);font-size:var(--petit)}
@media (min-width:700px){.bientot-l{grid-template-columns:1fr 1fr}}
.depot-sec{padding-top:0}
.lieu{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;padding:clamp(22px,4vw,36px);background:var(--creme);border-left:4px solid var(--rouge);border-radius:var(--r-img)}
.lieu .pastille{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--marine)}
.lieu .pastille .ico{width:28px;height:28px}
.lieu h2{font-size:clamp(1.375rem,3vw,1.75rem)}
.lieu address{margin-top:10px;font-style:normal;font-size:1.125rem;font-weight:600;color:var(--marine)}
.lieu p{margin-top:6px;color:var(--gris)}
.lieu .lien{display:inline-block;margin-top:14px}
.lieu .lien .ico{display:inline-block;width:18px;height:18px;margin-left:4px;vertical-align:-3px}
@media (min-width:560px){.lieu{grid-template-columns:52px 1fr}}

/* formulaires (communs inscription + recrutement) */
.carte{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:clamp(20px,4vw,40px);border-radius:var(--r-img);background:#fff;border:1px solid var(--ligne);box-shadow:0 10px 30px rgba(17,33,71,.06)}
@media (min-width:900px){.carte{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}}
.carte .lead{margin-top:12px;color:var(--gris)}
.champs{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.deux{display:grid;gap:14px}
@media (min-width:640px){.deux{grid-template-columns:1fr 1fr}}
label{display:block;font-weight:600;font-size:var(--petit);margin-bottom:6px}
label.btn{display:inline-flex;margin:0;font:600 1rem/1.2 var(--texte)}   /* bouton-étiquette (dépôt du CV) : la règle label ci-dessus ne doit pas le casser */
/* paires de champs : étiquettes sur une même ligne de grille (une étiquette sur deux lignes ne décale plus le champ voisin) */
@media (min-width:640px){@supports (grid-template-rows:subgrid){.deux{row-gap:0;margin-bottom:-14px}.deux>div{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;margin-bottom:14px}.deux>div>label{align-self:end}}}
.fac{font-weight:400;color:var(--gris)}
input,select,textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid #9EA3B4;border-radius:10px;background:#fff;color:var(--encre);font:400 1rem/1.4 var(--texte)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23112147' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:42px}
textarea{min-height:120px;resize:vertical}
/* date : iOS Safari rend un champ vide plus bas et centré ; même hauteur et alignement que les autres champs */
input[type=date]{-webkit-appearance:none;appearance:none;display:block;line-height:1.4}
input[type=date]::-webkit-date-and-time-value{margin:0;text-align:left;min-height:1.4em}
input:focus,select:focus,textarea:focus{outline:3px solid var(--halka);outline-offset:1px;border-color:var(--marine)}
[aria-invalid=true]{border-color:var(--rouge)}
.err{color:#A3231F;font-size:var(--petit);font-weight:500;min-height:0;margin-top:4px}
.err:empty{display:none}
.aide{color:var(--gris);font-size:var(--petit);margin-top:4px}
.coche{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-weight:400;font-size:var(--petit);line-height:1.45;cursor:pointer}
.coche input{width:22px;height:22px;min-height:0;margin:1px 0 0;padding:0;accent-color:var(--rouge)}
.rgpd{color:var(--gris);font-size:.875rem;line-height:1.5}
.etat{font-weight:600;color:#A3231F}
.etat:empty{display:none}
.merci{padding:24px;border-radius:var(--r);background:var(--bleu-pale);display:grid;gap:8px}
.merci:focus{outline:none}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* choix en cartes (type de demande, société) */
.choix{border:0;padding:0;margin:0;min-width:0}
.choix legend{display:block;font-size:var(--petit);font-weight:600;margin:0 0 8px;padding:0}
.choix-l{display:grid;gap:10px}
@media (min-width:640px){.choix-l{grid-template-columns:1fr 1fr}}
.opt{display:grid;grid-template-columns:24px 1fr;gap:2px 12px;align-items:start;margin:0;padding:14px 16px;border:2px solid #C3C6D1;border-radius:var(--r);background:#fff;cursor:pointer;font-size:1rem;font-weight:400;line-height:1.35}
.opt input{grid-row:1/3;width:22px;height:22px;min-height:0;margin:1px 0 0;padding:0;accent-color:var(--rouge)}
.opt .opt-n{font-weight:700;color:var(--encre)}
.opt .opt-d{color:var(--gris);font-size:var(--petit)}
.opt:has(input:checked){border-color:var(--marine);background:var(--bleu-pale)}
.opt:has(input:focus-visible){outline:3px solid var(--halka);outline-offset:2px}

/* bloc carte de l'accueil : lien secondaire sur fond marine */
.lien-b{color:#fff}
.lien-b:hover{color:#FF8A84}

/* pages formulaire (demande de carte, contact) */
.cadre.etroit{max-width:880px}
.page-tete{padding-block:clamp(36px,6vw,72px) clamp(28px,4vw,48px)}
.page-tete .cadre{display:grid;gap:16px}
.page-tete h1{font-size:clamp(1.9rem,6vw,3rem)}
.page-tete .lead{color:var(--encre);font-size:1.125rem;max-width:62ch}
.avant{margin-top:8px;padding:20px;border-radius:var(--r-img);background:#fff;border:1px solid var(--ligne);display:grid;gap:12px}
.avant h2{font-size:1.125rem}
.avant ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.avant li{display:grid;grid-template-columns:22px 1fr;gap:10px;line-height:1.45;font-size:var(--petit)}
.avant .ico{width:20px;height:20px;color:var(--rouge);margin-top:1px}
.form-sec{padding-top:clamp(28px,4vw,48px)}
.carte-une{grid-template-columns:minmax(0,1fr)!important}
.form-long .champs{gap:22px}
.groupe{border:0;border-top:1px solid var(--ligne);margin:0;padding:22px 0 0;min-width:0;display:grid;gap:14px}
.groupe legend{float:left;width:100%;padding:0;margin:0 0 14px;font:800 1.25rem/1.2 var(--titre);color:var(--marine)}
.groupe legend+*{clear:both}
@media (min-width:640px){.choix-l.trois{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:640px){.deux.cp{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
.groupe .coche{margin:0}
.formats{margin:-4px 0 0}
.piece{padding:16px;border:1.5px dashed #B9BDCB;border-radius:var(--r);background:var(--creme)}
.piece label{margin-bottom:8px}
.piece:has([aria-invalid=true]){border-color:var(--rouge)}
.fichier-l{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0}
.fichier-l .sr-f{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fichier-l .btn{display:inline-flex;margin:0;min-height:44px;padding:8px 18px;font:600 .9375rem/1.2 var(--texte);background:#fff}
.fichier-l .btn:hover{background:var(--marine);color:#fff}
.fichier-l:has(.sr-f:focus-visible) .btn{outline:3px solid var(--halka);outline-offset:3px}
.fichier-l .nom-f{min-width:0;flex:1 1 160px;font-size:var(--petit);color:var(--gris);overflow-wrap:anywhere}
.fichier-l .nom-f.ok{color:var(--encre);font-weight:600}
.note-envoi{text-align:center;margin-top:-6px}
.note-carte{padding:14px 16px;border-left:4px solid var(--marine);border-radius:var(--r);background:var(--bleu-pale);font-size:var(--petit);line-height:1.5}
.note-carte .lien{display:inline-block;margin-top:4px}
.compteur{float:right;font-variant-numeric:tabular-nums}
.contact-sec{padding-top:clamp(36px,6vw,72px)}
.contact-g{display:grid;gap:16px;align-content:start}
.contact-g h1{font-size:clamp(1.9rem,6vw,2.8rem)}
.bloc-c{padding-top:16px;border-top:1px solid var(--ligne);display:grid;gap:6px}
.bloc-c h2{font-size:1.0625rem}
.bloc-c p{color:var(--gris);font-size:var(--petit)}
.bloc-c a{font-weight:600}

/* recrutement : bandeau d'appel */
.recrut .cadre{display:grid;gap:20px;align-items:center}
.recrut p{color:#DDE2EE;max-width:58ch;margin-top:10px}
@media (min-width:860px){.recrut .cadre{grid-template-columns:1fr auto}}

/* pied */
.pied{background:var(--marine-f);color:#C9CFDF;padding-block:48px 32px;font-size:var(--petit)}
.pied .cadre{display:grid;gap:24px}
.pied .logo-b{width:170px;height:auto;padding:12px 14px;background:#fff;border-radius:10px}   /* height:auto : sinon height=42 (attribut) moins le padding écrase le logo à ~73 px de large */
.pied a{color:#fff}
.pied .lien-cookies{background:none;border:0;padding:0;margin:0;font:inherit;color:#fff;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.pied .infos{display:grid;gap:8px}
.pied .infos li{display:flex;gap:10px;align-items:flex-start}
.pied .reseaux{display:flex;gap:12px}
.pied .reseaux a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1)}
.pied .reseaux svg{width:22px;height:22px;fill:currentColor}
.pied .bas{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;color:#AEB6CB}
@media (min-width:860px){.pied .cadre{grid-template-columns:1fr auto;align-items:start}.pied .bas{grid-column:1/-1}}

/* pages légales */
.legal{padding-block:clamp(40px,6vw,72px) var(--bloc)}
.legal .cadre{max-width:820px}
.legal h1{font-size:clamp(1.9rem,6vw,2.8rem)}
.legal .intro{margin-top:16px;font-size:1.125rem;color:var(--gris)}
.legal h2{font-size:1.3rem;margin-top:40px;margin-bottom:12px}
.legal p,.legal ul{margin:0 0 12px}
.legal dl{display:grid;gap:0;margin:0;border-top:1px solid var(--ligne)}
.legal dl>div{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--ligne)}
.legal dt{font-weight:600}
.legal dd{margin:0;color:var(--encre);overflow-wrap:anywhere}
@media (min-width:640px){.legal dl>div{grid-template-columns:240px 1fr;gap:16px}}

/* Faz 2 : SSS (accueil, demande de carte) ; <details>/<summary> natifs, sans JS */
.faq{display:grid;gap:12px;max-width:880px}
.faq details{border:1px solid var(--ligne);border-radius:var(--r-img);background:#fff}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;list-style:none;font-weight:600;font-size:1.0625rem;line-height:1.35;color:var(--marine)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2.5px solid var(--rouge);border-bottom:2.5px solid var(--rouge);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.faq summary:focus-visible{outline:3px solid var(--halka);outline-offset:2px;border-radius:var(--r-img)}
.faq .faq-r{padding:0 20px 20px;max-width:70ch;color:var(--gris)}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}