/* Maison de Coiffure VL — feuille de style */
:root{
  --ivoire:#EBE4DB; --creme:#F6F3EC; --blanc:#FFFFFF;
  --encre:#35302A; --texte:#54493F; --doux:#6A5F57; --discret:#5E534B;
  --terracotta:#A35C3A; --terracotta-fonce:#8C4A2E;
  --filet:#D3C8BB; --filet-fort:#B9AC9D; --sable:#DDD3C7;
  --or:#C9A45C; --vert-porte:#2E3A35;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --page:1320px; --marge:clamp(20px, 5vw, 64px);
  --arche:999px 999px 0 0;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivoire);color:var(--encre);font-family:var(--sans);font-size:17px;line-height:1.7;font-weight:400}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--encre)}
a:hover{color:var(--terracotta-fonce)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
h1,h2,h3,p,figure,blockquote{margin:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--encre);color:#fff;padding:12px 18px;z-index:10}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--page);margin:0 auto;padding-left:var(--marge);padding-right:var(--marge)}
.serif{font-family:var(--serif)}
.it{font-style:italic}
.accent{color:var(--terracotta)}
.titre{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,80px);line-height:1;letter-spacing:-.01em}
.surtitre{display:flex;align-items:center;gap:18px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:var(--terracotta-fonce)}
.surtitre::before{content:"";width:48px;height:1px;background:currentColor;flex:none}
.surtitre.centre::after{content:"";width:48px;height:1px;background:currentColor;flex:none}
.lien{font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:14px 0;text-underline-offset:8px}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 42px;border-radius:999px;background:var(--encre);color:#fff;text-decoration:none;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.bouton:hover{background:#000;color:#fff}
.bouton.clair{background:var(--creme);color:var(--encre)}
.bouton.clair:hover{background:#fff;color:var(--encre)}
.bouton.contour{background:transparent;color:var(--encre);border:1px solid var(--encre);min-height:48px;padding:0 30px}
.bouton.contour:hover{background:var(--encre);color:#fff}
.texte{color:var(--texte)}
.arche{border-radius:var(--arche)}

/* Bandeau */
.bandeau{background:var(--encre);color:var(--ivoire);text-align:center;padding:11px 20px;font-size:12px;letter-spacing:.24em;text-transform:uppercase}

/* En-tête */
.entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 40px;padding-top:22px;padding-bottom:22px}
.entete .logo img{height:76px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 34px;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.nav a{text-decoration:none;padding:14px 0}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:8px}
.menu-mobile{display:none}
@media (max-width:900px){
  .entete{flex-wrap:nowrap}
  .entete .logo img{height:60px}
  .nav,.entete>.bouton{display:none}
  .menu-mobile{display:block;position:relative}
  .menu-mobile summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--encre);border-radius:999px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
  .menu-mobile summary::-webkit-details-marker{display:none}
  .menu-mobile[open] .panneau{display:flex}
  .menu-mobile .panneau{display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:20;flex-direction:column;min-width:240px;padding:12px 24px 20px;background:var(--creme);border:1px solid var(--filet);box-shadow:0 30px 60px -30px rgba(53,48,42,.4)}
  .menu-mobile .panneau a{padding:13px 0;text-decoration:none;border-bottom:1px solid var(--filet);font-size:13px;letter-spacing:.18em;text-transform:uppercase}
  .menu-mobile .panneau .bouton{margin-top:16px;border:0;color:#fff;min-height:52px}
}

/* Accueil */
.hero{display:flex;flex-wrap:wrap;align-items:flex-end;gap:48px 80px;padding-top:clamp(24px,4vw,56px)}
.hero-texte{flex:1.25 1 440px;min-width:0;display:flex;flex-direction:column;gap:32px;padding-bottom:clamp(32px,6vw,96px)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,8.2vw,124px);line-height:.96;letter-spacing:-.015em}
.hero .chapo{max-width:470px;font-size:19px;color:var(--texte)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px}
.hero-image{flex:1 1 340px;min-width:0;max-width:500px;margin:0 auto}
.hero-image img{width:100%;height:clamp(460px,56vw,720px);object-fit:cover;border-radius:var(--arche)}
@media (max-width:600px){.hero-texte{flex-basis:100%}.hero-image img{height:auto;aspect-ratio:3/4}}

/* Atouts */
.atouts{background:var(--creme);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.atouts ul{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.atouts li{padding:30px 16px;text-align:center;display:flex;flex-direction:column;gap:2px}
.atouts strong{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;line-height:1.2}
.atouts span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--doux)}

