/* =====================================================================
   Coiffure Montchoisi - feuille de style, version CLAIRE et LUXE.

   La vitrine du 26 avenue de Montchoisi : creme chaud et bois clair pour
   lire, noir profond pour les temps forts (heros, bande de reperes,
   galerie, pied), or des traits ornes du logo pour les cadres, les filets
   et les prix, vert vitrine en touche. Les ornements viennent des fichiers
   du logo (ornement-filet.png, ornement-angle.png), jamais redessines.

   Typographie : Barlow Condensed en 700/800 pour les titres (majuscules),
   Montserrat pour le texte. Aucun serif, aucune police externe, angles vifs.

   Contraste (mesure WCAG) :
     sur creme #f4efe6 / bois #e9dfcf
       texte noir chaud #141210 ....... 16,3 / 14,3
       or TEXTE #7d5d1a .............. 5,3 / 4,6
       texte secondaire #5c554a ...... 6,4 / 5,6
     sur noir profond #0c0b09
       creme #f1eadf ................. 16,5
       or clair #e6c877 .............. 12,1
       filet or #b8912f .............. 6,7
   ===================================================================== */

:root{
  --creme:#f4efe6;
  --bois:#e9dfcf;
  --bois-f:#e2d4bd;
  --noir:#141210;
  --noir-p:#0c0b09;     /* noir profond des bandes : reperes, galerie, pied */
  --creme-c:#f1eadf;    /* texte creme sur le noir profond */
  --or:#b8912f;         /* filets, cadres et decors */
  --or-t:#7d5d1a;       /* or TEXTE sur fond clair, contraste >= 4,5:1 */
  --or-grad:linear-gradient(135deg,#f6e3a1 0%,#dbb55a 24%,#b8912f 50%,#8d6a1c 74%,#e4c26c 100%);
  --or-grad-c:linear-gradient(105deg,#fff3c4 0%,#f3d77f 30%,#e0b44f 58%,#fbe9a6 82%,#e9c565 100%);
  --or-grad-t:linear-gradient(100deg,#6a4c12 0%,#8d6a1c 50%,#6e5114 100%);
  --or-c:#e6c877;       /* or clair, texte et accents sur fond noir */
  --vert:#1e4a38;
  --vert-c:#2f6b52;
  --txt:#141210;
  --txt-2:#5c554a;
  --txt-3:#6a6155;
  --ligne:rgba(184,145,47,.34);
  --ligne-n:rgba(20,18,16,.12);
  --ligne-s:rgba(230,200,119,.28);
  --ff-t:'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --ff-b:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --wrap:1300px;
  --gut:clamp(20px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--creme);color:var(--txt);font-family:var(--ff-b);
     font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.est-bloque{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--or-grad);color:var(--noir)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);position:relative}

/* --- Titres ---------------------------------------------------------- */
h1,h2,h3{font-family:var(--ff-t);font-weight:800;line-height:1.12;margin:0;
     letter-spacing:.02em;text-transform:uppercase;color:var(--txt)}
h1{font-size:clamp(56px,9vw,140px);letter-spacing:.01em}
h2{font-size:clamp(44px,6vw,92px)}
h3{font-size:clamp(20px,2vw,26px);line-height:1.2}
em{font-style:normal;color:var(--or-t)}
.sur{font-family:var(--ff-b);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
     color:var(--or-t);font-weight:600;margin:0 0 22px}
.lead{font-size:16.5px;color:var(--txt-2);max-width:56ch;line-height:1.85}
p{margin:0 0 16px}


/* --- Filet dore ------------------------------------------------------- */
.filet{display:flex;align-items:center;gap:14px;color:var(--or);margin:0 0 24px}
.filet::before,.filet::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,var(--or),transparent)}
.filet span{font-size:14px;letter-spacing:.1em}

