/* Site public. La palette de marque (couleurs, rayons, easing) est déclarée
   dans tokens.css, chargé juste avant celui-ci par
   backend/templates/web/layout.php : ne rien redéclarer ici. */

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--l0); color:var(--on-dark);
  font-family:Verdana, Geneva, sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before, body::after { content:""; position:fixed; pointer-events:none; z-index:0; }
body::before { top:-18vw; left:-14vw; width:64vw; height:64vw;
  background:radial-gradient(circle, rgba(52,148,212,0.20), transparent 62%); }
body::after { bottom:-24vw; right:-16vw; width:60vw; height:60vw;
  background:radial-gradient(circle, rgba(124,164,44,0.15), transparent 62%); }
h1, h2, h3, h4 { margin:0; letter-spacing:-0.03em; line-height:1.1; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
img { display:block; }
button, input, select, textarea { font-family:Verdana, Geneva, sans-serif; }
dl, dt, dd { margin:0; }
::focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

.shell { position:relative; z-index:1; }
.wrap { width:100%; max-width:1320px; margin:0 auto; padding:0 clamp(18px, 4vw, 52px); }
.eyebrow { font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; }
.grad { background:linear-gradient(100deg, var(--blue-pale), var(--blue) 42%, var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--green); display:block; flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(124,164,44,0.22); }
/* Cabinet fermé : la pastille passe au bleu, comme dans la maquette (le JS y
   posait ces valeurs en style inline ; le rendu étant désormais côté serveur,
   c'est une classe). Sans cet état, une pastille verte accompagnerait le
   libellé « Fermé ». */
.dot.closed { background:var(--blue); box-shadow:0 0 0 4px rgba(52,148,212,0.22); }

/* ---------- barre de progression ---------- */
.progress { position:fixed; top:0; left:0; height:2px; width:100%; z-index:90; transform-origin:0 50%;
  transform:scaleX(0); background:linear-gradient(90deg, var(--blue), var(--green)); }

/* ---------- pilules et boutons ---------- */
.pill { display:inline-flex; align-items:center; gap:9px; border-radius:999px; padding:9px 16px;
  font-size:11px; letter-spacing:0.06em; border:1px solid var(--line);
  background:var(--l2); color:var(--on-dark-2); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  border:1px solid transparent; border-radius:999px; padding:15px 26px; font-size:12px;
  letter-spacing:0.05em; text-transform:uppercase; transition:transform 320ms var(--ease),
  box-shadow 320ms var(--ease), background 240ms var(--ease), border-color 240ms var(--ease), color 240ms var(--ease); }
.btn:hover { transform:translateY(-2px); }
.btn-blue { background:var(--blue-dk); color:var(--on-dark); box-shadow:0 14px 34px -14px rgba(52,148,212,0.85); }
.btn-blue:hover { background:var(--blue-dk-2); box-shadow:0 20px 46px -14px rgba(52,148,212,0.95); }
.btn-green { background:var(--green-dk); color:var(--on-dark); box-shadow:0 14px 34px -14px rgba(124,164,44,0.85); }
.btn-green:hover { background:var(--green-dk-2); }
.btn-ghost { border-color:var(--line-2); color:var(--on-dark); background:var(--l2); }
.btn-ghost:hover { border-color:var(--on-dark); background:rgba(255,255,255,0.09); }

/* ---------- en-tête en verre ---------- */
.nav { position:sticky; top:0; z-index:70; background:rgba(43,51,59,0.72);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-bottom:1px solid var(--line); }
/* Trois colonnes plutôt qu'un flex : les liens sont centrés sur la largeur de
   l'en-tête et non sur l'espace restant entre le logo et le téléphone. Les
   deux colonnes latérales valant 1fr, un logo plus large que le numéro ne
   décale plus le groupe de liens. */
.nav .row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:22px; padding:8px 0; }
.nav .row > a:first-child { justify-self:start; display:inline-flex; }
/* Logo de marque affiché dans ses couleurs (pas de filtre de blanchiment) :
   le vert et le bleu de la charte ressortent sur le verre sombre. On l'élève
   au-dessus de sa hauteur initiale (34 → 50px) tout en restant subordonné à
   la tuile héros `t-mark` (plafond 112px) : le logo est l'ancre de la barre,
   pas son sujet. */
.nav-mark { height:clamp(40px, 4.6vw, 50px); width:auto; }
.nav-links { display:flex; gap:4px; justify-self:center; background:var(--l2); border:1px solid var(--line);
  border-radius:999px; padding:4px; }
