/* Franck de Nice V3 « Le miroir et le nuancier ». États de départ des effets seulement sous html.js + mouvement autorisé. */

/* 1. Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
table{border-collapse:collapse;width:100%}
address{font-style:normal}
[id]{scroll-margin-top:4.5rem}

/* 2. Jetons (direction §2 et §3) */
:root{
  --nacre:#FBF8F3;--blanc:#FFFFFF;--poudre:#F4E6E1;--poudre-2:#E6CFC8;
  --encre:#16130F;--encre-3:#221D18;--texte:#3F3933;--gris:#6F675E;
  --laiton:#B8944A;--laiton-paroi:#D9BE7C;--laiton-fonce:#7A5F1E;--laiton-clair:#DCC388;
  --sur-encre:#F3ECE0;--sur-encre-2:#E9E1D4;--bord-encre:#6E6457;--bord-clair:#CBBFAF;
  --filet:#E3DACD;--filet-sombre:#3A342D;--erreur:#9B2C1F;
  --u:clamp(.03472rem,.01806rem + .05556vw,.0625rem);
  --f-titre:"Bodoni Moda","Bodoni 72","Didot",Georgia,serif;
  --f-texte:"Host Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
  --t-0:clamp(1rem,.979rem + .093vw,1.0625rem);
  --t-1:clamp(1.125rem,1.083rem + .185vw,1.25rem);
  --t-2:clamp(1.25rem,1.167rem + .37vw,1.5rem);
  --t-3:clamp(1.875rem,1.75rem + .556vw,2.25rem);
  --t-4:clamp(2.75rem,2.583rem + .741vw,3.25rem);
  --t-5:clamp(2.75rem,2.167rem + 2.593vw,4.5rem);
  --t-6:clamp(2.75rem,1.833rem + 4.074vw,5.5rem);
  --t-7:clamp(4rem,2.167rem + 8.148vw,9.5rem);
  --t-9:clamp(7.5rem,4.583rem + 12.963vw,16.25rem);
  --g:clamp(1.25rem,.833rem + 1.852vw,3rem);
  --sec:clamp(4.5rem,3rem + 6.667vw,9rem);
  --max:84rem;
  --ease:cubic-bezier(.22,.7,.18,1);
  --ease-io:cubic-bezier(.65,0,.25,1);
}

/* 3. Base */
body{font-family:var(--f-texte);font-size:var(--t-1);line-height:1.6;color:var(--texte);background:var(--nacre);overflow-x:clip}
h1,h2,h3{color:var(--encre);font-weight:400;text-wrap:balance}
h1,h2,.serif{font-family:var(--f-titre);font-optical-sizing:auto;letter-spacing:-.01em}
h1{font-size:var(--t-4);line-height:1.08}
h2{font-size:var(--t-5);line-height:1.02}
h3{font-family:var(--f-texte);font-size:var(--t-2);font-weight:500;line-height:1.3;letter-spacing:-.005em}
h1 .l,h2 .l{display:block;padding:.24em .1em .08em 0;margin:-.24em -.1em -.08em 0}
/* Masques élargis (jambes g, p, q, j ; italique) ; .l+.l garde l'interligne */
h2 .l{padding:.24em .1em .18em .08em;margin:-.24em -.1em -.18em -.08em}
h2 .l+.l{margin-top:-.34em}
.reserver__titre .l{padding:.24em .1em .26em .14em;margin:-.24em -.1em -.26em -.14em}
.reserver__titre .l+.l{margin-top:-.42em}
.l>span{display:block}
p,li,dd{text-wrap:pretty}
strong,b{font-weight:500;color:var(--encre)}
a{text-decoration-thickness:1px;text-underline-offset:.24em}
:focus-visible{outline:2px solid var(--laiton-fonce);outline-offset:3px}
::selection{background:var(--poudre-2);color:var(--encre)}
.nw{white-space:nowrap}
h1 .kw,h2 .kw,.avis__une .kw{margin-right:-.07em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.conteneur{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}
.section{padding-block:var(--sec)}
.section--serree{padding-block:clamp(2.5rem,2rem + 2vw,4rem)}
.blanc{background:var(--blanc)}
.kicker{display:flex;align-items:center;gap:.75rem;font-size:.9375rem;font-weight:500;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton-fonce);margin-bottom:1.25rem}
.kicker::before{content:"";flex:none;width:1.75rem;height:1px;background:var(--laiton)}
.note{font-size:var(--t-0);color:var(--texte);line-height:1.55}
.legende{margin-top:1.4rem;font-size:var(--t-0);color:var(--texte);line-height:1.5}
figcaption{text-wrap:balance}
.skip{position:absolute;left:1rem;top:-4rem;z-index:10;background:var(--encre);color:var(--nacre);padding:.75rem 1rem}
.skip:focus{top:1rem}

