/* Feuille de style de Flux Barber.
   Sortie du HTML pour que la politique de sécurité du contenu puisse
   interdire tout style en ligne (style-src 'self', sans 'unsafe-inline').
   Mise en cache un an : ne pas renommer sans raison. */

/* Espacements ponctuels, anciennement en attributs style= */
.esp-haut-s{margin-top:8px}
.esp-haut-m{margin-top:10px}
.esp-haut-l{margin-top:26px}
.esp-haut-xl{margin-top:30px}
.avis-texte{margin-top:8px;max-width:32ch}
.lien-souligne{border-bottom:1px solid var(--trait)}
.actions-centre{justify-content:center}


:root{
  --noir:#000;--coque:#0d0c0b;--creme:#efe9e0;
  --doux:rgba(239,233,224,.62);--trait:rgba(239,233,224,.14);
  --pierre:#8b8377;--or:#c8b491;
  --serif:"Bodoni Moda",Georgia,serif;--sans:"Jost",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:124px}
body{background:var(--noir);color:var(--creme);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.wrap{width:min(1080px,90vw);margin:0 auto}
[hidden]{display:none!important}
.lecteur-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:absolute;left:-9999px;top:0;z-index:300;background:var(--creme);color:var(--noir);padding:12px 20px;border-radius:0 0 4px 0}
.evitement:focus{left:0}
.serif{font-family:var(--serif);font-weight:400}
section,
.reseaux,.plan,.formation{padding:clamp(64px,8vw,104px) 0}
.titre{font-family:var(--serif);font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.15;font-weight:400}
.intro{margin-top:14px;color:var(--doux);max-width:56ch}

/* ---------- BARRE ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:60;background:transparent;border-bottom:1px solid transparent;transition:background .35s,border-color .35s,backdrop-filter .35s}
.topbar.solide{background:rgba(0,0,0,.58);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--trait)}
.topbar-in{display:flex;align-items:center;gap:20px;height:60px}
.statut{display:flex;align-items:center;gap:9px;font-size:13.5px;white-space:nowrap}
.pastille{width:7px;height:7px;border-radius:50%;background:var(--pierre);flex:none}
.pastille.on{background:#5fbf7a;animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(95,191,122,0)}100%{box-shadow:0 0 0 0 rgba(95,191,122,0)}}
.statut b{font-weight:500}.statut span{color:var(--doux)}
.topbar .liens{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:13.5px}
.reseaux-mini{display:flex;gap:14px}
.reseaux-mini a{color:var(--doux);transition:color .2s}
.reseaux-mini a:hover{color:var(--creme)}
.reseaux-mini svg{width:16px;height:16px;fill:currentColor}
.btn-appel{display:inline-flex;align-items:center;gap:9px;background:var(--creme);color:var(--noir)!important;border-radius:99px;padding:8px 20px;font-size:13.5px;transition:.25s}
.btn-appel:hover{background:#fff;transform:translateY(-1px)}
.btn-appel svg{width:14px;height:14px;fill:currentColor;flex:none}
.btn-rdv-top{border:1px solid var(--creme);border-radius:99px;padding:7px 18px;font-size:13.5px;transition:.25s}
.btn-rdv-top:hover{background:var(--creme);color:var(--noir)}
@media(max-width:900px){
  .raccourcis{top:54px}
  .topbar .cache-mob{display:none}
  .topbar-in{height:54px;gap:12px}
  .statut{font-size:12.5px}
  html{scroll-padding-top:112px}
  .btn-appel{padding:9px;border-radius:50%}
  .btn-appel span{display:none}
}

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:540px;display:grid;place-items:center;text-align:center;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Voile allégé : le logo est maintenant détouré et se détache seul sur l'image.
   Le haut et le bas restent assombris pour la barre et le bouton. */
