/* SONRISA Aesthetics, institut de beauté à Angers.
   Palette validée par la cliente (octobre 2026) : beige clair et froid,
   bordeaux à la place du marron. Contrastes vérifiés : encre 14,6:1,
   bordeaux 10,2:1, gris 5,6:1 sur le fond ; ivoire 14,9:1 sur le bordeaux nuit. */

@font-face { font-family: 'Gilda Display'; src: url('../fonts/gilda-display.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost.woff2') format('woff2'); font-weight: 300 500; font-display: swap; }

:root {
  --fond: #F7F5F2;      /* ivoire froid, fond principal */
  --beige: #EDE8E2;     /* beige clair, sections alternées */
  --lin: #DED7CE;       /* filets, fonds d'image */
  --encre: #2A1F22;     /* texte principal */
  --gris: #6B605D;      /* texte secondaire */
  --bordeaux: #6E1E2C;  /* titres, boutons, accents */
  --nuit: #3E111A;      /* sections sombres, pied de page */
  --rose: #D8C3C6;      /* texte secondaire sur fond sombre */
  --pad: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: 'Jost', system-ui, sans-serif; font-weight: 300; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--fond); padding: 12px 18px; }
.skip:focus { top: 12px; }
a[href^="tel:"] { white-space: nowrap; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.caps { font-size: 11.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; }
.t { font-family: 'Gilda Display', Georgia, serif; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; line-height: 1.08; }
.k { color: var(--bordeaux); margin-bottom: 18px; }
.link { display: inline-block; padding: 12px 0 4px; text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity .2s; }
.link:hover { opacity: .65; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 28px; border: 1px solid currentColor; text-decoration: none; letter-spacing: .04em; transition: background-color .3s, color .3s, border-color .3s; }
.btn:hover { background: var(--bordeaux); color: var(--fond); border-color: var(--bordeaux); }
.btn.fill { background: var(--bordeaux); color: var(--fond); border-color: var(--bordeaux); }
.btn.fill:hover { background: var(--nuit); border-color: var(--nuit); }
.btn.clair { color: var(--fond); border-color: rgba(247,245,242,.65); }
.btn.clair:hover { background: var(--fond); color: var(--bordeaux); border-color: var(--fond); }
.btn.plein-clair { background: var(--fond); color: var(--bordeaux); border-color: var(--fond); }
.btn.plein-clair:hover { background: transparent; color: var(--fond); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.media { position: relative; overflow: hidden; background: var(--lin); }
.media img, .media video { position: absolute; inset: 0; transition: transform 1.1s var(--ease); }
.r45 { aspect-ratio: 4 / 5; }
.r34 { aspect-ratio: 3 / 4; }
.r916 { aspect-ratio: 9 / 16; }

/* Apparitions au défilement */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.vu { opacity: 1; transform: none; }

/* ---------- En-tête ---------- */
.top { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; padding: 18px var(--pad); background: rgba(247,245,242,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lin); }
.top .logo img { height: 40px; width: auto; }
.top .nav ul { display: flex; justify-content: center; gap: 34px; }
.top .nav { font-size: 11px; }
.top .nav a { text-decoration: none; padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.top .nav a:hover, .top .nav a[aria-current="page"] { background-size: 100% 1px; }
.top .nav a[aria-current="page"] { color: var(--bordeaux); }
.top .resa { min-height: 42px; padding: 10px 22px; font-size: 11px; }
.top .m-seul, .menu-btn { display: none; }
.menu-btn { background: none; border: 0; padding: 12px 0; cursor: pointer; }
/* Accueil : le menu flotte sur la photo */
.top.sur { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom-color: rgba(247,245,242,.25); color: var(--fond); }

/* ---------- Onglets ronds ---------- */
.onglets { padding: 34px var(--pad) 10px; }
.onglets ul { display: flex; justify-content: center; gap: 34px; }
.onglets a { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; }
.onglets .rond { display: block; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; padding: 3px; border: 1px solid transparent; transition: border-color .3s, transform .5s var(--ease); }
.onglets .rond img { border-radius: 50%; }
.onglets .lib { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; white-space: nowrap; }
.onglets a:hover .rond { transform: translateY(-3px); border-color: var(--lin); }
.onglets a[aria-current="page"] .rond { border-color: var(--bordeaux); }
.onglets a[aria-current="page"] .lib { color: var(--bordeaux); }
.choix { background: var(--fond); padding: 22px 0 46px; border-bottom: 1px solid var(--lin); }
.choix .onglets { padding-top: 34px; }
.choix .rond { width: 112px; height: 112px; }

/* ---------- Accueil : couverture ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; color: var(--fond); display: flex; align-items: flex-end; }
.hero picture, .hero picture img { position: absolute; inset: 0; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,12,18,.45) 0%, rgba(42,12,18,.15) 35%, rgba(42,12,18,.78) 100%); }
.hero .in { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--pad) 72px; }
.hero .sub { margin-bottom: 22px; }
.hero .big { font-size: clamp(42px, 6.4vw, 92px); max-width: 15ch; margin-bottom: 30px; }
.preuves { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; font-size: 10.5px; }
.preuves li { border: 1px solid rgba(247,245,242,.55); padding: 9px 14px; }
.js .hero picture img { animation: zoom 2.4s var(--ease) both; }
.js .hero .in > * { animation: monte 1.1s var(--ease) both; }
.js .hero .sub { animation-delay: .2s; } .js .hero .big { animation-delay: .35s; } .js .hero .preuves { animation-delay: .55s; } .js .hero .cta { animation-delay: .7s; }
.js:not(.deja) .hero .sub { animation-delay: 2.4s; } .js:not(.deja) .hero .big { animation-delay: 2.55s; } .js:not(.deja) .hero .preuves { animation-delay: 2.75s; } .js:not(.deja) .hero .cta { animation-delay: 2.9s; }
@keyframes zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Rideau d'ouverture (une fois par visite) */
.ouverture { display: none; }
.js .ouverture { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; position: fixed; inset: 0; z-index: 100; background: var(--fond); animation: rideau 1s 1.9s cubic-bezier(.7, 0, .2, 1) forwards; }
.js.deja .ouverture { display: none; }
.ouverture img { width: min(300px, 60vw); height: auto; opacity: 0; animation: logo 1s .15s var(--ease) forwards; }
.ouverture .trait { display: block; height: 1px; width: min(180px, 40vw); background: var(--bordeaux); transform: scaleX(0); animation: trait .9s .75s var(--ease) forwards; }
@keyframes rideau { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes logo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes trait { to { transform: scaleX(1); } }

/* ---------- Accueil : le laser en vedette ---------- */
.phare { background: var(--nuit); color: var(--fond); padding: 120px 0; }
.duo { display: grid; grid-template-columns: 5fr 6fr; gap: 90px; align-items: center; }
.phare .k, .lhero .k { color: var(--rose); }
.phare h2 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 26px; }
.phare .txt > p { font-size: 17px; line-height: 1.75; color: var(--rose); max-width: 500px; margin-bottom: 36px; }
.faits { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(216,195,198,.35); border-bottom: 1px solid rgba(216,195,198,.35); margin-bottom: 38px; }
.faits li { padding: 22px 16px 22px 0; display: flex; flex-direction: column; gap: 8px; }
.faits li + li { padding-left: 18px; border-left: 1px solid rgba(216,195,198,.35); }
.faits .n { font-size: 28px; }
.faits span:last-child { font-size: 13px; line-height: 1.45; color: var(--rose); }

/* ---------- Accueil : dans nos cabines ---------- */
.cabines { padding: 110px 0 120px; }
.tete { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 40px; }
.cabines h2 { font-size: clamp(30px, 3.4vw, 44px); color: var(--bordeaux); }
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.reel { position: relative; display: block; text-decoration: none; color: var(--fond); }
.reel:nth-child(2) { --d: .08s; } .reel:nth-child(3) { --d: .16s; } .reel:nth-child(4) { --d: .24s; }
.reel .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(42,12,18,.65)); }
.reel .leg { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; font-size: 11px; }
.reel:hover video { transform: scale(1.04); }

/* ---------- Avis ---------- */
.avis { background: var(--beige); padding: 110px 20px; text-align: center; }
.avis .note { display: flex; align-items: baseline; justify-content: center; gap: 14px; color: var(--bordeaux); margin-bottom: 26px; }
.avis .note .n { font-size: 46px; }
.avis .q { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.2; max-width: 860px; margin: 0 auto 20px; --d: .1s; }
.avis .d { font-size: 15px; color: var(--gris); --d: .2s; }

/* ---------- Pages : en-tête de rubrique ---------- */
.phead { padding-top: 70px; padding-bottom: 56px; text-align: center; }
.phead h1 { font-size: clamp(38px, 5vw, 66px); color: var(--bordeaux); margin-bottom: 22px; }
.phead .chapo { font-size: 17.5px; line-height: 1.7; color: var(--gris); max-width: 600px; margin: 0 auto; }

/* Onglets internes, collés sous l'en-tête */
.ancres { position: sticky; top: 77px; z-index: 20; background: rgba(247,245,242,.94); backdrop-filter: blur(8px); border-top: 1px solid var(--lin); border-bottom: 1px solid var(--lin); font-size: 10.5px; }
.ancres ul { display: flex; justify-content: center; gap: 6px; max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }
.ancres a { display: block; padding: 17px 16px; text-decoration: none; border-bottom: 2px solid transparent; transition: color .3s, border-color .3s; }
.ancres a:hover, .ancres a.ici { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }

/* Une expertise : photo d'un côté, texte de l'autre, en alternance */
.exp { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding-top: 110px; padding-bottom: 20px; }
.exp.inv .media { order: 2; }
.exp .media { max-width: 500px; width: 100%; justify-self: center; }
.exp h2 { font-size: clamp(32px, 3.6vw, 48px); color: var(--bordeaux); margin-bottom: 20px; }
.exp .txt > p { font-size: 17px; line-height: 1.75; color: var(--gris); max-width: 480px; margin-bottom: 26px; }
.exp .txt { --d: .1s; }
.exp .btn { margin-top: 30px; }
.exp .cta { margin-top: 30px; } .exp .cta .btn { margin-top: 0; }
.prix { border-top: 1px solid var(--lin); max-width: 480px; }
.prix li { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--lin); font-size: 15.5px; }
.prix li span:last-child { white-space: nowrap; font-weight: 400; color: var(--bordeaux); }
.typo-bloc { background: var(--bordeaux); display: flex; align-items: center; justify-content: center; }
.typo { color: var(--fond); font-size: clamp(28px, 3vw, 40px); text-align: center; line-height: 1.2; }