/* 4. Composants */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:3.25rem;padding:.8rem 1.5rem;background:var(--encre);color:var(--nacre);border:1px solid var(--encre);font-size:.9375rem;font-weight:500;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.btn--ligne{background:transparent;color:var(--encre)}
.ico{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.lien{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;font-weight:500;font-size:var(--t-1);color:var(--encre);text-decoration:underline;text-decoration-color:var(--laiton);text-underline-offset:.35em}

/* Support des mèches : laiton rendu en images (tringle : bouts gardés, milieu étiré ; pas d'image-set ici, WebKit le découpe mal). --u = 1/360 de la hauteur d'une mèche du nuancier */
.tringle{display:block;height:calc(34*var(--u));border:solid #0000;border-width:0 calc(48*var(--u));border-image:url(../img/tringle-2x.webp) 0 42.857% fill}
/* Écran 1x : l'image 1x (Chromium laisse une marche à la jonction bout / milieu quand il réduit l'image de plus de moitié) */
@media (max-resolution:1.4dppx){.tringle{border-image-source:url(../img/tringle-1x.webp)}}
.embout{position:absolute;top:calc(-30*var(--u));left:50%;width:calc(86*var(--u));max-width:none;height:calc(54*var(--u));margin-left:calc(-43*var(--u))}
.jauge,.regle{--u:.046rem}

/* Miroir dessiné */
.miroir{position:relative;aspect-ratio:1}
.miroir img{width:100%;height:100%;object-fit:cover;clip-path:circle(45.6% at 48.2% 50%)}
.miroir__cadre{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.miroir__face{fill:none;stroke:var(--laiton);stroke-width:2.6}
.miroir__paroi{fill:var(--laiton-paroi)}
.miroir__fil{fill:none;stroke:var(--laiton-fonce);stroke-width:.35}
.miroir--vide .miroir__verre{position:absolute;inset:0;display:grid;place-items:center;background:var(--poudre);clip-path:circle(45.6% at 48.2% 50%);font-family:var(--f-titre);font-size:2.75rem;line-height:1;color:var(--encre)}

/* Cadre laiton décalé */
.cadre__photo{position:relative;margin:0 1rem 1rem 0}
.cadre .devoile{position:relative;z-index:1;overflow:hidden}
.cadre img{width:100%;aspect-ratio:3/2;object-fit:cover}
.cadre--43 img{aspect-ratio:4/3}
.cadre--45 img{aspect-ratio:4/5}
.cadre__trait{position:absolute;z-index:0;top:1rem;left:1rem;width:100%;height:100%;overflow:visible;pointer-events:none}
.cadre__trait rect{width:100%;height:100%;fill:none;stroke:var(--laiton);stroke-width:1}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 3vw,4rem);margin-top:clamp(2.5rem,2rem + 2vw,4rem)}

/* Tête de section 8 / 4 */
.tete{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem var(--g);align-items:end;margin-bottom:clamp(2.5rem,1.5rem + 4vw,5rem)}
.tete__titre{grid-column:1/span 8}
.tete__texte{grid-column:9/-1;display:grid;gap:1.1rem;justify-items:start}
/* Têtes variées : avis centrés (filet de part et d'autre du surtitre), infos sur toute la largeur */
.tete--centre,.tete--large{grid-template-columns:minmax(0,1fr)}
.tete--centre .tete__titre,.tete--large .tete__titre{grid-column:1/-1}
.tete--centre{text-align:center}
.tete--centre .kicker{justify-content:center}
.tete--centre .kicker::after{content:"";flex:none;width:1.75rem;height:1px;background:var(--laiton)}

/* Mèches : vrais cheveux (images transparentes prises sur les photos des réalisations) */
.mp{display:contents}

/* 5. En-tête (dans le flux) */
.entete{position:relative;z-index:5;background:var(--nacre);border-bottom:1px solid var(--filet)}
.entete__barre{display:flex;flex-wrap:wrap;align-items:center;column-gap:2rem;min-height:5.25rem}
.logo{display:flex;align-items:center;gap:.85rem;min-height:3rem;text-decoration:none;color:var(--encre);margin-right:auto}
.logo__signe{width:2.9rem;height:auto;flex:none}
.logo__nom{display:block;font-weight:500;font-size:1.0625rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.logo__sous{display:block;font-size:.9375rem;letter-spacing:.04em;color:var(--texte);line-height:1.3}
.nav__liste{display:flex;gap:1.75rem}
.nav__lien{position:relative;display:inline-block;min-width:44px;text-align:center;padding-block:.6rem;font-size:1.0625rem;color:var(--encre);text-decoration:none}
/* Soulignement laiton : un trait en transform (comme .ligne::after), sa transition est au §8 */
.nav__lien::after{content:"";position:absolute;left:0;right:0;bottom:.35rem;height:1px;background:var(--laiton);transform:scaleX(0);transform-origin:left}
.nav__lien[aria-current]::after{transform:none}
.nav__bas{display:none}
.entete__actions,.entete__mobile{display:flex;align-items:center;gap:1.5rem}
.entete__mobile{display:none}
.entete__tel,.nav__tel{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;font-weight:500;font-size:1.0625rem;color:var(--encre);text-decoration:none;font-variant-numeric:tabular-nums}
.entete__cta{min-height:3rem;padding:.65rem 1.25rem}
.menu-btn{display:none;align-items:center;gap:.6rem;min-height:2.75rem;min-width:2.75rem;padding:0 .25rem;background:none;border:0;font-weight:500;font-size:1rem;cursor:pointer;color:var(--encre)}
.menu-btn__traits{position:relative;width:1.4rem;height:1px;background:currentColor}
.menu-btn__traits::before,.menu-btn__traits::after{content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor}
.menu-btn__traits::before{top:-6px}.menu-btn__traits::after{top:6px}
.menu-btn[aria-expanded="true"] .menu-btn__traits{background:transparent}
.menu-btn[aria-expanded="true"] .menu-btn__traits::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__traits::after{transform:translateY(-6px) rotate(-45deg)}

/* 6. Accueil : héros */
.hero{position:relative;container-type:inline-size;padding-top:clamp(.5rem,.25rem + 1vw,1.25rem)}
.hero__nom{position:relative;z-index:2;font-family:var(--f-titre);font-weight:400;color:var(--encre);font-size:min(calc((min(100cqi,var(--max)) - 2 * var(--g)) / 6.8),13.4rem);line-height:.86;letter-spacing:-.025em;white-space:nowrap;margin-bottom:-.22em;text-align:center}
.hero__nom .mot{display:inline-block;overflow:clip;overflow-clip-margin:.12em;padding:0 .04em .06em;vertical-align:top}
.hero__nom .mot+.mot{margin-left:.2em}
.hero__nom .le{display:inline-block}
.hero__nom em{font-style:italic;letter-spacing:-.01em}
/* --m : marge de départ de la photo = bord du conteneur (le cartel et le H1 restent alignés) ; elle tombe à 0 en défilant */
.hero__cadre{--hp:0;--m:max(var(--g),(100cqi - var(--max)) / 2 + var(--g));position:relative;clip-path:inset(0 calc(var(--m) * (1 - var(--hp))))}
.hero__photo{--cx:50%;--cy:36%;--cr:10.8cqi;--ar:11cqi;position:relative;container-type:inline-size;aspect-ratio:2.8;overflow:hidden;background:var(--nacre)}
.hero__photo picture,.hero__photo img{width:100%;height:100%}
.hero__photo img{object-fit:cover;object-position:50% 38%;transform:scale(calc(1.06 - .06 * var(--hp)));transform-origin:50% 40%}
.hero__anneau{display:none;position:absolute;left:calc(var(--cx) - var(--ar));top:calc(var(--cy) - var(--ar));width:calc(2 * var(--ar));height:calc(2 * var(--ar));pointer-events:none;overflow:visible}
.hero__anneau circle{fill:none;stroke:var(--laiton);stroke-width:.7}
/* Le texte du cartel ne bouge pas (bord du conteneur) ; son fond part jusqu'au bord de l'écran et c'est le masque de la photo qui le découvre */
.hero__cartel{position:absolute;z-index:2;left:var(--m);bottom:0;padding:.6rem 1.1rem .6rem 0;font-size:.9375rem;letter-spacing:.04em;color:var(--texte)}
.hero__cartel::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;left:calc(-1 * var(--m));background:var(--nacre)}
.hero__cartel b{color:var(--encre)}
.hero__bas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem var(--g);padding-top:clamp(1.25rem,.75rem + 1.2vw,2rem);align-items:start}
.hero__gauche{grid-column:1/span 8;display:grid;gap:1.1rem}
.hero__droite{grid-column:9/-1;display:grid;gap:1.25rem;justify-items:start;padding-top:.35rem}
.hero__lede{font-size:var(--t-1);line-height:1.55;max-width:36em}
.hero__note{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .75rem;font-size:var(--t-0);color:var(--texte)}
.hero__note .serif{font-size:2.5rem;line-height:1;color:var(--encre)}
.reperes{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--filet);margin-top:clamp(3rem,2rem + 4vw,5rem)}
.reperes li{display:grid;gap:.35rem;align-content:start;padding:1.75rem 1.5rem 1.9rem;border-left:1px solid var(--filet)}
.reperes li:first-child{border-left:0;padding-left:0}
.reperes .serif{font-size:clamp(2.5rem,2.2rem + 1.2vw,3.25rem);line-height:1;color:var(--encre)}
.reperes span:last-child{font-size:var(--t-0);line-height:1.5;color:var(--texte);max-width:17em}

/* Nuancier et tirages */
.reals__haut{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem var(--g);align-items:end}
.reals__texte{grid-column:1/span 5;display:grid;gap:1.25rem;align-content:end}
.reals__texte h2{margin-top:-.25rem}
.reals__texte .legende{margin-top:.75rem}
.nuancier{grid-column:6/-1;padding-top:.25rem}
.nuancier__liste{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:clamp(.125rem,1vw,1rem);margin-top:calc(-34*var(--u))}
.nuancier--4 .nuancier__liste{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:2rem}
.nuancier--6 .nuancier__liste{column-gap:0}
.nuancier--6 .meche__nom{font-size:1rem}
.meche{display:flex;flex-direction:column;align-items:center;padding-top:calc(17.63*var(--u));color:var(--encre);text-decoration:none;outline-offset:4px}
.meche__pend,.meche__corps{display:block;transform-origin:50% -1.6%}
.meche__corps{position:relative;height:calc(360*var(--u));aspect-ratio:100/420}
.meche__img{position:absolute;inset:0;width:100%;height:100%}
.meche__corps .embout{top:calc(-16*var(--u))}
.meche__nom{margin-top:.75rem;max-width:100%;font-weight:500;font-size:1.0625rem;line-height:1.3;text-align:center;text-wrap:balance;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em}
.meche:focus-visible .meche__nom{text-decoration-color:var(--laiton)}
.tirages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 2rem;margin-top:clamp(3rem,2rem + 3vw,5rem)}
.tirages--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.nuancier--4+.tirages{margin-top:2rem}
.tirage figure{display:flex;flex-direction:column;height:100%}
.tirage__img{position:relative;overflow:hidden;aspect-ratio:1;background:var(--poudre)}
.tirage__img img{width:100%;height:100%;object-fit:cover}
.tirage__nb{position:absolute;inset:0;display:none;pointer-events:none}
.tirage__nb img{filter:grayscale(1) contrast(1.05)}
.tirage__cartel{flex:1;display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.9rem 0;border-bottom:1px solid var(--filet)}
.tirage__nom{font-weight:500;font-size:1.125rem;line-height:1.3;color:var(--encre)}
.teinte{display:flex;flex:none;padding-left:4px}
.teinte i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--blanc);margin-left:-4px}
.tirage:target .tirage__img,.tirage.is-cible .tirage__img{outline:3px solid var(--laiton);outline-offset:6px}
.reals__pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;margin-top:clamp(2.5rem,2rem + 2vw,4rem);padding-top:1.75rem;border-top:1px solid var(--filet)}
.reals__pied .note{max-width:36em}