.nav-links a { padding:9px 16px; border-radius:999px; font-size:11.5px; color:var(--on-dark-3);
  transition:background 240ms var(--ease), color 240ms var(--ease); }
.nav-links a:hover { color:var(--on-dark); }
.nav-links a[aria-current="true"] { background:var(--w0); color:var(--l0); }
.nav-tel { display:inline-flex; align-items:center; gap:9px; justify-self:end;
  font-size:13px; letter-spacing:0.02em;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--l2);
  transition:border-color 240ms var(--ease), color 240ms var(--ease); }
.nav-tel:hover { color:var(--blue-pale); border-color:var(--line-2); }
.nav-tel svg { display:none; width:15px; height:15px; }

/* ---------- hero ---------- */
#accueil { position:relative; padding:clamp(52px, 8vh, 104px) 0 clamp(40px, 6vh, 76px); }
#accueil::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px circle at var(--mx, 30%) var(--my, 20%),
    rgba(52,148,212,0.16), transparent 62%); transition:opacity 400ms var(--ease); }
.hero-head { position:relative; display:flex; flex-direction:column; gap:clamp(22px, 3vw, 32px);
  max-width:920px; }
.hero-head > .pill { align-self:flex-start; }
.hero-head h1 { font-size:clamp(36px, 6.4vw, 78px); letter-spacing:-0.035em; }
.hero-head .lead { font-size:clamp(13.5px, 1.3vw, 15.5px); line-height:1.85; color:var(--on-dark-2);
  max-width:640px; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- bento ---------- */
.bento { margin-top:clamp(34px, 5vw, 60px); display:grid; gap:14px;
  grid-template-columns:1.35fr 1fr 1fr;
  grid-template-areas:
    "kpi mark dispo"
    "kpi zone dispo"; }
.tile { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--l1); padding:clamp(20px, 2.2vw, 30px); display:flex; flex-direction:column;
  transition:transform 420ms var(--ease), box-shadow 420ms var(--ease), border-color 420ms var(--ease); }
.tile:hover { transform:translateY(-4px); border-color:var(--line-2);
  box-shadow:0 28px 60px -30px rgba(0,0,0,0.7), 0 0 70px -34px rgba(52,148,212,0.55); }
.t-kpi { grid-area:kpi; gap:0; justify-content:space-between; }
.t-mark { grid-area:mark; align-items:center; justify-content:center; gap:18px; text-align:center;
  background:var(--l1) radial-gradient(circle at 50% 42%, rgba(52,148,212,0.20), transparent 66%); }
.t-mark img { height:clamp(78px, 9vw, 112px); width:auto; }
/* Légende de la tuile de marque : une phrase, donc ni capitales ni
   interlettrage d'intitulé — `.eyebrow` la rendait illisible sur trois
   lignes. */
.mark-zone { font-size:12.5px; line-height:1.75; color:var(--on-dark-2); max-width:32ch; }
.t-zone { grid-area:zone; gap:14px; }
.t-dispo { grid-area:dispo; gap:20px; justify-content:space-between; }
/* Logo dans la tuile horaires, sous la raison sociale. */
.dispo-mark { align-self:flex-start; height:26px; width:auto; }