/* Le Lifting, dans le bloc visage */
.lift { margin-top: 40px; padding: 30px 30px 10px; background: var(--beige); max-width: 520px; }
.lift h3 { font-size: 21px; color: var(--bordeaux); margin-bottom: 8px; }
.lift > p { font-size: 15px; color: var(--gris); margin-bottom: 14px; }
.etape { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--lin); }
.etape .num { font-family: 'Gilda Display', serif; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; color: var(--bordeaux); }
.etape span:last-child { font-size: 14.5px; line-height: 1.55; }

/* Avant / après */
.resultat { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: center; padding-top: 110px; padding-bottom: 20px; }
.resultat h2 { font-size: clamp(30px, 3.2vw, 42px); color: var(--bordeaux); margin-bottom: 18px; }
.resultat p { font-size: 17px; line-height: 1.7; color: var(--gris); max-width: 380px; }
.ba { position: relative; aspect-ratio: 1000 / 888; overflow: hidden; background: var(--lin); --pos: 50%; }
.ba img { position: absolute; inset: 0; }
.ba .avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba .poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; background: var(--fond); pointer-events: none; }
.ba .poignee::after { content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: var(--fond); color: var(--bordeaux); display: flex; align-items: center; justify-content: center; font-size: 18px; letter-spacing: .1em; box-shadow: 0 6px 20px rgba(42,12,18,.25); }
.ba input:focus-visible ~ .poignee::after { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.ba .etiq { position: absolute; bottom: 18px; color: var(--fond); font-size: 10.5px; text-shadow: 0 1px 6px rgba(0,0,0,.4); pointer-events: none; }
.ba .g { left: 20px; } .ba .d { right: 20px; }

/* ---------- Laser ---------- */
.lhero { background: var(--nuit); color: var(--fond); padding: 90px 0 100px; }
.lhero .duo { grid-template-columns: 6fr 5fr; }
.lhero h1 { font-size: clamp(42px, 5.4vw, 76px); margin-bottom: 26px; }
.lhero .chapo { font-size: 18px; line-height: 1.75; color: var(--rose); max-width: 520px; margin-bottom: 36px; }
.lhero .media { max-width: 460px; justify-self: end; width: 100%; }
.atouts { padding-top: 110px; padding-bottom: 100px; }
.atouts h2, .cure h2, .faq h2, .trouver h2, .gestes h2 { font-size: clamp(30px, 3.4vw, 44px); color: var(--bordeaux); margin-bottom: 44px; }
.atouts ul { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--bordeaux); }
.atouts li { padding: 30px 26px 10px 0; }
.atouts li + li { padding-left: 26px; border-left: 1px solid var(--lin); }
.atouts li:nth-child(2) { --d: .08s; } .atouts li:nth-child(3) { --d: .16s; } .atouts li:nth-child(4) { --d: .24s; }
.atouts .n { display: block; font-size: 40px; color: var(--bordeaux); margin-bottom: 18px; }
.atouts .n.long { font-size: 24px; line-height: 40px; }
.atouts h3 { font-size: 11px; margin-bottom: 10px; }
.atouts p { font-size: 15px; line-height: 1.65; color: var(--gris); }
.cure { background: var(--beige); padding: 110px 0; }
.cure .duo { grid-template-columns: 5fr 6fr; }
.cure .media { max-width: 440px; }
.pas li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 24px 0; border-top: 1px solid var(--lin); }
.pas .num { font-size: 30px; color: var(--bordeaux); }
.pas h3 { font-size: 11px; margin-bottom: 8px; }
.pas p { font-size: 15.5px; line-height: 1.7; color: var(--gris); }

/* ---------- Questions ---------- */
.faq { padding-top: 110px; padding-bottom: 110px; max-width: 900px; }
.faq details { border-bottom: 1px solid var(--lin); }
.faq details:first-of-type { border-top: 1px solid var(--bordeaux); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--bordeaux); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; font-size: 16px; line-height: 1.7; color: var(--gris); max-width: 680px; }

/* ---------- Équipe ---------- */
.quatre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.membre { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #1c1416; }
.membre:nth-child(2) { --d: .1s; } .membre:nth-child(3) { --d: .2s; } .membre:nth-child(4) { --d: .3s; }
.membre img { position: absolute; inset: 0; transition: transform 1.1s var(--ease); }
.membre:hover img { transform: scale(1.04); }
.membre::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(30,10,14,0) 50%, rgba(30,10,14,.85)); }
.membre figcaption { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; color: #fff; }
.membre .nom { display: block; font-size: 34px; font-weight: 500; letter-spacing: -.01em; line-height: 1; margin-bottom: 10px; }
.membre .role { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 300; line-height: 1.5; }
.roles { padding-top: 70px; }
.roles dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.roles div { border-top: 1px solid var(--bordeaux); padding-top: 18px; }
.roles dt { font-size: 22px; color: var(--bordeaux); margin-bottom: 10px; }
.roles dd { font-size: 15px; line-height: 1.65; color: var(--gris); }
.gestes { padding-top: 110px; padding-bottom: 110px; }
.quatre-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.quatre-g figure { margin: 0; }
.quatre-g figure:nth-child(2) { --d: .1s; } .quatre-g figure:nth-child(3) { --d: .2s; } .quatre-g figure:nth-child(4) { --d: .3s; }
.quatre-g figure:hover img { transform: scale(1.04); }
.quatre-g figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 0 10px; border-bottom: 1px solid var(--lin); }
.quatre-g figcaption .t { font-size: 17px; }
.quatre-g figcaption span:last-child { font-size: 13.5px; color: var(--gris); white-space: nowrap; }
.quatre-g img[src*="cils"] { object-position: 35% 50%; }
.quatre-g img[src*="ongles"] { object-position: 50% 45%; }

/* ---------- Maison ---------- */
.mosaique { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 300px 300px 300px; gap: 14px;
  grid-template-areas: "a b c c" "a d c c" "e f f g"; }
.mosaique figure { position: relative; margin: 0; overflow: hidden; background: var(--lin); }
.mosaique img, .mosaique video { position: absolute; inset: 0; transition: transform 1.1s var(--ease); }
.mosaique figure:hover img, .mosaique figure:hover video { transform: scale(1.04); }
.g1 { grid-area: a; } .g2 { grid-area: b; } .g3 { grid-area: c; } .g4 { grid-area: d; } .g5 { grid-area: e; } .g6 { grid-area: f; } .g7 { grid-area: g; }
.mosaique figure:nth-child(2) { --d: .06s; } .mosaique figure:nth-child(3) { --d: .12s; } .mosaique figure:nth-child(4) { --d: .18s; } .mosaique figure:nth-child(5) { --d: .24s; } .mosaique figure:nth-child(6) { --d: .3s; } .mosaique figure:nth-child(7) { --d: .36s; }
.trouver { padding-top: 110px; padding-bottom: 110px; }
.trois-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.trois-col > div { border-top: 1px solid var(--bordeaux); padding-top: 18px; }
.trois-col h3 { font-size: 11px; margin-bottom: 12px; }
.trois-col p { font-size: 16px; line-height: 1.8; }

/* ---------- Formations ---------- */
.form { background: var(--nuit); color: var(--fond); padding: 90px 0 110px; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trois article:nth-child(2) { --d: .1s; } .trois article:nth-child(3) { --d: .2s; }
.form .k { color: var(--rose); margin: 22px 0 8px; }
.form h2 { font-size: 22px; margin-bottom: 10px; }
.form article > p:last-child { font-size: 15px; line-height: 1.6; color: var(--rose); }
.form article:hover video, .form article:hover img { transform: scale(1.04); }
.form .cta { justify-content: center; margin-top: 60px; }

/* ---------- Tarifs ---------- */
.carte-prix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 40px; padding-top: 20px; padding-bottom: 20px; }
.carte-prix h2 { font-size: 22px; color: var(--bordeaux); margin-bottom: 16px; }
.carte-prix .prix { max-width: none; }
.carte-prix > div:nth-child(3n+2) { --d: .08s; } .carte-prix > div:nth-child(3n) { --d: .16s; }
.carte-prix .tout { grid-column: 1 / -1; text-align: center; }