/* Citation */
.citation{max-width:1040px;margin:0 auto;padding:clamp(88px,12vw,176px) var(--marge);text-align:center;display:flex;flex-direction:column;align-items:center;gap:36px}
.citation::before{content:"";width:1px;height:72px;background:var(--terracotta-fonce)}
.citation p{font-family:var(--serif);font-size:clamp(30px,4.4vw,58px);line-height:1.18;letter-spacing:-.005em}

/* Sections génériques */
.section{padding-top:clamp(72px,10vw,144px);padding-bottom:clamp(72px,10vw,144px)}
.section.suite{padding-top:0}
.fond-creme{background:var(--creme)}
.entete-section{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 64px;margin-bottom:clamp(40px,5vw,72px)}
.entete-section>div{display:flex;flex-direction:column;gap:22px;max-width:760px}

/* Services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:56px 36px}
.service{text-decoration:none;display:flex;flex-direction:column;gap:22px}
.service img{width:100%;aspect-ratio:551/700;object-fit:cover}
.service .corps{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid #CBBFB1}
.service .num{font-size:12px;letter-spacing:.26em;color:var(--terracotta-fonce)}
.service h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05}
.service p{font-size:15px;color:var(--discret)}
.forme-1{border-radius:160px}.forme-2{border-radius:var(--arche)}.forme-3{border-radius:28px;object-position:50% 15%}.forme-4{border-radius:0 240px 0 240px}

/* La maison */
.maison{display:flex;flex-wrap:wrap;align-items:center;gap:56px clamp(48px,8vw,128px)}
.maison .portrait{flex:1 1 340px;min-width:0;max-width:480px;margin:0 auto}
.maison .portrait img{width:100%;height:auto;aspect-ratio:1451/1700;object-fit:cover;border-radius:var(--arche)}
.maison .contenu{flex:1.2 1 420px;min-width:0;display:flex;flex-direction:column;gap:26px}
.maison h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.2vw,76px);line-height:1;letter-spacing:-.01em}
.signature{display:flex;flex-direction:column;gap:6px}
.signature strong{font-family:var(--serif);font-style:italic;font-weight:400;font-size:34px;line-height:1.1;color:var(--terracotta)}
.signature span{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--doux)}

/* Grilles photos */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.grille img{width:100%;aspect-ratio:3/4;object-fit:cover}
.grille-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}

/* Visite */
.visite{background:var(--creme);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);overflow:hidden}
.visite .intro{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;max-width:640px;margin:0 auto clamp(40px,5vw,64px)}
.visite .scene{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,3vw,48px)}
.visite .cote{flex:1 1 220px;max-width:320px;min-width:0;overflow:hidden;border-radius:var(--arche)}
.visite .cote img{width:100%;aspect-ratio:3/4;object-fit:cover}
.visite .cote.bas{align-self:flex-end}.visite .cote.haut{align-self:flex-start}
.visite figure{flex:0 1 380px;max-width:380px;width:100%;display:flex;flex-direction:column;gap:22px}
.halo{padding:12px;background:#fff;border-radius:var(--arche);box-shadow:0 0 0 1px var(--or),0 40px 90px -30px rgba(163,92,58,.55)}
.scene-video{position:relative;overflow:hidden;border-radius:var(--arche)}
.scene-video video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--sable)}
.porte{position:absolute;top:0;bottom:0;width:50%;background:var(--vert-porte);z-index:2;pointer-events:none;transition:transform 2.6s cubic-bezier(.75,0,.2,1) .6s}
.porte::before{content:"";position:absolute;inset:22px 16px;border:1px solid rgba(201,164,92,.45)}
.porte::after{content:"";position:absolute;top:56%;width:9px;height:9px;border-radius:50%;background:var(--or)}
.porte.g{left:0;border-right:1px solid #1E2723}.porte.g::after{right:14px}
.porte.d{right:0;border-left:1px solid #1E2723}.porte.d::after{left:14px}
.visite.ouverte .porte.g{transform:translateX(-102%)}
.visite.ouverte .porte.d{transform:translateX(102%)}
.apparait{opacity:0;transition:opacity 1.6s ease 2.6s}
.visite.ouverte .apparait{opacity:1}
.visite.ouverte .halo{animation:respire 6s ease-in-out 3.4s infinite alternate}
@keyframes respire{to{box-shadow:0 0 0 1px var(--or),0 40px 110px -20px rgba(163,92,58,.75)}}
.visite.ouverte .cote img{animation:zoom 20s ease-in-out infinite alternate}
@keyframes zoom{to{transform:scale(1.08)}}
.visite figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px}
.visite figcaption span{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--doux)}
.son{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--encre);border-radius:999px;background:transparent;color:var(--encre);font-family:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.son:hover{background:var(--encre);color:#fff}
.no-js .porte{display:none}.no-js .apparait{opacity:1}
@media (prefers-reduced-motion:reduce){.porte{display:none}.apparait{opacity:1;transition:none}.visite.ouverte .halo,.visite.ouverte .cote img{animation:none}html{scroll-behavior:auto}}

/* Lignes (événement, prothèse) */
.ligne{text-decoration:none;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 48px;padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--filet-fort)}
.ligne.centre{align-items:center;border-bottom:1px solid var(--filet-fort)}
.ligne h2{flex:1 1 320px;font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.8vw,68px);line-height:1}
.ligne p{flex:1 1 280px;max-width:420px;color:var(--texte)}
.ligne .lien{text-decoration:underline}
.ligne .vignette{width:132px;height:132px;object-fit:cover;object-position:50% 25%;border-radius:50%}
.espace-bas{padding-bottom:clamp(48px,7vw,96px)}