/* La carte */
.carte__liste{border-top:1px solid var(--encre)}
.ligne{position:relative;border-bottom:1px solid var(--filet)}
/* last baseline : avec baseline, WebKit remontait un titre sur 2 lignes dans la ligne précédente */
.ligne a{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;gap:.5rem 1.5rem;align-items:last baseline;padding:clamp(1.4rem,1rem + 1.6vw,2.4rem) 0;color:inherit;text-decoration:none}
.ligne__num{font-size:.9375rem;font-weight:500;letter-spacing:.08em;color:var(--laiton-fonce);font-variant-numeric:tabular-nums}
.ligne__titre{font-family:var(--f-titre);font-weight:400;font-size:var(--t-6);line-height:1.02;letter-spacing:-.02em;color:var(--encre)}
.ligne__titre>span{display:inline-block}
.ligne:nth-child(even) .ligne__titre{font-style:italic}
.ligne__desc{grid-column:2;max-width:36em;margin-top:.4rem;font-size:var(--t-1);color:var(--texte)}
.ligne__prix{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:.6rem;font-size:var(--t-2);font-weight:500;color:var(--encre);white-space:nowrap;font-variant-numeric:tabular-nums}
.ligne__prix .ico{width:1.3rem;height:1.3rem}
.ligne::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--laiton);transform:scaleX(0);transform-origin:left}
.ligne:focus-within::after{transform:scaleX(1)}
.carte__liste--reduite .ligne__titre{font-size:clamp(2.75rem,2.25rem + 1.5vw,3.5rem)}

/* Le lieu */
.lieu{position:relative;background:var(--poudre);padding-block:clamp(.5rem,2vw,2rem) var(--sec)}
.lieu__arche{position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:clamp(4rem,2rem + 7vw,9rem);background:var(--poudre);clip-path:ellipse(64% 100% at 50% 100%);transform-origin:50% 100%}
.marques{margin-top:clamp(3.5rem,2.5rem + 4vw,6rem);padding-top:clamp(2rem,1.5rem + 2vw,3rem);border-top:1px solid var(--poudre-2)}
.marques--seules{margin-top:0;border-top:0;padding-top:0}
.marques__titre{font-size:var(--t-4);line-height:1.08;margin-bottom:clamp(1.5rem,1rem + 2vw,2.5rem)}
.marques__liste{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--poudre-2)}
.marques--seules .marques__liste{border-color:var(--filet)}
.marques__liste li{display:grid;gap:.4rem;align-content:start;padding:1.4rem 1.25rem 0 0}
.marques__liste li+li{padding-left:1.25rem;border-left:1px solid var(--poudre-2)}
.marques__nom{font-size:1.0625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--encre)}
.marques__role{font-size:var(--t-0);line-height:1.5;color:var(--texte)}

/* Avis */
.avis{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem var(--g);align-items:start}
.avis__note{grid-column:1/span 5}
.avis__chiffre{display:flex;align-items:flex-end;gap:.08em;margin-bottom:.14em;font-family:var(--f-titre);font-size:var(--t-9);line-height:.8;letter-spacing:-.04em;color:var(--encre)}
.avis__chiffre small{font-size:max(2.5rem,.26em);line-height:1;letter-spacing:0;color:var(--laiton-fonce);padding-bottom:.18em}
.avis__source{max-width:24em}
.avis__liens{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem;margin-top:1rem}
.avis__droite{grid-column:7/-1;padding-top:clamp(0rem,-1rem + 4vw,3rem)}
.avis__une blockquote p{font-family:var(--f-titre);font-weight:500;font-size:var(--t-3);line-height:1.32;letter-spacing:-.005em;color:var(--encre)}
.avis__une--longue blockquote p{font-size:1.875rem}
.auteur{margin-top:1.25rem;font-size:var(--t-0);color:var(--texte)}
.auteur__date{color:var(--gris)}
.avis__suite{margin-top:1.75rem;max-width:34em}
.avis__liste{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem var(--g);margin-top:clamp(1rem,3vw,3rem)}
.avis__liste--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.avis__cta{grid-column:1/-1;margin-top:.5rem}
.avis__liste li{border-top:1px solid var(--filet);padding-top:1.4rem}
.avis__liste blockquote p{font-size:var(--t-2);line-height:1.45;color:var(--encre)}
/* Avis courts : rangées partagées, signatures alignées */
@media (min-width:48em){
  .avis__liste{grid-template-rows:auto auto}
  .avis__liste>li,.avis__court{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:1.25rem}
  .avis__court .auteur{margin-top:0}
}

/* Étapes */
.etapes{position:relative;padding-top:.5rem}
.etapes__tringle{margin:0 calc(.5rem - var(--g)) calc(2.5rem - 18*var(--u))}
.etapes__liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem var(--g)}
.etapes__liste li{position:relative;display:grid;gap:.75rem;align-content:start}
/* Rangées partagées : textes alignés */
@media (min-width:40em){
  .etapes__liste{grid-template-rows:auto auto auto}
  .etapes__liste>li{grid-row:span 3;grid-template-rows:subgrid;row-gap:.75rem}
}
.etapes__anneau{position:absolute;top:calc(-2.5rem - 16*var(--u));left:calc(1.9rem - 13*var(--u));width:calc(28*var(--u))}
.etapes__n{font-family:var(--f-titre);font-size:3.5rem;line-height:1;color:var(--laiton-fonce)}

/* Infos pratiques */
.infos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem var(--g);align-items:start}
.infos__photo{grid-column:1/span 5}
.infos__bloc{grid-column:span 4;display:grid;gap:1rem;align-content:start}
.infos__bloc+.infos__bloc{grid-column:span 3}
.infos--contact .infos__bloc{grid-column:span 4}
.horaires th,.horaires td{padding:.55rem 0;border-bottom:1px solid var(--filet);font-weight:400;text-align:left;white-space:nowrap;font-variant-numeric:tabular-nums}
.horaires th{color:var(--encre);padding-right:1rem}
.horaires td{text-align:right}
.horaires tr.auj th,.horaires tr.auj td{color:var(--encre);font-weight:500}
.horaires tr.auj th::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin:0 .55rem .12rem 0;border-radius:50%;background:var(--laiton)}
.coord{display:grid;gap:1.1rem}
.coord dt{font-size:.9375rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--laiton-fonce)}
.coord dd{color:var(--encre)}
.coord dd a{display:inline-flex;align-items:center;min-height:44px}
.grand-tel{font-size:var(--t-2);font-weight:500;color:var(--encre);white-space:nowrap}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem var(--g);align-items:start}
/* 5 colonnes : « vos questions » tient sur sa ligne */
.faq__tete{grid-column:1/span 5}
.faq__liste{grid-column:6/-1;border-top:1px solid var(--encre)}
.faq__item{border-bottom:1px solid var(--filet)}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.4rem 0;cursor:pointer;list-style:none;font-size:var(--t-2);font-weight:500;line-height:1.35;color:var(--encre)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__plus{position:relative;flex:none;width:2.5rem;height:2.5rem;border:1px solid var(--laiton);border-radius:50%}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;left:50%;top:50%;width:.85rem;height:1px;background:var(--encre);transform:translate(-50%,-50%)}
.faq__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__plus::after{transform:translate(-50%,-50%)}
.faq__corps p{padding:0 3.5rem 1.6rem 0;max-width:40em}

