/* ===================================================================
   MONCOURTIERSANTÉ — feuille de style du site public
   v5 : dans la famille visuelle d'AMADEUS CONSEILS (amadeusconseils.fr),
   dont MonCourtierSanté est le service mutuelle santé.
   - Orange AMADEUS #F19C41, anthracite #323232, gris clair #F6F6F6, blanc.
   - Grands titres en capitales géométriques (Jost, proche de la police
     d'AMADEUS), titres de section en sérif (Source Serif).
   - Hero photo plein écran, boutons « pilule ».
   v8 : moins de procédés de gabarit. Aplats comme chez AMADEUS (ni ombres, ni
   cartes arrondies, ni liserés orange), pas de pictogrammes décoratifs, capitales
   réservées aux grands titres et aux boutons, un seul bouton par bloc d'action.
   Écart volontaire : sur les boutons orange, le texte est noir et non blanc
   (blanc sur orange = contraste 2,2:1, illisible pour beaucoup ; noir = 7,9:1).
   =================================================================== */

/* ─── FONTES ──────────────────────────────────────────────────────── */
/* Jost (Indestructible Type, OFL) : géométrique, dans l'esprit de la police
   d'AMADEUS. Source Serif 4 (Adobe, OFL) : pour les titres de section. */
@font-face { font-family:'Jost'; src:url('/fonts/jost-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap }
@font-face { font-family:'Source Serif'; src:url('/fonts/sourceserif4-var.woff2') format('woff2'); font-weight:200 900; font-style:normal; font-display:swap }

/* ─── JETONS ──────────────────────────────────────────────────────── */
:root {
  --orange:    #F19C41;   /* orange AMADEUS : aplats, boutons, filets */
  --orange-h:  #E5892A;
  --orange-tx: #A65C0E;   /* orange foncé pour du petit texte sur fond clair (5:1) */
  --orange-soft: #FDF1E3;
  --anthracite:#323232;
  --anthracite-2:#3E3E3E;

  --paper:   #FFFFFF;
  --paper-2: #F6F6F6;
  --surface: #FFFFFF;
  --text:  #1A1A1A;
  --body:  #3A3A3A;
  --muted: #5A5A5A;
  --line:   #E4E4E4;
  --line-2: #CFCFCF;

  /* Alias utilisés par le formulaire et les pages intérieures */
  --ink:         var(--anthracite);
  --ink-2:       var(--anthracite-2);
  --mark:        var(--orange);
  --mark-h:      var(--orange-h);
  --mark-soft:   var(--orange-soft);
  --mark-line:   #F3C58F;
  --pen:         var(--orange-tx);
  --accent:      var(--anthracite);
  --accent-h:    #1A1A1A;
  --accent-soft: var(--orange-soft);
  --accent-line: #F3C58F;

  --err:      #B42318;
  --err-soft: #FDF0EE;

  --font-sans:  'Jost', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Source Serif', Georgia, 'Times New Roman', serif;

  --r-xs: 3px;
  --r:    6px;
  --r-lg: 10px;
  --pill: 100px;

  --sh-sheet: 0 2px 4px rgba(0,0,0,.06), 0 24px 48px -28px rgba(0,0,0,.45);
  --sh-2:     0 1px 2px rgba(0,0,0,.06), 0 14px 30px -20px rgba(0,0,0,.3);

  --section: 110px;
  --measure: 66ch;
  --ease: .15s ease;
  --nav-h: 96px;
}

/* ─── BASE ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
[id] { scroll-margin-top:90px }
body {
  font-family:var(--font-sans); font-size:17px; line-height:1.65;
  color:var(--body); background:var(--paper);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { color:inherit; text-decoration:none }
img, svg { display:block; max-width:100% }
a[href^="tel:"] { white-space:nowrap }
button, input, select, textarea { font:inherit; color:inherit }
.hidden { display:none !important }

:focus-visible { outline:3px solid var(--orange); outline-offset:2px; border-radius:var(--r-xs) }
::selection { background:var(--orange); color:var(--text) }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:12px; top:-64px; z-index:900;
  background:var(--anthracite); color:#fff; padding:12px 18px;
  border-radius:0 0 var(--r) var(--r); font-size:15px; font-weight:600;
  transition:top var(--ease);
}
.skip-link:focus { top:0 }
main:focus { outline:none }

/* ─── GABARIT ET TYPOGRAPHIE ──────────────────────────────────────── */
.container    { max-width:1240px; margin:0 auto; padding:0 32px }
.content-page { max-width:920px; margin:0 auto }
.section       { position:relative; padding:var(--section) 0 }
.section-light { background:var(--paper-2) }

h1, h2, h3, h4 { color:var(--text); line-height:1.15; text-wrap:balance }
h3, h4 { font-weight:600 }
.section-title {
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(30px, 3.4vw, 44px); letter-spacing:-.01em; margin-bottom:16px;
}
.section-title em { font-style:normal }
.section-sub { font-size:19px; line-height:1.55; color:var(--body); max-width:56ch }
.eyebrow, .section-tag { display:none }

.split-head { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:end; margin-bottom:40px }
.split-head .section-title { margin-bottom:0 }
.margin-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:72px; align-items:start }
.margin-title  { position:sticky; top:120px }
.table-scroll  { overflow-x:auto }

.link-action, .u-mark {
  font-weight:600; color:var(--text);
  text-decoration:underline; text-decoration-color:var(--orange);
  text-decoration-thickness:2px; text-underline-offset:4px;
  transition:color var(--ease);
}
.link-action:hover, .u-mark:hover { color:var(--orange-tx) }

/* ─── BOUTONS « PILULE » ──────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 24px; border-radius:var(--pill);
  font-family:var(--font-sans); font-weight:600; font-size:14.5px; line-height:1.2;
  text-transform:uppercase; letter-spacing:.06em;
  border:2px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background-color var(--ease), border-color var(--ease), color var(--ease);
}
.btn-primary { background:var(--orange); border-color:var(--orange); color:var(--text) }
.btn-primary:hover { background:var(--orange-h); border-color:var(--orange-h) }
.btn-outline { background:transparent; border-color:var(--text); color:var(--text) }
.btn-outline:hover { background:var(--text); color:#fff }
.btn-ghost { background:transparent; border-color:rgba(255,255,255,.85); color:#fff }
.btn-ghost:hover { background:#fff; color:var(--text) }
.btn-ink { background:var(--anthracite); border-color:var(--anthracite); color:#fff }
.btn-ink:hover { background:#1A1A1A; border-color:#1A1A1A }
.btn-white { background:#fff; border-color:#fff; color:var(--text) }
.btn-white:hover { background:var(--orange); border-color:var(--orange) }
.btn-lg   { padding:15px 30px; font-size:15.5px }
.btn-sm   { padding:9px 18px; font-size:13px }
.btn-full { width:100% }
.btn:disabled { opacity:.55; cursor:not-allowed }

/* ─── EN-TÊTE ─────────────────────────────────────────────────────── */
.navbar { position:sticky; top:0; z-index:500; background:var(--anthracite); color:#fff; transition:background-color .25s ease, box-shadow .25s ease }
.navbar.scrolled { box-shadow:0 6px 20px -12px rgba(0,0,0,.5) }
/* Accueil : l'en-tête est posé, transparent, sur la photo ; il se remplit au défilement. */
.navbar--over { position:fixed; left:0; right:0; background:transparent }
.navbar--over.scrolled, .navbar.menu-open { background:var(--anthracite) }
.nav-inner { display:flex; align-items:center; justify-content:space-between; min-height:var(--nav-h); gap:28px; padding:8px 0 }   /* hauteur fixe : le numéro et le bouton ne touchent jamais les bords */

.logo { display:inline-flex; flex-direction:column; line-height:1; color:#fff }
.logo-text { font-size:25px; font-weight:600; letter-spacing:-.01em }
.logo strong { font-weight:600; color:var(--orange) }
.logo-sub { margin-top:5px; font-size:10px; font-weight:500; letter-spacing:.34em; text-transform:uppercase; opacity:.9 }

.nav-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px }
.nav-phone {
  display:inline-flex; align-items:center; gap:8px; padding-bottom:8px;
  font-size:14.5px; font-weight:600; letter-spacing:.04em; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.3);
}
.nav-phone svg { color:var(--orange) }
.nav-links { display:flex; align-items:center; gap:24px }
.nav-links a:not(.btn) {
  position:relative; font-size:15px; font-weight:400; color:#fff; padding:6px 0;
  transition:color var(--ease);
}
.nav-links a:not(.btn)::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn)[aria-current="page"]::after { transform:scaleX(1) }
.nav-links a:not(.btn)[aria-current="page"]::after { background:var(--orange) }
.nav-external { opacity:.8 }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; color:#fff; padding:6px; margin-right:-6px }
.nav-toggle svg { width:26px; height:26px }

