/* ============================================================================
   Composants partagés — Dr Michel Assayag
   Footer (région stampée) + CTA (classe réutilisable). Tokens uniquement.
   Importe APRÈS tokens.css et base.css :
     <link rel="stylesheet" href="css/components.css">
   Le calage pixel fin (paddings, gaps exacts) se fera contre les refs du harness.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   COQUILLE DE PAGE — canvas desktop 1440 fixe, centré.
   Les sections de contenu sont calées en coordonnées absolues sur un canvas
   Figma de 1440px (layout-plan referenceWidth:1440, gouttières 80/80). Sans
   cette borne, <main> prend 100% du viewport et le contenu absolu (left:80,
   right:80) se plaque au bord de la FENÊTRE, pas du canvas → collé à gauche
   sur tout écran >1440. Même borne centrée que .nav-inner / .ft-inner.
   ───────────────────────────────────────────────────────────────────────── */
main { width: 1440px; margin-inline: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   CTA — reconstruction native (jamais le SVG vectorisé)
   Variantes : .cta (pilule pleine) · .cta--link (lien-texte + chevron)

   POLICE (source = type-map, instances ;4498:*) : Nunito, poids 300.
   (Le « Nous suivre » du footer ;4581:763 est un one-off Inter 14/500,
   PAS une instance du composant standard.)

   CHEVRONS RÉELS (figés depuis components/cta.svg + cta-popup.svg,
   normalisés en viewBox 16×16, géométrie relative exacte, stroke-width 1) :
     · .cta (pilule)     → flèche AVEC hampe :
         <path d="M3.33 8H12.67M8 12.66L12.67 8L8 3.33"
               fill="none" stroke="currentColor" stroke-width="1"
               stroke-linecap="round" stroke-linejoin="round"/>
       (source cta.svg : M67.3333 16H76.6666 M72 20.6666 L76.6666 16 L72 11.3333)
     · .cta--link (lien) → chevron NU, sans hampe :
         <path d="M6 12L10 8L6 4"
               fill="none" stroke="currentColor" stroke-width="1"
               stroke-linecap="round" stroke-linejoin="round"/>
       (source cta-popup.svg : M182 14 L186 10 L182 6)
   ───────────────────────────────────────────────────────────────────────── */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  min-height: 40px;                    /* Medium maître (4498:4690) : pad 8/16 → h40 */
  border-radius: 999px;                /* pilule pleine (maître r9999) */
  background: var(--c-blue);           /* Brand/Blue #2B5273 */
  color: var(--neutral-0);             /* texte blanc */
  font-family: var(--font-heading);    /* Nunito — police réelle des CTA (;4498:*) */
  font-size: var(--fs-body-md);        /* 16px */
  font-weight: 300;                    /* Nunito Light — poids réel des CTA */
  line-height: var(--lh-body-md);      /* 24px */
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: background-color .15s ease;
}
.cta:hover { background: var(--c-light-blue); } /* Brand/Light blue */