/* ---------- Appel final ---------- */
.final { background: var(--beige); padding: 110px 0; text-align: center; }
.final h2 { font-size: clamp(32px, 4vw, 48px); color: var(--bordeaux); margin-bottom: 16px; }
.final p { font-size: 16px; color: var(--gris); margin-bottom: 34px; }
.final .cta { justify-content: center; }

/* ---------- Pied de page ---------- */
.infos { background: var(--nuit); color: var(--fond); padding: 90px var(--pad) 50px; }
.infos .grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; font-size: 15px; line-height: 1.9; max-width: 1240px; margin: 0 auto; }
.infos .logo { width: 190px; height: auto; margin-bottom: 26px; }
.infos h3 { color: var(--rose); margin-bottom: 14px; }
.infos a { text-decoration: none; border-bottom: 1px solid rgba(247,245,242,.35); }
.infos a:hover { border-bottom-color: var(--fond); }
.infos .bas { display: flex; justify-content: space-between; gap: 20px; max-width: 1240px; margin: 70px auto 0; padding-top: 24px; border-top: 1px solid rgba(216,195,198,.25); font-size: 13px; color: var(--rose); }
.mbar { display: none; }

/* ---------- Mentions légales ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 80px 20px 120px; }
.legal h1 { font-size: 46px; margin-bottom: 50px; color: var(--bordeaux); }
.legal h2 { font-family: 'Gilda Display', serif; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: 21px; margin: 44px 0 14px; color: var(--bordeaux); }
.legal p { font-size: 17px; line-height: 1.75; margin-bottom: 12px; }

/* Carrousels (téléphone) : points et masquage par défaut */
.points { display: none; }

/* ==================== Tablette ==================== */
@media (max-width: 1100px) {
  :root { --pad: 36px; }
  .top { gap: 24px; }
  .top .nav ul { gap: 20px; }
  .duo, .exp, .resultat { gap: 50px; }
  .onglets ul { gap: 20px; }
  .reels { grid-template-columns: repeat(2, 1fr); }
  .quatre, .roles dl, .quatre-g { grid-template-columns: repeat(2, 1fr); }
  .atouts ul { grid-template-columns: repeat(2, 1fr); }
  .atouts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .atouts li:nth-child(n+3) { border-top: 1px solid var(--lin); }
  .mosaique { grid-template-rows: 240px 240px 240px; }
  .carte-prix { grid-template-columns: repeat(2, 1fr); }
  .infos .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 940px) {
  .top .nav, .top .resa { display: none; }
  .top { grid-template-columns: 1fr auto; }
  .menu-btn { display: inline-block; }
  .top.open { position: fixed; inset: 0; z-index: 40; background: var(--nuit); color: var(--fond); align-content: start; grid-template-rows: auto 1fr; }
  .top.open .nav { display: block; grid-column: 1 / -1; font-size: 15px; margin-top: 40px; }
  .top.open .nav ul { flex-direction: column; align-items: flex-start; gap: 8px; }
  .top.open .nav a[aria-current="page"] { color: var(--rose); }
  .top.open .m-seul { display: block; }
  .top.open .logo img { filter: brightness(0) invert(.96); }
  .top.open .menu-btn { position: absolute; right: var(--pad); top: 22px; }
}

/* ==================== Téléphone ==================== */
@media (max-width: 760px) {
  :root { --pad: 20px; }
  html { scroll-padding-top: 120px; }
  .top { padding: 14px 20px; }
  .top .logo img { height: 32px; }
  .top.open .menu-btn { right: 20px; top: 16px; }

  /* Onglets ronds : une rangée qui défile comme des stories */
  .onglets { padding: 20px 0 6px; }
  .onglets ul { justify-content: flex-start; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 0 20px 6px; scroll-snap-type: x proximity; }
  .onglets ul::-webkit-scrollbar { display: none; }
  .onglets li { scroll-snap-align: start; }
  .onglets .rond, .choix .rond { width: 70px; height: 70px; }
  .onglets .lib { font-size: 9.5px; letter-spacing: .14em; }
  .onglets a { gap: 9px; }
  .choix { padding: 8px 0 26px; }
  .choix .onglets { padding-top: 22px; }

  .hero { height: 92vh; min-height: 560px; }
  .hero .in { padding-bottom: 34px; }
  .hero .sub { font-size: 9.5px; letter-spacing: .2em; margin-bottom: 16px; }
  .hero .big { font-size: 38px; margin-bottom: 20px; }
  .preuves { gap: 6px; margin-bottom: 24px; font-size: 9px; letter-spacing: .16em; }
  .preuves li { padding: 7px 10px; }
  .hero .cta { flex-direction: column; align-items: stretch; gap: 10px; }

  .phare, .cure, .lhero { padding: 64px 0; }
  .duo, .lhero .duo, .cure .duo { grid-template-columns: 1fr; gap: 34px; }
  .phare h2 { font-size: 30px; }
  .phare .txt > p { font-size: 15.5px; margin-bottom: 26px; }
  .faits li { padding: 16px 8px 16px 0; }
  .faits li + li { padding-left: 10px; }
  .faits .n { font-size: 20px; }
  .faits span:last-child { font-size: 11.5px; }
  .phare .media { order: 2; }

  .cabines { padding: 64px 0 56px; }
  .cabines .tete { margin-bottom: 24px; }
  .cabines .tete .link { display: none; }
  .cabines h2 { font-size: 28px; }

  .avis { padding: 60px 20px; }
  .avis .note .n { font-size: 34px; }
  .avis .q { font-size: 26px; }

  .phead { padding-top: 34px; padding-bottom: 34px; text-align: left; }
  .phead h1 { font-size: 34px; }
  .phead h1 br { display: none; }
  .phead .chapo { font-size: 15.5px; margin: 0; }

  .ancres { top: 60px; font-size: 9.5px; }
  .ancres ul { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 10px; gap: 0; }
  .ancres ul::-webkit-scrollbar { display: none; }
  .ancres a { padding: 15px 10px; white-space: nowrap; }

  .exp, .resultat { grid-template-columns: 1fr; gap: 26px; padding-top: 60px; padding-bottom: 0; }
  .exp.inv .media { order: 0; }
  .exp .media { max-width: none; aspect-ratio: 4 / 3; }
  .exp h2, .resultat h2 { font-size: 30px; margin-bottom: 14px; }
  .resultat h2 br { display: none; }
  .exp .txt > p, .resultat p { font-size: 15.5px; margin-bottom: 20px; }
  .exp .btn { width: 100%; margin-top: 24px; }
  .exp .cta { flex-direction: column; align-items: stretch; margin-top: 24px; } .exp .cta .link { align-self: flex-start; }
  .prix li { font-size: 14.5px; padding: 13px 0; }
  .lift { padding: 22px 18px 6px; margin-top: 28px; }
  .etape { grid-template-columns: 1fr; gap: 2px; padding: 11px 0; }
  .typo-bloc { aspect-ratio: 4 / 3; }
  .typo { font-size: 26px; }

  .lhero h1 { font-size: 40px; }
  .lhero .chapo { font-size: 15.5px; margin-bottom: 26px; }
  .lhero .media { max-width: none; aspect-ratio: 4 / 3; }
  .lhero .cta .btn { width: 100%; }
  .atouts, .gestes, .trouver, .faq { padding-top: 64px; padding-bottom: 64px; }
  .atouts h2, .cure h2, .faq h2, .trouver h2, .gestes h2 { font-size: 28px; margin-bottom: 26px; }
  .cure h2 br { display: none; }
  .atouts ul { grid-template-columns: 1fr 1fr; }
  .atouts li { padding: 22px 12px 18px 0; }
  .atouts li + li { padding-left: 12px; }
  .atouts li:nth-child(3) { padding-left: 0; }
  .atouts .n { font-size: 26px; margin-bottom: 10px; }
  .atouts .n.long { font-size: 15px; line-height: 26px; }
  .atouts p { font-size: 13.5px; }
  .cure .media { max-width: none; aspect-ratio: 4 / 3; order: 2; }
  .pas li { grid-template-columns: 46px 1fr; padding: 18px 0; }
  .pas .num { font-size: 24px; }
  .pas p { font-size: 14.5px; }
  .faq summary { font-size: 15.5px; padding: 18px 0; }
  .faq details p { font-size: 15px; }

  /* Équipe : grille 2 × 2, rôles en liste */
  .quatre { gap: 8px; }
  .membre figcaption { left: 12px; right: 12px; bottom: 12px; }
  .membre .nom { font-size: 21px; margin-bottom: 4px; }
  .membre .role { font-size: 8.5px; letter-spacing: .1em; }
  .roles { padding-top: 44px; }
  .roles dl { grid-template-columns: 1fr; gap: 18px; }
  .roles dt { font-size: 19px; margin-bottom: 6px; }
  .roles dd { font-size: 14.5px; }
  /* Gestes : liste illustrée */
  .quatre-g { display: block; border-top: 1px solid var(--lin); }
  .quatre-g figure { display: grid; grid-template-columns: 104px 1fr; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--lin); }
  .quatre-g .media { aspect-ratio: 1 / 1; }
  .quatre-g figcaption { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; border: 0; }

  /* Maison : collage d'une grande photo et quatre petites */
  .mosaique { grid-template-columns: 1.15fr 1fr; grid-template-rows: 150px 150px 200px 260px; grid-template-areas: "a b" "a d" "f g" "c c"; gap: 8px; }
  .g5 { display: none; }
  .mosaique .g3 video { object-position: 50% 40%; }
  .trois-col { grid-template-columns: 1fr; gap: 22px; }
  .trois-col p { font-size: 15px; }

  .form { padding: 34px 0 64px; }
  .form .cta { margin-top: 30px; } .form .cta .btn { width: 100%; }

  .carte-prix { grid-template-columns: 1fr; gap: 34px; }
  .carte-prix h2 { font-size: 20px; margin-bottom: 10px; }
  .carte-prix .tout .btn { width: 100%; }

  .final { padding: 64px 0; text-align: left; }
  .final h2 { font-size: 28px; }
  .final .cta { flex-direction: column; align-items: stretch; }

  .infos { padding: 56px 20px 110px; }
  .infos .grid { gap: 30px 20px; font-size: 14px; }
  .infos .grid > div:first-child { grid-column: 1 / -1; }
  .infos .logo { width: 150px; }
  .infos .bas { margin-top: 44px; flex-direction: column; gap: 10px; }
  .legal { padding-top: 40px; }
  .legal h1 { font-size: 34px; }

  .mbar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--fond); border-top: 1px solid var(--lin); }
  .mbar a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 50px; text-decoration: none; font-weight: 500; font-size: 16px; background: var(--bordeaux); color: var(--fond); }
  .mbar a:last-child { flex: 0 0 116px; background: transparent; color: var(--bordeaux); border: 1px solid var(--bordeaux); }

  /* Carrousels à faire glisser */
  .defile { display: flex !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: -20px; margin-right: -20px; padding: 0 20px 4px; scroll-padding-inline: 20px; overscroll-behavior-x: contain; }
  .defile::-webkit-scrollbar { display: none; }
  .defile:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 4px; }
  .defile > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }
  .reels.defile > * { flex-basis: 58%; }
  .js .defile > * { transition: opacity .9s var(--ease), transform .6s var(--ease); }
  .js .defile > .rv.vu:not(.ici) { transform: scale(.94); transform-origin: 50% 40%; }
  .js .defile > :not(.ici) .media { opacity: .55; }
  .js .defile .media { transition: opacity .6s var(--ease); }
  .js .defile.indice { animation: indice 1.2s .4s var(--ease) 1; }
  @keyframes indice { 0%, 100% { transform: none; } 40% { transform: translateX(-34px); } }
  .points { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .points button { width: 26px; height: 26px; border: 0; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .points button::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: var(--lin); transition: width .35s var(--ease), background-color .35s; }
  .points button[aria-current="true"]::before { width: 22px; background: var(--bordeaux); }
  .form .points button::before { background: rgba(247,245,242,.3); }
  .form .points button[aria-current="true"]::before { background: var(--fond); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .ouverture { display: none; }
  .js .defile > .rv.vu:not(.ici) { transform: none; }
}
.infos .bas a { display: inline-block; padding-top: 12px; }
.infos .bas a { display: inline-block; padding-top: 12px; }

/* =====================================================================
   Composition Sonrisa (octobre 2026) : en-tête au logo centré, ouverture
   en arche, carte des soins interactive, bloc laser bordeaux, mosaïque
   des cabines, équipe en quatre portraits.
   ===================================================================== */
.btn.caps { font-size: 11px; font-weight: 500; letter-spacing: .18em; }
.souligne { display: inline-block; padding: 6px 0; font-size: 15.5px; text-underline-offset: 5px; }
.souligne:hover { color: var(--bordeaux); }
.infos .bas { align-items: flex-end; }

/* En-tête : menu réparti de part et d'autre du logo */
.top { grid-template-columns: 1fr auto 1fr; gap: 30px; padding: 20px var(--pad); }
.top .logo img { height: 44px; }
.top .nav.l ul { justify-content: flex-start; }
.top .nav.r ul { justify-content: flex-end; align-items: center; }
.top .nav .resa { margin-left: 6px; min-height: 40px; padding: 9px 20px; color: var(--fond); background-size: 0; }

/* Onglets texte (quand le menu est replié) */
.rubriques { display: none; }

/* Ouverture : titre à gauche, photo de soin dans l'arche, vignette en superposition */
.ouvre { display: grid; grid-template-columns: 5fr 6fr; gap: 60px; align-items: center; padding-top: 50px; padding-bottom: 110px; }
.ouvre h1 { font-size: clamp(44px, 5.2vw, 76px); color: var(--bordeaux); margin-bottom: 28px; }
.ouvre .chapo { font-size: 17px; line-height: 1.75; color: var(--gris); max-width: 430px; }
.ouvre .cta { margin-top: 34px; }
.visuel { position: relative; height: min(70vw, 660px); }
.visuel .grande { position: absolute; right: 0; top: 0; width: 70%; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--lin); }
.visuel .petite { position: absolute; left: 0; bottom: 0; width: 38%; aspect-ratio: 4 / 5; overflow: hidden; border: 10px solid var(--fond); background: var(--lin); }
.visuel img { width: 100%; height: 100%; object-fit: cover; }
.visuel .note { position: absolute; right: 0; bottom: 0; font-size: 10px; color: var(--gris); }
.js .ouvre .txt > * { animation: monte 1s var(--ease) both; }
.js .ouvre h1 { animation-delay: .1s; } .js .ouvre .chapo { animation-delay: .2s; } .js .ouvre .cta { animation-delay: .3s; }
.js .visuel .grande img { animation: zoom 2.4s var(--ease) both; }
.js .visuel .petite { animation: monte 1.1s .5s var(--ease) both; }
.js:not(.deja) .ouvre .txt > *, .js:not(.deja) .visuel .petite { animation-delay: 2.4s; }

