/* ============================================================================
   En-tête et menu — DermADN.

   Sorti de base.css le 2026-09-11. Raison : assets/nav.js construit le menu
   sur TOUTES les pages, y compris reservation.html et bon-cadeau.html, qui
   avaient été volontairement exclues de base.css au chantier 1 parce
   qu'elles portent leur propre CSS complet. Résultat : sur ces deux pages
   (et leurs versions anglaises), le menu recevait son markup mais aucun
   style — sous-menus à plat et bouton cookies affiché brut, ce que Nicolas a
   décrit comme « une barre bizarre à droite ».

   Leur donner base.css entier n'était pas la solution : mesuré, il changeait
   aussi le corps du tunnel (fond et bordure de .soins-grid, marges des h3).
   Le CSS du menu suit donc nav.js et se charge partout, séparément.

   Ce fichier doit être chargé AVANT le <style> de chaque page, comme
   base.css : une page garde ainsi le dernier mot sur son propre rendu.
   ============================================================================ */

  /* ===== NAV ===== */
  header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(239,238,230,.94);
    border-bottom:1px solid var(--line);
    backdrop-filter:saturate(140%) blur(18px);
  }
nav.wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:76px;
    position:relative;
  }
.logo{
    display:flex;
    align-items:center;
    min-width:0;
  }
.logo-wordmark{ height:clamp(62px, 9vw, 68px); width:auto; max-width:min(clamp(140px, 40vw, 310px), 100%); transition:opacity .25s ease; }
.logo:hover .logo-wordmark{ opacity:.82; }
.nav-links{
    position:absolute;
    top:calc(100% + 10px);
    right:32px;
    width:min(320px, calc(100vw - 44px));
    display:grid;
    gap:0;
    padding:10px 18px;
    background:var(--white);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
  }
.nav-links.open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
.nav-links a{
    display:block;
    padding:13px 0;
    border-bottom:1px solid var(--line);
    color:var(--ink-soft);
    font-size:13px;
    font-weight:500;
    transition:color .2s ease;
  }
.nav-links li:last-child a{ border-bottom:0; }
.nav-links a:hover{ color:var(--ink); }

/* Repère "vous êtes ici" — posé par assets/nav.js.
   .est-actif   : la page exactement affichée.
   .section-lue : sur l'accueil, la section en cours de lecture (le menu suit
     le défilement — voir SECTIONS dans nav.js).
   .parent-actif / .parent-lu : l'entrée qui contient cette page ou cette
     section (ex. "Soins & tarifs" quand on lit la page Microneedling).
   La couleur ne porte jamais l'information seule : un trait l'accompagne,
   pour rester lisible sans distinguer les teintes.

   UN SEUL TRAIT, PLEIN, pour les quatre cas (2026-09-12). Le parent avait
   auparavant un pointillé, pour distinguer "la page" de "la section qui la
   contient" ; Nicolas l'a signalé comme une incohérence à la lecture du
   menu : « pourquoi Soins & tarifs n'est pas souligné comme le reste ». La
   distinction se lit déjà ailleurs — le sous-menu déplié montre laquelle de
   ses pages est allumée — et ne valait pas deux styles de trait. */
.nav-links a.est-actif,
  .nav-links a.section-lue{
    color:var(--clay-lisible);
    font-weight:600;
    box-shadow:inset 2px 0 0 var(--clay-lisible);
    padding-left:10px;
  }
.nav-links .parent-actif > .nav-groupe-tete > a,
  .nav-links .parent-lu > .nav-groupe-tete > a{
    color:var(--clay-lisible);
    font-weight:600;
    box-shadow:inset 2px 0 0 var(--clay-lisible);
    padding-left:10px;
  }

.nav-links a::after{ display:none; }
.nav-cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.lang-dropdown{ position:relative; flex-shrink:0; }
.lang-trigger{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--line);
    background:rgba(251,250,247,.70);
    color:var(--ink);
    padding:8px 10px;
    min-height:38px;
    cursor:pointer;
    font-family:'Sora', 'Sora secours', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    transition:background .25s ease, border-color .25s ease, color .25s ease;
  }
.lang-trigger:hover,
  .lang-dropdown.is-open .lang-trigger{
    background:var(--white);
    border-color:var(--accent-2);
  }