.cta__icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* Variante Large (maître Size=Large 4498:4704/4746 : 18/28, pad 8/20, h48, gap 8) */
.cta--lg { gap: 8px; padding: 8px 20px; min-height: 48px; font-size: 18px; line-height: 28px; }
/* Variante OnDark (maître Contrast=OnDark 4498:4746 : fond biege #FEFCF9, texte + flèche sombres) */
.cta--ondark { background: var(--c-biege); color: var(--neutral-900); }
.cta--ondark:hover { background: #F1ECE4; } /* PROVISOIRE : hover OnDark non encore confirmé au maître (4498:4751) */

/* ─────────────────────────────────────────────────────────────────────────
   CTA RENDEZ-VOUS — composant partagé d'aiguillage (A1 défaut / A3 héros).
   Source de vérité = hover-A1-A3.html (PRIME sur le bouton Figma : le CTA RDV
   n'ouvre jamais Doctolib en direct, il ouvre le popup d'aiguillage).
   Variables scopées composant (HORS tokens.css) ; navy = token site --c-blue.
   Picto Doctolib via background-image SVG pré-coloré (le CSS mask ne rend pas
   ces SVG Inkscape dans Chromium — 0 couverture quel que soit le mask-mode ;
   l'asset rend pourtant parfaitement en <img>) :
     · A1 → doctolib-d-white.svg (« d » blanc, navy button, jamais recoloré).
     · A3 → doctolib-wordmark-blue.svg au repos ; -white.svg au survol (button navy).
   ───────────────────────────────────────────────────────────────────────── */
.cta--rdv {
  --navy:          var(--c-blue);   /* #2B5273 (token site) */
  --navy2:         #34618A;         /* éclairci de survol (dérivé, non-token) */
  gap: 9px;
  padding: 13px 20px;
  min-height: 0;
  border-radius: 999px;
  background: var(--navy);
  color: var(--neutral-0);
  font-family: var(--font-body);    /* Inter (A1 prime sur Nunito Figma) */
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(43, 82, 115, .20);
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s, background .18s;
  will-change: transform;
}
.cta--rdv:hover {
  background: var(--navy2);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(43, 82, 115, .30);
}
.cta--rdv:active { transform: translateY(0) scale(.99); }
.cta-rdv__cal { width: 17px; height: 17px; flex: 0 0 auto; }
.cta-rdv__sep { width: 1px; height: 18px; flex: 0 0 auto; background: rgba(255, 255, 255, .45); }
/* Picto Doctolib (background-image) — A1 = « d » blanc, respire au survol */
.cta-rdv__doc {
  width: 17.8px; height: 20px; flex: 0 0 auto;
  background: url(../img/doctolib-d-white.svg) no-repeat center / contain;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1);
}
.cta--rdv:hover .cta-rdv__doc { transform: scale(1.09); }

