/* ──────────────────────────────────────────────────────────────────────────
   domiceo-ds.css — Design system Domiceo
   GÉNÉRÉ automatiquement depuis accueil-v2/index.html.
   SOURCE DE VÉRITÉ : accueil-v2/index.html. Ne pas éditer ce fichier à la main :
   le régénérer via scripts/build/extract-ds.py après toute évolution de la home.

   Palette par défaut = ménage à domicile (bleu #17638A).
   Chaque service surcharge les tokens --blue* : voir assets/css/palettes/.
   ────────────────────────────────────────────────────────────────────────── */

/* ============================================================
   DOMICEO — Accueil 2.0 (brouillon)
   Design system repris de la LP SEA « offre rentrée » :
   couleurs bleu #17638A · ambre #F7B731 · paper #FEFEF8
   typo Fraunces (display) + Hanken Grotesk (UI/corps)
   Différence de fonction : la LP est mono-offre, l'accueil est un HUB —
   il route vers les 7 services et convertit ceux qui sont déjà décidés.
   ============================================================ */

:root{
  --blue:        #17638A;
  --blue-dark:   #1F5C7B;
  --blue-deep:   #15527A;
  --blue-ink:    #0E3F5C;
  --blue-light:  #EDF5FF;
  --blue-tint:   #F5FAFF;
  --amber:       #F7B731;
  --amber-soft:  #FCE9BE;
  --amber-ink:   #8A5A00;
  --paper:       #FEFEF8;
  --ink:         #101828;
  --muted:       #475467;
  --muted-soft:  #667085;
  --line:        #E6E4DA;
  --line-blue:   #D5E4F0;
  --white:       #ffffff;

  --shadow-sm:  0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-md:  0 8px 24px -6px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
  --shadow-lg:  0 24px 60px -12px rgba(14,63,92,.22), 0 8px 20px -8px rgba(16,24,40,.14);
  --shadow-amber: 0 14px 40px -12px rgba(247,183,49,.55);

  --r:    16px;
  --r-sm: 11px;
  --r-lg: 24px;

  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1160px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--ff-body);color:var(--ink);background:var(--paper);
  line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px;}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200;}
.skip:focus{left:0;}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px;}

/* ---------- Boutons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-body);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  border:none;border-radius:var(--r-sm);padding:17px 26px;min-height:56px;text-align:center;
  transition:transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  will-change:transform;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 24px -8px rgba(23,99,138,.6);}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(23,99,138,.7);}
.btn-primary:active{transform:translateY(0);}
.btn-amber{background:var(--amber);color:#3a2a00;box-shadow:var(--shadow-amber);}
.btn-amber:hover{background:#f6ac16;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--blue-ink);border:1.5px solid var(--line-blue);}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-light);}
.btn svg{flex:0 0 auto;}
.btn-block{width:100%;}
.btn.is-loading{pointer-events:none;opacity:.85;}
.btn.is-loading .btn-label{visibility:hidden;}
.btn.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(254,254,248,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;height:66px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand img{width:40px;height:40px;border-radius:9px;}
.brand__name{font-family:var(--ff-display);font-weight:700;font-size:1.28rem;letter-spacing:-.02em;color:var(--blue-ink);}
/* Navigation : absente de la LP (mono-objectif) mais indispensable sur un accueil,
   qui doit router vers les 7 services. Masquée sous 980px : sur mobile la barre
   CTA basse et les sections font le travail, un burger serait un geste de plus. */
.mainnav{display:none;gap:4px;}
.mainnav a{
  font-weight:600;font-size:.96rem;color:var(--muted);padding:9px 13px;border-radius:9px;
  transition:color .18s, background .18s;
}
.mainnav a:hover{color:var(--blue-ink);background:var(--blue-light);}
.topbar__actions{display:flex;align-items:center;gap:10px;}
.tel-link{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-ink);
  padding:9px 14px;border-radius:10px;font-size:1.02rem;white-space:nowrap;transition:background .2s;
}
.tel-link:hover{background:var(--blue-light);}
.tel-link svg{color:var(--blue);}
.topbar .btn{display:none;padding:11px 20px;min-height:44px;font-size:.95rem;}

/* Bandeau de valeur — DANS le header collant (un seul élément sticky, aucun
   offset à calculer). Ambre et non rouge : sur un service à la personne le rouge
   lit « promo agressive », l'ambre lit « information qui compte ».
   Contrairement à la LP, pas de compte à rebours : un accueil n'a pas de date
   de fin, et un décompte permanent finit par se lire comme un décor. */
.valuebar{
  background:var(--amber);border-top:1px solid rgba(58,42,0,.14);
  color:#3a2a00;font-weight:700;font-size:.78rem;line-height:1.25;
  text-align:center;padding:5px 12px;letter-spacing:-.015em;
}
.valuebar b{font-weight:800;}

