/* ============================================================
   CLINIQUE CHURCHILL — style.css
   Refonte cliniquechurchill.be · Roots Agency
   Direction validée : Satoshi · encre/crème/or · pilules · r16
   Light uniquement · Mobile-first · Vanilla CSS
   ============================================================ */

/* ---------- Tokens (maquette validée) ---------- */
:root{
  --ink:#221E18;          /* texte courant */
  --ink-2:#1B1813;        /* CTA noir, bandeaux sombres */
  --ink-3:#14110D;        /* footer */
  --cream:#FAFAF8;        /* fonds alternés */
  --white:#FFFFFF;
  --gold:#A9834B;         /* CTA accent, prix, chiffres */
  --gold-deep:#8A6535;    /* liens, surtitres */
  --gold-light:#D9B87E;   /* or sur fond sombre */
  --muted:#6B655B;        /* texte secondaire */
  --line:rgba(34,30,24,.12);
  --line-strong:rgba(34,30,24,.25);
  --on-dark:#B8B1A6;      /* texte secondaire sur sombre */
  --on-dark-strong:#E8E2D8;
  --success:#2E7D5B;
  --error:#B3423A;

  --f-sans:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r-card:16px;
  --r-input:10px;
  --r-pill:999px;
  --shadow-hero:0 20px 50px rgba(27,24,19,.16);
  --shadow-card:0 14px 34px rgba(27,24,19,.10);

  --container:1240px;
  --pad-x:20px;
  --pad-y:44px;
  --header-h:73px;
}
@media (min-width:768px){:root{--pad-x:28px;--pad-y:52px}}
@media (min-width:1025px){:root{--pad-x:44px;--pad-y:60px}}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:var(--f-sans);font-size:15.5px;line-height:1.65;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
img,video{max-width:100%;height:auto;display:block}
/* Une image à qui l'on impose un cadre (object-fit + ratio) doit le remplir,
   même si le fichier source est plus étroit que le conteneur. */
img[style*="object-fit"]{width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:var(--gold-deep);text-decoration:none}
a:hover{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
::selection{background:#EFE6D6}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- Typographie ---------- */
h1,h2,h3{font-weight:800;line-height:1.12;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(30px,4.4vw,44px)}
h2{font-size:clamp(24px,3vw,33px);letter-spacing:-.01em}
h3{font-size:clamp(18px,2vw,20px);font-weight:700;letter-spacing:0}
h4{font-size:16px;font-weight:700}
p{text-wrap:pretty}
em,i{color:var(--gold-light)}
h1 em,h2 em,.gold-i{font-style:italic;color:var(--gold-light)}
.on-light h1 em,.on-light h2 em{color:var(--gold)}
.lead{font-size:clamp(15.5px,1.5vw,16.5px);line-height:1.65;color:var(--muted)}
.overline{display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-deep)}
.overline--light{color:var(--gold-light)}
.small{font-size:13.5px;color:var(--muted)}
.price{color:var(--gold-deep);font-weight:700}
.section-link{font-size:14.5px;font-weight:600;color:var(--gold-deep);white-space:nowrap}
.section-link:hover{color:var(--gold)}
/* Au doigt, un lien de section isolé doit offrir une zone d'appui suffisante. */
@media (max-width:767px){
  .section-link,.footer-brand .nap a,.site-footer ul a,
  .footer-social a,.footer-bottom a,
  a.link-arrow:not(.card a){display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- Structure ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
/* Largeur de lecture confortable, sans recentrer le bloc :
   le texte reste aligné sur la grille des titres de section. */
.mesure{max-width:820px}
.section{padding-block:var(--pad-y)}
.section--cream{background:var(--cream)}
.section--bordered{border-top:1px solid var(--line)}
.section--dark{background:var(--ink-2);color:var(--on-dark)}
.section--dark h2,.section--dark h3{color:#fff}
.section-head{display:grid;gap:8px;margin-bottom:clamp(22px,3vw,28px)}
.section-head .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.grid{display:grid;gap:18px}
.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.split{display:grid;gap:32px;align-items:center}
.split--start{align-items:start}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px}.split--rev{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}

/* ---------- Boutons (pilules) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 28px;border-radius:var(--r-pill);border:1.5px solid transparent;font-weight:600;font-size:15px;line-height:1;text-decoration:none;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,translate .18s;white-space:nowrap}
.btn--gold{background:var(--gold);color:#fff;box-shadow:0 1px 0 rgba(27,24,19,.04)}
.btn--gold:hover{background:var(--gold-deep);color:#fff;translate:0 -1px;box-shadow:0 8px 18px rgba(169,131,75,.28)}
.btn--gold:active{translate:0 0;box-shadow:none}
.btn--dark{background:var(--ink-2);color:#fff}
.btn--dark:hover{background:var(--ink);color:#fff;translate:0 -1px}
.btn--outline{border-color:var(--line-strong);color:var(--ink)}
.btn--outline:hover{border-color:var(--ink-2);color:var(--ink)}
.btn--outline-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn--outline-light:hover{border-color:#fff;color:#fff}
.btn--block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
/* Sur un petit écran, un libellé long doit se replier. Sans cela, le
   white-space:nowrap ci-dessus devient la largeur min-content du bouton,
   la piste de grille qui le contient s'aligne dessus, et c'est toute la
   page qui déborde vers la droite. */
@media (max-width:600px){.btn{white-space:normal;line-height:1.3}}
.link-arrow{font-size:14px;font-weight:600;color:var(--gold-deep)}
.link-arrow::after{content:" →"}
.link-arrow:hover{color:var(--gold)}

/* ---------- Header ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink-2);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0;color:#fff}
.site-header{position:sticky;top:0;z-index:90;background:var(--white);border-bottom:1px solid var(--line)}
.site-header>.container{display:flex;align-items:center;gap:20px;min-height:var(--header-h)}
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{height:44px;width:auto}
/* Au-delà du burger, la barre a la place d'une signature plus présente.
   L'en-tête suit, sinon le logo touche les bords. */
@media (min-width:1025px){
  .logo img{height:58px}
  :root{--header-h:88px}
}
@media (min-width:1025px){.nav{margin-left:auto}}

/* ---------- Recherche ---------- */
/* Une seule marge automatique dans la barre, sinon l'espace libre se
   partage entre les éléments qui la portent et les écarte. En desktop
   c'est le menu qui pousse, en burger c'est la loupe. */
.rech-ouvrir{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;margin-left:auto;border-radius:var(--r-pill);
  color:var(--ink);transition:background-color .18s,color .18s}
.rech-ouvrir:hover{background:var(--cream);color:var(--gold-deep)}
/* Le conteneur pose déjà 20px de gap : on le rattrape pour coller
   la loupe au menu plutôt que de l'en éloigner. */
@media (min-width:1025px){.rech-ouvrir{margin-left:-12px}}
.rech{position:absolute;left:0;right:0;top:100%;z-index:120;
  background:var(--white);border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px rgba(27,24,19,.10);padding:18px 0 22px}
body.rech-open{overflow:hidden}
.rech-boite{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-pill);color:var(--muted)}
.rech-boite:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,131,75,.16)}
.rech-boite svg{flex:none}
.rech-boite input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:16px;color:var(--ink)}
.rech-boite input::-webkit-search-cancel-button{display:none}
.rech-fermer{flex:none;font-size:13.5px;font-weight:600;color:var(--gold-deep);min-height:32px;padding:0 4px}
.rech-fermer:hover{color:var(--gold)}
.rech-etat{margin-top:12px;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.rech-liste{list-style:none;margin:6px 0 0;padding:0;max-height:min(60vh,460px);overflow-y:auto}
.rech-liste a{display:grid;gap:2px;padding:12px 14px;border-radius:var(--r-input);color:var(--ink)}
.rech-liste a:hover,.rech-liste a:focus-visible{background:var(--cream);color:var(--ink)}
.rech-pole{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-deep)}
.rech-liste b{font-size:16px;font-weight:700}
.rech-liste span:not(.rech-pole){font-size:13.5px;color:var(--muted);line-height:1.5}
@media (min-width:760px){.rech .container{max-width:760px}}
/* Le même champ, posé dans le corps d'une page : les résultats
   s'affichent sous lui plutôt que dans un panneau flottant. */
