/* =========================================================
   Syllodi Nuisibles IDF — Design system
   Mobile-first · WCAG 2.2 AA · aucune dépendance externe
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Bleu — confiance, expertise */
  --bleu-900:#0a2540; --bleu-800:#0d3357; --bleu-700:#0f4c81;
  --bleu-600:#1565c0; --bleu-100:#dbeafe; --bleu-50:#eff6fc;
  /* Vert — action, résultat (blanc sur vert-600 = 5.3:1) */
  --vert-700:#075c40; --vert-600:#0a7350; --vert-500:#0f9d68;
  --vert-50:#e8f6f0;
  /* Urgence (blanc sur orange-600 = 5.1:1) */
  --orange-600:#c2410c; --orange-50:#fff3ed;
  /* Neutres */
  --gris-900:#111827; --gris-700:#374151; --gris-600:#4b5563;
  --gris-400:#9ca3af; --gris-300:#d1d5db; --gris-200:#e5e7eb;
  --gris-100:#f3f4f6; --gris-50:#f9fafb; --blanc:#fff;

  --texte:var(--gris-900); --texte-doux:var(--gris-700);
  --fond:var(--blanc); --fond-alt:var(--gris-50); --bordure:var(--gris-200);

  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --ombre-sm:0 1px 2px rgba(10,37,64,.06),0 1px 3px rgba(10,37,64,.08);
  --ombre:0 4px 6px -1px rgba(10,37,64,.08),0 2px 4px -2px rgba(10,37,64,.06);
  --ombre-lg:0 12px 24px -6px rgba(10,37,64,.12),0 4px 8px -4px rgba(10,37,64,.08);

  --max:1200px; --max-texte:70ch;
  --esp:clamp(3rem,7vw,5.5rem);
  --police:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --header-h:64px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* overflow-x doit rester sur <html> : posé sur <body>, il transforme body en
   conteneur de défilement et scroll-padding-top cesse de s'appliquer — les ancres
   atterrissent alors sous l'en-tête collant. */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
  overflow-x:hidden;
}
body{
  font-family:var(--police);font-size:1rem;line-height:1.65;
  color:var(--texte);background:var(--fond);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul,ol{padding:0;list-style:none}
a{color:var(--bleu-700);text-underline-offset:.2em}
a:hover{color:var(--bleu-600)}
h1,h2,h3,h4{line-height:1.2;text-wrap:balance;font-weight:800;color:var(--bleu-900)}
p,li{text-wrap:pretty}
:where(h1){font-size:clamp(1.85rem,1.2rem + 2.6vw,3.1rem);letter-spacing:-.02em}
:where(h2){font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);letter-spacing:-.015em}
:where(h3){font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem)}
:where(h4){font-size:1.05rem}

/* L'attribut [hidden] doit toujours l'emporter : une classe posant `display`
   (.btn, .carte…) écrase sinon la règle `[hidden]{display:none}` du navigateur,
   et l'élément reste visible alors que le script le croit masqué. */
[hidden]{display:none!important}

