/* MH_CORRECTIFS 2026-09-15-lot19-import-robuste */
/* MH_CORRECTIFS 2026-09-14-lot9-superadmin — styles du logo image. */
/* =====================================================================
   Magic Hair — styles communs à toutes les pages
   Les couleurs viennent de la charte : bordeaux #690000, crème #EFEDE7,
   rose terre #B45D5D. Le rose foncé #A35454 sert dès que le texte
   descend sous 24 px, pour rester lisible.
   ===================================================================== */
:root{
  --bordeaux:#690000; --bordeaux-clair:#8A1A1A;
  --rose:#B45D5D; --rose-texte:#A35454;
  --creme:#EFEDE7; --surface:#F7F5F1;
  --encre:#1A0F0F; --douce:#5A4A4A;/* --tres-douce etait utilisee par 6 pages (accueil, CGV, confidentialite,
   mentions, merci, prestations) sans etre definie nulle part dans cette
   feuille : elle n'existait que dans admin.css, jamais chargee par le
   site public. Les textes concernes s'affichaient donc dans la couleur
   heritee au lieu du gris discret prevu. Meme valeur que l'admin, pour
   que les deux interfaces restent identiques. */
--tres-douce:#9A8A8A; --ligne:#DDD8CE;
  --succes:#2F6B4F; --alerte:#B45309; --erreur:#9B1C1C;
  --r-sm:6px; --r-md:12px; --r-lg:20px;
  --section:clamp(30px,4.2vw,60px);
  --ombre:0 1px 3px rgba(26,15,15,.06),0 8px 24px rgba(26,15,15,.05);
  --titre:"Playfair Display",Georgia,serif;
  --texte:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto} *{animation:none!important;transition:none!important}
}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--texte);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--rose);outline-offset:3px;border-radius:3px}
.wrap{width:min(1180px,92vw);margin-inline:auto}

/* ---------- en-tête ---------- */
.bandeau{background:var(--bordeaux);color:var(--creme);text-align:center;
  font-size:13px;padding:9px 16px}
header{position:sticky;top:0;z-index:60;background:rgba(239,237,231,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:13px 0}
.marque{display:flex;flex-direction:column;line-height:.95;text-decoration:none}
/* Logo image (14/09/2026). En-tete : version bordeaux sur creme.
   Pied de page : version creme sur bordeaux, via .pied .marque img. */
.marque img{display:block;height:40px;width:auto}
.pied .marque img{height:52px}
@media(max-width:600px){.marque img{height:34px}}
.marque b{font-family:var(--titre);font-size:25px;font-weight:500;color:var(--bordeaux);letter-spacing:1px}
.marque i{font-family:"Pinyon Script",cursive;font-style:normal;font-size:16px;color:var(--rose);margin-top:1px}
.liens{display:flex;gap:26px;font-size:14.5px}
.liens a{text-decoration:none;color:var(--douce);padding:4px 0;position:relative;white-space:nowrap}
.liens a:hover,.liens a[aria-current]{color:var(--bordeaux)}
.liens a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--bordeaux);transition:right .25s ease}
.liens a:hover::after,.liens a[aria-current]::after{right:0}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--bordeaux);margin:5px 0}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--bordeaux);color:var(--creme);border:0;cursor:pointer;
  padding:13px 26px;border-radius:var(--r-sm);font:500 15px var(--texte);
  text-decoration:none;transition:background .2s,transform .15s}
.btn:hover{background:var(--bordeaux-clair)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-ligne{background:transparent;color:var(--bordeaux);border:1.5px solid var(--bordeaux)}
.btn-ligne:hover{background:var(--bordeaux);color:var(--creme)}
.btn-clair{background:var(--creme);color:var(--bordeaux)}
.btn-clair:hover{background:#fff}

/* ---------- sections ---------- */
section{padding:var(--section) 0}
/* Deux sections voisines cumulaient leurs marges : 88 a 160 px de vide
   entre chaque bloc, sept fois de suite. La seconde reprend la moitie. */
section + section{padding-top:calc(var(--section) * .5)}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose-texte);font-weight:500;margin:0 0 12px}
h1{font-family:var(--titre);font-weight:400;margin:0 0 16px;
  font-size:clamp(32px,5vw,58px);line-height:1.06;color:var(--bordeaux);letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--rose)}