/* ---------- HERO ---------- */
.hero{position:relative;padding:64px 0 152px;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Mobile : la photo EN FOND, assombrie. Le voile est quasi uniforme et non
     dégressif : sur la première vue mobile il y a du texte de haut en bas, donc
     aucune zone n'est « libre » pour laisser la photo en clair. Teinte bleu nuit
     plutôt que noir pur — plus proche de la charte que le voile noir de la prod. */
  background:
    /* Halo derrière le bloc de texte — couche de fond, donc pleine hauteur,
       aucun bord à voir. C'est lui qui porte le contraste ; le voile général
       en dessous peut rester léger et laisser la pièce lisible. */
    radial-gradient(126% 72% at 30% 34%,
      rgba(6,20,34,.52) 0%, rgba(6,20,34,.36) 46%, rgba(6,20,34,.15) 72%, transparent 90%),
    linear-gradient(180deg,
      rgba(8,26,40,.24) 0%,
      rgba(8,26,40,.30) 34%,
      rgba(9,30,46,.44) 66%,
      rgba(9,30,46,.38) 82%,
      rgba(8,26,40,.16) 100%),
    url("/data/hero/domiceo-hero-mobile.webp") center 44%/cover no-repeat;
  background-color:#0B2234;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:34px;align-items:start;}

.hero h1{
  font-family:var(--ff-display);font-optical-sizing:auto;
  font-weight:600;font-size:clamp(2rem,5.8vw,3.4rem);line-height:1.04;
  letter-spacing:-.025em;margin:14px 0 0;color:#fff;
  text-shadow:0 1px 20px rgba(6,20,32,.5);
}
/* Sur fond sombre le surlignage ambre est impossible : blanc sur ambre = 1,9:1.
   L'accent passe donc dans la COULEUR du texte — ambre sur bleu nuit ≈ 8:1. */
.hero h1 .mark{color:var(--amber);font-weight:700;white-space:nowrap;}
.hero__sub{font-size:1.04rem;color:rgba(255,255,255,.92);margin:13px 0 0;max-width:40ch;
  text-shadow:0 1px 14px rgba(6,20,32,.55);}
.hero__sub b{color:#fff;font-weight:700;}
/* Amorce code postal (mobile) : le premier champ visible sans aucun geste.
   Le bottom sheet économise de la place au prix du seul geste que la majorité
   des visiteurs mobiles ne font pas — d'où ce champ en flux. */
.hero__quickcp{margin-top:18px;}
.hero__quickcp label{display:block;font-weight:600;font-size:.9rem;margin-bottom:5px;color:#fff;
  text-shadow:0 1px 12px rgba(6,20,32,.6);}
.hero__quickcp .req{color:var(--amber);}
.hero__quickcp-row{display:flex;flex-direction:column;gap:12px;}
.hero__quickcp-row input{
  width:100%;min-width:0;font-family:inherit;font-size:1rem;color:var(--ink);
  padding:14px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);min-height:54px;transition:border-color .18s, box-shadow .18s;
}
.hero__quickcp-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);}
.hero__quickcp-row .btn{width:100%;justify-content:center;min-height:54px;padding:14px 22px;}
.hero__quickcp .err-msg{display:none;margin-top:7px;font-size:.85rem;color:#FDA29B;font-weight:600;}
.hero__quickcp.has-error .err-msg{display:block;}
.hero__quickcp.has-error input{border-color:#FDA29B;box-shadow:0 0 0 3px rgba(253,162,155,.25);}
@media (min-width:980px){ .hero__quickcp{display:none;} }
.hero__microline{font-size:.85rem;line-height:1.45;color:rgba(255,255,255,.75);margin:9px 0 0;text-align:center;}

/* Pastille d'avis : le PNG fourni est transparent et son « 5/5 » est gris clair
   — conçu pour un fond sombre, c'est le cas du hero à toutes les largeurs. */
.rating-pill--img{
  display:inline-flex;align-items:center;gap:11px;margin:0 0 2px;
  background:none;border:0;padding:0;box-shadow:none;
}
.rating-pill--img img{width:122px;height:33px;flex:0 0 auto;}

/* ---------- Carte formulaire ---------- */
.form-card{
  position:relative;background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);border:1px solid var(--line);overflow:hidden;
}
.form-card__head{
  background:linear-gradient(155deg,var(--blue),var(--blue-deep));
  color:#fff;padding:22px 26px 20px;position:relative;
}
.form-card__head::after{
  content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,183,49,.4),transparent 70%);
}
.form-card__head h2{font-family:var(--ff-display);font-weight:600;font-size:1.42rem;letter-spacing:-.02em;margin:0;line-height:1.1;}
.form-card__head p{margin:7px 0 0;font-size:.96rem;color:#DCEEFF;}

/* ── Bottom sheet (mobile) ── */
.form-backdrop{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(16,24,40,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.form-backdrop.is-open{display:block;}
.form-col{display:flex;flex-direction:column;}
@media (max-width:979px){
  .form-col{
    position:fixed;bottom:0;left:0;right:0;z-index:301;
    max-height:92vh;overflow-y:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;
    background:var(--paper);box-shadow:0 -12px 40px -12px rgba(16,24,40,.28);
    transform:translateY(100%);transition:transform .35s var(--ease);
    padding:0 0 env(safe-area-inset-bottom);display:flex!important;
  }
  .form-col.is-open{transform:translateY(0);}
  .form-col .form-card{border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:none;border:none;}
}
.sheet-close{
  display:none;position:absolute;top:10px;right:12px;z-index:310;
  width:34px;height:34px;border-radius:50%;border:none;
  background:#E6E4DA;color:var(--muted);font-size:1.4rem;line-height:1;place-items:center;cursor:pointer;
}
.sheet-close:hover{background:#d5d3c8;color:var(--ink);}
@media (max-width:979px){
  .form-col.is-open .sheet-close{display:grid;}
  .hero.has-sheet{z-index:200!important;overflow:visible!important;}
}
.form-body{padding:22px 26px 26px;}

.form-progress{display:flex;gap:12px;margin-bottom:20px;}
.form-progress__seg{flex:1;display:flex;flex-direction:column;gap:8px;}
.form-progress__bar{height:6px;border-radius:99px;background:var(--line);transition:background .4s var(--ease);}
.form-progress__seg.is-on .form-progress__bar{background:var(--blue);}
.form-progress__lbl{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-soft);transition:color .4s var(--ease);}
.form-progress__seg.is-on .form-progress__lbl{color:var(--blue-ink);}
.form-progress__seg.is-done .form-progress__lbl::before{content:"✓";margin-right:5px;font-weight:900;color:var(--blue);}

.form-step[hidden]{display:none;}
.form-step{animation:stepIn .4s var(--ease);}
@keyframes stepIn{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.form-step{animation:none;}}
.form-nav{display:flex;gap:12px;align-items:stretch;margin-top:6px;}
.form-nav .btn-back{flex:0 0 auto;width:48px;padding:0;}
.form-nav .btn-submit{flex:1 1 auto;}

.field{margin-bottom:15px;}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--ink);}
.field .req{color:var(--blue);}
.field .opt{color:#98A2B3;font-weight:400;font-size:.85em;text-transform:lowercase;}
.field input,.field select{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  padding:14px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);transition:border-color .18s, box-shadow .18s, background .18s;min-height:52px;
}
.field input::placeholder{color:#98A2B3;}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(23,99,138,.12);}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2317638A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:42px;cursor:pointer;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field .err-msg{display:none;color:#B42318;font-size:.83rem;margin-top:5px;font-weight:600;}
.field.has-error input,.field.has-error select{border-color:#B42318;background:#FFFBFA;}
.field.has-error .err-msg{display:block;}

.privacy{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;color:var(--muted-soft);font-size:.83rem;}
.privacy svg{flex:0 0 auto;color:#12B76A;}
.form-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--blue-ink);background:var(--blue-light);padding:6px 11px;border-radius:99px;}
.chip svg{color:var(--blue);}
.no-spam{margin:0 0 12px;font-size:.87rem;font-weight:500;color:var(--muted);text-align:center;}
.consent{margin-top:12px;font-size:.78rem;color:var(--muted-soft);line-height:1.5;text-align:center;}
.form-step .consent{text-align:left;margin-bottom:0;}
.consent a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:2px;}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}