.rech-boite--page{max-width:620px;background:var(--white)}
.rech-liste--page{max-height:none;overflow:visible}
.rech-liste--page:not(:empty){margin-bottom:6px;border:1px solid var(--line);
  border-radius:var(--r-card);padding:6px}

.burger{display:none;position:relative;z-index:130;width:48px;height:48px;flex:none;margin-left:auto}
/* La loupe porte déjà la marge automatique : le burger la suit de près,
   le gap du conteneur étant lui aussi rattrapé. */
@media (max-width:1024px){.burger{margin-left:-14px}}
.burger span{position:absolute;left:13px;width:22px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s,top .25s}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:29px;width:15px}
body.nav-open .burger span:nth-child(1){top:23px;transform:rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){top:23px;width:22px;transform:rotate(-45deg)}
.nav-overlay{position:fixed;inset:0;background:rgba(20,17,13,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:100}
body.nav-open .nav-overlay{opacity:1;pointer-events:auto}

.nav{display:flex;align-items:center}
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.nav-list>li{position:relative}
.nav-list>li>a{display:flex;align-items:center;gap:6px;padding:12px 13px;font-size:15px;font-weight:500;color:var(--ink);border-radius:8px}
.nav-list>li>a:hover{color:var(--gold-deep)}
.nav-list>li>a[aria-current="page"],.nav-list>li>a.is-active{color:var(--gold-deep);font-weight:600}
.nav-caret{display:inline-block;font-size:10px;color:var(--gold-deep);transition:rotate .2s}

/* Méga-menus (desktop) */
.mega{position:absolute;top:100%;left:50%;translate:-50% 0;width:min(880px,calc(100vw - 40px));background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:26px;display:none;grid-template-columns:repeat(3,minmax(0,1fr)) 220px;gap:24px;text-align:left;z-index:120}
.mega--clinique{grid-template-columns:repeat(2,minmax(0,1fr)) 220px;width:min(720px,calc(100vw - 40px))}
/* Santé n'a plus qu'une colonne depuis le retrait de la dentisterie,
   qui a son propre onglet. */
.mega--sante{grid-template-columns:minmax(0,1fr) 220px;width:min(560px,calc(100vw - 40px))}
.mega-col{display:grid;gap:2px;align-content:start}
/* L'intitulé de colonne mène au pôle : même rendu qu'avant, mais cliquable.
   min-height : deux lignes réservées d'office. « Capillaire & esthétique »
   dépasse de 7 px la largeur de sa colonne et repliait, décalant de 18 px
   tous les liens en dessous — « Tout le pôle » compris, qui ne s'alignait
   plus avec ses voisins. Les colonnes sont déjà étirées par le bloc promo :
   réserver la place ne rallonge pas le menu. */
.mega-col b,.mega-col a.mega-h{display:block;padding:0;min-height:36px;font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.mega-col a.mega-h:hover{color:var(--gold)}
.mega-col a{display:block;padding:6px 0;font-size:14px;color:var(--ink);border-radius:6px}
.mega-col a:hover{color:var(--gold-deep)}
.mega-col a.mega-all{margin-top:6px;font-weight:600;color:var(--gold-deep);font-size:13.5px}
.mega-promo{background:var(--cream);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;align-content:start}
.mega-promo .mega-promo-media{aspect-ratio:16/10;overflow:hidden}
.mega-promo img{width:100%;height:100%;object-fit:cover}
.mega-promo-body{padding:14px;display:grid;gap:6px}
.mega-promo-body b{font-size:14px;font-weight:700;color:var(--ink)}
.mega-promo-body span{font-size:12.5px;color:var(--muted);line-height:1.5}
.mega-promo-body .link-arrow{font-size:13px}
@media (min-width:1025px){
  .nav-list>li.has-mega:hover>.mega,.nav-list>li.has-mega:focus-within>.mega{display:grid}
  .nav-list>li.has-mega:hover>a .nav-caret,.nav-list>li.has-mega:focus-within>a .nav-caret{rotate:180deg}
}

/* Navigation tablette (sidebar droite) & mobile (plein écran) */
@media (max-width:1024px){
  .burger{display:block}
  .nav{position:fixed;top:0;right:0;bottom:0;width:75vw;background:var(--white);box-shadow:var(--shadow-hero);transform:translateX(105%);transition:transform .28s ease;z-index:110;padding:92px 24px 28px;overflow-y:auto;flex-direction:column;align-items:stretch}
  body.nav-open .nav{transform:translateX(0)}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list>li{border-bottom:1px solid var(--line)}
  .nav-list>li>a{min-height:52px;font-size:16px;padding:12px 4px;border-radius:0;justify-content:space-between}
  .mega{position:static;translate:none;display:none;width:auto;border:0;box-shadow:none;border-radius:0;padding:0 0 16px;grid-template-columns:minmax(0,1fr);gap:18px;background:transparent}
  .mega--sante,.mega--clinique{grid-template-columns:minmax(0,1fr);width:auto}
  .mega-col a:not(.mega-h){min-height:48px;display:flex;align-items:center;padding:10px 12px;font-size:15px;background:var(--cream);border:1px solid var(--line);border-radius:10px;margin-bottom:6px}
  /* l'intitulé reste un surtitre, pas un bouton, mais garde une zone d'appui */
  .mega-col a.mega-h{min-height:36px;display:flex;align-items:center}
  .mega-promo{display:none}
  li.has-mega.open>.mega{display:grid}
  li.has-mega.open>a .nav-caret{rotate:180deg}
  .nav .nav-mobile-cta{margin-top:18px;display:grid;gap:10px}
}
@media (max-width:767px){
  .nav{padding-top:96px}
}
.nav-mobile-cta{display:none}
@media (max-width:1024px){.nav-mobile-cta{display:grid}}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb{font-size:13px;color:var(--muted);padding-block:14px}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb li+li::before{content:"›";margin-right:6px;color:var(--muted)}
.breadcrumb a{color:var(--gold-deep)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb [aria-current]{color:var(--ink);font-weight:700}

/* ---------- Héro vidéo (accueil uniquement) ---------- */
/* Héro accueil : la vidéo est une carte, le texte s'ancre en bas */
.hero{padding:14px var(--pad-x) 0}
@media (min-width:768px){.hero{padding-top:22px}}
.hero-frame{position:relative;overflow:hidden;color:#fff;background:var(--ink-2);
  max-width:var(--container);margin-inline:auto;
  border-radius:var(--r-card);min-height:clamp(440px,78vh,626px);
  display:grid;align-content:end}
@media (min-width:768px){.hero-frame{border-radius:26px}}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,13,8,.15),rgba(18,13,8,.34) 42%,rgba(18,13,8,.84))}
.hero-body{position:relative;z-index:2;display:grid;gap:18px;justify-items:start;
  padding:0 clamp(20px,4vw,56px) clamp(28px,4vw,46px)}