/* ─── HERO ────────────────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center;   /* tout l'écran à l'arrivée */
  color:#fff; background:var(--anthracite); overflow:hidden; isolation:isolate;
  padding:calc(var(--nav-h) + 40px) 0 110px;
}
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; z-index:-2 }
.hero::before {   /* voile pour la lisibilité du texte blanc */
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(20,20,20,.74) 0%, rgba(20,20,20,.5) 55%, rgba(20,20,20,.22) 100%);
}
.hero-inner { width:100% }   /* enfant d'un conteneur flex : sans cela il se rétrécit et se centre */
.hero-content { max-width:880px; padding-left:36px; border-left:1px solid rgba(255,255,255,.75) }
.hero h1 { color:#fff; margin-bottom:22px }
.hero-content { text-shadow:0 1px 14px rgba(0,0,0,.35) }   /* lisibilité sur la photo, voile plus léger */
.hero-brand {
  display:block; margin:0; color:#fff; text-wrap:balance;
  font-size:clamp(44px, 6.2vw, 84px); font-weight:600; line-height:1.1;   /* place pour l'accent du É */
  text-transform:uppercase; letter-spacing:.01em;
}
.hero-brand strong { font-weight:600; color:var(--orange) }
.hero-tagline { display:block; margin-top:16px; font-size:clamp(21px, 2.3vw, 29px); font-weight:500; line-height:1.25 }
.hero-lead { font-size:clamp(18px, 1.6vw, 21px); line-height:1.5; max-width:46ch; margin-bottom:14px; color:rgba(255,255,255,.92) }
.hero-pipes { font-size:17px; font-weight:500; margin-bottom:34px; color:#fff }
.hero-pipes span { color:var(--orange); margin:0 8px }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px }
/* Le téléphone : un lien à côté du bouton, pas un second bouton */
.hero-phone, .band-phone { padding:8px 0; font-size:17px; color:rgba(255,255,255,.9) }
.hero-phone strong, .band-phone strong {
  font-weight:600; letter-spacing:.03em; color:#fff; white-space:nowrap;
  border-bottom:2px solid var(--orange); padding-bottom:2px; transition:color var(--ease);
}
.hero-phone:hover strong, .band-phone:hover strong { color:var(--orange) }
.hero-down {
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:56px; height:52px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); color:#fff; transition:background-color var(--ease);
}
.hero-down:hover { background:var(--orange); color:var(--text) }

/* ─── PRÉSENTATION ────────────────────────────────────────────────── */
.pres-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:start }
.pres-grid > .section-title { margin-bottom:0 }
.pres-sub { font-size:20px; line-height:1.5; color:var(--text); margin-bottom:22px; max-width:46ch }
.pres-cols { columns:2; column-gap:36px; margin-bottom:30px; font-size:15.5px; line-height:1.7 }
.pres-cols p { break-inside:avoid; margin-bottom:14px }
sup { line-height:0 }   /* « 12e » ne décale plus sa ligne ni la colonne voisine */
.pres-cols .brand { color:var(--orange-tx) }

