/* Loft Shine · direction « Mèche par mèche » : noir chaud, ivoire, rose poudré, angles droits et biais. */
@font-face{font-family:"Marcellus";src:url("polices/marcellus-400.woff2?v=10f9e448") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("polices/hanken-grotesk-400-600.woff2?v=38c3847f") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{--noir:#181514;--brun:#27201D;--ivoire:#F6ECE6;--rose:#F1BCAF;--filet:rgba(246,236,230,.22);--entete:78px;--pente:34px;--marge:64px;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--noir);scroll-padding-top:var(--entete)}
body{margin:0;background:var(--noir);color:var(--ivoire);font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
a[href^="tel:"]{white-space:nowrap}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
[id]{scroll-margin-top:var(--entete)}
h1,h2,h3{font-family:"Marcellus",Georgia,serif;font-weight:400;text-wrap:balance}
h1{font-size:56px;line-height:1.06}
h2{font-size:clamp(34px,3.4vw,48px);line-height:1.1}
h3{font-size:30px;line-height:1.15}
.cadre{max-width:1440px;margin:0 auto;padding:0 var(--marge)}
.chapo{font-size:19px;line-height:1.5}
.rose{color:var(--rose)}
sup{font-size:.6em;line-height:0}
.cache{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saut{position:fixed;left:16px;top:-80px;z-index:100;background:var(--rose);color:var(--noir);padding:12px 18px;font-weight:600;text-decoration:none;transition:transform .24s}
.saut:focus{transform:translateY(96px)}

/* Boutons et liens */
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:50px;white-space:nowrap;text-decoration:none;font:600 16px/1.2 "Hanken Grotesk",system-ui,sans-serif;padding:14px 26px;background:var(--rose);color:var(--noir);border:0;cursor:pointer;touch-action:manipulation;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);transition:background-color .24s,transform .2s}
.bouton:hover{background:var(--ivoire)}
.bouton:active{transform:scale(.97)}
.bouton:focus-visible{outline-offset:-5px;outline-color:var(--noir)}
.lien{display:inline-flex;align-items:center;min-height:44px;font-weight:600;white-space:nowrap;color:var(--ivoire);text-decoration:underline;text-decoration-color:var(--rose);text-decoration-thickness:1px;text-underline-offset:6px;touch-action:manipulation;transition:color .24s}
.lien:hover{color:var(--rose)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
p a:not(.bouton):not(.lien),li a:not(.bouton):not(.lien),dd a,address a{text-decoration-color:var(--rose);text-underline-offset:4px}

/* En-tête */
.entete{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--entete);border-bottom:1px solid transparent;transition:background-color .24s,border-color .24s}
.entete.posee,.entete.ouvert{background:var(--noir);border-bottom-color:var(--filet)}
.entete .cadre{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.marque{display:flex;align-items:center;gap:14px;min-height:54px;text-decoration:none;color:var(--ivoire)}
.marque img{width:54px;height:54px;border-radius:50%;box-shadow:0 0 0 1px var(--rose);flex:none}
.marque span{font-family:"Marcellus",Georgia,serif;font-size:22px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.entete-droite{display:flex;align-items:center;gap:36px}
.menu{display:flex;align-items:center;gap:36px;font-size:16px;font-weight:500}
.menu a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;white-space:nowrap;transition:color .24s}
.menu a:hover,.menu a[aria-current]{color:var(--rose)}
.menu a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
.menu .replie{display:none}
.bascule{display:none;min-height:44px;padding:0 14px;background:none;border:1px solid var(--filet);color:var(--ivoire);font:500 15px/1 "Hanken Grotesk",system-ui,sans-serif;white-space:nowrap;cursor:pointer;touch-action:manipulation}

/* Accueil : une section par écran */
.ecran{min-height:100svh;padding:calc(var(--entete) + 28px) 0 56px;display:flex;flex-direction:column;justify-content:center}
.ecran>.cadre{width:100%}
.ecran h2{margin-bottom:36px}

.premier{justify-content:space-between;gap:32px;padding-top:calc(var(--entete) + 44px);padding-bottom:28px}
.tete{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px;align-items:end}
.premier h1{font-size:70px;letter-spacing:-.005em}
.premier h1 .sur{display:block;margin-bottom:14px;font:500 17px/1.4 "Hanken Grotesk",system-ui,sans-serif;letter-spacing:0}
.premier .chapo{margin-bottom:24px}
.tete h1,.tete .chapo,.tete .actions{animation:monte .5s cubic-bezier(.2,.7,.2,1) both}
.tete .chapo{animation-delay:.07s}
.tete .actions{animation-delay:.14s}
@keyframes monte{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.ruban{--h:clamp(250px,calc(100svh - 480px),410px);container-type:inline-size;overflow:hidden;height:var(--h)}
.ruban-piste{display:flex;align-items:flex-start;width:max-content;height:100%;animation:defile 150s linear infinite}
.ruban:hover .ruban-piste,.ruban.hors .ruban-piste{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
.meche{flex:none;width:calc((100cqw - 60px) / 7);margin-right:10px;height:68%}
.meche:nth-child(8n+2){height:100%}
.meche:nth-child(8n+3){height:78%}
.meche:nth-child(8n+4){height:91%}
.meche:nth-child(8n+5){height:66%}
.meche:nth-child(8n+6){height:96%}
.meche:nth-child(8n+7){height:76%}
.meche:nth-child(8n+8){height:88%}
.meche img{width:100%;height:100%;object-fit:cover;clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--pente)))}
.meche:nth-child(even) img{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--pente)),0 100%)}
.meche.tombe{animation:tombe .6s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(var(--i) * 60ms)}
@keyframes tombe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* Lignes de prix de départ */
.lignes{border-bottom:1px solid var(--filet)}
.ligne{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) 150px auto;gap:32px;align-items:center;padding:26px 0;border-top:1px solid var(--filet)}
.ligne::before,.prix-liste li::before{content:"";position:absolute;left:-30px;top:50%;width:14px;height:14px;margin-top:-7px;background:var(--rose);clip-path:polygon(35% 0,100% 0,65% 100%,0 100%);opacity:0;transform:translateX(-8px);transition:opacity .24s,transform .24s}
.ligne:hover::before,.prix-liste li:hover::before{opacity:1;transform:none}
.ligne h3{font-size:40px}
.ligne .prix{font-size:24px;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .24s}
.ligne:hover .prix,.prix-liste li:hover .prix{color:var(--rose)}
.ligne .apercu{position:absolute;left:calc(41% - 120px);top:50%;width:72px;height:96px;margin-top:-48px;object-fit:cover;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),0 100%);opacity:0;transition:opacity .35s;pointer-events:none}
.ligne:hover .apercu{opacity:1}

