/* ============================================================================
   LIDA COIFFURE BEAUTÉ ESTHÉTIQUE — Nice
   Feuille de style unique. Mobile-first. Noir / Or / Blanc.
   ----------------------------------------------------------------------------
   L'or du site est celui du logo de l'institut : E3-BD-75.

   RÈGLE DE CONTRASTE (non négociable) :
   · Sur fond SOMBRE  → texte --texte-clair / --texte-clair-2, accents --or, --or-clair
   · Sur fond CLAIR   → texte --texte-fonce / --texte-fonce-2, accents --or-fonce
   Le doré du logo n'atteint que 1,8:1 sur blanc : il y serait illisible, il est
   donc INTERDIT comme couleur de texte sur fond clair. On y emploie --or-fonce,
   qui est la même teinte (39°) simplement assombrie, à 5,5:1.
   Tous les ratios sont calculés selon WCAG 2.1 et vérifiés par _build/verifier.js.
   ========================================================================== */

/* ------------------------------------------------------------------ POLICES */
@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-300-latin.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant';src:url('../fonts/cormorant-600-latin-ext.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';src:url('../fonts/jost-300-latin.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';src:url('../fonts/jost-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';src:url('../fonts/jost-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';src:url('../fonts/jost-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';src:url('../fonts/jost-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';src:url('../fonts/jost-500-latin-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ------------------------------------------------------------- VARIABLES */
:root{
  /* Fonds sombres */
  --noir:#0B0B0B; --noir-2:#141312; --noir-3:#1C1A17; --noir-bord:#2A2620;
  /* Fonds clairs */
  --blanc:#FFFFFF; --creme:#FAF8F4; --creme-2:#F1ECE3; --creme-bord:#E3DACB;
  /* ---------------------------------------------------------------------
     OR — la couleur est celle du logo de l'institut, relevée au pixel sur le
     fichier fourni : #E3BD75 (teinte 39°, saturation 66 %).
     C'est la couleur employée PARTOUT : boutons, icônes, filets, survols.
     Seule exception, imposée par la lisibilité : sur fond blanc ou crème, ce
     doré clair ne dépasse pas 1,8:1 de contraste — il y serait illisible.
     On y utilise donc --or-fonce, qui est EXACTEMENT la même teinte (39°),
     simplement assombrie jusqu'à 5,6:1. C'est le même or, pas une autre couleur.
  --------------------------------------------------------------------- */
  --or:#E3BD75;          /* 11,1:1 sur --noir — doré exact de la marque */
  --or-clair:#ECD2A2;    /* 13,4:1 sur --noir — éclairci, pour les survols */
  --or-fonce:#87621C;    /*  5,6:1 sur blanc  — même teinte, assombrie */
  --or-voile:rgba(227,189,117,.14);
  /* Textes */
  --texte-clair:#F4F1EB;   /* 17,3:1 sur --noir */
  --texte-clair-2:#BDB6A9; /*  9,3:1 sur --noir */
  --texte-fonce:#14120F;   /* 19,0:1 sur blanc */
  --texte-fonce-2:#4A453D; /*  9,5:1 sur blanc */
  /* WhatsApp — vert officiel de la marque.
     Le texte posé dessus est quasi noir : 9,9:1. Le blanc, lui, ne donnerait
     que 1,98:1 sur ce vert — donc illisible, et interdit ici. */
  --wa:#25D366; --wa-survol:#3BE07A; --wa-txt:#062A14;
  /* Système */
  --ok:#2E7D4F; --erreur:#B3261E;
  --r:2px; --r-lg:4px;
  --ombre:0 1px 2px rgba(11,11,11,.04),0 8px 28px rgba(11,11,11,.07);
  --ombre-fort:0 18px 60px rgba(11,11,11,.16);
  --max:1240px; --max-txt:70ch;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --sect:clamp(4rem,9vw,7.5rem);
  --trans:.28s cubic-bezier(.4,0,.2,1);
  /* Hauteur d'en-tête et taille du logo : trois paliers, du mobile au grand écran. */
  --header-h:74px; --logo-h:32px; --logo-sub:.48rem;
}
@media (min-width:600px){ :root{ --header-h:82px; --logo-h:38px; --logo-sub:.55rem } }
@media (min-width:1060px){ :root{ --header-h:90px; --logo-h:44px; --logo-sub:.6rem } }

/* ------------------------------------------------------------------- BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--blanc);color:var(--texte-fonce);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);font-weight:400;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* overflow-x:hidden CRÉE une zone défilable horizontalement : la barre de
     défilement est cachée, mais sur iOS la page se laisse toujours pousser du
     doigt vers la droite, découvrant une bande blanche. C'est exactement le
     symptôme constaté, et aucune mesure ne le voyait puisque, justement, la
     règle masque le débordement.

     overflow-x:clip coupe SANS créer de zone défilable : il n'y a plus rien à
     faire glisser. Il ne casse pas non plus le .entete en position:sticky,
     ce que overflow:hidden posé sur <html> aurait fait.

     hidden reste en repli pour les navigateurs antérieurs à Safari 16. */
  overflow-x:hidden;
  overflow-x:clip;
}
/* Posé aussi sur la racine : c'est <html> qui défile sur iOS, pas <body>. */
html{overflow-x:clip}
img,svg,video,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
/* Contour de focus : doré foncé par défaut (fonds clairs), doré clair dès
   qu'on se trouve dans une zone sombre — visible dans les deux cas. */
:focus-visible{outline:2.5px solid var(--or-fonce);outline-offset:3px;border-radius:var(--r)}
.barre-info :focus-visible,.entete :focus-visible,.menu-mobile :focus-visible,
.barre-mobile :focus-visible,.heros :focus-visible,.confiance :focus-visible,
.bande-cta :focus-visible,.pied :focus-visible,
.sur-sombre :focus-visible,.section--noir :focus-visible{outline-color:var(--or-clair)}
::selection{background:var(--or);color:var(--noir)}

/* ------------------------------------------------------------ TYPOGRAPHIE */
.t-display,h1,h2,h3{font-family:'Cormorant',Georgia,'Times New Roman',serif;font-weight:400;line-height:1.12;letter-spacing:-.005em}
h1,.t-h1{font-size:clamp(2.35rem,1.5rem + 4.1vw,4.4rem)}
h2,.t-h2{font-size:clamp(1.95rem,1.35rem + 2.6vw,3.15rem)}
h3,.t-h3{font-size:clamp(1.3rem,1.1rem + .85vw,1.72rem);line-height:1.25}
.t-h4{font-family:'Jost',sans-serif;font-size:1.03rem;font-weight:500;line-height:1.4;letter-spacing:.01em}
em,.t-it{font-style:italic}
strong{font-weight:600;color:inherit}

/* Sur-titre doré : deux variantes de couleur selon le fond. */
.kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:'Jost',sans-serif;font-size:.735rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;line-height:1.4;
  color:var(--or-fonce);margin-bottom:1.15rem;
}
.kicker::before{content:'';width:2rem;height:1px;background:currentColor;opacity:.75;flex:none}
.sur-sombre .kicker{color:var(--or-clair)}

.lede{font-size:clamp(1.09rem,1.02rem + .38vw,1.3rem);line-height:1.66;color:var(--texte-fonce-2);font-weight:300}
.sur-sombre .lede{color:var(--texte-clair-2)}
.mesure{max-width:var(--max-txt)}
.centre{text-align:center}
.centre .kicker::before{display:none}
.centre .mesure{margin-inline:auto}

