/* ==========================================================================
   APEX BEAUTY — socle : polices, jetons, remise a zero, voile, navigation.
   Mobile d'abord. Aucune ressource exterieure : tout est servi en local.
   ========================================================================== */

/* ------------------------------------------------------------ polices --- */
/* Cormorant : serif a fort contraste, la voix « grande maison ».
   Variable 300 -> 700 dans un seul fichier par plage Unicode. */
@font-face{
  font-family:"Cormorant"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/cormorant-latin.woff2") format("woff2");
  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"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url("../fonts/cormorant-latin-ext.woff2") format("woff2");
  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;
}

/* Jost : geometrique, pour les capitales espacees, la barre et les boutons. */
@font-face{ font-family:"Jost"; font-weight:300; font-style:normal; font-display:swap;
  src:url("../fonts/jost-300-latin.woff2") format("woff2");
  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"; font-weight:300; font-style:normal; font-display:swap;
  src:url("../fonts/jost-300-latin-ext.woff2") format("woff2");
  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"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/jost-400-latin.woff2") format("woff2");
  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"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/jost-400-latin-ext.woff2") format("woff2");
  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"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/jost-500-latin.woff2") format("woff2");
  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"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/jost-500-latin-ext.woff2") format("woff2");
  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"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/jost-600-latin.woff2") format("woff2");
  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"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/jost-600-latin-ext.woff2") format("woff2");
  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; }

/* Manrope : le texte courant, tres lisible en petit corps sur mobile. */
@font-face{ font-family:"Manrope"; font-weight:300; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-300-latin.woff2") format("woff2");
  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:"Manrope"; font-weight:300; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-300-latin-ext.woff2") format("woff2");
  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:"Manrope"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-400-latin.woff2") format("woff2");
  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:"Manrope"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-400-latin-ext.woff2") format("woff2");
  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:"Manrope"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-500-latin.woff2") format("woff2");
  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:"Manrope"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-500-latin-ext.woff2") format("woff2");
  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:"Manrope"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-600-latin.woff2") format("woff2");
  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:"Manrope"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/manrope-600-latin-ext.woff2") format("woff2");
  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; }

/* ------------------------------------------------------------- jetons --- */
:root{
  /* La palette est prise DANS le film : pierre chaude, chaux, bougie, or. */
  --nuit:#17130F;          /* nuit chaude — le fond des sections sombres    */
  --nuit-2:#211A15;        /* un cran au-dessus, pour les cartes            */
  --nuit-3:#2C231C;        /* les bordures et les separateurs sur le sombre */
  --encre:#2A211A;         /* le texte sur les fonds clairs                 */
  --encre-2:#5E5147;       /* le texte secondaire sur les fonds clairs      */
  --lin:#FBF8F3;           /* le clair le plus clair                        */
  --creme:#F5EFE6;         /* le clair de reference — la chaux du salon     */
  --sable:#E8DCCB;         /* le clair sature — les bordures sur clair      */
  --or:#C39B5B;            /* l'or de reference                             */
  --or-clair:#E8D0A0;      /* l'or lumineux — texte sur sombre              */
  --or-pale:#F2E3C6;
  --or-fonce:#9A733A;
  --rose:#D9B6A4;          /* le nude rose des serviettes                   */
  --olive:#7E8C6E;         /* l'olivier de l'accueil                        */
  --sur-sombre:#EDE4D8;    /* le texte sur les fonds sombres                */
  --sur-sombre-2:#B4A697;  /* le texte secondaire sur les fonds sombres     */

  --serif:"Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --texte:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --pad:20px;                       /* marge laterale de reference          */
  --rayon:18px;
  --nav-h:60px;
  --stage-h:100vh;                  /* fige en pixels par le script         */
  --ecrans:5;                       /* longueur de la course de sequence    */
  /* Hauteur des barres du navigateur : sert a poser les elements du bas
     au-dessus d'elles sans qu'ils bougent quand la barre va et vient. */
  --bar:0px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,.75,.27,1);

  --or-grad:linear-gradient(103deg,#9A733A 0%,#C39B5B 22%,#F2E3C6 48%,#C39B5B 74%,#A67C3E 100%);
}
@supports (height:100lvh){ :root{ --bar:calc(100lvh - 100svh); } }