/* Diagnostic */
.diagnostic{background:var(--brun)}
.deux{display:grid;gap:64px;align-items:center}
.deux.c57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.deux.c75{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
/* Le biais coupe le cadre noir, pas l'affiche : son texte reste entier. */
.affiche{max-width:324px;justify-self:center;padding:var(--pente) 12px 12px;background:var(--noir);clip-path:polygon(0 var(--pente),100% 0,100% 100%,0 100%)}
.affiche img{width:100%;height:auto}
.offres{border-bottom:1px solid var(--filet);margin-bottom:32px}
.offres li{display:grid;grid-template-columns:minmax(0,1fr) 70px 96px;gap:6px 20px;padding:16px 0;border-top:1px solid var(--filet)}
.offres strong{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:24px;line-height:1.2}
.offres .duree{text-align:right;white-space:nowrap}
.offres .prix{text-align:right;white-space:nowrap;font-weight:600;font-size:19px;color:var(--rose);font-variant-numeric:tabular-nums}
.offres p{grid-column:1/-1;font-size:16px;max-width:38em}

/* Avant, après */
.citation{max-width:34em;margin-bottom:28px}
.citation blockquote{font-size:21px;line-height:1.5}
.citation figcaption{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:10px;font-size:15px}
.citation figcaption::before{content:"";width:44px;height:1px;background:var(--rose)}
.paires{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,3fr);gap:10px}
.bande img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.bande figcaption{padding-top:10px;font-size:15px;line-height:1.35}
.biais-haut .bande:nth-child(odd) img,.bande.haut img{clip-path:polygon(0 var(--pente),100% 0,100% 100%,0 100%)}
.biais-haut .bande:nth-child(even) img{clip-path:polygon(0 0,100% var(--pente),100% 100%,0 100%)}
.biais-bas .bande:nth-child(odd) img,.bande.bas img{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--pente)))}
.biais-bas .bande:nth-child(even) img{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--pente)),0 100%)}
.avant-apres .paires .bande img{height:clamp(200px,calc(100svh - 520px),430px);aspect-ratio:auto}
.avant-apres .paires{margin-bottom:14px}

