@charset "utf-8";
/* ============================================================
   POLICES HEBERGEES SUR NOTRE PROPRE SERVEUR
   Telechargees une fois depuis Google Fonts (licence libre,
   Open Font License / Apache 2.0) et servies depuis ce site :
   aucune donnee du visiteur n'est transmise a un tiers.
   ============================================================ */

@font-face{
  font-family:'Gabarito';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('polices/gabarito-normal-400a900-latin-ext.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:'Gabarito';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('polices/gabarito-normal-400a900-latin.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:'Source Sans 3';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('polices/source-sans-3-normal-300a700-latin-ext.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:'Source Sans 3';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('polices/source-sans-3-normal-300a700-latin.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;
}

/* Vollekindt Recrutement - feuille de style commune a tout le site.
   Genere depuis la maquette. Modifier ici change toutes les pages. */

/* ---------- tokens ---------- */
:root{
  --paper:#F1F3F7;
  --surface:#FFFFFF;
  --surface-2:#F7F9FC;
  --ink:#141A2E;
  --ink-2:#45506B;
  --ink-3:#5C6784;
  --line:#D6DCE9;
  --line-2:#E5EAF2;
  --accent:#7C6948;      /* dore : couleur d action, releve sur la maquette validee */
  --accent-ink:#69583A;
  --accent-wash:#EFE9DC;
  --leaf:#7C6948;
  --leaf-wash:#EFE9DC;
  --shadow:0 1px 2px rgba(20,26,46,.05), 0 12px 28px -18px rgba(20,26,46,.35);
  --marine:#24397E;      /* bleu officiel du logo Vollekindt */
  --profond:#12203F;     /* aplat sombre du hero et des bandeaux */
  --profond-2:#1C2A5C;
  --or-clair:#C9B283;    /* dore eclairci, lisible sur fond sombre */
  --sur-profond:#B7C2DE;
  --alerte:#A32B26;
  --succes:#2E6B4F;
  --btn-bg:#7C6948;
  --btn-fg:#FFFFFF;

  --f-display:"Gabarito", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  --pad:clamp(1.25rem, 4vw, 3.5rem);
  --gap:clamp(2.5rem, 5vw, 4.5rem);
  --maxw:1200px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A0F1C;
    --surface:#16203A;
    --surface-2:#1C2A4A;
    --ink:#E7EBF5;
    --ink-2:#AEB9D6;
    --ink-3:#8290B4;
    --line:#4A5C88;
    --line-2:#1E2B49;
    --accent:#C9B283;
    --accent-ink:#DCC79C;
    --accent-wash:#241E12;
    --leaf:#C9B283;
    --leaf-wash:#241E12;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -20px rgba(0,0,0,.9);
    --marine:#8FA3DC;
    --profond:#24397E;
    --profond-2:#2E4894;
    --or-clair:#C9B283;
    --sur-profond:#B7C2DE;
    --alerte:#F0918C;
    --succes:#7EC49E;
    --btn-bg:#7C6948;
    --btn-fg:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --paper:#0A0F1C;
  --surface:#16203A;
  --surface-2:#1C2A4A;
  --ink:#E7EBF5;
  --ink-2:#AEB9D6;
  --ink-3:#8290B4;
  --line:#4A5C88;
  --line-2:#1E2B49;
  --accent:#C9B283;
  --accent-ink:#DCC79C;
  --accent-wash:#241E12;
  --leaf:#C9B283;
  --leaf-wash:#241E12;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -20px rgba(0,0,0,.9);
  --marine:#8FA3DC;
  --profond:#24397E;
  --profond-2:#2E4894;
  --or-clair:#C9B283;
  --sur-profond:#B7C2DE;
  --alerte:#F0918C;
  --succes:#7EC49E;
  --btn-bg:#7C6948;
  --btn-fg:#FFFFFF;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:700}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
/* Les descriptions d'offres proviennent du flux EQWA : leurs listes
   gardent puces et numeros, contrairement aux listes de mise en page
   du site, qui portent leur propre numerotation (.steps, .cand-steps). */
.texte ul{list-style:disc;margin:0 0 1rem;padding-left:1.4rem}
.texte ol{list-style:decimal;margin:0 0 1rem;padding-left:1.6rem}
.texte li{color:var(--ink-2);font-size:1rem;line-height:1.68;margin-bottom:.35rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent-wash);color:var(--ink)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.mono{
  font-family:var(--f-mono);
  font-size:.84rem;
  letter-spacing:.01em;
  text-transform:none;
  font-weight:600;
  color:var(--ink-3);
}
.num{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top-in{
  display:flex;align-items:center;gap:1.5rem;
  min-height:68px;
}
.brand{display:flex;flex-direction:column;align-items:flex-start;line-height:1;text-decoration:none;margin-right:auto;flex-shrink:0}
.brand b{
  font-family:var(--f-body);
  font-weight:700;font-size:1.12rem;
  letter-spacing:-.02em;
}
.brand b i{font-style:normal;color:var(--accent)}
.brand span{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.01em;
  text-transform:none;font-weight:600;color:var(--ink-3);margin-top:.3rem;
}
.nav{display:flex;gap:.15rem;align-items:center}
.nav a{
  text-decoration:none;font-size:.95rem;font-weight:500;color:var(--ink-2);
  padding:.45rem .7rem;border-radius:4px;
  transition:color .18s ease, background .18s ease;
}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a[aria-current="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-body);font-size:.87rem;font-weight:600;
  padding:.7rem 1.25rem;border:1px solid var(--btn-bg);
  background:var(--btn-bg);color:var(--btn-fg);
  text-decoration:none;border-radius:5px;cursor:pointer;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--surface)}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(5px)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:4px;padding:.5rem .7rem;color:var(--ink);cursor:pointer;font-family:var(--f-mono);font-weight:600;font-size:.82rem;letter-spacing:.01em}

@media (max-width:1120px){
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1rem;
  }
  .nav[hidden]{display:none}
  .nav a{padding:.75rem .2rem;border-bottom:1px solid var(--line-2)}
  .burger{display:block}
  .top .btn:not(.burger){display:none}
}

/* ---------- section frame ---------- */
section{padding-block:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--line)}
.sec-head{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.6rem;margin-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);
}
.sec-head h1,.sec-head h2{
  font-family:var(--f-display);
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  letter-spacing:-.028em;line-height:1.1;font-weight:700;margin-right:auto;
}
.sec-head h1 em,.sec-head h2 em{font-style:normal;color:var(--accent-ink)}
/* Sous-titre de section. C'est un vrai titre de niveau 2, pour que Google
   lise le sujet de la page, mais il garde l'apparence discrete du petit
   texte en caracteres a chasse fixe : rien ne change a l'ecran. */