/* Réserver */
.reserver{position:relative;background:var(--encre);color:var(--sur-encre-2);padding-bottom:clamp(3rem,2rem + 3vw,5rem)}
.reserver .kicker{color:var(--laiton-clair)}
.reserver :focus-visible,.pied :focus-visible{outline-color:var(--laiton-clair)}
.frange{position:relative;height:clamp(110px,80px + 8vw,190px);margin-bottom:clamp(1.5rem,1rem + 2vw,3rem)}
.frange__tringle{position:absolute;inset:calc(-12*var(--u)) 0 auto;z-index:1;border-width:0;border-image-source:url(../img/tringle-nuit-2x.webp)}
.frange__svg{width:100%;height:100%}
.frange__fils path{fill:none;stroke-width:2.6;stroke-linecap:round}
.reserver__haut{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2rem var(--g);align-items:end}
.reserver__gauche{grid-column:1/span 7}
.reserver__titre{font-size:var(--t-7);line-height:.92;letter-spacing:-.03em;color:var(--sur-encre)}
.reserver__titre--accent{margin-top:.2em}
.reserver__titre em{color:var(--laiton-clair)}
.reserver__texte{grid-column:8/-1;font-size:var(--t-1);color:var(--sur-encre-2)}
.tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,.5rem + 1.5vw,2rem);margin-top:clamp(2.5rem,2rem + 2vw,4rem)}
/* 3 tuiles : rangées partagées, textes alignés */
.tuiles--3{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;margin-top:0}
.tuile{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-content:space-between;min-height:clamp(13rem,10rem + 8vw,18rem);padding:clamp(1.5rem,1rem + 2vw,2.75rem);border:1px solid var(--bord-encre);color:var(--sur-encre-2);text-decoration:none}
.tuile__sur{font-size:.9375rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton-clair)}
.tuile__titre{font-family:var(--f-titre);font-size:clamp(2.75rem,2rem + 2.2vw,4.25rem);line-height:.98;letter-spacing:-.02em;color:var(--sur-encre);text-wrap:balance}
.tuile__titre em{color:var(--laiton-clair)}
.tuile__bas{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem}
.tuile__aide{min-width:0;font-size:var(--t-1);line-height:1.5;max-width:26em}
.tuile__fl{flex:none;display:grid;place-items:center;width:3.25rem;height:3.25rem;border:1px solid var(--laiton);border-radius:50%}
.tuile__fl .ico{width:1.2rem;height:1.2rem;stroke:var(--laiton-clair)}
.tuile--clair{border-color:var(--bord-clair);color:var(--texte);background:var(--nacre)}
.tuile--clair .tuile__sur{color:var(--laiton-fonce)}
.tuile--clair .tuile__titre,.tuile--clair .tuile__titre em{color:var(--encre)}
.tuile--clair .tuile__fl .ico{stroke:var(--laiton-fonce)}
.tuiles--3 .tuile{grid-row:span 3;grid-template-rows:subgrid;align-content:start;gap:1.25rem}
.tuiles--3 .tuile__bas{display:block}
.tuiles--3 .tuile__aide{display:block;min-height:3.25rem;padding-right:4rem}
.tuiles--3 .tuile__fl{position:absolute;right:clamp(1.5rem,1rem + 2vw,2.75rem);bottom:clamp(1.5rem,1rem + 2vw,2.75rem)}
.tuiles--3 .tuile__titre{font-size:clamp(2.75rem,1.5rem + 2vw,3.5rem)}
.tuiles--3 .tuile--tel .tuile__titre{font-size:clamp(2.5rem,1rem + 2vw,3.25rem);white-space:nowrap}
.barre{display:flex;flex-wrap:wrap;margin-top:2rem;border-block:1px solid var(--filet-sombre)}
.barre p{padding:1rem 1.5rem;font-size:var(--t-0);color:var(--sur-encre-2);border-left:1px solid var(--filet-sombre)}
.barre p:first-child{border-left:0;padding-left:0}

/* Pied */
.pied{background:var(--encre);color:var(--sur-encre-2);padding-block:clamp(3rem,2rem + 4vw,6rem) 2rem;font-size:1.0625rem;border-top:1px solid var(--filet-sombre)}
.pied__haut{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3rem var(--g);align-items:start}
.pied__mono{grid-column:1/span 5;color:var(--laiton)}
.pied__mono svg{width:min(100%,30rem);height:auto}
.pied__mono p{margin-top:2rem;max-width:24em;font-size:var(--t-1);color:var(--sur-encre-2)}
.pied__cols{grid-column:6/-1;display:grid;grid-template-columns:1.25fr 1.2fr .8fr;gap:2rem var(--g)}
.pied h2{margin-bottom:1.1rem;font-family:var(--f-texte);font-size:.9375rem;font-weight:500;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton-clair)}
.pied a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--sur-encre);text-decoration-color:var(--bord-encre)}
.pied__liste{display:grid;gap:0;justify-items:start;line-height:1.5}
.pied__liste>span{padding-bottom:.4rem}
.pied__heures{display:grid;grid-template-columns:auto auto;justify-content:start;gap:.35rem 1.25rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;margin-top:clamp(3rem,2rem + 3vw,5rem);padding-top:1.5rem;border-top:1px solid var(--filet-sombre);font-size:var(--t-0)}

/* 7. Pages intérieures */
.fil{padding-top:1rem;font-size:.9375rem;color:var(--texte)}
.fil ol{display:flex;flex-wrap:wrap;gap:0 .6rem}
.fil li+li::before{content:"/";margin-right:.6rem;color:var(--laiton)}
.fil a,.fil [aria-current]{display:inline-flex;align-items:center;min-height:2.75rem}
.page-hero{--ph-b:clamp(3.5rem,2rem + 4vw,6rem);padding-block:clamp(1rem,.5rem + 2vw,2.5rem) var(--ph-b)}
.page-hero__grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem var(--g);align-items:center}
.page-hero__texte{grid-column:1/span 7;display:grid;gap:1.4rem;justify-items:start}
.page-hero__texte .kicker{margin-bottom:-.25rem}
/* 44 px au téléphone, 61 px à 1280 */
.page-hero h1{font-size:clamp(2.75rem,1.9rem + 2.4vw,4rem)}
.page-hero h1 em{display:block}
.page-hero__lede{font-size:var(--t-2);line-height:1.5;max-width:34em}
.page-hero__miroir{grid-column:8/-1;justify-self:end;width:min(100%,27rem)}
.page-hero__miroir .legende{text-align:center}
/* Le grand miroir déborde de 60 px sous la bande nacre (légende comprise : 1 rem + une ligne) */
@media (min-width:40em){
  .page-hero__miroir{align-self:end;position:relative;z-index:1;margin-bottom:calc(-1 * var(--ph-b) - 3.75rem - 2.6rem)}
  .page-hero__miroir .legende{margin-top:1rem;line-height:1.5}
  .page-hero+.section{padding-top:max(var(--sec),9.5rem)}
}
.prose>*+*{margin-top:1.1rem}
.prose ul{padding-left:1.1rem;list-style:disc}
.prose li+li{margin-top:.6rem}
.prose li::marker{color:var(--laiton)}
.duo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem var(--g);align-items:center}
.duo__photo{grid-column:1/span 5}
.duo__texte{grid-column:7/-1}
.duo--inverse .duo__texte{grid-column:1/span 6;grid-row:1}
.duo--inverse .duo__photo{grid-column:8/-1}
.duo__texte [data-rv="monte"]>*+*{margin-top:1.1rem}
.colonnes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem var(--g)}
.colonnes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.colonne,.encart{display:grid;gap:.75rem;align-content:start;padding-top:1.4rem;border-top:1px solid var(--encre)}
.encarts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem var(--g)}
.encart .kicker{margin-bottom:0}
.encart--note{max-width:48rem;margin-top:clamp(2rem,1.5rem + 2vw,3rem);border-color:var(--filet)}
.durees{max-width:52rem;border-top:1px solid var(--encre)}
.durees th,.durees td{padding:.9rem 0;border-bottom:1px solid var(--filet);text-align:left;font-weight:500;color:var(--encre)}
.durees td{text-align:right;font-weight:400;color:var(--texte);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Jauge et prix */
.note--prix{max-width:48rem}
.tarifs__lien{margin-top:2rem}
.jauge{margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
.jauge+.jauge,.tarifs+.jauge{margin-top:clamp(3rem,2rem + 3vw,5rem)}
.jauge__table{table-layout:fixed;font-variant-numeric:tabular-nums lining-nums}
.jauge__coin{width:38%}
.jauge thead th{position:relative;vertical-align:top;padding:0 .5rem 1.25rem;text-align:center;font-weight:500}
.jauge thead th.jauge__coin{padding:0}
.jauge__tringle{position:absolute;inset:0 auto auto 0;width:calc(var(--n)*100%)}
.jauge__dessin{position:relative;display:flex;justify-content:center;height:calc(var(--hmax) * 1px + 4px);margin-top:calc(31.63*var(--u))}
.jauge__img{width:4.5rem;height:calc(var(--h) * 1px)}
.jauge__lib{display:block;margin-top:.5rem;font-size:.9375rem;font-weight:500;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--encre)}
.jauge tbody th,.jauge td{padding:1.1rem .5rem;border-top:1px solid var(--filet);text-align:left;font-weight:400;vertical-align:baseline}
.jauge tbody th{padding-left:0}
.jauge tbody tr:first-child>*,.jauge tbody .jauge__groupe th,.jauge tbody .jauge__seul>*{border-top-color:var(--encre)}
.jauge tbody .jauge__groupe th,.jauge tbody .jauge__seul>*{padding-top:1.75rem}
.jauge tbody .jauge__groupe+tr>*{border-top:0}
.jauge__nom{display:block;font-weight:500;font-size:1.25rem;line-height:1.3;color:var(--encre)}
.jauge__det{display:block;margin-top:.15rem;font-size:var(--t-0);line-height:1.45;color:var(--texte)}
.jauge td{text-align:center;font-weight:500;font-size:var(--t-2);color:var(--encre);white-space:nowrap}
.tarifs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:2.5rem var(--g);margin-top:clamp(2.5rem,2rem + 2vw,4rem)}
.tarif h3{padding-bottom:.75rem;border-bottom:1px solid var(--encre)}
.tarif__note{margin-top:.6rem;font-size:var(--t-0);color:var(--texte)}
.prix li{display:flex;align-items:baseline;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--filet)}
.prix__nom{flex:1 1 auto;min-width:0}
.prix__val{flex:none;font-weight:500;font-size:var(--t-2);color:var(--encre);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.prix__groupe{font-weight:500;color:var(--encre)}
.prix li.prix__tete{border-bottom:0;padding-bottom:0}
.prix li.prix__sous{padding-left:1rem}
/* Bloc en lignes seul dans sa rangée (Sunlight, Botox Profond) : pleine largeur, grammaire de la jauge */
.tarifs--seul{grid-template-columns:minmax(0,1fr);margin-top:0}
.tarif--large h3,.tarifs__ext h3{padding:1.75rem 0 0;border-top:1px solid var(--encre);border-bottom:0;font-size:1.25rem;line-height:1.3}
.tarif--large .tarif__note{margin-top:.15rem}
.tarif--large .prix{margin-top:1.1rem}
.tarif--large .prix li{padding:1.1rem 0;border-bottom:0;border-top:1px solid var(--filet)}
.tarif--large .prix li:first-child{border-top:0}
/* Extensions (Tarifs) : en-tête pleine largeur ; note et retrait à gauche, règle à droite */
.tarifs__ext{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--g);margin-top:clamp(3rem,2rem + 3vw,5rem)}
.tarifs__ext h3{grid-column:1/-1}
.tarifs__ext .tarif__note{grid-column:1/span 5;margin-top:.15rem}
.tarifs__retrait{grid-column:1/span 5;margin-top:1.25rem}
:is(.tarif--large,.tarifs__retrait) .prix__nom{font-weight:500;font-size:1.25rem;line-height:1.3;color:var(--encre)}
.tarifs__ext-regle{grid-column:7/-1;grid-row:2/span 2;padding-top:1.5rem}
.tarifs__ext .regle--reduite{margin-top:0;max-width:none}