/* A3 — skin héros : ghost blanc → remplissage navy, wordmark Doctolib bleu */
.cta--hero {
  background: var(--neutral-0);
  color: var(--c-blue);
  border: 1.5px solid var(--c-blue);
  box-shadow: none;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cta--hero .cta-rdv__sep { background: #D6DEE6; transition: background .2s ease; }
.cta--hero .cta-rdv__doc {
  width: 62.1px; height: 15px;
  background: url(../img/doctolib-wordmark-blue.svg) no-repeat center / contain;
}
.cta--hero:hover {
  background: var(--c-blue);
  color: var(--neutral-0);
  border-color: var(--c-blue);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(36, 59, 82, .28);
}
.cta--hero:hover .cta-rdv__doc { background-image: url(../img/doctolib-wordmark-white.svg); transform: none; }
.cta--hero:hover .cta-rdv__sep { background: rgba(255, 255, 255, .4); }

@media (prefers-reduced-motion: reduce) {
  .cta--rdv, .cta--hero, .cta-rdv__doc {
    transition: background .2s, color .2s, box-shadow .2s !important;
    transform: none !important;
  }
  .cta--rdv:hover, .cta--hero:hover { transform: none !important; }
  .cta--rdv:hover .cta-rdv__doc { transform: none !important; }
}

/* Lien-texte : pas de pilule, texte sombre + chevron (équiv. cta-popup) */
.cta--link {
  background: transparent;
  color: var(--neutral-900);           /* #202020 */
  padding: 0;
  min-height: 0;
  border-radius: 0;
}
.cta--link:hover { background: transparent; color: var(--c-blue); }

/* ─────────────────────────────────────────────────────────────────────────
   POPUP d'aiguillage rendez-vous — overlay accessible PARTAGÉ.
   Mécanique définitive ; textes PROVISOIRES (cf. partials/popup-rdv.html).
   Pas de géométrie maquette (frame absente de l'extraction) → calage générique
   propre, à affiner si le cabinet fournit la frame.
   ───────────────────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rdv-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.rdv-overlay[hidden] { display: none; }
.rdv-backdrop { position: absolute; inset: 0; background: rgba(32, 32, 32, 0.55); }
.rdv-dialog {
  position: relative;
  width: min(440px, 100%);
  background: var(--neutral-0);
  border-radius: 24px;
  padding: 40px 32px 32px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.rdv-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--neutral-900); cursor: pointer;
  transition: background-color .15s ease;
}
.rdv-close:hover { background: var(--neutral-100); }
.rdv-title {
  font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: var(--fw-h4);
  line-height: var(--lh-h4); color: var(--neutral-900);
}
.rdv-sub { margin-top: 8px; color: var(--neutral-700, #4a4a4a); }
.rdv-paths { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.rdv-path {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border: 1px solid var(--neutral-200, #e5e5e5); border-radius: 16px;
}
.rdv-path__label {
  font-family: var(--font-heading); font-weight: 500;
  font-size: var(--fs-body-md); color: var(--neutral-900);
}
.rdv-path__hint { font-size: var(--fs-body-sm); color: var(--neutral-500); }
/* Boutons internes du popup (spec popup-B1-hover) — pleine largeur, radius 11.
   Couleurs Doctolib scopées composant (HORS tokens.css). */
.rdv-paths { --c-doctolib: #2179BF; --c-doctolib-hover: #2E8AD4; }
.rdv-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px; border-radius: 11px; border: 0;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer; will-change: transform;
}
.rdv-btn__wm {
  width: 66.2px; height: 16px; flex: 0 0 auto;
  background: url(../img/doctolib-wordmark-white.svg) no-repeat center / contain;
}
.rdv-btn__dot { width: 4px; height: 4px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, .75); }
.rdv-btn__ext, .rdv-btn__ph { width: 16px; height: 16px; flex: 0 0 auto; }
/* CHEMIN A — B1 : plein bleu Doctolib, lift au survol (= A1 en bleu), flèche qui glisse */
.rdv-btn--doctolib {
  background: var(--c-doctolib); color: var(--neutral-0);
  box-shadow: 0 2px 6px rgba(33, 121, 191, .22);
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s, background .18s;
}
.rdv-btn--doctolib .rdv-btn__ext { transition: transform .18s cubic-bezier(.2, .7, .3, 1); }
.rdv-btn--doctolib:hover {
  background: var(--c-doctolib-hover); transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(33, 121, 191, .32);
}
.rdv-btn--doctolib:hover .rdv-btn__ext { transform: translateX(2px); }
.rdv-btn--doctolib:active { transform: translateY(0) scale(.99); }
/* CHEMIN B — téléphone ghost navy, remplissage au survol (= A3) */
.rdv-btn--tel {
  background: var(--neutral-0); color: var(--c-blue); border: 1.5px solid var(--c-blue);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.rdv-btn--tel:hover {
  background: var(--c-blue); color: var(--neutral-0);
  transform: translateY(-1px); box-shadow: 0 8px 20px rgba(36, 59, 82, .26);
}
.rdv-btn:focus-visible { outline: 3px solid #97C0E8; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .rdv-btn--doctolib, .rdv-btn--tel, .rdv-btn__ext {
    transition: background .2s, color .2s, box-shadow .2s !important; transform: none !important;
  }
  .rdv-btn--doctolib:hover, .rdv-btn--tel:hover { transform: none !important; }
  .rdv-btn--doctolib:hover .rdv-btn__ext { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   NAV — barre partagée (stampée), identique sur toutes les pages.
   Source : partials/nav.html. Géométrie : section « navigation-bar » 1348×64.
   Liens Inter 14/300 ; 4 réseaux (TikTok/Instagram/Facebook/YouTube, stroke
   #2B5273) ; CTA pilule « Prendre rendez-vous ». (Calage fin au palier nav.)
   ───────────────────────────────────────────────────────────────────────── */
/* .nav = piste transparente pleine largeur, FIXE au scroll ; la capsule blanche
   c'est .nav-inner. pointer-events: la piste laisse passer les clics, seule la
   capsule est interactive.
   FLOAT (padding-top) = valeur de départ À AJUSTER À L'ŒIL (pas un chiffre Figma fiable). */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  width: 100%;
  background: transparent;
  padding-top: 44px;
  pointer-events: none;
}
.nav-inner {
  position: relative;       /* ancre le panneau mobile .nav-collapse */
  box-sizing: border-box;
  pointer-events: auto;     /* seule la capsule capte les clics */
  max-width: 1348px;        /* capsule centrée → 46px de marge de chaque côté sur 1440 */
  margin: 0 auto;
  height: 64px;
  padding: 12px 12px 12px 20px;   /* maître Navbar 4658:2970 : pad[12/12/12/20] (source) ; height64 border-box → aire contenu 40, CTA centrée */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--neutral-0);            /* blanc #FFFFFF 100% opaque — pas de backdrop-blur (invisible sur fond opaque + fragile iOS) */
  border-radius: 999px;     /* pilule pleine (maître r9999 ; corrige la mesure PNG 28px) */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);  /* ombre subtile */
  transition: box-shadow 0.2s ease-out;
}
/* Au scroll : ombre renforcée pour rester lisible sur le contenu (forme inchangée).
   À JUGER À L'ŒIL — l'audit proto n'a montré aucune variante "scrolled". */
.nav.is-scrolled .nav-inner { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); }
.nav-logo img { display: block; height: 36px; width: auto; }  /* variante horizontale OnLight, hauteur maquette */
.nav-links { display: flex; align-items: center; gap: 20px; list-style: none; }
.nav-links a,
.nav-sub-trigger {
  position: relative;
  font-family: var(--font-body);       /* Inter */
  font-size: var(--fs-body-sm);        /* 14 */
  font-weight: var(--fw-body-sm);      /* 300 */
  line-height: var(--lh-body-sm);      /* 20 */
  color: var(--neutral-900);
  text-decoration: none;
}
/* Hover navbar = SOULIGNÉ qui apparaît (composant « Navbar Link » du design system,
   delta proto : underline-opacity 0 → 1, 300ms ease-out). PAS de changement de
   couleur du label. Source : hover capté côté Enlakoro (même système partagé). */