.hero .voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.66),rgba(0,0,0,.44) 42%,rgba(0,0,0,.8))}
.hero-txt{position:relative;z-index:2;padding:0 6vw;text-shadow:0 1px 18px rgba(0,0,0,.75)}
.logo-hero{margin:0 auto;width:clamp(126px,19vw,190px)}
.logo-hero picture{display:block}
.logo-hero img{width:100%;height:auto;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.85)) drop-shadow(0 0 34px rgba(0,0,0,.6))}
.hero-sous{margin-top:26px;font-size:clamp(1rem,2.4vw,1.15rem);color:var(--doux);letter-spacing:.03em}
.hero-cta{display:inline-block;margin-top:34px;background:var(--creme);color:var(--noir);border-radius:99px;padding:16px 42px;font-size:16px;transition:.25s}
.hero-cta:hover{transform:translateY(-2px);background:#fff}
.reveal{opacity:0;transform:translateY(18px);animation:monte .9s cubic-bezier(.2,.7,.3,1) forwards}
.reveal.d1{animation-delay:.15s}.reveal.d2{animation-delay:.3s}
@keyframes monte{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}.pastille.on{animation:none}}

/* ---------- RACCOURCIS ---------- */
.raccourcis{position:sticky;top:60px;z-index:50;background:rgba(10,10,10,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid var(--trait)}
.raccourcis-in{display:flex;gap:8px;overflow-x:auto;padding:13px 0;scrollbar-width:none}
.raccourcis-in::-webkit-scrollbar{display:none}
.raccourcis a{flex:none;border:1px solid var(--trait);border-radius:99px;padding:8px 18px;font-size:14px;color:var(--doux);transition:.22s;white-space:nowrap}
.raccourcis a:hover{border-color:var(--creme);color:var(--creme)}
.raccourcis a.fort{background:var(--creme);color:var(--noir);border-color:var(--creme)}

/* ---------- PREUVE ---------- */
.preuve{background:var(--coque);border-bottom:1px solid var(--trait)}
.preuve-in{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;padding:20px 0;font-size:14.5px;color:var(--doux)}
.preuve b{font-family:var(--serif);font-size:22px;color:var(--creme);font-weight:400;margin-right:6px}

/* ---------- PRESTATIONS ---------- */
.onglets{display:flex;align-items:center;gap:10px;margin:30px 0 6px;flex-wrap:wrap}
.onglet{border:1px solid var(--trait);border-radius:99px;padding:9px 20px;font-size:14px;color:var(--doux);transition:.2s;display:inline-flex;align-items:center;gap:7px}
.onglet:hover{border-color:var(--doux)}
.onglet[aria-selected="true"]{background:var(--creme);color:var(--noir);border-color:var(--creme)}
.onglet .etoile{color:var(--or);font-size:13px}
.onglet[aria-selected="true"] .etoile{color:#8a6d33}
.onglet.vip{background:var(--or);color:#000;border-color:var(--or);font-weight:400}
.onglet.vip .etoile{color:#000}
.onglet.vip:hover{background:#d8c6a5;border-color:#d8c6a5}
.onglet.vip[aria-selected="true"]{background:var(--or);color:#000;border-color:var(--or);box-shadow:0 0 0 1px rgba(200,180,145,.45),0 6px 18px rgba(200,180,145,.16)}
.onglet.vip[aria-selected="true"] .etoile{color:#000}
.liste{margin-top:20px}
.ligne{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--trait)}
.ligne .nom{flex:1}
.ligne .detail{display:block;font-size:13px;color:var(--pierre);margin-top:2px}
.ligne .duree{color:var(--pierre);font-size:13.5px;white-space:nowrap}
.ligne .prix{font-family:var(--serif);font-size:20px;min-width:64px;text-align:right}
.eur{font-family:var(--sans);font-weight:300;font-size:.74em;margin-left:1px;vertical-align:.06em}
.carte-vip{border:1px solid var(--trait);border-left:2px solid var(--or);padding:24px 26px;margin-top:22px}
.carte-vip h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;display:flex;align-items:center;gap:10px}
.carte-vip h3 span{color:var(--or)}
.carte-vip p{color:var(--doux);margin-top:12px;max-width:52ch;font-size:15.5px}
.carte-vip .actions{margin-top:22px}
.vip-accroche{font-family:var(--serif);font-size:1.28rem;color:var(--or);margin:38px 0 0;text-align:center;letter-spacing:.01em}
.galerie-vip{margin-top:22px}
.galerie-vip .photo{border-color:rgba(200,180,145,.3)}
.note-presta{margin-top:16px;font-size:14px;color:var(--pierre)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{border-radius:99px;padding:14px 32px;font-size:15.5px;transition:.25s;display:inline-flex;align-items:center;gap:9px}
.btn-plein{background:var(--creme);color:var(--noir)}
.btn-plein:hover{background:#fff;transform:translateY(-2px)}
.btn-vide{border:1px solid var(--trait);color:var(--doux)}
.btn-vide:hover{border-color:var(--creme);color:var(--creme)}
.btn svg{width:16px;height:16px;fill:currentColor}

/* ---------- ÉQUIPE ---------- */
.equipe{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.membre{
  flex:1 1 210px;border:1px solid var(--trait);border-radius:99px;
  padding:12px 20px 12px 12px;display:flex;align-items:center;gap:14px;
  transition:border-color .3s,transform .3s;
}
.membre:hover{border-color:var(--creme);transform:translateY(-2px)}
.jeton{width:46px;height:46px;flex:none;border:1px solid var(--trait);border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:19px}
.membre h3{font-family:var(--serif);font-weight:400;font-size:1.08rem;line-height:1.2}
.membre .role{font-size:12.5px;color:var(--pierre)}
.membre .insta{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12.5px;color:var(--doux);transition:.2s;white-space:nowrap}
.membre .insta:hover{color:var(--creme)}
.membre .insta svg{width:14px;height:14px;fill:currentColor}
.membre .insta .pseudo{display:none}
@media(min-width:1000px){.membre .insta .pseudo{display:inline}}
@media(max-width:560px){.membre{flex:1 1 100%}}

/* ---------- GALERIE ---------- */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.photo{position:relative;overflow:hidden;border:1px solid var(--trait);border-radius:4px;background:#0a0a0a;aspect-ratio:3/4}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.photo:hover img{transform:scale(1.04)}
.photo figcaption{position:absolute;inset:auto 0 0 0;padding:28px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:13.5px}
.galerie .photo:last-child:nth-child(3n+1){grid-column:2}
@media(max-width:860px){.galerie{grid-template-columns:repeat(2,1fr);gap:10px}.galerie .photo:last-child:nth-child(3n+1){grid-column:auto}}
@media(prefers-reduced-motion:reduce){.photo:hover img{transform:none}}

/* ---------- GALERIE REPLIÉE ---------- */
/* Le repli n'est applique QUE par le script : sans JS, tout reste visible. */
.galerie.repliee .photo.sup{display:none}
.voir-plus{display:flex;justify-content:center;margin-top:26px}
.voir-plus button{
  border:1px solid var(--trait);border-radius:99px;padding:13px 30px;
  font-size:15px;color:var(--doux);display:inline-flex;align-items:center;gap:10px;
  transition:border-color .25s,color .25s;
}
.voir-plus button:hover{border-color:var(--or);color:var(--or)}
.voir-plus svg{width:14px;height:14px;fill:currentColor;transition:transform .3s}
.voir-plus button[aria-expanded="true"] svg{transform:rotate(180deg)}
.voir-plus .compte{color:var(--pierre);font-size:13.5px}

/* ---------- RÉSEAUX ---------- */
.reseaux{background:var(--coque);border-top:1px solid var(--trait)}
.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.tuile{position:relative;border:1px solid var(--trait);border-radius:4px;padding:32px 24px 24px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:.3s}
.tuile:hover{border-color:var(--creme);transform:translateY(-3px)}
.tuile svg{width:24px;height:24px;fill:var(--creme)}
.tuile .handle{font-family:var(--serif);font-size:21px;margin-top:auto;letter-spacing:.01em}
.tuile .quoi{font-size:13.5px;color:var(--pierre);margin-top:5px}
.tuile .halo{position:absolute;width:170px;height:170px;border-radius:50%;filter:blur(60px);opacity:.26;right:-40px;top:-40px}
.tuile.insta .halo{background:linear-gradient(135deg,#f09433,#dc2743,#bc1888)}
.tuile.tiktok .halo{background:linear-gradient(135deg,#25f4ee,#fe2c55)}
.tuile.snap .halo{background:#fffc00}
@media(max-width:760px){.tuiles{grid-template-columns:1fr}.tuile{min-height:auto}}

/* ---------- AVIS ---------- */
.avis-tete{display:flex;align-items:flex-end;gap:34px;flex-wrap:wrap;margin-top:36px}
.avis-note{font-family:var(--serif);font-size:clamp(3.4rem,9vw,5rem);line-height:.9}
.avis-note small{font-family:var(--sans);font-size:14.5px;color:var(--pierre);display:block;margin-top:8px}
.etoiles{color:var(--or);letter-spacing:.14em;font-size:17px}

/* ---------- FORMATION ---------- */
.formation{background:var(--coque);border-top:1px solid var(--trait)}
.formation-in{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,5vw,54px);align-items:stretch}
.affiche{border:1px solid var(--trait);border-radius:4px;overflow:hidden;min-height:100%}
.affiche img{width:100%;height:100%;object-fit:cover;object-position:top center}
@media(max-width:860px){.affiche{min-height:auto}.affiche img{height:auto;max-height:60vh;object-fit:contain}}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ.large{grid-column:1/-1}
.champ label{font-size:13.5px;color:var(--doux)}
.champ input,.champ textarea,.champ select{background:transparent;border:1px solid var(--trait);border-radius:4px;padding:13px 14px;color:var(--creme);font-family:var(--sans);font-size:15.5px}
.champ input:focus,.champ textarea:focus,.champ select:focus{border-color:var(--doux);outline:none}
.champ textarea{resize:vertical;min-height:84px}
.champ select option{background:#111}
.apercu-msg{border:1px solid var(--trait);border-left:2px solid var(--or);padding:16px 18px;margin-top:22px;font-size:14.5px;color:var(--doux);white-space:pre-wrap;display:none}
.apercu-msg.visible{display:block}
.message{margin-top:16px;font-size:14.5px;padding:12px 16px;border-radius:4px;display:none}
.message.ok{display:block;background:rgba(95,191,122,.1);border:1px solid rgba(95,191,122,.4);color:#9fdcb0}
.message.ko{display:block;background:rgba(220,90,90,.1);border:1px solid rgba(220,90,90,.4);color:#e8a3a3}
@media(max-width:860px){.formation-in{grid-template-columns:1fr;gap:34px}.champs{grid-template-columns:1fr}}

/* ---------- QUESTIONS ---------- */
.faq{margin-top:34px}
.faq>div{padding:22px 0;border-bottom:1px solid var(--trait)}
.faq dt{font-family:var(--serif);font-size:1.12rem;font-weight:400}
.faq dd{margin-top:7px;color:var(--doux);font-size:15.5px;max-width:64ch}

/* ---------- PLAN ---------- */
.plan{border-top:1px solid var(--trait)}
.plan-cadre{margin-top:6px}
.plan-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,5vw,54px);align-items:center}
.plan-cadre{border:1px solid var(--trait);border-radius:4px;overflow:hidden;line-height:0;background:#111}
.plan-cadre iframe{width:100%;height:330px;border:0;filter:grayscale(1) invert(.92) contrast(.86)}
.plan-appat{width:100%;height:330px;border:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;line-height:1.6;
  background:#0d0c0b;color:var(--doux);cursor:pointer;transition:background .25s;padding:20px;text-align:center}
.plan-appat:hover{background:#141210}
.plan-appat svg{width:30px;height:30px;fill:var(--or);opacity:.85}
.plan-appat .titre-appat{color:var(--creme);font-family:var(--serif);font-size:1.1rem}
.plan-appat small{font-size:12.5px;color:var(--pierre);max-width:34ch}
.itineraire{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.plan-infos{list-style:none;margin-top:28px;font-size:15px}
.plan-infos li{padding:9px 0;border-bottom:1px solid var(--trait);color:var(--doux);display:flex;justify-content:space-between;gap:14px}
.plan-infos li b{font-weight:400;color:var(--creme)}
@media(max-width:860px){.plan-in{grid-template-columns:1fr;gap:30px}.plan-cadre iframe{height:260px}}

/* ---------- PIED ---------- */
footer{border-top:1px solid var(--trait);padding:56px 0 32px;font-size:14.5px}
.pied{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
.pied h4{font-family:var(--serif);font-weight:400;font-size:17px;margin-bottom:12px}
.pied p{color:var(--doux)}
.pied ul{list-style:none}
.pied li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;max-width:240px;color:var(--doux)}
.pied .aujourdhui{color:var(--creme)}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--trait);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--pierre)}
.legal a{transition:color .2s}
.legal a:hover{color:var(--creme)}
.legal .signature{color:var(--creme);border-bottom:1px solid var(--trait);padding-bottom:1px}
.legal .signature:hover{border-color:var(--creme)}
@media(max-width:820px){.pied{grid-template-columns:1fr;gap:28px}}

/* ---------- BOUTONS FLOTTANTS ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:70;width:54px;height:54px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .25s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:28px;height:28px;fill:#fff}

/* ---------- SUR-TITRES ET RYTHME ---------- */
.sur-titre{
  display:flex;align-items:center;gap:13px;
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--or);margin-bottom:15px;font-weight:400;
}
.sur-titre::before{content:"";width:28px;height:1px;background:var(--or);flex:none;opacity:.75}
.titre{position:relative}
.tete-section{margin-bottom:6px}

/* Filet doré très discret entre les grands blocs */
.filet{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,rgba(200,180,145,.28) 22%,rgba(200,180,145,.28) 78%,transparent)}

/* ---------- RÉVÉLATION AU DÉFILEMENT ---------- */
/* La classe n'est posée que par le script : si le JS échoue, rien ne se cache. */
.monte-vue{opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.monte-vue.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .monte-vue{opacity:1!important;transform:none!important;transition:none}
}

/* ---------- FINITIONS ---------- */
.preuve-in b{position:relative}
.ligne{transition:padding-left .25s,border-color .25s}
.ligne:hover{padding-left:8px;border-bottom-color:rgba(200,180,145,.4)}
.ligne:hover .prix{color:var(--or)}
.prix{transition:color .25s}

.photo{transition:border-color .35s,transform .35s}
.photo:hover{border-color:rgba(200,180,145,.45)}
.photo figcaption{transform:translateY(4px);opacity:.88;transition:transform .35s,opacity .35s}
.photo:hover figcaption{transform:none;opacity:1}

.membre{position:relative;overflow:hidden}
.membre .jeton{transition:border-color .3s,color .3s}
.membre:hover .jeton{border-color:var(--or);color:var(--or)}

.faq>div{transition:border-color .25s}
.faq>div:hover{border-bottom-color:rgba(200,180,145,.4)}
.faq dt{transition:color .25s}
.faq>div:hover dt{color:var(--or)}

.btn-plein,.hero-cta{position:relative;overflow:hidden}
.btn-vide:hover{border-color:var(--or);color:var(--or)}
.plan-infos li{transition:border-color .25s}
.plan-infos li:hover{border-bottom-color:rgba(200,180,145,.4)}

.tuile .handle{transition:color .3s}
.tuile:hover .handle{color:var(--or)}
@media(prefers-reduced-motion:reduce){
  .ligne:hover{padding-left:0}
  .photo:hover figcaption{transform:none}
}