.hero-badge{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  color:#fff;padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-badge::before{content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--gold-light)}
.hero h1{color:#fff;font-size:clamp(30px,5vw,58px);line-height:1.04;letter-spacing:-.02em;max-width:900px}
.hero h1 em{color:var(--gold-light);font-style:normal}
.hero-foot{display:grid;gap:20px;width:100%}
@media (min-width:900px){.hero-foot{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:30px}}
.hero .lead{color:rgba(255,255,255,.85);max-width:520px;font-size:clamp(14px,1.7vw,17.5px);line-height:1.6;margin:0}
.hero-actions{display:grid;gap:10px}
@media (min-width:600px){.hero-actions{display:flex;flex-wrap:wrap;gap:12px}}
.hero-checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;
  font-size:14px;color:rgba(255,255,255,.85)}
.hero-checks li::before{content:"✓";margin-right:8px;color:var(--gold-light);font-weight:700}

/* Héro scindé (hubs, pages internes) */
.hero-split{background:var(--cream);border-block:1px solid var(--line)}
.hero-split>.container{display:grid;gap:32px;align-items:center;padding-block:clamp(40px,6vw,56px)}
@media (min-width:900px){.hero-split>.container{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px}}
.hero-split-body{display:grid;gap:16px;justify-items:start}
.hero-split-body h1{font-size:clamp(30px,4.6vw,46px);line-height:1.1}
.hero-split-media{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-hero)}
.hero-split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--ink)}
.checks li::before{content:"✓";margin-right:7px;color:var(--gold);font-weight:700}
.checks--col{flex-direction:column;gap:9px;font-size:14.5px}