/* ─── COMMENT ÇA MARCHE (bande anthracite) ────────────────────────── */
.method { position:relative; overflow:hidden; background:var(--anthracite); color:#fff; padding:var(--section) 0 }
.big-u {
  position:absolute; left:-70px; top:60px; width:300px; height:auto; z-index:0;
  fill:none; stroke:var(--orange); stroke-width:62; stroke-linecap:butt; transform:rotate(14deg);
}
.method .container { position:relative; z-index:1 }
.method-title {
  color:#fff; font-size:clamp(44px, 7vw, 96px); font-weight:600; line-height:.95;
  text-transform:uppercase; letter-spacing:.01em; margin-bottom:56px;
}
/* Frise : un filet orange relie les trois étapes, de vraies étapes successives. */
.timeline { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:0 48px; position:relative }
.timeline::before {
  content:''; position:absolute; left:0; right:0; top:11px; height:2px;
  background:linear-gradient(90deg, var(--orange) 0 70%, rgba(241,156,65,.25) 100%);
}
.timeline li { position:relative; padding-top:46px; counter-increment:etape }
.timeline { counter-reset:etape }
.tl-dot {
  position:absolute; top:0; left:0; width:24px; height:24px; border-radius:50%;
  background:var(--anthracite); border:3px solid var(--orange);
}
.timeline h3::before {
  content:counter(etape) '.'; display:block; margin-bottom:10px;
  font-size:15px; font-weight:600; letter-spacing:.12em; color:var(--orange);
}
.timeline h3 { color:#fff; font-size:22px; font-weight:600; margin-bottom:10px }
.timeline p  { color:rgba(255,255,255,.8); font-size:16.5px; max-width:34ch }
/* Variante sur fond clair (page de confirmation) */
.timeline--light .tl-dot { background:#fff }
.timeline--light h3 { color:var(--text) }
.timeline--light p  { color:var(--body) }
.method-call { margin-top:40px; font-size:17px; color:rgba(255,255,255,.88) }
.method-call a { color:var(--orange); font-weight:600; white-space:nowrap; text-decoration:underline; text-underline-offset:4px }

/* ─── VOTRE SITUATION ─────────────────────────────────────────────── */
.situations .section-sub { margin-bottom:40px }
.situ { display:grid; grid-template-columns:300px minmax(0,1fr); gap:0 }
.situ-tabs { display:flex; flex-direction:column; gap:2px }
.situ:not(.is-enhanced) .situ-tabs { display:none }   /* sans JS : tous les profils, les uns sous les autres */
.situ:not(.is-enhanced) { grid-template-columns:1fr }
.situ-tab {
  position:relative; text-align:left; cursor:pointer; background:transparent; border:none;
  padding:17px 24px; font-family:var(--font-sans); font-size:17px; font-weight:500;
  color:var(--muted);
  transition:background-color var(--ease), color var(--ease);
}
.situ-tab::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:transparent; transition:background-color var(--ease) }
.situ-tab:hover { color:var(--text); background:rgba(255,255,255,.6) }
.situ-tab[aria-selected="true"] { background:#fff; color:var(--text) }
.situ-tab[aria-selected="true"]::before { background:var(--orange) }
.situ-panel { background:#fff; padding:40px 44px 42px; min-height:100% }
.situ:not(.is-enhanced) .situ-panel { margin-bottom:12px }
.situ-panel h3 { font-family:var(--font-serif); font-size:clamp(24px,2.4vw,30px); font-weight:600; margin-bottom:14px }
.situ-panel p { font-size:17px; max-width:62ch; margin-bottom:16px }
.situ-links { display:flex; flex-wrap:wrap; gap:8px 30px; margin-top:22px; margin-bottom:0 }
.situ-check strong, .profile-check strong { color:var(--text); font-weight:600 }

/* ─── COMPAGNIES PARTENAIRES ET RÉASSURANCE ───────────────────────── */
.partners-band { padding:72px 0 60px }
.partners-title { font-family:var(--font-serif); font-size:24px; font-weight:600; margin-bottom:28px }
.partners-track, .partners-logos { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:22px 42px }
.partner-cell { width:120px; height:60px; display:flex; align-items:center; justify-content:center }
.partner-logo { width:100%; height:38px; object-fit:contain; filter:grayscale(1); opacity:.6; transition:filter .25s ease, opacity .25s ease }
.partner-cell:hover .partner-logo { filter:none; opacity:1 }
.partner-logo[src*="henner"], .partner-logo[src*="modulassur"] { height:52px }
.partner-logo[src*="acps"], .partner-logo[src*="pavillon"] { height:48px }
.partner-name { font-size:15px; font-weight:600; color:var(--muted) }
.partners-note { margin-top:20px; font-size:14.5px; color:var(--muted); max-width:62ch }

.reassure { background:var(--paper-2); padding:44px 0 }
.reassure-list { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.reassure-list li {
  padding:4px 28px; font-size:16.5px; line-height:1.45; color:var(--text); border-left:1px solid var(--line-2);
}
.reassure-list li:first-child { border-left:none; padding-left:0 }
.reassure-list strong { font-weight:600 }

/* ─── FORMULAIRE ──────────────────────────────────────────────────── */
.form-section { background:var(--paper-2); padding:var(--section) 0 }
.form-header  { max-width:780px; margin:0 0 36px }
.form-section .section-title { font-size:clamp(30px,3.2vw,40px) }
.form-header .section-title { margin-bottom:12px }
.form-header p { font-size:18px; color:var(--body); max-width:56ch }

.form-layout { display:grid; grid-template-columns:minmax(0,780px) minmax(0,340px); gap:48px; align-items:start }
.form-aside { position:sticky; top:110px; display:flex; flex-direction:column; gap:22px }
.aside-block { background:#fff; padding:28px 28px 24px }
.aside-block h3 { font-family:var(--font-serif); font-size:21px; font-weight:600; margin-bottom:14px }
.aside-list { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:14px }
.aside-list li { position:relative; padding-left:22px; font-size:15.5px; line-height:1.5 }
.aside-list li::before { content:''; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--orange) }
.aside-list strong { color:var(--text); font-weight:600 }
.aside-note { font-size:14px; color:var(--muted) }
.aside-call { background:var(--anthracite); color:#fff; padding:24px 26px }
.aside-call p { font-size:15px; color:rgba(255,255,255,.8); margin-bottom:4px }
.aside-call a { display:block; font-size:26px; font-weight:600; letter-spacing:.03em; color:var(--orange) }
.aside-call span { font-size:14px; color:rgba(255,255,255,.7) }
.aside-privacy { font-size:14px; line-height:1.55; color:var(--muted) }
.aside-privacy a { color:var(--text); text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px }
.form-wrapper { max-width:800px; margin:0; background:var(--surface) }

/* Progression — une règle fine et un compteur lisible, pas 4 pastilles sur fond sombre */
.progress-bar { border-bottom:1px solid var(--line); padding:24px 48px 22px }
.progress-count {
  display:block; font-size:15px; font-weight:600; color:var(--text); margin-bottom:16px;
}
.progress-steps { display:flex; align-items:center }
.progress-step  { display:flex; flex-direction:column; align-items:center; gap:9px }
.step-dot {
  width:9px; height:9px; border-radius:50%;
  background:var(--line-2); border:none;
  transition:background-color var(--ease), box-shadow var(--ease);
}
.progress-step.active .step-dot { background:var(--orange); box-shadow:0 0 0 4px var(--orange-soft) }
.progress-step.done   .step-dot { background:var(--orange) }
.progress-step span {
  font-size:13px; font-weight:400; color:var(--muted); white-space:nowrap;
}
.progress-step.active span { color:var(--text); font-weight:600 }
.progress-step.done span   { color:var(--body) }
.progress-line { flex:1; height:1px; background:var(--line-2); margin:0 12px 20px; transition:background-color .3s ease }
.progress-line.done { background:var(--orange) }

.form-step { display:none; padding:44px 48px }
.form-step.active { display:block }

.step-title    { font-family:var(--font-serif); font-size:26px; font-weight:600; color:var(--text); margin-bottom:8px }
.step-subtitle { font-size:15.5px; color:var(--body); margin-bottom:32px; line-height:1.66 }

.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.form-group { margin-bottom:22px }
.form-group label { display:block; font-size:15px; font-weight:600; color:var(--text); margin-bottom:8px }
.required { color:var(--err); font-weight:400 }

.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:12px 14px;
  border:1px solid var(--line-2); border-radius:var(--r);
  font-family:var(--font-sans); font-size:16.5px; color:var(--text);
  background:var(--surface); outline:none;
  transition:border-color var(--ease), box-shadow var(--ease);
  -webkit-appearance:none; appearance:none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color:#8A9A9D }
.form-group select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6963' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft) }
.form-group input[aria-invalid="true"] { border-color:var(--err); box-shadow:0 0 0 3px var(--err-soft) }
.form-group textarea { resize:vertical; min-height:110px; line-height:1.65 }
.form-hint { font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.55 }

.input-wrap   { position:relative }
.input-suffix { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:13.5px; color:var(--muted); pointer-events:none }

/* ─── AUTOCOMPLÉTION (ville, code postal, profession) ─────────────── */
.ac-wrap { position:relative }
.ac-list {
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px);
  list-style:none; margin:0; padding:4px;
  max-height:236px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); box-shadow:var(--sh-2);
}
.ac-opt {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 12px; border-radius:var(--r-xs);
  font-size:15px; color:var(--text); cursor:pointer; line-height:1.35;
}
.ac-opt.is-active { background:var(--accent-soft) }
.ac-hint { font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; flex-shrink:0 }
.ac-opt.is-active .ac-hint { color:var(--accent) }
/* barre de défilement discrète */
.ac-list::-webkit-scrollbar { width:10px }
.ac-list::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:6px; border:3px solid var(--surface) }

/* Options radio — cases nettes, sans effet de lévitation */
.opt-list { display:flex; flex-direction:column; gap:9px }
.opt-list.opt-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.opt-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:9px }
.opt-card { display:block; position:relative }
/* Radio masqué confiné à la carte : sans conteneur positionné + width:100%
   hérité, il s'étirait à 100vw et provoquait un défilement horizontal. */
.opt-card input { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none }
.opt-card-inner {
  display:flex; align-items:center; gap:13px; height:100%;
  padding:14px 16px; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--surface); cursor:pointer;
  transition:border-color var(--ease), background-color var(--ease);
}
.oc-check {
  flex-shrink:0; width:18px; height:18px; border-radius:50%;
  border:1px solid var(--line-2); position:relative; background:var(--surface);
  transition:border-color var(--ease), background-color var(--ease);
}
.oc-body { display:flex; flex-direction:column; gap:2px; min-width:0 }
.opt-card-inner strong { font-size:15.5px; font-weight:400; color:var(--text) }
.opt-card-inner small  { font-size:12.5px; color:var(--muted); line-height:1.45 }
.opt-card-inner:hover  { border-color:var(--body) }
.opt-card input:checked + .opt-card-inner {
  border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);
}
.opt-card input:checked + .opt-card-inner .oc-check { border-color:var(--accent); background:var(--accent) }
.opt-card input:checked + .opt-card-inner .oc-check::after {
  content:''; position:absolute; inset:4px; border-radius:50%; background:#fff;
}
.opt-card input:checked + .opt-card-inner strong { font-weight:600 }
.opt-card input:focus-visible + .opt-card-inner { outline:2px solid var(--accent); outline-offset:2px }