/* Quartier, repères, horaires */
.quartier p+p{margin-top:14px}
.reperes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:36px;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.reperes li{padding:20px 22px 22px 0}
.reperes li+li{padding-left:22px;border-left:1px solid var(--filet)}
.reperes strong{display:block;font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:48px;line-height:1.1;white-space:nowrap}
.reperes span{display:block;margin-top:6px;font-size:15px;line-height:1.4}
.horaires div{display:grid;grid-template-columns:minmax(0,1fr) 132px;padding:9px 0;border-bottom:1px solid var(--filet)}
.horaires dd{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.horaires .aujourdhui{color:var(--rose);font-weight:600}
.note-lundi{margin:14px 0 22px;font-size:15px}
.sous-titre{font:600 17px/1.3 "Hanken Grotesk",system-ui,sans-serif;margin-bottom:8px}

/* Avis */
.avis-tete{font-size:19px;margin:-18px 0 30px}
.cartes-avis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.avis-carte{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--brun);border:1px solid var(--filet)}
.avis-carte blockquote{white-space:pre-line}
.avis-carte .source{margin-top:auto;font-size:15px}
.avis-carte .reponse{padding-left:14px;border-left:2px solid var(--filet);font-size:16px}
.etoiles{display:block;width:104px;height:18px;fill:var(--rose)}
.avis .actions{margin-top:30px;justify-content:space-between}