h2{font-family:var(--titre);font-weight:400;font-size:clamp(26px,3.4vw,38px);
  line-height:1.15;color:var(--bordeaux);margin:0 0 14px;letter-spacing:-.01em}
.tete{max-width:58ch;margin-bottom:32px}
.tete p{color:var(--douce);margin:0;font-size:16px}

/* ---------- carrousel horizontal ---------- */
.carrousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;margin-inline:calc(-4vw);padding-inline:4vw;
  scrollbar-width:thin;scrollbar-color:var(--ligne) transparent}
.carrousel::-webkit-scrollbar{height:5px}
.carrousel::-webkit-scrollbar-thumb{background:var(--ligne);border-radius:3px}
.carrousel > *{scroll-snap-align:start;flex:0 0 min(268px,74vw)}
@media (min-width:900px){
  .carrousel{margin-inline:0;padding-inline:0;overflow-x:visible;
    display:grid;grid-template-columns:repeat(4,1fr)}
  .carrousel > *{flex:initial}
}

/* ---------- cartes ---------- */
.carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.carte:hover{transform:translateY(-3px);box-shadow:var(--ombre);border-color:var(--rose)}
.carte-img{aspect-ratio:4/3;background:linear-gradient(140deg,#6d3330,#2e1010);
  display:grid;place-items:center;overflow:hidden;position:relative}
/* L'image est sortie du flux de la grille et collée aux quatre bords.
   Avant : place-items:center l'empêchait d'être étirée, son height:100%
   retombait sur auto, et le fond du cadre apparaissait au-dessus d'elle.
   object-fit:cover ne servait alors à rien, focal_y était ignoré.
   Le centrage de la grille ne sert plus qu'au repli « MH » sans photo. */
.carte-img img{position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:cover}
.carte-img span{font-family:var(--titre);font-size:36px;color:rgba(239,237,231,.16)}
.carte-corps{padding:17px;display:flex;flex-direction:column;gap:6px;flex:1}
.carte h3{font-family:var(--titre);font-weight:500;font-size:18px;margin:0;color:var(--encre)}
.carte p{margin:0;font-size:13.5px;color:var(--douce);flex:1}
.prix{display:flex;align-items:center;justify-content:space-between;
  margin-top:4px;padding-top:11px;border-top:1px solid var(--ligne)}
.prix b{font-size:14px;color:var(--rose-texte);font-weight:600}
.prix span{font-size:18px;color:var(--bordeaux);transition:transform .2s}
.carte:hover .prix span{transform:translateX(4px)}

/* ---------- avis ---------- */
.avis-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.avis-carte{background:var(--surface);border:1px solid var(--ligne);
  border-radius:var(--r-md);padding:22px}
.etoiles{color:var(--rose);letter-spacing:2px;margin-bottom:9px;font-size:14px}
.avis-carte p{margin:0 0 12px;font-size:14.5px;color:var(--douce);font-style:italic}
.avis-carte cite{font-style:normal;font-size:13px;font-weight:600;color:var(--bordeaux);display:block}
.avis-carte .meta{font-size:12px;color:var(--douce);margin-top:3px}

/* ---------- formulaires ---------- */
label.ch{display:block;margin-bottom:15px}
label.ch span{display:block;font-size:13px;color:var(--douce);margin-bottom:5px;font-weight:500}
label.ch input,label.ch select,label.ch textarea{width:100%;padding:13px;
  border:1.5px solid var(--ligne);border-radius:var(--r-sm);
  background:var(--surface);font-size:16px}
label.ch input:focus,label.ch textarea:focus,label.ch select:focus{
  border-color:var(--bordeaux);outline:none;background:#fff}
label.ch textarea{min-height:110px;resize:vertical}
.coche{display:flex;gap:11px;align-items:flex-start;font-size:14px;
  color:var(--douce);margin-bottom:16px;cursor:pointer}
.coche input{width:20px;height:20px;accent-color:var(--bordeaux);flex-shrink:0;margin-top:1px}

/* ---------- messages ---------- */
.alerte{background:#FCEDEC;border:1px solid var(--erreur);color:var(--erreur);
  border-radius:var(--r-sm);padding:13px 15px;font-size:14px;margin-bottom:16px}
.info{background:rgba(180,93,93,.1);border:1px solid var(--rose);
  border-radius:var(--r-sm);padding:13px 15px;font-size:14px;margin-bottom:16px;color:var(--encre)}
.reussi{background:#E3F0E9;border:1px solid var(--succes);color:var(--succes);
  border-radius:var(--r-sm);padding:13px 15px;font-size:14px;margin-bottom:16px}
.vide{text-align:center;padding:36px 16px;color:var(--douce);font-size:14.5px}
.charge{text-align:center;padding:28px;color:var(--douce);font-size:14px}

/* ---------- pied de page ---------- */
footer{background:var(--bordeaux);color:rgba(239,237,231,.8);padding:48px 0 24px;font-size:14px}
.pied{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.pied h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,237,231,.55);margin:0 0 12px;font-weight:500}
.pied a{text-decoration:none;display:block;padding:5px 0}
.pied a:hover{color:var(--creme)}
.pied .marque b{color:var(--creme)}
.pied .marque i{color:var(--rose)}
.bas{border-top:1px solid rgba(239,237,231,.16);margin-top:30px;padding-top:18px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(239,237,231,.55)}

/* ---------- galerie ----------
   Deux grandes photos par ligne sur mobile. Le format portrait met mieux
   en valeur une chevelure qu'un carré, qui coupe toujours quelque chose.
   Le cadre coupe le zoom : sans overflow:hidden, une photo agrandie
   déborderait sur ses voisines. */
.galerie{display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:12px;width:100%}

.galerie .cadre-photo{aspect-ratio:4/5;width:100%;height:auto;
  border-radius:var(--r-md);cursor:zoom-in;
  box-shadow:0 2px 12px rgba(0,0,0,.18);transition:transform .2s}
.galerie .cadre-photo:active{transform:scale(.98)}

.galerie img{width:100% !important;height:100% !important;
  object-fit:cover;display:block;transform-origin:center;border-radius:0}

@media (min-width:700px){
  .galerie{grid-template-columns:repeat(3,1fr) !important;gap:14px}
}
@media (min-width:1100px){
  .galerie{grid-template-columns:repeat(4,1fr) !important}
}

/* Un cadre qui coupe proprement une image zoomée */
.cadre-photo{overflow:hidden;border-radius:var(--r-sm);position:relative;
  display:block;background:rgba(239,237,231,.08)}
.cadre-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* (overflow deja pose sur .carte-img plus haut) */

/* ---------- signature du concepteur ----------
   Le vert de la charte NexusAI (#0F4A3C) est trop sombre pour un fond
   bordeaux : les deux couleurs ont presque la même luminosité, le texte
   deviendrait illisible. On garde la teinte, éclaircie pour le contraste. */
:root{ --nexus-vert:#5FBFA0; --nexus-vert-vif:#7ED9BC; }
.signature-nexus{display:inline-flex;align-items:center;gap:0;
  text-decoration:none;color:var(--nexus-vert);font-size:12.5px;
  font-weight:500;white-space:nowrap;transition:color .2s;padding:4px 0}
.signature-nexus img{width:30px;height:30px;flex-shrink:0;
  margin:0 -1px;transition:transform .25s}
.signature-nexus:hover{color:var(--nexus-vert-vif)}
.signature-nexus:hover img{transform:scale(1.12)}

/* ---------- bouton flottant mobile ---------- */
.flottant{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;display:none}
.flottant .btn{width:100%;box-shadow:0 6px 22px rgba(105,0,0,.32)}

/* ---------- bannière d'installation ---------- */
.pwa{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:none;
  background:var(--encre);color:var(--creme);border-radius:var(--r-md);
  padding:15px 17px;box-shadow:0 12px 32px rgba(0,0,0,.3);align-items:center;gap:13px}
.pwa.on{display:flex}
.pwa p{margin:0;font-size:14px;flex:1}
.pwa p small{display:block;color:rgba(239,237,231,.6);font-size:12.5px;margin-top:2px}
.pwa .btn{padding:10px 17px;background:var(--creme);color:var(--encre);font-size:14px}
.pwa .fermer{background:none;border:0;color:rgba(239,237,231,.5);font-size:22px;
  cursor:pointer;padding:4px 8px}

/* ---------- adaptation ---------- */
@media (max-width:820px){
  .pied{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .liens{display:none}
  .liens.ouvert{display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--creme);
    border-bottom:1px solid var(--ligne);padding:6px 4vw 16px}
  .liens.ouvert a{padding:13px 0;border-bottom:1px solid var(--ligne)}
  .burger{display:block}
  header .btn{padding:11px 17px;font-size:14px}
  /* Pied en deux colonnes sur mobile. La marque prend toute la largeur,
     puis « Liens rapides » et « Infos pratiques » se placent côte à côte.
     En une seule colonne, le pied faisait plus de deux écrans à faire
     défiler pour atteindre les mentions légales. */
  .pied{grid-template-columns:1fr 1fr;gap:22px 16px}
  .pied > div:first-child{grid-column:1 / -1}
  .pied .btn{width:100%;justify-content:center;text-align:center}
  .bas{flex-direction:column;align-items:center;text-align:center;gap:11px}
  [data-flottant="affiche"] .flottant{display:block}
  [data-flottant="affiche"] body{padding-bottom:78px}
}

/* ---------- apparence pilotée depuis l'admin ----------
   mh-site.js pose deux attributs sur <html> : data-align pour
   l'alignement des textes, data-pastille pour la position du prix sur la
   photo. Tout passe par des variables : une seule règle par élément, et
   changer un réglage ne touche pas au reste. Valeurs par défaut si la
   base est injoignable : centré, pastille en bas. */
:root{--txt:center;--just:center;--mi-s:auto;--mi-e:auto}
[data-align="gauche"]{--txt:left;--just:flex-start;--mi-s:0;--mi-e:auto}
[data-align="centre"]{--txt:center;--just:center;--mi-s:auto;--mi-e:auto}
[data-align="droite"]{--txt:right;--just:flex-end;--mi-s:auto;--mi-e:0}

.tete,.hero-texte,.carte-corps,.ligne .txt,.p-tete,.p-corps{text-align:var(--txt)}
.tete,.p-tete,.p-corps{margin-inline:var(--mi-s) var(--mi-e)}
.tete p,.hero p.intro{margin-inline:var(--mi-s) var(--mi-e)}
.hero-actions,.p-actions,.p-meta,.p-fil,.prix,.ligne .prix-pastille{
  justify-content:var(--just)}

/* Position de la pastille de prix sur la photo, catalogue uniquement. */
[data-pastille="haut"]   .ligne .prix-pastille{top:9px;bottom:auto}
[data-pastille="bas"]    .ligne .prix-pastille{bottom:9px;top:auto}
[data-pastille="centre"] .ligne .prix-pastille{top:50%;bottom:auto;
  transform:translateY(-50%)}

/* Nombre de cartes par ligne, réglé depuis l'onglet Apparence. Vaut pour
   le catalogue (.liste) et pour la première étape du tunnel : catégories
   (.familles) comme prestations (.liste). Même nombre sur mobile et sur
   ordinateur, c'est le choix retenu. */
[data-colonnes="2"] .liste,[data-colonnes="2"] .familles{
  grid-template-columns:repeat(2,minmax(0,1fr))}
[data-colonnes="3"] .liste,[data-colonnes="3"] .familles{
  grid-template-columns:repeat(3,minmax(0,1fr))}
[data-colonnes="4"] .liste,[data-colonnes="4"] .familles{
  grid-template-columns:repeat(4,minmax(0,1fr))}
/* Au-delà de deux colonnes sur un téléphone, on resserre pour que le
   texte respire encore un peu. */
@media (max-width:560px){
  [data-colonnes="3"] .liste,[data-colonnes="3"] .familles,
  [data-colonnes="4"] .liste,[data-colonnes="4"] .familles{gap:8px}
}

/* ---------- recherche publique (14/09/2026) ----------
   Champ dans l'en-tête, entre le menu et « Réserver ».
   Sous 900 px il passe sur sa propre ligne : logo + menu + bouton +
   champ ne tiennent pas côte à côte sur un téléphone. */
.rech-zone{position:relative}
.rech-champ{width:190px;max-width:38vw;padding:8px 12px;font:inherit;font-size:14px;
  color:var(--encre);background:var(--surface,#fff);
  border:1px solid var(--ligne,#DDD8CE);border-radius:999px;outline:none;
  transition:width .18s ease,border-color .18s ease}
.rech-champ:focus{width:240px;max-width:52vw;border-color:var(--bordeaux,#690000)}
.rech-champ::-webkit-search-cancel-button{cursor:pointer}

.rech-res{position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  width:300px;max-width:86vw;max-height:60vh;overflow-y:auto;
  background:var(--surface,#fff);border:1px solid var(--ligne,#DDD8CE);
  border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.14);padding:6px}
.rech-titre{margin:8px 10px 4px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tres-douce,#A79E97)}
.rech-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--encre);
  font-size:14.5px}
.rech-item:hover,.rech-item:focus{background:rgba(105,0,0,.06)}
.rech-item em{flex:none;font-style:normal;font-size:12.5px;color:var(--douce,#6B625C)}
.rech-vide{margin:0;padding:14px 12px;font-size:14px;color:var(--douce,#6B625C)}

/* Mobile : TOUT sur une seule ligne — logo, recherche, Réserver, menu.
   Avant, la recherche prenait 100 % de la largeur et poussait le bloc
   entier à la ligne : le logo restait seul en haut, avec un grand vide
   à côté. On resserre chaque élément pour que les quatre tiennent.

   Le champ occupe l'espace restant, quel qu'il soit : flex:1 avec une
   largeur minimale nulle. Sans min-width:0, un champ refuse de passer
   sous sa taille intrinsèque et déborde. */
@media(max-width:900px){
  header .nav{flex-wrap:nowrap;gap:9px;padding:10px 0}
  .marque{flex:none}
  .rech-zone{flex:1 1 auto;min-width:0}
  .rech-champ{width:100%;max-width:none;min-width:0;padding:8px 12px;font-size:14px}
  .rech-champ:focus{width:100%;max-width:none}
  .rech-res{left:auto;right:0;width:min(300px,86vw);max-width:none}
  header .nav > div:last-child{flex:none;gap:7px}
  header .nav .btn{padding:9px 13px;font-size:14px;white-space:nowrap}
}

/* Très petits écrans : on gagne les derniers pixels sur le logo et le
   bouton, plutôt que de renvoyer quoi que ce soit à la ligne. */
@media(max-width:430px){
  header .nav{gap:7px}
  .marque img{height:30px}
  header .nav .btn{padding:8px 11px;font-size:13.5px}
  .rech-champ{padding:7px 11px;font-size:13.5px}
}

/* Sous 360 px (iPhone SE et assimilés), les quatre éléments ne tiennent
   qu'en grappillant partout : marges du contenu resserrées, logo réduit,
   bouton compact. Le champ reste visible — c'était la demande. */
@media(max-width:360px){
  header .wrap{padding-left:12px;padding-right:12px}
  header .nav{gap:6px}
  .marque img{height:26px}
  header .nav .btn{padding:7px 9px;font-size:13px}
  .rech-champ{padding:6px 9px;font-size:13px}
}