/* Groupe d'options non renseigné — signalé sans clignotement */
.opt-list.is-invalid, .opt-grid.is-invalid {
  outline:1px solid var(--err); outline-offset:6px; border-radius:var(--r);
}

/* Sous-groupe encadré */
.field-card {
  background:#F7F9F9; border:1px solid var(--line); border-radius:var(--r);
  padding:20px 20px 8px; margin-bottom:22px;
}
.fc-title { display:block; font-size:15px; font-weight:600; color:var(--text); margin-bottom:16px }
.fc-row {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px;
}
.fc-row > span { font-size:14.5px; color:var(--body) }
.fc-row > span strong { color:var(--text); font-weight:600 }
.yn-group { display:grid; grid-template-columns:repeat(2,minmax(76px,1fr)); gap:8px; min-width:176px }
.yn-group .opt-card-inner { justify-content:center; padding:10px 14px }
.yn-group .opt-card-inner strong { font-size:14px }

.cond-block { margin-top:4px }
.cond-info {
  display:flex; gap:10px; background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:var(--r);
  padding:12px 16px; font-size:14px; color:var(--body);
}
.cond-info svg { flex-shrink:0; margin-top:2px; color:var(--accent) }

.checkbox-label { display:flex; align-items:flex-start; gap:11px; cursor:pointer; font-size:14.5px; color:var(--body); line-height:1.6 }
.checkbox-label input { flex-shrink:0; width:17px; height:17px; margin-top:3px; accent-color:var(--accent) }
.checkbox-label strong { color:var(--text); font-weight:600 }

/* Dépôt de pièces */
.file-upload-area {
  position:relative; border:1px dashed var(--line-2); border-radius:var(--r);
  padding:30px; text-align:center; cursor:pointer; background:#F7F9F9;
  transition:border-color var(--ease), background-color var(--ease);
}
.file-upload-area:hover { border-color:var(--accent); background:var(--accent-soft) }
.file-upload-area.has-files { border-style:solid; border-color:var(--accent-line); background:var(--surface) }
.file-input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100% !important; height:100%; z-index:1 }
.file-upload-content { pointer-events:none }
.file-upload-content svg { margin:0 auto 12px; color:var(--muted) }
.file-upload-content p { font-size:14.5px; color:var(--body); margin-bottom:5px }
.file-upload-content strong { color:var(--accent); font-weight:600 }
.file-upload-content small { font-size:12.5px; color:var(--muted) }
.file-list { margin-top:14px; position:relative; z-index:2; text-align:left }
.file-list-item {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  font-size:13.5px; margin-top:8px; color:var(--body);
}
.file-ext {
  font-size:12px; font-weight:600;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:var(--r-xs); padding:3px 6px; flex-shrink:0;
}

.rappel-block { background:#F7F9F9; border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-bottom:22px }
.rappel-block label + .cond-block { margin-top:14px }
.rappel-block .cond-block label { display:block; font-size:13.5px; font-weight:600; color:var(--text); margin-bottom:8px }
.rappel-block select {
  width:100%; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r);
  font-size:15.5px; background:var(--surface); color:var(--text);
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6963' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}

/* Récapitulatif */
.recap-box { background:#F7F9F9; border:1px solid var(--line); border-radius:var(--r); padding:26px; margin-bottom:24px }
.recap-box:empty { display:none }
.recap-section { margin-bottom:24px }
.recap-section:last-child { margin-bottom:0 }
.recap-section h4 {
  font-size:15px; font-weight:600; color:var(--text);
  margin-bottom:14px; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.recap-row { display:flex; justify-content:space-between; gap:20px; padding:6px 0; font-size:15px }
.recap-label { color:var(--muted); flex-shrink:0 }
.recap-value { font-weight:600; color:var(--text); text-align:right }

/* Réassurance avant l'envoi : une phrase, pas une rangée de coches */
.form-promise { font-size:15.5px; color:var(--body); margin-bottom:20px; max-width:62ch }

.rgpd-box { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:26px; font-size:15px; color:var(--body) }
.rgpd-box a { color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:3px }

.form-nav { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-top:26px; border-top:1px solid var(--line) }
.form-nav .btn-outline { color:var(--muted); border-color:transparent; padding-left:0 }
.form-nav .btn-outline:hover { color:var(--text); background:none; border-color:transparent }

.form-success { padding:72px 48px; text-align:center }
.form-success svg { margin:0 auto 24px; color:var(--accent) }
.form-success h3 { font-weight:600; font-size:28px; color:var(--text); margin-bottom:16px; letter-spacing:-.015em }
.form-success p  { font-size:16px; color:var(--body); line-height:1.74; max-width:46ch; margin:0 auto }
.form-success .btn { margin-top:30px }

/* ─── FAQ ─────────────────────────────────────────────────────────── */
.faq-grid { display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:72px; align-items:start }
.faq-intro { position:sticky; top:120px }
.faq-aside { font-size:17px; color:var(--body); margin-bottom:26px }
.faq-aside a { font-weight:600; color:var(--text); text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:3px }
.faq-call {
  display:inline-flex; flex-direction:column; gap:2px; padding:16px 22px;
  background:var(--anthracite); color:var(--orange); font-size:22px; font-weight:600; letter-spacing:.03em;
}
.faq-call span { font-size:14px; font-weight:400; letter-spacing:0; color:rgba(255,255,255,.8) }
.faq-list { min-width:0 }
.faq-item { border-bottom:1px solid var(--line-2) }
.faq-item:first-child { border-top:1px solid var(--line-2) }
.faq-q {
  width:100%; padding:22px 0; background:none; border:none; text-align:left;
  font-family:var(--font-sans); font-size:18.5px; font-weight:500; color:var(--text);
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px;
  transition:color var(--ease);
}
.faq-q:hover { color:var(--orange-tx) }
.faq-arr { position:relative; width:14px; height:14px; flex-shrink:0; color:var(--orange); font-size:0 }
.faq-arr::before, .faq-arr::after { content:''; position:absolute; background:currentColor; border-radius:1px }
.faq-arr::before { top:6px; left:0; width:14px; height:2px }
.faq-arr::after  { left:6px; top:0; width:2px; height:14px; transition:opacity .2s ease }
.faq-item.open .faq-arr::after { opacity:0 }
/* grid 0fr→1fr : la réponse n'est jamais tronquée, quelle que soit sa longueur */
.faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease }
.faq-item.open .faq-a { grid-template-rows:1fr }
.faq-a-in { overflow:hidden; min-height:0 }
.faq-item.open .faq-a-in { padding-bottom:22px }
.faq-a-in p, .faq-a-in li { font-size:17px; color:var(--body); max-width:66ch }
.faq-a-in p + p, .faq-a-in p + ul, .faq-a-in ul + p { margin-top:12px }
.faq-a-in ul { padding-left:22px }
.faq-a-in a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px }

/* ─── PIED DE PAGE (clair, comme amadeusconseils.fr) ──────────────── */
.site-footer { background:#fff; color:var(--body); border-top:1px solid var(--line); padding:64px 0 0 }
.footer-grid { display:grid; grid-template-columns:1.6fr 1.3fr 1fr; gap:56px; padding-bottom:48px }
.footer-brand .logo { color:var(--text); margin-bottom:18px }
.footer-brand .logo strong { color:var(--orange-tx) }   /* sur fond blanc : orange foncé, lisible */
.footer-brand p { font-size:15.5px; max-width:36ch; margin-bottom:12px }
.footer-official-link { font-weight:600; color:var(--orange-tx); text-decoration:underline; text-underline-offset:3px }
.footer-contact p { font-size:15.5px; line-height:1.7; margin-bottom:14px }
.footer-contact strong { color:var(--text); font-weight:600 }
.footer-contact a { text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px }
.footer-contact a:hover { text-decoration-color:var(--orange) }
.footer-contact .btn { text-decoration:none }
.footer-phone { color:var(--orange-tx); font-weight:600 }
.footer-links ul { list-style:none }
.footer-links li { margin-bottom:10px }
.footer-links a { font-size:15.5px; color:var(--text) }
.footer-links a:hover { color:var(--orange-tx) }
.footer-orias { padding:20px 0 28px; font-size:13px; line-height:1.7; color:var(--muted); border-top:1px solid var(--line) }
.footer-orias a { text-decoration:underline }
.footer-bottom { background:var(--paper-2); padding:18px 0 }
.footer-bottom-inner { display:flex; flex-wrap:wrap; gap:10px 28px; font-size:14px; color:var(--text) }
.footer-bottom-inner a:hover { color:var(--orange-tx) }
.footer-bottom-inner span { margin-left:auto; color:var(--muted) }

/* ─── EN-TÊTE DES PAGES INTÉRIEURES ───────────────────────────────── */
.page-hero {
  position:relative; isolation:isolate; overflow:hidden; color:#fff; background-color:var(--anthracite);
  padding:56px 0 64px; min-height:360px; display:flex; align-items:flex-end;
}
.page-hero::before {   /* la photo du Vieux-Port, recadrée différemment selon la page */
  content:''; position:absolute; inset:0; z-index:-2;
  /* --banner-jpg / --banner-webp : photo choisie dans le back-office (sinon le Vieux-Port) */
  background:var(--banner-jpg, url('/images/photos/marseille-vieux-port.jpg')) var(--hero-pos, 50% 60%) / cover no-repeat;
  background-image:image-set(var(--banner-webp, url('/images/photos/marseille-vieux-port.webp')) type('image/webp'), var(--banner-jpg, url('/images/photos/marseille-vieux-port.jpg')) type('image/jpeg'));
}
@media (max-width:800px) {   /* téléphone : la variante 800 px, quatre fois plus légère */
  .page-hero::before { background-image:image-set(var(--banner-webp-s, url('/images/photos/marseille-vieux-port-800.webp')) type('image/webp'), var(--banner-jpg-s, url('/images/photos/marseille-vieux-port-800.jpg')) type('image/jpeg')) }
}
.page-hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(20,20,20,.86) 0%, rgba(20,20,20,.62) 60%, rgba(20,20,20,.4) 100%) }
.page-hero > .container { width:100% }
.page-hero .container > * { max-width:900px }
/* Cadrages : le couple assis au bord du quai n'apparaît que sur « Le cabinet » ;
   les autres pages montrent le port et la ville. */