/* ------------------------------------------------------------ STRUCTURE */
.contenant{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.contenant-etroit{max-width:920px}
.section{padding-block:var(--sect)}
.section--serre{padding-block:clamp(3rem,6vw,4.5rem)}
.section--creme{background:var(--creme)}
.section--creme2{background:var(--creme-2)}
.sur-sombre,.section--noir{background:var(--noir);color:var(--texte-clair)}
.section--noir h1,.section--noir h2,.section--noir h3,.sur-sombre h1,.sur-sombre h2,.sur-sombre h3{color:var(--texte-clair)}
.section--noir p,.sur-sombre p{color:var(--texte-clair-2)}
.entete-section{margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.entete-section p{margin-top:1.15rem}

/* Filet doré décoratif */
.filet{height:1px;background:linear-gradient(90deg,transparent,var(--creme-bord) 18%,var(--creme-bord) 82%,transparent);border:0;margin:0}
.sur-sombre .filet,.section--noir .filet{background:linear-gradient(90deg,transparent,var(--noir-bord) 18%,var(--noir-bord) 82%,transparent)}

/* ------------------------------------------------------------------ LIENS */
.lien-or{
  display:inline-flex;align-items:center;gap:.5em;color:var(--or-fonce);
  font-weight:500;font-size:.94rem;letter-spacing:.03em;
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:gap var(--trans),opacity var(--trans);
}
.lien-or:hover{gap:.85em;opacity:.78}
.sur-sombre .lien-or,.section--noir .lien-or{color:var(--or-clair)}

/* ------------------------------------------------------------------ BOUTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  min-height:54px;padding:.95rem 1.85rem;border:1px solid transparent;border-radius:var(--r);
  font-family:'Jost',sans-serif;font-size:.895rem;font-weight:500;letter-spacing:.115em;
  text-transform:uppercase;line-height:1.2;text-align:center;cursor:pointer;
  transition:background var(--trans),color var(--trans),border-color var(--trans),transform var(--trans),box-shadow var(--trans);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.1em;height:1.1em;flex:none;fill:currentColor}

/* Or plein — texte noir : 8,2:1 */
.btn--or{background:var(--or);color:#0B0B0B;border-color:var(--or);box-shadow:0 4px 22px rgba(227,189,117,.26)}
.btn--or:hover{background:var(--or-clair);border-color:var(--or-clair);color:#0B0B0B;box-shadow:0 6px 28px rgba(227,189,117,.4)}

/* Contour, sur fond CLAIR — texte foncé */
.btn--contour{background:transparent;color:var(--texte-fonce);border-color:rgba(20,18,15,.28)}
.btn--contour:hover{background:var(--texte-fonce);color:var(--blanc);border-color:var(--texte-fonce)}

/* Contour, sur fond SOMBRE — texte clair */
.sur-sombre .btn--contour,.section--noir .btn--contour,.btn--contour-clair{
  background:transparent;color:var(--texte-clair);border-color:rgba(244,241,235,.34)
}
.sur-sombre .btn--contour:hover,.section--noir .btn--contour:hover,.btn--contour-clair:hover{
  background:var(--texte-clair);color:var(--noir);border-color:var(--texte-clair)
}

/* WhatsApp — vert de la marque, texte quasi noir (9,9:1) */
.btn--wa{background:var(--wa);color:var(--wa-txt);border-color:var(--wa);box-shadow:0 4px 22px rgba(37,211,102,.24)}
.btn--wa:hover{background:var(--wa-survol);border-color:var(--wa-survol);color:var(--wa-txt);box-shadow:0 6px 28px rgba(37,211,102,.38)}

/* Noir plein — texte clair */
.btn--noir{background:var(--noir);color:var(--texte-clair);border-color:var(--noir)}
.btn--noir:hover{background:var(--noir-3);border-color:var(--noir-3);color:var(--blanc)}

.btn--large{width:100%}
.groupe-btn{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.15rem}
@media (max-width:479px){.groupe-btn .btn{width:100%}}

/* ================================================================= HEADER */
.lien-evitement{
  position:absolute;left:.75rem;top:-100px;z-index:200;
  background:var(--or);color:#0B0B0B;padding:.85rem 1.35rem;border-radius:var(--r);
  font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:top .2s;
}
.lien-evitement:focus{top:.75rem}

.barre-info{
  background:var(--noir);color:var(--texte-clair-2);
  font-size:.775rem;letter-spacing:.055em;border-bottom:1px solid var(--noir-bord);
}
.barre-info__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:40px;flex-wrap:wrap}
.barre-info span,.barre-info a{display:inline-flex;align-items:center;gap:.5em}
.barre-info a{color:var(--or-clair);font-weight:500}
.barre-info a:hover{text-decoration:underline;text-underline-offset:3px}
.barre-info svg{width:14px;height:14px;fill:currentColor;flex:none;opacity:.9}
@media (max-width:899px){.barre-info{display:none}}

.entete{position:sticky;top:0;z-index:100;background:var(--noir);border-bottom:1px solid var(--noir-bord)}
.entete__in{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:var(--header-h)}
/* Sur les plus petits écrans, logo + sélecteur de langue + burger doivent tenir
   sur une ligne dès 320 px : on resserre les écarts plutôt que de sacrifier
   l'un des trois. */
@media (max-width:479px){
  .entete__in{gap:.6rem}
  .entete__actions{gap:.45rem}
  .langues__bouton{padding:.5rem .38rem}
  .langues__bouton .langues__drapeau{width:19px;height:13px}
}

/* Verrouillage du logo : signature dorée (image détourée) au-dessus du
   sous-titre composé en texte. La hauteur de la signature pilote tout le bloc,
   via --logo-h, ce qui rend l'ensemble fluide de 360 px à 1600 px de large. */
.logo{display:inline-flex;flex-direction:column;align-items:center;gap:.34rem;flex:none;line-height:1}
.logo__img{height:var(--logo-h);width:auto;display:block}
.logo__sub{
  font-size:var(--logo-sub);font-weight:400;letter-spacing:.215em;text-transform:uppercase;
  color:var(--or);white-space:nowrap;
}
.logo--pied{align-items:flex-start;--logo-h:56px;--logo-sub:.63rem}
@media (max-width:479px){.logo--pied{align-items:center}}

.nav{display:none}
@media (min-width:1060px){
  .nav{display:flex;align-items:center;gap:2.15rem}
  .nav__lien{
    position:relative;display:inline-flex;align-items:center;gap:.34em;
    font-size:.855rem;font-weight:400;letter-spacing:.075em;
    color:var(--texte-clair);padding-block:.4rem;white-space:nowrap;transition:color var(--trans);
  }
  /* Indicateur de sous-menu : chevron qui pivote quand le menu se déploie. */
  .nav__chevron{width:13px;height:13px;fill:var(--or);flex:none;transition:transform var(--trans),fill var(--trans)}
  .nav__item--menu:hover .nav__chevron,
  .nav__item--menu:focus-within .nav__chevron{transform:rotate(180deg);fill:var(--or-clair)}
  .nav__lien::after{
    content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
    background:var(--or);transition:right var(--trans);
  }
  .nav__lien:hover{color:var(--or-clair)}
  .nav__lien:hover::after,.nav__lien[aria-current="page"]::after{right:0}
  .nav__lien[aria-current="page"]{color:var(--or-clair)}
  .nav__item{position:relative}
  .nav__item--menu > .nav__lien::before{content:'';position:absolute;left:0;right:0;top:100%;height:1.15rem}
  .sous-nav{
    position:absolute;top:calc(100% + 1.15rem);left:50%;transform:translateX(-50%) translateY(-8px);
    min-width:290px;background:var(--noir-2);border:1px solid var(--noir-bord);
    padding:.6rem;box-shadow:var(--ombre-fort);border-radius:var(--r-lg);
    opacity:0;visibility:hidden;transition:opacity var(--trans),transform var(--trans),visibility var(--trans);
  }
  .nav__item:hover .sous-nav,.nav__item:focus-within .sous-nav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
  .sous-nav a{
    display:block;padding:.72rem .95rem;font-size:.855rem;color:var(--texte-clair-2);
    border-radius:var(--r);transition:background var(--trans),color var(--trans);
  }
  .sous-nav a:hover,.sous-nav a[aria-current="page"]{background:var(--or-voile);color:var(--or-clair)}
}

.entete__actions{display:flex;align-items:center;gap:.7rem;flex:none}
.entete__tel{
  display:none;align-items:center;gap:.55em;color:var(--texte-clair);
  font-size:1.02rem;font-weight:500;letter-spacing:.045em;white-space:nowrap;
}
.entete__tel svg{width:17px;height:17px;fill:var(--or);flex:none}
.entete__tel:hover{color:var(--or-clair)}
@media (min-width:700px){.entete__tel{display:inline-flex}}
.entete__cta{display:none}
@media (min-width:1060px){.entete__cta{display:inline-flex;min-height:46px;padding:.7rem 1.5rem;font-size:.79rem}}

/* Burger */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:transparent;
  border:1px solid var(--noir-bord);border-radius:var(--r);cursor:pointer;
}
.burger span{display:block;height:1.5px;background:var(--texte-clair);border-radius:2px;transition:transform var(--trans),opacity var(--trans)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:1060px){.burger{display:none}}

/* ================================================ SÉLECTEUR DE LANGUE (FR/EN)
   Deux formes pour deux contextes :

   · dans l'en-tête, un bouton unique — le drapeau de la langue affichée — qui
     déplie les autres. L'en-tête porte déjà le logo, la navigation, le
     téléphone et le bouton de rendez-vous : un composant à deux états y
     ajouterait un élément de trop, surtout sur mobile ;
   · dans le menu burger déployé, les deux langues côte à côte, en pleine
     largeur : la place ne manque pas et c'est là qu'une visiteuse anglophone
     regarde en premier.

   Les drapeaux sont des tracés SVG et non des emoji : Windows n'a pas de police
   de drapeaux et afficherait « GB » à la place du dessin.
---------------------------------------------------------------------------- */
/* ==================================================================== TARIFS
   C'est l'information que la visiteuse cherche avant d'appeler : elle doit se
   détacher du reste de la page. Le prix est aligné à droite et en doré —
   l'œil descend la colonne sans lire les libellés.

   La grille est claire PAR DÉFAUT et s'inverse sur fond sombre, comme
   .tarifs__groupe plus bas. Elle était écrite dans l'autre sens, et une
   grille déposée dans une section crème tombait à 1,06:1 sur les libellés et
   1,78:1 sur les prix : le tableau était bien là, mais illisible. Le sens
   choisi ici est le seul qui échoue du bon côté — sur un fond clair oublié,
   du texte foncé reste lisible.

   Sur fond clair, le doré passe à --or-fonce : exactement la même teinte,
   assombrie jusqu'à 5,6:1. Ce n'est pas une autre couleur.
---------------------------------------------------------------------------- */
.tarifs{width:100%;border-collapse:collapse;margin-top:.5rem}
.tarifs th,.tarifs td{
  padding:1.05rem .25rem;border-bottom:1px solid var(--creme-bord);
  font-size:1.02rem;line-height:1.5;vertical-align:baseline;
}
.tarifs th{text-align:left;font-weight:400;color:var(--texte-fonce);padding-right:1.5rem}
.tarifs td{
  text-align:right;white-space:nowrap;
  font-weight:500;letter-spacing:.02em;color:var(--or-fonce);
}
.tarifs tr:last-child th,.tarifs tr:last-child td{border-bottom:0}
.section--noir .tarifs th,.sur-sombre .tarifs th{color:var(--texte-clair)}
.section--noir .tarifs td,.sur-sombre .tarifs td{color:var(--or)}
.section--noir .tarifs th,.section--noir .tarifs td,
.sur-sombre .tarifs th,.sur-sombre .tarifs td{border-bottom-color:var(--noir-bord)}
.tarifs__note{margin-top:1.5rem;font-size:.93rem;line-height:1.75;color:var(--texte-fonce-2)}
.section--noir .tarifs__note,.sur-sombre .tarifs__note{color:var(--texte-clair-2)}
/* Mention discrète sur fond clair — 9,5:1, donc lisible malgré la petite
   taille : une mention légale illisible ne protège de rien. */
.note{font-size:.93rem;line-height:1.75;color:var(--texte-fonce-2)}
.tarifs__note a{color:var(--or-fonce);font-weight:500}
.section--noir .tarifs__note a,.sur-sombre .tarifs__note a{color:var(--or-clair)}
.tarifs__note a:hover{text-decoration:underline;text-underline-offset:3px}
/* Sur petit écran, un libellé long ne doit pas écraser le prix. */
@media (max-width:479px){
  .tarifs th,.tarifs td{font-size:.95rem;padding:.9rem .2rem}
  .tarifs th{padding-right:1rem}
}

.langues{flex:none}
.langues__drapeau{
  width:21px;height:14px;flex:none;border-radius:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
}
.langues__code{font-size:.72rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase}

/* ---------------------------------------------- En-tête : liste déroulante */
.langues__bloc{position:relative}
.langues__bouton{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.5rem .55rem;min-height:40px;cursor:pointer;list-style:none;
  border:1px solid var(--noir-bord);border-radius:var(--r);
  color:var(--texte-clair-2);transition:background var(--trans),color var(--trans);
}
.langues__bouton::-webkit-details-marker{display:none}   /* triangle natif Safari/Chrome */
.langues__bouton:hover{background:rgba(255,255,255,.05);color:var(--texte-clair)}
.langues__bouton:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.langues__chevron{width:12px;height:12px;fill:var(--or);flex:none;transition:transform var(--trans)}
.langues__bloc[open] .langues__bouton{background:var(--or-voile);color:var(--or-clair)}
.langues__bloc[open] .langues__chevron{transform:rotate(180deg)}

/* Panneau déplié : même matière que les sous-menus de la navigation. */
.langues__liste{
  position:absolute;top:calc(100% + .55rem);right:0;z-index:120;min-width:190px;
  background:var(--noir-2);border:1px solid var(--noir-bord);border-radius:var(--r-lg);
  padding:.4rem;box-shadow:var(--ombre-fort);
}
.langues__option{
  display:flex;align-items:center;gap:.7em;padding:.7rem .8rem;border-radius:var(--r);
  font-size:.855rem;color:var(--texte-clair-2);white-space:nowrap;
  transition:background var(--trans),color var(--trans);
}
.langues__option .langues__code{text-transform:none;letter-spacing:.02em;font-size:.855rem}
.langues__option:hover{background:rgba(255,255,255,.05);color:var(--texte-clair)}
.langues__option.est-actif{background:var(--or-voile);color:var(--or-clair)}
.langues__option.est-actif .langues__drapeau{box-shadow:0 0 0 1px rgba(227,189,117,.55)}

/* Sous 700 px l'en-tête est compté au pixel : le drapeau seul suffit, le
   panneau déplié affiche de toute façon les langues en toutes lettres. */
@media (max-width:699px){
  .langues__bouton .langues__code{display:none}
  .langues__bouton{padding:.5rem .45rem;gap:.3em}
}

/* Menu burger ouvert : le choix de langue est déjà en pleine largeur juste en
   dessous, on retire le bouton de l'en-tête pour ne pas le proposer deux fois. */
.menu-ouvert .langues--entete{display:none}

/* ------------------------------------- Menu mobile : les deux, côte à côte */
.langues--menu{display:block;width:100%;margin-bottom:1.75rem}
.langues__paire{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--noir-bord);border-radius:var(--r);overflow:hidden;
}
.langues__paire .langues__lien{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85rem .5rem;min-height:52px;
  color:var(--texte-clair-2);transition:background var(--trans),color var(--trans);
}
.langues__paire .langues__lien + .langues__lien{border-left:1px solid var(--noir-bord)}
.langues__paire .langues__lien:hover{background:rgba(255,255,255,.05);color:var(--texte-clair)}
.langues__paire .langues__lien:focus-visible{outline:2px solid var(--or);outline-offset:-2px}
.langues__paire .langues__lien.est-actif{background:var(--or-voile);color:var(--or-clair)}
.langues__paire .langues__lien.est-actif .langues__drapeau{box-shadow:0 0 0 1px rgba(227,189,117,.55)}
.langues__paire .langues__code{font-size:.78rem}
.langues__paire .langues__drapeau{width:24px;height:16px}

/* Menu mobile */
.menu-mobile{
  position:fixed;inset:0;top:0;z-index:99;background:var(--noir);
  padding:calc(var(--header-h) + 1.5rem) var(--pad) 2.5rem;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-1.25rem);
  transition:opacity var(--trans),transform var(--trans),visibility var(--trans);
}
.menu-mobile[data-ouvert="true"]{opacity:1;visibility:visible;transform:none}
.menu-mobile__rangee{display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--noir-bord)}
.menu-mobile__lien{
  display:block;flex:1;font-family:'Cormorant',serif;font-size:1.7rem;
  padding:1rem 0;color:var(--texte-clair);
}
.menu-mobile > ul > li:not(.menu-mobile__groupe) > .menu-mobile__lien{border-bottom:1px solid var(--noir-bord)}
.menu-mobile__lien[aria-current="page"]{color:var(--or-clair)}
/* Bouton d'ouverture du sous-menu : cible tactile de 48 px, chevron pivotant. */
.menu-mobile__bascule{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;background:transparent;cursor:pointer;
  border:1px solid var(--noir-bord);border-radius:var(--r);
}
.menu-mobile__bascule svg{width:20px;height:20px;fill:var(--or);transition:transform var(--trans)}
.menu-mobile__bascule[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-mobile__sous{
  display:none;margin:.9rem 0 1.2rem;padding:.2rem 0 .2rem 1rem;
  border-left:1px solid var(--noir-bord);
}
.menu-mobile__sous[data-ouvert="true"]{display:block}
.menu-mobile__sous a{display:block;font-size:.98rem;color:var(--texte-clair-2);padding:.86rem 0}
.menu-mobile__sous a:hover,.menu-mobile__sous a[aria-current="page"]{color:var(--or-clair)}
.menu-mobile__pied{margin-top:2rem;display:grid;gap:.85rem}
.menu-mobile__nap{margin-top:1.85rem;font-size:.885rem;color:var(--texte-clair-2);line-height:1.85}
.menu-mobile__nap strong{color:var(--texte-clair);display:block;margin-bottom:.35rem;font-weight:500}
@media (min-width:1060px){.menu-mobile{display:none}}

/* ============================================== BARRE D'ACTION MOBILE (CTA) */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:98;display:grid;grid-template-columns:1fr 1fr 1fr;
  background:var(--noir);border-top:1px solid var(--noir-bord);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 26px rgba(0,0,0,.32);
}
.barre-mobile a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;
  padding:.72rem .3rem;font-size:.685rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texte-clair);min-height:60px;
  border-right:1px solid var(--noir-bord);
}
.barre-mobile a:last-child{border-right:0}
.barre-mobile a svg{width:19px;height:19px;fill:var(--or)}
.barre-mobile a.est-primaire{background:var(--or);color:#0B0B0B}
.barre-mobile a.est-primaire svg{fill:#0B0B0B}
/* L'icône WhatsApp reprend le vert de la marque : 9,9:1 sur le fond noir. */
.barre-mobile a.est-wa svg{fill:var(--wa)}
@media (min-width:1060px){.barre-mobile{display:none}}
@media (max-width:1059px){body{padding-bottom:60px}}

/* ================================================ BANDEAU DE CONSENTEMENT
   Contrainte de place : une seule ligne sur grand écran, deux sur mobile.
   Ce bandeau ne vend rien, il ne doit donc pas manger l'écran.

   Il se pose AU-DESSUS de la barre d'action mobile (60 px) au lieu de la
   recouvrir : c'est elle qui porte les boutons Appeler et WhatsApp, et les
   masquer pour demander l'autorisation de mesurer coûterait des rendez-vous.

   Les deux boutons sont rigoureusement identiques — même taille, même
   contour, même couleur. La CNIL exige que refuser soit aussi simple
   qu'accepter : mettre « Accepter » en doré plein et « Refuser » en petit
   texte gris est précisément ce qu'elle sanctionne.
   ---------------------------------------------------------------------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:101;
  background:var(--noir-2);border-top:1px solid var(--noir-bord);
  box-shadow:0 -10px 34px rgba(0,0,0,.45);
  padding:.85rem var(--pad);
  padding-bottom:calc(.85rem + env(safe-area-inset-bottom));
}
.consent[hidden]{display:none}
.consent__in{
  max-width:1180px;margin-inline:auto;
  display:grid;gap:.75rem;align-items:center;
}
.consent__txt{
  font-size:.865rem;line-height:1.55;color:var(--texte-clair-2);margin:0;
}
.consent__txt a{color:var(--or-clair);text-decoration:underline;text-underline-offset:2px}
.consent__txt a:hover{color:var(--or)}
/* Les deux boutons occupent STRICTEMENT la même largeur. Laissés en largeur
   automatique, « Accepter » faisait 110 px et « Refuser » 99 : un écart de
   11 px suffit à donner un avantage visuel à l'un des deux, ce que la CNIL
   examine précisément. */
.consent__actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.consent__btn{
  appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.6rem 1.15rem;
  font-family:'Jost',sans-serif;font-size:.8rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  color:var(--texte-clair);background:transparent;
  border:1px solid var(--or);border-radius:var(--r);
  transition:background var(--trans),color var(--trans);
}
.consent__btn:hover{background:var(--or);color:#0B0B0B}
.consent__btn:focus-visible{outline:2.5px solid var(--or-clair);outline-offset:3px}

/* Au-dessus de la barre d'action mobile. --barre-h est mesurée à l'exécution
   par consentement.js : sa valeur réelle dépend de la police et de la marge
   de sécurité de l'appareil. Le 66px de repli n'existe que pour le très bref
   instant qui précède la mesure. */
@media (max-width:1059px){
  .consent{
    bottom:calc(var(--barre-h, 66px));
    padding-block:.7rem;padding-bottom:.7rem;
  }
  .consent__txt{font-size:.815rem;line-height:1.5}
  .consent__in{gap:.6rem}
}
/* À partir de 700 px, tout tient sur une seule ligne. Les deux boutons
   gardent la même largeur, fixée sur le plus long des deux libellés. */
@media (min-width:700px){
  .consent__in{grid-template-columns:1fr auto;gap:1.5rem}
  .consent__actions{grid-template-columns:repeat(2,minmax(118px,1fr))}
}

/* ====================================================== BULLE WHATSAPP
   Bouton flottant en bas à droite, avec un message déjà rédigé.
   Affiché à partir de 1060 px seulement : en dessous, la barre d'action fixe
   propose déjà WhatsApp, inutile de doubler le bouton et d'encombrer l'écran.
   ---------------------------------------------------------------------- */
.bulle-wa{display:none}
@media (min-width:1060px){
  .bulle-wa{
    position:fixed;right:26px;bottom:26px;z-index:97;
    display:flex;align-items:center;gap:.7rem;text-decoration:none;
  }
  .bulle-wa__rond{
    display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
    background:var(--wa);box-shadow:0 8px 26px rgba(0,0,0,.3),0 0 0 0 rgba(37,211,102,.5);
    transition:transform var(--trans),background var(--trans),box-shadow var(--trans);
  }
  .bulle-wa__rond svg{width:32px;height:32px;fill:var(--wa-txt)}
  .bulle-wa__etiquette{
    background:var(--noir-2);color:var(--texte-clair);
    border:1px solid var(--noir-bord);border-radius:100px;
    padding:.62rem 1.05rem;font-size:.82rem;font-weight:500;letter-spacing:.03em;
    white-space:nowrap;box-shadow:var(--ombre-fort);
    opacity:0;transform:translateX(12px);pointer-events:none;
    transition:opacity var(--trans),transform var(--trans);
  }
  .bulle-wa:hover .bulle-wa__etiquette,
  .bulle-wa:focus-visible .bulle-wa__etiquette{opacity:1;transform:none}
  .bulle-wa:hover .bulle-wa__rond{transform:scale(1.07);background:var(--wa-survol)}
  .bulle-wa:focus-visible{outline:none}
  .bulle-wa:focus-visible .bulle-wa__rond{outline:3px solid var(--or-clair);outline-offset:4px}

  /* Halo d'appel discret, pour attirer l'œil sans agresser. */
  @media (prefers-reduced-motion:no-preference){
    .bulle-wa__rond{animation:halo-wa 3.4s cubic-bezier(.4,0,.6,1) infinite}
    .bulle-wa:hover .bulle-wa__rond{animation:none}
  }
}
@keyframes halo-wa{
  0%,70%,100%{box-shadow:0 8px 26px rgba(0,0,0,.3),0 0 0 0 rgba(37,211,102,.45)}
  35%        {box-shadow:0 8px 26px rgba(0,0,0,.3),0 0 0 16px rgba(37,211,102,0)}
}

/* ================================================================== HÉROS */
.heros{background:var(--noir);color:var(--texte-clair);position:relative;overflow:hidden}
.heros::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 12% 0%,rgba(227,189,117,.11),transparent 58%);
}
.heros__in{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,6vw,4.5rem);
  padding-block:clamp(3rem,8vw,6rem);align-items:center}