.form-success{display:none;padding:40px 28px 44px;text-align:center;}
.form-success.on{display:block;animation:pop .5s var(--ease);}
@keyframes pop{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:scale(1);}}
.form-success .tick{width:74px;height:74px;border-radius:50%;background:#E5F6ED;display:grid;place-items:center;margin:0 auto 18px;}
.form-success .tick svg{color:#12B76A;}
.form-success h3{font-family:var(--ff-display);font-weight:600;font-size:1.6rem;margin:0 0 8px;letter-spacing:-.02em;}
.form-success p{color:var(--muted);margin:0 auto;max-width:34ch;}
.form-success .tel-cta{margin-top:22px;}

/* Récompense de zone : le code postal saisi reçoit sa réponse AVANT qu'on
   demande le téléphone. [hidden] explicite car display:flex le bat. */
.zone-ok{
  display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;
  background:#E5F6ED;border:1px solid #B7E4CB;border-radius:var(--r-sm);
  font-size:.92rem;line-height:1.45;color:#0B5B36;
}
.zone-ok[hidden]{display:none;}
.zone-ok svg{flex:0 0 auto;color:#12B76A;margin-top:2px;}
.zone-ok b{font-weight:800;}
/* Hors zone : on le dit tout de suite plutôt que de collecter un lead inservable. */
.form-outzone{display:none;padding:34px 26px 30px;text-align:center;}
.form-outzone.on{display:block;animation:pop .5s var(--ease);}
.form-outzone .ic{width:60px;height:60px;border-radius:50%;background:#FEF0C7;display:grid;place-items:center;margin:0 auto 16px;}
.form-outzone .ic svg{color:#B54708;}
.form-outzone h3{font-family:var(--ff-display);font-weight:600;font-size:1.4rem;margin:0 0 8px;letter-spacing:-.02em;}
.form-outzone p{color:var(--muted);margin:0 auto 18px;max-width:34ch;font-size:.96rem;}

/* ---------- Sections génériques ---------- */
.section{padding:60px 0;position:relative;}
.section--tint{background:var(--blue-light);}
.section--paper{background:var(--paper);}
.eyebrow{
  display:inline-block;font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-ink);margin-bottom:12px;
}
.section h2.title{
  font-family:var(--ff-display);font-weight:600;font-size:clamp(1.7rem,4.6vw,2.5rem);
  line-height:1.08;letter-spacing:-.025em;margin:0 0 14px;max-width:22ch;
}
.section .lead{font-size:1.1rem;color:var(--muted);max-width:52ch;margin:0 0 6px;}
.center-cta{text-align:center;margin-top:38px;}

/* ---------- Bande de faits (sous le hero) ----------
   Spécifique à l'accueil : le visiteur SEO arrive sans contexte publicitaire,
   il lui faut savoir en une ligne à qui il parle. Quatre faits vérifiables,
   pas de superlatif. */
.factbar{
  background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.factbar__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);}
.fact{background:var(--white);padding:20px 18px;display:flex;gap:13px;align-items:flex-start;}
.fact svg{flex:0 0 auto;color:var(--blue);margin-top:3px;}
.fact .v{font-family:var(--ff-display);font-weight:700;font-size:1.25rem;line-height:1.1;letter-spacing:-.02em;color:var(--blue-ink);display:block;}
.fact .l{font-size:.87rem;color:var(--muted);line-height:1.35;display:block;margin-top:3px;}

/* ---------- Cartes service (le cœur d'un accueil) ----------
   La LP n'en a pas besoin : elle vend une seule chose. Ici chaque carte est
   un LIEN vers le hub du service — c'est le maillage interne de la page la
   plus liée du site, donc l'endroit où le PageRank se distribue. */
.svc-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:32px;}
.svc-card{
  position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px 22px;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-blue);}
.svc-card__ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;}
.svc-card__ic.amber{background:var(--amber-soft);color:var(--amber-ink);}
.svc-card__ic.blue{background:var(--blue-light);color:var(--blue);}
.svc-card h3{font-family:var(--ff-display);font-weight:600;font-size:1.34rem;letter-spacing:-.02em;margin:0 0 10px;}
.svc-card ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;}
.svc-card li{display:flex;gap:9px;align-items:flex-start;font-size:.97rem;color:var(--muted);line-height:1.45;}
.svc-card li svg{flex:0 0 auto;color:#12B76A;margin-top:4px;}
.svc-card__more{
  margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.96rem;color:var(--blue);
}
.svc-card__more svg{transition:transform .2s var(--ease);}
.svc-card:hover .svc-card__more svg{transform:translateX(4px);}
.svc-card__tag{
  position:absolute;top:16px;right:16px;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber-ink);background:var(--amber-soft);
  padding:4px 10px;border-radius:99px;
}