.kpi { display:flex; align-items:baseline; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.kpi:first-of-type { border-top:none; padding-top:0; }
.kpi:last-of-type { padding-bottom:0; }
.kpi b { font-size:clamp(28px, 3.4vw, 42px); letter-spacing:-0.04em; line-height:1; flex:0 0 auto; }
.kpi b i { font-style:normal; font-size:0.44em; letter-spacing:0; margin-left:4px; color:var(--on-dark-3); }
.kpi span { font-size:12px; line-height:1.6; color:var(--on-dark-3); }
.zone-list { display:flex; flex-wrap:wrap; gap:6px; }
.zone-list span { font-size:11px; padding:6px 11px; border-radius:999px; background:var(--l2);
  border:1px solid var(--line); color:var(--on-dark-2); }
.dispo-status { display:flex; align-items:center; gap:11px; font-size:14.5px; letter-spacing:-0.01em; }
.dispo-hours { display:flex; flex-direction:column; gap:8px; }
.dispo-hours div { display:flex; justify-content:space-between; gap:14px; font-size:12px;
  color:var(--on-dark-3); }
.dispo-hours div.now { color:var(--on-dark); }

/* ---------- bandeau défilant ---------- */
.ticker { border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--l1); overflow:hidden; padding:15px 0;
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker-track { display:flex; gap:0; width:max-content; animation:slide 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-track span { display:inline-flex; align-items:center; gap:26px; padding:0 13px;
  font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-dark-3);
  white-space:nowrap; }
.ticker-track span::after { content:""; width:5px; height:5px; border-radius:50%;
  background:var(--green); display:block; flex:0 0 auto; }
@keyframes slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ---------- titres de section ---------- */
section { position:relative; }
.sect { padding:clamp(58px, 9vh, 110px) 0; }
.sect-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  flex-wrap:wrap; margin-bottom:clamp(26px, 3.4vw, 44px); }
.sect-head .l { display:flex; flex-direction:column; gap:16px; max-width:720px; }
.sect-head h2 { font-size:clamp(26px, 3.8vw, 46px); }
.sect-head .note { font-size:13px; line-height:1.8; color:var(--on-dark-3); max-width:330px; }
/* Un lien dans la note d'en-tête ne doit pas se fondre dans le gris du texte :
   il prend le bleu clair de la charte (lisible sur fond sombre) et se souligne
   au survol, l'écart de couleur seul ne suffisant pas à le signaler. */
.sect-head .note a { color:var(--blue-pale); }
.sect-head .note a:hover { text-decoration:underline; }

/* ---------- parcours de diagnostics ----------
   La carte est le sujet de la section, plus un bandeau : fond contrasté,
   pleine largeur et une seule question à l'écran. Le JS masque ses étapes
   par `[hidden]` (propriété DOM, pas classe), donc toute règle `display:`
   posée sur une classe battrait `[hidden]` à spécificité égale — on ré-arme
   la règle pour chaque conteneur que le JS ferme. */
.parcours {
  display: grid;
  gap: 22px;
  padding: clamp(22px, 4vw, 38px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--l1);
  margin-bottom: 28px;
}
.pc-head { display: grid; gap: 10px; }
.pc-head h3 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.9rem); }
.pc-head p { margin: 0; color: var(--on-dark-2); max-width: 62ch; }

/* Points de progression : la séquence peut s'allonger d'une question, un
   pourcentage reculerait sous les yeux du visiteur. */
.pc-points { display: flex; gap: 6px; margin-bottom: 14px; }
.pc-points span {
  width: 26px; height: 4px; border-radius: 2px;
  background: var(--line);
}
.pc-points span.fait { background: var(--green-t); }
.pc-points span.ici  { background: var(--blue-pale); }

.pc-fil { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pc-jeton {
  border: 1px solid var(--line); background: transparent; color: var(--on-dark-2);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .82rem;
  cursor: pointer;
}
.pc-jeton:hover, .pc-jeton:focus-visible { color: var(--on-dark); border-color: var(--blue-pale); }

.pc-q { border: 0; margin: 0; padding: 0; }
.pc-titre {
  display: block; padding: 0 0 14px; font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 600; color: var(--on-dark);
}
.pc-titre:focus-visible { outline: 2px solid var(--blue-pale); outline-offset: 4px; }

.pc-opts { display: flex; flex-wrap: wrap; gap: 10px; }
/* Radios natifs : navigation aux flèches et annonce correcte du groupe.
   L'input reste dans le flux (pas de display:none) pour rester focusable. */
.pc-opt { position: relative; }
.pc-opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.pc-opt span {
  display: block; padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--on-dark); background: var(--l2);
}
.pc-opt input:checked + span { border-color: var(--green-t); color: var(--on-dark); }
.pc-opt:hover span { border-color: var(--line-2); }
.pc-opt input:focus-visible + span { outline: 2px solid var(--blue-pale); outline-offset: 2px; }

.pc-sum { margin: 0 0 14px; color: var(--on-dark); }
.pc-lab {
  display: block; margin: 18px 0 8px; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--on-dark-2);
}
.pc-bloc { display: grid; gap: 8px; }
.pc-diag { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
/* Même convention que `.consent input` : sans `accent-color`, la case native
   se rend en widget clair sur le fond sombre du parcours. */
.pc-diag input { accent-color: var(--blue); width: 15px; height: 15px; flex: none; margin-top: 2px; }
.pc-diag span { color: var(--on-dark); }
.pc-diag em { display: block; font-style: normal; font-size: .82rem; color: var(--on-dark-2); }
.pc-alerte { margin: 10px 0 0; font-size: .85rem; color: var(--on-dark-2); }
.pc-plus { margin-top: 18px; }
.pc-plus summary { cursor: pointer; color: var(--on-dark-2); }
.pc-plus summary:hover { color: var(--on-dark); }
.pc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Bascule « Voir les N diagnostics » injectée par site.js au-dessus de la
   grille : un bouton large, aligné à gauche dans son flux, qui ne déborde
   pas sur la grille elle-même. */
.pc-tout {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--l2);
  color: var(--on-dark); padding: 11px 18px; font-size: 11.5px;
  letter-spacing: 0.04em; margin: 0 0 14px;
  transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease);
}
.pc-tout:hover { border-color: var(--blue-pale); color: var(--on-dark); }