.lang-icon{ width:18px; height:18px; display:block; }
.lang-chevron{ width:12px; height:12px; display:block; transition:transform .25s var(--ease); }
.lang-dropdown.is-open .lang-chevron{ transform:rotate(180deg); }
.lang-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:142px;
    padding:8px;
    background:rgba(251,250,247,.96);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .22s var(--ease), transform .22s var(--ease);
    z-index:140;
    backdrop-filter:saturate(140%) blur(16px);
  }
.lang-dropdown.is-open .lang-menu{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
.lang-menu a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 9px;
    color:var(--ink-soft);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
  }
.lang-menu a:hover,
  .lang-menu a[aria-current="true"]{
    color:var(--ink);
    background:var(--bone);
  }
.lang-check{
    width:12px;
    display:inline-flex;
    justify-content:center;
    color:var(--accent);
    font-size:12px;
  }
.btn-short{ display:none; }
.menu-toggle{

    display:inline-flex;
    background:transparent;
    border:1px solid var(--line);
    padding:10px;
    color:var(--ink);
    cursor:pointer;
    align-items:center;
    justify-content:center;
    transition:background .25s ease, border-color .25s ease;
  }
.menu-toggle:hover{ background:var(--white); border-color:var(--accent-2); }
.menu-toggle svg{ width:20px; height:20px; }
@media (max-width: 720px){
    nav.wrap{ height:72px; padding:0 18px; gap:10px; }
    .nav-links{ right:18px; }
    .nav-cta{ gap:7px; }
    .nav-cta .btn-primary{ padding:9px 11px; font-size:13px; min-height:38px; }
    .nav-cta .btn-primary svg{ display:none; }
    .btn-full{ display:none; }
    .btn-short{ display:inline; }
    .lang-trigger{ padding:8px 9px; min-width:40px; justify-content:center; }
    .lang-current{ display:none; }
    .lang-menu{ right:-6px; }
  }
@media (max-width: 430px){
    nav.wrap{ padding:0 14px; gap:8px; }
    .nav-cta{ gap:6px; }
    .nav-cta .btn-primary{ display:inline-flex; padding:9px 10px; font-size:12px; min-width:46px; justify-content:center; }
    .menu-toggle{ padding:9px; }
    .lang-trigger{ padding:8px; min-width:38px; }
  }

/* Menu à deux niveaux (2026-09-10) : "Accueil" et "Soins & tarifs" déplient
   leurs sous-entrées par le "+". Replié par défaut, y compris sans
   JavaScript, où le lien principal reste cliquable. */