/* ---------- Prestations : onglets Particuliers / Professionnels ----------
   Un seul bloc au lieu de deux sections empilees : casse le rythme "carte
   blanche sur fond clair" et raccourcit le scroll mobile d'un ecran entier.
   Bascule 100% CSS (radio + :checked), le panneau pro passe sur fond navy. */
.presta__radio{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;}
.presta__bg{
  position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:linear-gradient(155deg,var(--blue),var(--blue-deep) 70%,var(--blue-ink));
  transition:opacity .45s var(--ease);
}
#tab-pro:checked ~ .presta__bg{opacity:1;}
.presta__tabs{
  display:inline-flex;gap:4px;padding:5px;border-radius:99px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);margin-bottom:28px;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.presta__tab{
  cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:0 20px;
  border-radius:99px;font-weight:700;font-size:.96rem;color:var(--muted-soft);
  transition:background .25s var(--ease), color .25s var(--ease);
}
#tab-part:checked ~ .container .presta__tab[for="tab-part"]{background:var(--blue);color:#fff;}
#tab-pro:checked  ~ .container .presta__tab[for="tab-pro"]{background:var(--amber);color:#3a2a00;}
#tab-part:focus-visible ~ .container .presta__tab[for="tab-part"],
#tab-pro:focus-visible  ~ .container .presta__tab[for="tab-pro"]{outline:2px solid var(--blue);outline-offset:3px;}
.presta__panel{display:none;}
#tab-part:checked ~ .container .presta__panel--part{display:block;}
#tab-pro:checked  ~ .container .presta__panel--pro{display:block;}
/* Panneau pro sur fond sombre : on redefinit la couleur ET les variables, car
   h2/h3 heritent la couleur calculee de body (le var() seul ne suffirait pas). */
#tab-pro:checked ~ .container{color:#fff;--ink:#fff;--muted:#D7E9F7;--muted-soft:#AEC9DC;}
#tab-pro:checked ~ .container .presta__tabs{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);}
#tab-pro:checked ~ .container .presta__tab{color:#CFE4F3;}
#tab-pro:checked ~ .container .eyebrow{color:var(--amber);}
#tab-pro:checked ~ .container .svc-card{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);box-shadow:none;}
#tab-pro:checked ~ .container .svc-card:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);box-shadow:none;}
#tab-pro:checked ~ .container .svc-card__ic.blue,
#tab-pro:checked ~ .container .svc-card__ic.amber{background:rgba(255,255,255,.14);color:#fff;}
#tab-pro:checked ~ .container .svc-card__more{color:var(--amber);}

/* ---------- Simulateur de tarif (remplace le tableau statique) ----------
   Le trafic SEA arrive sur des requetes prix : manipuler le chiffre soi-meme
   vaut mieux que le lire. Le tableau reste en <details> pour le texte indexe. */