/* Liserés dit pourquoi la carte est là : obligation = vert, conditionnel =
   bleu pâle, conforme à la palette du parcours. */
.cards .card[data-pc="obligatoire"] { border-color: var(--green-t); }
.cards .card[data-pc="possible"] { border-color: var(--blue-pale); }

/* Le JS pose `hidden` comme PROPRIÉTÉ, sans classe. La règle du navigateur
   `[hidden]{display:none}` pèse (0,1,0) : `.cards .card{display:flex}` la bat
   à spécificité égale, à l'ordre source, et les cartes « masquées » restaient
   affichées. Les sélecteurs ci-dessous pèsent plus lourd, ce qui suffit —
   pas de `!important`, qui battrait aussi les styles en ligne et interdirait
   toute animation d'apparition ultérieure. Même parade que `form[hidden]`,
   `.ferr[hidden]` et `#consent[hidden]` déjà dans ce fichier. */
/* Étape du formulaire : pile verticale aérée. Sans cette règle, les
   `<div data-etape>` sont en `display:block` et les enfants (`.fgrid`,
   `.fl`, `.summary`, `.consent`, boutons) se collent — un seul gap de
   `form { gap:22px }` ne suffit pas, il ne s'applique qu'aux enfants
   DIRECTS du `<form>`, c'est-à-dire aux étapes elles-mêmes. On choisit
   14px pour rester cohérent avec `.fgrid { gap:12px }` : un cran plus
   large qu'entre inputs d'une même rangée, un cran plus serré qu'entre
   étapes (22px), ce qui donne une hiérarchie lisible. */
[data-etape] { display:flex; flex-direction:column; gap:14px; }
/* Paire de boutons de navigation d'une étape (Précédent + Continuer /
   Précédent + Envoyer). Posés en colonne par `[data-etape]`, on les
   réaligne côte-à-côte ici : c'est la forme attendue du parcours —
   sinon ils s'empilent et l'utilisateur perd l'impression d'aller
   « d'une étape à l'autre ». */
.q-nav { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cards .card[hidden],
[data-etape][hidden],
.pc-serveur[hidden],
.pc-actions[hidden],
.pc-tout[hidden] { display: none; }

@media (max-width: 680px) {
  .pc-opts { flex-direction: column; }
  .pc-opt span { text-align: left; }
}

/* ---------- cartes prestations ---------- */
.cards { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(272px, 1fr)); }
.card { position:relative; text-align:left; cursor:pointer; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--l1); padding:24px;
  display:flex; flex-direction:column; gap:16px;
  transition:transform 420ms var(--ease), box-shadow 420ms var(--ease), border-color 420ms var(--ease); }
.card:hover { transform:translateY(-5px); border-color:var(--line-2);
  box-shadow:0 30px 62px -32px rgba(0,0,0,0.75), 0 0 74px -36px rgba(52,148,212,0.55); }
.card-top { display:flex; align-items:flex-start; gap:16px; }
.card-picto { flex:0 0 auto; width:60px; height:60px; border-radius:var(--r-md); background:var(--w1);
  display:flex; align-items:center; justify-content:center;
  transition:transform 420ms var(--ease), background 240ms var(--ease); }
.card:hover .card-picto { transform:scale(1.06); background:var(--w0); }
.card-picto img { height:34px; width:auto; }
.card-open { margin-left:auto; flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:none; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--on-dark-3); font-size:15px; line-height:1;
  transition:transform 380ms var(--ease), background 240ms var(--ease), color 240ms var(--ease); }
.card:hover .card-open { background:var(--blue); border-color:var(--blue); color:var(--on-dark); }
.card[data-expanded="true"] .card-open { transform:rotate(45deg); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.card h3 { font-size:16px; letter-spacing:-0.02em; }
.card .pour { font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--green-t);
  margin-top:8px; display:block; }