/* ---------- Bandeau chiffres clés ---------- */
.stats-band{background:var(--cream);border-bottom:1px solid var(--line)}
.stats-band>.container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-block:22px;text-align:center}
@media (min-width:768px){.stats-band>.container{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-block:26px}}
.stat b{display:block;font-weight:800;font-size:clamp(22px,2.6vw,32px);color:var(--gold);line-height:1.15}
.stat span{font-size:13px;color:var(--muted)}

/* ---------- Étiquettes & cartes ---------- */
.tag{display:inline-block;justify-self:start;border:1px solid var(--line);color:var(--muted);font-size:10.5px;font-weight:500;letter-spacing:1.05px;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill);background:var(--white)}
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:box-shadow .2s,translate .2s}
a.card{color:inherit}
.card:hover{box-shadow:var(--shadow-card);translate:0 -3px}
.card-media{aspect-ratio:16/9;overflow:hidden;background:var(--cream)}
.card-media img{width:100%;height:100%;object-fit:cover}
/* Flex et non grid : « margin-top:auto » sur le lien n'a d'effet que là,
   ce qui aligne les « Découvrir » d'une même rangée quelle que soit la
   longueur du texte au-dessus. */
.card-body{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:20px;flex:1}
.card-body h3{font-size:19px;font-weight:700}
.card-body h3 a{color:inherit}
.card-body h3 a:hover{color:var(--gold-deep)}
.card-body p{font-size:14px;color:var(--muted);line-height:1.55}
.card-body .link-arrow{margin-top:auto}
.card--flat{background:var(--cream)}
.card--flat .tag{background:var(--white)}
.card--pad{padding:22px}
.card-price{font-size:14px;color:var(--ink)}
.card-price b{color:var(--gold-deep);font-weight:700}
.card-price--none{font-size:14px;color:var(--muted)}

/* ---------- Chips « Que cherchez-vous ? » ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:9px 20px;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--ink);transition:border-color .18s,background .18s}
.chip:hover{border-color:var(--gold);color:var(--ink)}

/* ---------- Avertissement médical (bas de fiche) ---------- */
.avertissement{padding-block:clamp(28px,4vw,40px)}
.avertissement .container{max-width:820px}
.avertissement p{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  margin:0;padding:20px 22px;
  background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-card);
  font-size:13.5px;line-height:1.7;color:var(--muted)}
.avertissement p::before{content:"i";
  width:22px;height:22px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--gold);color:var(--white);
  font-size:12px;font-weight:800;font-style:italic;line-height:1;
  margin-top:1px}

/* ---------- Encadré « L'essentiel » ---------- */
.essentiel{width:100%;background:var(--cream);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r-card);padding:24px}
.essentiel>b,.essentiel h2{font-size:18px;font-weight:700;letter-spacing:0}
.essentiel dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin:16px 0 0}
@media (min-width:560px){.essentiel dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.essentiel dt{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold-deep)}
.essentiel dd{margin:2px 0 0;font-size:14.5px;font-weight:600;color:var(--ink)}

/* ---------- Parcours 4 étapes ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:minmax(0,1fr);counter-reset:step}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{counter-increment:step;display:grid;gap:8px;align-content:start;justify-items:start}
.step::before{content:counter(step);display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line);font-weight:800;color:var(--gold)}
.step h3{font-size:16px;font-weight:700}
.step p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ---------- FAQ ---------- */
.faq{display:grid}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:16px 2px;cursor:pointer;font-weight:700;font-size:15.5px;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:500;color:var(--gold);line-height:1;transition:rotate .2s;flex:none;translate:0 2px}
.faq details[open] summary::after{rotate:45deg}
.faq .faq-a{padding:0 2px 18px;font-size:14px;color:var(--muted);line-height:1.6;max-width:72ch}
.faq .faq-a b,.faq .faq-a strong{color:var(--ink)}