/* Pied de page */
.pied{background:var(--brun);padding:30px 0;font-size:15px;line-height:1.45}
.pied .colonnes{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.pied .marque-pied{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-family:"Marcellus",Georgia,serif;font-size:19px;letter-spacing:.14em;text-transform:uppercase}
.pied .marque-pied img{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 1px var(--rose)}
.pied address{font-style:normal}
.pied h2{font:600 13px/1.3 "Hanken Grotesk",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin:6px 0 4px}
.pied ul a,.pied address a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none}
.pied .col-salon ul{columns:2;column-gap:28px}
.pied ul a{white-space:nowrap}
.pied ul a:hover,.pied address a:hover,.pied .bas a:hover{color:var(--rose)}
.reseaux{display:flex;flex-direction:column;gap:6px}
.reseaux a{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.reseaux svg{width:40px;height:40px;padding:10px;border:1px solid var(--rose);border-radius:50%;fill:none;stroke:var(--rose);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pied .bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin-top:14px;padding-top:12px;border-top:1px solid var(--filet);font-size:14px}

/* Pages intérieures */
.page{padding-top:var(--entete)}
.page-tete{padding-top:44px;padding-bottom:34px}
.page-tete h1{max-width:19em}
.page-tete .chapo{margin-top:16px;max-width:44em}
.bloc{padding-top:44px;padding-bottom:44px}
.bloc>.cadre>h2,.bloc>h2{margin-bottom:26px}
.bloc.fin,.fin{padding-bottom:72px}
.filets{border-top:1px solid var(--filet)}
.surface{background:var(--brun)}

/* Tarifs */
.tarifs .page-tete{padding-top:14px;padding-bottom:10px}
.tarifs h1{font-size:36px;max-width:none}
.tarifs .page-tete p{margin-top:8px;font-size:15.5px;max-width:74em}
.onglets{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--filet)}
.onglets a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 13px;margin-bottom:-1px;font-size:15px;font-weight:500;white-space:nowrap;text-decoration:none;border-bottom:2px solid transparent;touch-action:manipulation;transition:color .24s,border-color .24s}
.onglets svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.onglets a:hover{color:var(--rose)}
.onglets a[aria-selected="true"],
.tarifs:not(:has(.volet:target)) .onglets:not(.js) a[href="#femme"],
.tarifs:has(#femme:target) .onglets:not(.js) a[href="#femme"],.tarifs:has(#homme:target) .onglets:not(.js) a[href="#homme"],
.tarifs:has(#couleur:target) .onglets:not(.js) a[href="#couleur"],.tarifs:has(#meches:target) .onglets:not(.js) a[href="#meches"],
.tarifs:has(#lissages:target) .onglets:not(.js) a[href="#lissages"],.tarifs:has(#soins:target) .onglets:not(.js) a[href="#soins"],
.tarifs:has(#chignons:target) .onglets:not(.js) a[href="#chignons"],.tarifs:has(#enfant:target) .onglets:not(.js) a[href="#enfant"]{color:var(--rose);border-bottom-color:var(--rose)}
.volets{min-height:340px;padding:16px 0 22px}
.volet{display:none;grid-template-columns:190px minmax(0,1fr);gap:40px;align-items:start;scroll-margin-top:340px;animation:fondu .3s both}
.volet.sans-photo{grid-template-columns:minmax(0,1fr)}
.volet:target,.volets:not(.js):not(:has(.volet:target)) #femme,.volets.js .volet{display:grid}
.volets.js .volet[hidden]{display:none}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.volet .bande img{aspect-ratio:auto;height:340px}
.volet h2{font-size:30px}
.volet .qui{margin:2px 0 8px;font-size:16px}
.volet h3{font:600 15px/1.3 "Hanken Grotesk",system-ui,sans-serif;color:var(--rose);margin:16px 0 4px}
.prix-liste{columns:2;column-gap:44px}
.prix-liste li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:14px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--filet);break-inside:avoid;font-size:15px;line-height:1.35}
.prix-liste li::before{left:-22px;width:11px;height:11px;margin-top:-6px}
.prix-liste small{font-size:13px;white-space:nowrap;border-bottom:1px solid var(--rose)}
.prix-liste .prix{text-align:right;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums;transition:color .24s}
.volet-bas{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 28px;align-items:start;margin-top:10px}
details summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:600;list-style:none;touch-action:manipulation}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--rose);border-bottom:2px solid var(--rose);transform:rotate(45deg) translate(-2px,-2px);transition:transform .24s}
details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.volet details p{font-size:15px;margin:4px 0 10px;max-width:70em}
.infos-tarifs{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1.15fr) minmax(0,1fr);gap:36px;padding:26px 0 72px;border-top:1px solid var(--filet)}
.infos-tarifs h2{font-size:24px;margin-bottom:10px}
.infos-tarifs p,.infos-tarifs li,.infos-tarifs dl{font-size:15.5px}
.infos-tarifs .offres{margin-bottom:0}
.infos-tarifs .offres li{grid-template-columns:minmax(0,1fr) 60px 60px;padding:8px 0;gap:2px 12px}
.infos-tarifs .offres strong{font:600 15.5px/1.35 "Hanken Grotesk",system-ui,sans-serif}
.infos-tarifs .offres .prix{font-size:15.5px}
.infos-tarifs .horaires div{grid-template-columns:minmax(0,1fr) 110px;padding:3px 0;border:0}
.infos-tarifs .lien{min-height:36px}
.infos-tarifs section>p+p{margin-top:8px}