/* --- Boutons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 32px;
     font-family:var(--ff-b);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
     text-decoration:none;cursor:pointer;background:transparent;color:var(--txt);border:1px solid var(--or);
     transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.btn:hover{background:var(--or-grad);border-color:var(--or);color:var(--noir)}
.btn--or{background:var(--or-grad);border-color:var(--or);color:var(--noir)}
.btn--or:hover{background:transparent;color:var(--creme-c);border-color:var(--or)}
.btn--vert{background:var(--vert);border-color:var(--vert);color:var(--creme-c)}
.btn--vert:hover{background:var(--or-grad);border-color:var(--or);color:var(--noir)}
.btn--vide{background:transparent;color:var(--txt);border-color:var(--or)}
.btn--vide:hover{background:var(--or-grad);color:var(--noir);border-color:var(--or)}
.btn .fl{transition:transform .4s var(--ease);font-size:13px}
.btn:hover .fl{transform:translateX(5px)}
.btn svg{width:17px;height:17px;flex:none}
.lnk{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:10.5px;
     font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--or-t);
     padding-bottom:7px;border-bottom:1px solid var(--or);transition:border-color .4s,color .4s}
.lnk:hover{color:var(--txt);border-color:var(--txt)}

/* --- En-tete ---------------------------------------------------------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;
     transition:background .5s var(--ease)}
.hd::after{content:'';position:absolute;inset:0;background:var(--creme);opacity:0;
     transition:opacity .5s var(--ease);pointer-events:none;border-bottom:1px solid var(--ligne)}
.hd.est-posee::after,.hd--fixe::after{opacity:1}
.hd .in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
     gap:26px;max-width:var(--wrap);margin:0 auto;padding:15px var(--gut)}
.hd .marque{position:relative;z-index:2;display:flex;align-items:center;min-height:50px}
.hd .marque img{height:50px;width:auto}
.hd .lg-sombre{display:none}
.hd.est-posee .lg-clair,.hd--fixe .lg-clair{display:none}
.hd.est-posee .lg-sombre,.hd--fixe .lg-sombre{display:block}

.nav{display:flex;align-items:center;gap:34px}
.nav a{color:rgba(244,239,230,.82);text-decoration:none;font-size:11px;letter-spacing:.18em;
     text-transform:uppercase;font-weight:500;position:relative;padding:4px 0;
     transition:color .4s var(--ease)}
.hd.est-posee .nav a,.hd--fixe .nav a{color:var(--txt-2)}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--or-grad);
     transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.nav a:hover{color:var(--creme)}
.hd.est-posee .nav a:hover,.hd--fixe .nav a:hover{color:var(--txt)}
.nav a.btn{background:var(--or-grad);color:var(--noir);border-color:var(--or);padding:13px 22px}
.nav a.btn:hover{background:var(--noir);color:var(--creme);border-color:var(--noir)}
.nav a.btn::after{display:none}
.burger{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;
     z-index:2;min-width:46px;min-height:46px}
.burger i{display:block;width:26px;height:1.5px;background:var(--creme);margin:6px 0;
     transition:transform .4s var(--ease),opacity .3s,background .4s var(--ease)}
.hd.est-posee .burger i,.hd--fixe .burger i{background:var(--txt)}
body.menu-ouvert .burger i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-ouvert .burger i:nth-child(2){opacity:0}
body.menu-ouvert .burger i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
body.menu-ouvert .burger i{background:var(--txt)}
body.menu-ouvert .lg-clair{display:none}
body.menu-ouvert .lg-sombre{display:block}

/* --- Heros video ------------------------------------------------------ */
/* --- Heros : cinema plein ecran, centre --------------------------------
   La video est presque nue : un voile leger, plus dense en bas pour les
   boutons et en haut pour la barre. Seulement l'embleme, un surtitre, le
   titre et deux boutons. Le reste est dans la bande d'intro juste dessous. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
      overflow:hidden;padding:120px 0 110px;background:var(--noir);text-align:center}
.hero .fond{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
     object-position:50% 45%;background:var(--noir)}
.hero .voile{position:absolute;inset:0;z-index:1;pointer-events:none;
     background:linear-gradient(180deg,rgba(12,11,9,.6) 0%,rgba(12,11,9,.38) 30%,
       rgba(12,11,9,.42) 60%,rgba(12,11,9,.85) 100%)}
.hero .in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.hero .centre{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hero-logo{height:clamp(96px,13vw,170px);width:auto;margin:0 0 clamp(18px,2.6vw,30px);
     filter:drop-shadow(0 6px 24px rgba(0,0,0,.55));animation:heroLogo 1.7s var(--ease) both}
@keyframes heroLogo{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.hero .sur{color:var(--or-c);margin-bottom:22px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hero h1{color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.5);font-size:clamp(56px,8.4vw,128px);
     line-height:1.12;letter-spacing:.01em}
.hero h1 em{color:var(--or-c);font-style:normal}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .l > span{display:block}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(30px,4vw,46px)}
.hero .btn--vide{color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px);background:rgba(12,11,9,.25)}
.hero .btn--vide:hover{background:#fff;color:var(--noir);border-color:#fff}
/* Indice de defilement : un trait fin qui descend, rien d'autre. */
.hero .indice{position:absolute;left:50%;bottom:28px;z-index:2;width:1px;height:56px;margin-left:-.5px;
     background:rgba(255,255,255,.22);overflow:hidden}
.hero .indice span{position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--or-c);
     animation:indice 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes indice{to{top:100%}}
html.sans-mouvement .hero-logo{animation:none}
html.sans-mouvement .hero .indice span{animation:none;top:0}

/* --- Bande d'intro sous le heros : l'accroche et les trois reperes ------- */
.intro{background:var(--noir);color:var(--creme);padding:clamp(54px,7vw,96px) 0;text-align:center;
     border-bottom:1px solid var(--ligne-s)}
.intro .acc{max-width:62ch;margin:0 auto;font-size:clamp(17px,1.5vw,21px);line-height:1.7;color:#fff;font-weight:500}
.intro .sous{display:flex;gap:clamp(24px,5vw,70px);justify-content:center;flex-wrap:wrap;
     margin-top:clamp(30px,4vw,46px);padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--ligne-s);
     font-size:13px;color:rgba(241,234,223,.7);text-align:center}