.simu{margin:30px 0 0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:22px 20px 18px;}
.simu__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;}
.simu__q{font-weight:700;color:var(--muted);font-size:.95rem;}
.simu__val{font-family:var(--ff-display);font-weight:600;font-size:1.25rem;color:var(--blue-ink);}
.simu__range{width:100%;height:44px;margin:2px 0 0;accent-color:var(--blue);}
.simu__scale{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted-soft);margin:-4px 2px 18px;}
.simu__figs{display:grid;grid-template-columns:1fr;gap:11px;}
.simu__fig{background:var(--blue-tint);border:1px solid var(--line-blue);border-radius:var(--r-sm);
  padding:13px 16px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.simu__fig b{font-family:var(--ff-display);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;color:var(--blue-ink);}
.simu__fig small{color:var(--muted-soft);font-size:.85rem;text-align:right;}
.simu__fig--hit{background:var(--amber-soft);border-color:var(--amber);}
.simu__fig--hit b{color:#5C3D00;font-size:1.85rem;}
.simu__fig--hit small{color:var(--amber-ink);font-weight:600;}
.simu__pair{display:inline-flex;align-items:baseline;gap:9px;min-width:0;}
/* #8A5A00 sur #FCE9BE = 4,95:1, au-dessus du 4,5:1 du petit texte : pas d'opacite. */
.simu__pair s{font-size:.98rem;font-weight:600;color:var(--amber-ink);text-decoration-thickness:1.5px;}
.simu__foot{margin:16px 2px 0;font-size:.88rem;color:var(--muted-soft);line-height:1.5;}
.simu__foot b{color:var(--ink);}
.simu__more{margin-top:14px;}
.simu__more .tarifs{margin:0;border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--line);}
@media (min-width:760px){
  .simu__figs{grid-template-columns:minmax(0,340px);}
  .simu__fig{flex-direction:column;align-items:flex-start;gap:2px;}
  .simu__fig small{text-align:left;}
}

/* ---------- Tarifs ---------- */
.tarifs{width:100%;border-collapse:collapse;margin:30px 0 0;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);}
.tarifs th{font-size:.85rem;font-weight:600;text-align:left;color:var(--muted-soft);
  padding:12px 18px;background:var(--blue-tint);border-bottom:1px solid var(--line-blue);}
.tarifs td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:1.02rem;color:var(--ink);}
.tarifs tr:last-child td{border-bottom:0;}
.tarifs th:not(:first-child),.tarifs td:not(:first-child){text-align:right;}
.tarifs__hit td{background:var(--amber-soft);font-weight:700;}
.tarifs__note{margin:10px 2px 0;font-size:.82rem;color:var(--muted-soft);}
.tarifs__wrap{overflow-x:auto;}
.tarifs__facts{display:grid;gap:14px;margin-top:22px;}
.tarifs__facts details,.simu__more{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);}
.tarifs__facts summary,.simu__more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 22px;font-family:var(--ff-display);font-weight:600;font-size:1.15rem;color:var(--blue-ink);}
.tarifs__facts summary::-webkit-details-marker,.simu__more>summary::-webkit-details-marker{display:none;}
.tarifs__facts summary::after,.simu__more>summary::after{content:"+";flex:0 0 auto;font-family:var(--ff-body);font-weight:600;font-size:1.4rem;line-height:1;color:var(--blue);transition:transform .2s var(--ease);}
.tarifs__facts details[open] summary::after,.simu__more[open]>summary::after{transform:rotate(45deg);}
.tarifs__facts p{margin:0;color:var(--muted);font-size:.98rem;padding:0 22px 18px;}
.tarifs__facts b{color:var(--ink);}
@media (min-width:760px){.tarifs__facts{grid-template-columns:1fr 1fr;}}

/* ---------- Pourquoi Domiceo (split photo + arguments) ---------- */
.why-split{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:34px;align-items:center;}
.why-split__intro,.why-list{min-width:0;}
.why-split__media{position:relative;margin:22px 0 0;}
.why-split__media img{width:100%;height:auto;display:block;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--line-blue);}
.why-split__badge{
  position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border:1px solid var(--line);
  border-radius:99px;padding:9px 15px;box-shadow:var(--shadow-md);font-weight:700;font-size:.85rem;color:var(--blue-ink);
}
.why-split__badge svg{flex:0 0 auto;color:var(--blue);}
.why-list{display:grid;}
.why-point{display:flex;gap:15px;align-items:flex-start;padding:17px 0;border-bottom:1px solid var(--line-blue);}
.why-point:first-child{padding-top:0;}
.why-point:last-child{border-bottom:0;padding-bottom:0;}
.why-point__ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--blue);display:grid;place-items:center;}
.why-point__ic svg{color:#fff;}
.why-point h3{font-weight:700;font-size:1.13rem;margin:0 0 4px;letter-spacing:-.01em;}
.why-point p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.5;}