/* Règle des extensions */
.ext{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;gap:1.25rem var(--g);align-items:start}
.ext__texte{grid-column:1/span 5;grid-row:1}
.ext__suite{grid-column:1/span 5;grid-row:2}
.ext__suite>*+*{margin-top:1.25rem}
.ext__texte h2,.duo__texte h2,.ecrire__texte h2{margin-bottom:1.5rem}
.ext__regle{grid-column:7/-1;grid-row:1/span 2;padding-top:1.5rem}
.regle{--H:27.5rem}
.regle--reduite{--H:18rem;max-width:40rem;margin-top:2rem}
.regle__zone{position:relative;padding-left:3.5rem}
.regle__echelle{position:absolute;left:0;right:0;top:0;height:var(--H)}
.regle__echelle>span{position:absolute;left:3.5rem;right:0;top:calc(var(--cm) / 60 * 100%);border-top:1px dashed var(--bord-clair)}
.regle__echelle>span:first-child{border-top:0}
.regle__echelle b{position:absolute;right:calc(100% + .6rem);top:0;transform:translateY(-50%);font-weight:500;font-size:.9375rem;line-height:1;color:var(--texte);white-space:nowrap}
.regle__tringle{position:absolute;inset:calc(5px - 31.63*var(--u)) 0 auto 3.5rem}
.regle__meches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:.5rem;min-height:calc(var(--H) + 3.5rem);padding-top:5px}
.regle__meches li{position:relative;display:flex;flex-direction:column;align-items:center}
.regle__img{width:min(100%,3.5rem);height:calc(var(--cm) / 60 * var(--H) - 5px)}
.regle__lib{display:flex;flex-direction:column;align-items:center;margin-top:.35rem;padding:.1rem .4rem;background:var(--nacre);font-weight:500;font-size:1.0625rem;line-height:1.3;color:var(--encre);white-space:nowrap;font-variant-numeric:tabular-nums}
.blanc .regle__lib{background:var(--blanc)}

/* Équipe en lignes */
.equipe{border-top:1px solid var(--encre)}
.membre{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) 6rem auto;gap:1rem var(--g);align-items:center;padding:clamp(1.5rem,1rem + 2vw,2.5rem) 0;border-bottom:1px solid var(--filet)}
.membre__nom{font-family:var(--f-titre);font-weight:400;font-size:3.5rem;line-height:1;letter-spacing:-.01em}
.membre__role{margin-bottom:.35rem;font-size:.9375rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--laiton-fonce)}
.membre__miroir{width:6rem}

/* Contact : écrire */
.ecrire{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem var(--g);align-items:start}
.ecrire__texte{grid-column:1/span 5;display:grid;gap:2rem}
.form{grid-column:7/-1;display:grid;gap:1.5rem}
.form__rang{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.form label{display:block;margin-bottom:.5rem;font-size:.9375rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--encre)}
.form label span{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--texte)}
.form input,.form select,.form textarea{display:block;width:100%;min-height:3.25rem;padding:.6rem .9rem;border:1px solid #857C70;border-radius:0;background:var(--blanc);font-size:1.25rem;line-height:1.4;-webkit-appearance:none;appearance:none}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);background-position:calc(100% - 1.25rem) 50%,calc(100% - .95rem) 50%;background-size:.3rem .3rem;background-repeat:no-repeat;padding-right:2.5rem}
.form textarea{min-height:9rem;resize:vertical}
.form ::placeholder{color:var(--gris);opacity:1}
.form :is(input,select,textarea):focus-visible{outline:2px solid var(--laiton-fonce);outline-offset:1px;border-color:var(--encre)}
.form [aria-invalid="true"]{border-color:var(--erreur)}
.form__erreur{margin-top:.4rem;font-size:var(--t-0);color:var(--erreur)}
.form__erreurs{padding:1.1rem;border:1px solid var(--erreur);background:var(--blanc);color:var(--erreur)}
.form__erreurs ul{margin-top:.5rem;padding-left:1.1rem;list-style:disc}
.form__aide{font-size:var(--t-0);color:var(--texte);max-width:34rem}
.form__ok{padding:1.1rem;border:1px solid var(--laiton);background:var(--blanc)}
.form__ok:empty{display:none}

/* Mentions légales */
.legal{max-width:68ch}
.legal h1{margin-bottom:1.5rem}
.legal__filet{display:block;height:1px;margin-bottom:2rem;background:var(--laiton)}
.legal>*+*{margin-top:1rem}
.legal h2{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--filet);font-family:var(--f-texte);font-size:var(--t-2);font-weight:500;line-height:1.3;letter-spacing:0}
.legal dl{display:grid;gap:.9rem}
.legal dt{font-size:.9375rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--laiton-fonce)}
.legal dd{color:var(--encre)}
.legal dd a{display:inline-flex;align-items:center;min-height:44px}