/* ---------- Praticiens ---------- */
.praticien-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:box-shadow .2s,translate .2s}
a.praticien-card{color:inherit}
.praticien-card:hover{box-shadow:var(--shadow-card);translate:0 -3px}
.praticien-photo{aspect-ratio:4/4.2;overflow:hidden;background:var(--cream)}
.praticien-photo img{width:100%;height:100%;object-fit:cover}
.praticien-body{padding:16px;display:grid;gap:3px;justify-items:start}
.praticien-body b{font-size:16px;font-weight:700}
.praticien-body .spec{font-size:12.5px;color:var(--gold-deep);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.praticien-body .inami{font-size:12.5px;color:var(--muted)}
.praticien-body .link-arrow{font-size:13px;margin-top:6px}
/* carte praticien compacte (fiche intervention, anesthésistes) */
.praticien-inline{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:18px;display:flex;gap:16px;align-items:center;text-align:left}
.praticien-inline .avatar{width:64px;height:64px;border-radius:var(--r-pill);overflow:hidden;flex:none;background:var(--cream)}
.praticien-inline .avatar img{width:100%;height:100%;object-fit:cover}
.praticien-inline .who{display:grid;gap:2px}
.praticien-inline .who b{font-size:16px}
.praticien-inline .who .spec{font-size:13px;color:var(--gold-deep);font-weight:600}
.praticien-inline .who .note{font-size:13px;color:var(--muted);line-height:1.5}

/* ---------- Tableaux tarifaires ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--white)}
.tarifs{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
.tarifs caption{text-align:left;font-weight:700;font-size:16px;padding:16px 18px 4px}
.tarifs th{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold-deep);text-align:left;padding:14px 18px;border-bottom:1px solid var(--line)}
.tarifs td{padding:12px 18px;border-bottom:1px solid var(--line);color:var(--ink)}
.tarifs tr:last-child td{border-bottom:0}
.tarifs td.px{color:var(--gold-deep);font-weight:700;white-space:nowrap}
.tarifs tbody tr:hover{background:var(--cream)}

/* ---------- Fiche praticien ---------- */
.praticien-layout{display:grid;gap:36px;align-items:start}
@media (min-width:900px){.praticien-layout{grid-template-columns:340px minmax(0,1fr);gap:48px}}

/* ---------- Carte praticien « format plateforme RDV » ----------
   Reprend le rendu de rdv-cliniquechurchill.be : photo ronde, nom doré,
   spécialité, INAMI, et un bouton de réservation propre à chaque praticien. */
/* minmax(0,1fr) et non 1fr : le minimum implicite d'une piste 1fr est le
   min-content de son contenu. Le bouton « Prendre rendez-vous » étant en
   white-space:nowrap, il imposait 211px par colonne sur un écran de 390,
   et la grille débordait la page vers la droite. */
.equipe-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.equipe-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1025px){.equipe-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.prat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px 18px;transition:box-shadow .2s,translate .2s}
.prat:hover{box-shadow:var(--shadow-card);translate:0 -3px}
.prat-photo{width:104px;height:104px;border-radius:var(--r-pill);overflow:hidden;
  background:var(--cream);border:1px solid var(--line);flex:none}
.prat-photo img{width:100%;height:100%;object-fit:cover}
.prat-photo .ph{min-height:0;height:100%}
.prat-photo .ph span{font-size:9px;padding:2px 5px}
.prat-nom{font-size:16px;font-weight:700;color:var(--gold-deep);line-height:1.3;margin-top:4px}
.prat-spec{font-size:13.5px;color:var(--muted);line-height:1.4}
.prat-inami{font-size:12.5px;color:var(--muted)}
.prat .btn{margin-top:8px;min-height:42px;padding:11px 20px;font-size:13.5px;
  background:transparent;border-color:var(--gold);color:var(--gold-deep);
  /* le libellé se replie dans une carte étroite plutôt que de l'élargir */
  white-space:normal;max-width:100%;line-height:1.25}
.prat .btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
/* Variante compacte : un seul praticien mis en avant sur une fiche.
   Une seule piste, sinon la carte unique n'obtient qu'un quart des
   320px et son texte se replie lettre par lettre. */
.prat-solo{max-width:320px;grid-template-columns:minmax(0,1fr)}