/* Réalisations */
.tete-rang{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
.rang-fixe{display:flex;align-items:flex-start;gap:8px}
.rang-fixe img{width:84px;height:150px;object-fit:cover;clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 16px))}
.rang-fixe img:nth-child(2){height:190px;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),0 100%)}
.rang-fixe img:nth-child(3){height:166px}
.serie{display:grid;gap:10px;align-items:start}
.serie.q4{grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,2fr) minmax(0,3fr)}
.serie.q2{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.serie.q3{grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,3fr)}
.serie.q4s{grid-template-columns:repeat(4,minmax(0,1fr));max-width:860px}
.serie.q4 .bande img{aspect-ratio:auto;height:clamp(300px,34vw,520px)}
.serie.q2 .bande img,.serie.q3 .bande img{aspect-ratio:auto;height:clamp(280px,30vw,460px)}
.recit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:26px;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.recit div{padding:18px 24px 20px 0}
.recit div+div{padding-left:24px;border-left:1px solid var(--filet)}
.recit dt{font-weight:600;color:var(--rose);margin-bottom:4px}
.recit.colonne{grid-template-columns:1fr;border-bottom:0}
.recit.colonne div,.recit.colonne div+div{padding:14px 0;border-left:0;border-bottom:1px solid var(--filet)}
.cas .citation{margin:26px 0 0}
.cas h2{margin-bottom:22px}
.cas .deux{align-items:start}
.appel{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:center}
.appel .bande{max-width:400px}
.appel-bloc{background:var(--brun);border:1px solid var(--filet);padding:44px}
.appel-bloc h2{font-size:clamp(28px,2.8vw,40px);margin-bottom:26px}
.notes{grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 22px}
.notes strong{font-size:36px}
.avis-page .avis-tete{margin:0 0 20px}
.avis-page .cartes-avis{margin:26px 0 22px}
.suivez{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.suivez p{margin:0 0 22px}

/* Équipe */
.portrait img{width:100%;max-width:380px;height:600px;object-fit:cover;object-position:50% 22%;clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--pente)))}
.portrait figcaption{padding-top:10px;font-size:15px}
.personne .sur{font-weight:500;margin-bottom:6px}
.personne .reperes{margin:22px 0 24px}
.personne p+p{margin-top:12px}
.personne blockquote{font-family:"Marcellus",Georgia,serif;font-size:26px;line-height:1.3;margin:12px 0}
.personne .actions{margin-top:26px}
.prenoms li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:32px;align-items:baseline;padding:20px 0;border-top:1px solid var(--filet)}
.prenoms li:last-child{border-bottom:1px solid var(--filet)}
.prenoms h3{color:var(--rose)}
.frise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.frise li{padding:20px 22px 24px 0}
.frise li+li{padding-left:22px;border-left:1px solid var(--filet)}
.frise strong{display:block;font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:34px;line-height:1.15;margin-bottom:8px}
.produits{columns:2;column-gap:56px}
.produits li{padding:13px 0;border-bottom:1px solid var(--filet);break-inside:avoid}
.produits strong{font-weight:600;color:var(--rose)}

/* Venir au salon */
.venir{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.tel-grand{display:inline-block;font-family:"Marcellus",Georgia,serif;font-size:64px;line-height:1.05;color:var(--rose);text-decoration:none}
.coordonnees{font-style:normal;margin:14px 0 22px;font-size:18px}
.venir-bas{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:40px;align-items:start;margin-top:34px}
.venir-bas .bande img{aspect-ratio:3/4}
.formulaire{background:var(--brun);border:1px solid var(--filet);padding:30px}
.formulaire h2{font-size:30px;margin-bottom:8px}
.planity{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--filet)}
.champ{margin-bottom:16px}
.champ label,.champ legend{display:block;font-weight:600;font-size:15px;margin-bottom:6px;padding:0}
.champ input:not([type=radio]):not([type=checkbox]),.champ textarea{width:100%;min-height:52px;padding:12px 14px;background:var(--noir);color:var(--ivoire);border:1px solid var(--filet);border-radius:0;font:400 16px/1.4 "Hanken Grotesk",system-ui,sans-serif}
.champ textarea{min-height:110px;resize:vertical}
.champ input:focus-visible,.champ textarea:focus-visible{outline-offset:0}
fieldset.champ{border:0;padding:0;margin-inline:0;min-width:0}
.choix{display:flex;flex-wrap:wrap;gap:4px 20px}
.choix label{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;font-weight:400;font-size:16px;cursor:pointer}
.choix input[type=radio]{appearance:auto;-webkit-appearance:radio;width:20px;height:20px;margin:0;accent-color:var(--rose)}
.erreur{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:15px}
.erreur svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.champ.en-erreur input:not([type=radio]),.champ.en-erreur textarea{border-left:2px solid var(--ivoire)}
.etat{margin-top:14px;padding-left:14px;border-left:2px solid var(--ivoire)}
.etat:empty{display:none}
.mention{margin-top:14px;font-size:15px}
.faq details{border-top:1px solid var(--filet)}
.faq details:last-child{border-bottom:1px solid var(--filet)}
.faq summary{display:flex;justify-content:space-between;min-height:60px;font-size:19px}
.faq details p{padding:0 0 20px;max-width:46em}
.faq h3{font:inherit}