/* Accessibilité : focus toujours visible (WCAG 2.2 – 2.4.11/2.4.13) */
:focus-visible{outline:3px solid var(--bleu-600);outline-offset:2px;border-radius:2px}
.saut-contenu{
  position:absolute;left:.5rem;top:-4rem;z-index:2000;
  background:var(--bleu-900);color:#fff;padding:.75rem 1.25rem;
  border-radius:var(--r);font-weight:700;transition:top .15s;
}
.saut-contenu:focus{top:.5rem;color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- 3. Layout ---------- */
.conteneur{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:1.15rem}
@media(min-width:768px){.conteneur{padding-inline:2rem}}
.section{padding-block:var(--esp)}
.section--alt{background:var(--fond-alt)}
.section--bleu{background:var(--bleu-900);color:#e8eef6}
.section--bleu h2,.section--bleu h3{color:#fff}
.section--bleu p{color:#c7d5e6}
.mesure{max-width:var(--max-texte)}
.grille{display:grid;gap:1.25rem}
/* Un enfant de grille vaut min-width:auto par défaut : il refuse de descendre
   sous la largeur minimale de son contenu. Un tableau en overflow-x:auto compte
   malgré tout sa largeur intrinsèque, et la colonne s'élargit jusqu'à déborder
   l'écran — l'article du blog défilait de 130 px sur le côté. min-width:0 rend
   la réduction possible ; le tableau reprend alors son propre défilement. */
.grille>*{min-width:0}
.tableau-scroll{min-width:0}
@media(min-width:640px){.grille--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .grille--3{grid-template-columns:repeat(3,1fr)}
  .grille--4{grid-template-columns:repeat(4,1fr)}
  .grille--2-1{grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:start}
}
.entete-section{max-width:62ch;margin-bottom:2.25rem}
.entete-section p{color:var(--texte-doux);margin-top:.75rem;font-size:1.05rem}
/* Déclaré après .section--bleu p, cette règle l'écraserait à specificité égale :
   on rétablit explicitement la couleur claire (sinon 1,4:1 sur le fond marine). */
.section--bleu .entete-section p{color:#c7d5e6}
.entete-section--centre{margin-inline:auto;text-align:center}

/* ---------- 4. Éléments ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--vert-700);background:var(--vert-50);
  padding:.4rem .85rem;border-radius:var(--r-full);margin-bottom:1rem;
}
.kicker--urgence{color:var(--orange-600);background:var(--orange-50)}
.kicker--clair{color:#8fe3c0;background:rgba(15,157,104,.16)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.6rem;border-radius:var(--r);font-weight:700;font-size:1rem;
  text-decoration:none;border:2px solid transparent;
  transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;
  min-height:48px; /* cible tactile WCAG 2.2 – 2.5.8 */
  text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--vert{background:var(--vert-600);color:#fff;box-shadow:var(--ombre)}
.btn--vert:hover{background:var(--vert-700);color:#fff;box-shadow:var(--ombre-lg)}
.btn--bleu{background:var(--bleu-700);color:#fff}
.btn--bleu:hover{background:var(--bleu-800);color:#fff}
.btn--orange{background:var(--orange-600);color:#fff}
.btn--orange:hover{background:#9a3412;color:#fff}
.btn--fantome{border-color:var(--bleu-700);color:var(--bleu-700);background:transparent}
.btn--fantome:hover{background:var(--bleu-50)}
.btn--blanc{background:#fff;color:var(--bleu-900)}
.btn--blanc:hover{background:var(--bleu-50);color:var(--bleu-900)}
.btn--bloc{width:100%}
.btn--lg{padding:1.05rem 2rem;font-size:1.08rem;min-height:56px}
.btn-groupe{display:flex;flex-wrap:wrap;gap:.75rem}

.carte{
  background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-lg);
  padding:1.5rem;box-shadow:var(--ombre-sm);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.carte h3{margin-bottom:.5rem}
.carte p{color:var(--texte-doux);font-size:.97rem}
a.carte,.carte--lien{text-decoration:none;color:inherit;display:block}
a.carte:hover,.carte--lien:hover{box-shadow:var(--ombre-lg);transform:translateY(-3px);border-color:var(--bleu-100)}
.carte__icone{
  width:58px;height:58px;border-radius:var(--r);background:var(--bleu-50);
  color:var(--bleu-700);
  display:grid;place-items:center;margin-bottom:1rem;
}
.carte__icone svg{width:32px;height:32px;stroke-width:1.7}
.carte__meta{
  font-size:.83rem;font-weight:700;color:var(--vert-700);margin-top:.9rem;
  display:flex;align-items:center;gap:.35rem;
}
.carte__meta svg{flex:none}
.carte--urgence{border-left:4px solid var(--orange-600)}

.liste-check{display:grid;gap:.7rem}
.liste-check li{position:relative;padding-left:2rem;color:var(--texte-doux)}
.liste-check li::before{
  content:"";position:absolute;left:0;top:.42em;width:1.15rem;height:1.15rem;
  background:var(--vert-50);border-radius:var(--r-full);
}
.liste-check li::after{
  content:"";position:absolute;left:.34rem;top:.72em;width:.42rem;height:.2rem;
  border-left:2px solid var(--vert-600);border-bottom:2px solid var(--vert-600);
  transform:rotate(-45deg);
}
.liste-croix li::before{background:var(--orange-50)}
.liste-croix li::after{
  content:"×";border:0;left:.42rem;top:.05em;width:auto;height:auto;
  color:var(--orange-600);font-weight:800;font-size:1rem;transform:none;
}
.liste-puces li{position:relative;padding-left:1.4rem;color:var(--texte-doux);margin-bottom:.55rem}
.liste-puces li::before{content:"";position:absolute;left:.35rem;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--bleu-600)}

/* ---------- 5. Header ---------- */
.entete{
  position:sticky;top:0;z-index:900;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--bordure);
}
.entete__barre{display:flex;align-items:center;gap:1rem;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:800;color:var(--bleu-900);font-size:1.1rem;letter-spacing:-.02em;white-space:nowrap}
.logo svg{flex:none}
.logo span small{display:block;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--vert-700);line-height:1}
/* La baseline est en nowrap : elle impose au logo une largeur incompressible de
   295 px. Sous 480 px, le bouton menu se retrouve alors hors écran — le visiteur
   ne peut plus ouvrir la navigation, et la page défile latéralement. On efface
   la baseline sur mobile : le H1 juste en dessous dit déjà la même chose.
   min-width:0 reste en garde-fou, pour qu'aucun contenu futur ne puisse
   repousser le bouton menu hors de l'écran. */
.logo{min-width:0}
.logo span{min-width:0}
@media(max-width:479px){.logo span small{display:none}}
.nav{margin-left:auto;display:none}
.nav ul{display:flex;align-items:center;gap:.2rem}
.nav a{
  display:block;padding:.55rem .8rem;border-radius:var(--r-sm);
  font-weight:600;font-size:.95rem;color:var(--gris-700);text-decoration:none;
}
.nav a:hover,.nav a[aria-current]{color:var(--bleu-700);background:var(--bleu-50)}
.entete__actions{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.tel-entete{
  display:none;align-items:center;gap:.5rem;font-weight:800;color:var(--bleu-900);
  text-decoration:none;font-size:1.02rem;white-space:nowrap;padding:.4rem .6rem;border-radius:var(--r-sm);
}
.tel-entete:hover{background:var(--bleu-50);color:var(--bleu-900)}
.tel-entete svg{color:var(--vert-600)}
.burger{
  display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-sm);
  border:1px solid var(--bordure);color:var(--bleu-900);flex:none;
}
.burger:hover{background:var(--gris-100)}
/* Le CTA de l'en-tête ne doit jamais passer à la ligne ni faire grandir la barre. */
.entete__actions .btn{white-space:nowrap;padding-inline:1.1rem}
/* Sous 640 px, la barre d'action fixe en bas assure déjà Appeler + WhatsApp :
   on retire le CTA de l'en-tête pour laisser respirer logo et menu. */
@media(max-width:639px){.entete__actions .btn--vert{display:none}}
@media(min-width:1024px){
  .nav{display:block}
  .burger{display:none}
  .tel-entete{display:inline-flex}
  .nav+.entete__actions{margin-left:1rem}
}
/* sous-menu */
.nav li.a-sousmenu{position:relative}
.nav .sousmenu{
  position:absolute;top:calc(100% + .35rem);left:0;min-width:250px;
  background:#fff;border:1px solid var(--bordure);border-radius:var(--r);
  box-shadow:var(--ombre-lg);padding:.5rem;display:none;flex-direction:column;gap:.1rem;
}
.nav li.a-sousmenu:hover .sousmenu,.nav li.a-sousmenu:focus-within .sousmenu{display:flex}
.nav .sousmenu a{padding:.55rem .7rem;font-weight:600;font-size:.93rem}
.nav__fleche{margin-left:.25rem;opacity:.6}
/* menu mobile */
.menu-mobile{
  position:fixed;inset:var(--header-h) 0 0;background:#fff;z-index:899;
  overflow-y:auto;padding:1.25rem 1.15rem 6rem;
  transform:translateX(100%);transition:transform .22s ease;visibility:hidden;
}
.menu-mobile[data-ouvert]{transform:translateX(0);visibility:visible}
/* Menu fermé : retiré de la page, pour que le téléphone ne télécharge pas ses
   8 vignettes au chargement (vitesse). L'ouverture garde son glissement. */
.menu-mobile{transition:transform .22s ease,visibility .22s,display .22s allow-discrete}
.menu-mobile:not([data-ouvert]){display:none}
@starting-style{.menu-mobile[data-ouvert]{transform:translateX(100%)}}
.menu-mobile h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gris-600);margin:1.5rem 0 .5rem}
.menu-mobile h2:first-child{margin-top:0}
.menu-mobile a{display:block;padding:.8rem .25rem;border-bottom:1px solid var(--gris-100);font-weight:600;text-decoration:none;color:var(--gris-900)}
.menu-mobile .btn{margin-top:1.5rem}
body[data-menu-ouvert]{overflow:hidden}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;background:
    radial-gradient(1000px 500px at 12% -8%,rgba(21,101,192,.28),transparent 60%),
    radial-gradient(800px 420px at 92% 8%,rgba(15,157,104,.22),transparent 62%),
    linear-gradient(155deg,var(--bleu-900) 0%,var(--bleu-800) 55%,#0b3a63 100%);
  color:#fff;padding-block:clamp(2.5rem,6vw,4.5rem);overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:26px 26px;
}
.hero__grille{display:grid;gap:2.5rem;position:relative;z-index:1}
@media(min-width:960px){.hero__grille{grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}}
.hero h1{color:#fff}
.hero__accroche{font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);color:#c7d5e6;margin-top:1.1rem;max-width:56ch}
.hero__preuves{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.puce-preuve{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  padding:.45rem .85rem;border-radius:var(--r-full);color:#e8eef6;
}
.puce-preuve svg{color:#5fd7a6;flex:none}
.hero .btn-groupe{margin-top:1.9rem}
/* Bouton secondaire lisible sur le fond bleu foncé du haut de page */
.hero .btn-groupe .btn--fantome{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-groupe .btn--fantome:hover{background:rgba(255,255,255,.1);color:#fff}
.hero__chiffres{display:flex;flex-wrap:wrap;gap:2rem;margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.15)}
.chiffre b{display:block;font-size:1.75rem;font-weight:800;color:#fff;line-height:1.1}
.chiffre span{font-size:.83rem;color:#a8bdd4}

/* ---------- 7. Formulaire ---------- */
.bloc-form{background:#fff;border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--ombre-lg);color:var(--texte)}
@media(min-width:480px){.bloc-form{padding:1.85rem}}
.bloc-form h2,.bloc-form h3{font-size:1.3rem;color:var(--bleu-900)}
.bloc-form__sous{font-size:.9rem;color:var(--texte-doux);margin:.4rem 0 1.25rem}
.champ{margin-bottom:.95rem}
.champ label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.35rem;color:var(--gris-900)}
.champ .req{color:var(--orange-600)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:.8rem .9rem;border:1.5px solid var(--gris-300);border-radius:var(--r);
  background:#fff;font-size:1rem;min-height:48px;transition:border-color .12s,box-shadow .12s;
}
.champ textarea{min-height:96px;resize:vertical}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--gris-400)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--bleu-600);box-shadow:0 0 0 3px var(--bleu-100);
}
.champ input[aria-invalid="true"],.champ select[aria-invalid="true"]{border-color:var(--orange-600)}
.champ__erreur{display:none;color:#9a3412;font-size:.83rem;font-weight:600;margin-top:.3rem}
.champ__erreur[data-visible]{display:block}
.champ--duo{display:grid;gap:.95rem}
@media(min-width:520px){.champ--duo{grid-template-columns:1fr 1fr}}
.form__rgpd{font-size:.78rem;color:var(--gris-600);margin-top:.9rem;line-height:1.5}
.form__rgpd a{color:var(--bleu-700)}
.form__consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:.5rem}
.form__consent input{width:24px;height:24px;min-height:0;margin-top:.1rem;flex:none;accent-color:var(--vert-600)}
.form__consent label{font-size:.8rem;font-weight:400;color:var(--gris-600);line-height:1.45}
/* pot de miel anti-spam : invisible mais accessible aux robots */
.pot-de-miel{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-alerte{padding:.85rem 1rem;border-radius:var(--r);font-size:.9rem;font-weight:600;margin-bottom:1rem;display:none}
.form-alerte[data-visible]{display:block}
.form-alerte--ok{background:var(--vert-50);color:var(--vert-700);border:1px solid #a7e0c8}
.form-alerte--ko{background:var(--orange-50);color:#9a3412;border:1px solid #fdba8c}
.form__envoi[aria-busy="true"]{opacity:.65;pointer-events:none}

/* ---------- 8. Étapes / process ---------- */
.etapes{counter-reset:etape;display:grid;gap:1.15rem}
@media(min-width:900px){.etapes--ligne{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.etape{position:relative;background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg);padding:1.4rem 1.4rem 1.4rem 1.4rem}
.etape::before{
  counter-increment:etape;content:counter(etape);
  display:grid;place-items:center;width:38px;height:38px;margin-bottom:.9rem;
  background:var(--bleu-700);color:#fff;border-radius:var(--r-full);font-weight:800;font-size:1.02rem;
}
.etape h3{font-size:1.08rem;margin-bottom:.45rem}
.etape p{font-size:.94rem;color:var(--texte-doux)}
.etape__duree{display:inline-block;margin-top:.8rem;font-size:.78rem;font-weight:700;color:var(--vert-700);background:var(--vert-50);padding:.25rem .65rem;border-radius:var(--r-full)}

/* ---------- 9. FAQ ---------- */
.faq{display:grid;gap:.7rem;max-width:80ch}
.faq details{background:#fff;border:1px solid var(--bordure);border-radius:var(--r);overflow:hidden}
.faq details[open]{border-color:var(--bleu-100);box-shadow:var(--ombre-sm)}
.faq summary{
  padding:1.05rem 3rem 1.05rem 1.15rem;font-weight:700;cursor:pointer;position:relative;
  list-style:none;color:var(--bleu-900);min-height:48px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;width:.6rem;height:.6rem;
  border-right:2.5px solid var(--bleu-600);border-bottom:2.5px solid var(--bleu-600);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{background:var(--bleu-50)}
.faq__reponse{padding:0 1.15rem 1.15rem;color:var(--texte-doux);font-size:.97rem}

/* ---------- 10. Bandeaux CTA ---------- */
.bandeau-cta{
  background:linear-gradient(135deg,var(--bleu-800),var(--bleu-700));
  color:#fff;border-radius:var(--r-xl);padding:2rem 1.5rem;text-align:center;
}
@media(min-width:768px){.bandeau-cta{padding:2.75rem 3rem}}
.bandeau-cta h2{color:#fff;font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem)}
.bandeau-cta p{color:#c7d5e6;margin:.75rem auto 1.6rem;max-width:60ch}
.bandeau-cta .btn-groupe{justify-content:center}
.bandeau-cta--urgence{background:linear-gradient(135deg,#9a3412,var(--orange-600))}
.bandeau-cta--urgence p{color:#fff3ee}

/* ---------- 11. Témoignages ---------- */
.avis{background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg);padding:1.4rem;display:flex;flex-direction:column;gap:.85rem}
.avis__notes{display:flex;gap:.12rem;color:#e8a317}
.avis blockquote{font-size:.97rem;color:var(--texte-doux);font-style:normal}
.avis__auteur{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.6rem;border-top:1px solid var(--gris-100)}
.avis__pastille{width:38px;height:38px;border-radius:var(--r-full);background:var(--bleu-50);color:var(--bleu-700);display:grid;place-items:center;font-weight:800;flex:none}
.avis__nom{font-weight:700;font-size:.9rem}
.avis__lieu{font-size:.8rem;color:var(--gris-600)}
.avis--placeholder{border-style:dashed;border-color:var(--gris-400);background:var(--gris-50)}
.avis--placeholder blockquote{color:var(--gris-600);font-style:italic}
.bandeau-placeholder{
  background:var(--orange-50);border:1px solid #fdba8c;color:#9a3412;
  padding:.9rem 1.1rem;border-radius:var(--r);font-size:.88rem;font-weight:600;margin-bottom:1.5rem;
}

/* ---------- 12. Carte (façade sans chargement tiers) ---------- */
.carte-geo{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--bordure);background:var(--bleu-50);aspect-ratio:16/10}
.carte-geo iframe{width:100%;height:100%;border:0;display:block}
.carte-geo__facade{
  position:absolute;inset:0;display:grid;place-items:center;gap:.9rem;text-align:center;padding:1.5rem;
  background:
    linear-gradient(rgba(239,246,252,.86),rgba(219,234,254,.86)),
    repeating-linear-gradient(0deg,transparent 0 34px,rgba(21,101,192,.12) 34px 35px),
    repeating-linear-gradient(90deg,transparent 0 34px,rgba(21,101,192,.12) 34px 35px);
}
.carte-geo__facade p{font-size:.86rem;color:var(--gris-600);max-width:42ch}

/* ---------- 13. Maillage / listes de liens ---------- */
.nuage-liens{display:flex;flex-wrap:wrap;gap:.5rem}
.nuage-liens a{
  display:inline-flex;align-items:center;min-height:26px;
  padding:.5rem .85rem;background:#fff;border:1px solid var(--bordure);
  border-radius:var(--r-full);font-size:.87rem;font-weight:600;color:var(--gris-700);text-decoration:none;
}
.nuage-liens a:hover{border-color:var(--bleu-600);color:var(--bleu-700);background:var(--bleu-50)}
.colonnes-liens{columns:2;column-gap:1.5rem}
@media(min-width:700px){.colonnes-liens{columns:3}}
@media(min-width:1000px){.colonnes-liens{columns:4}}
.colonnes-liens li{break-inside:avoid;margin-bottom:.4rem}
/* Cible d'au moins 24 px de haut (WCAG 2.2 — 2.5.8). Le padding vertical
   agrandit la zone cliquable sans écarter visuellement les entrées. */
.colonnes-liens a{
  display:inline-block;padding-block:.2rem;min-height:24px;
  font-size:.88rem;color:var(--gris-700);text-decoration:none;
}
.colonnes-liens a:hover{color:var(--bleu-700);text-decoration:underline}

/* ---------- 14. Fil d'Ariane ---------- */
.ariane{padding-block:.9rem;font-size:.83rem;color:var(--gris-600);border-bottom:1px solid var(--gris-100)}
.ariane ol{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.ariane li:not(:last-child)::after{content:"›";margin-left:.4rem;color:var(--gris-400)}
.ariane a{color:var(--gris-600);text-decoration:none}
.ariane a:hover{color:var(--bleu-700);text-decoration:underline}
.ariane [aria-current]{color:var(--gris-900);font-weight:600}

/* ---------- 15. Article / prose ---------- */
.prose{max-width:var(--max-texte)}
.prose h2{margin-top:2.5rem;margin-bottom:.85rem}
.prose h3{margin-top:1.85rem;margin-bottom:.6rem}
.prose p,.prose ul,.prose ol{margin-bottom:1.05rem;color:var(--texte-doux)}
.prose ul li{position:relative;padding-left:1.4rem;margin-bottom:.5rem}
.prose ul li::before{content:"";position:absolute;left:.35rem;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--bleu-600)}
.prose ol{counter-reset:n;padding-left:0}
.prose ol li{counter-increment:n;position:relative;padding-left:2rem;margin-bottom:.5rem}
.prose ol li::before{content:counter(n) ".";position:absolute;left:0;font-weight:800;color:var(--bleu-700)}
.prose strong{color:var(--gris-900)}
.encadre{
  background:var(--bleu-50);border-left:4px solid var(--bleu-600);
  padding:1.15rem 1.35rem;border-radius:0 var(--r) var(--r) 0;margin:1.75rem 0;
}
.encadre p{margin-bottom:0;color:var(--gris-700)}
.encadre--alerte{background:var(--orange-50);border-left-color:var(--orange-600)}
.encadre--vert{background:var(--vert-50);border-left-color:var(--vert-600)}
.encadre__titre{font-weight:800;color:var(--bleu-900);margin-bottom:.4rem;display:block}
.encadre--alerte .encadre__titre{color:#9a3412}
.chiffre-choc{
  display:flex;gap:1.15rem;align-items:center;background:var(--bleu-900);color:#fff;
  border-radius:var(--r-lg);padding:1.35rem 1.5rem;margin:1.75rem 0;
}
.chiffre-choc b{font-size:clamp(2rem,1.5rem + 2vw,2.9rem);font-weight:800;line-height:1;color:#5fd7a6;flex:none}
.chiffre-choc p{color:#c7d5e6;font-size:.95rem;margin:0}
.chiffre-choc cite{display:block;font-size:.76rem;color:#8ba3bd;font-style:normal;margin-top:.35rem}
.sommaire{background:var(--gris-50);border:1px solid var(--bordure);border-radius:var(--r-lg);padding:1.25rem 1.4rem;margin-bottom:2rem}
.sommaire strong{display:block;margin-bottom:.6rem;color:var(--bleu-900)}
.sommaire li{margin-bottom:.35rem}
.sommaire a{font-size:.93rem;color:var(--gris-700);text-decoration:none}
.sommaire a:hover{color:var(--bleu-700);text-decoration:underline}

/* ---------- 16. Tableaux ---------- */
.tableau-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0;border:1px solid var(--bordure);border-radius:var(--r-lg)}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:.93rem;background:#fff}
th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--gris-100)}
th{background:var(--gris-50);font-weight:800;color:var(--bleu-900);font-size:.85rem}
tr:last-child td{border-bottom:0}

/* ---------- 17. Footer ---------- */
.pied{background:var(--bleu-900);color:#a8bdd4;padding-block:3rem 1.5rem;font-size:.9rem}
.pied__grille{display:grid;gap:2rem}
@media(min-width:700px){.pied__grille{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.pied h3{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:.9rem}
.pied a{color:#a8bdd4;text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied li{margin-bottom:.5rem}
.pied__logo{color:#fff;font-weight:800;font-size:1.1rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.55rem}
.pied__contact{display:grid;gap:.5rem;margin-top:1rem}
.pied__contact a{display:flex;align-items:center;gap:.55rem;font-weight:700;color:#fff}
.pied__bas{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:space-between;font-size:.82rem;
}
.pied__legal{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.pied__mentions{font-size:.78rem;color:#7d93ac;margin-top:1rem;max-width:75ch;line-height:1.6}

/* ---------- 18. Barre d'action mobile ---------- */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:880;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--gris-200);border-top:1px solid var(--gris-200);
  padding-bottom:env(safe-area-inset-bottom);
}
.barre-mobile a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem .5rem;background:#fff;font-weight:800;font-size:.95rem;text-decoration:none;min-height:54px;
}
.barre-mobile a:first-child{background:var(--vert-600);color:#fff}
.barre-mobile a:last-child{background:var(--bleu-900);color:#fff}
@media(min-width:1024px){.barre-mobile{display:none}}
@media(max-width:1023px){body{padding-bottom:58px}}

/* bouton WhatsApp flottant (desktop) */
.wa-flottant{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:870;display:none;
  align-items:center;gap:.6rem;background:#25d366;color:#062e18;font-weight:800;
  padding:.85rem 1.25rem;border-radius:var(--r-full);box-shadow:var(--ombre-lg);text-decoration:none;
}
.wa-flottant:hover{background:#1eb959;color:#062e18;transform:translateY(-2px)}
@media(min-width:1024px){.wa-flottant{display:inline-flex}}

/* ---------- 19. Utilitaires ---------- */
.centre{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem}
.mb-2{margin-bottom:1.5rem}.mb-3{margin-bottom:2.25rem}
.petit{font-size:.85rem}
.doux{color:var(--texte-doux)}
.pastille-prix{display:inline-flex;align-items:baseline;gap:.3rem;font-weight:800;color:var(--vert-700);background:var(--vert-50);padding:.35rem .8rem;border-radius:var(--r-full);font-size:.9rem}

/* ---------- 20. Carte interactive Île-de-France ---------- */
.carte-idf{--dep-fond:#e2ecf7;--dep-trait:#fff;--dep-actif:var(--vert-500)}
.carte-idf__grille{display:grid;gap:2rem;align-items:start}
@media(min-width:900px){.carte-idf__grille{grid-template-columns:1.15fr .85fr;gap:2.5rem}}

.carte-idf__figure{margin:0}
.carte-idf__svg{
  width:100%;height:auto;display:block;
  background:linear-gradient(160deg,#f5f9fd,#e8f1fa);
  border:1px solid var(--bordure);border-radius:var(--r-lg);
  padding:.75rem;overflow:visible;
}
.carte-idf__zone path{
  fill:var(--dep-fond);stroke:var(--dep-trait);stroke-width:2.5;
  stroke-linejoin:round;
  transition:fill .15s ease,filter .15s ease;
  cursor:pointer;
}
.carte-idf__zone:hover path,
.carte-idf__zone:focus-visible path,
.carte-idf__zone.est-survole path{
  fill:var(--bleu-600);
  filter:drop-shadow(0 3px 6px rgba(10,37,64,.28));
}
.carte-idf__zone:focus{outline:none}
.carte-idf__zone:focus-visible path{stroke:var(--bleu-900);stroke-width:3.5}
/* Département de la page courante */
.carte-idf[data-dep-actif] .carte-idf__zone.est-actif path{fill:var(--dep-actif)}
.carte-idf[data-dep-actif] .carte-idf__zone.est-actif:hover path{fill:var(--vert-600)}

.carte-idf__num{
  fill:var(--bleu-800);font-size:34px;font-weight:800;text-anchor:middle;
  font-family:var(--police);pointer-events:none;
  paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:5px;
}
.carte-idf__pastille circle{fill:var(--bleu-700);stroke:#fff;stroke-width:3;pointer-events:none}
.carte-idf__pastille text{
  fill:#fff;font-size:20px;font-weight:800;text-anchor:middle;
  font-family:var(--police);pointer-events:none;
}
/* Le libellé suit l'état de sa zone */
.carte-idf__zone:hover ~ .carte-idf__libelles [data-dep],
.carte-idf__libelles [data-dep].est-survole circle{fill:var(--bleu-900)}
.carte-idf__libelles [data-dep].est-survole .carte-idf__num,
.carte-idf__num.est-survole{fill:#fff;stroke:var(--bleu-900)}

.carte-idf__source{
  font-size:.74rem;color:var(--gris-600);margin-top:.7rem;line-height:1.5;
}

.carte-idf__titre{font-size:1.15rem;margin-bottom:.4rem}
.carte-idf__sous{font-size:.94rem;color:var(--texte-doux);margin-bottom:1.25rem}

.carte-idf__legende{display:grid;gap:.4rem;margin-top:1.25rem}
.carte-idf__ligne{
  display:flex;align-items:center;gap:.85rem;padding:.6rem .75rem;
  border:1px solid var(--bordure);border-radius:var(--r);background:#fff;
  text-decoration:none;color:inherit;min-height:48px;
  transition:border-color .12s,background-color .12s,transform .12s;
}
.carte-idf__ligne:hover,.carte-idf__ligne.est-survole{
  border-color:var(--bleu-600);background:var(--bleu-50);transform:translateX(2px);color:inherit;
}
.carte-idf__ligne.est-actif{border-color:var(--vert-600);background:var(--vert-50)}
.carte-idf__pastille-legende{
  flex:none;width:38px;height:30px;border-radius:var(--r-sm);
  background:var(--bleu-700);color:#fff;font-weight:800;font-size:.85rem;
  display:grid;place-items:center;
}
.carte-idf__ligne.est-actif .carte-idf__pastille-legende{background:var(--vert-600)}
.carte-idf__texte{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.carte-idf__texte strong{font-size:.94rem;color:var(--bleu-900)}
.carte-idf__texte small{font-size:.78rem;color:var(--gris-600)}
.carte-idf__ligne svg{margin-left:auto;color:var(--gris-400);flex:none}
.carte-idf__ligne:hover svg{color:var(--bleu-600)}

/* Carte sur fond bleu foncé */
.section--bleu .carte-idf__svg{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.section--bleu .carte-idf{--dep-fond:#41648c;--dep-trait:#0a2540}
.section--bleu .carte-idf__num{fill:#fff;stroke:rgba(10,37,64,.55)}
.section--bleu .carte-idf__source{color:#8ba3bd}
.section--bleu .carte-idf__titre{color:#fff}
.section--bleu .carte-idf__sous{color:#c7d5e6}
.section--bleu .carte-idf__ligne{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.section--bleu .carte-idf__ligne:hover,.section--bleu .carte-idf__ligne.est-survole{
  background:rgba(255,255,255,.13);border-color:#5fd7a6;
}
.section--bleu .carte-idf__texte strong{color:#fff}
.section--bleu .carte-idf__texte small{color:#a8bdd4}
.section--bleu .recherche-commune label{color:#c7d5e6}

/* ---------- 21. Recherche de commune ---------- */
.recherche-commune{position:relative}
.recherche-commune label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.4rem}
.recherche-commune__champ{position:relative;display:flex;align-items:center}
.recherche-commune__champ svg{position:absolute;left:.85rem;color:var(--gris-400);pointer-events:none}
.recherche-commune input{
  width:100%;padding:.8rem .9rem .8rem 2.6rem;min-height:48px;
  border:1.5px solid var(--gris-300);border-radius:var(--r);background:#fff;font-size:1rem;
}
.recherche-commune input:focus{
  outline:none;border-color:var(--bleu-600);box-shadow:0 0 0 3px var(--bleu-100);
}
.recherche-commune__liste{
  position:absolute;left:0;right:0;top:calc(100% + .35rem);z-index:60;
  background:#fff;border:1px solid var(--bordure);border-radius:var(--r);
  box-shadow:var(--ombre-lg);max-height:19rem;overflow-y:auto;padding:.3rem;
}
.recherche-commune__liste li{border-radius:var(--r-sm)}
.recherche-commune__liste a{
  display:flex;align-items:baseline;gap:.5rem;padding:.6rem .7rem;
  text-decoration:none;color:var(--gris-900);font-size:.94rem;min-height:44px;
}
.recherche-commune__liste li:hover a,.recherche-commune__liste li[aria-selected="true"] a{
  background:var(--bleu-50);color:var(--bleu-800);
}
.recherche-commune__liste b{font-weight:700}
.recherche-commune__liste small{color:var(--gris-600);font-size:.8rem;margin-left:auto;white-space:nowrap}
.recherche-commune__vide{padding:.85rem .7rem;color:var(--gris-600);font-size:.9rem}
.recherche-commune__aide{font-size:.8rem;color:var(--gris-600);margin-top:.5rem}
.section--bleu .recherche-commune__aide{color:#a8bdd4}

/* ---------- 22. Formules de traitement ---------- */
.formules-grille{display:grid;gap:1.25rem;align-items:stretch}
@media(min-width:760px){.formules-grille{grid-template-columns:repeat(3,1fr);gap:1.5rem}.formules-grille--2{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto}.formules-grille--1{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

.formule{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg);
  padding:1.6rem 1.5rem;box-shadow:var(--ombre-sm);
  transition:box-shadow .18s ease,transform .18s ease;
}
.formule:hover{box-shadow:var(--ombre-lg);transform:translateY(-2px)}
/* Formule mise en avant : surélevée et bordée de vert, sans changer la grille */
.formule--phare{
  border:2px solid var(--vert-600);box-shadow:var(--ombre-lg);
  padding-top:2rem;
}
@media(min-width:760px){.formule--phare{margin-block:-.6rem;padding-block:2.2rem 1.9rem}}
.formule__etiquette{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--vert-600);color:#fff;font-size:.72rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;
  padding:.32rem .85rem;border-radius:var(--r-full);white-space:nowrap;
}
.formule__nom{font-size:1.2rem;margin-bottom:.35rem}
.formule__resume{font-size:.93rem;color:var(--texte-doux);margin-bottom:1.1rem}

.formule__prix{
  display:block;padding:.9rem 0;margin-bottom:1.1rem;
  border-block:1px solid var(--gris-100);
}
.formule__prix small{display:block;font-size:.76rem;color:var(--gris-600);line-height:1.4}
.formule__prix b{
  display:block;font-size:2rem;font-weight:800;color:var(--bleu-900);
  line-height:1.15;letter-spacing:-.02em;
}
.formule--phare .formule__prix b{color:var(--vert-700)}

.formule__pourqui{font-size:.85rem;color:var(--texte-doux);margin-bottom:1rem;line-height:1.55}
.formule__pourqui strong{color:var(--gris-900)}
.formule__herite{
  display:flex;align-items:flex-start;gap:.4rem;
  font-size:.83rem;font-weight:700;color:var(--vert-700);margin-bottom:.75rem;
}
.formule__herite svg{flex:none;margin-top:.15rem}
.formule__inclus{margin-bottom:1.5rem}
.formule__inclus li{font-size:.9rem}
/* Le bouton reste aligné en bas quelle que soit la hauteur des listes */
.formule__cta{margin-top:auto}

.formules-commun{
  margin-top:2rem;background:var(--bleu-50);border:1px solid var(--bleu-100);
  border-radius:var(--r-lg);padding:1.5rem;
}
.formules-commun h3{font-size:1.02rem;margin-bottom:1rem}
.formules-commun__liste{display:grid;gap:.65rem}
@media(min-width:700px){.formules-commun__liste{grid-template-columns:repeat(2,1fr);column-gap:2rem}}
@media(min-width:1050px){.formules-commun__liste{grid-template-columns:repeat(3,1fr)}}
.formules-commun__liste li{font-size:.9rem}

.formules-note{
  font-size:.8rem;color:var(--gris-600);margin-top:1.5rem;
  max-width:80ch;line-height:1.6;
}
.formules-note__alerte{
  display:block;margin-top:.5rem;color:#9a3412;
  background:var(--orange-50);border:1px solid #fdba8c;
  padding:.6rem .8rem;border-radius:var(--r-sm);
}

/* Variante sur fond bleu marine */
.section--bleu .formule{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.section--bleu .formule__nom{color:#fff}
.section--bleu .formule__resume,.section--bleu .formule__pourqui{color:#c7d5e6}
.section--bleu .formule__prix{border-color:rgba(255,255,255,.16)}
.section--bleu .formule__prix b{color:#fff}
.section--bleu .formule__prix small{color:#a8bdd4}
.section--bleu .formule__inclus li{color:#c7d5e6}
.section--bleu .formules-commun{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.section--bleu .formules-note{color:#8ba3bd}

/* ---------- 23. Sources et références ---------- */
.sources-liste{counter-reset:src;display:grid;gap:.85rem}
@media(min-width:820px){.sources-liste{grid-template-columns:repeat(2,1fr);gap:.85rem 1.5rem}}

.source{
  display:flex;gap:.9rem;align-items:flex-start;
  background:#fff;border:1px solid var(--bordure);border-radius:var(--r);
  padding:.95rem 1.05rem;
  transition:border-color .12s,box-shadow .12s;
}
.source:hover{border-color:var(--bleu-100);box-shadow:var(--ombre-sm)}
.source__num{
  flex:none;width:26px;height:26px;border-radius:var(--r-full);
  background:var(--bleu-50);color:var(--bleu-700);
  display:grid;place-items:center;font-size:.78rem;font-weight:800;margin-top:.1rem;
}
.source__corps{min-width:0;flex:1}
.source__titre{
  display:inline-flex;align-items:baseline;gap:.35rem;
  font-weight:700;font-size:.95rem;color:var(--bleu-800);
  text-decoration:none;line-height:1.35;
}
.source__titre:hover{color:var(--bleu-600);text-decoration:underline}
.source__titre svg{flex:none;opacity:.55;align-self:center}
.source__titre:hover svg{opacity:1}
.source__meta{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;margin-top:.35rem}
.source__editeur{font-size:.82rem;color:var(--gris-700);font-weight:600}
.source__type{
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--vert-700);background:var(--vert-50);
  padding:.15rem .5rem;border-radius:var(--r-full);white-space:nowrap;
}
.source__note{font-size:.83rem;color:var(--texte-doux);margin-top:.4rem;line-height:1.5}
.source__url{
  display:block;margin-top:.45rem;font-size:.74rem;color:var(--gris-400);
  overflow-wrap:anywhere;
}

.sources-pied{
  display:flex;gap:.5rem;align-items:flex-start;
  font-size:.82rem;color:var(--gris-600);margin-top:1.5rem;
  max-width:85ch;line-height:1.6;
}
.sources-pied svg{flex:none;color:var(--vert-600);margin-top:.25rem}

/* Lien externe en ligne (citations dans le corps de texte) */
.lien-externe{display:inline-flex;align-items:center;gap:.2rem}
.lien-externe svg{opacity:.55}
.lien-externe:hover svg{opacity:1}

/* Source du chiffre choc, rendue cliquable */
.chiffre-choc cite a{color:#8fe3c0;text-decoration:underline;text-underline-offset:.15em}
.chiffre-choc cite a:hover{color:#fff}
.chiffre-choc cite .lien-externe svg{opacity:.7}

/* Variante sur fond bleu marine */
.section--bleu .source{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.section--bleu .source__titre{color:#fff}
.section--bleu .source__editeur{color:#c7d5e6}
.section--bleu .source__note{color:#a8bdd4}
.section--bleu .source__url{color:#7d93ac}
.section--bleu .sources-pied{color:#a8bdd4}

/* ---------- 24. Bandeau de préversion (uniquement avec --preview) ---------- */
.bandeau-preview{
  position:relative;z-index:950;
  background:repeating-linear-gradient(135deg,#0a2540,#0a2540 12px,#123253 12px,#123253 24px);
  color:#e8eef6;font-size:.82rem;line-height:1.45;
  padding:.55rem 1.15rem;text-align:center;
}
.bandeau-preview strong{
  color:#0a2540;background:#ffd166;border-radius:var(--r-sm);
  padding:.1rem .45rem;margin-right:.35rem;font-weight:800;
  font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
}

/* ---------- 25. Repères tarifaires et TVA ---------- */
.repere-prix{border-top:1px solid var(--gris-100);padding-top:.75rem;margin-top:.75rem}
.repere-prix li{margin-bottom:.45rem;line-height:1.5}
.formules-tva{
  margin-top:1.75rem;background:var(--vert-50);border:1px solid #a7e0c8;
  border-radius:var(--r-lg);padding:1.15rem 1.35rem;max-width:85ch;
}
.formules-tva .encadre__titre{
  display:flex;align-items:center;gap:.4rem;color:var(--vert-700);margin-bottom:.5rem;
}
.formules-tva p{font-size:.88rem;color:var(--gris-700);line-height:1.6;margin:0}
.section--bleu .formules-tva{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.section--bleu .formules-tva p{color:#c7d5e6}
.section--bleu .formules-tva .encadre__titre{color:#8fe3c0}

/* ---------- 26. Formulaire express ---------- */
.bloc-form--express{position:relative;border-top:4px solid var(--vert-600)}
.express__badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--vert-50);color:var(--vert-700);
  font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:var(--r-full);margin-bottom:.9rem;
}
.champ--gros{font-size:1.25rem!important;font-weight:600;letter-spacing:.02em;min-height:56px!important}
.express__ou{
  text-align:center;font-size:.9rem;color:var(--gris-600);
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--gris-100);
}
.express__ou a{font-weight:800;color:var(--bleu-800);white-space:nowrap}

/* ---------- 27. Bandeau de preuves ---------- */
.section--compacte{padding-block:clamp(1.75rem,3.5vw,2.5rem)}
.preuves{display:grid;gap:1.25rem}
@media(min-width:640px){.preuves{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.preuves{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.preuves li{display:flex;flex-direction:column;gap:.3rem}
.preuves__icone{
  width:44px;height:44px;border-radius:var(--r);background:var(--vert-50);color:var(--vert-700);
  display:grid;place-items:center;margin-bottom:.45rem;
}
.preuves strong{font-size:1rem;color:var(--bleu-900);line-height:1.3}
.preuves span:last-child{font-size:.86rem;color:var(--texte-doux);line-height:1.5}
.section--bleu .preuves__icone{background:rgba(95,215,166,.16);color:#8fe3c0}
.section--bleu .preuves strong{color:#fff}
.section--bleu .preuves span:last-child{color:#c7d5e6}

/* ---------- 28. Tableau comparatif ---------- */
.comparatif th[scope="row"]{background:var(--gris-50);font-weight:700;color:var(--bleu-900);width:22%;min-width:150px}
.comparatif thead th{font-size:.8rem}
.comparatif__nous{background:var(--vert-50);color:var(--vert-700);font-weight:600}
.comparatif thead .comparatif__nous{background:var(--vert-600);color:#fff}
.comparatif td{vertical-align:top}

/* ---------- 29. Frise de déroulé ---------- */
.frise{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.4rem;margin:1.5rem 0}
.frise__etape{display:flex;gap:.6rem;align-items:flex-start;flex:1 1 150px;min-width:140px}
.frise__pastille{
  flex:none;width:30px;height:30px;border-radius:var(--r-full);
  background:var(--bleu-700);color:#fff;font-weight:800;font-size:.85rem;
  display:grid;place-items:center;
}
.frise__corps{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.frise__corps strong{font-size:.9rem;color:var(--bleu-900)}
.frise__corps span{font-size:.78rem;color:var(--vert-700);font-weight:700}
.frise__lien{display:none;flex:0 0 18px;height:2px;background:var(--gris-300);margin-top:14px}
@media(min-width:900px){.frise__lien{display:block}}
.section--bleu .frise__corps strong{color:#fff}
.section--bleu .frise__corps span{color:#8fe3c0}
.section--bleu .frise__lien{background:rgba(255,255,255,.25)}

/* ---------- 30. Encadré « pour qui » / segments ---------- */
.segments{display:grid;gap:1rem}
@media(min-width:700px){.segments{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.segments{grid-template-columns:repeat(3,1fr)}}
.segment{
  background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg);padding:1.4rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.segment h3{font-size:1.05rem}
.segment p{font-size:.92rem;color:var(--texte-doux)}
.segment ul{margin-top:.35rem}
.segment ul li{font-size:.88rem}

/* ---------- 31. Bloc urgence ---------- */
.urgence-bloc{
  background:linear-gradient(135deg,#9a3412,var(--orange-600));color:#fff;
  border-radius:var(--r-xl);padding:1.75rem 1.5rem;
}
@media(min-width:768px){.urgence-bloc{padding:2.25rem 2.5rem}}
.urgence-bloc h2,.urgence-bloc h3{color:#fff}
.urgence-bloc p{color:#fff3ee}
.urgence-bloc .liste-check li{color:#fff3ee}
.urgence-bloc .liste-check li::before{background:rgba(255,255,255,.2)}
.urgence-bloc .liste-check li::after{border-color:#fff}
.urgence-liste{display:grid;gap:.6rem;margin-top:1.25rem}
@media(min-width:700px){.urgence-liste{grid-template-columns:repeat(2,1fr);column-gap:2rem}}

/* Lien Urgence dans la navigation */
.nav__urgence{display:inline-flex;align-items:center;gap:.35rem;color:var(--orange-600)!important;font-weight:800}
.nav__urgence:hover{background:var(--orange-50)!important}

/* ---------- 32. Lisibilité sur fonds sombres ----------
   Plusieurs composants héritent de --texte-doux (#374151), illisible sur le marine
   du héros ou de .section--bleu (1,5:1). On rétablit une couleur claire partout où
   un conteneur sombre peut recevoir ces composants. */
.hero .liste-check li,
.section--bleu .liste-check li,
.hero .liste-puces li,
.section--bleu .liste-puces li,
.hero .prose p,
.section--bleu .prose p{color:#c7d5e6}

.hero .liste-check li::before,
.section--bleu .liste-check li::before{background:rgba(95,215,166,.18)}
.hero .liste-check li::after,
.section--bleu .liste-check li::after{border-color:#5fd7a6}
.hero .liste-croix li::before,
.section--bleu .liste-croix li::before{background:rgba(255,255,255,.14)}
.hero .liste-croix li::after,
.section--bleu .liste-croix li::after{color:#ffb59a}
.hero .liste-puces li::before,
.section--bleu .liste-puces li::before{background:#5fd7a6}

.hero strong,.section--bleu strong{color:#fff}
.hero .petit.doux,.section--bleu .petit.doux{color:#a8bdd4}
.hero h3,.hero h4{color:#fff}

/* Le bandeau urgence garde sa propre palette chaude */
.urgence-bloc .liste-check li,.urgence-bloc .liste-croix li{color:#fff3ee}
.urgence-bloc .liste-check li::before{background:rgba(255,255,255,.2)}
.urgence-bloc .liste-check li::after{border-color:#fff}
.urgence-bloc .liste-croix li::after{color:#fff}
.urgence-bloc strong{color:#fff}

/* ---------- 33. Identificateur de nuisible ---------- */
.quiz{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--bordure);
 border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--ombre)}
@media(min-width:640px){.quiz{padding:2.25rem}}
.quiz__progression{height:6px;background:var(--gris-100);border-radius:var(--r-full);overflow:hidden;margin-bottom:.75rem}
.quiz__progression span{display:block;height:100%;background:var(--vert-600);border-radius:var(--r-full);
 width:0;transition:width .3s ease}
.quiz__compteur{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
 color:var(--gris-600);margin-bottom:1.25rem}
.quiz__question{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);margin-bottom:1.25rem}
.quiz__options{display:grid;gap:.6rem}
.quiz__option{
  display:block;width:100%;text-align:left;padding:.95rem 1.15rem;min-height:52px;
  border:1.5px solid var(--bordure);border-radius:var(--r);background:#fff;
  font-size:1rem;font-weight:600;color:var(--gris-900);
  transition:border-color .12s,background-color .12s,transform .12s;
}
.quiz__option:hover{border-color:var(--vert-600);background:var(--vert-50);transform:translateX(3px)}
.quiz__option:focus-visible{outline:3px solid var(--bleu-600);outline-offset:2px}
.quiz__pied{margin-top:1.25rem}
.quiz__resultat{text-align:center}
.quiz__badge{display:inline-block;background:var(--vert-50);color:var(--vert-700);
 font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
 padding:.3rem .8rem;border-radius:var(--r-full);margin-bottom:.85rem}
.quiz__resultat h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem);margin-bottom:.2rem}
.quiz__latin{color:var(--gris-600);font-size:.9rem;margin-bottom:.75rem}
.quiz__resultat p{color:var(--texte-doux)}
.quiz__jauge{height:10px;background:var(--gris-100);border-radius:var(--r-full);
 overflow:hidden;margin:1.25rem auto .6rem;max-width:340px}
.quiz__jauge span{display:block;height:100%;background:linear-gradient(90deg,var(--vert-500),var(--vert-600))}
.quiz__note{font-size:.85rem;max-width:52ch;margin-inline:auto}
.quiz__resultat .btn-groupe{justify-content:center}
.quiz__autres{font-size:.88rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--gris-100)}
.quiz__rejouer{margin-top:1rem}

/* ---------- 34. Calendrier saisonnier ---------- */
.mois-actuel{
  background:linear-gradient(135deg,var(--bleu-800),var(--bleu-700));color:#fff;
  border-radius:var(--r-xl);padding:1.75rem 1.5rem;
}
@media(min-width:768px){.mois-actuel{padding:2.25rem 2.5rem}}
.mois-actuel h2{color:#fff;font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);margin-bottom:.6rem}
.mois-actuel p{color:#c7d5e6;max-width:70ch}
.mois-actuel__badge{
  display:inline-block;background:var(--vert-600);color:#fff;
  font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:.3rem .8rem;border-radius:var(--r-full);margin-bottom:.85rem;
}
.mois-actuel .nuage-liens a{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#fff}
.mois-actuel .nuage-liens a:hover{background:rgba(255,255,255,.22);border-color:#5fd7a6;color:#fff}
.carte--mois-actuel{border-color:var(--vert-600);border-width:2px;background:var(--vert-50)}
.pastille-mois{
  display:inline-block;background:var(--vert-600);color:#fff;font-size:.65rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;border-radius:var(--r-full);
  vertical-align:middle;margin-left:.4rem;
}

/* ---------- 35. Glossaire ---------- */
.glossaire{display:grid;gap:.9rem}
@media(min-width:820px){.glossaire{grid-template-columns:repeat(2,1fr);gap:.9rem 1.5rem}}
.glossaire__item{
  background:#fff;border:1px solid var(--bordure);border-radius:var(--r);
  padding:1.05rem 1.2rem;scroll-margin-top:calc(var(--header-h) + 1rem);
}
.glossaire__item dt{font-weight:800;color:var(--bleu-900);font-size:1rem;margin-bottom:.35rem}
.glossaire__item dd{margin:0;font-size:.9rem;color:var(--texte-doux);line-height:1.6}

/* ---------- 36. Formulaire d'avis ---------- */
.notes-champ{border:0;padding:0;margin:0 0 .95rem}
.notes-champ legend{font-weight:700;font-size:.88rem;margin-bottom:.4rem;padding:0;color:var(--gris-900)}
.notes{display:flex;flex-direction:column;gap:.35rem}
.notes__item{cursor:pointer}
.notes__item input{position:absolute;opacity:0;width:0;height:0}
.notes__item span{
  display:flex;align-items:center;gap:.6rem;padding:.55rem .85rem;min-height:46px;
  border:1.5px solid var(--gris-300);border-radius:var(--r);background:#fff;
  color:#e8a317;font-size:1.05rem;letter-spacing:.08em;transition:border-color .12s,background-color .12s;
}
.notes__item span em{font-style:normal;color:var(--gris-600);font-size:.85rem;margin-left:auto;letter-spacing:0}
.notes__item:hover span{border-color:var(--vert-600);background:var(--vert-50)}
.notes__item input:checked + span{border-color:var(--vert-600);border-width:2px;background:var(--vert-50)}
.notes__item input:focus-visible + span{outline:3px solid var(--bleu-600);outline-offset:2px}

/* ---------- 37. Cibles tactiles des liens de navigation (WCAG 2.2 — 2.5.8) ----------
   Les liens présentés en liste ne sont pas « en ligne dans une phrase » : ils ne
   bénéficient pas de l'exemption et doivent atteindre 24 px de haut. Le padding
   vertical agrandit la zone cliquable sans modifier le rythme visuel, la hauteur
   de ligne absorbant l'écart. */
.ariane a,
.ariane [aria-current],
.liste-puces li > a,
.sommaire a,
.pied li a,
.pied__legal a,
.pied__contact a,
.carte-idf__legende a,
.recherche-commune__liste a{
  display:inline-flex;align-items:center;min-height:24px;
}
.liste-puces li > a,
.sommaire a{padding-block:.15rem}
.ariane a{padding-inline:.1rem}
/* Le pied de page espace déjà ses entrées : on ajuste sans creuser davantage. */
.pied li{margin-bottom:.35rem}

/* ---------- 38. Bandeau de consentement à la mesure ----------
   En position fixe : il ne pousse rien, donc aucun décalage de mise en page (CLS).
   Les deux boutons ont la même taille et la même lisibilité : refuser doit être
   aussi immédiat qu'accepter, la CNIL ne tolère pas le choix déséquilibré. */
.consent{
  position:fixed;inset:auto 0 0 0;z-index:890; /* au-dessus de la barre d'action mobile (880) */
  padding:.85rem;
  background:var(--bleu-900);color:#e8eef6;
  box-shadow:0 -4px 16px rgba(10,37,64,.25);
}
/* Sous 1024 px, la barre d'action mobile occupe déjà le bas de l'écran : le
   bandeau se pose juste au-dessus au lieu de la recouvrir. Masquer « Appeler »
   derrière un bandeau de consentement coûterait des appels. */
@media(max-width:1023px){
  .consent{bottom:calc(58px + env(safe-area-inset-bottom))}
}
.consent__boite{
  max-width:var(--largeur);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.5rem;
  justify-content:space-between;
}
.consent__texte{flex:1 1 22rem;min-width:0}
.consent__titre{font-weight:700;color:#fff;margin:0 0 .2rem;font-size:1rem}
.consent__texte p{margin:0;font-size:.9rem;line-height:1.5;color:#c7d5e6}
.consent__texte a{color:#fff;text-decoration:underline}
.consent__actions{display:flex;gap:.6rem;flex:0 0 auto}
.consent__actions .btn{padding:.7rem 1.4rem;font-size:.95rem;min-height:48px}
/* Les deux réponses se voient autant l'une que l'autre : même taille, même
   graisse, contours francs. Un « Refuser » effacé est une pratique sanctionnée. */
.consent__actions .btn--fantome{border-color:#fff;color:#fff;background:transparent}
.consent__actions .btn--fantome:hover{background:rgba(255,255,255,.14);color:#fff}
.consent__actions .btn--blanc:hover{background:#e8eef6;color:var(--bleu-900)}
@media (max-width:640px){
  /* En colonne, flex-basis devient une HAUTEUR : sans cette remise à zéro, le
     bandeau réserve 22rem de haut et mange la moitié de l'écran. */
  .consent__boite{flex-direction:column;align-items:stretch;gap:.75rem}
  .consent__texte{flex:0 0 auto}
  .consent__actions .btn{flex:1 1 0}
}

/* Retirer son accord doit être aussi simple que le donner : le lien vit dans le
   pied de page, au milieu des liens légaux, et leur ressemble en tout point. */
.pied__lien-bouton{
  background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;
  color:inherit;text-decoration:underline;
  display:inline-flex;align-items:center;min-height:24px;
}
.pied__lien-bouton:hover{color:#fff}

/* ---------- 39. Bloc « L'essentiel » ----------
   Un résumé factuel juste sous le titre, lisible d'un coup d'œil par un visiteur
   pressé et citable tel quel par un moteur de réponse. Volontairement sobre : il
   informe, il ne vend pas — la page s'en charge partout ailleurs. */
.essentiel{
  background:var(--bleu-50);
  border-top:1px solid var(--gris-200);
  border-bottom:1px solid var(--gris-200);
  padding:1.5rem 0;
}
.essentiel__titre{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--bleu-700);margin:0 0 .6rem;font-weight:800;
}
.essentiel__phrase{
  font-size:1.05rem;line-height:1.6;color:var(--gris-900);
  margin:0 0 1.1rem;max-width:75ch;font-weight:600;
}
.essentiel__liste{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:.5rem 2rem;margin:0;align-items:start; /* sans align-items:start, toutes les
     lignes prennent la hauteur de la plus longue : le bloc doublait de haut. */
}
/* Libellé et valeur se suivent sur la même ligne : un résumé doit tenir en un
   coup d'œil, pas occuper la moitié d'un écran de téléphone. */
.essentiel__ligne{
  padding-bottom:.45rem;border-bottom:1px solid var(--gris-200);
  font-size:.88rem;line-height:1.5;
}
.essentiel__ligne dt{display:inline;font-weight:700;color:var(--gris-700)}
.essentiel__ligne dt::after{content:" : "}
.essentiel__ligne dd{display:inline;margin:0;color:var(--gris-900)}
@media(max-width:640px){
  .essentiel{padding:1.2rem 0}
  .essentiel__phrase{font-size:1rem}
}

/* ---------- 40. Sommaire des pages longues ----------
   Hors du blog, le sommaire n'est pas dans une colonne de prose : il lui faut sa
   propre largeur et une disposition en colonnes, sinon quinze entrées à la suite
   repoussent le contenu d'un écran entier sur un téléphone. */
.sommaire--page{
  max-width:var(--largeur);margin:0 auto 2rem;
  padding:1.1rem 1.3rem;
}
.sommaire--page ul{
  columns:2;column-gap:2rem;margin:0;padding:0;list-style:none;
}
.sommaire--page li{break-inside:avoid;margin-bottom:.3rem}
.sommaire--page a{
  display:inline-flex;align-items:center;min-height:24px;
  border-bottom:1px solid transparent;
}
.sommaire--page a:hover{border-bottom-color:currentColor}
@media(max-width:720px){
  .sommaire--page{margin-inline:1rem}
  .sommaire--page ul{columns:1}
}

/* ============================================================
   41. Pages d'atterrissage publicitaires (/ads/)
   ------------------------------------------------------------
   Une page payée n'a qu'un objectif. Tout ce qui ressemble à une
   navigation est retiré ; ce qui reste est agrandi. Le formulaire
   est collant sur grand écran parce que le visiteur scanne avant
   de décider, et qu'il ne doit jamais avoir à remonter.
   ============================================================ */
.entete--nue{position:static;box-shadow:none;border-bottom:1px solid var(--bord)}
.entete--nue .logo{cursor:default}
.entete--nue .entete__actions{margin-left:auto}
/* La règle générale masque le bouton vert sous 640 px, parce qu'un menu prend
   le relais. Ici il n'y a pas de menu : ce bouton est la seule action de
   l'en-tête, et le numéro est la moitié de la raison d'être de la page. */
@media(max-width:639px){
  .entete--nue .entete__actions .btn--vert{display:inline-flex;padding-inline:.7rem;font-size:.9rem}
  .entete--nue .logo span small{display:none}
}

.page-ads .hero{padding-block:2.5rem 3rem}
.page-ads h1{font-size:clamp(1.65rem,4.2vw,2.6rem);line-height:1.12}
.page-ads .hero__accroche{font-size:1.06rem;line-height:1.62;color:#c7d5e6;margin-top:1rem}
.page-ads .hero__accroche strong{color:#fff}
.page-ads .section{padding-block:2.75rem}
.page-ads .faq dt{font-size:1.02rem}

/* Le formulaire suit le regard : il reste à l'écran pendant la lecture. */
@media(min-width:900px){
  .page-ads .bloc-form--ads{position:sticky;top:1.25rem}
}
.bloc-form--ads .btn--bloc{margin-top:.35rem}
.bloc-form--ads .champ{margin-bottom:.9rem}

.pied--nu{padding-block:2rem;text-align:center}
.pied--nu p{color:var(--texte-doux);max-width:64ch;margin:0 auto .9rem;font-size:.92rem}
.pied--nu nav{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center}
/* Les liens légaux ne peuvent pas disparaître : ils restent obligatoires
   (LCEN art. 6, RGPD art. 13) et Google Ads les vérifie. Ils peuvent en
   revanche cesser d'attirer l'œil — plus petits, plus pâles, sans
   soulignement au repos.

   Le pied de ces pages est bleu foncé : la règle précédente y posait du gris
   #374151, soit 1,5:1 sur ce fond — des liens obligatoires rendus illisibles,
   ce qui revenait à les supprimer. La teinte retenue tient 5,2:1, au-dessus
   du seuil AA. Discret ne doit pas vouloir dire dissimulé : le soulignement
   et le contraste plein reviennent au survol comme au focus clavier. */
.pied--nu nav a{
  color:#7f97b3;
  font-size:.78rem;
  text-decoration:none;
  font-weight:400;
}
.pied--nu nav a:hover,
.pied--nu nav a:focus-visible{color:#d8e4f0;text-decoration:underline}
.pied--nu nav a:focus-visible{outline:2px solid #7f97b3;outline-offset:3px;border-radius:3px}

/* La barre mobile devient la seule navigation : elle doit être franche. */
.page-ads .barre-mobile a{font-weight:700}

/* Numéro d'étape du parcours client (pages /ads/). Le chiffre porte la
   progression : le visiteur doit voir d'un coup d'œil qu'il y a quatre
   étapes et qu'aucune ne lui coûte quelque chose avant son accord. */
.carte__numero{
  display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;margin-bottom:.6rem;border-radius:50%;
  background:var(--bleu-700);color:#fff;font-weight:800;font-size:.95rem;
}
.page-ads .grille--4 .carte h3{margin:0 0 .35rem;font-size:1.02rem}
.page-ads .grille--4 .carte .carte__meta{margin-top:.6rem;font-weight:700;color:var(--vert-700)}
.page-ads .comparatif td:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Barre d'appel intercalée (pages /ads/). Le visiteur qui vient de lire un
   prix décide dans les secondes qui suivent : le bouton doit être là, pas
   trois écrans plus bas. */
.bandeau-appel{background:var(--gris-100);border-block:1px solid var(--bord);padding-block:1.4rem}
.bandeau-appel .conteneur{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.bandeau-appel p{margin:0;font-weight:700;font-size:1.02rem;max-width:44ch}
.bandeau-appel .btn-groupe{margin:0;flex-wrap:nowrap}
@media(max-width:639px){
  .bandeau-appel .conteneur{flex-direction:column;align-items:stretch;text-align:center}
  .bandeau-appel .btn-groupe{flex-direction:column}
}

/* Sur téléphone, un tableau à deux colonnes qui défile latéralement cache la
   colonne de droite — ici, le prix. C'est précisément l'information pour
   laquelle le bloc existe. Les lignes s'empilent donc : intitulé au-dessus,
   montant en dessous, en gros. */
@media(max-width:559px){
  .page-ads .tableau-scroll{overflow-x:visible}
  .page-ads .comparatif{min-width:0}
  .page-ads .comparatif,
  .page-ads .comparatif tbody,
  .page-ads .comparatif tr,
  .page-ads .comparatif td{display:block;width:100%}
  .page-ads .comparatif thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .page-ads .comparatif tr{padding:.8rem 0;border-bottom:1px solid var(--bord)}
  .page-ads .comparatif tr:last-child{border-bottom:0}
  .page-ads .comparatif td{border:0;padding:0}
  .page-ads .comparatif td:first-child{font-weight:600;color:var(--gris-900)}
  .page-ads .comparatif td:last-child{margin-top:.2rem;font-size:1.15rem;font-weight:800;color:var(--bleu-700)}
}

/* Bandeau de consentement compact — pages publicitaires uniquement.
   Même contenu utile, même facilité de refus, un tiers de la hauteur.
   Ce qui est gagné est rendu au bouton d'appel. */
.consent--compact .consent__boite{padding:.7rem .9rem;gap:.6rem}
.consent--compact .consent__titre{display:none}
.consent--compact .consent__texte{flex:1 1 auto;min-width:0}
.consent--compact .consent__texte p{font-size:.82rem;line-height:1.35;margin:0}
.consent--compact .consent__actions{flex:0 0 auto;gap:.45rem}
.consent--compact .consent__actions .btn{min-height:40px;padding:.4rem .85rem;font-size:.85rem}
@media(max-width:559px){
  .consent--compact .consent__boite{flex-direction:row;align-items:center;flex-wrap:nowrap}
  .consent--compact .consent__texte p{font-size:.76rem}
  .consent--compact .consent__actions{flex-direction:row}
  .consent--compact .consent__actions .btn{padding-inline:.6rem;font-size:.8rem}
}
/* La règle « bandeau cookies plus compact » (§ 37, ≤ 640 px) étire les boutons
   sur toute la largeur. Dans le bandeau compact, qui reste sur une seule ligne,
   le texte n'avait plus que quelques pixels : un mot par ligne, illisible, et
   débordant sous « Refuser ». Les boutons reprennent leur largeur naturelle. */
@media(max-width:640px){
  .consent--compact .consent__actions{width:auto}
  .consent--compact .consent__actions .btn{flex:0 0 auto}
}

/* Le décalage du bandeau de consentement est calculé sur une barre d'action de
   58 px. Sur les pages publicitaires, « Appeler maintenant » passait à la ligne
   et portait la barre à 82 px : le bandeau recouvrait alors le haut du bouton
   d'appel — celui-là même pour lequel le clic a été payé. On tient la ligne. */
.page-ads .barre-mobile a{white-space:nowrap}
@media(max-width:399px){
  .page-ads .barre-mobile a{font-size:.88rem;gap:.35rem}
}

/* Indicateur de disponibilité (pages /ads/). Reste discret quand la ligne est
   fermée, franc quand elle est ouverte : c'est à ce moment-là qu'il doit
   pousser à l'appel plutôt qu'au formulaire. */
.dispo{display:inline-flex;align-items:center;gap:.5rem;margin:1.1rem 0 0;
  padding:.4rem .8rem;border-radius:999px;font-size:.88rem;font-weight:700;
  background:rgba(255,255,255,.08);color:#c7d5e6}
.dispo__point{width:.55rem;height:.55rem;border-radius:50%;background:#94a3b8;flex:none}
.dispo--ouvert{background:rgba(22,163,74,.16);color:#bbf7d0}
.dispo--ouvert .dispo__point{background:#22c55e;box-shadow:0 0 0 .22rem rgba(34,197,94,.25)}
@media(prefers-reduced-motion:no-preference){
  .dispo--ouvert .dispo__point{animation:pulseDispo 2.4s ease-in-out infinite}
  @keyframes pulseDispo{0%,100%{box-shadow:0 0 0 .22rem rgba(34,197,94,.25)}50%{box-shadow:0 0 0 .38rem rgba(34,197,94,.10)}}
}

/* Accordéon de rassurance (pages /ads/). Les questions qu'on n'ose pas poser
   restent visibles, les réponses repliées : le visiteur pressé appelle sans
   rien lire, le méfiant ouvre et trouve. <details> est natif — il fonctionne
   sans JavaScript et se pilote au clavier. */
.repli{border:1px solid var(--bord);border-radius:10px;margin-bottom:.7rem;background:#fff}
.repli summary{cursor:pointer;padding:.95rem 1.1rem;font-weight:700;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px}
.repli summary::-webkit-details-marker{display:none}
.repli summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--bleu-700);flex:none}
.repli[open] summary::after{content:"–"}
.repli summary:hover{color:var(--bleu-700)}
.repli summary:focus-visible{outline:2px solid var(--bleu-600);outline-offset:-2px;border-radius:10px}
.repli__corps{padding:0 1.1rem 1.1rem}
.repli__corps p{color:var(--texte-doux)}
.repli__corps p:last-child{margin-bottom:0}
.repli__corps .liste-check{margin:.6rem 0 .8rem}

/* Bloc de couverture : la preuve, pas la promesse. */
.couverture__ville{font-size:1.1rem;margin:0 0 .7rem}
.couverture__ville span{color:var(--texte-doux);font-weight:500;margin-left:.4rem}
/* La minification supprime l'espace entre les deux balises ; l'écart est donc
   porté par le style, pas par un caractère qui peut disparaître. */
.couverture__faits{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.couverture__faits li{position:relative;padding-left:1.5rem;color:var(--texte-doux)}
.couverture__faits li::before{content:"";position:absolute;left:.4rem;top:.66em;
  width:7px;height:7px;border-radius:50%;background:var(--vert-700)}
.couverture__depts .liste-check{columns:2;column-gap:1.5rem}
@media(max-width:559px){.couverture__depts .liste-check{columns:1}}

/* Observation de métier, détachée du corps de texte. Elle casse le rythme
   d'une suite de paragraphes et se retient mieux qu'une phrase noyée. */
.constat{margin:1.6rem 0 0;padding:1.1rem 1.3rem;border-left:4px solid var(--vert-600);
  background:var(--vert-50);border-radius:0 10px 10px 0}
.constat p{margin:0;font-size:1.02rem;line-height:1.6;color:var(--gris-900)}
.constat footer{margin-top:.6rem;font-size:.82rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--vert-700)}

/* Résumé en cinq lignes, juste sous le hero. C'est ce que lit celui qui ne
   lira rien d'autre : il doit être scannable, pas élégant. */
.section--resume{padding-block:1.6rem}
.resume{margin:0;border:1px solid var(--bord);border-radius:12px;background:#fff;overflow:hidden}
.resume__ligne{display:flex;gap:1rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--bord)}
.resume__ligne:last-child{border-bottom:0}
.resume dt{flex:0 0 11rem;font-weight:700;color:var(--gris-900)}
.resume dd{margin:0;color:var(--texte-doux)}
.resume dd strong{color:var(--bleu-700)}
@media(max-width:559px){
  .resume__ligne{flex-direction:column;gap:.15rem;padding:.65rem .9rem}
  .resume dt{flex:none;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;color:var(--texte-doux)}
  .resume dd{font-size:1rem;color:var(--gris-900)}
}

/* Fourchette de prix réellement constatée. Elle était en petits caractères
   sous une pastille « à partir de » beaucoup plus visible : le visiteur
   retenait le plancher et découvrait l'écart au devis. Elle porte maintenant
   le poids visuel de ce qu'elle est — le chiffre sur lequel on décide. */
.fourchette-prix{
  margin:.9rem 0 0;padding:.75rem .9rem;
  background:var(--bleu-50,#eff6ff);border:1px solid var(--bleu-200,#bfdbfe);
  border-radius:10px;display:flex;flex-direction:column;gap:.15rem;
}
.fourchette-prix__val{font-size:1.15rem;font-weight:800;color:var(--bleu-700);font-variant-numeric:tabular-nums}
.fourchette-prix__cas{font-size:.82rem;color:var(--texte-doux)}

/* Liste de signes à vérifier (pages /ads/). Cases à cocher visuelles : le
   visiteur compte mentalement, et deux coches suffisent à décider. */
.signes{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.signes li{position:relative;padding:.7rem .9rem .7rem 2.6rem;background:#fff;
  border:1px solid var(--bord);border-radius:10px;line-height:1.5}
.signes li::before{content:"";position:absolute;left:.9rem;top:.85rem;
  width:1.05rem;height:1.05rem;border:2px solid var(--bleu-600);border-radius:4px}

/* Estimateur de prix (pages /ads/). Deux séries de choix, un résultat qui
   apparaît seulement quand les deux sont faits — un montant affiché trop tôt
   serait faux, et un montant faux coûte plus cher que pas de montant. */
.estim{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:1.1rem}
.estim__etape{border:0;padding:0;margin:0 0 1.1rem}
.estim__etape legend{font-weight:700;color:var(--gris-900);margin-bottom:.55rem;padding:0}
.estim__choix{display:grid;gap:.45rem}
.estim__opt{display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;min-height:44px;
  border:1px solid var(--bord);border-radius:9px;cursor:pointer;line-height:1.35}
.estim__opt:hover{border-color:var(--bleu-600)}
.estim__opt input{flex:none;accent-color:var(--bleu-600);width:1.1rem;height:1.1rem}
.estim__opt:has(input:checked){border-color:var(--bleu-600);background:var(--bleu-50,#eff6ff)}
.estim__opt:focus-within{outline:2px solid var(--bleu-600);outline-offset:2px}
.estim__res{display:block;margin-top:.5rem;padding:1rem;border-radius:10px;
  background:var(--vert-50);border:1px solid #a7e0c8}
.estim__res-label{display:block;font-size:.88rem;color:var(--texte-doux)}
.estim__res-val{display:block;font-size:1.6rem;font-weight:800;color:var(--vert-700);
  line-height:1.2;margin:.15rem 0 .3rem;font-variant-numeric:tabular-nums}
.estim__res-note{display:block;font-size:.8rem;color:var(--texte-doux)}
.estim__note{margin-top:.8rem}

/* Lexique métier : un terme, ce qu'il recouvre. Le terme porte le poids
   visuel parce que c'est lui que le visiteur a tapé dans Google — il doit le
   retrouver d'un coup d'œil. */
.lexique{margin:0}
.lexique__ligne{padding:1rem 0;border-bottom:1px solid var(--bord)}
.lexique__ligne:last-child{border-bottom:0}
.lexique dt{font-weight:700;color:var(--gris-900);margin-bottom:.3rem;font-size:1.02rem}
.lexique dd{margin:0;color:var(--texte-doux);line-height:1.65}

/* Les conditions de paiement sous le montant. Apple décompose son prix
   quatorze fois par page en mensualités ; le montant ne change pas, la
   perception si. Ici l'équivalent honnête existait déjà — 30 % à la
   commande — mais vivait dans un autre bloc, à plusieurs écrans du prix. */
.fourchette-prix__paiement{
  font-size:.82rem;color:var(--texte-doux);
  margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--bleu-200,#bfdbfe);
}

/* ---------- Photos d'identification ----------
   Le site est resté sans image jusqu'ici. L'enjeu de ces règles n'est pas
   l'esthétique : c'est que l'image ne pousse pas le bouton d'appel hors de
   l'écran. D'où le ratio réservé à l'avance (aspect-ratio), qui empêche la
   page de sauter pendant le chargement, et la légende compacte. */
.photos{ display:grid; gap:1.5rem; }
.photos--duo{ grid-template-columns:1fr; }
@media (min-width:52rem){ .photos--duo{ grid-template-columns:1fr 1fr; } }

.photo{ margin:0; }
.photo img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:12px; background:var(--gris-100,#f1f5f9);
  border:1px solid var(--bordure,#e2e8f0);
}
.photo__legende{
  display:block; margin-top:.6rem;
  font-size:.92rem; line-height:1.5; color:var(--texte,#1e293b);
}
.photo__credit{
  display:block; margin-top:.35rem;
  font-size:.76rem; line-height:1.45; color:var(--texte-doux,#64748b);
}
.photo__credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ---------- Schémas dessinés ----------
   Le dessin est en SVG : il s'étire sans jamais pixeliser, et ses couleurs
   sont celles de la charte, pas des valeurs figées dans un fichier image. */
.schema{ margin:0 0 2rem; }
.sch{
  width:100%; height:auto; display:block;
  background:var(--blanc); border:1px solid var(--bordure);
  border-radius:var(--r-lg);
}
.sch__mur   { fill:var(--bleu-50); }
.sch__sol   { fill:var(--gris-100); }
.sch__plin  { fill:var(--gris-200); stroke:var(--gris-300); stroke-width:1.5; }
.sch__lame  { stroke:var(--gris-300); stroke-width:1.5; }
.sch__bois  { fill:var(--gris-300); stroke:var(--bleu-900); stroke-width:2; }
.sch__somm  { fill:var(--gris-200); stroke:var(--bleu-900); stroke-width:2; }
.sch__latte { stroke:var(--gris-400); stroke-width:2.5; }
.sch__mat   { fill:var(--blanc);     stroke:var(--bleu-900); stroke-width:2.5; }
.sch__oreiller{ fill:var(--bleu-100); stroke:var(--bleu-900); stroke-width:2; }
.sch__couture{ stroke:var(--orange-600); stroke-width:2.5; stroke-dasharray:7 5; }
.sch__objet { fill:var(--gris-100); stroke:var(--bleu-900); stroke-width:2; }
.sch__trait { stroke:var(--gris-600); stroke-width:1.8; fill:none; }
.sch__tringle{ stroke:var(--bleu-900); stroke-width:4; stroke-linecap:round; }
.sch__rideau{ fill:var(--bleu-100); stroke:var(--bleu-900); stroke-width:2; }
.sch__fil   { stroke:var(--vert-600); stroke-width:1.8; stroke-dasharray:4 4; }
.sch__pastille circle{ fill:var(--vert-600); stroke:var(--blanc); stroke-width:3.5; }
.sch__pastille text{ fill:var(--blanc); font:700 26px/1 var(--police); }
.schema__legende{
  margin-top:.6rem; font-size:.84rem; color:var(--texte-doux); text-align:center;
}

.cachettes{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
@media (min-width:46rem){ .cachettes{ grid-template-columns:1fr 1fr; gap:1.1rem 2rem; } }
.cachettes__item{ display:flex; gap:.85rem; align-items:flex-start; }
.cachettes__num{
  flex:0 0 auto; width:28px; height:28px; border-radius:var(--r-full);
  background:var(--vert-600); color:var(--blanc);
  font-weight:700; font-size:.88rem; line-height:28px; text-align:center;
}
.cachettes__item strong{ display:block; color:var(--bleu-900); }
.cachettes__item p{ margin:.2rem 0 0; font-size:.94rem; color:var(--texte-doux); }

/* Frise du calendrier */
.sch__axe   { stroke:var(--gris-300); stroke-width:4; stroke-linecap:round; }
.sch__jalon { fill:var(--bleu-700); stroke:var(--blanc); stroke-width:3; }
.sch__jalonN{ fill:var(--blanc); font:700 22px/1 var(--police); }
.sch__jalonT{ fill:var(--vert-600); font:700 22px/1 var(--police); }
.sch__jalonL{ fill:var(--texte-doux); font:400 20px/1 var(--police); }

/* Comparatif des crottes */
.sch__cadre { fill:var(--blanc); stroke:var(--bordure); stroke-width:2; }
.sch__titre { fill:var(--bleu-900); font:700 30px/1 var(--police); }
.sch__sous  { fill:var(--vert-600); font:700 22px/1 var(--police); }
.sch__note  { fill:var(--texte-doux); font:400 23px/1 var(--police); }
.sch__crotte{ fill:var(--gris-700); }
.sch__regle { stroke:var(--bleu-900); stroke-width:2.5; }

/* Cycle du moustique */
.sch__pastille2{ fill:var(--vert-600); }
.sch__pastilleN{ fill:var(--blanc); font:700 19px/1 var(--police); }
.sch__coupelle { fill:var(--gris-200); stroke:var(--bleu-900); stroke-width:2; }
.sch__eau      { fill:var(--bleu-100); stroke:none; }
.sch__sec      { stroke:var(--gris-400); stroke-width:2; stroke-dasharray:5 4; }
.sch__oeuf     { fill:var(--orange-600); }
.sch__pluie    { stroke:var(--bleu-600); stroke-width:3; stroke-linecap:round; }
.sch__larve    { fill:none; stroke:var(--bleu-700); stroke-width:3; stroke-linecap:round; }
.sch__corps    { fill:var(--gris-700); }
.sch__aile     { fill:var(--bleu-100); stroke:var(--gris-600); stroke-width:1.5; }
.sch__patte    { stroke:var(--gris-700); stroke-width:2; stroke-linecap:round; fill:none; }
.sch__fleche   { stroke:var(--gris-400); stroke-width:3; fill:none; }
.sch__pointe   { fill:var(--gris-400); }
.sch__retour   { stroke:var(--vert-600); stroke-width:3; fill:none; stroke-dasharray:8 6; }
.sch__retourT  { fill:var(--vert-700); font:700 21px/1 var(--police); }
.sch__alerte   { fill:var(--orange-50); stroke:var(--orange-600); stroke-width:2; }
.sch__alerteT  { fill:var(--orange-600); font:700 20px/1 var(--police); }
.sch__fil2     { stroke:var(--orange-600); stroke-width:2; stroke-dasharray:5 4; fill:none; }

/* Le cycle du moustique existe en deux mises en page : une ligne de quatre sur
   grand écran, deux lignes de deux sur téléphone. Une seule est affichée, et
   celle qui ne l'est pas est retirée de l'arbre d'accessibilité avec elle —
   display:none suffit, un lecteur d'écran ne lira donc pas deux fois. */
.sch--etroit{ display:none; }
@media (max-width:46rem){
  .sch--large { display:none; }
  .sch--etroit{ display:block; }
}

/* ---------- 30. Accueil v2 (maquette de refonte, façon apple.com) ----------
   Portée limitée à body.v2 : rien ne change sur les autres pages. */
.v2 .v2-centre{text-align:center}
.v2 .v2-hero{background:var(--bleu-900);color:#fff;padding:clamp(4rem,12vw,8rem) 0 clamp(3rem,8vw,5rem)}
.v2 .v2-titre{font-size:clamp(2.2rem,7vw,4.2rem);line-height:1.05;letter-spacing:-.02em;font-weight:800;max-width:16ch;margin:0 auto;color:#fff}
.v2 .v2-sous{font-size:clamp(1.05rem,2.6vw,1.35rem);color:var(--texte-doux);max-width:46ch;margin:1rem auto 0;line-height:1.5}
.v2 .v2-hero .v2-sous{color:#c9d6e5}
.v2 .v2-boutons{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2rem}
.v2 .v2-hero .btn--fantome{color:#fff;border-color:rgba(255,255,255,.5)}
.v2 .v2-preuves{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;margin:2.5rem auto 0;max-width:60rem;font-size:.92rem;color:#c9d6e5}
.v2 .v2-preuves li{display:flex;align-items:center;gap:.4rem}
.v2 .v2-preuves svg{color:var(--vert-500)}
.v2 .v2-section{padding:var(--esp) 0}
.v2 .v2-section--alt{background:var(--fond-alt)}
.v2 .v2-h2{font-size:clamp(1.9rem,5vw,3rem);letter-spacing:-.02em;line-height:1.1}
.v2 .v2-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin:2.5rem auto 0;max-width:56rem}
@media(min-width:720px){.v2 .v2-grille{grid-template-columns:repeat(4,1fr)}}
.v2 .v2-nuisible{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:1.6rem .8rem;background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg);text-decoration:none;color:var(--texte);transition:transform .15s ease,box-shadow .15s ease}
.v2 .v2-nuisible:hover{transform:translateY(-2px);box-shadow:var(--ombre-lg)}
.v2 .v2-nuisible__icone{color:var(--bleu-700)}
.v2 .v2-nuisible__nom{font-weight:700;font-size:1rem}
.v2 .v2-nuisible__prix{font-size:.9rem;color:var(--vert-700);font-weight:700}
.v2 .v2-lien{margin-top:1.75rem;font-weight:700}
.v2 .v2-etapes{list-style:none;padding:0;display:grid;gap:1.25rem;margin:2.5rem auto 0;max-width:60rem;text-align:center}
@media(min-width:720px){.v2 .v2-etapes{grid-template-columns:repeat(3,1fr)}}
.v2 .v2-etape{background:#fff;border-radius:var(--r-lg);padding:1.75rem 1.25rem;border:1px solid var(--bordure)}
.v2 .v2-etape__num{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--vert-50);color:var(--vert-700);font-weight:800;margin-bottom:.75rem}
.v2 .v2-etape h3{font-size:1.15rem}
.v2 .v2-etape p{color:var(--texte-doux);margin-top:.4rem}
.v2 .v2-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:700;color:var(--vert-500)}
.v2 .v2-prix{margin-top:1.25rem;font-size:1.5rem;font-weight:800;color:#fff}
.v2 .v2-prix span{display:block;font-size:.9rem;font-weight:500;color:#c9d6e5;margin-top:.2rem}
.v2 .v2-prix-grand{font-size:clamp(2.4rem,7vw,3.6rem);font-weight:800;letter-spacing:-.02em;margin-top:1rem;color:var(--bleu-900)}
.v2 .v2-note{margin-top:.75rem;color:var(--texte-doux);font-size:.92rem}
.v2 .v2-forts{display:grid;gap:1.25rem;margin:2.5rem auto 0;max-width:60rem}
@media(min-width:720px){.v2 .v2-forts{grid-template-columns:repeat(3,1fr)}}
.v2 .v2-fort{padding:1.5rem 1rem}
.v2 .v2-fort svg{color:var(--vert-600)}
.v2 .v2-fort h3{margin-top:.6rem;font-size:1.15rem}
.v2 .v2-fort p{color:var(--texte-doux);margin-top:.35rem}
.v2 .v2-etapes--liste{text-align:left}
.v2 .v2-duree{font-size:.85rem;color:var(--vert-700);font-weight:700;margin-top:.2rem}
.v2 .v2-details{margin-top:.75rem;border-top:1px solid var(--bordure);padding-top:.6rem}
.v2 .v2-details summary{cursor:pointer;font-weight:700;color:var(--bleu-700)}
.v2 .v2-details__corps{margin-top:.6rem;color:var(--texte-doux)}
.v2 .v2-details__corps ul{padding-left:1.1rem;display:grid;gap:.4rem}
.v2 .mesure > .v2-details{font-size:1.05rem}
.v2 .v2-prep{list-style:none;padding:0;display:grid;gap:.7rem;max-width:40rem;margin:2rem auto 0;text-align:left}
.v2 .v2-prep li{display:flex;gap:.6rem;align-items:flex-start}
.v2 .v2-prep svg{color:var(--vert-600);flex:none;margin-top:.15rem}
.v2 .v2-hero--bas{padding:clamp(3rem,8vw,5rem) 0}
.v2 .v2-titre--moyen{font-size:clamp(1.8rem,5vw,3rem)}
.v2 .entete-section{text-align:center;margin-inline:auto}
.v2 .entete-section p{margin-inline:auto}
/* Menu v2 : sous-menu Nuisibles en grille d'icônes avec prix (pages v2 seulement) */
.v2c .sousmenu--grille{grid-template-columns:repeat(3,minmax(9.5rem,1fr));gap:.4rem;padding:.75rem;min-width:32rem}
.v2c .sousmenu__carte{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.85rem .5rem;border-radius:var(--r);text-align:center}
.v2c .sousmenu__carte svg{color:var(--bleu-700)}
.v2c .sousmenu__carte span{font-weight:700;font-size:.92rem}
.v2c .sousmenu__carte small{color:var(--vert-700);font-weight:700}
.v2c .sousmenu__carte:hover{background:var(--fond-alt)}
.v2c .sousmenu__carte--lien span{color:var(--bleu-700)}
/* Pied de page v2 : même contenu, style allégé façon Apple */
.v2c .pied{background:var(--fond-alt);color:var(--texte-doux);border-top:1px solid var(--bordure)}
.v2c .pied a,.v2c .pied__contact a{color:var(--texte-doux)}
.v2c .pied a:hover{color:var(--bleu-700)}
.v2c .pied h2,.v2c .pied h3,.v2c .pied strong,.v2c .pied .logo span{color:var(--texte)}
.v2c .pied__bas{border-top-color:var(--bordure)}
.v2c .pied__mentions{color:var(--gris-600)}
.v2c .nav li.a-sousmenu:hover .sousmenu--grille,.v2c .nav li.a-sousmenu:focus-within .sousmenu--grille{display:grid}
.v2c .nav .sousmenu--grille a{padding:.85rem .5rem}
.v2c .pied__logo{color:var(--texte)}
/* Menu téléphone v2 */
.v2c .menu-mobile__grille{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.5rem 0 1.25rem}
.v2c .menu-mobile .menu-mobile__carte{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.9rem .4rem;border:1px solid var(--bordure);border-radius:var(--r);text-align:center;font-weight:700}
.v2c .menu-mobile__carte svg{color:var(--bleu-700)}
.v2c .menu-mobile__carte small{color:var(--vert-700);font-weight:700}
.v2c .menu-mobile .menu-mobile__lien{font-size:1.15rem;font-weight:700;padding:.85rem 0;border-bottom:1px solid var(--bordure)}
.v2c .menu-mobile .btn{margin-top:1.25rem}
/* Menu téléphone v2 : le bouton Appeler reste visible en bas pendant le défilement */
.v2c .menu-mobile--v2{padding-bottom:1.25rem}
.v2c .menu-mobile--v2 .btn{position:sticky;bottom:.75rem;box-shadow:var(--ombre-lg)}
.v2c .menu-mobile--v2 a.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;border-bottom:0}
/* Contact v2 */
.v2 .v2-h2--petit{font-size:clamp(1.5rem,3.5vw,2rem);margin-bottom:1.25rem}
.v2 .v2-moyens{display:grid;gap:.75rem}
@media(min-width:720px){.v2 .v2-moyens{grid-template-columns:repeat(3,1fr)}}
.v2 .v2-moyen{display:flex;flex-direction:column;gap:.35rem;padding:1.25rem;border:1px solid var(--bordure);border-radius:var(--r-lg);text-decoration:none;color:var(--texte);background:#fff;transition:box-shadow .15s ease}
.v2 .v2-moyen:hover{box-shadow:var(--ombre-lg)}
.v2 .v2-moyen svg{color:var(--vert-600)}
.v2 .v2-moyen h3{font-size:1.1rem}
.v2 .v2-moyen p{color:var(--texte-doux);font-size:.92rem}
.v2 .v2-coordonnees{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--bordure)}
@media(min-width:1024px){.v2 .v2-contact__formulaire{order:1}.v2 .v2-contact__moyens{order:2}}
/* Urgence v2 */
.v2 .v2-cas{display:grid;gap:.9rem;margin:2.25rem auto 2rem;max-width:64rem;text-align:left}
@media(min-width:720px){.v2 .v2-cas{grid-template-columns:repeat(3,1fr)}}
.v2 .v2-cas__carte{display:flex;flex-direction:column;gap:.4rem;padding:1.35rem;border:1px solid var(--bordure);border-left:4px solid var(--orange-600);border-radius:var(--r-lg);background:#fff;text-decoration:none;color:var(--texte)}
.v2 .v2-cas__carte:hover{box-shadow:var(--ombre-lg)}
.v2 .v2-cas__carte h3{font-size:1.05rem}
.v2 .v2-cas__carte p{color:var(--texte-doux);font-size:.92rem}
.v2 .v2-cas__lien{margin-top:auto;color:var(--bleu-700);font-weight:700;font-size:.9rem}
/* Villes v2 : formulaire de rappel centré sous le titre */
.v2 .v2-ville-form{max-width:34rem}
.v2 .v2-sous--petit{font-size:1rem;margin-top:1.75rem}
/* Images d'illustration (12/10/2026) — valables sur tout le site */
.bande-image{padding:clamp(1.5rem,4vw,3rem) 1rem 0}
.v2-image{margin:0 auto;max-width:72rem}
.v2-image img{display:block;width:100%;height:clamp(240px,42vw,520px);object-fit:cover;border-radius:var(--r-xl)}
.v2-image--visuel img{object-position:center 35%}
.v2-image--scene{margin:2rem auto 0;max-width:56rem}
.v2-image--scene img{height:clamp(220px,36vw,420px)}
.vignette-nuisible{display:block;object-fit:cover;border-radius:var(--r)}
.v2 .v2-nuisible{padding:0 0 1rem;overflow:hidden}
.v2 .v2-nuisible__image{display:block;width:100%}
.v2 .v2-nuisible__image .vignette-nuisible{width:100%;height:9rem;border-radius:0}
.v2c .sousmenu__carte .vignette-nuisible{width:56px;height:56px;border-radius:50%}
.v2c .menu-mobile__carte .vignette-nuisible{width:52px;height:52px;border-radius:50%}
@media(max-width:1023px){.bande-image--ordinateur{display:none}}
/* AIDA v2 */
.v2 .v2-attention{max-width:46rem}
.v2 .v2-chiffre{font-size:clamp(3.5rem,12vw,6rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--orange-600)}
.v2 .v2-chiffre__texte{font-size:clamp(1.15rem,2.8vw,1.5rem);font-weight:700;margin-top:.75rem;color:var(--texte)}
.v2 .v2-recit{margin-top:1.75rem;font-size:1.1rem;line-height:1.65;color:var(--texte-doux);font-style:italic}
.v2 .v2-risques{display:grid;gap:.6rem;max-width:44rem;margin:2rem auto 0;text-align:left}
.v2 .v2-risque{background:#fff;border:1px solid var(--bordure);border-radius:var(--r);padding:.9rem 1.1rem}
.v2 .v2-risque summary{cursor:pointer;font-weight:700}
.v2 .v2-risque p{margin-top:.5rem;color:var(--texte-doux)}
.v2 .v2-action{align-items:center;gap:2rem}
.v2 .v2-action .v2-titre,.v2 .v2-action .v2-sous{text-align:left;margin-left:0}
.v2 .v2-boutons--gauche{justify-content:flex-start}
/* Colonnes latérales (grands écrans seulement) */
.rail{display:none}
@media(min-width:1400px){
  /* Texte et colonnes forment un seul bloc centré : colonnes collées au texte. */
  body.v2c{--max:min(940px, calc(100vw - 600px))}
  body.v2c .entete,body.v2c .pied{--max:1200px}
  body.v2c .sommaire--page{display:none}
  .rail{display:block;position:fixed;top:calc(var(--header-h) + 1.5rem);width:260px;z-index:50;font-size:.88rem;transition:opacity .2s;
    max-height:calc(100vh - var(--header-h) - 3rem);overflow-y:auto;scrollbar-width:thin}
  body.rails-caches .rail{opacity:0;pointer-events:none}
  .rail--gauche{left:max(1rem, calc((100vw - var(--max)) / 2 - 284px));background:var(--bleu-50);border:1px solid var(--bordure);border-radius:var(--r-lg);padding:1.1rem}
  .rail--droite{right:max(1rem, calc((100vw - var(--max)) / 2 - 284px));background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg);padding:.5rem .5rem .8rem;box-shadow:var(--ombre)}
  .rail--droite .rail__titre,.rail--droite .rail__nuisibles,.rail--droite .rail__articles{margin-inline:.4rem}
  .rail--gauche strong{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;color:var(--bleu-900);margin-bottom:.7rem}
  .rail--gauche ol{list-style:none;padding:0;margin:0;counter-reset:rail;display:grid;gap:.15rem}
  .rail--gauche li{counter-increment:rail}
  .rail--gauche a{display:flex;gap:.55rem;padding:.35rem .5rem;border-radius:var(--r);color:var(--texte-doux);text-decoration:none;line-height:1.35}
  .rail--gauche a::before{content:counter(rail);flex:none;width:1.35rem;height:1.35rem;border-radius:50%;background:#fff;border:1px solid var(--bordure);color:var(--bleu-900);font-weight:700;font-size:.72rem;display:grid;place-items:center}
  .rail--gauche a:hover{color:var(--bleu-700);background:#fff}
  .rail--gauche a[aria-current]{color:var(--bleu-900);font-weight:700;background:#fff}
  .rail--gauche a[aria-current]::before{background:var(--vert-600);border-color:var(--vert-600);color:#fff}
  .rail__action{background:var(--bleu-900);color:#fff;border-radius:var(--r-lg);padding:1.2rem;box-shadow:var(--ombre)}
  .rail__prix{font-size:1.7rem;font-weight:800;color:#fff;line-height:1.1}
  .rail__prix--texte{font-size:1.35rem}
  .rail__petit{color:rgba(255,255,255,.75);font-size:.82rem;margin-bottom:.8rem}
  .rail__action .btn{margin-top:.5rem;font-size:.9rem}
  .rail__action .btn--wa{background:#25d366;color:#062e18}
  .rail__action .btn--wa:hover{background:#1ebe5a;color:#062e18}
  .rail__promesses{list-style:none;padding:0;margin:.9rem 0 0;display:grid;gap:.35rem;color:rgba(255,255,255,.88)}
  .rail__promesses li{display:flex;gap:.4rem;align-items:center}
  .rail__promesses svg{color:#5fd39a}
  .rail__titre{margin:1.1rem 0 .5rem;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;font-weight:700;color:var(--bleu-900)}
  .rail__nuisibles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
  .rail__nuisibles a{display:flex;align-items:center;gap:.4rem;padding:.3rem .4rem;background:#fff;border:1px solid var(--bordure);border-radius:var(--r);color:var(--bleu-900);font-weight:600;font-size:.8rem;text-decoration:none;line-height:1.2}
  .rail__nuisibles a:hover{border-color:var(--bleu-700)}
  .rail__nuisibles .vignette-nuisible{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
  .rail__articles{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
  .rail__articles a{display:block;padding:.5rem .6rem;background:#fff;border:1px solid var(--bordure);border-radius:var(--r);color:var(--bleu-900);font-size:.82rem;line-height:1.35;text-decoration:none}
  .rail__articles a:hover{border-color:var(--bleu-700)}
  .wa-flottant{display:none !important}
  /* Blog : le bloc de droite remplace le formulaire et les liens de côté de l'article. */
  body.v2c .article-disposition{grid-template-columns:1fr;justify-items:center}
  body.v2c:has(.article-disposition) .ariane ol{max-width:calc(var(--max-texte) / .83);margin-inline:auto}
  body.v2c .article-cote,body.v2c .lien-form-article,body.v2c .article-disposition .sommaire{display:none}
}

/* ---------- 31. Design façon Apple (12/10/2026) ----------
   Photo de haut de page bord à bord, barre de page, bandeau qui défile,
   apparitions douces. Portée : body.v2 (accueil et pages nuisibles). */
.v2 .v2-hero--photo{padding:0;display:grid;overflow:hidden}
.v2 .v2-hero__texte{padding:clamp(3rem,10vw,6rem) 1.25rem clamp(2.5rem,7vw,4rem);text-align:center}
.v2 .v2-hero__photo{margin:0;height:clamp(240px,55vw,420px)}
.v2 .v2-hero__photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:56rem){
  .v2 .v2-hero--photo{grid-template-columns:calc(max(0px, (100vw - var(--max)) / 2) + min(100vw, var(--max)) * .62) 1fr;min-height:min(78vh,720px)}
  .v2 .v2-hero__texte{align-self:center;text-align:left;padding:4rem clamp(2rem,4vw,4rem) 4rem calc(max(0px, (100vw - var(--max)) / 2) + 1.15rem)}
  .v2 .v2-hero__texte .v2-titre,.v2 .v2-hero__texte .v2-sous{margin-left:0}
  .v2 .v2-hero__texte .v2-titre{max-width:none;font-size:clamp(2.4rem,3.6vw,3.5rem)}
  .v2 .v2-hero__texte .v2-boutons,.v2 .v2-hero__texte .v2-preuves{justify-content:flex-start}
  .v2 .v2-hero__photo{height:auto;position:relative}
  .v2 .v2-hero__photo img{position:absolute;inset:0}
  .v2 .v2-hero__photo::before{content:"";position:absolute;inset:0 auto 0 0;width:30%;background:linear-gradient(90deg,var(--bleu-900),transparent);z-index:1}
}
/* Barre de page (comme la barre « Acheter » d'Apple) */
.barre-page{display:none}
@media(min-width:48rem){
  .barre-page{display:block;position:sticky;top:var(--header-h);z-index:800;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.8) blur(14px);border-bottom:1px solid var(--bordure)}
  .barre-page__in{display:flex;align-items:center;gap:1rem;height:48px}
  .barre-page strong{font-size:1.05rem;color:var(--bleu-900)}
  .barre-page__prix{color:var(--texte-doux);font-size:.88rem;margin-left:auto}
  .barre-page__btn{padding:.35rem .95rem;font-size:.85rem;border-radius:999px;min-height:0}
  body:has(.barre-page){scroll-padding-top:calc(var(--header-h) + 48px + 1rem)}
}
@media(min-width:1400px){
  body:has(.barre-page) .rail{top:calc(var(--header-h) + 48px + 1.5rem);max-height:calc(100vh - var(--header-h) - 48px - 3rem)}
  /* Les colonnes laissent la photo de haut de page respirer, puis apparaissent. */
  body.hero-visible .rail{opacity:0;pointer-events:none}
}
/* Bandeau de nuisibles qui défile (accueil) */
.defile{position:relative;margin-top:2.5rem}
.defile__piste{display:grid;grid-auto-flow:column;grid-auto-columns:min(72vw,260px);gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem 1.25rem 1.25rem;scrollbar-width:none;text-align:left}
.defile__piste::-webkit-scrollbar{display:none}
.v2 .defile__carte{scroll-snap-align:start;align-items:flex-start;padding:0 0 1.2rem;border-radius:22px}
.v2 .defile__carte .v2-nuisible__image{aspect-ratio:3/4;overflow:hidden}
.v2 .defile__carte .v2-nuisible__image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.v2 .defile__carte:hover .v2-nuisible__image img{transform:scale(1.04)}
.v2 .defile__carte .v2-nuisible__nom{font-size:1.15rem;padding:0 1.1rem;margin-top:.6rem}
.v2 .defile__carte .v2-nuisible__prix,.v2 .defile__carte .v2-nuisible__plus{padding:0 1.1rem}
.v2 .v2-nuisible__plus{color:var(--bleu-700);font-weight:600;font-size:.9rem}
.defile__fleches{display:none}
@media(min-width:56rem){
  .defile__piste{padding-inline:max(1.25rem, calc((100% - var(--max)) / 2))}
  .defile__fleches{display:flex;justify-content:flex-end;gap:.6rem;max-width:var(--max);margin:0 auto;padding:0 1.25rem}
  .defile__fleche{width:44px;height:44px;border-radius:50%;border:0;background:var(--gris-100,#e8edf3);color:var(--bleu-900);font-size:1.6rem;line-height:1;cursor:pointer}
  .defile__fleche:hover{background:var(--bleu-100)}
}
/* Apparitions douces au défilement (désactivées si le visiteur réduit les animations) */
html.anim .apparition{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.anim .apparition.vu{opacity:1;transform:none}
html.anim .v2-image.apparition img{transform:scale(1.06);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
html.anim .v2-image.apparition.vu img{transform:none}
@media (prefers-reduced-motion: reduce){html.anim .apparition{opacity:1;transform:none;transition:none}}

/* ---------- 32. Simulateur de prix ---------- */
.simu{background:#fff;color:var(--texte);border:1px solid var(--bordure);border-radius:22px;padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--ombre-lg);text-align:left;max-width:40rem;margin:2.5rem auto 0}
.simu__titre{font-size:1.5rem;color:var(--bleu-900);margin:0}
.simu__sous{color:var(--texte-doux);margin:.35rem 0 1.25rem}
.simu .champ label,.simu__groupe legend{font-weight:700;color:var(--bleu-900);font-size:.95rem}
.simu__groupe{border:0;padding:0;margin:0 0 1rem}
.simu__groupe legend{margin-bottom:.5rem}
.simu__puces{display:flex;flex-wrap:wrap;gap:.45rem}
.simu__puce{position:relative;cursor:pointer}
.simu__puce input{position:absolute;opacity:0;pointer-events:none}
.simu__puce span{display:inline-block;padding:.5rem .9rem;border:1px solid var(--bordure);border-radius:999px;font-size:.9rem;background:#fff;transition:background .15s,border-color .15s}
.simu__puce input:checked + span{background:var(--bleu-900);border-color:var(--bleu-900);color:#fff}
.simu__puce input:focus-visible + span{outline:3px solid var(--bleu-100);outline-offset:2px}
.simu__resultat{background:var(--bleu-50);border-radius:16px;padding:1rem 1.2rem;margin:.5rem 0 1rem}
.simu__prix{font-size:2rem;font-weight:800;color:var(--bleu-900);line-height:1.1;margin:0}
.simu__inclus{font-weight:700;color:var(--vert-700);margin:.3rem 0 0}
.simu__marche,.simu__note{color:var(--texte-doux);font-size:.88rem;margin:.3rem 0 0}
.hero .simu{margin:0}

/* ---------- 33. Identifier mon nuisible + garantie mises en avant ---------- */
.v2 .v2-hero__lien{margin-top:1.1rem;font-size:.95rem}
.v2 .v2-hero__lien a{color:#9fd8ff;text-decoration:none;font-weight:600}
.v2 .v2-hero__lien a:hover{text-decoration:underline}
.lien-identifier{text-align:center;margin-top:1.5rem;font-weight:700}
.lien-identifier a{color:var(--bleu-700)}
.rail__identifier{display:block;margin-top:.8rem;color:#9fd8ff;font-size:.85rem;font-weight:600;text-decoration:none}
.rail__identifier:hover{text-decoration:underline;color:#fff}
.pastille-garantie{position:absolute;z-index:2;right:1.25rem;bottom:1.25rem;width:112px;height:112px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--bleu-900);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font-size:.72rem;line-height:1.15;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.25);border:3px solid var(--vert-600)}
.pastille-garantie strong{display:block;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--vert-700);margin:.15rem 0}
.v2 .v2-hero__photo{position:relative}
@media(max-width:55.99rem){.pastille-garantie{width:92px;height:92px;font-size:.62rem;right:.9rem;bottom:.9rem}.pastille-garantie strong{font-size:1.05rem}}

/* ---------- 34. Pages villes : chiffres INSEE ---------- */
.chiffres-ville{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:56rem;margin:2.5rem auto 0}
@media(min-width:720px){.chiffres-ville{grid-template-columns:repeat(4,1fr)}}
.chiffres-ville div{background:var(--fond-alt);border-radius:18px;padding:1.4rem .8rem}
.chiffres-ville strong{display:block;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--bleu-900);letter-spacing:-.02em;line-height:1.05}
.chiffres-ville span{color:var(--texte-doux);font-size:.92rem}
.constats-ville{list-style:none;padding:0;max-width:44rem;margin:2rem auto 0;display:grid;gap:.8rem;text-align:left}
.constats-ville li{display:flex;gap:.6rem;align-items:flex-start}
.constats-ville svg{color:var(--vert-600);flex:none;margin-top:.2rem}

/* ---------- 35. Résumé « L'essentiel » (pages nuisibles) ---------- */
.essentiel-court{background:var(--fond-alt);border-bottom:1px solid var(--bordure)}
.essentiel-court p{max-width:56rem;margin:0 auto;padding:1rem 0;text-align:center;color:var(--texte-doux);font-size:.95rem;line-height:1.55}
.essentiel-court strong{color:var(--bleu-900)}

/* ---------- 36. Pages villes sur téléphone : la photo avant l'introduction ---------- */
@media(max-width:55.99rem){
  .v2 .v2-hero--ville{display:flex;flex-direction:column;text-align:center}
  .v2 .v2-hero--ville .v2-hero__texte{display:contents}
  .v2 .v2-hero--ville .v2-hero__texte > *{margin-left:1.25rem;margin-right:1.25rem}
  .v2 .v2-hero--ville .v2-kicker{order:1;margin-top:2.5rem}
  .v2 .v2-hero--ville .v2-titre{order:2}
  .v2 .v2-hero--ville .v2-prix{order:3}
  .v2 .v2-hero--ville .v2-boutons{order:4;margin-bottom:0}
  .v2 .v2-hero--ville .v2-hero__form{order:4;margin:1.2rem 1.25rem 2rem;align-self:stretch;max-width:none}
  .v2 .v2-hero--ville .v2-hero__photo{order:5}
  .v2 .v2-hero--ville .v2-sous--petit{order:6;margin-top:1.5rem}
  .v2 .v2-hero--ville .v2-preuves{order:7;margin-bottom:2.5rem}
}
/* Le cadre <picture> (WebP) prend toute la place de la photo. */
.v2 .v2-hero__photo picture,.v2 .defile__carte .v2-nuisible__image picture{display:block;width:100%;height:100%}

/* Page Syndics v2 : 4 documents remis */
@media(min-width:720px){.v2 .v2-forts--4{grid-template-columns:repeat(2,1fr)}}
.v2 .v2-forts--4 .v2-fort{text-align:left;background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg)}
.v2 .v2-forts--4 .v2-fort svg{color:var(--bleu-700)}

/* ---------- 37. Corrections iPhone (12/10/2026) ---------- */
/* Menu ouvert : Safari iOS décroche l'en-tête « sticky » quand le défilement est bloqué ;
   on le fixe pour que le bouton de fermeture reste visible. */
body[data-menu-ouvert] .entete{position:fixed;top:0;left:0;right:0}
/* Bandeau qui défile : cartes moins hautes sur téléphone, nom et prix visibles. */
@media(max-width:55.99rem){.v2 .defile__carte .v2-nuisible__image{aspect-ratio:4/3}}
/* Bandeau cookies plus compact sur téléphone. */
@media(max-width:640px){
  .consent{padding:.6rem .8rem}
  .consent__boite{gap:.5rem}
  .consent__titre{font-size:.9rem}
  .consent__texte p{font-size:.8rem;line-height:1.4}
  .consent__actions{width:100%}
  .consent__actions .btn{flex:1;min-height:44px;padding:.5rem .8rem}
}
/* Logo reCAPTCHA masqué : la mention obligatoire figure sous chaque formulaire. */
.grecaptcha-badge{visibility:hidden}
.page-ads .hero__prix{font-size:1.15rem;font-weight:600;color:#fff;margin-top:.7rem}
.page-ads .hero__prix strong{color:#7ee2a8}
.page-ads .hero h1+.hero__prix+.btn-groupe,.page-ads .hero h1+.btn-groupe{margin-top:.9rem}

/* 18/10/2026 — Design inspiré d'Apple (accueil et pages nuisibles, validé sur
   aperçu) : titres moins gras, gris neutres, plus d'air, boutons en pilule.
   Aucune police téléchargée : la police du système suffit. */
:root{--police:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body.v2{font-family:var(--police);font-size:17px;line-height:1.47;color:#1d1d1f}
.v2 h1,.v2 .v2-titre,.v2 .v2-h2,.v2 h2{font-weight:700;letter-spacing:-.015em}
.v2 h3{font-weight:600}
.v2 .v2-sous{color:#6e6e73}
.v2 .v2-hero .v2-sous{color:#c9d3dd}
.v2 .v2-section{padding-block:clamp(64px,9vw,112px)}
.v2 .v2-section--alt{background:#f5f5f7}
.v2 .btn{border-radius:980px;font-weight:600;box-shadow:none}
.v2 .btn:hover{transform:none;box-shadow:none}
.prix-accueil{padding-block:clamp(40px,6vw,72px)}
.prix-titre{text-align:center;margin:0;font-size:clamp(26px,4vw,40px);font-weight:700;letter-spacing:-.015em}
.prix-note{text-align:center;color:#6e6e73;margin:6px 16px 0}
.prix-depart{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:1000px;margin:clamp(24px,4vw,40px) auto 0;padding:0 16px}
.prix-depart a{background:#fff;border:1px solid #e8e8ed;border-radius:18px;padding:18px 8px;text-align:center;text-decoration:none;color:#1d1d1f}
.prix-depart small{display:block;font-size:13px;color:#6e6e73}
.prix-depart b{display:block;font-size:clamp(26px,4.4vw,44px);font-weight:700;letter-spacing:-.02em;white-space:nowrap;margin:2px 0}
.prix-depart span{display:block;font-size:15px;font-weight:600}
@media(max-width:700px){.prix-depart{grid-template-columns:repeat(2,minmax(0,1fr))}.prix-depart a:last-child{grid-column:1/-1}}
/* Accueil sans photo : texte centré sur ordinateur aussi. */
.v2-hero--centre .v2-hero__texte{text-align:center;max-width:880px;margin-inline:auto;padding:clamp(3rem,8vw,5rem) 1.25rem}
.v2 .v2-hero--centre .v2-hero__texte .v2-boutons,.v2 .v2-hero--centre .v2-hero__texte .v2-preuves{justify-content:center}
.v2 .v2-hero--centre .v2-sous{margin-inline:auto}

/* Pages villes : petites étiquettes en casse normale, comme sur apple.com (18/10/2026). */
.ville .v2-kicker,.ville .express__badge,.ville .kicker,.ville .pastille-garantie{text-transform:none;letter-spacing:0}

/* Pages « nuisible par département » (ex. Rats dans l'Essonne), 18/10/2026 :
   même esprit Apple que les pages nuisibles — police du système, gris neutres,
   haut de page sobre, étiquettes en casse normale, plus d'air, boutons pilule. */
body.dept{font-family:var(--police);font-size:17px;line-height:1.47;color:#1d1d1f;--texte-doux:#6e6e73}
.dept h1,.dept h2{font-weight:700;letter-spacing:-.015em}
.dept h3{font-weight:600}
.dept main h2,.dept main h3{color:#1d1d1f}
.dept .hero h1{color:#fff}
.dept .hero{background:var(--bleu-900)}
.dept .hero::after{display:none}
.dept .kicker{text-transform:none;letter-spacing:0;font-weight:600}
.dept .puce-preuve{background:none;border:0;padding:0;margin-right:1rem;font-weight:500;color:#c7d5e6}
.dept .section{padding-block:clamp(64px,9vw,112px)}
.dept .section--compacte{padding-block:clamp(40px,6vw,64px)}
.dept .section--alt{background:#f5f5f7}
.dept .btn{border-radius:980px;font-weight:600;box-shadow:none}
.dept .btn:hover{transform:none;box-shadow:none}

.dept .express__badge{text-transform:none;letter-spacing:0}
.dept .essentiel{background:#f5f5f7}
/* Formulaire dans le haut de page (téléphone : juste après le titre et le bouton d'appel). */
.dept .grille--2-1:not(:has(aside)){grid-template-columns:minmax(0,760px)}
@media(max-width:959px){
  .hero--dept .hero__grille{display:flex;flex-direction:column;gap:0}
  .hero--dept .hero__texte{display:contents}
  .hero--dept .kicker{order:1;align-self:flex-start}
  .hero--dept h1{order:2}
  .hero--dept .btn-groupe{order:3;margin-top:1.2rem}
  .hero--dept .hero__form{order:4;margin-top:1.2rem}
  .hero--dept .hero__accroche{order:5}
  .hero--dept .hero__texte>:not(.kicker):not(h1):not(.btn-groupe):not(.hero__accroche){order:6}
  /* Bouton secondaire (« Identifier en 1 minute »…) : après le formulaire. */
  .hero--dept .btn-groupe:has(.btn--fantome){display:contents}
  .hero--dept .btn-groupe:has(.btn--fantome)>*{order:3;margin-top:1.2rem}
  .hero--dept .btn-groupe:has(.btn--fantome)>.btn--fantome{order:5;align-self:flex-start}
}
.dept .essentiel__titre{text-transform:none;letter-spacing:0;font-weight:700}
.dept .rail>strong,.dept .rail__titre{text-transform:none;letter-spacing:0}

/* Titres sur fond bleu nuit : toujours clairs (contrôle qualité du 19/10/2026).
   La règle « .dept main h2 » les rendait presque noirs sur bleu nuit. */
.dept main :is(.bandeau-cta,.section--bleu,.mois-actuel) :is(h2,h3){color:#fff}
.section--bleu .carte{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.section--bleu .carte h3{color:#fff}
.section--bleu .carte p{color:#c7d5e6}

/* Plus aucune petite étiquette en MAJUSCULES, comme sur apple.com (contrôle
   qualité du 19/10/2026). Ne touche pas les pages d'annonces (feuille séparée). */
.kicker,
.logo span small,
.menu-mobile h2,
.pied h3,
.formule__etiquette,
.source__type,
.bandeau-preview strong,
.express__badge,
.quiz__compteur,
.quiz__badge,
.mois-actuel__badge,
.pastille-mois,
.essentiel__titre,
.constat footer,
.resume dt,
.v2 .v2-kicker,
.rail--gauche strong,
.rail__titre,
.pastille-garantie{text-transform:none!important;letter-spacing:0!important}

/* Contrastes et étiquettes (contrôle qualité du 19/10/2026) :
   adresses des sources lisibles, une seule couleur d'étiquette sur les hauts de page. */
.source__url{color:#6e6e73}
.dept .kicker--urgence{color:#8fe3c0;background:rgba(15,157,104,.16)}
.v2 .v2-hero .v2-kicker{color:#3fcf94}
/* Menu d'ordinateur : flèche et horloge sur la même ligne que le mot. */
.nav>ul>li>a{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:.3rem;white-space:nowrap}
.nav>ul>li>a svg{display:inline-block;flex:none}

/* Formulaire court dans le haut de page (accueil, nuisibles, villes) :
   visible dès l'arrivée sur téléphone (contrôle qualité du 19/10/2026). */
.v2-hero__form{margin-top:1.4rem;max-width:440px;text-align:left;color:var(--texte)}
.v2-hero--centre .v2-hero__form{margin-inline:auto}
/* Téléphone : haut de page plus serré pour que la case téléphone tienne au premier écran. */
@media(max-width:700px){.v2 .v2-hero:not(.v2-hero--ville) .v2-hero__texte{padding-top:1.6rem}.v2 .v2-hero .v2-titre{margin-bottom:.5rem}.v2 .v2-hero__form .bloc-form{margin-top:0}}
@media(max-width:700px){
  .v2 .v2-hero > .conteneur.v2-centre{padding-block:1.6rem}
  .v2 .v2-section:has(.v2-contact){padding-top:1.2rem}
  .v2 .v2-centre .v2-hero__form{margin-inline:auto}
}
.v2 .v2-centre .v2-hero__form{margin-inline:auto}


/* Harmonisation (contrôle qualité du 19/10/2026) : un seul gris de texte façon
   Apple, des titres noirs sur fond clair, une seule taille de grand titre. */
:root{--gris-900:#1d1d1f;--gris-700:#424245;--gris-600:#6e6e73;--texte:#1d1d1f;--texte-doux:#6e6e73}
h1,h2,h3,h4{color:#1d1d1f;font-weight:700}
.v2 .v2-titre,.v2 .v2-hero__texte .v2-titre,.hero h1,.dept .hero h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.08}
body.en-saisie .consent{display:none!important}
.v2-bas-action{display:flex;align-items:center;justify-content:center}
/* Formulaires dans une colonne étroite : les champs « par deux » passent l'un sous
   l'autre, ils n'étaient plus lisibles (« 06 12 34 56 ») (19/10/2026). */
.bloc-form,.simu{container-type:inline-size}
@container (max-width:460px){.champ--duo{grid-template-columns:1fr!important}}
@media(max-width:700px){.v2 .v2-hero:has(+ .bande-image--ordinateur) .v2-sous{display:none}}
/* Bouton « Être rappelé gratuitement » du bas : vert sur fond clair, blanc sur l'encadré bleu. */
.v2-bas-action .btn{background:var(--vert-600);color:#fff;border-color:var(--vert-600)}
.v2-hero--bas .v2-bas-action .btn{background:#fff;color:#1d1d1f;border-color:#fff}
/* Contact sur ordinateur : les moyens de contact l'un sous l'autre dans la petite colonne. */
@media(min-width:1024px){.v2 .v2-contact__moyens .v2-moyens{grid-template-columns:1fr}}

/* Téléphone : bandeau « Mesure d'audience » en haut, sous l'en-tête. En bas, il
   recouvrait la case téléphone et le bouton d'envoi (contrôle qualité du 19/10/2026). */
@media(max-width:1023px){.consent{top:var(--header-h,64px);bottom:auto!important;box-shadow:0 4px 16px rgba(10,37,64,.25)}}
/* Bandeau en haut (première visite seulement, tant que le client n'a pas répondu) :
   - le haut de page descend d'autant pour que le titre ne soit pas caché ;
   - un lien vers un formulaire s'arrête sous le bandeau ;
   - sur tablette, il se place sous la petite barre de page (19/10/2026). */
@media(max-width:1023px){
  html.bandeau body .v2-hero--photo:not(.v2-hero--ville) .v2-hero__texte{padding-top:calc(1.6rem + 52px)}
  html.bandeau body .v2-hero--photo:not(.v2-hero--ville) .v2-sous{display:none}
  html.bandeau body .v2-hero--ville .v2-kicker{margin-top:calc(2.5rem + 38px)}
  html.bandeau{scroll-padding-top:calc(var(--header-h) + 104px)}
}
@media(min-width:768px) and (max-width:1023px){
  html.bandeau body:has(.barre-page) .consent{top:calc(var(--header-h) + 48px)}
}
/* Ordinateur : bandeau « Mesure d'audience » en petite carte dans le coin bas
   gauche, pour ne plus couvrir le formulaire (choix du 19/10/2026). */
@media(min-width:1024px){
  .consent{left:16px;right:auto;bottom:16px;top:auto;max-width:360px;border-radius:16px;padding:.8rem .9rem;box-shadow:0 8px 28px rgba(10,37,64,.28)}
  .consent .consent__boite{flex-direction:column;align-items:stretch;gap:.6rem;max-width:none}
  .consent .consent__actions{justify-content:flex-end}
}
/* Pages à grande photo (formulaire à gauche) : la carte passe dans le coin bas droit, sur la photo. */
@media(min-width:1024px){body:has(.v2-hero--photo) .consent{left:auto;right:16px}}
/* Ordinateur (révision du 19/10) : la carte se place en haut à droite, sous l'en-tête.
   En bas, elle cachait le bouton « Appeler » ou le bouton d'envoi selon les pages. */
@media(min-width:1024px){
  .consent{top:calc(var(--header-h,64px) + 12px)!important;bottom:auto!important;left:auto!important;right:16px!important;max-width:340px}
  body:has(.barre-page) .consent{top:calc(var(--header-h,64px) + 60px)!important}
}
/* Pages au grand titre centré (Contact, Urgence, Syndics…) : la carte va en bas à droite, loin du titre et du bouton d appel. */
@media(min-width:1024px){body:has(.v2-hero > .v2-centre) .consent{top:auto!important;bottom:16px!important;left:auto!important;right:16px!important}}
/* Grands écrans (colonnes de côté présentes) : la carte revient en bas, à gauche,
   ou à droite sur les pages à grande photo, pour ne pas couvrir la colonne « Devis gratuit ». */
@media(min-width:1400px){
  .consent{top:auto!important;bottom:16px!important;left:16px!important;right:auto!important}
  body:has(.v2-hero--photo) .consent{left:auto!important;right:16px!important}
}
/* Villes au nom long : titre un peu plus petit tant que le bandeau est affiché,
   pour que la case téléphone reste au-dessus de la barre du bas. */
@media(max-width:1023px){html.bandeau body .v2-hero--ville .v2-titre{font-size:1.85rem}}
@media(min-width:1400px){.consent{max-width:296px!important}}
@media(max-width:1023px){html.bandeau body .v2-hero--ville .bloc-form__sous{display:none}html.bandeau body .v2-hero--ville .v2-boutons{margin-top:16px}html.bandeau body .v2-hero--ville .v2-prix{margin-top:12px}html.bandeau body .v2-hero--ville .express__badge{margin-bottom:8px}}
.hero__prix{margin:14px 0 4px;font-size:1.15rem;font-weight:600;color:#fff}.hero__prix strong{color:#6ee7a8;font-size:1.35rem}.hero__prix span{display:block;font-size:.85rem;font-weight:500;color:rgba(255,255,255,.75);margin-top:2px}
@media(max-width:1023px){.hero--dept .hero__texte>.hero__prix{order:2!important;margin-top:.6rem}.hero--dept h1{order:2}}
.hero__prix b{font-weight:600;white-space:nowrap}
.v2-prix--ligne{font-size:1.15rem;margin-top:.8rem}.v2-prix--ligne span{display:inline;font-size:.85rem;margin-left:.3rem}
@media(max-width:1023px){.hero__prix{margin:.5rem 0 0;font-size:1.05rem}.hero__prix strong{font-size:1.2rem}.hero__prix span{display:none}.v2-prix--ligne{margin-top:.6rem}}
@media(max-width:1023px){.v2-prix.v2-prix--ligne{font-size:1.15rem!important}.v2-prix--ligne span{display:none!important}html.bandeau body .hero--dept .hero__form .bloc-form__sous,html.bandeau body .v2-hero .v2-hero__form .bloc-form__sous{display:none}}
@media(max-width:1023px){.v2-hero--syndics .v2-centre{display:flex;flex-direction:column}.v2-hero--syndics .v2-centre>.v2-sous{order:5;margin-top:1.5rem}}
@media(max-width:1023px){.v2-hero--syndics .v2-centre>.v2-hero__form{align-self:stretch;width:100%}}
@media(min-width:1400px){body:has(.barre-page) .consent{top:auto!important}}
html.bandeau .consent[hidden]{display:block}
@media(max-width:439px){.consent--compact .consent__texte p{font-size:.7rem;line-height:1.3}.consent--compact .consent__actions .btn{padding-inline:.5rem;font-size:.76rem}.consent--compact .consent__boite{gap:.45rem}}
@media(max-width:389px){html.bandeau main{padding-top:16px}}
@media(min-width:1024px){.hero--dept .hero__texte{display:flex;flex-direction:column;align-items:flex-start}.hero--dept .hero__texte>.dispo,.hero--dept .hero__texte>.hero__preuves{order:1}.hero--dept .hero__texte>.btn-groupe{margin-top:1.1rem;margin-bottom:1.2rem}}
@media(min-width:1024px) and (max-height:820px){.hero--dept{padding-top:44px}}
@media(max-width:1023px){html.bandeau .section--404{padding-top:calc(var(--esp-section,3rem) + 110px)}}
@media(max-width:1023px) and (max-height:700px){html.bandeau .v2-hero__form .express__badge,html.bandeau .hero__form .express__badge{display:none}html.bandeau .v2-hero--centre .v2-sous,html.bandeau .v2-hero .v2-centre>.v2-sous{display:none}}
@media(max-width:1023px) and (max-height:700px){html.bandeau .v2-contact__formulaire .bloc-form__sous{display:none}html.bandeau main:has(.v2-contact__formulaire) .v2-hero{padding-bottom:2rem}html.bandeau main:has(.v2-hero--syndics) .ariane{display:none}}