@media (min-width:960px){.heros__in{grid-template-columns:1.05fr .95fr;padding-block:clamp(4.5rem,7vw,7rem)}}
.heros__txt{max-width:44rem}
.heros h1{color:var(--texte-clair);margin-bottom:1.4rem}
.heros h1 em{color:var(--or-clair);font-style:italic;font-weight:300}
.heros__sous{font-size:clamp(1.06rem,1rem + .38vw,1.24rem);color:var(--texte-clair-2);font-weight:300;line-height:1.68;max-width:36rem}

.heros__preuves{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2.15rem;padding-top:1.85rem;border-top:1px solid var(--noir-bord)}
.heros__preuves li{display:flex;align-items:center;gap:.55em;font-size:.845rem;color:var(--texte-clair-2);letter-spacing:.02em}
.heros__preuves svg{width:15px;height:15px;fill:var(--or);flex:none}

.heros__media{position:relative}
.heros__media img{width:100%;border-radius:var(--r-lg);aspect-ratio:4/5;object-fit:cover}
.heros__media::before{
  content:'';position:absolute;inset:1.15rem -1.15rem -1.15rem 1.15rem;
  border:1px solid var(--or);opacity:.42;border-radius:var(--r-lg);pointer-events:none;
}
@media (max-width:959px){
  .heros__media{max-width:440px;margin-inline:auto;width:100%}
  .heros__media::before{inset:.85rem -.85rem -.85rem .85rem}
}