.intro .sous b{display:block;font-family:var(--ff-t);font-weight:800;font-size:21px;
     letter-spacing:.02em;line-height:1.12;text-transform:uppercase;color:var(--or-c)}
.intro .sous a{color:inherit;text-decoration:none;display:block}

/* --- Bande de reperes --------------------------------------------------- */
.reperes{background:var(--bois);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.reperes .in{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--wrap);margin:0 auto}
.rep{padding:34px var(--gut);border-left:1px solid var(--ligne)}
.rep:first-child{border-left:0}
.rep b{display:block;font-family:var(--ff-t);font-size:20px;font-weight:800;letter-spacing:.02em;
     line-height:1.12;text-transform:uppercase;margin-bottom:3px;color:var(--txt)}
.rep span{font-size:12.5px;color:var(--txt-2);letter-spacing:.02em}

/* --- Bandes --------------------------------------------------------------- */
.bande{padding:clamp(90px,11vw,160px) 0;position:relative}
.bande--bois{background:var(--bois)}
.bande--noir{background:var(--noir-p);color:var(--creme-c)}
.bande--noir h2{color:var(--creme-c)}
.bande--noir em,.bande--noir .sur{color:var(--or-c)}
.bande--noir .lead{color:rgba(241,234,223,.72)}
.bande--noir .tete-sec{border-color:rgba(230,200,119,.3)}
.tete-sec--centre{flex-direction:column;align-items:center;text-align:center;gap:14px}

/* --- Ornements d'angle (carte de visite du salon) ------------------------- */

/* --- Duo ------------------------------------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,84px);align-items:center}
.duo--inv .txt{order:2}
.duo figure{margin:0;position:relative}
/* Le double filet dore entoure la PHOTO, pas la legende : avec un cadre sur toute la figure,
   la legende passait a travers le filet interieur sur telephone (tour du 08.10.2026). */
.duo figure img{width:100%;border:1px solid var(--or);outline:1px solid var(--or);outline-offset:-9px}
.duo figcaption{font-size:12.5px;color:var(--txt-3);margin-top:15px;letter-spacing:.02em}

/* --- Numero en filigrane ------------------------------------------------------ */
.filigrane{position:relative;overflow:hidden}
.filigrane .num{position:absolute;right:-2vw;bottom:-6vw;font-family:var(--ff-t);font-weight:800;
     font-size:clamp(160px,22vw,320px);line-height:1.12;letter-spacing:.02em;text-transform:uppercase;
     color:transparent;-webkit-text-stroke:1px rgba(184,145,47,.32);pointer-events:none;user-select:none}

/* --- Tarifs : cartes de prix ----------------------------------------------- */
.tete-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
     padding-bottom:26px;border-bottom:1px solid var(--ligne);margin-bottom:clamp(34px,4vw,54px)}
.note{font-size:13px;color:var(--txt-2);margin-top:16px;max-width:62ch}
.cartes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.carte{background:var(--creme);border:1px solid var(--or);padding:clamp(24px,3vw,44px);
     display:flex;flex-direction:column;min-width:0}
.carte-tete{margin-bottom:clamp(12px,1.8vw,20px)}
.carte h3{font-size:clamp(30px,3.6vw,48px);color:var(--txt);margin-bottom:6px}
.carte-sous{font-size:12.5px;color:var(--txt-2);margin:0;letter-spacing:.04em}
.prix{list-style:none;margin:0;padding:0;flex:1}
.prix li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
     padding:13px 14px;border-bottom:1px solid var(--ligne-n);min-width:0;
     transition:background .35s var(--ease),padding-left .35s var(--ease)}
.prix li:last-child{border-bottom:0}
.prix li:hover{background:var(--bois);padding-left:22px}
.prix li span{font-family:var(--ff-b);font-size:15px;color:var(--txt);min-width:0}
.prix li span small{display:block;font-size:12px;color:var(--txt-2)}
.prix li b{font-family:var(--ff-t);font-weight:800;white-space:nowrap;color:var(--or-t);
     font-size:clamp(24px,2.6vw,34px);letter-spacing:.02em;line-height:1.12;text-transform:uppercase;
     display:inline-flex;align-items:baseline;gap:5px}
.prix li b i{font-style:normal;font-family:var(--ff-b);font-size:11px;font-weight:600;
     letter-spacing:.1em;color:var(--or-t)}
.prix--fort{background:var(--bois)}
.prix--fort span{font-weight:600}
.prix--fort b{font-size:clamp(28px,3vw,40px)}
.carte-btn{margin-top:clamp(20px,2.6vw,30px);align-self:flex-start}

/* --- Galerie -------------------------------------------------------------------- */
.vignettes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--creme)}
.bande--noir .vignettes{background:var(--noir-p)}
.vignettes .v{aspect-ratio:1/1;overflow:hidden;position:relative;border:1px solid var(--or)}
.vignettes .v::after{content:'';position:absolute;inset:8px;border:1px solid rgba(230,200,119,.5);
     pointer-events:none;z-index:2}