.sec-head h2.mono{
  font-family:var(--f-mono);
  font-size:.84rem;
  letter-spacing:.01em;
  line-height:1.5;
  font-weight:600;
  color:var(--ink-3);
  margin-right:0;
}
.lede{
  font-size:clamp(1.02rem,1.5vw,1.15rem);
  color:var(--ink-2);max-width:64ch;line-height:1.62;
}

/* ---------- hero ---------- */
.hero{border-top:none;padding-top:clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem}
.eyebrow .dot{width:6px;height:6px;background:var(--leaf);border-radius:50%;flex-shrink:0}
.hero h1{
  font-family:var(--f-display);
  font-size:clamp(2.4rem,5.6vw,4.3rem);
  line-height:1.02;letter-spacing:-.03em;font-weight:700;
}
.hero h1 em{font-style:normal;color:var(--or-clair)}
.hero p.lede{margin-top:1.6rem}
.hero-cta{display:flex;gap:.75rem;margin-top:2.2rem;flex-wrap:wrap}

.fiche{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow);border-radius:3px;
}
.fiche-top{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem 1.15rem;border-bottom:1px solid var(--line);
  background:var(--surface-2);border-radius:3px 3px 0 0;
}
.fiche dl{margin:0;padding:.4rem 1.15rem 1.15rem}
.fiche .row{
  display:flex;align-items:baseline;gap:1rem;
  padding:.95rem 0;border-bottom:1px dotted var(--line);
}
.fiche .row:last-child{border-bottom:none;padding-bottom:.2rem}
.fiche dt{flex:1;font-size:.86rem;color:var(--ink-2);line-height:1.35}
.fiche dd{
  margin:0;font-family:var(--f-display);font-size:1.85rem;
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.fiche dd small{font-family:var(--f-mono);font-size:.72rem;font-weight:600;letter-spacing:.01em;color:var(--ink-3);margin-left:.3rem;text-transform:none}

@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}}

/* ---------- offres ---------- */
.offres{border-top:1px solid var(--line)}
.offre{
  display:grid;grid-template-columns:minmax(0,1fr) 225px 44px;
  align-items:center;gap:1.25rem;
  padding:1.35rem .5rem;border-bottom:1px solid var(--line-2);
  text-decoration:none;position:relative;
  transition:background .18s ease, padding-left .18s ease;
}
.offre:first-child{border-top:1px solid var(--line-2)}
.offre:hover{background:var(--surface);padding-left:1rem}
.offre h3{font-size:1.12rem;font-weight:500;letter-spacing:-.01em}
.offre .loc{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--ink-2);display:flex;align-items:center;gap:.5rem;
}
.offre .loc::before{content:"";width:14px;height:1px;background:var(--accent);flex-shrink:0}
.offre .go{
  justify-self:end;width:32px;height:32px;border:1px solid var(--line);
  border-radius:50%;display:grid;place-items:center;color:var(--ink-3);
  transition:border-color .18s ease,color .18s ease,transform .18s ease;
}
.offre:hover .go{border-color:var(--accent);color:var(--accent);transform:translateX(3px)}
.meta{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.45rem;
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.01em;
  text-transform:none;font-weight:500;color:var(--ink-3);
}
.meta span{display:inline-flex;align-items:center}
.meta span + span::before{content:"\00B7";margin-right:.55rem;color:var(--line)}
.meta .cdi{color:var(--leaf);font-weight:600}
.offre .loc{align-items:flex-start}
.offre .loc::before{margin-top:.52rem}
.loc-txt b{display:block;font-weight:400;white-space:nowrap}
.loc-txt small{
  display:block;text-transform:none;letter-spacing:.02em;
  color:var(--ink-3);margin-top:.25rem;font-size:.68rem;
}
@media (max-width:640px){
  .offre{grid-template-columns:1fr 32px;gap:.4rem 1rem}
  .offre .loc{grid-column:1}
}
.offres-foot{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.offres-foot p{font-size:.92rem;color:var(--ink-2);max-width:56ch}

/* fonctions / references */
.fonctions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:2.4rem}
.fonctions section{padding:0;border:none}
.fonc h3{
  font-family:var(--f-display);font-size:1.3rem;letter-spacing:-.015em;
  padding-bottom:.7rem;margin-bottom:1rem;border-bottom:1px solid var(--line);
}
.fonc li{
  padding:.4rem 0;font-size:.94rem;color:var(--ink-2);
  border-bottom:1px dotted var(--line-2);
}
.fonc li:last-child{border-bottom:none}
.regions{
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:2rem;align-items:start;
}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;
  padding:.4rem .7rem;border:1px solid var(--line);border-radius:2px;
  color:var(--ink-2);background:var(--surface);
}
@media (max-width:700px){.regions{grid-template-columns:1fr;gap:1.2rem}}