.nav-links > li > a::after,
.nav-sub-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.nav-links > li > a:hover::after,
.nav-sub-trigger:hover::after,
.nav-has-sub:hover .nav-sub-trigger::after,
.nav-has-sub:focus-within .nav-sub-trigger::after { opacity: 1; }

/* ── Sous-menu « Les soins » (overlay proto, couche manuelle) ─────────────────
   Déclencheur calé sur les liens nav (même fonte/couleur/souligné, pas de chrome
   bouton ni caret — le composant Navbar Link n'en a pas). Le panneau blanc arrondi
   reprend le langage de la capsule nav ; il s'ouvre au survol (desktop) ET au
   focus clavier, avec un pont transparent pour franchir le gap sans refermer. */
.nav-has-sub { position: relative; }
.nav-sub-trigger {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* Caret des déclencheurs (Le cabinet / Les soins) — pivote quand le panneau est ouvert. */
.nav-caret {
  margin-left: 6px;
  flex: none;
  transition: transform 0.2s ease-out;
}
.nav-has-sub:hover .nav-caret,
.nav-has-sub:focus-within .nav-caret,
.nav-sub-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 232px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--neutral-0);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
  z-index: 10;
}
/* pont transparent : comble le gap de 12px entre trigger et panneau */
.nav-sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.nav-has-sub:hover .nav-sub,
.nav-has-sub:focus-within .nav-sub,
.nav-sub-trigger[aria-expanded="true"] + .nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 12px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.nav-sub a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background 0.15s ease-out, color 0.15s ease-out;
}
.nav-sub a:hover { background: var(--c-biege); color: var(--c-blue); }
.nav-logo { display: inline-flex; }
.nav-logo img { display: block; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-social { display: flex; align-items: center; gap: 8px; list-style: none; }
.nav-social a { display: inline-flex; }

/* Structure desktop : le conteneur repliable s'efface (display:contents) pour que
   liens + droite se posent directement dans la capsule. `order` recompose la
   disposition d'origine (liens gauche · logo centre · droite), le DOM ayant le
   logo en premier pour le mobile. Burger masqué. */
.nav-collapse { display: contents; }
.nav-links { order: 1; }
.nav-logo  { order: 2; }
.nav-right { order: 3; }
.nav-burger { display: none; order: 4; }

/* ─────────────────────────────────────────────────────────────────────────
   Footer — DEUX zones (couleurs vérifiées à la source Figma) :
     · ZONE HAUTE  .ft-top    → fond CLAIR (Instagram #ffffff + Infos pratiques
                                transparent→blanc), texte gris foncé.
     · ZONE BASSE  .ft-bottom → pied NAVY #2b5273 (FRAME « Footer »), texte clair.
   Cartes infos = crème #fefcf9 (Frame 427321409/410).
   ───────────────────────────────────────────────────────────────────────── */
.site-footer {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-body-md);
  line-height: var(--lh-body-md);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.ft-top    { background: var(--neutral-0); color: var(--neutral-900); }
.ft-bottom { background: var(--c-blue);   color: var(--neutral-0); }   /* #2B5273 navy, PAS noir */

.ft-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 80px;
  display: flex;
  flex-direction: column;
}
/* Pied : padding maître 80×96 (colonnes à x96), distinct de la zone haute (80) */
.ft-bottom .ft-inner { padding: 80px 96px; }
/* Rythme vertical (Figma) : social→infos 80 (zone haute) ; main→legal 64 (zone navy) */
.ft-infos { margin-top: 80px; }
.ft-legal { margin-top: 64px; }