/* -------------------------------------------------------- remise a zero - */
*,*::before,*::after{ box-sizing:border-box; }

/* overflow-x sur `html` UNIQUEMENT. Le poser aussi sur `body` empeche la
   propagation au viewport, fait de `body` un conteneur de defilement, et
   TOUS les plateaux `position:sticky` decrochent — la scene « descend »
   avant sa fin et laisse une bande vide. `clip` clippe sans creer de
   conteneur de defilement ; le repli `hidden` sur html seul reste sur. */
html{
  overflow-x:clip; overscroll-behavior-x:none;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth;
}
@supports not (overflow:clip){ html{ overflow-x:hidden; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; padding:0;
  overscroll-behavior-x:none;           /* surtout PAS d'overflow ici */
  background:var(--nuit); color:var(--sur-sombre);
  font-family:var(--texte); font-weight:400;
  font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.est-fige{ overflow:hidden; }        /* pendant le voile et les feuilles */

h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0;
        cursor:pointer; -webkit-tap-highlight-color:transparent; }
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }   /* sans cela, l'attribut height annule aspect-ratio */
input,select,textarea{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--or); outline-offset:3px; border-radius:6px; }

::selection{ background:rgba(195,155,91,.32); color:var(--lin); }

/* --------------------------------------------------------- typographie -- */
.sur{                                  /* le surtitre, capitales espacees */
  font-family:var(--sans); font-weight:500;
  font-size:clamp(10px,2.7vw,12px); letter-spacing:.34em;
  text-transform:uppercase; color:var(--or);
}
.tt{                                   /* le titre de section */
  font-family:var(--serif); font-weight:300;
  font-size:clamp(34px,9.4vw,60px); line-height:1.04;
  letter-spacing:-.012em;
}
.tt em{ font-style:italic; font-weight:400; }
.tt .d{                                /* le mot dore du titre */
  background:var(--or-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none;                    /* jamais d'ombre sur un degrade */
  font-style:italic;
}
.lede{ font-size:clamp(15px,4.1vw,18px); line-height:1.72; }
.fin{ font-size:14.5px; line-height:1.68; }

.trait{ width:44px; height:1px; background:var(--or); opacity:.62;
        border:0; margin:0; }

/* -------------------------------------------------------------- boutons - */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:9px; min-height:52px; padding:0 26px; border-radius:100px;
  font-family:var(--sans); font-weight:500; font-size:13.5px;
  letter-spacing:.15em; text-transform:uppercase; text-align:center;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
             background-color .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease);
  overflow:hidden; isolation:isolate; white-space:nowrap;
}
.btn svg{ flex:0 0 auto; }
/* Le lustre qui traverse le bouton — transform seul, aucun cout de rendu. */
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);
  transform:translateX(-120%);
}
.btn--or{
  background:var(--or-grad); background-size:180% 100%; background-position:22% 0;
  color:#2A1D08;
  box-shadow:0 10px 30px -14px rgba(154,115,58,.85), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--or:active{ transform:scale(.975); }
.btn--fil{
  border:1px solid rgba(195,155,91,.5); color:var(--or-clair);
  background:rgba(195,155,91,.06);
}
.btn--fil:active{ transform:scale(.975); }
.btn--clair{ background:var(--encre); color:var(--creme); }
.btn--clair:active{ transform:scale(.975); }
/* Sur fond clair, le bouton de contour prend l'encre : sans cela il herite
   d'une couleur pensee pour le sombre et devient illisible. */
.sec--clair .btn--fil{ border-color:rgba(154,115,58,.42); color:var(--or-fonce);
                       background:rgba(195,155,91,.07); }

/* Toute regle :hover qui DEPLACE son element doit etre enfermee ici. Sur
   ecran tactile le navigateur invente un survol au PREMIER appui : la cible
   bouge sous le doigt et le clic est annule — « il faut cliquer deux fois ». */
@media (hover:hover) and (pointer:fine){
  .btn--or:hover{ transform:translateY(-2px);
    box-shadow:0 16px 38px -14px rgba(154,115,58,.95), inset 0 1px 0 rgba(255,255,255,.5); }
  .btn--fil:hover{ transform:translateY(-2px); background:rgba(195,155,91,.14);
                   border-color:rgba(195,155,91,.8); }
  .btn--clair:hover{ transform:translateY(-2px); }
  .btn:hover::after{ transform:translateX(120%); transition:transform .95s var(--ease-out); }
}

.btn--bloc{ width:100%; }

/* ================================================================== voile */
/* Le voile de chargement. Il tient l'ecran tant que l'amorce de la sequence
   n'est pas la : sans lui, la premiere image arriverait sur une page blanche. */
.voile{
  position:fixed; inset:0; z-index:1200;
  display:grid; place-items:center; gap:0;
  background:
    radial-gradient(115% 78% at 50% 34%, #2A2119 0%, #17130F 62%, #100D0A 100%);
  transition:opacity .82s var(--ease-out), visibility .82s;
}
.voile.part{ opacity:0; visibility:hidden; pointer-events:none; }
.voile__in{ display:grid; justify-items:center; gap:22px; padding:0 32px;
            transform:translateY(-2vh); }
.voile__logo{ width:96px; height:96px;
  animation:vsouffle 4.6s var(--ease-soft) infinite; }
@keyframes vsouffle{
  0%,100%{ transform:scale(1); opacity:.94 }
  50%    { transform:scale(1.045); opacity:1 }
}
.voile__nom{ font-family:var(--sans); font-weight:300; font-size:13px;
  letter-spacing:.52em; text-transform:uppercase; color:var(--or-clair);
  padding-left:.52em; }
.voile__sub{ font-family:var(--serif); font-style:italic; font-size:17px;
  color:var(--sur-sombre-2); margin-top:-12px; }
.voile__piste{ width:min(210px,58vw); height:1.5px; border-radius:2px;
  background:rgba(237,228,216,.14); overflow:hidden; }
.voile__jauge{ display:block; height:100%; width:100%;
  background:var(--or-grad); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s linear; }
.voile__pct{ font-family:var(--sans); font-size:11px; letter-spacing:.3em;
  color:var(--sur-sombre-2); margin-top:-10px; }
@media (prefers-reduced-motion:reduce){ .voile__logo{ animation:none } }

/* ============================================================ navigation */
/* Barre fine : marque, sélecteur de langue, bouton de réservation. Rien
   d'autre — la navigation par sections vit dans le pied de page. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; gap:8px;
  padding:6px var(--pad); padding-top:calc(6px + env(safe-area-inset-top));
  transform:translateY(-102%);
  transition:transform .72s var(--ease-out), box-shadow .5s var(--ease);
}
body.est-pret .nav{ transform:translateY(0); }
/* Le fond est un pseudo-element : il peut apparaitre sans toucher au
   `transform` de la barre.

   AUCUN `backdrop-filter` ici. La barre flotte au-dessus d'un canevas qui se
   redessine a chaque trame : le flou d'arriere-plan devrait donc etre
   recalcule a chaque trame lui aussi, sur toute la largeur de l'ecran. C'est
   la depense la plus lourde de la page pour un effet que le degrade rend
   aussi bien. */
/* Le fond deborde de 16 px SOUS la barre : le degrade a ainsi la place de
   s'eteindre en dehors d'elle. Un degrade qui s'eteint DANS la barre laisse
   le texte de la section apparaitre au travers, juste sous la marque. */
.nav::before{
  content:""; position:absolute; inset:0 0 -16px 0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(20,16,13,1) 0%, rgba(20,16,13,1) 62%,
    rgba(20,16,13,.78) 82%, rgba(20,16,13,0) 100%);
  opacity:0; transition:opacity .5s var(--ease);
}
.nav.pose::before{ opacity:1; }
.nav.pose{ box-shadow:0 1px 0 rgba(195,155,91,.14); }
/* Au-dessus d'une section CLAIRE, la barre passe en encre. */
.nav.clair{ color:var(--encre); }
.nav.clair.pose::before{
  background:linear-gradient(180deg,
    rgba(251,248,243,1) 0%, rgba(251,248,243,1) 62%,
    rgba(251,248,243,.80) 82%, rgba(251,248,243,0) 100%);
}
.nav.clair.pose{ box-shadow:0 1px 0 rgba(154,115,58,.16); }

/* La marque cede la premiere si la place manque (`min-width:0` +
   `overflow:hidden`) : jamais la langue ni la reservation. */
.nav__marque{ display:flex; align-items:center; gap:8px; margin-right:auto;
              min-width:0; overflow:hidden; }
.nav__logo{ width:28px; height:28px; flex:0 0 auto; }
.nav__logo--clair{ display:block; }
.nav__logo--sombre{ display:none; }
.nav.clair .nav__logo--clair{ display:none; }
.nav.clair .nav__logo--sombre{ display:block; }
.nav__nom{ font-family:var(--sans); font-weight:500; font-size:12.5px;
  letter-spacing:.2em; text-transform:uppercase; padding-left:.2em;
  color:var(--or-clair); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; min-width:0; }
.nav.clair .nav__nom{ color:var(--or-fonce); }

.nav__resa{ min-height:36px; padding:0 15px; font-size:11px; letter-spacing:.12em;
            flex:0 0 auto; }

/* ------------------------------------------------- selecteur de langue -- */
/* Les drapeaux sont des SVG, JAMAIS des emoji : Windows ne dessine pas les
   drapeaux emoji, il affiche les deux lettres du pays a la place. */
.lang{ position:relative; flex:0 0 auto; }
.lang__b{
  display:flex; align-items:center; gap:6px; height:36px; padding:0 9px 0 8px;
  border-radius:100px; border:1px solid rgba(237,228,216,.20);
  background:rgba(237,228,216,.05);
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.nav.clair .lang__b{ border-color:rgba(42,33,26,.16); background:rgba(42,33,26,.03); }
.lang__dr{ width:20px; height:14px; border-radius:2px; overflow:hidden;
  flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.16) inset; }
.lang__dr svg{ width:100%; height:100%; display:block; }
.lang__co{ font-family:var(--sans); font-weight:500; font-size:11px;
  letter-spacing:.1em; color:var(--sur-sombre); }
.nav.clair .lang__co{ color:var(--encre); }
.lang__fl{ flex:0 0 auto; opacity:.65;
  transition:transform .38s var(--ease-out); }
.lang__b[aria-expanded="true"] .lang__fl{ transform:rotate(180deg); }

.lang__menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:5;
  min-width:186px; padding:6px; border-radius:14px;
  background:#1A1511;
  border:1px solid rgba(195,155,91,.26);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.95);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.97);
  transform-origin:100% 0;
  transition:opacity .3s var(--ease-out), transform .34s var(--ease-out), visibility .3s;
}
.lang.ouvert .lang__menu{ opacity:1; visibility:visible; transform:none; }
.lang__i{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:40px; padding:0 10px; border-radius:9px; text-align:left;
  font-family:var(--sans); font-weight:400; font-size:13px; letter-spacing:.04em;
  color:var(--sur-sombre-2);
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.lang__i[aria-selected="true"]{ color:var(--or-clair); background:rgba(195,155,91,.13); }
.lang__i .lang__dr{ box-shadow:0 0 0 1px rgba(255,255,255,.10) inset; }
@media (hover:hover) and (pointer:fine){
  .lang__i:hover{ background:rgba(195,155,91,.09); color:var(--sur-sombre); }
  .lang__b:hover{ border-color:rgba(195,155,91,.5); }
}
/* Le menu est ancre a droite sur `.lang`. Sur un tres petit ecran il
   deborderait par la gauche : on le rattache alors a la barre entiere.
   Surtout pas `position:fixed` — la barre porte un `transform` pendant son
   apparition, et un enfant fixe s'y accroche. */
@media (max-width:400px){
  .lang{ position:static; }
  .lang__menu{ left:var(--pad); right:var(--pad); min-width:0;
               display:grid; grid-template-columns:1fr 1fr; gap:2px; }
}

@media (min-width:900px){
  :root{ --pad:44px; }
  .nav{ padding:8px var(--pad); padding-top:calc(8px + env(safe-area-inset-top)); }
  .nav__logo{ width:32px; height:32px; }
  .nav__nom{ font-size:13px; }
  .nav__resa{ min-height:40px; padding:0 22px; font-size:12px; }
  .lang__b{ height:40px; }
}