/* ---------- filières ---------- */
.fil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:2.5rem}
.fil-grid h3{
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.01em;
  text-transform:none;font-weight:600;color:var(--accent-ink);
  padding-bottom:.7rem;margin-bottom:1.1rem;border-bottom:1px solid var(--accent);
  display:flex;justify-content:space-between;align-items:baseline;
}
.fil-grid h3 span{color:var(--ink-3);font-weight:400}
.fil-list li{
  padding:.42rem 0;font-size:.95rem;color:var(--ink-2);
  border-bottom:1px dotted var(--line-2);
}
.fil-list li:last-child{border-bottom:none}

/* ---------- méthode ---------- */
.method{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:var(--gap);align-items:start}
.method-aside{position:sticky;top:96px}
.tenets li{
  position:relative;padding:.6rem 0 .6rem 1.4rem;font-size:.93rem;
  line-height:1.55;color:var(--ink-2);
  border-bottom:1px solid var(--line-2);
}
.tenets li:last-child{border-bottom:none}
.tenets li::before{
  content:"";position:absolute;left:0;top:1.02rem;
  width:7px;height:7px;
  border:1.5px solid var(--accent);transform:rotate(45deg);
}
.steps{counter-reset:step;border-left:1px solid var(--line);padding-left:0}
.step{position:relative;padding:0 0 2.4rem 2.6rem}
.step:last-child{padding-bottom:0}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:-.15rem;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.04em;
  background:var(--paper);color:var(--accent-ink);padding:.28rem .3rem;
}
.step h3{font-family:var(--f-display);font-size:1.42rem;letter-spacing:-.015em;margin-bottom:.5rem}
.step p{color:var(--ink-2);font-size:.98rem;max-width:62ch}
.step ul{margin-top:.75rem;display:flex;flex-direction:column;gap:.35rem}
.step ul li{
  font-size:.9rem;color:var(--ink-2);padding-left:1rem;position:relative;
}
.step ul li::before{content:"\2014";position:absolute;left:0;color:var(--accent)}
.delai{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;
  background:var(--accent-wash);color:var(--accent-ink);
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.01em;text-transform:none;font-weight:600;
  padding:.4rem .7rem;border-radius:2px;
}
@media (max-width:880px){
  .method{grid-template-columns:1fr}
  .method-aside{position:static}
}