/* 404 */
.e404{padding-block:var(--sec);text-align:center}
.e404__chiffres{display:flex;justify-content:center;align-items:center;gap:.06em;margin-bottom:2rem;font-family:var(--f-titre);font-size:clamp(7.5rem,4rem + 12vw,12.5rem);line-height:1;color:var(--encre)}
.e404__miroir{width:.74em;flex:none}
.e404 .kicker{justify-content:center}
.e404 h1{margin-bottom:1.5rem}
.e404__texte{max-width:34rem;margin:1.5rem auto 0}
.e404 .actions{justify-content:center;margin-top:2rem}

/* Survol : appareils à souris seulement (sur téléphone, un appui ne laisse plus de bouton rempli) */
@media (hover:hover){
  .btn:hover{background:var(--laiton-fonce);border-color:var(--laiton-fonce);color:var(--nacre)}
  .lien:hover{text-decoration-color:var(--encre)}
  .nav__lien:hover::after{transform:none}
  .meche:hover .meche__nom{text-decoration-color:var(--laiton)}
  .ligne:hover::after{transform:scaleX(1)}
  .tuile:hover{border-color:var(--laiton-clair);background:var(--encre-3)}
  .tuile--clair:hover{border-color:var(--laiton-fonce);background:var(--nacre)}
  .pied a:hover{text-decoration-color:var(--laiton-clair)}
}

/* 8. Mouvement */
@media (prefers-reduced-motion:no-preference){
  .ligne__titre{transition:transform .45s var(--ease)}
  .ligne__prix .ico,.lien .ico,.btn .ico--fleche{transition:transform .3s var(--ease)}
  .ligne::after{transition:transform .6s var(--ease)}
  .ligne:focus-within .ligne__titre{transform:translateX(10px)}
  .meche__corps{transition:transform .7s var(--ease)}
  .meche:focus-visible .meche__corps{transform:rotate(3deg)}
  .tirage__img>picture img{transition:transform 1.2s var(--ease)}
  .tuile__fl{transition:transform .35s var(--ease)}
  @media (hover:hover){
    .ligne:hover .ligne__titre{transform:translateX(10px)}
    .ligne:hover .ligne__prix .ico,.lien:hover .ico,.btn:hover .ico--fleche{transform:translateX(4px)}
    .meche:hover .meche__corps{transform:rotate(3deg)}
    .tirage:hover .tirage__img>picture img{transform:scale(1.04)}
    .tuile:hover .tuile__fl{transform:translateX(6px)}
  }
  .faq__plus::before,.faq__plus::after{transition:transform .3s var(--ease)}
  .menu-btn__traits::before,.menu-btn__traits::after,.nav__lien::after{transition:transform .3s var(--ease)}

  /* 1. Héros */
  html.js .hero__anneau{display:block;opacity:0}
  html.js .hero__anneau circle{stroke-dasharray:1;stroke-dashoffset:1}
  html.js .hero__nom .le{transform:translateY(108%)}
  html.js .hero__photo picture{clip-path:circle(0 at var(--cx) var(--cy))}
  html.js .hero h1 .l{overflow:clip}
  html.js .hero h1 .l>span{--dep:125%;transform:translateY(125%)}
  html.js :is(.hero__droite,.hero__cartel,.hero__lede){opacity:0;transform:translateY(16px)}
  html.js.is-pret .hero__nom .le{animation:a-monte .9s var(--ease) both;animation-delay:calc(.12s + var(--i) * 35ms)}
  html.js.is-pret .hero__anneau{animation:a-anneau 1.75s var(--ease-io) .05s both}
  html.js.is-pret .hero__anneau circle{animation:a-trace .9s var(--ease) .1s both}
  html.js.is-pret .hero__photo picture{animation:a-miroir 1.75s var(--ease-io) .05s both}
  html.js.is-pret .hero h1 .l>span{animation:a-monte .9s var(--ease) both;animation-delay:calc(1.05s + var(--i) * 90ms)}
  html.js.is-pret :is(.hero__droite,.hero__cartel,.hero__lede){animation:a-fondu .8s var(--ease) 1.3s both}
  @keyframes a-monte{from{transform:translateY(var(--dep,108%))}to{transform:none}}
  @keyframes a-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes a-anneau{0%{opacity:1;transform:none}57%{opacity:1;transform:none}100%{opacity:0;transform:scale(3.2)}}
  @keyframes a-miroir{
    0%,28%{clip-path:circle(0 at var(--cx) var(--cy))}
    52%,62%{clip-path:circle(var(--cr) at var(--cx) var(--cy))}
    100%{clip-path:circle(150cqi at var(--cx) var(--cy))}
  }
  @keyframes a-fondu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  /* Miroirs intérieurs */
  html.js :is(.page-hero__miroir,.e404__miroir) .miroir__face{stroke-dasharray:1;stroke-dashoffset:1}
  html.js :is(.page-hero__miroir,.e404__miroir) :is(.miroir__paroi,.miroir__fil){opacity:0}
  html.js .page-hero__miroir img{clip-path:circle(0 at 48.2% 50%)}
  html.js.is-pret :is(.page-hero__miroir,.e404__miroir) .miroir__face{animation:a-face .9s var(--ease-io) .1s both}
  @keyframes a-face{from{stroke-dasharray:1;stroke-dashoffset:1}99%{stroke-dasharray:1;stroke-dashoffset:0}to{stroke-dasharray:none;stroke-dashoffset:0}}
  html.js.is-pret :is(.page-hero__miroir,.e404__miroir) :is(.miroir__paroi,.miroir__fil){animation:a-fondu .6s var(--ease) .7s both}
  html.js.is-pret .page-hero__miroir img{animation:a-ouvre .9s var(--ease-io) .35s both}
  @keyframes a-ouvre{from{clip-path:circle(0 at 48.2% 50%)}to{clip-path:circle(45.6% at 48.2% 50%)}}

  /* Apparitions et disparitions (.is-in) */
  html.js [data-rv="monte"]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease) calc(var(--i,0) * 90ms),transform .9s var(--ease) calc(var(--i,0) * 90ms)}
  html.js [data-rv="monte"].is-in{opacity:1;transform:none}
  html.js [data-rv="titre"] .l{overflow:clip}
  html.js [data-rv="titre"] .l>span{transform:translateY(140%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
  html.js [data-rv="titre"].is-in .l>span{transform:none}
  /* La carte : lignes qui montent */
  html.js .ligne[data-rv] .ligne__titre{clip-path:inset(-.1em -1em -.25em -.15em)}
  html.js .ligne[data-rv] .ligne__titre>span{transform:translateY(140%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
  html.js .ligne[data-rv].is-in .ligne__titre>span{transform:none}
  html.js .ligne[data-rv] :is(.ligne__prix,.ligne__desc){opacity:0;transition:opacity .7s var(--ease) .25s}
  html.js .ligne[data-rv].is-in :is(.ligne__prix,.ligne__desc){opacity:1}
  /* Cadres */
  html.js .cadre[data-rv] .devoile{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease-io);transition-delay:calc(var(--i,0) * 120ms)}
  html.js .cadre[data-rv] .devoile img{transform:scale(1.12);transition:transform 1.4s var(--ease)}
  html.js .cadre[data-rv] .cadre__trait rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-io) .35s}
  html.js .cadre.is-in .devoile{clip-path:inset(0)}
  html.js .cadre.is-in .devoile img{transform:none}
  html.js .cadre.is-in .cadre__trait rect{stroke-dashoffset:0}
  /* Le lieu : l'arche se déplie */
  html.js .lieu[data-rv] .lieu__arche{transform:scaleY(.35);transition:transform 1.2s var(--ease-io)}
  html.js .lieu.is-in .lieu__arche{transform:none}
  /* Mèches : déroulé au front en pointe (jamais de cheveux coupés à plat) */
  html.js :is(.meche__img,.jauge__img,.regle__img){clip-path:polygon(-20% -2%,120% -2%,120% -30%,94% -30%,72% -12%,54% -2%,34% -10%,8% -27%,-20% -27%)}
  html.js :is(.nuancier,.jauge,.regle).is-in :is(.meche__img,.jauge__img,.regle__img){clip-path:polygon(-20% -2%,120% -2%,120% 102%,94% 102%,72% 120%,54% 130%,34% 122%,8% 105%,-20% 105%)}
  /* Support : la tringle se découvre de gauche à droite (sans déformer ses bouts), l'embout arrive, puis la mèche en sort */
  html.js [class*=__tringle]{clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease)}
  html.js :is(.nuancier,.jauge,.regle,.etapes,.reserver).is-in [class*=__tringle]{clip-path:inset(0)}
  html.js .embout{opacity:0;transition:opacity .3s ease calc(.3s + var(--i) * 60ms)}
  html.js :is(.nuancier,.jauge,.regle).is-in .embout{opacity:1}
  /* 3. Nuancier */
  html.js .nuancier :is(.meche__pend,.meche__img){transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(.5s + var(--i) * 60ms)}
  html.js .nuancier .meche__pend{transform:rotate(-6deg)}
  html.js .nuancier .meche__nom{opacity:0;transition:opacity .5s ease calc(1.2s + var(--i) * 40ms)}
  html.js .nuancier.is-in .meche__pend{transform:none}
  html.js .nuancier.is-in .meche__nom{opacity:1}
  /* 4. Tirages */
  html.js .tirage__nb{display:block;opacity:1;transition:opacity .5s ease;will-change:opacity}
  html.js .tirage.is-in .tirage__nb{opacity:0;transition:opacity 1.4s ease calc(.2s + var(--i) * 100ms)}
  /* 8. Étapes */
  html.js .etapes .etapes__anneau{opacity:0;transition:opacity .5s ease calc(.6s + var(--i) * 120ms)}
  html.js .etapes__liste li{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s var(--ease);transition-delay:calc(.25s + var(--i) * 120ms)}
  html.js .etapes.is-in :is(.etapes__anneau,.etapes__liste li){opacity:1;transform:none}
  @media (max-width:39.99em){html.js .etapes__tringle{clip-path:inset(0 0 100%)}}
  /* Jauge */
  html.js .jauge__tringle{transition:clip-path calc(var(--n) * .45s) linear}
  /* Ordre : la tringle passe, l'embout apparaît, puis la mèche en descend (jamais de mèche ni d'embout dans le vide) */
  html.js .jauge .jauge__img{transition:clip-path 1.1s var(--ease);transition-delay:calc(.4s + var(--i) * .45s)}
  html.js .jauge .embout{transition-delay:calc(.3s + var(--i) * .45s)}
  /* Règle */
  html.js .regle .regle__img{transition:clip-path 1.1s var(--ease);transition-delay:calc(.35s + var(--i) * .12s)}
  html.js .regle .regle__lib{opacity:0;transform:translateY(-8px);transition:opacity .5s ease,transform .6s var(--ease);transition-delay:calc(1.1s + var(--i) * .12s)}
  html.js .regle.is-in .regle__lib{opacity:1;transform:none}
  html.js .regle .embout{transition-delay:calc(.15s + var(--i) * .08s)}
  /* 9. Frange */
  html.js .reserver .frange__fils path{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.5s var(--ease),opacity .15s linear;transition-delay:calc(.3s + var(--i) * 10ms)}
  html.js .reserver__titre .l{overflow:clip}
  html.js .reserver__titre .l>span{transform:translateY(160%);transition:transform 1s var(--ease) .25s}
  html.js .reserver__titre .l+.l>span{transition-delay:.35s}
  html.js .reserver.is-in .reserver__titre .l>span{transform:none}
  html.js .reserver.is-in .frange__fils path{stroke-dashoffset:0;opacity:1}
  /* Clavier : un élément qui reçoit le focus est montré tout de suite, sans attendre le fondu */
  html.js [data-rv]:is(:focus,:focus-within){opacity:1;transform:none;transition:none}
  html.js [data-rv]:focus-within :is(.l>span,.ligne__titre>span,.ligne__prix,.ligne__desc,.meche__pend,.meche__img,.embout,.meche__nom,.nuancier__tringle){opacity:1;transform:none;clip-path:none;transition:none}
  /* 10. Monogramme */
  html.js .pied__mono .trait{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-io);transition-delay:calc(var(--i,0) * 120ms)}
  html.js .pied__mono.is-in .trait{stroke-dashoffset:0}
  /* Menu */
  html.js .nav.is-open{animation:a-menu .45s var(--ease) both}
  @keyframes a-menu{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
}