/* Suivez-nous */
.ft-social { display: flex; flex-direction: column; gap: 41px; }
.ft-social__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* Titres de section — maître : Nunito 300, 40/48 */
.ft-social__title,
.ft-infos__title { font-family: var(--font-heading); font-size: 40px; font-weight: 300; line-height: 48px; color: var(--neutral-900); }
/* Bouton « Nous suivre » — one-off maître : fond #0095f6 (bleu Instagram), Inter 500 14/28, blanc.
   PAS le CTA Nunito standard. Couleur = source ; lien/contenu Instagram = en attente cabinet. */
.ft-ig-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 25px; border-radius: 8px;
  background: #0095f6; color: #fff;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 28px;
  text-decoration: none; white-space: nowrap;
}
.ft-ig-btn:hover { text-decoration: none; filter: brightness(0.95); }
.ft-ig-btn__ic { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
/* Le reset `.site-footer a { color: inherit }` (spéc. 0,1,1) écrase la couleur des
   boutons-ancres (.cta tél pilule, .ft-ig-btn) ; on rétablit le blanc du maître. */
.site-footer a.cta, .site-footer a.ft-ig-btn { color: var(--neutral-0); }
/* 4 vignettes Instagram — fills réels du Figma (footer, nodes 4581:765→768 ;
   4×316×308, gap ~5px, rangée 1280). Cadrage cover/center (= spec photo-css
   du tile 3) ; le gris reste en repli avant chargement. */
.ft-social__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.ft-ig-tile { aspect-ratio: 316 / 308; background: var(--neutral-200, #e8e8e8) center / cover no-repeat; border-radius: 8px; }
.ft-social__grid .ft-ig-tile:nth-child(1) { background-image: url('../img/ig-1.webp'); }
.ft-social__grid .ft-ig-tile:nth-child(2) { background-image: url('../img/ig-2.webp'); }
.ft-social__grid .ft-ig-tile:nth-child(3) { background-image: url('../img/ig-3.webp'); }
.ft-social__grid .ft-ig-tile:nth-child(4) { background-image: url('../img/ig-4.webp'); }

/* Informations pratiques — 2 cartes crème à gauche + carte Maps à droite */
.ft-infos { display: flex; align-items: flex-start; gap: 64px; }
/* Maître : Information Container VERTICAL gap56 (titre → cartes → tél) */
.ft-infos__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 56px; }
.ft-infos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
/* Carte crème (Figma #fefcf9) : conteneur teinté arrondi — padding maître 20, gap interne 20 */
.ft-infos__col {
  display: flex; flex-direction: column; gap: 20px;
  background: #fefcf9;
  border: 1px solid rgba(32, 32, 32, 0.08);
  border-radius: 16px;
  padding: 20px;
}
/* Ligne pictogramme + contenu (icône alignée en haut du bloc texte) */
.ft-line { display: flex; align-items: flex-start; gap: 12px; }
.ft-line__ic { flex: 0 0 auto; width: 22px; height: 22px; display: block; margin-top: 1px; }
.ft-cabinet { font-style: normal; color: var(--neutral-500); }
.ft-cabinet__addr { color: var(--neutral-900); }
.ft-hours, .ft-bus { list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-body-sm); color: var(--neutral-700, #4a4a4a); }
.ft-cabinet__access { font-size: var(--fs-body-sm); color: var(--neutral-500); }
.ft-infos__tel { align-self: flex-start; }  /* tél = bouton-pilule autonome sous les 2 cartes (node 4581:793) ; espacement via gap56 du parent */
/* Carte Maps — placeholder dimensionné (Figma : 440×436 à droite, x920..1360) */
.ft-infos__map { flex: 0 0 440px; height: 436px; background: var(--neutral-200, #e8e8e8); border-radius: 16px; overflow: hidden; }  /* maître Map Image 4581:794 : 440×436 r16 */
.ft-infos__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ── Pied navy : logo + plan de liens ── */
/* Pied : logo (313×182) à gauche, colonnes (601) à droite ; rangée centrée
   verticalement (maître Frame 427321412 4581:796 counterAlign=CENTER, SPACE_BETWEEN). */
.ft-bottom__main { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.ft-logo { display: inline-flex; flex: 0 0 auto; }
.ft-logo img { display: block; width: 313px; height: 182px; }

/* Colonnes hug-content (maître : Général 147, Soins 174, Contact 120),
   séparées par un filet vertical au centre d'un gap de 80px (40 de chaque côté). */
.ft-links { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 80px; }
.ft-col { position: relative; flex: 0 0 auto; }
.ft-col__title, .ft-col a { white-space: nowrap; }
/* Séparateurs verticaux blancs @60% entre les 3 colonnes (maître Vector 4/5) */
.ft-col + .ft-col::before { content: ""; position: absolute; left: -40px; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.6); }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Titres colonnes — maître : Inter 500, 16/22, blanc 100% */
.ft-col__title { font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 22px; margin-bottom: 16px; color: #fff; }
/* Liens colonnes — maître : Nunito 300, 16/24, blanc 100% pur */
.ft-col a { font-family: var(--font-heading); font-size: 16px; font-weight: 300; line-height: 24px; color: #fff; }
/* Réseaux sociaux du pied — trait blanc 100% (maître), rangée horizontale (override .ft-col ul) */
.ft-col .ft-social-icons { list-style: none; display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 20px; color: #fff; }
.ft-social-icons a { display: inline-flex; color: inherit; }
.ft-social-icons a:hover { color: #fff; text-decoration: none; }

/* Barre basse — texte blanc 100%, filet @30% (maître) */
.ft-legal { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.3); font-family: var(--font-heading); font-size: 14px; font-weight: 300; line-height: 20px; color: #fff; }
.ft-legal__links { list-style: none; display: flex; gap: 24px; }

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE — parties partagées (nav, footer, popup).
   Pas de maquette mobile fournie : adaptation au jugement (single-column).
   Palier principal 1024 (burger + pile) ; affinage téléphone 560.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* ── COQUILLE : on libère la borne canvas 1440 → pleine largeur fluide.
     Sans ça, chaque <section> reste à 1440px et déborde la fenêtre (le contenu
     se plaque à gauche et déborde à droite). C'est la bascule maîtresse qui
     rend effectives toutes les règles mobiles par section/page. ── */
  main { width: 100%; max-width: 100%; }

  /* ── NAV : burger + panneau déroulant ────────────────────────────────── */
  .nav { padding-top: 16px; }
  .nav-inner {
    height: 56px;
    padding: 8px 10px 8px 16px;
    border-radius: 28px;
  }
  /* Le conteneur repliable redevient un vrai bloc (panneau) au lieu de display:contents */
  .nav-logo  { order: 1; }
  .nav-burger { display: inline-flex; order: 2; }

  .nav-burger {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    width: 40px; height: 40px;
    padding: 9px 8px;
    border: 0; background: none; cursor: pointer;
  }
  .nav-burger__bar {
    display: block; width: 100%; height: 2px;
    background: var(--c-blue); border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Panneau : absolu sous la capsule, masqué jusqu'au clic burger */
  .nav-collapse {
    display: block;
    order: 3;
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 12px;
    background: var(--neutral-0);
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
  }
  .nav-burger[aria-expanded="true"] ~ .nav-collapse {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  }

  /* Liens empilés, pleine largeur */
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav-links > li { width: 100%; }
  .nav-links a,
  .nav-sub-trigger {
    display: block;
    width: 100%;
    padding: 14px 10px;
    font-size: 16px;
    line-height: 22px;
    text-align: left;
  }
  /* Pas de souligné flottant en mode pile */
  .nav-links > li > a::after,
  .nav-sub-trigger::after { display: none; }

  /* Sous-menu « Les soins » : accordéon statique (plus de dropdown absolu) */
  .nav-sub {
    position: static;
    transform: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 4px 12px;
    background: none;
    box-shadow: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none;
  }
  .nav-sub::before { display: none; }
  /* Le survol ne doit pas ouvrir l'accordéon sur mobile (seul le clic via aria) */
  .nav-has-sub:hover .nav-sub { display: none; }
  /* L'état déplié desktop (.nav-sub-trigger[aria-expanded] + .nav-sub, spéc. 0,3,0)
     ré-applique transform:translate(-50%,12px) → réinitialiser ici sinon l'accordéon
     part 50% à gauche hors panneau. */
  .nav-sub-trigger[aria-expanded="true"] + .nav-sub {
    display: block;
    position: static;
    transform: none;
  }
  .nav-sub a { padding: 10px; font-size: 15px; }

  /* Réseaux + CTA : pile, séparés des liens par un filet */
  .nav-right {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(32, 32, 32, 0.08);
  }
  .nav-social { justify-content: center; gap: 18px; }
  .nav-cta { width: 100%; justify-content: center; }

  /* ── FOOTER : empilement single-column ───────────────────────────────── */
  .ft-inner { padding: 48px 24px; }
  .ft-bottom .ft-inner { padding: 48px 24px; }
  .ft-social__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-infos { flex-direction: column; gap: 40px; }
  .ft-infos__grid { grid-template-columns: minmax(0, 1fr); }
  .ft-infos__map { flex: 0 0 auto; width: 100%; height: 320px; }
  /* Pied navy : tout centré au milieu sur mobile/tablette. */
  .ft-bottom__main { flex-direction: column; align-items: center; gap: 40px; }
  .ft-logo img { width: auto; height: 140px; max-width: 100%; }
  .ft-links { flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 32px 56px; }
  .ft-col { text-align: center; }
  .ft-col ul { align-items: center; }
  .ft-col + .ft-col::before { display: none; }
  .ft-col .ft-social-icons { justify-content: center; }
  .ft-social__title,
  .ft-infos__title { font-size: 28px; line-height: 36px; }
  /* Barre basse centrée ; reset du retrait <ul> des liens légaux. */
  .ft-legal { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .ft-legal__links { margin: 0; padding: 0; justify-content: center; }
}

@media (max-width: 560px) {
  .nav-inner { padding: 8px 8px 8px 14px; }
  .nav-logo img { height: 30px; }
  /* On garde la grille IG à 2 colonnes même sur téléphone (look Instagram
     standard) : en 1 colonne, 8 tuiles pleine largeur = colonne interminable. */
  /* Liens légaux : empilés sur téléphone (le reset padding vient du palier 1024). */
  .ft-legal__links { flex-direction: column; gap: 8px; }
  /* Popup : marge écran réduite, coins moins prononcés */
  .rdv-overlay { padding: 16px; }
  .rdv-dialog { padding: 28px 20px 24px; border-radius: 20px; }
}