/* Héros de page intérieure */
.heros--page .heros__in{padding-block:clamp(2.5rem,6vw,4.75rem)}
@media (min-width:960px){.heros--page .heros__in{grid-template-columns:1.1fr .9fr}}
.heros--page .heros__media img{aspect-ratio:16/10}
@media (min-width:960px){.heros--page .heros__media img{aspect-ratio:4/5}}

/* Fil d'Ariane — toujours sur fond sombre, pour rester lisible. */
.ariane-bande{background:var(--noir)}
.ariane{font-size:.79rem;color:var(--texte-clair-2);letter-spacing:.045em;padding-block:.35rem}
.ariane ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5em}
.ariane li{display:flex;align-items:center;gap:.5em}
.ariane li+li::before{content:'/';opacity:.42}
.ariane a:hover{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}
.ariane [aria-current="page"]{color:var(--or-clair)}

/* ============================================================ BANDE CONFIANCE */
.confiance{background:var(--noir-2);border-block:1px solid var(--noir-bord);color:var(--texte-clair)}
.confiance ul{display:grid;gap:1px;background:var(--noir-bord)}
@media (min-width:640px){.confiance ul{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.confiance ul{grid-template-columns:repeat(4,1fr)}}
.confiance li{background:var(--noir-2);padding:1.65rem var(--pad);display:flex;gap:.95rem;align-items:flex-start}
.confiance svg{width:21px;height:21px;fill:var(--or);flex:none;margin-top:.25rem}
.confiance b{display:block;font-weight:500;font-size:.955rem;color:var(--texte-clair);margin-bottom:.2rem}
.confiance span{font-size:.845rem;color:var(--texte-clair-2);line-height:1.6}

/* ============================================================== GRILLE CARTES */
.grille{display:grid;gap:clamp(1.1rem,2.2vw,1.65rem)}
@media (min-width:600px){.grille--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:600px){.grille--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grille--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:600px){.grille--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grille--4{grid-template-columns:repeat(4,1fr)}}

/* Carte prestation */
.carte-presta{
  display:flex;flex-direction:column;background:var(--blanc);
  border:1px solid var(--creme-bord);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans);
}
.carte-presta:hover{transform:translateY(-5px);box-shadow:var(--ombre-fort);border-color:var(--or-fonce)}
.carte-presta__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--creme-2)}
.carte-presta__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.carte-presta:hover .carte-presta__img img{transform:scale(1.05)}
.carte-presta__corps{padding:1.65rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1;gap:.6rem}
.carte-presta__corps h3{color:var(--texte-fonce)}
.carte-presta__corps p{color:var(--texte-fonce-2);font-size:.925rem;line-height:1.62}
.carte-presta__lien{margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.5em;
  color:var(--or-fonce);font-size:.83rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.carte-presta__lien svg{width:1em;height:1em;fill:currentColor;transition:transform var(--trans)}
.carte-presta:hover .carte-presta__lien svg{transform:translateX(4px)}

/* Carte simple (bénéfices / engagements) */
.carte{background:var(--blanc);border:1px solid var(--creme-bord);border-radius:var(--r-lg);padding:1.85rem 1.65rem}
.carte h3,.carte .t-h4{margin-bottom:.6rem;color:var(--texte-fonce)}
.carte p{color:var(--texte-fonce-2);font-size:.94rem;line-height:1.68}
.carte__icone{width:34px;height:34px;fill:var(--or-fonce);margin-bottom:1.1rem}
.section--creme .carte{background:var(--blanc)}
.sur-sombre .carte,.section--noir .carte{background:var(--noir-2);border-color:var(--noir-bord)}
.sur-sombre .carte h3,.section--noir .carte h3,.sur-sombre .carte .t-h4,.section--noir .carte .t-h4{color:var(--texte-clair)}
.sur-sombre .carte p,.section--noir .carte p{color:var(--texte-clair-2)}
.sur-sombre .carte__icone,.section--noir .carte__icone{fill:var(--or)}

/* Étapes numérotées */
.etapes{counter-reset:e;display:grid;gap:0}
.etape{display:grid;grid-template-columns:auto 1fr;gap:1.35rem;padding:1.75rem 0;border-top:1px solid var(--creme-bord)}
.etape:last-child{border-bottom:1px solid var(--creme-bord)}
.etape__n{
  font-family:'Cormorant',serif;font-size:1.85rem;font-weight:400;line-height:1;
  color:var(--or-fonce);min-width:2.6rem;padding-top:.15rem;
}
.etape h3{margin-bottom:.5rem}
.etape p{color:var(--texte-fonce-2);font-size:.945rem}
.sur-sombre .etape,.section--noir .etape{border-color:var(--noir-bord)}
.sur-sombre .etape__n,.section--noir .etape__n{color:var(--or)}

/* Liste à puces dorées */
.liste-or{display:grid;gap:.85rem}
.liste-or li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;font-size:.965rem;color:var(--texte-fonce-2);line-height:1.62}
.liste-or li strong{color:var(--texte-fonce)}
.liste-or svg{width:17px;height:17px;fill:var(--or-fonce);margin-top:.34rem;flex:none}
.sur-sombre .liste-or li,.section--noir .liste-or li{color:var(--texte-clair-2)}
.sur-sombre .liste-or li strong,.section--noir .liste-or li strong{color:var(--texte-clair)}
.sur-sombre .liste-or svg,.section--noir .liste-or svg{fill:var(--or)}