/* ---------- garantie ---------- */
.gar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:start}
table.bareme{width:100%;border-collapse:collapse;font-size:.95rem}
table.bareme caption{
  text-align:left;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.01em;
  text-transform:none;font-weight:600;color:var(--ink-3);padding-bottom:.9rem;
}
table.bareme th{
  text-align:left;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.01em;
  text-transform:none;color:var(--ink-3);font-weight:500;
  padding:0 0 .6rem;border-bottom:1px solid var(--line);
}
table.bareme td{padding:.85rem 0;border-bottom:1px dotted var(--line);color:var(--ink-2)}
table.bareme td:first-child{color:var(--ink)}
table.bareme td:last-child{
  text-align:right;font-family:var(--f-mono);font-weight:600;
  color:var(--leaf);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.gar-note{
  margin-top:1.2rem;padding:.9rem 1.1rem;border-left:2px solid var(--leaf);
  background:var(--leaf-wash);font-size:.9rem;color:var(--ink-2);border-radius:0 2px 2px 0;
}
.results li{
  padding:1.05rem 0;border-bottom:1px solid var(--line-2);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:baseline;
}
.results li:first-child{border-top:1px solid var(--line-2)}
.results b{
  font-family:var(--f-display);font-size:1.9rem;font-weight:400;line-height:1;
  letter-spacing:-.02em;color:var(--accent-ink);font-variant-numeric:tabular-nums;
  min-width:3.6rem;
}
.results span{font-size:.93rem;color:var(--ink-2)}
@media (max-width:880px){.gar{grid-template-columns:1fr}}

/* ---------- portrait (page Le cabinet) ----------
   Bloc photo + texte. La colonne image est volontairement plus etroite
   que la colonne texte : une photo de personne n'a pas besoin d'etre grande
   pour etre lue, et le texte doit rester la matiere principale. */
.portrait-bloc{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:var(--gap);align-items:start;
}
@media (max-width:880px){.portrait-bloc{grid-template-columns:1fr}}
.portrait{margin:0;display:flex;flex-direction:column;gap:.75rem}
.portrait img{
  width:100%;height:auto;display:block;border-radius:2px;
  background:var(--surface-2);
}
.portrait figcaption{
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.01em;
  text-transform:none;font-weight:500;color:var(--ink-3);
}

/* ---------- candidats ---------- */
.cand{background:var(--surface);border-top:1px solid var(--line)}
.cand-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:0;border-top:1px solid var(--line)}
.cand-steps > li{
  padding:1.5rem 1.4rem 1.7rem 0;border-right:1px solid var(--line-2);
}
.cand-steps > li:last-child{border-right:none}
.cand-steps .k{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.01em;color:var(--accent-ink);font-weight:600}
.cand-steps h3{font-size:1.05rem;font-weight:600;margin:.55rem 0 .45rem;letter-spacing:-.01em}
.cand-steps p{font-size:.9rem;color:var(--ink-2)}
@media (max-width:760px){
  .cand-steps > li{border-right:none;border-bottom:1px solid var(--line-2);padding-right:0}
  .cand-steps > li:last-child{border-bottom:none}
}
.cand-cta{
  margin-top:2.6rem;display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;
  padding:1.6rem;border:1px solid var(--line);border-radius:3px;background:var(--paper);
}
.cand-cta p{max-width:52ch;font-size:.95rem;color:var(--ink-2)}
.cand-cta strong{color:var(--ink);font-weight:600}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:2.2rem}
.card-c{border-top:2px solid var(--ink);padding-top:1.1rem}
.card-c h3{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.01em;text-transform:none;font-weight:600;color:var(--ink-3);margin-bottom:.9rem}
.card-c p, .card-c a{font-size:.98rem;color:var(--ink-2);line-height:1.55;text-decoration:none;display:block}
.card-c a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.card-c .big{font-family:var(--f-display);font-size:1.5rem;color:var(--ink);letter-spacing:-.01em}
.card-c address{font-style:normal}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:2.4rem 3rem;color:var(--ink-3)}
.foot-in{display:flex;gap:1.5rem;justify-content:space-between;flex-wrap:wrap;align-items:center}
.foot-in a{text-decoration:none;display:inline-block;padding-block:.28rem}
.foot-in a:hover{color:var(--ink-2)}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
html{scroll-behavior:smooth;scroll-padding-top:88px}

/* ============================================================
   PAGES INTERNES : fiche d'offre, poste pourvu, fil d'Ariane
   ============================================================ */

.fil{border-bottom:1px solid var(--line);background:var(--surface-2)}
.fil .wrap{
  display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;
  padding-block:.75rem;font-family:var(--f-mono);font-size:.82rem;
  letter-spacing:.01em;text-transform:none;font-weight:500;color:var(--ink-3);
}
.fil a{text-decoration:none;color:var(--ink-3)}
.fil a:hover{color:var(--accent-ink)}
.fil span[aria-hidden]{color:var(--line)}

.offre-page{padding-top:clamp(2.5rem,5vw,4rem)}
.offre-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:var(--gap);align-items:start}
.offre-grid h1{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.02em;
}
.meta-h1{margin-top:.9rem;font-size:.7rem !important}
.offre-grid .sous{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.01em;
  text-transform:none;color:var(--accent-ink);font-weight:600;
  margin:2.6rem 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);
}
.texte{max-width:68ch}
.texte p{margin:0 0 1rem;color:var(--ink-2);font-size:1rem;line-height:1.68}
.texte p:last-child{margin-bottom:0}
.texte strong{color:var(--ink);font-weight:600}
.texte br{line-height:1.9}

.offre-grid aside{position:sticky;top:96px}
.fiche dd.fait{
  font-family:var(--f-body);font-size:.92rem;font-weight:600;
  line-height:1.35;text-align:right;max-width:58%;
}
.aside-note{
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--ink-3);line-height:1.55;
}

.postuler-bas{
  margin-top:2.8rem;padding:1.5rem;border:1px solid var(--line);
  border-radius:3px;background:var(--surface);
  display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;
}
.postuler-bas p{margin:0;font-size:.95rem;color:var(--ink-2);max-width:46ch}
.postuler-bas .btn{margin-left:auto}

.statut-pourvu{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.01em;
  text-transform:none;font-weight:600;
  color:var(--leaf);background:var(--leaf-wash);
  padding:.4rem .75rem;border-radius:2px;
}
.statut-pourvu::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--leaf)}

.ref-list li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px dotted var(--line-2);font-size:.94rem;
}
.ref-list li:last-child{border-bottom:none}
.ref-list a{text-decoration:none;color:var(--ink-2)}
.ref-list a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.ref-list span{
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.01em;
  color:var(--ink-3);white-space:nowrap;text-transform:none;font-weight:500;
}
/* Libelle a droite du titre d'une colonne (ex : "Cote candidat", "07").
   Avant, ce libelle etait pose en float:right. Le float ne reserve pas sa
   place : quand le titre remplissait la ligne, le texte du titre passait
   dessous et les deux se chevauchaient. Le titre devient donc une boite
   flexible : le libelle garde sa place a droite, et bascule proprement a la
   ligne suivante quand il n'y a plus la place. */
.fonc h3{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.15rem .9rem;
}
.fonc h3 .mono{float:none;margin-left:auto;color:var(--ink-3)}