/* Portables 1280 à 1680 px : la photo du héros est plafonnée pour que le H1 entre dans le premier écran (16:9, 16:10).
   Hauteur = min(largeur / 2,8 ; 52 % de la largeur - 21 rem), jamais sous 24 rem. Le cercle d'entrée suit le monogramme
   FDN : image recadrée en largeur (cover, 50 % 38 %, zoom 1,06 autour de 40 %), monogramme à 36,2 % de l'image. */
/* Ordinateur (dès 1088 px) */
@media (min-width:68em){
  /* Boutons du héros de même largeur ; têtes à long texte alignées en haut */
  .hero__droite .actions{display:grid;max-width:17.5rem}
  .hero__droite .actions .btn{width:100%}
  .tete--haut{align-items:start}
  .tete--haut .tete__texte{padding-top:2.4rem}
}
@media (min-width:80em){
  .hero__photo{--ph:min(100cqi / 2.8,max(24rem,52cqi - 21rem));--cy:calc(.3788 * var(--ph) - .0067 * 100cqi);--cr:calc(.3024 * var(--ph));--ar:calc(.308 * var(--ph));aspect-ratio:auto;height:var(--ph)}
}

@media (min-width:68em) and (max-width:71.49em){.entete .entete__tel{display:none}}
@media (min-width:40em){.tuiles:not(.tuiles--3){grid-template-rows:auto auto 1fr}.tuiles:not(.tuiles--3)>.tuile{grid-row:span 3;grid-template-rows:subgrid;align-content:start;row-gap:1rem}.tuiles:not(.tuiles--3) .tuile__bas{align-self:end}}