.page-hero--nos-solutions    { --hero-pos:30% 32% }
.page-hero--qui-sommes-nous  { --hero-pos:50% 18% }   /* Notre-Dame de la Garde */
.page-hero--contact          { --hero-pos:10% 40% }
.page-hero--mentions-legales { --hero-pos:22% 22% }
.page-hero--confidentialite  { --hero-pos:12% 30% }
.page-hero--lexique          { --hero-pos:40% 45% }
.page-hero--guide-senior     { --hero-pos:50% 18% }
.page-hero--conseils         { --hero-pos:22% 30% }
.page-hero--guide-tns        { --hero-pos:30% 32% }
.page-hero--guide-famille    { --hero-pos:60% 28% }
.page-hero--guide-salarie    { --hero-pos:38% 22% }
.page-hero--guide-etudiant   { --hero-pos:72% 36% }
.breadcrumb { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; font-size:14px; color:rgba(255,255,255,.75) }
.breadcrumb a { color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:3px }
.breadcrumb a:hover { text-decoration-color:var(--orange) }
.page-hero h1 {
  color:#fff; font-size:clamp(34px, 4.6vw, 60px); font-weight:600; line-height:1.05;
  text-transform:uppercase; letter-spacing:.01em; margin-bottom:18px;
  padding-left:28px; border-left:1px solid rgba(255,255,255,.75);
}
.page-hero p { font-size:19px; line-height:1.55; color:rgba(255,255,255,.88); max-width:var(--measure); padding-left:29px }

/* ─── PAGE « QUI SOMMES-NOUS » ────────────────────────────────────── */
.about-intro { display:grid; grid-template-columns:1fr 340px; gap:72px; align-items:start; margin-bottom:80px }
.about-text h2 { font-weight:600; font-size:27px; color:var(--text); margin-bottom:20px; letter-spacing:-.018em }
.about-text p  { font-size:16.5px; color:var(--body); line-height:1.8; margin-bottom:18px }

.about-section { margin-bottom:72px }
.about-section h2 {
  font-family:var(--font-serif); font-weight:600; font-size:27px; color:var(--text);
  margin-bottom:28px; letter-spacing:-.02em;
}

/* ─── PAGE « NOS SOLUTIONS » ──────────────────────────────────────── */
/* Photo du cabinet ou de l'équipe (facultative, depuis le back-office) */
.about-photo { margin:28px 0 0 }
.about-photo img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover }
.about-photo figcaption { margin-top:10px; font-size:14px; color:var(--muted) }
.about-photo-empty { display:flex; align-items:center; justify-content:center; min-height:200px; padding:24px; text-align:center; border:2px dashed var(--line-2); color:var(--muted); font-size:15px }

/* Fiche d'identité du cabinet (« Qui sommes-nous ») */
.id-card { background:var(--paper-2); padding:28px 30px }
.id-card h2 { font-size:19px; font-weight:600; color:var(--text); margin-bottom:12px }
.id-card dl div { display:grid; grid-template-columns:92px 1fr; gap:12px; padding:9px 0; border-top:1px solid var(--line-2); font-size:15px }
.id-card dt { color:var(--muted) }
.id-card dd { color:var(--text) }
.about-block { margin-bottom:80px }
.commitments { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:36px 44px }
.commitments h3 { font-family:var(--font-serif); font-size:21px; font-weight:600; margin-bottom:6px }
.commitments p  { font-size:16.5px; max-width:46ch }

.band-cta { position:relative; overflow:hidden; background:var(--anthracite); color:#fff; padding:96px 0 }
.band-cta .big-u { left:auto; right:-40px; top:-30px; width:260px; transform:rotate(-12deg) }
.band-cta-inner { position:relative; z-index:1 }
.band-cta h2 { color:#fff; font-size:clamp(32px,4.4vw,56px); font-weight:600; line-height:1.02; text-transform:uppercase; margin-bottom:18px; max-width:18ch }
.band-cta p { font-size:18.5px; color:rgba(255,255,255,.85); max-width:56ch; margin-bottom:30px }
.band-cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px }
.profile-cta { display:inline-block; margin-top:4px; font-size:15px }
.profile-links { display:flex; flex-wrap:wrap; gap:6px 28px; margin-bottom:0 }

/* Lexique : termes en sérif, aérés */
.lexique .lex-term h2 { font-family:var(--font-serif); font-size:23px; font-weight:600; border-bottom:none; padding-bottom:0; margin-bottom:8px }
.lexique .lex-term { padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--line) }
.lexique .lex-term p { font-size:17px; line-height:1.7; max-width:66ch }
.lex-term:target h2 { color:var(--orange-tx) }
/* Les termes ne forment pas une suite : pas de numéros dans leur sommaire. */
.lexique-layout .legal-toc a::before { display:none }
.lex-help { margin-top:12px; padding:22px 26px; background:var(--paper-2); font-size:16.5px }
.lex-help p:last-child { margin-bottom:0 }
.lex-help a { font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px }