.card .desc { font-size:12.5px; line-height:1.7; color:var(--on-dark-3); }
.card-foot { margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex;
  align-items:center; justify-content:space-between; gap:12px; font-size:11.5px; color:var(--on-dark-3); }
.card-foot em { font-style:normal; color:var(--on-dark-2); }
.card-more { display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows 420ms var(--ease); }
.card[data-expanded="true"] .card-more { grid-template-rows:1fr; }
.card-more > div { min-height:0; display:flex; flex-direction:column; gap:14px; padding-top:2px; }
.card-more .sep { height:1px; background:var(--line); }
.card-more .q { font-size:12.5px; line-height:1.75; color:var(--on-dark-2); }
.point { display:grid; grid-template-columns:6px 1fr; gap:13px; align-items:start;
  font-size:12px; line-height:1.7; color:var(--on-dark-3); }
.point i { display:block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-top:7px; }
.tagrow { display:flex; gap:6px; flex-wrap:wrap; }
.tagrow span { font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:5px 10px;
  border-radius:999px; background:rgba(52,148,212,0.16); color:var(--blue-pale); }
.empty { border:1px dashed var(--line-2); border-radius:var(--r-lg); padding:44px; text-align:center;
  font-size:13px; color:var(--on-dark-3); }

/* ---------- bandes de rythme (avis, actualités) ----------
   Le thème est sombre de bout en bout : ces sections ne sont plus des aplats
   blancs, qui coupaient la page en deux et cassaient la charte, mais une bande
   creusée — un voile noir sur le fond du corps, ourlé d'un filet et teinté aux
   deux couleurs de la marque. Les cartes qu'elle contient restent en `--l1`,
   donc plus claires que la bande : la convention « une carte est un plan
   surélevé » vaut alors partout, à l'intérieur comme à l'extérieur. */
.band { background:
    radial-gradient(760px circle at 88% 0%, rgba(52,148,212,0.14), transparent 62%),
    radial-gradient(640px circle at 6% 100%, rgba(124,164,44,0.12), transparent 62%),
    linear-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0.20)),
    var(--l0);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0; margin-top:clamp(20px, 3vw, 40px); }
/* Deux bandes qui se suivent (avis puis actualités) forment un seul bloc :
   pas de filet ni d'arrondi entre elles. */
.band + .band { border-top:none; border-radius:0 0 var(--r-lg) var(--r-lg); margin-top:0; }
.band .eyebrow { color:var(--green-t); }

/* ---------- méthode ----------
   Bande sombre travaillée au dégradé de la marque (comme le hero), et non
   plus un aplat blanc : la section reste dans la continuité de l'accueil. */
#methode { border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:
    radial-gradient(760px circle at 12% 0%, rgba(52,148,212,0.18), transparent 62%),
    radial-gradient(640px circle at 88% 100%, rgba(124,164,44,0.16), transparent 62%),
    var(--l1); }
.steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; position:relative; }
.step::after { content:""; position:absolute; top:22px; left:44px; height:1px;
  width:calc(100% + 20px - 44px);
  background:linear-gradient(90deg, var(--line-2), rgba(255,255,255,0.04)); }
.step:last-child::after { display:none; }
.step { display:flex; flex-direction:column; gap:14px; position:relative; }
.step .n { width:44px; height:44px; border-radius:50%; background:var(--l2);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--on-dark-2);
  position:relative; z-index:1; transition:background 320ms var(--ease), color 320ms var(--ease),
  border-color 320ms var(--ease), box-shadow 320ms var(--ease); }
.step:first-child .n { background:linear-gradient(100deg, var(--blue), var(--green));
  border-color:transparent; color:var(--w0);
  box-shadow:0 12px 30px -12px rgba(52,148,212,0.85); }
.step h3 { font-size:15.5px; letter-spacing:-0.015em; }
.step p { font-size:12.5px; line-height:1.8; color:var(--on-dark-3); }

/* ---------- avis ---------- */
/* auto-fit plutôt que 3 colonnes fixes : le nombre de retours clients est
   piloté par le back-office, il n'est plus garanti égal à trois. */
.quotes { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; }
.quote { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--l1);
  padding:30px 28px; display:flex; flex-direction:column; gap:18px;
  transition:transform 420ms var(--ease), box-shadow 420ms var(--ease), border-color 420ms var(--ease); }