/* Page Le cabinet, les trois colonnes "Ce que ce parcours change pour vous".
   Ici les libelles sont longs (Cote candidat, Cote entreprise, Des deux
   cotes) et se placaient differemment d'une colonne a l'autre. Ils passent
   au-dessus du titre, sur leur propre ligne : les trois colonnes sont
   presentees de la meme facon et leurs traits de separation s'alignent. */
#ce-que-ca-change .fonc h3{
  flex-direction:column-reverse;flex-wrap:nowrap;
  align-items:flex-start;gap:.4rem;
}
#ce-que-ca-change .fonc h3 .mono{
  margin-left:0;font-size:.72rem;letter-spacing:.05em;color:var(--accent-ink);
}

@media (max-width:880px){
  .offre-grid{grid-template-columns:1fr}
  .offre-grid aside{position:static}
  .fiche dd.fait{max-width:none}
  .postuler-bas .btn{margin-left:0}
}

/* ============================================================
   LOGO VOLLEKINDT
   Deux fichiers : bleu sur fond clair, blanc sur fond sombre.
   Le navigateur affiche le bon selon le theme du visiteur.
   ============================================================ */

.brand img{display:block;height:30px;width:auto}
.brand .logo-sombre{display:none}
.brand span{margin-top:.5rem}

.foot-marque{display:flex;flex-direction:column;gap:.95rem;align-items:flex-start}
.foot-marque img{display:block;height:46px;width:auto}
.foot-marque .logo-sombre{display:none}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-clair{display:none}
  :root:not([data-theme="light"]) .logo-sombre{display:block}
}
:root[data-theme="dark"] .logo-clair{display:none}
:root[data-theme="dark"] .logo-sombre{display:block}

@media (max-width:520px){
  .brand img{height:25px}
  .brand span{font-size:.52rem;letter-spacing:.14em}
  .foot-marque img{height:38px}
}

/* ============================================================
   PAGES LEGALES : mentions legales et confidentialite
   ============================================================ */

.legal{padding-top:clamp(2.5rem,5vw,4rem)}
.legal-corps{max-width:74ch}
.legal-corps .chapeau{
  font-size:clamp(1.02rem,1.5vw,1.12rem);color:var(--ink-2);
  line-height:1.62;padding-left:1.1rem;border-left:2px solid var(--accent);
  margin-bottom:2.6rem;
}
.legal-corps h3{
  font-family:var(--f-display);font-size:1.45rem;letter-spacing:-.015em;
  margin:2.6rem 0 .9rem;padding-bottom:.6rem;border-bottom:1px solid var(--line);
}
.legal-corps h3:first-child{margin-top:0}
.legal-corps p{color:var(--ink-2);margin-bottom:.95rem;line-height:1.66}
.legal-corps p:last-child{margin-bottom:0}
.legal-corps strong{color:var(--ink);font-weight:600}
.legal-corps a{color:var(--marine);text-underline-offset:3px}
.legal-corps a:hover{color:var(--accent-ink)}

.ident{margin:0 0 .6rem;display:flex;flex-direction:column}
.ident > div{
  display:flex;gap:1.5rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px dotted var(--line);
}
.ident > div:last-child{border-bottom:none}
.ident dt{
  flex:0 0 15rem;font-family:var(--f-mono);font-size:.82rem;
  letter-spacing:.01em;text-transform:none;font-weight:500;color:var(--ink-3);
}
.ident dd{margin:0;color:var(--ink);font-size:.97rem;line-height:1.5}
.ident dd.num{font-variant-numeric:tabular-nums;letter-spacing:.02em}

.puces{margin:.4rem 0 1rem;display:flex;flex-direction:column;gap:.5rem}
.puces li{
  position:relative;padding-left:1.15rem;color:var(--ink-2);
  font-size:.97rem;line-height:1.6;
}
.puces li::before{
  content:"";position:absolute;left:0;top:.62rem;
  width:6px;height:6px;border:1.5px solid var(--accent);transform:rotate(45deg);
}

.a-completer{
  padding:.95rem 1.15rem;border-left:2px solid var(--accent);
  background:var(--accent-wash);border-radius:0 2px 2px 0;
  font-size:.93rem;
}
.a-completer::before{
  content:"\00C0 compl\00E9ter";display:block;
  font-family:var(--f-mono);font-size:.82rem;letter-spacing:.01em;
  text-transform:none;color:var(--accent-ink);margin-bottom:.4rem;font-weight:600;
}

.tableau-large{overflow-x:auto;margin:1rem 0 1.4rem}
table.rgpd{width:100%;min-width:640px;border-collapse:collapse;font-size:.9rem}
table.rgpd th{
  text-align:left;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.01em;
  text-transform:none;color:var(--ink-3);font-weight:500;
  padding:0 1rem .6rem 0;border-bottom:1px solid var(--line);vertical-align:bottom;
}
table.rgpd td{
  padding:.85rem 1rem .85rem 0;border-bottom:1px dotted var(--line);
  color:var(--ink-2);vertical-align:top;line-height:1.5;
}
table.rgpd td:first-child{color:var(--ink);font-weight:500;width:22%}
table.rgpd tr:last-child td{border-bottom:none}

/* Ecrans intermediaires (petits portables) : le menu compte huit entrees
   depuis l'ajout de "Prestations". On resserre la barre pour que le bouton
   d'appel ne deborde plus de la fenetre. */