/* Bloc définition (réponse directe — optimisé moteurs de réponse) */
.definition{
  background:var(--creme);border-left:3px solid var(--or-fonce);border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:clamp(1.6rem,3.4vw,2.35rem);
}
.definition p{font-size:clamp(1.02rem,.98rem + .28vw,1.13rem);line-height:1.74;color:var(--texte-fonce)}
.definition p+p{margin-top:1rem}
.definition strong{color:var(--texte-fonce);font-weight:600}

/* Tableau infos pratiques */
.infos-table{width:100%;border-collapse:collapse;font-size:.955rem}
.infos-table th,.infos-table td{text-align:left;padding:1.05rem 0;border-bottom:1px solid var(--creme-bord);vertical-align:top}
.infos-table th{font-weight:500;color:var(--texte-fonce);width:44%;padding-right:1.5rem}
.infos-table td{color:var(--texte-fonce-2)}
.infos-table tr:last-child th,.infos-table tr:last-child td{border-bottom:0}
@media (max-width:559px){
  .infos-table,.infos-table tbody,.infos-table tr,.infos-table th,.infos-table td{display:block;width:100%}
  .infos-table th{border-bottom:0;padding-bottom:.15rem}
  .infos-table td{padding-top:0;padding-bottom:1.05rem}
}