/* Liste d'étapes numérotées (« Le cabinet » : notre méthode) */
.steps { list-style:none; counter-reset:etape }
.steps li {
  counter-increment:etape; display:grid; grid-template-columns:56px 1fr; column-gap:8px;
  padding:22px 0; border-top:1px solid var(--line-2);
}
.steps li:last-child { border-bottom:1px solid var(--line-2) }
.steps li::before { content:counter(etape); grid-row:span 2; font-size:46px; font-weight:600; line-height:1; color:var(--orange) }
.steps h3 { font-size:20px; margin-bottom:4px }
.steps p  { font-size:16.5px; max-width:60ch }

/* Profils (refonte) : articles de texte, sans icône ni carte. */
.profile-index p { color:var(--muted); font-size:15px; margin-bottom:10px }
.profile-index ul { list-style:none }
.profile-index li { border-top:1px solid var(--line) }
.profile-index li:last-child { border-bottom:1px solid var(--line) }
.profile-index a { display:block; padding:9px 0; font-size:15.5px; color:var(--text) }
.profile-index a:hover { color:var(--accent) }
.profile { padding:0 0 40px; margin-bottom:40px; border-bottom:1px solid var(--line) }
.profile:last-child { border-bottom:none; margin-bottom:0 }
.profile h2 { font-family:var(--font-serif); font-size:clamp(23px,2.3vw,29px); font-weight:600; color:var(--text); letter-spacing:-.014em; margin-bottom:12px }
.profile p { font-size:16.5px; max-width:64ch; margin-bottom:12px }

.postes-table { width:100%; border-collapse:collapse; font-size:16px; line-height:1.55 }
.postes-table th, .postes-table td { text-align:left; vertical-align:top; padding:16px 20px 16px 0; border-bottom:1px solid var(--line-2) }
.postes-table thead th { font-size:17px; font-weight:600; color:var(--text); border-bottom:2px solid var(--ink) }
.postes-table tbody th { width:24%; font-weight:600; color:var(--text) }

.closing-inner > * { max-width:640px }
.closing .section-sub { margin-bottom:28px }

/* ─── PAGE CONTACT ────────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 350px; gap:56px; align-items:start }
.contact-form-col h2 { font-weight:600; font-size:25px; color:var(--text); margin-bottom:12px; letter-spacing:-.018em }
.contact-info-col { display:flex; flex-direction:column; gap:20px }
.contact-info-card { background:var(--paper-2); padding:30px }
.contact-info-card h2, .contact-info-card h3 {
  font-weight:600; font-size:19px;
  color:var(--text); margin-bottom:22px; letter-spacing:-.01em;
}
.contact-info-card-blue { background:var(--anthracite); border-color:var(--anthracite) }
.contact-info-card-blue h2, .contact-info-card-blue h3 { color:#fff }
.contact-info-card-blue p { color:rgba(255,255,255,.78); font-size:14.5px; line-height:1.7; margin-bottom:20px }
.contact-info-card-blue .btn { margin-top:4px }
.contact-info-card-blue .btn-white { background:var(--orange); border-color:var(--orange); color:var(--text) }
.contact-info-card-blue .btn-white:hover { background:#fff; border-color:#fff }
.contact-detail { margin-bottom:18px }
.contact-detail:last-child { margin-bottom:0 }
.contact-detail strong { display:block; font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:2px }
.contact-detail p, .contact-detail a { font-size:15.5px; color:var(--body); line-height:1.6 }
.contact-detail a:hover { color:var(--accent) }

.send-feedback { margin-top:14px; font-size:14px; font-weight:600; padding:13px 16px; border-radius:var(--r) }
.send-feedback.error   { color:var(--err); background:var(--err-soft); border:1px solid #E8CFCA }
.send-feedback.success { color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line) }

/* ─── PAGES LÉGALES ───────────────────────────────────────────────── */
.legal-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:64px; align-items:start }
.legal-page { max-width:800px }
.legal-toc { position:sticky; top:110px; border-top:3px solid var(--orange); padding-top:18px }
.legal-toc-title { font-size:16px; font-weight:600; color:var(--text); margin-bottom:10px }
.legal-toc ol { list-style:none; counter-reset:toc }
.legal-toc li { counter-increment:toc }
.legal-toc a { display:flex; gap:10px; padding:7px 0; font-size:15px; line-height:1.35; color:var(--muted); transition:color var(--ease) }
.legal-toc a::before { content:counter(toc) '.'; color:var(--orange-tx); font-weight:600; min-width:1.4em }
.legal-toc a:hover { color:var(--text) }
.legal-section { margin-bottom:48px }
.legal-section h2 { font-weight:600; font-size:20px; color:var(--text); margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line) }
.legal-section p, .legal-section li { font-size:15.5px; color:var(--body); line-height:1.86; margin-bottom:12px }
.legal-section ul { padding-left:22px }
.legal-section a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:3px }
.legal-table { width:100%; table-layout:fixed; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.legal-table td { padding:13px 18px; font-size:14.5px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--body); overflow-wrap:break-word; hyphens:auto }
.legal-table tr:last-child td { border-bottom:none }
.legal-table td:first-child { font-weight:600; color:var(--text); width:38%; background:var(--paper) }

/* ─── ÉTATS DE FORMULAIRE, MENTIONS ET BLOCS SENSIBLES ────────────── */

/* Zone d'annonce : silencieuse tant qu'il n'y a rien à dire */
.form-status { margin:0 48px }
.form-status:empty { display:none }
.form-status.is-error {
  margin-top:20px; padding:13px 16px;
  background:var(--err-soft); border:1px solid #E8CFCA; border-left:2px solid var(--err);
  border-radius:var(--r); color:var(--err); font-size:14.5px; font-weight:600;
}

/* « facultatif » : dire ce qui n'est pas obligatoire rassure plus qu'un astérisque */
.field-optional {
  font-size:14px; font-weight:400; font-style:italic; color:var(--muted); margin-left:8px;
}

/* Bloc portant des données sensibles — signalé par un filet, pas par une alerte */
.field-card--sensitive { border-left:2px solid var(--accent-line) }
.fc-intro { font-size:13.5px; line-height:1.65; color:var(--body); margin:-6px 0 18px }
.fc-intro strong { color:var(--text); font-weight:600 }

.checkbox-label--sensitive { align-items:flex-start }
#block-consent-sante {
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}

.form-reassure {
  margin-top:18px; text-align:center;
  font-size:13px; line-height:1.6; color:var(--muted);
}

.contact-intro { font-size:15.5px; color:var(--body); line-height:1.7; margin-bottom:28px }
.contact-intro a { color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:3px }

.contact-done {
  border:1px solid var(--accent-line); background:var(--accent-soft);
  border-radius:var(--r-lg); padding:44px 32px; text-align:center;
}
.contact-done svg { margin:0 auto 18px; color:var(--accent) }
.contact-done h2 { font-size:23px; font-weight:600; color:var(--text); margin-bottom:10px }
.contact-done p  { font-size:15px; color:var(--body) }