.nav-groupe-tete{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
.nav-groupe-tete a{ flex:1; }
.nav-plus{
    background:none;
    border:0;
    padding:6px;
    margin-right:-6px;
    cursor:pointer;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    transition:transform .3s var(--ease), color .3s var(--ease);
  }
.nav-plus svg{ width:15px; height:15px; }
.nav-plus:hover{ color:var(--accent); }
/* Deux icônes dans le même bouton : le "+" pour le menu déroulant du mobile,
   où l'ouverture déplie une liste, et un chevron pour le header en ligne, où
   elle ouvre un panneau — le même geste que le sélecteur de langue juste à
   côté, donc la même flèche. */
.icone-chevron{ display:none; }
.nav-groupe.est-ouvert .nav-plus{ transform:rotate(45deg); color:var(--accent); }
.nav-sous{
    list-style:none;
    padding:0;
    margin:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .35s var(--ease);
  }
.nav-groupe.est-ouvert .nav-sous{ max-height:560px; }
/* Le menu ouvert avec un groupe déplié fait ~726 px : il tient sur un iPhone
   standard (812 px) mais déborderait sur un écran plus court, sans moyen
   d'atteindre les dernières entrées. On le borne à la hauteur disponible et
   on le rend défilant. */
.nav-links.open{
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
.nav-sous a{
    padding-left:14px;
    font-size:13.5px;
    color:var(--ink-soft);
    border-bottom:0;
  }
.nav-sous a:hover{ color:var(--accent); }

/* ---------------------------------------------------------------
   Header en ligne à partir de 1120 px (seuil relevé le 2026-09-11)
   ---------------------------------------------------------------
   Seuil mesuré, pas choisi au jugé : en dessous de 1060 px l'écart entre le
   logo et la première entrée tombe à ZÉRO (ils se touchent), et autant entre
   la dernière entrée et le sélecteur de langue. À 1120 px il reste 39 px de
   chaque côté. Le premier réglage à 900 px collait donc sur tout portable un
   peu étroit.
   En dessous, rien ne change : bouton hamburger et menu déroulant en
   accordéon. Au-dessus, les quatre entrées s'affichent directement dans
   l'en-tête et le bouton disparaît. C'est possible depuis que le menu a été
   ramené à quatre entrées ; avec les neuf d'avant, la ligne aurait débordé.
   Les groupes ("Soins & tarifs") ne poussent plus le contenu vers le bas mais
   s'ouvrent en panneau flottant sous leur entrée.                        */
/* Bouton biscuit des préférences cookies : visible seulement là où le menu
   est en ligne. En dessous de 900 px, c'est l'entrée textuelle du menu
   déroulant qui sert. */
.cookie-icone{ display:none; }

@media (min-width: 1120px){
  .menu-toggle{ display:none !important; }

  .cookie-icone{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    background:none;
    border:1px solid var(--line);
    border-radius:50%;
    color:var(--ink-soft);
    cursor:pointer;
    transition:color .25s var(--ease), border-color .25s var(--ease);
  }
  .cookie-icone svg{ width:17px; height:17px; }
  .cookie-icone:hover{ color:var(--accent); border-color:var(--accent); }
  .nav-item-cookies{ display:none; }

  .nav-links{
    position:static;
    width:auto;
    display:flex;
    align-items:center;
    gap:26px;
    padding:0;
    background:none;
    border:0;
    box-shadow:none;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .nav-links > li{ position:relative; }
  .nav-links a{
    padding:6px 0;
    border-bottom:0;
    font-size:13.5px;
    white-space:nowrap;
  }


  /* en ligne : le trait passe sous l'entrée plutôt qu'à sa gauche */
  .nav-links > li > a.est-actif,
  .nav-links > li > a.section-lue,
  .nav-links .nav-groupe-tete > a.est-actif,
  .nav-links .nav-groupe-tete > a.section-lue,
  .nav-links .parent-actif > .nav-groupe-tete > a,
  .nav-links .parent-lu > .nav-groupe-tete > a{
    box-shadow:inset 0 -2px 0 var(--clay-lisible);
    padding-left:0;
  }
  /* Et le repère ne change PAS la graisse ici. En menu déroulant il peut :
     les entrées y sont empilées, une lettre plus large ne bouge personne. En
     ligne, elles se suivent — et sur l'accueil le repère se déplace au
     défilement (.section-lue). Passer de 500 à 600 décalerait alors toutes
     les entrées suivantes de un à deux pixels à chaque changement de
     section : le menu tremblerait pendant la lecture. Couleur et trait
     suffisent à le repérer. */
  .nav-links > li > a.est-actif,
  .nav-links > li > a.section-lue,
  .nav-links .nav-groupe-tete > a.est-actif,
  .nav-links .nav-groupe-tete > a.section-lue,
  .nav-links .parent-actif > .nav-groupe-tete > a,
  .nav-links .parent-lu > .nav-groupe-tete > a{
    font-weight:500;
  }
  /* mais le sous-menu redevient une liste verticale : un trait dessous s'y
     lirait comme un séparateur de ligne, on le garde donc à gauche. */
  .nav-sous a.est-actif,
  .nav-sous a.section-lue{
    box-shadow:inset 2px 0 0 var(--clay-lisible);
    padding-left:10px;
  }

  .nav-groupe-tete{ gap:5px; }
  .nav-plus{ padding:4px; margin:0; }
  .icone-plus{ display:none; }
  .icone-chevron{ display:block; }
  .nav-plus svg{ width:13px; height:13px; }
  /* le chevron se retourne au lieu de pivoter en croix */
  .nav-groupe.est-ouvert .nav-plus{ transform:rotate(180deg); }

  /* le sous-menu devient un panneau flottant, pas un accordéon */
  .nav-sous{
    position:absolute;
    top:calc(100% + 12px);
    left:-18px;
    min-width:232px;
    background:var(--white);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:8px 18px;
    max-height:none;
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .24s var(--ease), transform .24s var(--ease);
    z-index:60;
  }
  .nav-groupe.est-ouvert .nav-sous{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav-sous li + li a{ border-top:1px solid var(--line); }
  .nav-sous a{ padding:11px 0; padding-left:0; font-size:13px; }
}