/* ---------- Filtres équipe ---------- */
.team-filters{display:flex;gap:10px;flex-wrap:wrap}
.filter-pill{min-height:44px;padding:9px 20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:all .15s}
.filter-pill:hover{border-color:var(--gold)}
.filter-pill.is-active{background:var(--ink-2);border-color:var(--ink-2);color:#fff}

/* ---------- Bandeau CTA final ---------- */
.cta-band{position:relative;background:var(--ink-2);color:var(--on-dark);overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;border:1px solid rgba(217,184,126,.25)}
.cta-band::after{content:"";position:absolute;left:-80px;bottom:-110px;width:240px;height:240px;border-radius:50%;border:1px solid rgba(217,184,126,.18)}
.cta-band>.container{position:relative;z-index:2;display:grid;gap:24px;align-items:center;padding-block:clamp(36px,5vw,48px)}
@media (min-width:900px){.cta-band>.container{grid-template-columns:minmax(0,1.2fr) auto}}
.cta-band .cta-txt{display:grid;gap:8px;justify-items:start}
.cta-band h2{color:#fff;font-size:clamp(22px,2.6vw,28px)}
.cta-band p{font-size:14.5px;color:var(--on-dark)}
.cta-band .overline{color:var(--gold-light)}
.cta-band .cta-actions{display:grid;gap:12px;min-width:min(320px,100%)}
.cta-band .cta-actions .small{color:var(--on-dark);text-align:center}

/* ---------- Bloc texte-image ---------- */
.feature-media{position:relative}
.feature-media .frame{aspect-ratio:4/3.3;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-hero)}
.feature-media .frame img{width:100%;height:100%;object-fit:cover}
.feature-media .badge{position:absolute;right:-10px;bottom:-16px;background:var(--ink-2);color:#fff;border-radius:var(--r-card);padding:14px 20px;display:grid;gap:2px}
@media (min-width:900px){.feature-media .badge{right:-18px;bottom:-18px;padding:16px 22px}}
.feature-media .badge b{font-weight:800;font-size:clamp(18px,2vw,24px);color:var(--gold-light)}
.feature-media .badge span{font-size:12.5px;color:var(--on-dark)}

/* ---------- Formulaires ---------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,3vw,32px);display:grid;gap:16px}
.form-card>h2,.form-card>b{font-size:clamp(19px,2vw,22px);font-weight:800}
.form{display:grid;gap:16px}
.form-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.field{display:grid;gap:6px}
.field label{font-size:13.5px;font-weight:600;color:var(--ink)}
.field .req{color:var(--error)}
.field input,.field select,.field textarea{min-height:46px;padding:10px 14px;border:1px solid rgba(34,30,24,.18);border-radius:var(--r-input);background:var(--white);width:100%;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,131,75,.16)}
.field input.is-error,.field.is-error input,.field.is-error select,.field.is-error textarea{border-color:var(--error);box-shadow:0 0 0 3px rgba(179,66,58,.12)}
/* Échec d'envoi : posé en fin de formulaire, pas dans un champ. */
.form-erreur{margin-top:14px;padding:12px 14px;border-radius:var(--r-input);
  background:#FDF2F1;border:1px solid rgba(179,66,58,.28);color:var(--error);font-size:14px}
.form-erreur a{color:var(--error);font-weight:600;text-decoration:underline}
.error-msg{font-size:12.5px;color:var(--error)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted)}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold);flex:none}
.check a{text-decoration:underline;text-underline-offset:2px}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:12.5px;color:var(--muted)}
/* Sélecteur d'interventions (devis) */
.select-grid{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.select-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pick{position:relative}
.pick input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.pick span{display:flex;align-items:center;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:var(--r-input);font-size:13.5px;font-weight:500;background:var(--white);transition:all .15s}
.pick input:checked+span{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.pick input:focus-visible+span{outline:3px solid var(--gold);outline-offset:1px}
/* Grille de disponibilités (RDV) */
.dispo{display:grid;gap:8px}
.dispo-row{display:grid;grid-template-columns:minmax(56px,84px) repeat(4,minmax(0,1fr));gap:8px;align-items:center}
.dispo-row.head{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dispo-day{font-size:13.5px;font-weight:600;color:var(--ink)}
.slot{position:relative}
.slot input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.slot span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--line);border-radius:var(--r-input);font-size:12px;color:var(--muted);background:var(--white);transition:all .15s}
.slot input:checked+span{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.slot input:focus-visible+span{outline:3px solid var(--gold);outline-offset:1px}
@media (max-width:560px){.dispo-row{grid-template-columns:minmax(48px,64px) repeat(4,minmax(0,1fr))}.slot span{font-size:10.5px;min-height:48px}}

/* ---------- Carrousel (Swiper) ---------- */
.carousel{position:relative}
.carousel .swiper{border-radius:var(--r-card);overflow:hidden}
.carousel .swiper-slide{aspect-ratio:16/9;background:var(--cream)}
.carousel .swiper-slide img{width:100%;height:100%;object-fit:cover}
.swiper-pagination-bullet{background:var(--ink-2);opacity:.3}
.swiper-pagination-bullet-active{background:var(--gold);opacity:1}
.swiper-button-prev,.swiper-button-next{color:#fff;background:rgba(27,24,19,.6);width:46px;height:46px;border-radius:50%;backdrop-filter:blur(4px)}
.swiper-button-prev::after,.swiper-button-next::after{font-size:16px;font-weight:700}
.swiper-button-prev:hover,.swiper-button-next:hover{background:var(--ink-2)}

/* ---------- NAP / contact ---------- */
.nap-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:grid;gap:12px;font-size:15px}
.nap-card>b{font-size:17px;font-weight:700}
.nap-card .tel{color:var(--gold-deep);font-weight:700}
.nap-card .mail{color:var(--gold-deep);font-weight:600}
.nap-card .muted{color:var(--muted)}
.nap-card .access{color:var(--muted);font-size:13.5px;border-top:1px solid var(--line);padding-top:12px}
.map-embed{position:relative;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:repeating-linear-gradient(45deg,#F1EEE7 0 14px,#EAE6DD 14px 28px)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-embed .map-load{position:absolute;inset:0;display:grid;place-items:center;gap:10px;align-content:center;padding:20px;text-align:center;background:rgba(250,250,248,.6)}
.map-embed .map-load p{font-size:13px;color:var(--muted);max-width:36ch}

/* ---------- Placeholders médias ---------- */
.ph{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:120px;background:repeating-linear-gradient(45deg,#F1EEE7 0 14px,#EAE6DD 14px 28px)}
.ph span{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--muted);background:rgba(255,255,255,.9);padding:3px 8px;border-radius:4px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-3);color:var(--on-dark);font-size:14px}
.site-footer .footer-cols{display:grid;gap:36px;padding-block:52px 40px}
@media (min-width:768px){.site-footer .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.site-footer .footer-cols{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:40px}}
.footer-brand{display:grid;gap:16px;align-content:start;justify-items:start}
.footer-brand img{height:44px;width:auto}
.footer-brand p{font-size:14px;line-height:1.65;max-width:36ch}
.footer-brand .nap{display:grid;gap:4px;font-size:14px}
.footer-brand .nap a{color:var(--on-dark-strong)}
.footer-brand .nap a:hover{color:var(--gold-light)}
.site-footer h2.footer-title,.site-footer .footer-title{font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-light);margin:0 0 12px;line-height:1.4}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;align-content:start}
.site-footer ul a{color:var(--on-dark)}
.site-footer ul a:hover{color:var(--gold-light)}
.footer-rdv{display:grid;gap:10px;align-content:start;justify-items:start}
.footer-rdv .btn{min-height:44px;padding:12px 24px;font-size:14px}
.footer-rdv .sat{margin-top:8px}
/* ---------- Bande « nous suivre » ---------- */
.suivez{display:grid;gap:22px;align-items:center}
@media (min-width:760px){.suivez{grid-template-columns:minmax(0,1fr) auto;gap:40px}}
.suivez h2{font-size:clamp(22px,2.6vw,28px);margin-top:6px}
.suivez p{margin-top:10px;color:var(--muted);max-width:52ch}
.suivez-liens{display:flex;gap:12px}
.suivez-liens a{width:52px;height:52px;flex:0 0 52px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gold);color:#fff;border:1.5px solid var(--gold);
  transition:background-color .18s,border-color .18s,translate .18s}
.suivez-liens a:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff;translate:0 -2px}
.suivez-liens svg{display:block}