/* Rappels d'action dans les pages légales */
.legal-todo {
  background:var(--err-soft); border:1px solid #E8CFCA; border-left:2px solid var(--err);
  border-radius:var(--r); padding:16px 18px; font-size:14.5px; color:var(--body);
}
.legal-todo strong { color:var(--err) }
.legal-updated { font-size:13px; color:var(--muted); margin-top:40px }

/* ─── PAGE DE CONFIRMATION ────────────────────────────────────────── */
.confirm-section { background:var(--paper) }
.confirm-card { max-width:880px }
.confirm-mark { display:flex; color:var(--orange); margin-bottom:22px }
.confirm-mark svg { width:56px; height:56px }
.confirm-card h1 { font-family:var(--font-serif); font-weight:600; font-size:clamp(30px,3.6vw,46px); color:var(--text); line-height:1.12; margin-bottom:16px }
.confirm-lede { font-size:19px; line-height:1.6; color:var(--body); margin-bottom:48px; max-width:56ch }
.confirm-subtitle { font-family:var(--font-serif); font-size:24px; font-weight:600; margin-bottom:24px }
.confirm-card .timeline { margin-bottom:44px }
.confirm-note { font-size:15px; color:var(--muted); line-height:1.65; margin-bottom:28px }
.confirm-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap }

/* ─── PAGE 404 ────────────────────────────────────────────────────── */
.notfound { max-width:720px }
.notfound-code { font-size:clamp(96px,14vw,180px); font-weight:600; line-height:.9; color:var(--orange); letter-spacing:-.02em; margin-bottom:16px }
.notfound h1 { font-family:var(--font-serif); font-weight:600; font-size:clamp(28px,3.2vw,40px); color:var(--text); margin-bottom:14px }
.notfound-links { list-style:none; margin:26px 0 34px; border-top:1px solid var(--line) }
.notfound-links a { display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:17px; color:var(--text); transition:color var(--ease), padding var(--ease) }
.notfound-links a:hover { color:var(--orange-tx); padding-left:8px }
.notfound-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap }

/* ─── RETOUR EN HAUT ──────────────────────────────────────────────── */
.scroll-top {
  position:fixed; bottom:28px; right:28px; z-index:800;
  width:44px; height:44px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line-2); cursor:pointer;
  color:var(--text); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; box-shadow:var(--sh-2);
  transition:opacity var(--ease), border-color var(--ease), color var(--ease);
}
.scroll-top.visible { opacity:1; pointer-events:auto }
.scroll-top:hover { border-color:var(--orange); background:var(--orange) }

/* ─── ADAPTATIF ───────────────────────────────────────────────────── */
@media (max-width:1150px) {
  :root { --nav-h:76px }
  .nav-right { flex-direction:row; align-items:center; gap:18px; margin-left:auto }
  .nav-phone { padding-bottom:0; border-bottom:none }
  .nav-links { display:none }
  .nav-toggle { display:flex }
  /* Menu ouvert : panneau blanc sous l'en-tête (positionné par main.js) */
  .navbar .nav-links.nav-open a:not(.btn) { color:var(--text); text-transform:none }
  .navbar .nav-links.nav-open a:not(.btn)::after { display:none }
  .pres-grid { grid-template-columns:1fr; gap:24px }
  .big-u { width:200px; left:auto; right:-60px; top:auto; bottom:-40px; opacity:.9 }
}
@media (max-width:1200px) {
  .form-layout { grid-template-columns:1fr; gap:28px; max-width:780px }
  .form-aside { position:static; display:grid; grid-template-columns:1fr 1fr; gap:20px }
  .aside-privacy { grid-column:1 / -1 }
}
@media (max-width:1024px) {
  :root { --section:84px }
  .split-head    { grid-template-columns:1fr; gap:16px }
  .margin-layout { grid-template-columns:1fr; gap:28px }
  .margin-title  { position:static }
  .situ { grid-template-columns:1fr }
  .situ-tabs { flex-direction:row; flex-wrap:wrap; gap:8px; margin-bottom:14px }
  .situ-tab { padding:9px 16px; border:1px solid var(--line-2); border-radius:var(--pill); background:#fff; font-size:15px }
  .situ-tab::before { display:none }
  .situ-tab[aria-selected="true"] { background:var(--anthracite); border-color:var(--anthracite); color:#fff }
  .faq-grid { grid-template-columns:1fr; gap:28px }
  .faq-intro { position:static }
  .legal-layout { grid-template-columns:1fr; gap:32px }
  .legal-toc { position:static }
  .legal-toc ol { columns:2; column-gap:32px }
  .reassure-list { grid-template-columns:repeat(2,1fr); gap:22px 0 }
  .reassure-list li:nth-child(odd) { border-left:none; padding-left:0 }
  .contact-grid  { grid-template-columns:1fr }
  .about-intro   { grid-template-columns:1fr; gap:48px }
  .footer-grid   { grid-template-columns:1fr 1fr }
}
@media (max-width:768px) {
  :root { --section:68px; --nav-h:68px }
  body { font-size:16.5px }
  .container, .method .container { padding:0 20px }
  .logo-text { font-size:21px }
  .logo-sub  { font-size:8.5px; letter-spacing:.28em }

  .hero { padding:calc(var(--nav-h) + 48px) 0 96px }
  .hero::before { background:linear-gradient(180deg, rgba(20,20,20,.7) 0%, rgba(20,20,20,.62) 100%) }
  .hero-content { padding-left:20px }
  .hero-actions, .band-cta-actions { flex-direction:column; align-items:stretch; gap:10px }
  .hero-phone, .band-phone { align-self:flex-start }
  .hero-pipes { font-size:14.5px }
  .hero-pipes span { margin:0 4px }

  .pres-cols { columns:1 }
  .big-u { display:none }
  /* Frise verticale */
  .timeline { grid-template-columns:1fr; gap:34px }
  .timeline::before { left:11px; right:auto; top:6px; bottom:6px; width:2px; height:auto; background:linear-gradient(180deg, var(--orange) 0 70%, rgba(241,156,65,.25) 100%) }
  .timeline li { padding-top:0; padding-left:50px }
  .situ-panel { padding:28px 22px 30px }
  .form-aside { grid-template-columns:1fr }
  .commitments { grid-template-columns:1fr; gap:28px }
  .band-cta { padding:72px 0 }
  .page-hero { min-height:280px; padding:44px 0 48px }
  .legal-table td { padding:11px 12px; font-size:14px }
  .legal-table td:first-child { width:42% }
  .legal-toc ol { columns:1 }
  .lexique-layout .legal-toc ol { columns:2; column-gap:20px }
  .lexique-layout .legal-toc a { font-size:14px; padding:5px 0 }
  .reassure-list { grid-template-columns:1fr }
  .reassure-list li { border-left:none; padding-left:0 }

  .partner-cell { width:96px; height:48px }
  .partner-logo { height:30px }
  .partner-logo[src*="henner"], .partner-logo[src*="modulassur"] { height:42px }

  .profile-index { display:none }
  .postes-table tbody th { width:34% }
  .page-hero { padding:52px 0 48px }
  .page-hero h1 { padding-left:18px }
  .page-hero p { padding-left:19px; font-size:17.5px }

  .form-section { padding-inline:0 }
  .form-header { padding:0 20px }
  .form-wrapper { border-radius:0; border-left:none; border-right:none }
  .progress-bar { padding:18px 20px }
  .progress-step span { display:none }
  .progress-line { margin-bottom:0 }
  .form-step { padding:30px 20px }
  .form-status { margin:0 20px }
  .form-row { grid-template-columns:1fr; gap:0 }
  .opt-list.opt-2, .opt-grid { grid-template-columns:1fr }
  .fc-row { flex-direction:column; align-items:stretch; gap:10px }
  .yn-group { min-width:0 }
  .form-success { padding:52px 24px }
  .confirm-steps { padding:24px 20px }
  .confirm-actions, .notfound-actions { flex-direction:column; align-items:stretch; gap:18px }
  .confirm-actions .btn, .notfound-actions .btn { width:100% }

  .footer-grid { grid-template-columns:1fr; gap:32px }
  .footer-bottom-inner span { margin-left:0; width:100% }
  .scroll-top { bottom:18px; right:18px }
  body.has-mobile-cta .scroll-top { bottom:calc(84px + env(safe-area-inset-bottom, 0px)) }

  /* Rappel d'action fixé en bas d'écran (mobile uniquement). */
  .mobile-cta:not([hidden]) {
    position:fixed; left:16px; right:16px; z-index:90;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    display:block; padding:14px 20px; text-align:center;
    background:var(--orange); color:var(--text); font-weight:600; font-size:15px;
    text-transform:uppercase; letter-spacing:.06em; border-radius:var(--pill);
    box-shadow:0 10px 26px -12px rgba(0,0,0,.5);
  }
}
@media (max-width:480px) {
  .form-nav { flex-direction:column-reverse; align-items:stretch }
  .form-nav .btn { width:100%; justify-content:center }
  .form-nav .btn-outline { padding:12px }
}
@media (max-width:420px) {
  .nav-phone .nav-phone-num { display:none }   /* l'icône suffit, le numéro est dans le hero */
}

/* ─── APPARITION AU DÉFILEMENT ────────────────────────────────────── */
/* Posée par main.js sur les blocs situés sous l'écran : sans JavaScript, tout reste visible. */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay, 0ms) }
.reveal.is-in { opacity:1; transform:none }
@media print { .reveal { opacity:1; transform:none } }