.vignettes img{width:100%;height:100%;object-fit:cover;
     transition:transform 1.2s var(--ease),filter .5s var(--ease)}
.vignettes .v:hover img{transform:scale(1.06)}

/* --- Contact ------------------------------------------------------------------------ */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,84px);align-items:start}
.contact .boutons{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.infos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px)}
.infos h3{font-family:var(--ff-b);font-size:10.5px;font-weight:700;letter-spacing:.26em;
     text-transform:uppercase;color:var(--or-t);margin-bottom:16px}
.infos p{font-size:15px;color:var(--txt-2);margin:0 0 6px}
.infos a{color:var(--txt);text-decoration:none;border-bottom:1px solid rgba(184,145,47,.6);
     transition:color .35s var(--ease)}
.infos a:hover{color:var(--or-t)}
.infos table{border-collapse:collapse;font-size:15px;color:var(--txt-2)}
.infos td{padding:5px 18px 5px 0;vertical-align:top;white-space:nowrap}
.infos td:last-child{white-space:nowrap;color:var(--txt)}
.infos tr.ferme td{color:var(--txt-3)}

/* --- Demande de rendez-vous (fond noir) ----------------------------------------------- */
.rdv{max-width:920px}
.rdv-tete{margin-bottom:clamp(28px,4vw,52px);max-width:62ch}
.rdv-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px) clamp(18px,2.6vw,30px)}
.champ{display:flex;flex-direction:column;gap:8px;min-width:0}
.champ--large,.champ--action,.champ--piege,.rdv-msg{grid-column:1/-1}
.champ label{font-family:var(--ff-b);font-size:11px;font-weight:600;letter-spacing:.16em;
     text-transform:uppercase;color:var(--creme-c)}
.champ label span{color:rgba(241,234,223,.6);letter-spacing:.06em}
.champ input,.champ select,.champ textarea{font-family:var(--ff-b);font-size:15px;
     color:var(--creme-c);background:rgba(244,239,230,.06);border:1px solid rgba(230,200,119,.4);
     padding:13px 15px;min-height:48px;width:100%;
     transition:border-color .3s var(--ease),background .3s var(--ease)}
.champ textarea{min-height:120px;resize:vertical}
.champ select{appearance:none;padding-right:42px;
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e6c877' stroke-width='1.5'/%3E%3C/svg%3E");
     background-repeat:no-repeat;background-position:right 15px center;background-size:12px}
.champ select option{color:var(--noir);background:var(--creme)}
.champ input[type=date]{color-scheme:dark}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--or-c);
     outline-offset:1px;border-color:var(--or-c);background:rgba(244,239,230,.1)}
.champ--piege{display:none}
.champ--action{align-items:flex-start;margin-top:6px}
.rdv-note{font-size:13px;color:rgba(241,234,223,.72);margin:16px 0 0;max-width:52ch}
.rdv-msg{padding:16px 20px;border:1px solid var(--or);background:var(--creme);color:var(--txt);
     font-size:15px;line-height:1.6}
.rdv-msg[hidden]{display:none}
.rdv-msg--ok{border-left:5px solid var(--vert)}
.rdv-msg--err{border-left:5px solid var(--or-t)}
@media(max-width:700px){
  .rdv-form{grid-template-columns:1fr}
}

/* --- Rendez-vous : bande d'appel ------------------------------------------------ */
.bande--rdv{padding:clamp(64px,8vw,116px) 0}
.rdv-court{max-width:760px}

/* --- Rendez-vous : bouton flottant --------------------------------------------- */
/* Angle vif, fond or, texte noir. Il nait apres une seconde et disparait
   des que le menu du telephone ou la popup prend la main. */
