/* ==================================================================
   HEADER UNIQUE DU SITE — extrait de index-b.html (la home).
   Une seule barre de navigation pour toutes les pages : même markup,
   même CSS, même JS, même taille de logo.
   Chargé EN DERNIER pour l'emporter sur styles.css / premium.css.
   ================================================================== */

/* Variables dont le header a besoin, avec repli si la page ne les définit pas. */
:root {
  --pad: clamp(22px, 4.5vw, 76px);
  --maxw: 1360px;
  --black: #000000;
  --off: #FAF9FA;
  --mauve-light: #D7CED6;
  --mauve-bg: #F3F0F3;
  --ease: cubic-bezier(.2,.75,.25,1);
}

/* Conteneur de grille du header (identique à la home). */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 32px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:all .25s var(--ease);border:1px solid transparent;cursor:pointer;font-family:var(--body);text-align:center}
.btn-dark{background:#5A4758;color:#fff;border-color:#5A4758}
.btn-dark:hover{background:#463745;border-color:#463745}
.btn-light{background:transparent;color:var(--ink);border-color:var(--black)}
.btn-light:hover{background:var(--black);color:#fff}
.btn-white{background:#fff;color:var(--mauve-dark);border-color:#fff}
.btn-white:hover{background:transparent;color:#fff;border-color:#fff}

/* Neutralise l'ancien header des pages intérieures pour éviter tout conflit :
   styles.css impose height:var(--header-height) (92px) et premium.css un
   backdrop-filter ; la hauteur doit venir de .header-in (84px), comme sur la home. */
.site-header .header-inner,
.site-header .header-actions { display: none !important; }
.site-header { height: auto !important; }

/* ---------- Topbar ---------- */
.topbar{background:var(--white);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-block:10px}
.pill{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:7px 16px;transition:all .25s var(--ease);white-space:nowrap}
.pill:hover{background:var(--black);color:#fff}
.pill-ig{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mauve-light);color:var(--mauve-dark);text-decoration:none;transition:background .25s,color .25s}
.pill-ig svg{width:14px;height:14px;display:block}
.pill-ig:hover{background:var(--mauve);color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:84px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.brand img{height:34px;width:auto;max-width:none}
nav.main-nav{display:flex;align-items:center;gap:0}
nav.main-nav>div{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:10px 7px;font-size:10.5px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--body);font-weight:500;white-space:nowrap;position:relative}
.nav-link::after{content:"";position:absolute;left:9px;right:9px;bottom:4px;height:1px;background:var(--mauve-dark);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-link:hover::after,.has-mega:focus-within .nav-link::after{transform:scaleX(1)}
.nav-link:hover{color:var(--mauve-dark)}
.nav-link .chev{font-size:8px;color:var(--mauve);transition:transform .2s}
.has-mega:hover .chev,.has-mega:focus-within .chev{transform:rotate(180deg)}
/* Super mega menu : un seul panneau pleine largeur pour tous les univers */
.megapanel{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:2px solid var(--mauve);border-bottom:1px solid var(--line);box-shadow:0 30px 60px rgba(30,25,22,.12);opacity:0;pointer-events:none;transform:translateY(-6px);visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s;z-index:70}
.site-header.mega-open .megapanel{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.megapanel-in{display:grid;grid-template-columns:repeat(4,1fr) 1.1fr;gap:clamp(20px,2.5vw,44px);padding-block:38px 42px}
.megacol .mega-title{font-family:var(--display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--black);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.megacol ul{list-style:none;margin:0;padding:0}
.megacol li+li{margin-top:2px}
.megacol a{display:block;padding:6px 0;font-size:13px;text-decoration:none;color:var(--muted);transition:color .18s,padding-left .18s}
.megacol a:hover{color:var(--black);padding-left:6px}
.megacol .mega-all{margin-top:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mauve-dark)}
.megacol .mega-all:hover{color:var(--black)}
.megacol.is-hot .mega-title{border-bottom-color:var(--mauve);color:var(--mauve-dark)}
.megacta{background:var(--mauve-bg);padding:26px 28px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.megacta p{margin:0;font-size:13px;color:var(--muted);line-height:1.7}
.megacta strong{font-family:var(--display);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--black);font-size:13px;display:block;margin-bottom:6px}
.megacta .btn{align-self:flex-start;padding:12px 24px}
.megacta .megacta-tel{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.megacta .megacta-tel:hover{color:var(--mauve-dark)}
.header-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.header-tel{font-size:13px;letter-spacing:.06em;text-decoration:none;color:var(--ink);font-weight:600;white-space:nowrap}
.header-cta .btn{white-space:nowrap;padding:12px 18px}
.menu-toggle{display:none;background:none;border:1px solid var(--line);padding:10px 12px;cursor:pointer;font-family:var(--body);font-size:11px;letter-spacing:.14em;width:auto;height:auto;min-height:44px}

/* ---------- Parcours bar ---------- */
.parcours{position:sticky;top:84px;z-index:55;background:var(--mauve-light);border-bottom:1px solid var(--line)}
.parcours-in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.parcours-in::-webkit-scrollbar{display:none}
.parcours a{flex:0 0 auto;padding:13px 18px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:rgba(30,25,22,.85);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap;font-weight:500}
.parcours a:hover{color:var(--ink)}
.parcours a.active{color:var(--black);border-bottom-color:var(--black)}


.mobile-menu{position:fixed;inset:0;background:var(--white);z-index:90;display:flex;flex-direction:column;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s .25s}
.mobile-menu.is-open{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .25s var(--ease)}
.mm-head{display:flex;align-items:center;justify-content:space-between;height:72px;padding-inline:var(--pad);border-bottom:1px solid var(--line);flex-shrink:0}
.mm-head img{height:30px;width:auto;max-width:none}
.mm-close{background:none;border:1px solid var(--line);border-radius:999px;width:42px;height:42px;font-size:16px;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.mm-close:hover{border-color:var(--black)}
.mm-body{flex:1;overflow-y:auto;padding:10px var(--pad) 30px;-webkit-overflow-scrolling:touch}
.mm-body>details,.mm-body>a.mm-link{border-bottom:1px solid var(--line)}
.mm-body summary{font-family:var(--display);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--black);padding:20px 34px 20px 0;cursor:pointer;list-style:none;position:relative}
.mm-body summary::-webkit-details-marker{display:none}
.mm-body summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--body);font-size:20px;color:var(--mauve-dark);transition:transform .25s}
.mm-body details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.mm-sub{padding:0 0 16px}
.mm-sub a{display:block;padding:9px 0 9px 16px;font-size:14px;text-decoration:none;color:var(--muted);border-left:2px solid var(--mauve-light)}
.mm-sub a:active,.mm-sub a:hover{color:var(--black);border-left-color:var(--mauve-dark)}
a.mm-link{display:block;font-family:var(--display);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--black);padding:20px 0;text-decoration:none}
.mm-foot{padding:18px var(--pad) 26px;border-top:1px solid var(--line);display:grid;gap:10px;flex-shrink:0;background:var(--off)}
.mm-foot .btn{width:100%}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

@media (max-width:1360px){
  nav.main-nav{display:none}
  .megapanel{display:none}
  .menu-toggle{display:inline-flex}
  .header-tel{display:none}
  .header-cta .btn{display:none}
}


/* La topbar disparait en mobile, exactement comme sur la home (index-b.html:549).
   Sans cela « Teleconsultation » est ampute et le debordement part vers la gauche
   (justify-content:flex-end), donc irrattrapable au defilement. */
@media (max-width:960px){
  .topbar{display:none}
}

/* .main-nav a (styles.css + premium.css, anciennes regles) ecrasait .nav-link :
   les <a> passaient a 12px/0.01em quand les <button> restaient a 10.5px/.12em. */
.main-nav a.nav-link{font-size:10.5px;letter-spacing:.12em}

/* 10,5px sur --mauve-light : 3,73:1 -> 5,48:1 (WCAG AA) */
.parcours a,.parcours span{color:var(--muted)}

/* Bouton menu mobile : burger, plus de rectangle ni de libelle. */
.menu-toggle{border:0;padding:0;width:44px;height:44px;background:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.mt-bar{display:block;width:22px;height:1.5px;background:var(--ink,#1e1916);
  transition:transform .26s cubic-bezier(.2,.75,.25,1),opacity .18s}
.menu-toggle[aria-expanded="true"] .mt-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .mt-bar:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .mt-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Safari iOS : un element fixe en inset:0 est dimensionne sur le grand viewport,
   donc le pied du menu passe sous la barre du navigateur. dvh suit la barre. */
.mobile-menu{height:100vh;height:100dvh}
/* et le scroll du menu ne doit pas entrainer la page derriere */
.mm-body{overscroll-behavior:contain}

/* ------------------------------------------------------------------ *
 * Navigation entre 1024 et 1360 px.
 *
 * Le point de rupture etait cale sur --maxw (1360px), pas sur ce dont
 * la navigation a besoin. Resultat : toute fenetre plus etroite que
 * 1361px perdait la navigation, le telephone et le bouton de rendez-
 * vous, et n'affichait plus qu'un logo, un burger et mille pixels de
 * vide. C'est la largeur d'une fenetre Safari non plein ecran sur un
 * MacBook.
 *
 * Mesure : logo 235 + navigation 692 + bouton 208 + marges. En
 * resserrant l'interlettrage a .07em et les marges internes a 4px, le
 * tout tient jusqu'a 1024px. Verifie de 1024 a 1360 px sur WebKit et
 * sur Chrome : aucun chevauchement, aucun debordement.
 * ------------------------------------------------------------------ */
@media (min-width:1024px) and (max-width:1360px){
  nav.main-nav{
    display:flex;flex-direction:row;align-items:center;
    position:static;inset:auto;width:auto;height:auto;max-height:none;
    padding:0;background:none;overflow:visible;transform:none;
    opacity:1;visibility:visible;z-index:auto;border:0;
  }
  .megapanel{display:block}
  .menu-toggle{display:none}
  .header-in{padding-left:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px)}
  /* styles.css et premium.css passent ces liens en 28-44px sous 1220px :
     c'etait le gabarit d'un ancien menu plein ecran qui n'existe plus. */
  .main-nav a,.main-nav button,.nav-expertise summary{
    font-family:var(--body);font-size:10.5px;font-weight:500;line-height:1.3;
    letter-spacing:.07em;text-transform:uppercase;padding:10px 4px;
  }
  .nav-link::after{left:5px;right:5px}
}
@media (min-width:1024px) and (max-width:1259px){
  .header-cta .btn{display:none}
}
@media (min-width:1260px) and (max-width:1360px){
  .header-cta .btn{display:inline-flex;padding-left:16px;padding-right:16px}
}

/* Menu ouvert : le panneau (z-index 90) recouvre l'en-tete (z-index 60).
   Le burger restait donc affiche mais inerte, on ne pouvait plus fermer
   qu'avec la croix. Le panneau porte deja son logo et sa croix : on
   retire le burger tant qu'il est ouvert. */
body.menu-open .menu-toggle{visibility:hidden;pointer-events:none}

/* ------------------------------------------------------------------ *
 * Colonne de titre qui accompagne la lecture.
 *
 * Dans .universe-intro le titre fait 118 px et le texte en face 700 a
 * 780 px : 584 a 666 px de blanc sous le titre, mesures sur les cinq
 * pages d'univers. La colonne suit donc le defilement et s'arrete
 * d'elle-meme au bas de la section, avant la suivante.
 *
 * L'en-tete colle occupe 84 px et la barre de parcours 45 px de plus :
 * on se pose 24 px sous les deux. align-self:start est indispensable,
 * sans quoi l'element occupe toute la hauteur et n'a pas de course.
 * ------------------------------------------------------------------ */
@media (min-width:1024px){
  .universe-intro > :first-child{
    position:sticky;
    top:calc(var(--header-height,86px) + 67px);
    align-self:start;
  }
}

/* premium.css ramene tous les .button a un simple soulignement
   (border:0 puis border-bottom:1px). Le bouton plein le porte bien,
   mais le second bouton n'avait plus de contour : un texte souligne
   dans une pilule invisible. On lui rend son trait sur les quatre
   cotes, au meme rayon que le bouton plein. */
.button.button-outline{
  border:1px solid currentColor;
  border-radius:999px;
  background:transparent;
}
.button.button-outline:hover,.button.button-outline:focus-visible{
  background:var(--mauve-soft,#F3EDF1);
}

/* 10,5px sur --mauve-light : 3,73:1 -> 5,48:1 (WCAG AA) */
.parcours a,.parcours span{color:#5E465A}


/* 03/09 : recherche sur site. Bouton rond a gauche du rendez-vous,
   meme famille que les pastilles de la barre haute. */
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:999px;color:var(--black);margin-right:10px;transition:border-color .2s,background .2s}
.nav-search:hover,.nav-search:focus-visible{border-color:var(--black);background:var(--mauve-bg)}
@media (max-width:960px){.nav-search{display:none}}

/* 03/09 : hauteurs figees du haut de page. L'accueil (home.css : body 15.5px /
   1.75) et les pages interieures (16px / 1.55) heritaient de line-height
   differents, d'ou 2 a 3 px de decalage sur la barre, les pastilles, le bouton
   et le bandeau. Mesure au centieme par DevTools, puis fige ici. */
body .topbar, body .site-header, body .parcours{ font-size: 16px; line-height: 1.55 }
body .pill{ line-height: 15.5px }
body .pill-ig{ line-height: 0 }
body .header-cta .btn{ line-height: 17px }
body .parcours a{ line-height: 16.28px }
body .site-header{ height: auto }
body .header-in{ height: 84px }
body .nav-search{ flex: 0 0 40px }

/* 03/09 : menu reconstruit sur la structure du site actuel, pages reelles.
   Les entrees de second niveau sont retraitees ; les colonnes longues
   respirent. */
body .megacol ul{ display: grid; gap: 0 }
body .megacol li.sub a{ padding-left: 14px; font-size: 12.5px; color: var(--muted); position: relative }
body .megacol li.sub a::before{ content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 1px; background: var(--mauve-light) }
body .megacol li.sub a:hover{ color: var(--black) }
body .mega-all + .mega-all{ margin-left: 18px }
body .mm-sub a.sub{ padding-left: 28px; font-size: 13px; color: var(--muted) }
body .mm-sub a.mm-all{ font-weight: 600; color: var(--black) }
@media (min-width: 961px){ body .megapanel-in{ align-items: start } }

/* 03/09 : huit entrees dans la navigation (Diagnostic ajoute). Sous 1500 px,
   on resserre d'un cran pour que le bouton rendez-vous reste dans le cadre. */
@media (min-width: 961px) and (max-width: 1500px){
  body .nav-link{ padding: 10px 5px; letter-spacing: .1em }
  body .header-in{ gap: 10px }
  body .header-cta{ gap: 10px }
  body .header-cta .btn{ padding-left: 22px; padding-right: 22px }
}