/* =====================================================================
   Créatif's Coiffure — feuille de style.

   DIRECTION : le noir, parce que c'est SA marque. Son logo est un
   lettrage italique blanc sur noir, à fort contraste - on ne lui invente
   ni terre cuite ni doré. Le site est donc noir profond, crème chaude,
   et un taupe repris du lettrage pour les respirations.

   La typographie de titre est un Bodoni : c'est la famille de son propre
   logo (serif à contraste marqué, italique fin). Le site et l'enseigne
   parlent enfin la même langue.

   Vocabulaire retenu des salons noirs : photo qui saigne hors cadre,
   bande de repères sur filets fins, cartes de prestation sombres,
   numéro géant en filigrane, bandeau de vignettes en bas.
   ===================================================================== */

:root{
  --noir:#0b0b0b;
  --noir2:#121212;
  --noir3:#1a1a1a;
  --creme:#ece7e0;
  --creme-d:#d8d1c7;
  --taupe:#b9a389;
  --taupe-c:#cdb99e;
  --gris:#8a837b;
  --ligne:rgba(236,231,224,.14);
  --ff-d:'Bodoni Moda', Didot, Georgia, serif;
  --ff-b:'Inter', -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}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--noir);color:var(--creme);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(--taupe);color:var(--noir)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* --- Titres ---------------------------------------------------------- */
h1,h2,h3{font-family:var(--ff-d);font-weight:400;line-height:1.04;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(42px,6.4vw,86px)}
h2{font-size:clamp(32px,4.4vw,58px)}
h3{font-size:clamp(19px,1.9vw,24px);line-height:1.2}
em{font-style:italic;color:var(--creme)}
.sur{font-family:var(--ff-b);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
     color:var(--taupe);font-weight:500;margin:0 0 22px}
.lead{font-size:16.5px;color:rgba(236,231,224,.68);max-width:56ch;line-height:1.85}
p{margin:0 0 16px}

/* --- Boutons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 30px;
     font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
     text-decoration:none;background:var(--creme);color:var(--noir);border:1px solid var(--creme);
     transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.btn:hover{background:transparent;color:var(--creme)}
.btn--vide{background:transparent;color:var(--creme);border-color:rgba(236,231,224,.32)}
.btn--vide:hover{background:var(--creme);color:var(--noir);border-color:var(--creme)}
.btn--noir{background:var(--noir);color:var(--creme);border-color:var(--noir)}
.btn--noir:hover{background:transparent;color:var(--noir)}
.btn .fl{transition:transform .4s var(--ease);font-size:13px}
.btn:hover .fl{transform:translateX(5px)}
.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(--taupe-c);
     padding-bottom:7px;border-bottom:1px solid rgba(185,163,137,.4);transition:border-color .4s,color .4s}
.lnk:hover{color:var(--creme);border-color:var(--creme)}
.lnk .fl{transition:transform .4s var(--ease)}
.lnk:hover .fl{transform:translateX(5px)}

/* --- En-tête --------------------------------------------------------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:60}
/* Fond PLEIN, pas 92% : a travers les 8% restants on lisait le titre de la
   section en travers du logo. Signale en recette le 10.09.2026. */
.hd::after{content:'';position:absolute;inset:0;background:var(--noir);opacity:0;
     transition:opacity .4s ease;pointer-events:none;border-bottom:1px solid var(--ligne)}
.hd.est-posee::after{opacity:1}
/* Aucune translation sur l'en-tete : il reste en place, toujours visible.
   (Une valeur autre que « none » y creerait en plus un bloc conteneur, et
   le menu plein ecran, qui vit dedans en position:fixed, ne couvrirait plus
   l'ecran - defaut deja rencontre le 10.09.2026.) */
/* z-index:1 OBLIGATOIRE. Le fond noir de l'en-tete est un ::after, donc le
   DERNIER enfant : a z-index automatique, il se peint APRES le contenu et
   recouvrait les liens d'un voile noir a 92%. Le menu semblait disparaitre
   des qu'on quittait le haut de la page. Signale le 10.09.2026. */
.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:20px var(--gut)}
.hd .in > a:first-child{position:relative;z-index:2}
.hd img{height:32px;width:auto}
.nav{display:flex;align-items:center;gap:34px}
.nav a{color:rgba(236,231,224,.78);text-decoration:none;font-size:11px;letter-spacing:.2em;
     text-transform:uppercase;font-weight:500;position:relative;padding:4px 0}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--taupe);
     transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:hover{color:var(--creme)}
.nav a.btn{color:var(--noir);padding:13px 24px}
.nav a.btn:hover{color:var(--creme)}
.nav a.btn::after{display:none}
/* 44 px sous le doigt, pas 26 : c'est la taille minimale d'une cible
   tactile, et le burger etait la SEULE porte du menu sur telephone. */