/* Carte des soins : la liste sert d'onglets, la photo suit le survol */
.carte-soins { background: var(--beige); padding: 110px 0; }
.tete-soins { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 50px; }
.tete-soins h2 { font-size: clamp(32px, 3.8vw, 50px); color: var(--bordeaux); }
.tete-soins p { font-size: 16px; color: var(--gris); justify-self: end; --d: .1s; }
.grille-soins { display: grid; grid-template-columns: 7fr 4fr; gap: 70px; align-items: start; }
.liste { border-top: 1px solid var(--lin); counter-reset: none; }
.liste li { border-bottom: 1px solid var(--lin); }
.liste a { display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 10px; padding: 24px 0; text-decoration: none; transition: padding-left .45s var(--ease), color .3s; }
.liste .n { font-family: 'Gilda Display', Georgia, serif; font-size: 15px; color: var(--gris); }
.liste .nom { font-size: clamp(22px, 2.3vw, 32px); }
.liste .px { font-size: 14px; color: var(--gris); }
.liste a:hover, .liste a:focus-visible, .liste a.ici { color: var(--bordeaux); padding-left: 16px; }
.liste a img { display: none; }
.apercu { position: sticky; top: 120px; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--lin); }
.apercu img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.apercu img.on { opacity: 1; transform: none; }

/* Bloc laser bordeaux, image dans l'arche */
.laser-une { background: var(--nuit); color: var(--fond); padding: 110px 0; }
.laser-une .duo { grid-template-columns: 6fr 5fr; }
.laser-une .k { color: var(--rose); }
.laser-une h2 { font-size: clamp(32px, 3.8vw, 50px); margin-bottom: 24px; }
.laser-une .txt > p { font-size: 16.5px; line-height: 1.75; color: var(--rose); max-width: 520px; margin-bottom: 34px; }
.arche { position: relative; overflow: hidden; aspect-ratio: 4 / 5; width: 100%; max-width: 420px; justify-self: center; border-radius: 999px 999px 0 0; background: var(--lin); --d: .12s; }
.arche img { position: absolute; inset: 0; }

/* Dans nos cabines : mosaïque de vidéos, photo et avis */
.cabines h2 { margin-bottom: 40px; }
.bento { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; grid-template-rows: 290px 290px; gap: 12px;
  grid-template-areas: "a b c c" "a d d e"; }