/* Avis */
.avis-google{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;padding:clamp(32px,4vw,48px) 0;border-top:1px solid var(--filet-fort);border-bottom:1px solid var(--filet-fort)}
.avis-google p{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.15;max-width:640px}

/* Seconde adresse */
.chalonnes{display:flex;flex-wrap:wrap;align-items:center;gap:48px clamp(48px,7vw,104px)}
.chalonnes .photo{flex:1.3 1 420px;min-width:0}
.chalonnes .photo img{width:100%;height:clamp(300px,36vw,480px);object-fit:cover}
.chalonnes .contenu{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.chalonnes h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,58px);line-height:1.02}

/* Contact */
.contact{background:var(--terracotta);color:#fff}
.contact a{color:#fff}
.contact .haut{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 64px;margin-bottom:clamp(48px,6vw,80px)}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(48px,7.4vw,112px);line-height:.96;letter-spacing:-.015em}
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px 48px;padding-top:36px;border-top:1px solid #fff}
.infos h3{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;margin-bottom:8px}
.infos .valeur{font-family:var(--serif);font-size:27px;line-height:1.25;font-style:normal}
.infos .petit{display:inline-block;padding:8px 0;font-family:var(--sans);font-size:14px}

/* Pied de page */
.pied{background:var(--encre);color:#D8CFC4}
.pied .wrap{padding-top:clamp(56px,8vw,104px);padding-bottom:32px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.pied .logo-pied{height:150px;width:auto}
.pied .devise{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.8vw,34px);line-height:1.2;color:var(--ivoire)}
.reseaux{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px}
.reseaux a{display:inline-flex;align-items:center;min-height:46px;padding:0 26px;border-radius:999px;border:1px solid var(--ivoire);color:var(--ivoire);text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.reseaux a:hover{background:var(--ivoire);color:var(--encre)}
.nav-pied{display:flex;flex-wrap:wrap;justify-content:center;gap:0 32px;font-family:var(--serif);font-size:22px}
.nav-pied a{color:var(--ivoire);text-decoration:none;padding:10px 0}
.nav-pied a:hover{color:#fff;text-decoration:underline}
.mentions{width:100%;padding-top:24px;border-top:1px solid var(--discret);font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* Page tarifs */
.tete-page{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px 80px;padding-top:clamp(40px,6vw,96px);padding-bottom:clamp(48px,7vw,104px)}
.tete-page>div{flex:1.4 1 420px;min-width:0;display:flex;flex-direction:column;gap:28px}
.tete-page h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,7.6vw,116px);line-height:.96;letter-spacing:-.015em}
.tete-page>p{flex:1 1 320px;max-width:440px;color:var(--texte)}
.categorie{display:flex;flex-wrap:wrap;gap:24px clamp(40px,7vw,112px);padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--filet-fort);scroll-margin-top:20px}
.categorie .titre-cat{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:12px}
.categorie .titre-cat span{font-size:12px;letter-spacing:.26em;color:var(--terracotta-fonce)}
.categorie h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.8vw,52px);line-height:1.02}
.categorie .titre-cat p{max-width:340px;font-size:15px;color:var(--discret)}
.categorie dl{flex:2 1 460px;min-width:0;margin:0}
.prestation{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:17px 0}
.prestation+.prestation{border-top:1px solid var(--filet)}
.prestation dt{display:flex;flex-direction:column;gap:2px;min-width:0}
.prestation dt small{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--doux)}
.prestation dd{margin:0;font-family:var(--serif);font-size:28px;line-height:1;white-space:nowrap}

/* Pages de texte */
.texte-page{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,96px) var(--marge) clamp(72px,10vw,136px)}
.texte-page h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,80px);line-height:1;margin-bottom:40px}
.texte-page h2{font-family:var(--serif);font-weight:400;font-size:32px;margin:40px 0 12px}
.texte-page p{color:var(--texte);margin-bottom:12px}