.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}
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)}

/* --- Héros : le texte à gauche, la photo qui saigne à droite ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
      padding:120px 0 60px}
.hero .in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;width:100%;
      padding:0 var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero .photo{position:absolute;top:0;right:0;bottom:0;width:52vw;overflow:hidden}
.hero .photo img{width:100%;height:100%;object-fit:cover;object-position:60% center}
/* Le fondu qui mange le bord gauche de la photo : la coupure franche
   ressemblait à un bloc collé, pas à une image qui habite la page. */
.hero .photo::after{content:'';position:absolute;inset:0;
      background:linear-gradient(to right,var(--noir) 0%,rgba(11,11,11,.72) 26%,rgba(11,11,11,.1) 68%,transparent 100%)}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l > span{display:block}
.hero .acc{color:rgba(236,231,224,.7);max-width:38ch;margin:26px 0 36px;font-size:16.5px}
.hero .actions{display:flex;flex-wrap:wrap;gap:13px}
.hero .sous{display:flex;gap:26px;margin-top:44px;padding-top:26px;border-top:1px solid var(--ligne);
      font-size:13px;color:rgba(236,231,224,.6);flex-wrap:wrap}
.hero .sous b{display:block;font-family:var(--ff-d);font-size:17px;color:var(--creme);font-weight:500}
.hero .sous a{color:inherit;text-decoration:none;display:block}
.hero .vide{min-height:1px}

/* --- Bande de repères -------------------------------------------------- */
.reperes{background:var(--noir2);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-d);font-size:20px;font-weight:500;margin-bottom:3px}
.rep span{font-size:12.5px;color:var(--gris);letter-spacing:.02em}