/* Pages légales, merci, 404 */
.legale{max-width:820px}
.legale h2{font-size:28px;margin:34px 0 10px}
.legale p+p,.legale ul{margin-top:10px}
.legale li{padding-left:18px;position:relative}
.legale li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--rose)}
.simple{min-height:calc(100svh - var(--entete) - 260px);display:flex;flex-direction:column;justify-content:center;gap:18px;padding-top:60px;padding-bottom:72px}

.barre{display:none}

/* Passage d'une page à l'autre : une bande rose en biais */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition{background:var(--rose)}
  ::view-transition-old(root){animation:vt-sort .3s cubic-bezier(.6,0,.4,1) both}
  ::view-transition-new(root){animation:vt-entre .3s .12s cubic-bezier(.6,0,.4,1) both}
  @supports (animation-timeline:view()){
    .serie .bande{animation:glisse linear both;animation-timeline:view()}
    .serie .bande:nth-child(even){animation-name:glisse-inverse}
  }
}
@keyframes vt-sort{from{clip-path:polygon(-12% 0,100% 0,100% 100%,0 100%)}to{clip-path:polygon(100% 0,100% 0,100% 100%,112% 100%)}}
@keyframes vt-entre{from{clip-path:polygon(0 0,-12% 0,0 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,112% 100%,0 100%)}}
@keyframes glisse{from{transform:translateY(14px)}to{transform:translateY(-14px)}}
@keyframes glisse-inverse{from{transform:translateY(-14px)}to{transform:translateY(14px)}}
html.sans-vt body{animation:fondu .2s both}

/* Animations réduites : les transitions raccourcissent, le ruban continue de tourner. */
@media (prefers-reduced-motion:reduce){
  .tete h1,.tete .chapo,.tete .actions,.meche.tombe,.volet{animation-duration:.01s;animation-delay:0s}
  .bouton,.lien,.entete,.ligne .apercu,.ligne::before,.prix-liste li::before,details summary::after{transition-duration:.01s}
}