.guarantee{
  margin-top:30px;display:flex;gap:18px;align-items:flex-start;
  background:linear-gradient(150deg,#E5F6ED,#F2FBF6);border:1px solid #B7E4C7;border-radius:var(--r);padding:22px 24px;
}
.guarantee__ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:#12B76A;display:grid;place-items:center;}
.guarantee__ic svg{color:#fff;}
.guarantee h3{margin:0 0 5px;font-weight:700;font-size:1.14rem;letter-spacing:-.01em;color:#08653A;}
.guarantee p{margin:0;color:#12603F;font-size:.98rem;line-height:1.5;}

/* ---------- Étapes ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:16px;margin-top:36px;counter-reset:step;}
.step{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 24px;box-shadow:var(--shadow-sm);}
.step__num{
  counter-increment:step;font-family:var(--ff-display);font-weight:700;font-size:1.05rem;
  width:44px;height:44px;border-radius:12px;background:var(--amber);color:#3a2a00;display:grid;place-items:center;margin-bottom:15px;
}
.step__num::before{content:counter(step);}
.step h3{font-weight:700;font-size:1.16rem;margin:0 0 6px;letter-spacing:-.01em;}
.step p{margin:0;color:var(--muted);font-size:.99rem;}

/* ---------- Témoignages ---------- */
.tm-head{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;margin-bottom:30px;}
.tm-score{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--line-blue);border-radius:var(--r);padding:16px 20px;box-shadow:var(--shadow-sm);}
.tm-score .num{font-family:var(--ff-display);font-weight:700;font-size:2.7rem;line-height:1;color:var(--blue-ink);}
.tm-score .meta{display:flex;flex-direction:column;gap:3px;}
.tm-score .stars{color:var(--amber);letter-spacing:2px;font-size:1.05rem;}
.tm-score .src{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;color:var(--muted);}
.tm-score .src svg{width:17px;height:17px;flex:0 0 auto;}
.tm-score .src a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:2px;}
.tm-grid{display:grid;grid-template-columns:1fr;gap:20px;}
.tm-card{margin:0;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;box-shadow:var(--shadow-sm);}
.tm-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.tm-card .stars{color:var(--amber);letter-spacing:1.5px;font-size:.98rem;}
.tm-card .glogo{width:19px;height:19px;flex:0 0 auto;opacity:.9;}
.tm-card blockquote{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink);}
.tm-card blockquote b{color:var(--blue-ink);font-weight:700;}
.tm-card__by{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:11px;}
.tm-card__av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--ff-display);font-weight:700;font-size:1.05rem;color:#fff;background:var(--blue);}
.tm-card__id{display:flex;flex-direction:column;line-height:1.2;}
.tm-card__id .n{font-weight:700;font-size:.96rem;}
.tm-card__id .d{font-size:.82rem;color:var(--muted-soft);}

/* ---------- Zones ---------- */
.zones__list{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none;}
.zones__list li{font-size:.92rem;color:var(--blue-ink);background:var(--blue-light);border:1px solid var(--line);border-radius:999px;padding:5px 12px;}
.zones__note{font-size:.95rem;color:var(--muted);margin:20px 0 0;}
.zones__depts{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none;}
.zones__depts li{
  font-weight:700;font-size:.9rem;color:var(--blue-ink);background:var(--white);
  border:1px solid var(--line-blue);border-radius:var(--r-sm);padding:10px 14px;box-shadow:var(--shadow-sm);
}
.zones__depts b{font-family:var(--ff-display);font-size:1.02rem;margin-right:6px;color:var(--blue);}