/* --- Bandes ------------------------------------------------------------ */
.bande{padding:clamp(74px,9.5vw,140px) 0;position:relative}
.bande--creme{background:var(--creme);color:var(--noir)}
.bande--creme .lead{color:#514a42}
.bande--creme .sur{color:#6f5638}
.bande--creme .lnk{color:#6f5638;border-color:rgba(111,86,56,.4)}
.bande--creme .lnk:hover{color:var(--noir);border-color:var(--noir)}
.bande--noir2{background:var(--noir2)}

/* --- Prestations -------------------------------------------------------- */
.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)}
.bande--creme .tete-sec{border-color:rgba(11,11,11,.14)}
.cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.carte{text-decoration:none;color:inherit;display:block;position:relative;overflow:hidden;
     background:var(--noir3)}
.carte .vue{aspect-ratio:3/4;overflow:hidden;position:relative}
.carte .vue img{width:100%;height:100%;object-fit:cover;opacity:.86;
     transition:transform 1.2s var(--ease),opacity .6s}
.carte:hover .vue img{transform:scale(1.07);opacity:1}
.carte .vue::after{content:'';position:absolute;inset:0;
     background:linear-gradient(to top,rgba(8,8,8,.88),rgba(8,8,8,.06) 62%)}
.carte .txt{position:absolute;left:0;right:0;bottom:0;padding:24px 22px;z-index:2}
.carte .txt .n{font-size:10.5px;letter-spacing:.24em;color:var(--taupe-c);display:block;margin-bottom:8px}
.carte .txt p{font-size:13.5px;color:rgba(236,231,224,.66);margin:8px 0 0}

/* --- Numéro en filigrane -------------------------------------------------- */
.filigrane{position:relative;overflow:hidden}
.filigrane .num{position:absolute;right:-2vw;bottom:-4vw;font-family:var(--ff-d);font-style:italic;
     font-size:clamp(140px,20vw,290px);line-height:.8;color:transparent;
     -webkit-text-stroke:1px rgba(11,11,11,.13);pointer-events:none;user-select:none}
.bande--noir2 .filigrane .num{-webkit-text-stroke-color:rgba(236,231,224,.09)}

/* --- Les trois espaces ---------------------------------------------------- */
.espaces{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.esp{background:var(--noir);text-decoration:none;color:inherit;display:flex;flex-direction:column;
     border:1px solid var(--ligne);transition:border-color .5s,transform .5s var(--ease)}
.esp:hover{border-color:rgba(185,163,137,.55);transform:translateY(-5px)}
.esp .vue{aspect-ratio:4/3;overflow:hidden}
.esp .vue img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.esp:hover .vue img{transform:scale(1.06)}
.esp .txt{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.esp .qui{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);
     margin:0 0 14px;font-weight:600}
/* Sur fond clair, le taupe tombait a 2,42 pour 1 - et ce sont les NOMS des
   trois professionnelles. Le theme creme corrigeait tout le reste et oubliait
   celui-la. Contraste vise : au moins 4,5. */
.bande--creme .esp .qui{color:#7a5f3f}
.esp p.d{font-size:14.5px;color:rgba(236,231,224,.62);flex:1;margin-bottom:20px}
.bande--creme .esp{background:#fff;border-color:rgba(11,11,11,.1)}
.bande--creme .esp p.d{color:#5a5249}

/* --- 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;overflow:hidden}
.duo figure img{width:100%}
.duo figcaption{font-size:12.5px;color:var(--gris);margin-top:15px;letter-spacing:.02em}

/* --- Tarifs ---------------------------------------------------------------- */
.tarifs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,72px)}
.tarifs h3{font-family:var(--ff-b);font-size:10.5px;font-weight:700;letter-spacing:.26em;
     text-transform:uppercase;color:#6f5638;margin-bottom:18px}
.tarifs ul{list-style:none;margin:0;padding:0}
.tarifs li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;
     border-bottom:1px solid rgba(11,11,11,.1);font-size:15.5px}
.tarifs li b{font-weight:500;white-space:nowrap;font-family:var(--ff-d);font-size:18px}
.tarifs li span{color:#514a42}
.remise{margin-top:30px;padding:20px 24px;border:1px solid rgba(11,11,11,.14);font-size:15px}
.note{font-size:13px;color:#7d756c;margin-top:16px;max-width:62ch}

/* --- Bandeau de vignettes ---------------------------------------------------- */
.vignettes{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--noir)}
.vignettes .v{aspect-ratio:1/1;overflow:hidden}
.vignettes img{width:100%;height:100%;object-fit:cover;opacity:.82;
     transition:transform 1.2s var(--ease),opacity .5s}
.vignettes .v:hover img{transform:scale(1.06);opacity:1}

/* --- Infos ------------------------------------------------------------------ */
.infos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,60px)}
.infos h3{font-family:var(--ff-b);font-size:10.5px;font-weight:700;letter-spacing:.26em;
     text-transform:uppercase;color:var(--taupe);margin-bottom:16px}
.infos p{font-size:15px;color:rgba(236,231,224,.72);margin:0 0 6px}
.infos a{color:var(--creme);text-decoration:none;border-bottom:1px solid rgba(185,163,137,.45)}

/* --- Pied -------------------------------------------------------------------- */
.pied{background:#070707;padding:56px 0 40px;font-size:13.5px;color:rgba(236,231,224,.5)}
.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:28px;opacity:.9;margin-bottom:16px}
.pied h4{font-family:var(--ff-b);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
     color:var(--taupe);margin:0 0 14px;font-weight:700}
.pied a{color:rgba(236,231,224,.78);text-decoration:none}
.pied a:hover{color:var(--creme)}
.pied .bas{max-width:var(--wrap);margin:36px auto 0;padding:20px var(--gut) 0;
     border-top:1px solid rgba(236,231,224,.1);display:flex;flex-wrap:wrap;gap:14px;
     justify-content:space-between;font-size:12.5px}

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

/* --- Téléphone ------------------------------------------------------------------ */
@media(max-width:980px){
  /* flex-direction:column EST LA LIGNE QUI MANQUAIT. En grand, la photo est en
     position:absolute donc hors flux, et le texte occupe toute la largeur. Ici
     on la repasse en relative : elle redevient un DEUXIEME element flex, et le
     bandeau se coupait en deux colonnes de 171 et 204 px - titre en escalier,
     texte illisible, sur tous les telephones. Vu en recette le 10.09.2026. */
  .hero{min-height:auto;padding:84px 0 0;flex-direction:column}
  .hero .in{grid-template-columns:1fr;gap:0}
  .hero .photo{position:relative;width:100%;height:52vh;margin-top:34px;right:auto;order:2}
  .hero .photo::after{background:linear-gradient(to top,var(--noir) 2%,rgba(11,11,11,.35) 45%,transparent 100%)}
  .hero .vide{display:none}
  .pied a,.infos a{display:inline-block;padding:9px 0}
  .cartes{grid-template-columns:1fr 1fr}
  .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}
  .espaces,.duo,.tarifs,.infos,.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(--noir);flex-direction:column;justify-content:center;
       align-items:flex-start;gap:0;padding:0 var(--gut);
       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-d);font-size:33px;letter-spacing:0;text-transform:none;
       padding:11px 0;color:var(--creme);opacity:0;transform:translateY(18px);
       transition:opacity .5s var(--ease),transform .5s var(--ease)}
  body.menu-ouvert .nav a{opacity:1;transform:none}
  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;margin-top:20px;padding:16px 28px}
  /* Le trait sous la page courante disparaissait avec le reste : sur
     telephone, plus rien ne disait ou l'on etait. On le remplace par la
     couleur de la marque, qui survit a la mise en page du tiroir. */
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--taupe-c)}
}
@media(max-width:560px){
  .cartes{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}