/* ─── MOUVEMENT RÉDUIT ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *, *::before, *::after { transition-duration:.001ms !important }
}

/* ─── IMPRESSION ──────────────────────────────────────────────────── */
@media print {
  .navbar, .scroll-top, .form-section, .mobile-cta, .hero-down { display:none !important }
  .hero, .method, .page-hero { background:#fff !important; color:#000 !important }
}

/* Champ piège anti-robot : hors écran, ignoré des lecteurs d'écran et du clavier. */
.hp-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }

/* ─── PAGES DÉDIÉES À UN PROFIL (mutuelle senior, mutuelle TNS) ──── */
.guide .legal-section { margin-bottom:56px }
.guide .legal-section h2 { font-family:var(--font-serif); font-size:clamp(24px,2.4vw,30px); font-weight:600; letter-spacing:-.014em; border-bottom:none; padding-bottom:0; margin-bottom:14px }
.guide .legal-section p, .guide .legal-section li { font-size:17px; line-height:1.72; max-width:68ch; color:var(--body) }
.guide .legal-section p { margin-bottom:16px }
.guide .legal-section ul { margin:0 0 16px; padding-left:22px }
.guide .legal-section li { margin-bottom:8px }
.guide .legal-section li::marker { color:var(--orange-tx) }
.guide-qa { padding:22px 0; border-top:1px solid var(--line) }
.guide-qa:last-child { border-bottom:1px solid var(--line) }
.guide-qa h3 { font-size:19px; font-weight:600; margin-bottom:8px }
.guide-qa p:last-child { margin-bottom:0 }
.guide-more { margin-top:8px; padding:20px 24px; background:var(--orange-soft); border-left:4px solid var(--orange); font-size:16.5px; line-height:1.6; max-width:68ch }
.guide-more a { font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px }

/* ─── L'ÉQUIPE (page Le cabinet) ─────────────────────────────────── */
.team { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:40px 36px; margin-top:28px }
.team-member { max-width:320px }
.team-photo { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; margin-bottom:18px; background:var(--paper-2) }
.team-member h3 { font-family:var(--font-serif); font-size:22px; font-weight:600; margin-bottom:4px }
.team-role { font-size:15px; font-weight:500; color:var(--orange-tx); margin-bottom:10px }
.team-bio { font-size:16px; line-height:1.6; color:var(--body) }
.team-empty { display:flex; align-items:center; justify-content:center; padding:18px; text-align:center; border:2px dashed var(--line-2); color:var(--muted); font-size:14.5px }
p.team-empty { min-height:0; margin-bottom:10px }

/* ─── RUBRIQUE « CONSEILS » : liste des articles et article ──────── */
.conseils-list { list-style:none; border-top:1px solid var(--line); max-width:900px }
.conseils-list li { border-bottom:1px solid var(--line) }
.conseils-list a { display:block; padding:30px 0 32px; color:inherit; text-decoration:none }
.conseil-date { display:block; font-size:14px; color:var(--muted); margin-bottom:8px }
.conseil-title { display:block; font-family:var(--font-serif); font-size:clamp(23px,2.4vw,29px); font-weight:600; line-height:1.2; color:var(--text); letter-spacing:-.014em; transition:color var(--ease) }
.conseil-excerpt { display:block; margin-top:10px; font-size:17px; line-height:1.6; color:var(--body); max-width:64ch }
.conseil-more { display:inline-block; margin-top:14px; font-size:15px; font-weight:600; color:var(--text); border-bottom:2px solid var(--orange); padding-bottom:1px }
.conseils-list a:hover .conseil-title { color:var(--orange-tx) }
.conseils-empty { font-size:17px; max-width:60ch }
.conseils-list--home { max-width:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 44px; border-top:none }
.conseils-list--home li { border-top:3px solid var(--orange); border-bottom:none }
.conseils-list--home a { padding:22px 0 0 }
.conseils-list--home .conseil-title { font-size:21px }
.conseils-list--home .conseil-excerpt { font-size:16px }
.home-conseils .split-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 32px; margin-bottom:36px }
.home-conseils .section-title { margin-bottom:0 }

.article-inner > * { max-width:800px }   /* même bord gauche que le titre et le logo */
.article-meta { font-size:14.5px; color:var(--muted); margin-bottom:30px }
.article-photo { margin:0 0 36px }
.article-photo img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }
.article-body p, .article-body li { font-size:18px; line-height:1.75; color:var(--body) }
.article-body p { margin-bottom:20px; max-width:68ch }
.article-body > p:first-child { font-size:19.5px; color:var(--text) }
.article-body h2 { font-family:var(--font-serif); font-size:clamp(24px,2.5vw,30px); font-weight:600; letter-spacing:-.014em; margin:44px 0 14px }
.article-body h3 { font-size:20px; margin:30px 0 10px }
.article-body ul { margin:0 0 20px; padding-left:22px; max-width:68ch }
.article-body li { margin-bottom:10px }
.article-body li::marker { color:var(--orange-tx) }
.article-body a { color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:3px }
.article-note { margin-top:36px; font-size:14px; color:var(--muted) }
.article-others { margin-top:48px; padding-top:28px; border-top:3px solid var(--orange) }
.article-others h2 { font-size:17px; font-weight:600; margin-bottom:14px }
.article-others ul { list-style:none }
.article-others li { margin-bottom:10px }
.article-others a { font-family:var(--font-serif); font-size:20px; font-weight:600; color:var(--text) }
.article-others a:hover { color:var(--orange-tx) }
.guide-articles { max-width:68ch; font-size:16.5px }
.article-guide { margin-top:36px }
@media (max-width: 900px) {
  .conseils-list--home { grid-template-columns:1fr; gap:28px }
}