.quote:hover { transform:translateY(-4px); border-color:var(--line-2);
  box-shadow:0 26px 54px -30px rgba(0,0,0,0.75), 0 0 70px -34px rgba(52,148,212,0.45); }
.quote .mk { font-size:38px; line-height:0.7; color:var(--blue-pale); height:22px; }
.quote p { font-size:13px; line-height:1.85; color:var(--on-dark-2); flex:1; }
.quote .who { display:flex; flex-direction:column; gap:5px; padding-top:16px;
  border-top:1px solid var(--line); }
.quote .who b { font-size:12.5px; letter-spacing:-0.01em; color:var(--on-dark); }
.quote .who span { font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--on-dark-3); }

/* ---------- contact ---------- */
.fcard { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--l1);
  padding:clamp(24px, 3.4vw, 46px); display:grid; grid-template-columns:1.35fr 1fr;
  gap:clamp(26px, 3.4vw, 48px); align-items:start; }
.fside { display:flex; flex-direction:column; gap:26px; position:sticky; top:100px; }
.fside h2 { font-size:clamp(24px, 3vw, 36px); }
.fside p { font-size:13px; line-height:1.85; color:var(--on-dark-2); }
.coord { display:flex; flex-direction:column; gap:2px; }
.coord a, .coord span.v { display:flex; flex-direction:column; gap:5px; padding:15px 0;
  border-top:1px solid var(--line); }
.coord dt { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-dark-3); }
.coord dd { font-size:14px; letter-spacing:-0.01em; }
.coord a:hover dd { color:var(--blue-pale); }

form { display:flex; flex-direction:column; gap:22px; }
form[hidden] { display:none; }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fl { position:relative; }
.fl input, .fl select, .fl textarea { width:100%; border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--l2); color:var(--on-dark); font-size:13px; padding:25px 15px 11px;
  outline:none; transition:border-color 240ms var(--ease), background 240ms var(--ease); }
.fl textarea { resize:vertical; min-height:96px; line-height:1.7; }
.fl label { position:absolute; left:16px; top:17px; font-size:12px; color:var(--on-dark-3);
  pointer-events:none; transition:transform 240ms var(--ease), font-size 240ms var(--ease),
  color 240ms var(--ease); transform-origin:0 0; }
.fl input:focus, .fl select:focus, .fl textarea:focus { border-color:var(--blue);
  background:rgba(52,148,212,0.09); }
.fl input:focus ~ label, .fl textarea:focus ~ label,
.fl input:not(:placeholder-shown) ~ label, .fl textarea:not(:placeholder-shown) ~ label,
.fl select ~ label { transform:translateY(-9px) scale(0.78); color:var(--blue-pale); }
.fl textarea ~ label { top:16px; }
.chiprow { display:flex; gap:8px; flex-wrap:wrap; }
.chip { cursor:pointer; border-radius:999px; border:1px solid var(--line); background:var(--l2);
  color:var(--on-dark-2); padding:11px 16px; font-size:11.5px;
  transition:background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease); }
.chip:hover { border-color:var(--line-2); color:var(--on-dark); }
.chip[aria-pressed="true"] { background:rgba(52,148,212,0.20); border-color:var(--blue);
  color:var(--on-dark); }
.chip[aria-pressed="true"]::before { content:"\2713\00a0\00a0"; color:var(--green); }
.field-lab { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-dark-3);
  display:block; margin-bottom:11px; }
.summary { border:1px solid var(--line); border-radius:var(--r-md); background:var(--l2);
  padding:16px 18px; display:flex; flex-direction:column; gap:9px; }
.summary .k { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-dark-3); }
.summary .v { font-size:12.5px; line-height:1.7; color:var(--on-dark); }
.consent { display:flex; gap:12px; align-items:flex-start; font-size:11.5px; line-height:1.7;
  color:var(--on-dark-3); cursor:pointer; }
.consent input { margin-top:2px; accent-color:var(--blue); width:15px; height:15px; }
.ferr { font-size:12px; line-height:1.6; color:#FFC1A8; padding:10px 14px; border-radius:var(--r-md);
  background:rgba(255,90,90,0.10); border:1px solid rgba(255,120,90,0.35); }
.ferr[hidden] { display:none; }
.hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.sent { display:flex; flex-direction:column; gap:18px; padding:14px 0; }
.sent[hidden] { display:none; }
.sent .ok { width:46px; height:46px; border-radius:50%; background:var(--green); display:flex;
  align-items:center; justify-content:center; box-shadow:0 14px 34px -12px rgba(124,164,44,0.85); }