@media (max-width:1220px) and (min-width:1121px){
  .top-in{gap:1rem}
  .nav a{padding:.45rem .42rem;font-size:.85rem}
}

/* Sur telephone, l'etiquette et la valeur des listes d'identite
   passent l'une au-dessus de l'autre : cote a cote, la valeur deborde. */
@media (max-width:640px){
  .ident > div{flex-direction:column;gap:.3rem}
  .ident dt{flex:none}
  .legal-corps h3{font-size:1.25rem}
}

/* Le bouton d'appel de l'en-tete tient sur une seule ligne. */
.top .btn{white-space:nowrap}

/* ============================================================
   MAQUETTE MARINE & DORE — validee le 09/09/2026
   Hero sombre pleine largeur, tuiles de preuve decalees,
   apparition des sections au defilement.
   ============================================================ */

/* --- l en-tete se fond dans le hero sombre, sur la page d accueil --- */
body.accueil .top{
  position:relative;background:var(--profond);backdrop-filter:none;border-bottom:none;
}
body.accueil .top .nav a{color:#E8ECF6;font-weight:600}
body.accueil .top .nav a:hover{color:#FFFFFF;background:transparent;box-shadow:inset 0 -2px 0 var(--or-clair)}
body.accueil .top .nav a[aria-current="true"]{color:#FFFFFF;box-shadow:inset 0 -2px 0 var(--or-clair)}
body.accueil .brand span{color:#B7C2DE}
body.accueil .brand .logo-clair{display:none}
body.accueil .brand .logo-sombre{display:block}
body.accueil .burger{color:#FFFFFF;border-color:rgba(255,255,255,.3)}
@media (max-width:1120px){
  body.accueil .nav{background:var(--profond-2);border-bottom-color:rgba(255,255,255,.12)}
  body.accueil .nav a{border-bottom-color:rgba(255,255,255,.10)}
}

/* --- le hero sombre --- */
.hero-sombre{
  position:relative;background:var(--profond);border-top:none;overflow:hidden;
  padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(6rem,9vw,8.5rem);
}
.hero-sombre::before{
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:repeating-linear-gradient(58deg,var(--accent) 0 1px,transparent 1px 46px);
}
.hero-sombre::after{
  content:"";position:absolute;right:-14%;top:-32%;width:60vw;height:60vw;pointer-events:none;
  border-radius:50%;background:radial-gradient(circle,rgba(124,105,72,.30) 0%,rgba(18,32,63,0) 68%);
}
.hero-sombre > *{position:relative;z-index:1}
.millesime{
  position:absolute;right:3%;bottom:-4%;z-index:0;pointer-events:none;
  font-family:var(--f-display);font-weight:700;letter-spacing:-.05em;line-height:1;
  font-size:clamp(6rem,16vw,14.5rem);color:rgba(255,255,255,.05);
}
.hero-sombre h1{color:#FFFFFF}
.hero-sombre h1 em{color:var(--or-clair)}
.hero-sombre .lede{color:var(--sur-profond)}
.hero-sombre .eyebrow{
  display:inline-flex;border:1px solid rgba(201,178,131,.35);border-radius:999px;
  padding:.5rem 1rem;margin-bottom:1.9rem;
}
.hero-sombre .eyebrow .dot{background:var(--or-clair)}
.hero-sombre .eyebrow .mono{color:var(--or-clair)}
.hero-sombre .btn.ghost{color:#FFFFFF;border-color:rgba(255,255,255,.28);background:transparent}
.hero-sombre .btn.ghost:hover{border-color:var(--or-clair);color:var(--or-clair);background:transparent}
.hero-sombre .fiche{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  box-shadow:none;border-radius:16px;
}
.hero-sombre .fiche-top{background:transparent;border-bottom-color:rgba(255,255,255,.10);border-radius:16px 16px 0 0}
.hero-sombre .fiche-top .mono:first-child{color:var(--or-clair)}
.hero-sombre .fiche-top .mono:last-child{color:#7286B4}
.hero-sombre .fiche .row{border-bottom:1px solid rgba(255,255,255,.07)}
.hero-sombre .fiche dt{color:#A9B6D6}
.hero-sombre .fiche dd{color:#FFFFFF}
.hero-sombre .fiche dd small{color:#8FA0C6}
.hero-sombre .fiche .row:last-child dd{color:var(--or-clair)}

/* --- tuiles de preuve, decalees, a cheval sur le hero --- */
.tuiles-bande{margin-top:calc(-1 * clamp(4rem,6.5vw,6rem));position:relative;z-index:3}
.tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;align-items:start}
.tuiles li{border-radius:16px;padding:1.7rem 1.6rem 1.8rem}
.tuiles b{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:2.85rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.tuiles b i{font-style:normal;font-size:1.15rem;font-weight:600}
.tuiles span{display:block;margin-top:.65rem;font-size:.9rem;line-height:1.5}
.tuiles li:nth-child(1){background:var(--accent);margin-top:4.1rem}
.tuiles li:nth-child(1) b{color:#FFFFFF}
.tuiles li:nth-child(1) span{color:#F0E9DB}
.tuiles li:nth-child(2){background:var(--surface);border:1px solid var(--line);margin-top:1.1rem}
.tuiles li:nth-child(2) b{color:var(--marine)}
.tuiles li:nth-child(2) span{color:var(--ink-2)}
.tuiles li:nth-child(3){background:var(--profond-2);margin-top:2.9rem}
.tuiles li:nth-child(3) b{color:var(--or-clair)}
.tuiles li:nth-child(3) span{color:var(--sur-profond)}
.tuiles li:nth-child(4){background:var(--surface);border:1px solid var(--line);margin-top:0}
.tuiles li:nth-child(4) b{color:var(--marine)}
.tuiles li:nth-child(4) span{color:var(--ink-2)}
@media (max-width:900px){
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tuiles li{margin-top:0 !important}
  .tuiles-bande{margin-top:-3rem}
}
@media (max-width:560px){.tuiles{grid-template-columns:1fr}}

/* --- cartes qui se soulevent au survol --- */
.offre,.card-c,.fonc,.step{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.offre:hover{transform:translateY(-3px);box-shadow:0 12px 28px -14px rgba(20,26,46,.45)}

/* --- apparition des sections au defilement ---
   L etat masque n est pose QUE si le script du pied de page tourne :
   sans JavaScript, tout reste visible. --- */
.js-anim .revele{opacity:0;transform:translateY(24px)}
.js-anim .revele.vu{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .js-anim .revele{opacity:1 !important;transform:none !important;transition:none !important}
  .offre,.btn,.btn .arw{transition:none !important}
}

/* ---------- bandeau sombre pleine largeur (garantie) ---------- */
.bande-sombre{
  position:relative;overflow:hidden;border-top:none;
  background:var(--profond);
  padding-block:clamp(4rem,7.5vw,6.5rem);
}
.bande-sombre::before{
  content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:repeating-linear-gradient(58deg,var(--accent) 0 1px,transparent 1px 46px);
}
.bande-sombre > *{position:relative;z-index:1}
.bande-sombre .sec-head{border-bottom-color:rgba(255,255,255,.14)}
.bande-sombre .sec-head h1,.bande-sombre .sec-head h2{color:#FFFFFF}
.bande-sombre .sec-head h1 em,.bande-sombre .sec-head h2 em{color:var(--or-clair)}
.bande-sombre .sec-head .mono{color:var(--or-clair)}
.bande-sombre .aside-note{color:#A2B0DE;border-top-color:rgba(255,255,255,.14)}
.bande-sombre .aside-note strong{color:#FFFFFF}
.bande-sombre .mono{color:var(--or-clair)}

.bareme-lignes{display:flex;flex-direction:column;gap:.75rem}
.bareme-lignes li{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  background:rgba(255,255,255,.05);border-left:3px solid var(--accent);
  border-radius:11px;padding:1.1rem 1.35rem;
}
.bareme-lignes .poste{font-size:.97rem;color:#E4EAF7;line-height:1.4}
.bareme-lignes .duree{
  font-family:var(--f-display);font-weight:700;font-size:1.6rem;line-height:1;
  color:var(--or-clair);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.res-sombre{display:flex;flex-direction:column;gap:.7rem}
.res-sombre li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:baseline;
  background:rgba(255,255,255,.045);border-radius:10px;padding:.85rem 1.15rem;
}
.res-sombre b{
  font-family:var(--f-display);font-weight:700;font-size:1.35rem;line-height:1.1;
  color:var(--or-clair);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.res-sombre span{font-size:.94rem;color:#E4EAF7;line-height:1.45}
@media (max-width:640px){
  .bareme-lignes li{flex-direction:column;align-items:flex-start;gap:.4rem}
  .res-sombre li{grid-template-columns:1fr;gap:.25rem}
}

/* ---------- bandeau photographique pleine largeur ---------- */
.bandeau-photo{
  position:relative;display:block;overflow:hidden;
  height:clamp(150px,20vw,280px);
  background:var(--profond);
}
.bandeau-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);
}
.bandeau-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(12,22,46,.82) 0%,rgba(12,22,46,.34) 42%,rgba(12,22,46,0) 72%),
    linear-gradient(90deg,rgba(18,32,63,.42) 0%,rgba(18,32,63,.08) 50%,rgba(18,32,63,.38) 100%);
}
.bandeau-photo .legende{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) clamp(1rem,2.5vw,1.8rem);
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.05rem,2vw,1.6rem);letter-spacing:-.02em;line-height:1.2;
  color:#FFFFFF;text-shadow:0 1px 14px rgba(10,18,38,.55);
}
.bandeau-photo .legende em{font-style:normal;color:var(--or-clair)}
.bandeau-photo + section{border-top:none}

/* ---------- mosaïque de filières ---------- */
.mosaique{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.mosaique li{position:relative;overflow:hidden;border-radius:12px;background:var(--profond)}
.mosaique img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.mosaique li:hover img{transform:scale(1.05)}
.mosaique li::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(12,22,46,.35) 0%,rgba(12,22,46,.05) 55%,rgba(12,22,46,0) 100%);
}
.mosaique b{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:.65rem .75rem .7rem;font-family:var(--f-body);font-weight:600;
  font-size:.84rem;line-height:1.25;color:#FFFFFF;
  background:linear-gradient(0deg,rgba(12,22,46,.93) 0%,rgba(12,22,46,.86) 60%,rgba(12,22,46,0) 100%);
}
@media (max-width:900px){.mosaique{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.mosaique{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- audit : zones tactiles a 24 px minimum ---------- */
.cand-cta a,.cand-steps a,.offres-foot a:not(.btn),.fil a,.ref-list a{
  display:inline-block;padding-block:.3rem;
}

/* ---------- audit : lien d'evitement ---------- */
.saut{
  position:absolute;left:0;top:0;z-index:200;
  transform:translateY(-130%);
  background:var(--profond);color:#FFFFFF;
  font-family:var(--f-body);font-weight:600;font-size:.95rem;
  padding:.8rem 1.2rem;border-radius:0 0 8px 0;text-decoration:none;
}
.saut:focus{transform:translateY(0)}

/* ---------- audit : telephone dans l'en-tete ---------- */
.tel-haut{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-body);font-weight:600;font-size:.95rem;
  color:var(--ink);text-decoration:none;padding:.4rem .2rem;margin-right:.2rem;
  white-space:nowrap;
}
.tel-haut:hover{color:var(--accent-ink)}
body.accueil .top .tel-haut{color:var(--or-clair)}
body.accueil .top .tel-haut:hover{color:#FFFFFF}
@media (max-width:1120px){
  .tel-haut{margin-left:auto}
}
@media (max-width:520px){
  .tel-haut span{display:none}
}

/* ---------- audit : mention des liens sortants ---------- */
.sortant::after{
  content:" \2197";font-size:.85em;color:var(--ink-3);
}
.hero-sombre .sortant::after,.bande-sombre .sortant::after{color:var(--sur-profond)}

/* ---------- audit : grilles a colonnes fixes ---------- */
.fil-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 3rem}
@media (max-width:760px){.fil-grid{grid-template-columns:1fr}}
.fonctions{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.fonctions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fonctions{grid-template-columns:1fr}}

/* ---------- audit : date de mise a jour ---------- */
.maj{font-size:.86rem;color:var(--ink-3);width:100%;margin-top:.6rem}

/* ---------- audit : separation des aplats en mode sombre ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-sombre,
  :root:not([data-theme="light"]) .bande-sombre{
    border-top:1px solid rgba(255,255,255,.14);
    border-bottom:1px solid rgba(255,255,255,.14);
  }
}
:root[data-theme="dark"] .hero-sombre,
:root[data-theme="dark"] .bande-sombre{
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}

/* ---------- audit : bouton d'action en tete du menu replie ---------- */
.nav-cta{display:none}
@media (max-width:1120px){
  .nav-cta{
    display:block;background:var(--btn-bg);color:var(--btn-fg);
    font-weight:600;text-align:center;border-radius:6px;
    padding:.8rem 1rem;margin:.6rem 0 .4rem;border-bottom:none;
  }
  .nav-cta:hover{background:var(--accent-ink);color:#FFFFFF}
  body.accueil .nav .nav-cta{color:var(--btn-fg)}
}

/* ---------- audit : formulaire de demande ---------- */
.form{max-width:44rem}
.form-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-champ{margin-bottom:1.1rem}
.form-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.1rem}
@media (max-width:640px){.form-duo{grid-template-columns:1fr}}
.form label{
  display:block;font-family:var(--f-body);font-weight:600;font-size:.88rem;
  color:var(--ink-2);margin-bottom:.35rem;
}
.form label .fac{font-weight:400;color:var(--ink-3)}
.form input,.form select,.form textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:.7rem .85rem;min-height:44px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.form textarea{min-height:96px;resize:vertical;line-height:1.55}
.form input::placeholder,.form textarea::placeholder{color:var(--ink-3)}
.form input:hover,.form select:hover,.form textarea:hover{border-color:var(--ink-3)}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);
}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
/* L'erreur ne s'affiche qu'apres que la personne a quitte le champ,
   jamais sur un formulaire encore vierge. */
.form input:user-invalid,.form select:user-invalid,.form textarea:user-invalid{
  border-color:var(--alerte);
}
.form input:user-valid,.form select:user-valid,.form textarea:user-valid{
  border-color:var(--succes);
}
.form button[type=submit]{
  border:none;cursor:pointer;font-size:1rem;margin-top:.4rem;min-height:48px;
}
.form button[type=submit]:disabled{opacity:.55;cursor:not-allowed;transform:none}
.form-note{
  margin-top:1.1rem;font-size:.88rem;color:var(--ink-3);line-height:1.6;max-width:58ch;
}
.form-note strong{color:var(--ink-2)}

/* ---------- audit : page de confirmation ---------- */
.confirme{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;background:var(--surface);
  padding:1.6rem 1.8rem;max-width:52rem;
}
.confirme h1,.confirme h2{font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.028em;line-height:1.1;margin-bottom:.6rem}
.confirme p{color:var(--ink-2);margin-bottom:1rem}
.confirme .hero-cta{margin-top:1.4rem}

/* ---------- audit : texte reserve aux lecteurs d'ecran ---------- */
.visuellement-cache{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- audit : en-tete compact sur petit ecran ---------- */
@media (max-width:600px){
  .brand img{height:24px}
  .brand span{font-size:.68rem;margin-top:.35rem}
  .tel-haut{font-size:.88rem;padding:.4rem .1rem}
  .burger{padding:.45rem .55rem;font-size:.78rem}
  .top-in{gap:.5rem}
}
@media (max-width:400px){
  .brand span{display:none}
  .tel-haut{font-size:.84rem}
}