/* Encart précautions */
.encart-attention{
  background:var(--creme-2);border:1px solid var(--creme-bord);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.05rem);
}
.encart-attention .t-h4{display:flex;align-items:center;gap:.6em;margin-bottom:.85rem;color:var(--texte-fonce)}
.encart-attention svg{width:19px;height:19px;fill:var(--or-fonce);flex:none}
.encart-attention p{font-size:.925rem;color:var(--texte-fonce-2);line-height:1.72}

/* Avant / après en pleine largeur du bloc — page Microblading.
   Les deux moitiés sont côte à côte DANS l'image : on ne lui impose donc
   aucun aspect-ratio, elle garde le sien (16/10) et les deux panneaux
   restent entiers, quelle que soit la largeur de l'écran. */
#avant-apres > .contenant-etroit > img{
  width:100%;height:auto;border-radius:var(--r-lg);display:block;
}

/* Paire de photos carrées — bloc « en cabine ».
   La largeur est bornée : ces photos font 480 px de côté, les étirer au-delà
   ne ferait que montrer leur grain. */
.paire-photos{
  display:grid;gap:clamp(1rem,3vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  max-width:1000px;margin-inline:auto;
}
.paire-photos img{width:100%;height:auto;border-radius:var(--r-lg);aspect-ratio:1/1;object-fit:cover}
.paire-photos figcaption{
  margin-top:.7rem;font-size:.93rem;line-height:1.6;color:var(--texte-fonce-2);text-align:center;
}

/* Bloc image + texte */
.duo{display:grid;gap:clamp(2rem,5vw,3.75rem);align-items:center}
@media (min-width:900px){.duo{grid-template-columns:1fr 1fr}.duo--inverse .duo__media{order:2}}
.duo--haut{align-items:start}
.duo__media img{width:100%;border-radius:var(--r-lg);aspect-ratio:4/5;object-fit:cover}
.duo__media--paysage img{aspect-ratio:16/10}

/* ============================================================== VIDÉOS
   Vignettes au format vertical (reel). Seule l'image d'aperçu est chargée ;
   la vidéo elle-même n'est téléchargée qu'au clic (preload="none").
   ---------------------------------------------------------------------- */
.grille-videos{display:grid;gap:clamp(.85rem,2vw,1.35rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.grille-videos{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.grille-videos{grid-template-columns:repeat(4,1fr)}}

.video-carte{margin:0;display:flex;flex-direction:column;gap:.75rem}
.video-carte__cadre{
  position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:var(--r-lg);
  background:var(--noir-2);border:1px solid var(--creme-bord);
  transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans);
}
.video-carte__cadre:hover{transform:translateY(-4px);box-shadow:var(--ombre-fort);border-color:var(--or-fonce)}
.sur-sombre .video-carte__cadre,.section--noir .video-carte__cadre{border-color:var(--noir-bord)}
/* Le texte de repli (navigateur sans lecteur vidéo) doit rester lisible :
   il s'afficherait sur le fond sombre de la vignette. */
.video-carte__media{
  width:100%;height:100%;object-fit:cover;display:block;
  background:var(--noir-2);color:var(--texte-clair);font-size:.85rem;
}

/* Bouton de lecture : rond doré, flèche noire (11:1 de contraste). */
.video-carte__lecture{
  position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(to top,rgba(11,11,11,.55),rgba(11,11,11,.12) 45%,rgba(11,11,11,.3));
  border:0;cursor:pointer;transition:background var(--trans),opacity var(--trans);
}
.video-carte__lecture::before{
  content:'';position:absolute;width:60px;height:60px;border-radius:50%;
  background:var(--or);box-shadow:0 6px 24px rgba(0,0,0,.4);transition:transform var(--trans),background var(--trans);
}
.video-carte__lecture svg{position:relative;width:24px;height:24px;fill:#0B0B0B;margin-left:3px}
.video-carte__cadre:hover .video-carte__lecture::before{transform:scale(1.09);background:var(--or-clair)}
.video-carte__lecture[hidden]{display:none}

.video-carte__legende{
  font-size:.86rem;line-height:1.5;color:var(--texte-fonce-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sur-sombre .video-carte__legende,.section--noir .video-carte__legende{color:var(--texte-clair-2)}

/* ==================================================================== FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--creme-bord)}
.faq details{border-bottom:1px solid var(--creme-bord)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;cursor:pointer;list-style:none;
  font-family:'Cormorant',serif;font-size:clamp(1.16rem,1.06rem + .4vw,1.42rem);
  line-height:1.32;color:var(--texte-fonce);transition:color var(--trans);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--or-fonce)}
.faq summary::after{
  content:'';width:13px;height:13px;flex:none;margin-top:.5rem;
  border-right:1.5px solid var(--or-fonce);border-bottom:1.5px solid var(--or-fonce);
  transform:rotate(45deg);transition:transform var(--trans);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:.75rem}
.faq__rep{padding:0 0 1.65rem;max-width:var(--max-txt)}
.faq__rep p{color:var(--texte-fonce-2);font-size:.965rem;line-height:1.76}
.faq__rep p+p{margin-top:.85rem}
.sur-sombre .faq,.section--noir .faq{border-color:var(--noir-bord)}
.sur-sombre .faq details,.section--noir .faq details{border-color:var(--noir-bord)}
.sur-sombre .faq summary,.section--noir .faq summary{color:var(--texte-clair)}
.sur-sombre .faq summary:hover,.section--noir .faq summary:hover{color:var(--or-clair)}
.sur-sombre .faq summary::after,.section--noir .faq summary::after{border-color:var(--or)}
.sur-sombre .faq__rep p,.section--noir .faq__rep p{color:var(--texte-clair-2)}

/* ============================================================== BANDE CTA */
.bande-cta{position:relative;background:var(--noir);color:var(--texte-clair);overflow:hidden;isolation:isolate}
.bande-cta__fond{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
/* Voile noir sur l'image de fond. Il doit garantir la lisibilité du texte sans
   effacer la photo : à .96 le visuel n'était plus qu'un aplat noir.
   Valeurs mesurées sur le rendu réel, pixel de fond le plus clair sous le
   texte : 8,40:1 de contraste avec le texte clair — au-dessus du seuil AAA
   (7:1), très au-dessus du minimum AA (4,5:1). */
.bande-cta::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,11,11,.92) 0%,rgba(11,11,11,.84) 46%,rgba(11,11,11,.6) 100%);
}
.bande-cta__in{padding-block:clamp(3.5rem,7vw,5.75rem);max-width:44rem}
.bande-cta h2{color:var(--texte-clair);margin-bottom:1.15rem}
.bande-cta h2 em{color:var(--or-clair);font-style:italic;font-weight:300}
.bande-cta p{color:var(--texte-clair-2);font-size:clamp(1rem,.97rem + .3vw,1.13rem);max-width:38rem}

/* ============================================================== QUARTIERS */
.puces{display:flex;flex-wrap:wrap;gap:.6rem}
.puces li{
  padding:.5rem 1rem;border:1px solid var(--creme-bord);border-radius:100px;
  font-size:.83rem;color:var(--texte-fonce-2);letter-spacing:.025em;background:var(--blanc);
}
.sur-sombre .puces li,.section--noir .puces li{border-color:var(--noir-bord);color:var(--texte-clair-2);background:var(--noir-2)}

/* ============================================================ FORMULAIRE */
.form{display:grid;gap:1.35rem}
.champ{display:grid;gap:.5rem}
.champ label{font-size:.83rem;font-weight:500;letter-spacing:.075em;text-transform:uppercase;color:var(--texte-fonce)}
.champ .oblig{color:var(--or-fonce)}
.champ input,.champ select,.champ textarea{
  width:100%;min-height:54px;padding:.9rem 1.05rem;background:var(--blanc);
  border:1px solid var(--creme-bord);border-radius:var(--r);
  font-size:1rem;color:var(--texte-fonce);transition:border-color var(--trans),box-shadow var(--trans);
}
.champ textarea{min-height:140px;resize:vertical;line-height:1.62}
.champ select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2387621C' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.05rem center;background-size:12px;padding-right:2.6rem}
.champ input::placeholder,.champ textarea::placeholder{color:#6E675C}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or-fonce);box-shadow:0 0 0 3px var(--or-voile)
}
.champ input:user-invalid,.champ textarea:user-invalid{border-color:var(--erreur)}
.form__ligne{display:grid;gap:1.35rem}
@media (min-width:640px){.form__ligne{grid-template-columns:1fr 1fr}}
/* Mention « facultatif » : elle doit se lire sans concurrencer l'intitulé,
   sinon le champ paraît obligatoire et fait fuir. */
.champ__option{font-weight:400;text-transform:none;letter-spacing:0;color:var(--texte-fonce-2);font-size:.82em}

/* ================================================= CALENDRIER (choix de date)
   Remplace le sélecteur natif, qui suit la langue du navigateur et affiche
   donc « mm/dd/yyyy » sur un Chrome en anglais — l'ordre américain, sur un
   site français. Voir assets/js/main.js.
   Sans JavaScript, .datepick__natif reste visible et le champ natif sert.
---------------------------------------------------------------------------- */
.datepick{position:relative}
.datepick__natif--masque{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.datepick__champ{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  width:100%;min-height:52px;padding:.85rem 1rem;cursor:pointer;text-align:left;
  background:var(--blanc);border:1px solid var(--creme-bord);border-radius:var(--r);
  font-family:'Jost',sans-serif;font-size:1rem;color:var(--texte-fonce);
  transition:border-color var(--trans),box-shadow var(--trans);
}
.datepick__champ:hover{border-color:var(--or-fonce)}
.datepick__champ:focus-visible{outline:2px solid var(--or-fonce);outline-offset:2px}
.datepick__vide{color:var(--texte-fonce-2)}
.datepick__icone{width:19px;height:19px;fill:var(--or-fonce);flex:none}

.datepick__panneau{
  position:absolute;z-index:60;top:calc(100% + .5rem);left:0;min-width:296px;max-width:100%;
  background:var(--blanc);border:1px solid var(--creme-bord);border-radius:var(--r-lg);
  box-shadow:var(--ombre-fort);padding:.9rem;
}
.datepick__tete{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.7rem}
.datepick__mois{
  font-family:'Cormorant',serif;font-size:1.3rem;font-weight:500;
  color:var(--texte-fonce);text-transform:capitalize;
}
.datepick__nav{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;cursor:pointer;background:transparent;
  border:1px solid var(--creme-bord);border-radius:var(--r);
}
.datepick__nav svg{width:19px;height:19px;fill:var(--texte-fonce)}
.datepick__nav:hover:not([disabled]){background:var(--creme-2);border-color:var(--or-fonce)}
.datepick__nav[disabled]{opacity:.3;cursor:not-allowed}

.datepick__grille{width:100%;border-collapse:collapse;table-layout:fixed}
.datepick__grille th{
  padding:.35rem 0;font-family:'Jost',sans-serif;font-size:.72rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--texte-fonce-2);
}
.datepick__grille th abbr{text-decoration:none;border:0}
.datepick__grille td{padding:1px;text-align:center}
.datepick__jour{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:38px;cursor:pointer;background:transparent;border:0;
  border-radius:var(--r);font-family:'Jost',sans-serif;font-size:.94rem;
  color:var(--texte-fonce);transition:background var(--trans),color var(--trans);
}
.datepick__jour:hover:not([disabled]){background:var(--creme-2)}
.datepick__jour:focus-visible{outline:2px solid var(--or-fonce);outline-offset:-2px}
/* Aujourd'hui : un simple filet doré, pour ne pas le confondre avec la
   date choisie. */
.datepick__jour.est-aujourdhui{box-shadow:inset 0 0 0 1px var(--or-fonce)}
.datepick__jour.est-choisi{background:var(--noir);color:var(--or);font-weight:500}
.datepick__jour[disabled]{color:var(--creme-bord);cursor:not-allowed}

.datepick__note{
  margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--creme-bord);
  font-size:.8rem;color:var(--texte-fonce-2);
}
.datepick__effacer{
  margin-top:.5rem;width:100%;min-height:40px;cursor:pointer;
  background:transparent;border:1px solid var(--creme-bord);border-radius:var(--r);
  font-family:'Jost',sans-serif;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texte-fonce-2);
}
.datepick__effacer:hover{border-color:var(--or-fonce);color:var(--texte-fonce)}

/* Sur petit écran le panneau occupe toute la largeur du champ. */
@media (max-width:479px){
  .datepick__panneau{min-width:0;left:0;right:0}
}
.form__rgpd{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start}
.form__rgpd input{min-height:0;width:19px;height:19px;margin-top:.28rem;accent-color:var(--or-fonce)}
.form__rgpd label{text-transform:none;letter-spacing:0;font-size:.855rem;font-weight:400;color:var(--texte-fonce-2);line-height:1.6}
.form__rgpd a{color:var(--or-fonce);text-decoration:underline;text-underline-offset:2px}
.form__note{font-size:.82rem;color:var(--texte-fonce-2)}
.form__note a{color:var(--or-fonce);font-weight:500}
/* Piège à robots — invisible pour les humains, rempli par les bots */
/* Champ piège anti-robots : il doit être invisible pour la visiteuse, mais
   rester dans le DOM et rendu, sinon les robots qui remplissent les formulaires
   savent le sauter.

   Il était placé à left:-9999px. Sur mobile, ça n'était pas neutre : le champ
   agrandissait la zone de défilement de dix mille pixels VERS LA GAUCHE, et
   la page se décalait sur le côté. Le body{overflow-x:hidden} ne faisait que
   masquer le symptôme — sur iOS, la page se laissait quand même déplacer au
   doigt.

   Le découpage par clip fait la même chose sans toucher à la géométrie : la
   boîte mesure 1 px, à sa place normale, et son contenu est rogné à zéro.
   C'est exactement le procédé de .sr-only plus bas. */
.pot-de-miel{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;
}
/* Le champ gardait sa largeur naturelle et sortait de la boîte d'un pixel :
   rogné à l'affichage, mais toujours compté comme hors cadre sur un écran de
   320 px. On le ramène à la taille de son parent. */
.pot-de-miel *{max-width:100%}

.bloc-contact{display:grid;gap:clamp(2.25rem,5vw,3.5rem)}
@media (min-width:980px){.bloc-contact{grid-template-columns:1fr 1fr;align-items:start}}
.coord{display:grid;gap:1.65rem}
.coord__item{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start}
.coord__item svg{width:20px;height:20px;fill:var(--or-fonce);margin-top:.34rem;flex:none}
/* Sur fond clair on emploie un vert WhatsApp assombri (4,8:1) : la couleur reste
   reconnaissable sans devenir illisible. */
.coord__item--wa svg{fill:#0F7B38}
.coord__item b{display:block;font-size:.79rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--texte-fonce-2);margin-bottom:.3rem}
.coord__item a,.coord__item span{color:var(--texte-fonce);font-size:1.03rem;line-height:1.62}
.coord__item a:hover{color:var(--or-fonce);text-decoration:underline;text-underline-offset:3px}
.coord__horaires{width:100%;font-size:.94rem;border-collapse:collapse}
.coord__horaires th{text-align:left;font-weight:400;color:var(--texte-fonce-2);padding:.4rem 1.5rem .4rem 0}
.coord__horaires td{text-align:right;color:var(--texte-fonce);font-variant-numeric:tabular-nums}
/* Ligne « Dimanche — Fermé » : atténuée, mais jamais en dessous de 4,5:1. */
.coord__horaires tr.est-ferme th,.coord__horaires tr.est-ferme td{color:#6E675C}

.carte-map{border:1px solid var(--creme-bord);border-radius:var(--r-lg);overflow:hidden;background:var(--creme-2)}
.carte-map iframe{width:100%;height:400px;border:0;display:block;filter:grayscale(.35) contrast(1.04)}

/* =================================================================== PIED */
.pied{background:var(--noir);color:var(--texte-clair-2);border-top:1px solid var(--noir-bord)}
.pied__haut{display:grid;gap:2.85rem;padding-block:clamp(3.25rem,6vw,4.75rem)}
@media (min-width:760px){.pied__haut{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.pied__haut{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem}}
.pied h2,.pied .pied__titre{
  font-family:'Jost',sans-serif;font-size:.79rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);margin-bottom:1.35rem;line-height:1.4;
}
.pied__marque p{font-size:.905rem;line-height:1.78;color:var(--texte-clair-2);margin-top:1.35rem;max-width:32ch}
.pied__liens li{margin-bottom:.72rem}
.pied__liens a{font-size:.905rem;color:var(--texte-clair-2);transition:color var(--trans)}
.pied__liens a:hover{color:var(--or-clair)}
.pied__nap{font-size:.905rem;line-height:1.85;font-style:normal;color:var(--texte-clair-2)}
.pied__nap a{color:var(--texte-clair);font-weight:500}
.pied__nap a:hover{color:var(--or-clair)}
.pied__nap strong{display:block;color:var(--texte-clair);font-weight:500;margin-bottom:.5rem}
.pied__horaires{width:100%;font-size:.875rem;margin-top:.35rem;border-collapse:collapse}
.pied__horaires th{text-align:left;font-weight:400;color:var(--texte-clair-2);padding:.25rem 1rem .25rem 0}
.pied__horaires td{text-align:right;color:var(--texte-clair);font-variant-numeric:tabular-nums}
.pied__horaires tr.est-ferme td,.pied__horaires tr.est-ferme th{color:#8A8478}
.pied__bas{
  border-top:1px solid var(--noir-bord);padding-block:1.65rem;
  display:flex;flex-wrap:wrap;gap:.85rem 1.85rem;align-items:center;justify-content:space-between;
  font-size:.805rem;color:#8B8579;
}
.pied__bas a{color:#A9A296}
.pied__bas a:hover{color:var(--or-clair)}
.pied__bas ul{display:flex;flex-wrap:wrap;gap:.6rem 1.35rem}

/* ========================================================== PAGE JURIDIQUE */
.prose{max-width:var(--max-txt)}
.prose h2{font-size:clamp(1.55rem,1.3rem + 1.1vw,2.1rem);margin:2.85rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.22rem;margin:1.85rem 0 .65rem}
.prose p,.prose li{color:var(--texte-fonce-2);font-size:.985rem;line-height:1.8}
.prose p{margin-bottom:1.1rem}
.prose ul{list-style:disc;padding-left:1.35rem;margin-bottom:1.35rem;display:grid;gap:.5rem}
.prose a{color:var(--or-fonce);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--texte-fonce)}

/* ====================================================== ZONES TACTILES
   Google (Lighthouse « tap targets ») attend des cibles cliquables d'au moins
   ~44 px de haut sur mobile. Les liens ci-dessous sont des liens autonomes
   (et non des liens noyés dans un paragraphe) : ils reçoivent donc une hauteur
   de frappe confortable, sans changer l'apparence du texte.
   ---------------------------------------------------------------------- */
.logo{min-height:44px}
.entete__tel{min-height:44px}
.lien-or{padding-block:.62rem}
.ariane a,.ariane span{display:inline-block;padding-block:.72rem}
.confiance b a{display:inline-block;padding-block:.6rem}
.coord__item a{display:inline-block;padding-block:.5rem;min-height:40px}
.coord__item .lien-or{padding-block:.62rem}
.pied__liens li{margin-bottom:.1rem}
.pied__liens a{display:inline-block;padding-block:.62rem}
.pied__nap a{display:inline-block;padding-block:.42rem}
.pied__bas a{display:inline-block;padding-block:.65rem}
.menu-mobile ul ul a{padding:.88rem 0}
.form__rgpd input{width:24px;height:24px;margin-top:.2rem}
.faq summary{min-height:44px}
@media (max-width:1059px){
  /* Sur mobile, on garde de l'air sous le doigt dans les listes du pied. */
  .pied__liens a{padding-block:.72rem}
}

/* ============================================================ UTILITAIRES */
.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}
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-2{margin-bottom:2rem}
.txt-centre{text-align:center}

/* Apparition douce au scroll (désactivée si mouvement réduit) */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.36,1)}
.reveal.est-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Intitulé de groupe dans une grille tarifaire à plusieurs sections
   (visage / femme / homme sur la page Épilation). */
.tarifs__groupe{
  margin:2.25rem 0 .4rem;font-family:'Jost',sans-serif;font-size:.78rem;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--or-fonce);
}
.section--noir .tarifs__groupe,.sur-sombre .tarifs__groupe{color:var(--or)}
.tarifs__groupe:first-of-type{margin-top:0}