.bento figure { position: relative; margin: 0; overflow: hidden; background: var(--lin); }
.bento figure video, .bento figure img { position: absolute; inset: 0; transition: transform 1.1s var(--ease); }
.bento figure:hover video, .bento figure:hover img { transform: scale(1.04); }
.bento figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 60%, rgba(30,10,14,.55)); }
.bento figcaption { position: absolute; z-index: 2; left: 16px; bottom: 14px; color: #fff; font-size: 10.5px; }
.b1 { grid-area: a; } .b2 { grid-area: b; --d: .06s; } .b3 { grid-area: c; --d: .12s; } .b4 { grid-area: d; --d: .18s; } .b5 { grid-area: e; --d: .24s; }
.b3 { margin: 0; background: var(--bordeaux); color: var(--fond); padding: 36px 40px; display: flex; flex-direction: column; justify-content: space-between; }
.b3 p { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
.b3 footer { display: flex; align-items: baseline; gap: 12px; color: var(--rose); }
.b3 .n { font-size: 34px; color: var(--fond); }

/* L'équipe : texte et quatre portraits en quinconce */
.equipe-une { padding: 30px 0 120px; }
.equipe-une .wrap { display: grid; grid-template-columns: 4fr 7fr; gap: 70px; align-items: center; }
.equipe-une h2 { font-size: clamp(30px, 3.2vw, 42px); color: var(--bordeaux); margin-bottom: 20px; }
.equipe-une p { font-size: 16px; line-height: 1.75; color: var(--gris); margin-bottom: 14px; }
.portraits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.portraits li:nth-child(even) { margin-top: 46px; }
.portraits li:nth-child(2) { --d: .08s; } .portraits li:nth-child(3) { --d: .16s; } .portraits li:nth-child(4) { --d: .24s; }
.portraits img { aspect-ratio: 4 / 5; height: auto; background: #1c1416; }
.portraits .t { display: block; font-size: 18px; margin-top: 12px; }
.portraits .r { display: block; font-size: 13px; color: var(--gris); margin-top: 3px; }

@media (max-width: 1100px) {
  .ouvre { gap: 40px; }
  .grille-soins { gap: 40px; }
  .bento { grid-template-rows: 230px 230px; }
  .equipe-une .wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 940px) {
  .top { grid-template-columns: 1fr auto; }
  .top .logo { order: -1; }
  .top.open .nav.r { margin-top: 6px; }
  .top.open .nav.r ul { align-items: flex-start; }
  .top.open .nav .resa { margin: 18px 0 0; background: var(--fond); color: var(--bordeaux); border-color: var(--fond); }
  .rubriques { display: block; border-bottom: 1px solid var(--lin); }
  .rubriques ul { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 12px; }
  .rubriques ul::-webkit-scrollbar { display: none; }
  .rubriques a { display: block; padding: 14px 10px 12px; font-size: 10px; white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; }
  .rubriques a[aria-current="page"] { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }
}
@media (max-width: 760px) {
  .top .logo img { height: 32px; }
  .ouvre { grid-template-columns: 1fr; gap: 34px; padding-top: 30px; padding-bottom: 64px; }
  .ouvre h1 { font-size: 40px; }
  .ouvre h1 br { display: none; }
  .ouvre .chapo { font-size: 15.5px; }
  .ouvre .cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .ouvre .cta .souligne { align-self: flex-start; }
  .visuel { height: 118vw; }
  .visuel .grande { width: 76%; }
  .visuel .petite { width: 42%; border-width: 7px; }
  .carte-soins { padding: 60px 0; }
  .tete-soins { grid-template-columns: 1fr; gap: 10px; margin-bottom: 26px; }
  .tete-soins h2 { font-size: 30px; }
  .tete-soins p { justify-self: start; font-size: 15px; }
  .grille-soins { grid-template-columns: 1fr; }
  .apercu { display: none; }
  .liste a { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 12px 0; }
  .liste a img { display: block; grid-row: 1 / 3; grid-column: 1; width: 64px; height: 80px; border-radius: 32px 32px 0 0; }
  .liste .n { display: none; }
  .liste .nom { font-size: 20px; align-self: end; }
  .liste .px { align-self: start; }
  .liste a:hover, .liste a:focus-visible, .liste a.ici { padding-left: 0; }
  .laser-une { padding: 60px 0; }
  .laser-une .duo { grid-template-columns: 1fr; gap: 36px; }
  .laser-une h2 { font-size: 30px; }
  .laser-une .txt > p { font-size: 15.5px; }
  .laser-une .btn { width: 100%; }
  .arche { max-width: 300px; }
  .cabines h2 { margin-bottom: 24px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 250px 200px auto 200px; grid-template-areas: "a b" "a d" "c c" "e e"; gap: 8px; }
  .b3 { padding: 26px 22px; gap: 20px; }
  .b3 p { font-size: 22px; }
  .equipe-une { padding: 0 0 64px; }
  .equipe-une h2 { font-size: 28px; }
  .equipe-une h2 br { display: none; }
  .portraits { grid-template-columns: 1fr 1fr; gap: 10px; }
  .portraits li:nth-child(even) { margin-top: 30px; }
  .infos .bas { align-items: flex-start; }
}
.top .nav .resa { background: var(--bordeaux); color: var(--fond); }
.top .nav .resa:hover { background: var(--nuit); border-color: var(--nuit); }
@media (min-width: 761px) {
  .ouvre { grid-template-columns: 6fr 5fr; }
  .ouvre h1 { font-size: clamp(40px, 4.2vw, 60px); }
  .visuel { height: min(52vw, 600px); }
  .visuel .grande { width: 78%; }
}
/* Avant / après sur l'accueil */
.resultat-une { padding-top: 40px; padding-bottom: 110px; }
.resultat-une .txt p { margin-bottom: 16px; }
@media (max-width: 760px) { .resultat-une { padding-top: 20px; padding-bottom: 64px; } }
.resultat-une .txt .k { font-size: 11.5px; color: var(--bordeaux); margin-bottom: 16px; max-width: none; }

/* =====================================================================
   Mélange final : structure Sonrisa (logo centré, carte des soins en
   arche, bloc laser, avant / après, pied bordeaux) et éléments repris
   de l'inspiration (bandeau beige, onglets ronds, diaporama, rangée de
   vidéos, bloc photo et texte).
   ===================================================================== */
:root { --bande: #EDE8E2; }
.top { background: var(--bande); border-bottom: 0; }
.rubriques { display: none !important; }

/* Onglets ronds en photo */
.ronds { background: var(--bande); padding: 4px var(--pad) 22px; border-bottom: 1px solid var(--lin); }
.ronds ul { display: flex; justify-content: center; gap: 30px; }
.ronds a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.ronds .rond { display: block; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; transition: transform .5s var(--ease), box-shadow .3s; }
.ronds .rond img { border-radius: 50%; }
.ronds .lib { font-size: 13px; }
.ronds a:hover .rond { transform: translateY(-3px); }
.ronds a[aria-current="page"] .rond { box-shadow: 0 0 0 2px var(--bande), 0 0 0 3px var(--bordeaux); }
.ronds a[aria-current="page"] .lib { color: var(--bordeaux); }

/* Diaporama, titres en serif */
.diapo { padding-top: 22px; }
.slides { position: relative; aspect-ratio: 2.1 / 1; max-height: 640px; width: 100%; overflow: hidden; background: var(--lin); }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 0s 1.1s; }
.slide.on { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.1s var(--ease); }
.slide picture, .slide img { position: absolute; inset: 0; }
.slide img { transform: scale(1.06); transition: transform 7s linear; }
.slide.on img { transform: scale(1); }
.slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(30,10,14,.55)); }
.slide .leg { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 62px; text-align: center; color: #fff; }
.slide .titre { font-size: clamp(30px, 3.4vw, 48px); margin-bottom: 20px; }
.slide.on .leg > * { animation: monte .9s var(--ease) both; }
.slide.on .leg .btn { animation-delay: .12s; }
.tirets { position: absolute; z-index: 3; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 4px; }
.tirets button { width: 40px; height: 24px; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.tirets button::before { content: ''; display: block; width: 100%; height: 2px; background: rgba(255,255,255,.45); transition: background-color .3s; }
.tirets button[aria-current="true"]::before { background: #fff; }

/* La phrase signature */
.phrase { text-align: center; padding-top: 90px; padding-bottom: 90px; }
.phrase p { font-size: clamp(28px, 3.6vw, 48px); color: var(--bordeaux); }

/* Rangée de vidéos avec bouton lecture */
.videos { padding-top: 100px; padding-bottom: 60px; }
.videos h2 { font-size: clamp(28px, 3vw, 40px); color: var(--bordeaux); margin-bottom: 36px; text-align: center; }
.rangee { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vid { margin: 0; }
.vid:nth-child(2) { --d: .08s; } .vid:nth-child(3) { --d: .16s; } .vid:nth-child(4) { --d: .24s; }
.vid .cadre { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--lin); }
.vid video { position: absolute; inset: 0; }
.vid figcaption { font-size: 15px; text-align: center; margin-top: 14px; }
.lecture { position: absolute; z-index: 2; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.6); backdrop-filter: blur(4px); cursor: pointer; transition: opacity .3s, transform .3s var(--ease); }
.lecture::before { content: ''; position: absolute; left: 24px; top: 19px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.lecture:hover { transform: scale(1.06); }
.vid.joue .lecture { opacity: 0; }
.vid.joue .lecture::before { left: 21px; top: 20px; width: 6px; height: 20px; border: 0; border-left: 5px solid #fff; border-right: 5px solid #fff; box-sizing: content-box; }
.vid.joue .cadre:hover .lecture, .vid.joue .lecture:focus-visible { opacity: 1; }

/* Bloc photo et texte */
.moitie { display: grid; grid-template-columns: 1fr 1fr; background: var(--beige); min-height: 560px; }
.moitie .img { position: relative; overflow: hidden; background: var(--lin); }
.moitie .img img { position: absolute; inset: 0; }
.moitie .txt { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 10%; }
.moitie .txt h2 { font-size: clamp(28px, 2.8vw, 38px); color: var(--bordeaux); margin-bottom: 20px; }
.moitie .txt p { font-size: 16.5px; line-height: 1.75; color: var(--gris); max-width: 460px; margin-bottom: 12px; }
.moitie .btn { margin-top: 20px; }

@media (max-width: 940px) {
  .ronds ul { justify-content: flex-start; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 0 4px 4px; }
  .ronds ul::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) {
  .ronds { padding: 2px 12px 14px; }
  .ronds .rond { width: 62px; height: 62px; }
  .ronds .lib { font-size: 11.5px; white-space: nowrap; }
  .diapo { padding: 0; }
  .slides { aspect-ratio: 4 / 5; max-height: none; }
  .slide .leg { bottom: 54px; }
  .slide .titre { font-size: 30px; margin-bottom: 14px; }
  .phrase { padding-top: 54px; padding-bottom: 54px; }
  .phrase p { font-size: 26px; }
  .phrase br { display: none; }
  .videos { padding-top: 60px; padding-bottom: 40px; }
  .videos h2 { margin-bottom: 22px; }
  .rangee.defile > * { flex-basis: 68%; }
  .moitie { grid-template-columns: 1fr; min-height: 0; }
  .moitie .img { aspect-ratio: 4 / 5; order: -1; }
  .moitie .txt { padding: 40px 24px 50px; }
  .moitie .txt h2 br { display: none; }
  .moitie .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .slide img { transform: none; } }
.final { background: var(--fond); }

/* Accueil : ouverture en deux parties, panneau bordeaux et diaporama */
.entree { display: grid; grid-template-columns: 5fr 7fr; padding-top: 24px; }
.panneau { background: var(--nuit); color: var(--fond); padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; min-height: 620px; }
.panneau .k { color: var(--rose); margin-bottom: 22px; }
.panneau h1 { font-size: clamp(34px, 3.5vw, 52px); margin-bottom: 36px; }
.panneau .souligne { color: var(--fond); }
.panneau .souligne:hover { color: var(--rose); }
.js .panneau > * { animation: monte 1s var(--ease) both; }
.js .panneau h1 { animation-delay: .1s; } .js .panneau .cta { animation-delay: .22s; }
.js:not(.deja) .panneau > * { animation-delay: 2.4s; }
.entree .diapo { position: relative; padding: 0; }
.entree .slides { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; height: 100%; }
.entree .slide::after { background: linear-gradient(transparent 50%, rgba(30,10,14,.55)); }
.entree .slide .leg { left: 40px; right: 40px; bottom: 40px; text-align: left; }
.entree .slide .titre { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 10px; }
.decouvrir { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; padding: 10px 0; }
.decouvrir::after { content: ''; width: 44px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.decouvrir:hover::after { width: 80px; }
.entree .tirets { left: auto; right: 34px; bottom: 44px; }

/* Onglets ronds, sous l'ouverture sur l'accueil */
.univers .ronds { background: none; border: 0; padding-top: 46px; padding-bottom: 60px; }
.univers .ronds ul { gap: 40px; }
.univers .ronds .rond { width: 96px; height: 96px; }
.univers .ronds .lib { font-size: 14px; }

@media (max-width: 940px) {
  .panneau { padding: 50px 36px; min-height: 520px; }
}
@media (max-width: 760px) {
  .entree { grid-template-columns: 1fr; padding-top: 0; }
  .panneau { min-height: 0; padding: 40px 22px 42px; }
  .panneau h1 { font-size: 32px; margin-bottom: 26px; }
  .panneau h1 br { display: none; }
  .panneau .cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .panneau .cta .souligne { align-self: flex-start; }
  .entree .diapo { aspect-ratio: 4 / 5; }
  .entree .slide .leg { left: 22px; right: 22px; bottom: 30px; }
  .entree .slide .titre { font-size: 26px; }
  .entree .tirets { right: 16px; bottom: 34px; }
  .univers .ronds { padding: 30px 12px 36px; }
  .univers .ronds ul { gap: 16px; }
  .univers .ronds .rond { width: 70px; height: 70px; }
  .univers .ronds .lib { font-size: 12px; }
}
.panneau h1 { font-size: clamp(32px, 3.1vw, 46px); }
.entree .tirets { top: 26px; bottom: auto; right: 30px; }
@media (max-width: 760px) { .panneau h1 { font-size: 32px; } .entree .tirets { top: 16px; right: 16px; } }
@media (min-width: 761px) {
  .panneau { padding-left: 46px; padding-right: 40px; }
  .panneau h1 { font-size: clamp(28px, 2.75vw, 40px); }
}

/* Fenêtre de réservation : petite carte en coin, une fois par visite */
.popup { position: fixed; z-index: 45; right: 24px; bottom: 24px; width: 420px; display: grid; grid-template-columns: 130px 1fr; background: var(--fond); box-shadow: 0 18px 50px rgba(42,12,18,.22); border-top: 3px solid var(--bordeaux); opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.popup[hidden] { display: none; }
.popup.ouverte { opacity: 1; transform: none; }
.popup-img { position: relative; overflow: hidden; border-radius: 0 0 0 0; }
.popup-img img { position: absolute; inset: 0; }
.popup-txt { padding: 24px 24px 22px; }
.popup .k { font-size: 10px; margin-bottom: 8px; }
.popup h2 { font-size: 20px; color: var(--bordeaux); margin-bottom: 10px; padding-right: 20px; }
.popup-txt > p { font-size: 14px; line-height: 1.55; color: var(--gris); margin-bottom: 16px; }
.popup-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.popup-cta .btn { min-height: 42px; padding: 10px 16px; font-size: 10px; }
.popup-cta .souligne { font-size: 14px; }
.popup-fermer { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; }
.popup-fermer::before, .popup-fermer::after { content: ''; position: absolute; left: 12px; top: 19px; width: 16px; height: 1.5px; background: var(--encre); transform: rotate(45deg); }
.popup-fermer::after { transform: rotate(-45deg); }
.popup-fermer:hover::before, .popup-fermer:hover::after { background: var(--bordeaux); }
@media (max-width: 760px) {
  .popup { left: 10px; right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); width: auto; grid-template-columns: 96px 1fr; }
  .popup-txt { padding: 18px 16px 16px; }
  .popup h2 { font-size: 18px; }
  .popup-txt > p { font-size: 13px; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .popup { transform: none; } }

/* Téléphone : ouverture plein écran, la phrase posée sur la photo */
@media (max-width: 760px) {
  .entree { position: relative; display: block; height: calc(100svh - 72px); min-height: 580px; max-height: 860px; padding: 0; }
  .entree .diapo { position: absolute; inset: 0; aspect-ratio: auto; }
  .entree .slide::after { background: linear-gradient(rgba(30,10,14,.35) 0%, transparent 22%, transparent 40%, rgba(62,17,26,.55) 60%, rgba(62,17,26,.94) 100%); }
  .panneau { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; background: none; padding: 0 22px 30px; }
  .panneau .k { margin-bottom: 12px; }
  .panneau h1 { font-size: 34px; margin-bottom: 22px; }
  .entree .slide .leg { top: 50px; bottom: auto; left: 22px; right: 22px; }
  .entree .slide .titre { font-size: 15px; letter-spacing: .14em; margin-bottom: 0; }
  .entree .slide .decouvrir { display: none; }
  .entree .tirets { top: 18px; left: 16px; right: auto; }
}
@media (max-width: 760px) {
  .panneau { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .panneau .cta .btn { display: none; }
  .panneau .cta .souligne { font-size: 15px; }
}

/* Les vignettes et les arches se détachent du fond (retour cliente) */
.ronds .rond { box-shadow: 0 8px 22px rgba(42,12,18,.2); }
.ronds a[aria-current="page"] .rond { box-shadow: 0 0 0 2px var(--bande), 0 0 0 3px var(--bordeaux), 0 8px 22px rgba(42,12,18,.2); }
.univers .ronds a[aria-current="page"] .rond { box-shadow: 0 0 0 2px var(--fond), 0 0 0 3px var(--bordeaux), 0 8px 22px rgba(42,12,18,.2); }
.apercu, .arche { box-shadow: 0 26px 60px rgba(42,12,18,.22); }
.liste a img { box-shadow: 0 6px 16px rgba(42,12,18,.22); }
.vid .cadre { box-shadow: 0 14px 34px rgba(42,12,18,.16); }
.nw { white-space: nowrap; }

/* Bulles et portrait de Clara en noir et blanc (retour cliente) ;
   la bulle survolée ou celle de la page en cours reprend ses couleurs. */
.ronds .rond img { filter: grayscale(1) contrast(1.06); transition: filter .5s var(--ease); }
.ronds a:hover .rond img, .ronds a:focus-visible .rond img, .ronds a[aria-current="page"] .rond img { filter: none; }
.moitie .img img { filter: grayscale(1) contrast(1.05); }

/* =====================================================================
   Téléphone façon appli (mélange de trois références) : cartes très
   arrondies, boutons en pastille, flèches rondes, barre d'onglets
   flottante, appel final sur photo. L'ordinateur n'est pas concerné.
   ===================================================================== */
@media (max-width: 760px) {
  :root { --r: 26px; }

  /* Boutons en pastille */
  .btn { border-radius: 999px; }
  .menu-btn { border: 1px solid var(--lin); border-radius: 999px; padding: 10px 18px; }

  /* Barre d'onglets flottante */
  .mbar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 8px 6px; gap: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; background: rgba(247,245,242,.96); backdrop-filter: blur(12px); border: 1px solid var(--lin); border-radius: 26px; box-shadow: 0 12px 34px rgba(42,12,18,.18); }
  .mbar a, .mbar a:last-child { flex: none; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; color: var(--gris); font-size: 10.5px; font-weight: 400; text-decoration: none; }
  .mbar a[aria-current="page"] { color: var(--bordeaux); }
  .mbar a[aria-current="page"] span { font-weight: 500; }
  .mbar .resa { color: var(--bordeaux); }
  .mbar .resa .bulle { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -26px; border-radius: 50%; background: var(--bordeaux); color: var(--fond); box-shadow: 0 8px 20px rgba(110,30,44,.4); }
  .popup { bottom: calc(96px + env(safe-area-inset-bottom)); border-radius: 22px; overflow: hidden; border-top: 0; }
  .infos { padding-bottom: 130px; border-radius: var(--r) var(--r) 0 0; }

  /* Ouverture : carte plein cadre aux coins arrondis */
  .entree { margin: 6px 10px 0; height: calc(100svh - 84px); border-radius: var(--r); overflow: hidden; }
  .panneau { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .panneau .souligne { display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: rgba(247,245,242,.16); backdrop-filter: blur(8px); text-decoration: none; }
  .panneau .souligne::after { content: '→'; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fond); color: var(--bordeaux); font-size: 16px; }

  /* Carte des soins : une carte arrondie par soin, flèche ronde */
  .liste { border-top: 0; }
  .liste li { border-bottom: 0; margin-bottom: 10px; }
  .liste a { grid-template-columns: 64px 1fr 40px; background: var(--fond); border-radius: 20px; padding: 10px 12px 10px 10px; box-shadow: 0 4px 14px rgba(42,12,18,.06); }
  .liste a img { border-radius: 16px; }
  .liste a::after { content: '→'; grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bordeaux); color: var(--fond); font-size: 16px; }
  .liste .nom { font-size: 18px; }
  .liste .px { display: inline-block; justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--beige); font-size: 12.5px; }

  /* Laser : grande carte sombre, faits en pastilles */
  .laser-une { margin: 0 10px; border-radius: var(--r); padding: 44px 0 36px; }
  .faits { border: 0; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .faits li, .faits li + li { border: 0; padding: 14px 12px; border-radius: 18px; background: rgba(247,245,242,.08); }
  .arche { border-radius: 999px 999px var(--r) var(--r); }

  /* Médias arrondis */
  .vid .cadre, .ba, .exp .media, .lhero .media, .cure .media, .typo-bloc, .form .media, .moitie { border-radius: 22px; overflow: hidden; }
  .membre, .portraits img, .quatre-g .media, .mosaique figure { border-radius: 16px; }
  .vid figcaption { display: inline-block; margin: 12px 0 0; padding: 6px 14px; border-radius: 999px; background: var(--beige); font-size: 13px; }
  .vid { text-align: center; }
  .moitie { margin: 0 10px; }
  .moitie .img { border-radius: 0; }

  /* Appel final sur photo */
  .final { margin: 10px; border-radius: var(--r); padding: 80px 0; text-align: center; color: var(--fond); background: linear-gradient(rgba(62,17,26,.45), rgba(62,17,26,.88)), url('../img/une-visage-m.webp') center 30% / cover; }
  .final h2 { color: var(--fond); }
  .final p { color: var(--rose); }
  .final .btn.fill { background: var(--fond); color: var(--bordeaux); border-color: var(--fond); }
  .final .btn:not(.fill) { color: var(--fond); border-color: rgba(247,245,242,.6); }

  /* Pages intérieures : en-têtes et onglets internes en pastilles */
  .ancres ul { gap: 6px; padding: 10px 12px; }
  .ancres a { border: 1px solid var(--lin); border-radius: 999px; padding: 9px 14px; border-bottom-width: 1px; }
  .ancres a:hover, .ancres a.ici { background: var(--bordeaux); color: var(--fond); border-color: var(--bordeaux); }
  .lhero { margin: 6px 10px 0; border-radius: var(--r); }
  .cure { margin: 0 10px; border-radius: var(--r); }
  .form { margin: 0 10px; border-radius: var(--r); }
  .faq details { border-radius: 0; }
  .faq summary::after { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--beige); font-size: 18px; }
}
@media (max-width: 760px) { .vid figcaption { font-family: "Jost", system-ui, sans-serif; text-transform: none; letter-spacing: .02em; font-size: 13px; } }

/* =====================================================================
   Version épurée : pas d'ombres, moins de pastilles, bulles entières.
   ===================================================================== */
.ronds .rond, .apercu, .arche, .liste a img, .vid .cadre { box-shadow: none; }
.ronds a[aria-current="page"] .rond { box-shadow: 0 0 0 2px var(--bande), 0 0 0 3px var(--bordeaux); }
.univers .ronds a[aria-current="page"] .rond { box-shadow: 0 0 0 2px var(--fond), 0 0 0 3px var(--bordeaux); }

@media (max-width: 940px) {
  /* Les six bulles tiennent sur la largeur, sans défilement ni rognage */
  .ronds ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; overflow: visible; padding: 6px 0 0; justify-content: stretch; }
  .ronds li { min-width: 0; }
  .ronds a { gap: 7px; }
}
@media (max-width: 760px) {
  .ronds { padding: 6px 10px 16px; }
  .ronds .rond, .univers .ronds .rond { width: 50px; height: 50px; }
  .ronds .lib, .univers .ronds .lib { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
  .univers .ronds { padding: 26px 10px 30px; }
  .univers .ronds ul { gap: 4px; }

  .liste a { box-shadow: none; }
  .liste .px { padding: 0; background: none; font-size: 13px; color: var(--gris); }
  .liste a::after { background: none; color: var(--bordeaux); border: 1px solid var(--lin); }
  .vid figcaption { padding: 0; background: none; color: var(--gris); }
  .faits li, .faits li + li { background: none; border: 1px solid rgba(216,195,198,.25); }
  .tete-soins { margin-bottom: 20px; }
  .moitie .txt p { font-size: 15px; }
  .infos { border-radius: 0; }
}
@media (max-width: 760px) { .faits .n { white-space: nowrap; font-size: 18px; } .faits li, .faits li + li { padding: 12px 10px; } .panneau .k { display: none; } }
@media (min-width: 941px) { .ronds { padding-top: 12px; } }

/* Bouton Réserver de l'en-tête : téléphone seulement */
.resa-m { display: none; }

/* =====================================================================
   TÉLÉPHONE, VERSION ÉPURÉE (inspirée des pages Apple) :
   titres en casse normale et en grand, beaucoup d'air, une image nette
   par écran, coins arrondis réguliers, un seul bouton de réservation.
   Ne s'applique pas à l'ordinateur.
   ===================================================================== */
@media (max-width: 760px) {
  :root { --rm: 22px; }
  body { font-size: 16px; background: #FBFAF8; }
  .t { text-transform: none; letter-spacing: -.005em; line-height: 1.1; }
  .caps { letter-spacing: .06em; }
  .k { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--bordeaux); margin-bottom: 10px; }
  .btn, .pill { border-radius: 999px; min-height: 48px; font-size: 16px; letter-spacing: 0; text-transform: none; }
  .souligne, .link, .decouvrir { color: var(--bordeaux); text-decoration: none; font-size: 16px; letter-spacing: 0; text-transform: none; }
  .souligne::after, .link::after { content: ' ›'; }

  /* En-tête fin, translucide, logo, Réserver, Menu */
  .top, .top.sur { position: sticky; top: 0; height: 56px; padding: 0 16px; gap: 10px; grid-template-columns: 1fr auto auto; background: rgba(251,250,248,.86); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid rgba(222,215,206,.7); }
  .top .logo img { height: 26px; }
  .resa-m { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 16px; border-radius: 999px; background: var(--bordeaux); color: #fff; text-decoration: none; font-size: 14px; }
  .menu-btn { border: 0; padding: 10px 2px; font-size: 13px; letter-spacing: .04em; text-transform: none; }
  .top.open { height: auto; min-height: 100vh; background: #FBFAF8; color: var(--encre); grid-template-rows: 56px auto; }
  .top.open .logo img { filter: none; }
  .top.open .resa-m { display: none; }
  .top.open .nav { margin-top: 10px; }
  .top.open .nav a { display: block; padding: 12px 0; font-family: 'Gilda Display', Georgia, serif; font-size: 28px; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--lin); }
  .top.open .nav a[aria-current="page"] { color: var(--bordeaux); }
  .top.open .nav .resa { display: none; }
  .top.open .menu-btn { top: 8px; right: 16px; }

  /* Plus de barre du bas ni de fenêtre surgissante */
  .mbar, .popup { display: none !important; }
  .infos { padding-bottom: 36px; }

  /* Ouverture : grand titre centré, puis la photo */
  .entree { display: block; height: auto; min-height: 0; max-height: none; margin: 0; border-radius: 0; overflow: visible; }
  .panneau { position: static; background: none; color: var(--encre); text-align: center; padding: 46px 22px 30px; min-height: 0; }
  .panneau .k { display: block; color: var(--bordeaux); }
  .panneau h1 { font-size: 40px; margin-bottom: 26px; }
  .panneau h1 br { display: none; }
  .panneau .cta { flex-direction: column; align-items: center; gap: 8px; }
  .panneau .cta .btn { display: inline-flex; background: var(--bordeaux); color: #fff; border-color: var(--bordeaux); padding: 12px 30px; }
  .panneau .souligne, .panneau .souligne:hover { display: inline-block; padding: 8px 0; background: none; backdrop-filter: none; color: var(--bordeaux); align-self: center; }
  .panneau .souligne::after { content: ' ›'; display: inline; width: auto; height: auto; background: none; border-radius: 0; color: inherit; font-size: inherit; }
  .entree .diapo { position: relative; margin: 0 12px; aspect-ratio: 4 / 5; border-radius: var(--rm); overflow: hidden; }
  .entree .slides { position: absolute; inset: 0; }
  .entree .slide::after { background: linear-gradient(transparent 70%, rgba(20,8,10,.45)); }
  .entree .slide .leg { top: auto; bottom: 20px; left: 20px; right: 20px; }
  .entree .slide .titre { font-size: 18px; letter-spacing: 0; text-transform: none; margin: 0; }
  .entree .tirets { top: auto; bottom: 24px; right: 16px; left: auto; gap: 2px; }
  .entree .tirets button { width: 22px; }

  /* Onglets ronds : sur fond clair, sans bandeau */
  .univers .ronds { padding: 34px 10px 10px; }

  /* Sections : grand titre centré, air */
  .carte-soins, .videos, .resultat-une, .final { background: none; }
  .carte-soins { padding: 70px 0 30px; }
  .tete-soins { text-align: center; margin-bottom: 26px; }
  .tete-soins h2, .videos h2, .resultat-une h2, .moitie .txt h2, .final h2, .laser-une h2 { font-size: 36px; text-transform: none; letter-spacing: -.005em; }
  .tete-soins h2 br, .resultat-une h2 br, .moitie .txt h2 br, .laser-une h2 br { display: none; }

  /* Carte des soins : liste à filets fins, chevron */
  .liste { border-top: 1px solid var(--lin); }
  .liste li { margin: 0; border-bottom: 1px solid var(--lin); }
  .liste a { background: none; border-radius: 0; padding: 12px 0; box-shadow: none; grid-template-columns: 60px 1fr 20px; }
  .liste a img { width: 60px; height: 72px; border-radius: 14px; }
  .liste a::after { content: '›'; width: auto; height: auto; border: 0; background: none; color: var(--bordeaux); font-size: 26px; font-weight: 300; }
  .liste .nom { font-size: 19px; }
  .liste .px { font-size: 14px; }

  /* Laser : bloc sombre pleine largeur, chiffres en grand */
  .laser-une { margin: 70px 0 0; border-radius: 0; padding: 80px 0 70px; text-align: center; }
  .laser-une .txt > p { margin-left: auto; margin-right: auto; }
  .laser-une .faits { grid-template-columns: 1fr; gap: 22px; margin: 34px 0; }
  .faits li, .faits li + li { border: 0; padding: 0; background: none; align-items: center; }
  .faits .n { font-size: 40px; white-space: nowrap; }
  .faits span:last-child { font-size: 14px; }
  .laser-une .btn { width: auto; background: #fff; color: var(--nuit); border-color: #fff; padding: 12px 30px; }
  .arche, .laser-une .arche { border-radius: var(--rm); max-width: none; margin: 10px 0 0; aspect-ratio: 4 / 5; }

  /* Vidéos */
  .videos { padding-top: 80px; padding-bottom: 20px; }
  .vid .cadre { border-radius: var(--rm); box-shadow: none; }
  .vid figcaption { font-family: 'Jost', system-ui, sans-serif; font-size: 14px; color: var(--gris); background: none; padding: 0; margin-top: 10px; text-transform: none; letter-spacing: 0; }

  /* Avant / après */
  .resultat-une { text-align: center; padding-top: 80px; padding-bottom: 20px; }
  .resultat-une .txt { order: -1; }
  .ba { border-radius: var(--rm); }
  .resultat-une .souligne { justify-content: center; }

  /* Équipe */
  .moitie { margin: 80px 0 0; border-radius: 0; background: none; }
  .moitie .img { margin: 0 12px; border-radius: var(--rm); overflow: hidden; }
  .moitie .txt { order: 2; padding: 30px 22px 10px; }
  .moitie .txt p { font-size: 16px; }
  .moitie .btn { width: auto; padding: 12px 30px; }

  /* Appel final : simple et clair */
  .final { margin: 0; border-radius: 0; padding: 100px 0 110px; text-align: center; color: var(--encre); }
  .final h2 { color: var(--encre); font-size: 38px; }
  .final p { color: var(--gris); }
  .final .cta { flex-direction: column; align-items: center; gap: 6px; }
  .final .btn.fill { background: var(--bordeaux); color: #fff; border-color: var(--bordeaux); width: auto; padding: 12px 30px; }
  .final .btn:not(.fill) { border: 0; background: none; color: var(--bordeaux); min-height: 44px; }

  /* Pied de page clair */
  .infos { background: #F2EFEB; color: var(--gris); border-radius: 0; padding-top: 44px; font-size: 14px; }
  .infos .logo { filter: brightness(0); opacity: .85; width: 130px; }
  .infos h3 { color: var(--encre); letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 500; }
  .infos a { border-bottom: 0; }
  .infos .bas { color: var(--gris); border-top-color: var(--lin); }

  /* Pages intérieures */
  .phead { text-align: center; padding-top: 50px; padding-bottom: 36px; }
  .phead h1 { font-size: 40px; text-transform: none; }
  .phead .chapo { margin: 0 auto; }
  .ancres { top: 56px; background: rgba(251,250,248,.9); }
  .ancres ul { padding: 0 8px; gap: 0; }
  .ancres a, .ancres a:hover, .ancres a.ici { border: 0; border-radius: 0; padding: 13px 10px; font-size: 13px; letter-spacing: 0; text-transform: none; background: none; color: var(--gris); border-bottom: 2px solid transparent; }
  .ancres a.ici { color: var(--encre); border-bottom-color: var(--bordeaux); }
  .exp h2, .lhero h1, .atouts h2, .cure h2, .faq h2, .trouver h2, .gestes h2, .carte-prix h2, .form h2 { text-transform: none; letter-spacing: -.005em; }
  .exp .media, .lhero .media, .cure .media, .form .media, .typo-bloc { border-radius: var(--rm); }
  .lhero, .cure, .form { margin: 0; border-radius: 0; }
  .faq summary::after { width: auto; height: auto; background: none; flex: none; }
}
@media (max-width: 760px) { .panneau .cta .souligne { align-self: center; } }
@media (max-width: 760px) { .btn.caps { font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; } }

/* ---------- Calendrier des formations ---------- */
.calendrier { padding-top: 110px; padding-bottom: 110px; }
.cal-tete { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 40px; }
.cal-tete h2 { font-size: clamp(32px, 3.6vw, 48px); color: var(--bordeaux); }
.cal-tete p { font-size: 15px; color: var(--gris); }
.cal { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; padding: 30px 0; border-top: 1px solid var(--lin); }
.cal:last-child { border-bottom: 1px solid var(--lin); }
.cal h3 { font-size: clamp(22px, 2vw, 28px); margin-bottom: 8px; }
.cal-type { font-size: 15px; color: var(--encre); margin-bottom: 4px; }
.cal-meta { font-size: 14px; color: var(--gris); margin-bottom: 12px; }
.cal-prix { font-family: 'Gilda Display', Georgia, serif; font-size: 26px; color: var(--bordeaux); }
.cal-prix span { font-family: 'Jost', system-ui, sans-serif; font-size: 12px; letter-spacing: .1em; color: var(--gris); }
.dates { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.dates li { padding: 9px 16px; border: 1px solid var(--lin); border-radius: 999px; font-size: 14.5px; background: var(--fond); }
.dates li:first-child { border-color: var(--bordeaux); color: var(--bordeaux); }
.cal-vide { font-size: 15px; color: var(--gris); }
.cal-cta { justify-content: center; margin-top: 46px; }
@media (max-width: 760px) {
  .calendrier { padding-top: 70px; padding-bottom: 70px; }
  .cal-tete { flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 26px; }
  .cal-tete h2 { font-size: 36px; text-transform: none; letter-spacing: -.005em; }
  .cal { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .cal h3 { font-size: 24px; text-transform: none; letter-spacing: -.005em; }
  .dates li { font-size: 13.5px; padding: 8px 13px; }
  .cal-cta { flex-direction: column; align-items: center; gap: 6px; }
  .cal-cta .btn { width: auto; padding: 12px 30px; }
}
.moitie .img img[src*="accueil-clara"] { object-position: 50% 30%; }
.popup-img img { object-position: 50% 20%; }
/* Bloc équipe de l'accueil (ordinateur) : colonne photo plus étroite et plus haute,
   pour montrer Clara en entier sans la couper */
@media (min-width: 761px) {
  .moitie { grid-template-columns: 7fr 5fr; min-height: 720px; }
  .moitie .img img[src*="accueil-clara"] { object-position: 50% 12%; }
}
/* Ne jamais couper le haut de la tête de Clara */
.moitie .img img[src*="accueil-clara"] { object-position: 50% 0%; }
@media (min-width: 761px) { .moitie .img img[src*="accueil-clara"] { object-position: 50% 0%; } }
.popup-img img { object-position: 50% 0%; }
/* Diaporama : le navigateur garde le défilement vertical, le glissement horizontal change de photo */
.diapo .slides { touch-action: pan-y; }
.faq summary { text-align: left; }