.rdv-flottant{position:fixed;
  right:calc(20px + env(safe-area-inset-right,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:55;display:inline-flex;align-items:center;gap:11px;
  min-height:52px;padding:0 22px;
  background:var(--or-grad);color:var(--noir);border:1px solid var(--or);
  font-family:var(--ff-b);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;
  box-shadow:0 10px 26px rgba(12,11,9,.28);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),
             background .35s var(--ease),color .35s var(--ease)}
.rdv-flottant.est-la{opacity:1;transform:none;pointer-events:auto;
  animation:rdvPulse 6s ease-in-out infinite}
.rdv-flottant:hover{background:var(--noir);color:var(--or)}
.rdv-flottant svg{width:26px;height:26px;flex:none}
.rdv-flottant .lib-court{display:none}
.rdv-flottant:focus-visible{outline:2px solid var(--or-c);outline-offset:3px}
body.menu-ouvert .rdv-flottant,body.rdv-ouvert .rdv-flottant{
  opacity:0;transform:translateY(16px);pointer-events:none}
@keyframes rdvPulse{
  0%,84%,100%{box-shadow:0 10px 26px rgba(12,11,9,.28)}
  90%{box-shadow:0 10px 34px rgba(184,145,47,.55)}
}
html.sans-mouvement .rdv-flottant.est-la{animation:none}

/* --- Rendez-vous : popup (dialogue natif) --------------------------------------- */
.rdv-popup{border:0;padding:0;background:transparent;color:var(--creme-c);
  max-width:none;max-height:none;width:auto}
.rdv-popup::backdrop{background:rgba(12,11,9,.7);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.rdv-popup-panneau{position:relative;width:min(480px,92vw);height:min(92svh,700px);max-height:92svh;
  display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain;
  background:var(--noir-p);border:1px solid var(--or);border-image:var(--or-grad) 1;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.rdv-popup-panneau:focus{outline:none}
.rdv-popup-fermer{width:48px;height:48px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;
  color:var(--or-c);font-size:30px;line-height:1;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.rdv-popup-fermer:hover,.rdv-popup-fermer:focus-visible{
  background:var(--or-grad);color:var(--noir);border-color:var(--or)}
.rdv-popup-titre{font-size:clamp(22px,3vw,26px);color:var(--creme-c);margin:0}
.rdv-popup-sous{font-size:12.5px;color:rgba(241,234,223,.66);margin:3px 0 0}

/* --- Rendez-vous : l'assistant (chat) ------------------------------------------- */
.rdv-tete{flex:none;display:flex;align-items:center;gap:12px;
  padding:14px 12px 14px 16px;border-bottom:1px solid var(--ligne-s)}
.rdv-embleme{width:40px;height:40px;object-fit:contain;flex:none}
.rdv-tete-txt{flex:1;min-width:0}
.rdv-fil{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 16px;display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:rgba(184,145,47,.6) transparent}
.rdv-fil::-webkit-scrollbar{width:8px}
.rdv-fil::-webkit-scrollbar-thumb{background:rgba(184,145,47,.5)}
.rdv-bulle{max-width:84%;padding:11px 14px;font-size:15px;line-height:1.5;
  border:1px solid transparent;border-radius:2px;
  opacity:0;transform:translateY(8px);
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
.rdv-bulle.est-la{opacity:1;transform:none}
.rdv-bulle--a{align-self:flex-start;background:#1b1814;color:var(--creme-c);border-color:var(--ligne-s)}
.rdv-bulle--c{align-self:flex-end;background:var(--or-grad);color:var(--noir);font-weight:600}
html.sans-mouvement .rdv-bulle{opacity:1;transform:none;transition:none}
.rdv-typing{align-self:flex-start;display:inline-flex;gap:5px;
  padding:14px;background:#1b1814;border:1px solid var(--ligne-s);border-radius:2px}
.rdv-typing span{width:6px;height:6px;border-radius:50%;background:var(--or-c);
  animation:rdvDot 1s infinite ease-in-out}
.rdv-typing span:nth-child(2){animation-delay:.15s}
.rdv-typing span:nth-child(3){animation-delay:.3s}
@keyframes rdvDot{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-4px);opacity:1}
}
.rdv-choix{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:100%}
.rdv-chip{appearance:none;font-family:var(--ff-b);font-size:13.5px;font-weight:600;
  color:var(--creme-c);background:transparent;border:1px solid var(--or);
  min-height:46px;padding:9px 16px;cursor:pointer;text-align:left;text-decoration:none;
  display:inline-flex;align-items:center;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.rdv-chip:hover,.rdv-chip:focus-visible{background:var(--or-grad);color:var(--noir);outline:none}
.rdv-chip--or{background:var(--or-grad);color:var(--noir);border-color:var(--or)}
.rdv-chip--or:hover,.rdv-chip--or:focus-visible{background:var(--noir);color:var(--or-c)}
.rdv-recap{align-self:stretch;background:var(--creme);color:var(--txt);
  border:1px solid var(--or);border-image:var(--or-grad) 1;padding:16px 18px}
.rdv-recap h3{font-family:var(--ff-b);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--or-t);margin:0 0 10px}
.rdv-recap dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0}
.rdv-recap dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.rdv-recap dd{margin:0;font-size:14px;font-weight:600;color:var(--txt)}
.rdv-bas{flex:none;border-top:1px solid var(--ligne-s)}
.rdv-saisie{display:flex;gap:8px;align-items:center;padding:10px 12px 4px}
.rdv-saisie[hidden]{display:none}
.rdv-champ{flex:1;min-width:0;font-family:var(--ff-b);font-size:16px;color:var(--creme-c);
  background:rgba(244,239,230,.06);border:1px solid rgba(230,200,119,.4);
  padding:11px 13px;min-height:46px}
.rdv-champ:focus{outline:2px solid var(--or-c);outline-offset:1px;border-color:var(--or-c)}
.rdv-champ::placeholder{color:rgba(241,234,223,.45)}
.rdv-envoyer{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:var(--or-grad);color:var(--noir);border:1px solid var(--or);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease)}
.rdv-envoyer svg{width:20px;height:20px}
.rdv-envoyer:hover,.rdv-envoyer:focus-visible{background:var(--noir);color:var(--or-c)}
.rdv-appel{margin:0;padding:7px 16px 12px;font-size:12.5px;color:rgba(241,234,223,.6)}
.rdv-appel a{color:var(--or-c);text-decoration:none;border-bottom:1px solid var(--ligne-s)}
.rdv-noscript{padding:4px 16px 16px;font-size:14px;color:var(--creme-c)}
.rdv-noscript p{margin:0 0 6px}
.rdv-noscript a{color:var(--or-c)}

/* --- Pied ------------------------------------------------------------------------------- */
.pied{background:var(--noir-p);padding:66px 0 40px;font-size:13.5px;color:rgba(241,234,223,.62);
     border-top:1px solid var(--or)}
.pied .in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;max-width:var(--wrap);
     margin:0 auto;padding:0 var(--gut)}
.pied img{height:130px;width:auto;margin-bottom:16px}
.pied h4{font-family:var(--ff-b);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
     color:var(--or-c);margin:0 0 14px;font-weight:700}
.pied a{color:rgba(241,234,223,.8);text-decoration:none;transition:color .35s var(--ease)}
.pied a:hover{color:var(--or-c)}
.pied .bas{max-width:var(--wrap);margin:36px auto 0;padding:20px var(--gut) 0;
     border-top:1px solid rgba(230,200,119,.28);display:flex;flex-wrap:wrap;gap:14px;
     justify-content:space-between;font-size:12.5px}

/* --- Revelations ---------------------------------------------------------------------------- */
[data-rev]{opacity:0;transform:translateY(30px)}
html.sans-mouvement [data-rev]{opacity:1;transform:none}

/* --- Telephone -------------------------------------------------------------------------------- */
@media(max-width:980px){
  .hero{padding:112px 0 60px}
  .hd .marque{min-height:42px}
  .hd .marque img{height:42px}
  .pied a,.infos a{display:inline-block;padding:9px 0}
  .reperes .in{grid-template-columns:1fr 1fr}
  .rep{padding:24px 20px;border-top:1px solid var(--ligne)}
  .rep:nth-child(odd){border-left:0}
  .rep:nth-child(-n+2){border-top:0}
  .duo,.cartes,.contact,.pied .in{grid-template-columns:1fr;gap:28px}
  .duo--inv .txt{order:0}
  .tete-sec{flex-direction:column;align-items:flex-start;gap:18px}
  .vignettes{grid-template-columns:1fr 1fr}
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--creme);flex-direction:column;justify-content:center;
       align-items:flex-start;gap:0;padding:88px var(--gut) 40px;overflow-y:auto;
       clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease);pointer-events:none}
  body.menu-ouvert .nav{clip-path:inset(0);pointer-events:auto}
  .nav a{font-family:var(--ff-t);font-weight:800;font-size:44px;letter-spacing:.02em;
       line-height:1.12;text-transform:uppercase;padding:10px 0;color:var(--txt);opacity:0;
       transform:translateY(18px);
       transition:opacity .5s var(--ease),transform .5s var(--ease)}
  body.menu-ouvert .nav a{opacity:1;transform:none;color:var(--txt)}
  body.menu-ouvert .nav a:nth-child(1){transition-delay:.14s}
  body.menu-ouvert .nav a:nth-child(2){transition-delay:.2s}
  body.menu-ouvert .nav a:nth-child(3){transition-delay:.26s}
  body.menu-ouvert .nav a:nth-child(4){transition-delay:.32s}
  body.menu-ouvert .nav a:nth-child(5){transition-delay:.38s}
  body.menu-ouvert .nav a:nth-child(6){transition-delay:.44s}
  .nav a.btn{font-family:var(--ff-b);font-size:11px;font-weight:600;margin-top:20px;padding:16px 28px;
       color:var(--noir)}
  .nav a::after{display:none}
}
@media(max-width:560px){
  .infos{grid-template-columns:1fr}
  .prix li span{font-size:14.5px}
  .hero .sous{gap:20px}
  .rdv-flottant{padding:0 18px;gap:9px}
  .rdv-flottant .lib-long{display:none}
  .rdv-flottant .lib-court{display:inline}
  .rdv-popup-panneau{width:calc(100vw - 24px);height:calc(100svh - 24px);max-height:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}


/* --- Or en degrade metallique (tous les aplats et textes dores) -------------- */
::selection{background:var(--or);color:var(--noir)}
em,.tarifs li b,.prix li b,.carte h3 b{background:var(--or-grad-t);-webkit-background-clip:text;background-clip:text;
     -webkit-text-fill-color:transparent;color:transparent}
.hero h1 em,.bande--noir em,.intro .sous b{background:var(--or-grad-c);-webkit-background-clip:text;
     background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.btn--or,.nav a.btn,.rdv-flottant{background-size:140% 140%;background-position:0 0;
     transition:background-position .6s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .3s var(--ease),box-shadow .3s}
.btn--or:hover,.nav a.btn:hover,.rdv-flottant:hover{background-position:100% 100%}
.carte,.vignettes .v{border-image:var(--or-grad) 1}

/* L'ombre portee du titre traversait le texte dore (fond decoupe dans le texte) et le salissait. */
.hero h1 em,.bande--noir em{text-shadow:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}

/* --- Itineraire : Google Maps et Waze ---------------------------------------- */
.itin{display:flex;flex-direction:column;gap:10px;margin-top:18px;align-items:flex-start}
.btn--itin{background:var(--or-grad);border:1px solid var(--or);color:var(--noir);padding:14px 22px;min-height:48px}
.btn--itin:hover{background:var(--noir);color:var(--creme);border-color:var(--noir)}

/* Bouton "Demander un rendez-vous" sur carte creme : au survol, fond noir et texte or clair lisible. */
.carte .btn--or:hover,.carte-btn:hover{background:var(--noir);background-image:none;color:var(--or-c);border-color:var(--noir)}

/* --- Bouton flottant : poteau de barbier, puce ciseaux, double filet ------------- */
.rdv-flottant{padding:0 22px 0 0;gap:0;min-height:60px;overflow:hidden;
  box-shadow:0 12px 30px rgba(12,11,9,.38),0 0 0 1px rgba(12,11,9,.5)}
.rdv-flottant::after{content:'';position:absolute;inset:4px 4px 4px 18px;border:1px solid rgba(12,11,9,.38);pointer-events:none}
.rdv-flottant .poteau{align-self:stretch;width:14px;flex:none;margin-right:12px;border-right:1px solid rgba(12,11,9,.6);
  background:repeating-linear-gradient(135deg,#0c0b09 0 6px,#f6ecd0 6px 12px,#b0813a 12px 18px,#f6ecd0 18px 24px);
  background-size:34px 34px;animation:poteau 2.4s linear infinite}
@keyframes poteau{to{background-position:0 34px}}
.rdv-flottant .puce{display:grid;place-items:center;width:40px;height:40px;flex:none;margin-right:12px;
  background:var(--noir-p);color:var(--or-c);transition:transform .45s var(--ease)}
.rdv-flottant .puce svg{width:24px;height:24px}
.rdv-flottant:hover .puce{transform:rotate(-12deg) scale(1.06)}
.rdv-flottant .txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.rdv-flottant .txt small{font-size:9px;letter-spacing:.14em;font-weight:500;opacity:.78;margin-top:3px}
.rdv-flottant:hover{background:var(--noir-p);color:var(--or-c);box-shadow:0 12px 30px rgba(12,11,9,.5),0 0 0 1px var(--or)}
.rdv-flottant:hover::after{border-color:rgba(236,211,160,.4)}
html.sans-mouvement .rdv-flottant .poteau{animation:none}
@media(prefers-reduced-motion:reduce){.rdv-flottant .poteau{animation:none}}
@media(max-width:560px){
  .rdv-flottant{padding-right:16px;min-height:56px}
  .rdv-flottant .poteau{width:11px;margin-right:9px}
  .rdv-flottant .puce{width:36px;height:36px;margin-right:9px}
  .rdv-flottant .txt small{display:none}
}

/* --- Burger : carre a filet or, trois traits de longueurs differentes ---------- */
.burger{width:48px;height:48px;min-width:48px;padding:0;margin-right:0;border:1px solid rgba(236,211,160,.6);
  background:rgba(12,11,9,.25);backdrop-filter:blur(6px);color:var(--creme);
  flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.hd.est-posee .burger,.hd--fixe .burger{color:var(--noir);border-color:rgba(184,145,47,.8);background:transparent}
body.menu-ouvert .burger{color:var(--or-c);border-color:rgba(236,211,160,.6);background:transparent}
.hd .burger i,.hd.est-posee .burger i,.hd--fixe .burger i,body.menu-ouvert .burger i{background:currentColor;margin:0;height:2px;
  transition:transform .45s var(--ease),opacity .3s,width .45s var(--ease),background .4s}
.burger i:nth-child(1){width:24px;margin-right:11px}
.burger i:nth-child(2){width:24px;margin-right:11px}
.burger i:nth-child(3){width:14px;margin-right:11px}
.burger:hover i:nth-child(3){width:24px}
body.menu-ouvert .burger i{width:24px}
body.menu-ouvert .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-ouvert .burger i:nth-child(2){opacity:0}
body.menu-ouvert .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-pied{display:none}

@media(max-width:980px){
  .burger{display:flex}
  /* Menu plein ecran : noir profond, emblème en filigrane, liens numerotes */
  .nav{background:var(--noir-p);justify-content:flex-start;padding:112px var(--gut) 40px;overflow-y:auto;
       counter-reset:lien}
  .nav::before{content:'';position:absolute;right:-18%;top:50%;width:92vw;height:92vw;max-width:520px;max-height:520px;
       transform:translateY(-46%);background:url(embleme.png) center/contain no-repeat;opacity:.07;pointer-events:none}
  .nav > a:not(.btn){display:flex;align-items:baseline;gap:16px;width:100%;color:var(--creme-c);
       font-size:clamp(40px,11vw,56px);line-height:1.12;padding:12px 0;border-bottom:1px solid rgba(236,211,160,.16);
       counter-increment:lien;position:relative}
  .nav > a:not(.btn)::before{content:'0' counter(lien);font-family:var(--ff-b);font-size:11px;font-weight:600;
       letter-spacing:.2em;color:var(--or-c);min-width:26px;transform:translateY(-.7em)}
  body.menu-ouvert .nav > a:not(.btn){color:var(--creme-c)}
  .nav > a:not(.btn):hover,.nav > a:not(.btn):active{background:var(--or-grad-c);-webkit-background-clip:text;background-clip:text;
       -webkit-text-fill-color:transparent;color:transparent}
  .nav a.btn{margin-top:26px;align-self:stretch;justify-content:center;background:var(--or-grad);color:var(--noir);
       border-color:var(--or);min-height:54px;font-size:12px}
  body.menu-ouvert .nav a.btn{color:var(--noir)}
  .nav-pied{display:block;margin-top:auto;padding-top:34px;font-size:13.5px;color:rgba(241,234,223,.7);line-height:1.6;
       opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease) .5s,transform .6s var(--ease) .5s}
  body.menu-ouvert .nav-pied{opacity:1;transform:none}
  .nav-pied p{margin:0 0 4px}
  .nav-pied .np-t{font-family:var(--ff-t);font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase;
       color:var(--or-c);margin-bottom:6px}
  .nav-pied .np-liens{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px}
  .nav .nav-pied a{color:var(--creme-c);text-decoration:none;border-bottom:1px solid rgba(236,211,160,.5);padding:11px 0;
       font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--ff-b);font-weight:600;
       opacity:1;transform:none;display:inline-block;width:auto;font-size:13px;line-height:1.2;counter-increment:none}
  body.menu-ouvert .lg-clair{display:block}
  body.menu-ouvert .lg-sombre{display:none}
  .hd.est-posee .lg-clair,.hd--fixe .lg-clair{display:none}
  body.menu-ouvert .hd.est-posee .lg-clair,body.menu-ouvert .hd--fixe .lg-clair{display:block}
  body.menu-ouvert .hd.est-posee .lg-sombre,body.menu-ouvert .hd--fixe .lg-sombre{display:none}
}

@media(max-width:980px){.nav .nav-pied a::before{content:none}.nav .nav-pied a{font-size:13px;color:var(--creme-c);padding:11px 0}}

@media(max-width:980px){
  .nav .nav-pied .np-appel{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:0 20px;
    border:1px solid var(--or-c);border-bottom:1px solid var(--or-c);color:var(--or-c);font-size:12px;letter-spacing:.2em;
    text-transform:uppercase;font-weight:600;background:transparent;transition:background .4s var(--ease),color .4s var(--ease)}
  .nav .nav-pied .np-appel:hover,.nav .nav-pied .np-appel:active{background:var(--or-grad);color:var(--noir);border-color:var(--or)}
  .nav-pied .np-liens a:not(.np-appel){flex:1 1 40%;text-align:center}
}
@media(max-width:980px){
  body.menu-ouvert .nav .nav-pied a:not(.np-appel){color:var(--creme-c);-webkit-text-fill-color:var(--creme-c)}
  body.menu-ouvert .nav .nav-pied a.np-appel{color:var(--or-c)}
  body.menu-ouvert .nav .nav-pied a.np-appel:hover,body.menu-ouvert .nav .nav-pied a.np-appel:active{color:var(--noir)}
}
/* Croix de fermeture : centree dans le carre (les traits fermes sont decales a droite, pas la croix). */
body.menu-ouvert .burger{align-items:center}
body.menu-ouvert .burger i,body.menu-ouvert .burger i:nth-child(n){margin-right:0}

/* Mots à trait d’union jamais coupés en fin de ligne (« RENDEZ- / VOUS », 12.10.2026). */
.insec{white-space:nowrap}

/* Téléphone : sections centrées comme le haut de page (demande du 12.10.2026).
   La grille des tarifs garde prestation à gauche / prix à droite. */
@media(max-width:700px){
  .duo .txt,.tete-sec,.rdv-court,.contact > div:first-child,.note,.duo figcaption,.infos,.infos > *{text-align:center}
  .tete-sec{flex-direction:column;align-items:center}
  .lead,.note{margin-left:auto;margin-right:auto}
  .contact .boutons{justify-content:center}
  .infos{grid-template-columns:1fr}
  .infos table{margin:0 auto}
  .infos td{padding:5px 9px}
  .itin{align-items:center}
  .pied .in,.pied .bas{text-align:center}
  .pied img{margin-left:auto;margin-right:auto}
}
/* « .infos a » remettait la marge intérieure des boutons d'itinéraire à 0 : texte collé aux bords (12.10.2026). */
.infos a.btn--itin{padding:14px 22px;border-bottom:1px solid var(--or)}
.infos a.btn--itin:hover{border-color:var(--noir)}