/* ---------- Bandeau final ---------- */
.finalcta{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,var(--blue),var(--blue-deep) 70%,var(--blue-ink));
  color:#fff;padding:64px 0;text-align:center;
}
.finalcta::before{
  content:"";position:absolute;right:-8%;top:-30%;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,183,49,.24),transparent 66%);pointer-events:none;
}
.finalcta .container{position:relative;z-index:1;}
.finalcta h2{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.85rem,5.4vw,2.9rem);line-height:1.06;letter-spacing:-.025em;margin:0 auto 14px;max-width:18ch;}
.finalcta p{font-size:1.12rem;color:#DCEEFF;margin:0 auto 26px;max-width:38ch;}
.finalcta .btn-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.finalcta .btn-row .btn{flex:0 0 100%;min-width:0;}
.finalcta .tel-inline{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:#fff;padding:16px 24px;border-radius:var(--r-sm);border:1.5px solid rgba(255,255,255,.4);min-height:56px;flex:0 0 100%;justify-content:center;}
.finalcta .tel-inline:hover{background:rgba(255,255,255,.1);}
/* Trois repères de réassurance à la place du compte à rebours de la LP :
   même emplacement, même poids visuel, mais un accueil n'a pas d'échéance. */
.finalcta__reassure{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 28px;padding:0;list-style:none;}
.finalcta__reassure li{
  display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:99px;padding:9px 16px;backdrop-filter:blur(4px);
}
.finalcta__reassure svg{flex:0 0 auto;color:var(--amber);}

/* ---------- Footer ---------- */
.foot{background:var(--paper);border-top:1px solid var(--line);padding:38px 0 108px;color:var(--muted);font-size:.9rem;}
.foot__inner{display:grid;gap:26px;}
.foot .brand__name{font-size:1.1rem;}
.foot__legal{line-height:1.7;}
.foot__legal b{color:var(--ink);}
.foot a{color:var(--blue-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.foot .tel-link{padding:0;font-size:1rem;}
.foot__cols{display:grid;gap:22px;}
.foot__col h4{font-family:var(--ff-display);font-weight:600;font-size:1.02rem;margin:0 0 9px;color:var(--blue-ink);}
.foot__col ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;}
.foot__col a{font-weight:500;text-decoration:none;color:var(--muted);}
.foot__col a:hover{color:var(--blue-ink);text-decoration:underline;}
.foot__bottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem;}

/* ---------- Barre CTA mobile ---------- */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;gap:10px;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(254,254,248,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px -12px rgba(16,24,40,.25);
  /* Masquée tant que l'amorce du hero est à l'écran : deux appels à l'action
     concurrents au même moment, c'est un choix de trop. */
  transform:translateY(115%);transition:transform .28s var(--ease);visibility:hidden;
}
.mobilebar.is-visible{transform:none;visibility:visible;}
@media (prefers-reduced-motion:reduce){.mobilebar{transition:none;}}
.mobilebar .btn{flex:1;min-height:52px;padding:14px;font-size:1rem;}
.mobilebar .call{flex:0 0 auto;width:56px;padding:0;background:var(--blue-light);color:var(--blue);border:1.5px solid var(--line-blue);}

/* ---------- Révélations ---------- */
.reveal{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .6s var(--ease), transform .6s var(--ease);will-change:opacity,transform;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important;}}
.hero .fade{opacity:0;transform:translateY(18px);animation:fadeUp .7s var(--ease) forwards;}
.hero .fade.d1{animation-delay:.05s;}
.hero .fade.d2{animation-delay:.15s;}
.hero .fade.d3{animation-delay:.25s;}
.hero .fade.d4{animation-delay:.35s;}
.hero .fade.d5{animation-delay:.45s;}
.hero .form-card{opacity:0;transform:translateY(22px) scale(.99);animation:fadeUp .8s var(--ease) .3s forwards;}
@keyframes fadeUp{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.hero .fade,.hero .form-card{opacity:1;transform:none;animation:none;}}

/* ---------- Fonds photo diffusés (mêmes masques radiaux que la LP) ---------- */
#avis{overflow:hidden;isolation:isolate;}
#avis > .container{position:relative;z-index:1;}
#avis::before{
  content:"";position:absolute;z-index:0;pointer-events:none;left:0;bottom:0;width:80%;height:min(52%,300px);
  background:url("../data/gmb-photos/domiceo-gmb-08.jpg") bottom left/cover no-repeat;
  -webkit-mask-image:radial-gradient(135% 130% at 0% 100%, #000 18%, rgba(0,0,0,.5) 50%, transparent 78%);
          mask-image:radial-gradient(135% 130% at 0% 100%, #000 18%, rgba(0,0,0,.5) 50%, transparent 78%);
  opacity:.19;
}
#particuliers{overflow:hidden;isolation:isolate;}
#particuliers > .container{position:relative;z-index:1;}
#particuliers::before{
  content:"";position:absolute;z-index:0;pointer-events:none;top:0;right:0;width:80%;height:min(58%,320px);
  background:url("../data/gmb-photos/domiceo-gmb-01.jpg") top right/cover no-repeat;
  -webkit-mask-image:radial-gradient(135% 130% at 100% 4%, #000 18%, rgba(0,0,0,.5) 50%, transparent 78%);
          mask-image:radial-gradient(135% 130% at 100% 4%, #000 18%, rgba(0,0,0,.5) 50%, transparent 78%);
  opacity:.20;
}

/* ============ Breakpoints ============ */
/* ---------- Carrousels mobiles (cartes service + etapes) ----------
   Sous 860px la grille devient un rail horizontal : une carte a la fois au
   lieu de trois ou quatre empilees. La suivante depasse de ~16%, c'est la
   seule affordance qui dit qu'il y a une suite. Zero JS, zero librairie.
   Les onglets ne genent pas : un panneau en display:none n'a pas de layout,
   le rail se met en place a l'affichage. */
@media (max-width:859px){
  .svc-grid,.steps{
    display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scroll-padding-inline:20px;padding:6px 20px;margin-inline:-20px;
    gap:14px;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
  }
  /* Les cartes hors ecran a droite n'intersectent jamais le viewport, donc
     l'IntersectionObserver ne leur retire jamais le translateY(22px) du
     .reveal : elles jouaient leur entree VERTICALE pendant le swipe, et ce
     meme translate rendait le rail scrollable en y (scrollHeight 379 pour
     366 de haut). Dans un rail, la revelation se fait par le defilement
     horizontal — on neutralise donc l'animation d'entree des enfants.
     Le titre de section, lui, garde son .reveal. */
  .svc-grid > .reveal,.steps > .reveal{opacity:1;transform:none;transition:none;}
  .svc-grid::-webkit-scrollbar,.steps::-webkit-scrollbar{display:none;}
  /* min() : 84% donne une carte de 294px a 390 de large, mais 688px a 859 —
     le plafond a 360px fait apparaitre 2 cartes des la tablette. */
  .svc-grid > *,.steps > *{flex:0 0 min(84%,360px);scroll-snap-align:start;}
}

@media (min-width:480px){
  .finalcta .btn-row .btn{flex:1;}
  .finalcta .tel-inline{flex:1;}
}
@media (min-width:600px){
  .field-row{grid-template-columns:1fr 1fr;}
  .factbar__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .foot__cols{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:860px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(3,1fr);}
  .tm-grid{grid-template-columns:repeat(3,1fr);}
  .tm-head{grid-template-columns:auto 1fr;gap:28px;}
  .tm-head .tm-score{justify-self:start;}
  .foot__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px;}
}
@media (min-width:980px){
  .hero{padding:92px 0 112px;min-height:min(88vh,800px);display:flex;align-items:center;}
  .hero__inner{width:100%;}
  /* Voile HORIZONTAL : sombre à gauche (le texte y est), presque transparent à
     droite. La photo occupe tout le hero, la carte formulaire flotte dessus. */
  .hero::before{
    background:
      radial-gradient(76% 66% at 24% 60%,
        rgba(6,20,34,.44) 0%, rgba(6,20,34,.24) 52%, rgba(6,20,34,.08) 74%, transparent 88%),
      linear-gradient(93deg,
        rgba(7,24,38,.74) 0%,
        rgba(7,24,38,.60) 30%,
        rgba(7,24,38,.34) 50%,
        rgba(7,24,38,.16) 70%,
        rgba(7,24,38,.10) 100%),
      url("/data/hero/domiceo-hero-desktop.webp") center 58%/cover no-repeat;
  }
  .hero__inner{grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
  .hero__sub{max-width:38ch;}
  .topbar .btn{display:inline-flex;}
  .mainnav{display:flex;}
  .mobilebar{display:none;}
  .form-col{display:flex!important;}
  .foot{padding-bottom:38px;}
  .section{padding:82px 0;}
  .why-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:46px;}
  .svc-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .svc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .finalcta .btn-row .btn,.finalcta .tel-inline{flex:0 1 auto;max-width:340px;min-width:200px;}
  #particuliers::before{
    top:0;bottom:0;height:auto;width:min(40%,500px);background-size:auto 116%;background-position:right 72%;
    -webkit-mask-image:radial-gradient(118% 116% at 100% 40%, #000 30%, rgba(0,0,0,.5) 58%, transparent 82%);
            mask-image:radial-gradient(118% 116% at 100% 40%, #000 30%, rgba(0,0,0,.5) 58%, transparent 82%);
    opacity:.82;
  }
  #avis::before{
    top:auto;bottom:0;left:0;height:min(90%,600px);width:min(42%,500px);background-position:left center;
    -webkit-mask-image:radial-gradient(118% 118% at 3% 98%, #000 28%, rgba(0,0,0,.5) 56%, transparent 82%);
            mask-image:radial-gradient(118% 118% at 3% 98%, #000 28%, rgba(0,0,0,.5) 56%, transparent 82%);
    opacity:.9;
  }
}
@media (min-width:1140px){ .hero h1{font-size:2.7rem;} }

/* ══════════ TARTE AU CITRON — modale centrée (orientation: middle) ══════════ */
/* Cibler l'ID et non la classe : en "middle" la lib laisse la classe à sa valeur
   initiale (`tarteaucitronAlertBigTop`), donc `.tarteaucitronAlertBig` ne matche jamais.
   ⚠️ NE JAMAIS poser `display` sur cette carte : la lib l'affiche/masque en style
   inline, qu'un !important de feuille écraserait — le bandeau resterait affiché. */
#tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig{
  width:min(92vw,460px) !important;min-width:0 !important;max-width:none !important;
  background:var(--paper) !important;
  border:1px solid var(--line-blue) !important;border-top:3px solid var(--blue) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:0 24px 60px -12px rgba(16,24,40,.35) !important;
  font-family:var(--ff-body) !important;color:var(--ink) !important;
  padding:22px 20px 16px !important;box-sizing:border-box !important;
}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert{
  display:block !important;font-size:13px !important;line-height:1.55 !important;
  color:var(--ink) !important;margin:0 0 14px !important;padding:0 !important;text-align:left !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCTAButton,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert{
  display:block !important;width:100% !important;max-width:100% !important;
  padding:11px 16px !important;font-size:14px !important;font-weight:600 !important;
  border-radius:8px !important;margin:4px 0 !important;text-align:center !important;cursor:pointer !important;
  transition:background .15s var(--ease),transform .15s var(--ease) !important;
  min-height:42px !important;box-sizing:border-box !important;
}
#tarteaucitronRoot #tarteaucitronPersonalize2,
#tarteaucitronRoot #tarteaucitronAllDenied2{background:var(--blue) !important;color:#fff !important;border:none !important;}
#tarteaucitronRoot #tarteaucitronPersonalize2:hover,
#tarteaucitronRoot #tarteaucitronAllDenied2:hover{background:var(--blue-deep) !important;transform:translateY(-1px) !important;}
#tarteaucitronRoot #tarteaucitronCloseAlert{
  background:transparent !important;color:var(--muted) !important;border:none !important;
  font-size:12px !important;font-weight:500 !important;padding:7px 16px !important;min-height:28px !important;
}
#tarteaucitronRoot #tarteaucitronCloseAlert:hover{color:var(--blue) !important;transform:none !important;background:transparent !important;}
#tarteaucitronRoot #tarteaucitronPrivacyUrl{
  display:block !important;width:100% !important;font-size:11px !important;color:#98A2B3 !important;
  margin:8px 0 0 !important;text-align:center !important;text-decoration:none !important;
}
#tarteaucitronRoot #tarteaucitronPrivacyUrl:hover{color:var(--muted-soft) !important;text-decoration:underline !important;}
#tarteaucitronRoot .tarteaucitronBorder{border-radius:var(--r) !important;border:1px solid var(--line-blue) !important;}
#tarteaucitronRoot .tarteaucitronH1{font-weight:700 !important;}
#tarteaucitronRoot .tarteaucitronInfoBox{background:var(--blue-tint) !important;border-left:4px solid var(--blue) !important;border-radius:0 var(--r-sm) var(--r-sm) 0 !important;}
#tarteaucitronRoot #tarteaucitronIcon{background:var(--blue) !important;border-radius:var(--r-sm) var(--r-sm) 0 0 !important;}