/* Menu replié */
@media (max-width:1150px){
  .entete-droite{gap:12px}
  .bascule{display:inline-flex;align-items:center}
  #navigation{display:none;position:absolute;left:0;right:0;top:var(--entete);background:var(--noir);border-bottom:1px solid var(--filet);padding:8px var(--marge) 18px}
  .entete.ouvert #navigation{display:block}
  .menu{flex-direction:column;align-items:stretch;gap:0;font-size:18px}
  .menu .replie{display:block}
  .menu a{display:flex;min-height:52px;border-bottom:1px solid var(--filet)}
  .infos-tarifs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Une colonne */
@media (max-width:900px){
  :root{--marge:20px;--pente:20px}
  h1{font-size:40px}
  .premier h1{font-size:42px}
  .tete,.deux.c57,.deux.c75,.venir,.appel,.suivez,.tete-rang{grid-template-columns:minmax(0,1fr);gap:28px}
  .ecran{padding:calc(var(--entete) + 24px) 0 44px}
  .ecran h2{margin-bottom:24px}
  .premier{padding-top:calc(var(--entete) + 22px);gap:26px;justify-content:flex-start}
  .ruban{--h:300px}
  .meche{width:calc((100cqw - 20px) / 3);height:77%}
  .meche:nth-child(3n+2){height:100%}
  .meche:nth-child(3n+3){height:87%}
  .ligne{grid-template-columns:72px minmax(0,1fr) auto;gap:4px 16px;padding:18px 0}
  .ligne::before{display:none}
  .ligne .apercu{position:static;grid-row:1/4;grid-column:1;margin:0;opacity:1;align-self:center}
  .ligne h3{grid-column:2/4;font-size:28px}
  .ligne>p:not(.prix){grid-column:2/4;font-size:15px}
  .ligne .prix{grid-column:2;text-align:left;font-size:19px;color:var(--rose);align-self:center}
  .ligne .lien{grid-column:3}
  .affiche{max-width:186px;justify-self:start;padding:var(--pente) 8px 8px}
  .offres strong{font-size:20px}
  .offres li{grid-template-columns:minmax(0,1fr) 54px 60px;gap:4px 10px}
  .paires,.serie.q4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .avant-apres .paires .bande img{height:clamp(150px,calc((100svh - 520px) / 2),240px)}
  .cartes-avis{grid-template-columns:minmax(0,1fr)}
  .avis .cartes-avis{gap:10px}
  .avis .avis-carte{padding:16px;gap:8px}
  .reperes strong{font-size:34px}
  .reperes li{padding:14px 12px 16px 0}
  .reperes li+li{padding-left:12px}
  .volet,.volet.sans-photo{grid-template-columns:minmax(0,1fr)}
  .volet .bande{display:none}
  .prix-liste,.produits{columns:1}
  .tarifs h1{font-size:32px}
  .rang-fixe{display:none}
  .recit{grid-template-columns:1fr;border-bottom:0}
  .recit div,.recit div+div{padding:14px 0;border-left:0;border-bottom:1px solid var(--filet)}
  .notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notes li:nth-child(3){padding-left:0;border-left:0}
  .notes li:nth-child(n+3){border-top:1px solid var(--filet)}
  .appel-bloc{padding:28px 22px}
  .frise{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frise li:nth-child(3){padding-left:0;border-left:0}
  .frise li:nth-child(n+3){border-top:1px solid var(--filet)}
  .prenoms li{grid-template-columns:minmax(0,1fr);gap:6px}
  .portrait img{height:420px;max-width:300px}
  .tel-grand{font-size:42px}
  .venir-bas{grid-template-columns:minmax(0,1fr)}
  .venir-bas .bande{max-width:200px}
  .formulaire{padding:22px 18px}
  .pied .colonnes{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
}

/* Téléphone : toutes les règles sous 720 px */
@media (max-width:720px){
  body{font-size:16px}
  .chapo{font-size:17px}
  .entete{background:var(--noir)}
  .marque img{width:44px;height:44px}
  .marque span{font-size:16px;letter-spacing:.1em}
  .entete .bouton{min-height:44px;padding:10px 13px;font-size:14px}
  .bascule{padding:0 11px}
  .infos-tarifs{grid-template-columns:minmax(0,1fr);gap:26px}
  .onglets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .onglets a{padding:0 6px;font-size:14px;white-space:normal;line-height:1.2}
  .volet-bas{grid-template-columns:minmax(0,1fr)}
  .serie.q3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .serie.q4s{grid-template-columns:repeat(2,minmax(0,1fr))}
  .serie .bande img,.serie.q2 .bande img,.serie.q3 .bande img,.serie.q4 .bande img{height:auto;aspect-ratio:3/4}
  .faq summary{font-size:17px}
  .page-tete{padding-top:30px;padding-bottom:24px}
  .bloc{padding-top:32px;padding-bottom:32px}
  .bloc.fin{padding-bottom:64px}
  .avec-barre .barre{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--noir);border-top:1px solid var(--filet)}
  .barre a{min-height:48px;padding:10px;clip-path:none}
  .barre a+a{background:var(--ivoire)}
  .pied{padding:10px 0 calc(10px + env(safe-area-inset-bottom));text-align:center;font-size:13.5px}
  .avec-barre .pied{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .pied .colonnes{display:block}
  .pied .marque-pied{justify-content:center;gap:8px;margin-bottom:4px;font-size:13.5px}
  .pied .marque-pied img{width:24px;height:24px}
  .pied .col-salon,.pied h2,.reseaux span{display:none}
  .pied address br{display:none}
  .pied address a::before{content:"· "}
  .pied .bas span{display:block}
  .pied ul{display:inline}
  .pied li{display:inline}
  .pied li+li::before{content:" · "}
  .pied ul a,.pied address a{display:inline;min-height:0;font-size:12px;line-height:32px}
  .pied address a{font-size:13.5px}
  .reseaux{flex-direction:row;justify-content:center;gap:10px;margin-top:2px}
  .reseaux a{justify-content:center;width:44px}
  .reseaux svg{width:36px;height:36px;padding:9px}
  .pied .bas{display:block;margin-top:2px;padding-top:6px;font-size:10.5px;line-height:1.45}
  .pied .bas a{display:inline}
}
@media (max-width:420px){
  .marque span{display:none}
}

/* Téléphone et tablette au doigt : accueil en défilement natif aimanté, sans script ni flou. */
@media (pointer:coarse){
  html.accueil{scroll-snap-type:y mandatory;scroll-padding:0}
  html.accueil .ecran{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:0}
  html.accueil .pied{scroll-snap-align:end}
}
@media print{.entete,.barre{display:none}}