.sent h3 { font-size:22px; }
.sent p { font-size:13px; line-height:1.85; color:var(--on-dark-2); }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--line); padding:clamp(44px, 6vw, 70px) 0 130px;
  background:radial-gradient(60% 100% at 50% 100%, rgba(124,164,44,0.10), transparent 70%); }
.fcols img { height:26px; width:auto; filter:brightness(0) invert(1); margin-bottom:18px; }
.fcols p { font-size:12px; line-height:1.8; color:var(--on-dark-3); max-width:340px; }
.fcol h4 { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--on-dark-3);
  margin-bottom:16px; }
.fcol a, .fcol span { display:block; font-size:12.5px; line-height:2.1; color:var(--on-dark-2); }
.fcol a:hover { color:var(--blue-pale); }
.fbar { border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between;
  gap:22px; flex-wrap:wrap; font-size:11px; color:var(--on-dark-3); }
.fbar div { display:flex; gap:20px; }

/* ---------- dock flottant ---------- */
.dock { position:fixed; z-index:75; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; align-items:center; gap:5px; padding:7px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(43,51,59,0.80);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.85); max-width:calc(100vw - 24px); }
.dock a { display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius:999px;
  font-size:11.5px; color:var(--on-dark-3); white-space:nowrap;
  transition:background 240ms var(--ease), color 240ms var(--ease); }
.dock a svg { width:16px; height:16px; flex:0 0 auto; }
.dock a:hover { color:var(--on-dark); background:var(--l2); }
.dock a[aria-current="true"] { background:var(--w0); color:var(--l0); }
.dock .cta { background:var(--green-dk); color:var(--on-dark); }
.dock .cta:hover { background:var(--green-dk-2); color:var(--on-dark); }
.dock .lab { display:inline; }

/* ---------- consentement ---------- */
#consent { position:fixed; bottom:96px; left:50%; transform:translateX(-50%); z-index:80;
  max-width:min(560px, calc(100vw - 32px));
  border:1px solid var(--line-2); background:rgba(43,51,59,0.94);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-radius:var(--r-lg); padding:18px 20px;
  display:flex; align-items:flex-start; gap:14px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.85); }
#consent[hidden] { display:none; }
#consent strong { display:block; font-size:12px; letter-spacing:0.04em; color:var(--on-dark); margin-bottom:4px; }
#consent p { font-size:12px; line-height:1.6; color:var(--on-dark-2); margin:0; }
.consent-actions { display:flex; gap:8px; flex-shrink:0; }
.consent-actions .btn { padding:10px 18px; font-size:11px; }

/* ---------- révélation ---------- */
html.anim .reveal { opacity:0; transform:translateY(20px);
  transition:opacity 760ms var(--ease), transform 760ms var(--ease); }
html.anim .reveal.in { opacity:1; transform:none; }

/* ---------- grille actualités (et fiches) ---------- */
.news-grid { display:grid; gap:14px; grid-template-columns:repeat(3, 1fr); }
.news-card { display:flex; flex-direction:column; gap:14px; padding:24px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--l1);
  color:var(--on-dark);
  transition:transform 420ms var(--ease), box-shadow 420ms var(--ease), border-color 420ms var(--ease); }
.news-card:hover { transform:translateY(-4px); border-color:var(--line-2);
  box-shadow:0 26px 54px -30px rgba(0,0,0,0.75), 0 0 70px -34px rgba(52,148,212,0.45); }
/* Aplat vert très dilué : au-delà de 0.12 d'opacité le fond remonte assez pour
   faire tomber `--green-t` sous le 4.5:1 exigé par un libellé de 10 px. */
.news-card .cat { align-self:flex-start; font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; background:rgba(124,164,44,0.12); color:var(--green-t); }
.news-card h3 { font-size:15.5px; letter-spacing:-0.015em; line-height:1.25; color:var(--on-dark); }
.news-card .date { font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--on-dark-3); }
.news-card p { font-size:12.5px; line-height:1.7; color:var(--on-dark-2); }
.news-card .more { margin-top:auto; font-size:11.5px; letter-spacing:0.04em; color:var(--blue-pale); }
.news-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:32px; }
.news-pager .btn { padding:11px 18px; font-size:11px; }
.news-page-info { font-size:12px; color:var(--on-dark-3); }
/* Article : le corps vient de l'éditeur riche du BO (HTML assaini côté
   serveur). Chaque balise de la whitelist doit avoir un style ici, sinon
   l'article se dégrade en texte brut mal espacé. */