/* 9. Tablette et téléphone */
@media (max-width:67.99em){
  .entete__tel{display:none}
  .entete__actions{display:none}
  .entete__mobile{display:flex}
  html.js .menu-btn{display:inline-flex}
  /* Rembourrage, pas de hauteur minimale : menu ouvert, la rangée du haut ne bouge pas */
  .entete__barre{min-height:0;padding-block:1.125rem;row-gap:1.125rem}
  .nav{order:3;flex-basis:100%;padding:1rem 0 .625rem;border-top:1px solid var(--filet)}
  html.js .nav{display:none}
  html.js .nav.is-open{display:block}
  .nav__liste{flex-direction:column;gap:0}
  .nav__lien{display:block;padding:.3rem 0;font-family:var(--f-titre);font-size:2.5rem;line-height:1.15;text-align:left}
  .nav__lien::after{display:none}
  .nav__liste li:nth-child(even) .nav__lien{font-style:italic}
  .nav__lien[aria-current]{text-decoration:underline;text-decoration-color:var(--laiton);text-decoration-thickness:1px;text-underline-offset:.15em}
  .nav__bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.25rem}
  .hero__gauche,.hero__droite,.tete__titre,.tete__texte,.reals__texte,.nuancier,.avis__note,.avis__droite,.infos__photo,.faq__tete,.faq__liste,.reserver__gauche,.reserver__texte,.pied__mono,.pied__cols,.duo__photo,.duo__texte,.duo--inverse .duo__texte,.duo--inverse .duo__photo,.ext__texte,.ext__regle,.ext__suite,.ecrire__texte,.form{grid-column:1/-1}
  .ext__texte,.ext__regle,.ext__suite{grid-row:auto}
  .ext{row-gap:2rem}
  .tarifs__ext{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .tarifs__ext .tarif__note,.tarifs__retrait,.tarifs__ext-regle{grid-column:1/-1;grid-row:auto}
  .tarifs__ext .regle--reduite{max-width:40rem}
  .duo--inverse .duo__photo{grid-row:auto}
  .duo__photo{max-width:34rem}
  .reperes{grid-template-columns:repeat(2,1fr)}
  .reperes li:nth-child(3){border-left:0;padding-left:0}
  .reperes li:nth-child(n+3){border-top:1px solid var(--filet)}
  .reals__haut{row-gap:2rem}
  .ligne a{grid-template-columns:2.5rem minmax(0,1fr) auto}
  /* 5 marques : en lignes (nom 1/3, rôle 2/3) plutôt qu'une grille 3 + 2 à trou */
  .marques__liste{grid-template-columns:minmax(0,1fr)}
  .marques__liste li:nth-child(n){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:.4rem var(--g);align-items:baseline;padding:1.1rem 0;margin:0;border-left:0;border-top:1px solid var(--poudre-2)}
  .marques__liste li:first-child{border-top:0}
  .etapes__liste,.colonnes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapes__liste li:nth-child(n+3) .etapes__anneau{display:none}
  .infos__bloc,.infos__bloc+.infos__bloc,.infos--contact .infos__bloc{grid-column:span 6}
  .tuiles--3{grid-template-columns:1fr}
  .tuiles--3 .tuile{min-height:0}
  /* Barre d'infos : en lignes à filets sous 1088 px (à 768, la 3e info tombait seule sur une 2e ligne) */
  .barre p{width:100%;padding:.85rem 0;border-left:0;border-top:1px solid var(--filet-sombre)}
  .barre p:first-child{border-top:0}
  .pied__haut{row-gap:2.5rem}
  .membre{grid-template-columns:minmax(0,1fr) 6rem;gap:.75rem 1.5rem}
  .membre__texte{grid-column:1/-1;grid-row:2}
  .membre__miroir{grid-column:2;grid-row:1}
  .membre__lien{grid-column:1/-1}
  .regle{--H:22rem}
}
@media (max-width:47.99em){
  .tirages--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nuancier--4 .nuancier__liste{column-gap:1rem}
  .avis__liste{grid-template-columns:1fr}
}
@media (max-width:39.99em){
  .entete__barre{column-gap:.6rem;min-height:0;padding-block:.625rem;row-gap:.625rem}
  .nav{padding-bottom:1.125rem}
  .logo{gap:.6rem}
  .logo__signe{width:2.4rem}
  .logo__nom{font-size:.875rem;letter-spacing:.1em;line-height:1.25}
  .logo__nom span{display:block}
  .logo__sous{display:none}
  .entete__cta{min-height:2.75rem;padding:.55rem .85rem}
  .menu-btn{padding:0;justify-content:center}
  .menu-btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav__bas .btn{width:100%}
  .hero__nom{font-size:min(calc((100cqi - 2 * var(--g)) / 3.95),6.5rem);line-height:.9;white-space:normal;margin-bottom:-.12em}
  .hero__nom .mot:first-child{display:block;width:max-content;margin-inline:auto}
  .hero__nom .mot:nth-child(2){margin-left:0}
  .hero__photo{--cx:64%;--cy:41%;--cr:24cqi;--ar:26cqi;aspect-ratio:1/1.02}
  .hero__photo img{object-position:50% 55%}
  .hero__lede-suite{display:none}
  .hero__droite{justify-items:stretch}
  .hero__droite .actions,.avis__cta{display:grid}
  .reperes li{padding:1.25rem 1rem 1.4rem}
  .reperes li:nth-child(even){padding-right:0}
  .nuancier__liste{column-gap:0}
  .meche__nom{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tirages{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}
  .tirage__cartel{flex-direction:column;align-items:flex-start;gap:.5rem}
  .tirage__nom{font-size:1.0625rem}
  .reals__pied .actions{display:grid;width:100%}
  .ligne a{grid-template-columns:minmax(0,1fr);padding:1.4rem 0}
  .ligne__num{display:none}
  .ligne__titre,.ligne__desc{grid-column:1}
  .ligne__prix{grid-column:1;grid-row:3;justify-self:start;margin-top:.4rem}
  /* Sommaire des Tarifs (flèche seule) : la flèche reste à droite de la dernière ligne du titre */
  .carte__liste--sommaire .ligne a{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:1rem}
  .carte__liste--sommaire .ligne__prix{grid-column:2;grid-row:1;justify-self:end;margin-top:0}
  .paire{grid-template-columns:1fr;gap:2.5rem}
  .marques__liste li:nth-child(n){grid-template-columns:minmax(0,1fr)}
  .marques__liste li:first-child{border-top:0}
  .etapes{padding:0 0 0 2.5rem}
  /* Téléphone : un filet vertical et des repères ronds, volontairement graphiques (pas de faux métal) */
  .etapes__tringle{position:absolute;left:0;top:.25rem;bottom:.25rem;width:1px;height:auto;margin:0;border:0;background:var(--laiton)}
  .etapes__img{display:none}
  .etapes__liste,.colonnes,.colonnes--2,.encarts{grid-template-columns:1fr}
  .etapes__liste li:nth-child(n) .etapes__anneau{display:block;top:1.25rem;left:calc(-2.5rem - 7.5px);width:16px;height:16px;border-radius:50%;border:2px solid var(--laiton);background:var(--blanc)}
  .infos__bloc,.infos__bloc+.infos__bloc,.infos--contact .infos__bloc{grid-column:1/-1}
  .faq__corps p{padding-right:0}
  .faq__item summary{gap:1rem}
  .tuiles{grid-template-columns:1fr}
  .tuile{min-height:11rem}
  .pied__cols{grid-template-columns:1fr 1fr}
  .pied__cols>div:first-child{grid-column:1/-1}
  .page-hero__miroir{grid-column:1/-1;justify-self:center;width:12.5rem}
  .page-hero__texte{grid-column:1/-1}
  .page-hero .actions,.ext .actions,.e404 .actions{display:grid;width:100%}
  .e404 .actions{justify-content:stretch}
  .jauge__table,.jauge__table thead,.jauge__table tbody{display:block}
  .jauge__table tr{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
  .jauge__coin{display:none}
  .jauge thead th{padding:0 .25rem 1rem}
  .jauge__img{width:3.15rem;height:calc(var(--h) * .7px)}
  .jauge__dessin{height:calc(var(--hmax) * .7px + 4px)}
  .jauge,.regle{--u:.031rem}
  .jauge__lib{letter-spacing:.04em}
  .jauge tbody th{grid-column:1/-1;padding:1rem 0 .25rem}
  .jauge td{padding:.35rem .25rem 1rem;border-top:0;font-size:1.25rem}
  .jauge tbody .jauge__groupe th,.jauge tbody .jauge__seul th{padding-top:1.5rem}
  .jauge tbody .jauge__seul td{padding-top:.35rem}
  /* La longueur au-dessus de chaque prix (le dessin des mèches est loin plus haut) ; « / "" » : non lue deux fois */
  .jauge td::before{content:attr(data-l);content:attr(data-l) / "";display:block;margin-bottom:.15rem;font-size:.9375rem;font-weight:400;line-height:1.25;letter-spacing:0;white-space:normal;color:var(--texte)}
  .regle,.regle--reduite{--H:27.5rem}
  .regle__zone{padding-left:2rem}
  .regle__echelle>span,.regle__tringle{left:2rem}
  .regle__u{display:none}
  .regle__meches{column-gap:0}
  .regle__img{width:2.25rem}
  .regle__lib{font-size:.9375rem;line-height:1.2;letter-spacing:-.01em;font-variant-numeric:proportional-nums}
  .membre__nom{font-size:2.75rem}
  .form__rang{grid-template-columns:1fr}
}
@media (max-width:25.99em){
  .reperes{grid-template-columns:1fr}
  .reperes li,.reperes li:nth-child(n){padding:1.1rem 0;border-left:0;border-top:1px solid var(--filet)}
  .reperes li:first-child{border-top:0}
  :root{--u:.03194rem}
}
@media (max-width:22.49em){
  .page-hero h1{font-size:2.5rem}.page-hero h1 em{font-size:2.75rem}
  /* Pied : Pages passe sous Horaires */
  .pied__cols{grid-template-columns:1fr}
}
/* Libellés de la jauge : en capitales, ils se touchaient */
@media (max-width:23.43em){
  .jauge__lib{text-transform:none;letter-spacing:0}
}
/* Logo, Réserver et Menu sur une rangée ; nom insécable du H1 (Contact) dans la marge */
@media (max-width:21.24em){
  .entete__barre,.entete__mobile{column-gap:.5rem}
  .entete__cta{padding-inline:.7rem}
  .logo__signe{width:2.2rem}
  .page-hero h1 em{font-size:2.6rem}
}