.footer-social{display:flex;gap:10px;margin-top:8px}
.footer-social a{width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  transition:background-color .18s,border-color .18s,color .18s}
.footer-social a:hover{color:var(--ink-3);background:#fff;border-color:#fff}
.footer-social svg{display:block}
.footer-signature{display:inline-flex;align-items:center;gap:5px}
.footer-signature a{font-weight:600;color:var(--gold-light)}
.footer-signature a:hover{color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12)}
.footer-bottom>.container{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;padding-block:16px;font-size:12.5px;color:#8A8271}
.footer-bottom a{color:#8A8271}
.footer-bottom a:hover{color:var(--gold-light)}

/* ---------- Bandeau cookies ---------- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:150;background:var(--ink-2);color:var(--on-dark-strong);border-radius:var(--r-card);box-shadow:var(--shadow-hero);padding:18px 20px;display:none;gap:14px;align-items:center;flex-wrap:wrap}
.cookie-banner.is-visible{display:flex}
.cookie-banner p{flex:1 1 340px;font-size:13px;line-height:1.55;color:var(--on-dark-strong)}
.cookie-banner p a{color:var(--gold-light);text-decoration:underline;text-underline-offset:2px}
.cookie-banner .cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner .btn{min-height:44px;padding:10px 20px;font-size:13.5px}
@media (min-width:768px){.cookie-banner{left:auto;max-width:520px}}

/* ---------- Révélation au scroll ---------- */
[data-reveal]{opacity:0;translate:0 18px;transition:opacity .55s ease,translate .55s ease}
[data-reveal].is-visible{opacity:1;translate:0 0}
@media (scripting:none){[data-reveal]{opacity:1;translate:0 0}}

/* ---------- Utilitaires ---------- */
.center{text-align:center;justify-items:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.stack-8{display:grid;gap:8px}.stack-12{display:grid;gap:12px}.stack-16{display:grid;gap:16px}.stack-20{display:grid;gap:20px}.stack-24{display:grid;gap:24px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ---------- Demande de rendez-vous en cascade ---------- */
.etapes{display:grid;gap:16px;padding:18px;border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:var(--r-card);background:var(--cream)}
.etapes .field{margin:0}
.etapes .field.is-masque{display:none}
.etapes .form-note{margin-top:6px}

/* ---------- Simulateur de devis ---------- */
.devis{display:grid;gap:22px}
.devis-recap,.devis-consultation,.devis-export{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.devis-recap.is-masque,.devis-consultation.is-masque,.devis-export.is-masque{display:none}
.devis-recap h3,.devis-consultation h3,.devis-export h3{margin-bottom:14px}
.devis-lignes{width:100%;border-collapse:collapse;font-size:15px}
.devis-lignes th{text-align:left;font-weight:500;color:var(--ink);padding:9px 0}
.devis-lignes td{text-align:right;white-space:nowrap;padding:9px 0;font-variant-numeric:tabular-nums}
.devis-lignes tbody tr+tr th,.devis-lignes tbody tr+tr td{border-top:1px solid var(--line)}
.devis-lignes tfoot{border-top:1px solid var(--line-strong)}
.devis-lignes tfoot th{font-weight:600}
.devis-lignes tfoot tr:first-child th,.devis-lignes tfoot tr:first-child td{padding-top:14px}
.devis-total th,.devis-total td{font-size:18px;font-weight:800;color:var(--gold-deep);
  border-top:1px solid var(--line);padding-top:14px}
.devis-inclus{margin-top:18px;gap:8px}
.devis-inclus li.is-masque{display:none}
.devis-recap .small{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.devis-recap .small.is-masque{display:none}
.devis-export .form-grid{margin-top:4px}

/* ---------- Suite proposée après le téléchargement du devis ---------- */
.devis-suite{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:20px;background:rgba(20,17,13,.55);
  animation:devis-fondu .2s ease}
.devis-suite[hidden]{display:none}
.devis-suite-boite{position:relative;width:min(560px,100%);background:var(--white);
  border-radius:var(--r-card);padding:clamp(24px,4vw,34px);box-shadow:var(--shadow-hero);
  display:grid;gap:10px}
.devis-suite-boite h3{font-size:clamp(20px,2.6vw,25px)}
.devis-suite-boite p{color:var(--muted);line-height:1.65}
.devis-suite-fermer{position:absolute;top:10px;right:12px;width:40px;height:40px;
  font-size:26px;line-height:1;color:var(--muted);border-radius:var(--r-pill)}
.devis-suite-fermer:hover{color:var(--ink);background:var(--cream)}
@keyframes devis-fondu{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.devis-suite{animation:none}}

/* ---------- Réseaux sociaux dans le menu ---------- */
.nav-social{display:none}
@media (max-width:1024px){
  .nav-social{display:grid;gap:10px;margin-top:22px;padding-top:20px;
    border-top:1px solid var(--line)}
}
.nav-social-titre{font-size:11.5px;font-weight:500;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--gold-deep)}
.nav-social-liens{display:flex;gap:10px}
.nav-social-liens a{width:44px;height:44px;flex:0 0 44px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);background:var(--cream);border:1px solid var(--line);
  transition:background-color .18s,border-color .18s,color .18s}
.nav-social-liens a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
/* Dans l'encart du méga-menu, la taille se cale sur le texte qui l'entoure */
.mega-social{display:flex;gap:8px;margin-top:10px}
.mega-social a{width:32px;height:32px;flex:0 0 32px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);background:var(--white);border:1px solid var(--line);
  transition:background-color .18s,border-color .18s,color .18s}
.mega-social a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.mega-social svg{width:15px;height:15px}

/* ---------- Vignette du service, pour se projeter ---------- */
.budget-tete{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.service-bulle{width:76px;height:76px;flex:0 0 76px;border-radius:var(--r-pill);
  overflow:hidden;border:3px solid var(--white);box-shadow:var(--shadow-card);
  background:var(--cream)}
@media (min-width:760px){
  .budget-tete{gap:22px}
  .service-bulle{width:92px;height:92px;flex-basis:92px}
}
.service-bulle img{width:100%;height:100%;object-fit:cover;display:block}
/* Dans une carte, la vignette annonce la page visée : plus petite, posée
   au-dessus du libellé, sans bousculer la hiérarchie du titre. */
.service-bulle--carte{width:56px;height:56px;flex-basis:56px;border-width:2px;
  box-shadow:0 6px 16px rgba(27,24,19,.10);margin-bottom:14px}
.card:hover .service-bulle--carte{box-shadow:0 8px 20px rgba(27,24,19,.16)}
/* Listing d'un pôle : un cran au-dessus du renvoi, la carte présente
   le service plutôt qu'elle n'y renvoie. */
.service-bulle--liste{width:72px;height:72px;flex-basis:72px;border-width:2px;
  box-shadow:0 6px 16px rgba(27,24,19,.10);margin-bottom:16px}
.card:hover .service-bulle--liste{box-shadow:0 8px 20px rgba(27,24,19,.16)}

/* ---------- Invitation à estimer, sur les fiches d'intervention ---------- */
.devis-invite{display:grid;gap:18px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-card);padding:clamp(22px,3vw,30px)}
@media (min-width:760px){.devis-invite{grid-template-columns:minmax(0,1fr) auto;gap:32px}}
.devis-invite p{color:var(--muted);line-height:1.65;margin-top:8px}
.devis-invite .small{margin-top:10px}
.devis-invite .btn{justify-self:start}

/* ---------- Boutons flottants : devis et rendez-vous ---------- */
.rdv-float{position:fixed;right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));z-index:90;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;
  opacity:0;visibility:hidden;translate:0 14px;
  /* visibility bascule sans durée : sinon elle reste « hidden » pendant
     toute la transition et les boutons n'apparaissent jamais. */
  transition:opacity .25s ease,translate .25s ease,visibility 0s linear .25s}
.rdv-float.is-on{opacity:1;visibility:visible;translate:0 0;
  transition:opacity .25s ease,translate .25s ease,visibility 0s}
.rdv-float-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:15px 26px;border-radius:var(--r-pill);
  background:var(--gold);color:#fff;font-weight:600;font-size:15px;line-height:1;
  box-shadow:0 10px 30px rgba(27,24,19,.22);
  transition:background-color .18s,color .18s,border-color .18s}
.rdv-float-btn:hover{background:var(--gold-deep);color:#fff}
.rdv-float-btn::after{content:"→"}
/* Le devis est une proposition secondaire : lisible, sans rivaliser avec le
   rendez-vous qui demeure l'action principale. */
.rdv-float-btn--devis{background:var(--white);color:var(--ink);
  border:1.5px solid var(--line-strong)}
.rdv-float-btn--devis:hover{background:var(--cream);color:var(--ink);border-color:var(--ink-2)}
@media (max-width:600px){
  .rdv-float{left:max(16px,env(safe-area-inset-left));gap:8px}
  .rdv-float-btn{flex:1 1 0;min-width:0;padding:15px 12px;font-size:14px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.rdv-float{transition:opacity .2s ease,visibility .2s}}