.news-article { max-width:760px; display:flex; flex-direction:column; gap:22px; }
.news-article p { font-size:14px; line-height:1.85; color:var(--on-dark-2); }
.news-article h2 { font-size:clamp(20px,2.4vw,26px); letter-spacing:-0.02em; line-height:1.25; margin-top:10px; }
.news-article h3 { font-size:clamp(17px,2vw,20px); letter-spacing:-0.01em; line-height:1.3; }
.news-article h4 { font-size:15px; letter-spacing:0.01em; }
.news-article ul, .news-article ol { padding-left:24px; display:flex; flex-direction:column; gap:8px;
  font-size:14px; line-height:1.8; color:var(--on-dark-2); }
.news-article li::marker { color:var(--blue-pale); }
.news-article blockquote { border-left:2px solid var(--blue); padding:4px 0 4px 18px;
  font-size:15px; line-height:1.8; color:var(--on-dark); }
.news-article a { color:var(--blue-pale); text-decoration:underline; text-underline-offset:3px; }
.news-article a:hover { color:var(--on-dark); }
.news-article strong { color:var(--on-dark); }
.news-article mark { background:rgba(52,148,212,0.24); color:var(--on-dark); padding:0 3px; border-radius:3px; }
.news-article code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px;
  background:var(--l1); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
.news-article pre { background:var(--l1); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px; overflow-x:auto; font-size:12.5px; line-height:1.7; }
.news-article pre code { background:transparent; border:0; padding:0; }
.news-article hr { border:0; border-top:1px solid var(--line); width:100%; }
.news-article img { max-width:100%; height:auto; border-radius:var(--r-md); }
/* Tableau : pleine largeur de la colonne de texte. En `display:block` les
   cellules ne s'étirent plus, d'où `table-layout:fixed` en desktop ; le
   passage en bloc (scroll horizontal) est réservé au mobile, où un tableau
   large déborderait la page. */
.news-article table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px; }
.news-article th, .news-article td { border:1px solid var(--line); padding:9px 12px; text-align:left;
  vertical-align:top; line-height:1.6; color:var(--on-dark-2); }
.news-article th { background:var(--l1); color:var(--on-dark); font-weight:bold;
  font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; }
.news-back { margin-top:24px; }

/* ---------- réactif ---------- */
@media (max-width:1180px) {
  .bento { grid-template-columns:1fr 1fr;
    grid-template-areas:
      "kpi  mark"
      "kpi  dispo"
      "zone dispo"; }
  .fcard { grid-template-columns:1fr; }
  /* En une seule colonne, la colonne de gauche ne doit plus être collante :
     sinon elle reste figée pendant que le formulaire défile et les deux
     textes se superposent. */
  .fside { position:static; top:auto; }
  .steps { grid-template-columns:1fr 1fr; row-gap:34px; }
  .step::after { display:none; }
  .fcols { grid-template-columns:1fr 1fr; }
  .news-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .nav-links { display:none; }
  .bento { grid-template-columns:1fr;
    grid-template-areas: "kpi" "mark" "dispo" "zone"; }
  .t-mark { min-height:220px; }
}
@media (max-width:680px) {
  .steps { grid-template-columns:1fr; }
  .fgrid { grid-template-columns:1fr; }
  .fcols { grid-template-columns:1fr; }
  .nav-tel span.num { display:none; }
  .nav-tel svg { display:block; }
  .nav-mark { height:clamp(34px, 6vw, 42px); }
  .dock a { padding:12px 14px; }
  .dock .cta .lab { display:inline; }
  .sect-head .note { max-width:none; }
  .news-grid { grid-template-columns:1fr; }
  /* Un tableau d'article ne peut pas rétrécir indéfiniment : il défile
     horizontalement au lieu de pousser la page. */
  .news-article table { display:block; overflow-x:auto; table-layout:auto; }
  #consent { bottom:88px; padding:14px 16px; flex-direction:column; }
  .consent-actions { width:100%; }
}
@media (max-width:520px) {
  .cards { grid-template-columns:1fr; }
  .card { padding:20px; }
  .tile { padding:20px; }
  .dock { bottom:12px; gap:2px; padding:6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .ticker-track { animation:none; transform:none; }
  #accueil::before { display:none; }
  .btn:hover, .tile:hover, .card:hover, .quote:hover, .news-card:hover { transform:none; }
}