/* Divine Féminine — la seule feuille de style du thème.
   Sommaire : 1 polices · 2 jetons · 3 base · 4 logo & écran d'entrée · 5 en-tête
   6 boutons & éléments · 7 accueil · 8 pages intérieures · 9 avis · 10 Instagram
   11 formulaire · 12 pied · 13 barre mobile · 14 mouvement */

/* 1 — Polices auto-hébergées (sous-ensemble latin, variables) */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/fraunces-normal-300-600-latin.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 600; font-display: swap; src: url(../fonts/fraunces-italic-300-600-latin.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/jost-normal-300-600-latin.woff2) format("woff2"); }

/* 2 — Jetons */
:root {
  --creme: #f6f1ea; --ivoire: #fffdfa; --sable: #eadfd2; --nude: #e3cfbd; --rose: #ecd9d0;
  --or: #9a6326; --or-clair: #f0c65a; --soleil: #f2cf55;
  --brun: #2b211b; --cacao: #4a382d; --taupe: #8a7356; --nuit: #211813;
  --titre: "Fraunces", "Times New Roman", serif;
  --texte: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --marge: clamp(20px, 5vw, 64px);
  --section: clamp(72px, 11vw, 150px);
  --doux: cubic-bezier(.22, .8, .24, 1);
  --entete: 84px;
}

/* 3 — Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 60px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--cacao); font: 300 17px/1.75 var(--texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--or); text-underline-offset: 4px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; color: var(--brun); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.1vw, 88px); font-weight: 300; }
h2 { font-size: clamp(29px, 3.8vw, 52px); font-weight: 300; }
h1 em, h2 em { font-style: italic; color: var(--or); font-weight: 400; }
p { margin: 0 0 1.1em; }
::selection { background: var(--or-clair); color: var(--brun); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.sr, .evitement:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement:focus { position: fixed; z-index: 200; top: 12px; left: 12px; background: var(--brun); color: var(--creme); padding: 10px 18px; }
.conteneur { width: min(1320px, 100% - 2 * var(--marge)); margin-inline: auto; }
.conteneur.etroit { width: min(860px, 100% - 2 * var(--marge)); }
.centre { text-align: center; }
/* overflow-x: clip — les rayons des astres débordent LARGEMENT de leur photo (257 %). Sans cette coupe, la page
   s'élargit sur mobile : l'en-tête et la barre d'action (position: fixed) sortent de l'écran. « clip » et non
   « hidden » : il ne crée pas de conteneur de défilement, le sommaire collant des soins y survit. */
.section { padding-block: var(--section); position: relative; overflow-x: clip; }
html { overflow-x: clip; }
.insecable { white-space: nowrap; }
.surtitre { font: 400 12px/1.4 var(--texte); letter-spacing: .28em; text-transform: uppercase; color: var(--or); margin: 0 0 22px; display: flex; align-items: center; gap: 14px; }
.surtitre::before { content: ""; width: 17px; height: 17px; background: currentColor; flex: none; -webkit-mask: url(../img/soleil.svg) center / contain no-repeat; mask: url(../img/soleil.svg) center / contain no-repeat; }
.centre .surtitre { justify-content: center; }
.chapo { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.7; color: var(--cacao); max-width: 60ch; }
.centre .chapo { margin-inline: auto; }
.icone { width: 20px; height: 20px; flex: none; }
.entete-section { margin-bottom: clamp(40px, 6vw, 80px); }
.entete-section.deux-colonnes { display: grid; gap: 24px 80px; align-items: end; }
.entete-section h2 { margin-bottom: 0; }
.entete-section.centre h2 { margin-bottom: .4em; }
@media (min-width: 900px) { .entete-section.deux-colonnes { grid-template-columns: 1.2fr 1fr; } }

/* 4 — Logo & écran d'entrée */
.logo { position: relative; display: block; aspect-ratio: 1; color: var(--or); }
.soleil .traits { stroke-width: 3; }
.logo .soleil .traits { stroke-width: 5; }
.logo .soleil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.logo .soleil .devise { font: 600 31px var(--titre); letter-spacing: .42em; fill: currentColor; }
/* Le lettrage d'origine du logo, en masque : il prend la couleur qu'on lui donne. */
.mot-symbole { position: absolute; left: 8.2%; top: 26.6%; width: 87.2%; aspect-ratio: 1230 / 600; background: var(--brun); -webkit-mask: url(../img/mot-symbole.webp) center / contain no-repeat; mask: url(../img/mot-symbole.webp) center / contain no-repeat; }
.soleil .disque, .soleil .rayon { stroke-dasharray: 1; }

.entree { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, var(--ivoire), var(--creme) 55%, var(--sable)); animation: entree-leve 1.1s var(--doux) 3.1s forwards; }
.entree-scene { width: min(74vmin, 520px); animation: entree-scene 4.2s var(--doux) forwards; }
.logo-entree .disque { stroke-dashoffset: 1; animation: trace 1.3s var(--doux) .15s forwards; }
.logo-entree .rayon { stroke-dashoffset: 1; opacity: 0; animation: trace 1.15s var(--doux) calc(.45s + var(--i) * 45ms) forwards, parait .3s linear calc(.45s + var(--i) * 45ms) forwards; }
.logo-entree .soleil g { transform-origin: 0 0; animation: tourne-doux 4.2s var(--doux) forwards; }
.logo-entree .mot-symbole { opacity: 0; animation: mot 1.5s var(--doux) 1.35s forwards; }
.logo-entree .devise { opacity: 0; animation: parait 1s ease 2.2s forwards; }
.sans-entree .entree { display: none; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes parait { to { opacity: 1; } }
@keyframes tourne-doux { from { transform: rotate(-38deg) scale(.92); } to { transform: none; } }
@keyframes mot { from { opacity: 0; filter: blur(14px); transform: translateY(14px) scale(1.04); } to { opacity: 1; filter: none; transform: none; } }
@keyframes entree-scene { 0%, 72% { transform: none; opacity: 1; } 100% { transform: scale(1.06) translateY(-3vh); opacity: 0; } }
@keyframes entree-leve { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.entree { clip-path: inset(0); }
/* Pendant l'écran d'entrée, l'accueil attend — puis se lève avec lui. */
html:not(.sans-entree) .home .hero-texte > *, html:not(.sans-entree) .home .hero-visuel { animation-delay: calc(3.2s + var(--o, 0) * 110ms) !important; }
html:not(.sans-entree) .home .astre-hero .rayon { animation-delay: calc(3.5s + var(--i) * 50ms); }

/* 5 — En-tête */
.entete { position: fixed; inset: 0 0 auto; z-index: 100; transition: background .5s, box-shadow .5s, transform .5s var(--doux); }
.entete-barre { height: var(--entete); width: min(1480px, 100% - 2 * var(--marge)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; transition: height .4s var(--doux); }
.entete.pleine { background: color-mix(in srgb, var(--creme) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--sable); }
.entete.pleine .entete-barre { height: 68px; }
.entete.cachee { transform: translateY(-100%); }
.entete-logo { display: block; flex: none; text-decoration: none; }
/* En-tête : le soleil en pictogramme, le lettrage à côté (le logo empilé serait illisible à cette taille). */
.logo-entete { aspect-ratio: auto; display: flex; align-items: center; gap: 12px; }
.logo-entete .soleil { position: static; width: 50px; height: 50px; transition: width .4s var(--doux), height .4s var(--doux), rotate 1.6s var(--doux); }
.logo-entete .soleil .traits { stroke-width: 9; }
.logo-entete .mot-symbole { position: static; width: 104px; }
.entete-logo:hover .soleil { rotate: 49deg; }
.entete.pleine .logo-entete .soleil { width: 42px; height: 42px; }
.entete-nav { display: none; gap: clamp(18px, 2.2vw, 38px); }
.entete-nav a { font: 400 13px var(--texte); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--brun); padding: 8px 0; position: relative; }
.entete-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--or); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--doux); }
.entete-nav a:hover::after, .entete-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.entete-actions { display: flex; align-items: center; gap: 18px; }
.entete-tel { display: none; align-items: center; gap: 8px; font: 400 15px var(--texte); letter-spacing: .06em; text-decoration: none; color: var(--brun); }
.entete-actions .bouton { display: none; padding: 12px 24px; }
.entete-menu { width: 48px; height: 48px; border: 1px solid var(--sable); border-radius: 50%; background: var(--ivoire); color: var(--brun); display: grid; place-items: center; cursor: pointer; }
.entete-menu .icone { grid-area: 1 / 1; transition: opacity .3s, transform .4s var(--doux); }
.entete-menu .icone:last-of-type, .entete-menu[aria-expanded="true"] .icone:first-of-type { opacity: 0; transform: rotate(-90deg); }
.entete-menu[aria-expanded="true"] .icone:last-of-type { opacity: 1; transform: none; }
@media (min-width: 640px) { .entete-actions .bouton { display: inline-flex; } }
@media (min-width: 1080px) { .entete-nav { display: flex; } .entete-menu { display: none; } }
@media (min-width: 1280px) { .entete-tel { display: inline-flex; } }

.menu-mobile { position: fixed; inset: 0; z-index: 90; background: var(--creme); padding: calc(var(--entete) + 24px) var(--marge) 120px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.menu-mobile[hidden] { display: flex; }
.menu-mobile.ouvert { opacity: 1; visibility: visible; }
.menu-mobile nav { display: grid; }
.menu-mobile nav a { font: 300 clamp(28px, 7vw, 38px)/1.4 var(--titre); color: var(--brun); text-decoration: none; border-bottom: 1px solid var(--sable); padding: 8px 0; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s var(--doux); }
.menu-mobile.ouvert nav a { opacity: 1; transform: none; }
.menu-mobile nav a:nth-child(2) { transition-delay: .05s; } .menu-mobile nav a:nth-child(3) { transition-delay: .1s; } .menu-mobile nav a:nth-child(4) { transition-delay: .15s; } .menu-mobile nav a:nth-child(5) { transition-delay: .2s; } .menu-mobile nav a:nth-child(6) { transition-delay: .25s; } .menu-mobile nav a:nth-child(7) { transition-delay: .3s; }
.menu-mobile nav a[aria-current] { font-style: italic; color: var(--or); }
.menu-mobile-pied { margin-top: 32px; font-size: 15px; }
body.menu-ouvert { overflow: hidden; }

/* 6 — Boutons & éléments */
.bouton { display: inline-flex; align-items: center; gap: 14px; padding: 17px 32px; border-radius: 999px; font: 400 13px/1 var(--texte); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--doux), border-color .5s; }
.bouton::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--doux); }
.bouton:hover::before { transform: none; }
.bouton .icone { width: 17px; height: 17px; transition: transform .5s var(--doux); }
.mini-soleil { width: 19px; height: 19px; flex: none; background: currentColor; -webkit-mask: url(../img/soleil.svg) center / contain no-repeat; mask: url(../img/soleil.svg) center / contain no-repeat; transition: rotate 1.2s var(--doux), scale .6s var(--doux); }
.bouton:hover .mini-soleil, .carte-soin:hover .mini-soleil { rotate: 98deg; scale: 1.15; }
.bouton:hover .icone { transform: translateX(5px); }
.bouton-plein { background: var(--brun); color: var(--creme); }
.bouton-plein::before { background: var(--or); }
.bouton-ligne { border-color: color-mix(in srgb, var(--brun) 35%, transparent); color: var(--brun); }
.bouton-ligne::before { background: var(--brun); }
.bouton-ligne:hover { color: var(--creme); border-color: var(--brun); }
.bouton-clair { background: var(--creme); color: var(--brun); }
.bouton-clair::before { background: var(--or-clair); }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.boutons.centre { justify-content: center; }
.lien-discret { font-size: 14px; letter-spacing: .06em; color: var(--taupe); }
.points { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 12px; }
.points li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
.points .icone { color: var(--or); margin-top: 3px; width: 18px; height: 18px; }
.etoiles { display: inline-flex; gap: 2px; vertical-align: middle; }
.etoiles svg { fill: var(--or); } .etoiles svg.vide { fill: var(--sable); }
.pastille-avis { display: inline-flex; align-items: center; gap: 10px; margin-top: 36px; padding: 10px 20px 10px 10px; border: 1px solid var(--sable); border-radius: 999px; background: color-mix(in srgb, var(--ivoire) 80%, transparent); text-decoration: none; font-size: 14px; color: var(--cacao); transition: border-color .4s, transform .5s var(--doux); }
.pastille-avis:hover { border-color: var(--or); transform: translateY(-2px); }
.pastille-avis .g { width: 30px; height: 30px; border-radius: 50%; background: var(--brun); color: var(--or-clair); display: grid; place-items: center; font: 600 16px var(--titre); }
.pastille-avis strong { font: 500 19px var(--titre); color: var(--brun); }
.pastille-avis.sombre { background: transparent; border-color: rgba(255, 255, 255, .16); color: var(--nude); }
.pastille-avis.sombre strong { color: var(--creme); } .pastille-avis.sombre .g { background: var(--or); color: var(--nuit); }
.etiquette { display: inline-block; margin-top: 10px; padding: 8px 18px; border: 1px solid var(--or); border-radius: 999px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--or); }

/* 7 — Accueil */
.hero { --h1: var(--ivoire); --h2: var(--creme); position: relative; padding-top: calc(var(--entete) + clamp(24px, 5vw, 70px)); overflow: hidden; background: linear-gradient(180deg, var(--h1), var(--h2)); }
.hero-texte { position: relative; z-index: 1; }
.hero-grille { display: grid; gap: 48px; align-items: center; position: relative; }
.hero-texte > *, .hero-visuel { opacity: 0; animation: monte 1.2s var(--doux) calc(.15s + var(--o, 0) * 110ms) forwards; }
.hero-texte > :nth-child(2) { --o: 1; } .hero-texte > :nth-child(3) { --o: 2; } .hero-texte > :nth-child(4) { --o: 3; } .hero-texte > :nth-child(5) { --o: 4; } .hero-visuel { --o: 2; }
.hero h1 { margin-bottom: .28em; }
.hero h1 em { display: block; }
.hero-visuel { position: relative; width: min(430px, 64vw); margin: 8% auto 0; }
.reassurance { list-style: none; margin: clamp(48px, 7vw, 96px) 0 0; padding: 22px var(--marge); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; border-block: 1px solid var(--sable); position: relative; background: color-mix(in srgb, var(--ivoire) 60%, transparent); }
.reassurance li { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--cacao); padding-inline: clamp(14px, 2.4vw, 38px); }
.reassurance li + li { border-left: 1px solid var(--or-clair); }
@media (min-width: 900px) {
  .hero-grille { grid-template-columns: 1.15fr .85fr; gap: 80px; min-height: min(74vh, 760px); }
  .hero-visuel { margin: 0 9% 0 auto; }
}
@media (max-width: 640px) { .reassurance li { border: 0 !important; width: 100%; text-align: center; } }

.manifeste { background: var(--creme); }
.manifeste h2 em { display: inline; }
.cartes { display: grid; gap: 28px; }
@media (min-width: 600px) { .cartes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cartes.quatre { grid-template-columns: repeat(4, 1fr); } .cartes.trois { grid-template-columns: repeat(3, 1fr); gap: 40px; } .cartes.quatre > :nth-child(even) { margin-top: 56px; } }
.carte-soin { position: relative; display: flex; flex-direction: column; text-align: center; text-decoration: none; color: var(--cacao); }
.carte-prix { align-self: center; margin-bottom: 14px; border: 1px solid var(--nude); padding: 5px 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); border-radius: 999px; }
.carte-soin strong { font: 400 24px/1.15 var(--titre); color: var(--brun); margin-bottom: 8px; }
.carte-texte { font-size: 15.5px; line-height: 1.6; }
.carte-lien { margin-top: 16px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--or); }
.carte-lien .icone { width: 16px; height: 16px; transition: transform .5s var(--doux); }
.carte-soin:hover .carte-lien .icone { transform: translateX(6px); }

.lieux { background: var(--ivoire); }
.duo { display: grid; gap: 40px; align-items: center; }
.duo + .duo { margin-top: var(--section); }
.duo-image img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: 4px; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: clamp(60px, 8vw, 130px); } .duo.inverse .duo-image { order: 2; } }
.pourquoi { background: var(--rose); }
.pourquoi .duo-image { width: min(400px, 58vw); margin: 18% auto; }
.citation { margin: 36px 0 0; padding-left: 28px; border-left: 1px solid var(--or); font: italic 300 clamp(20px, 2vw, 25px)/1.45 var(--titre); color: var(--brun); }
.citation cite { display: block; margin-top: 14px; font: 400 12px var(--texte); letter-spacing: .24em; text-transform: uppercase; color: var(--or); }
.cadeau-carte { display: grid; background: var(--nuit); color: var(--nude); border-radius: 6px; overflow: hidden; }
.cadeau-image img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.cadeau-texte { padding: clamp(40px, 6vw, 90px); align-self: center; }
.cadeau-texte > .icone { width: 38px; height: 38px; color: var(--or-clair); margin-bottom: 22px; stroke-width: 1; }
.cadeau-texte h2 { color: var(--creme); } .cadeau-texte h2 em { color: var(--or-clair); }
.cadeau-texte .bouton { margin-top: 18px; }
@media (min-width: 900px) { .cadeau-carte { grid-template-columns: 1fr 1fr; } }

/* 8 — Pages intérieures */
.bandeau { padding: calc(var(--entete) + clamp(40px, 7vw, 100px)) 0 clamp(50px, 7vw, 100px); background: linear-gradient(180deg, var(--ivoire), var(--creme)); overflow: hidden; }
.bandeau-grille { display: grid; gap: 44px; align-items: center; }
.bandeau h1 { font-size: clamp(38px, 5.4vw, 78px); }
.bandeau-image { width: min(300px, 56%); margin: 26% auto 0; }
.bandeau-texte > * { opacity: 0; animation: monte 1.1s var(--doux) calc(.1s + var(--o, 0) * 100ms) forwards; }
.bandeau-texte > :nth-child(2) { --o: 1; } .bandeau-texte > :nth-child(3) { --o: 2; } .bandeau-texte > :nth-child(4) { --o: 3; }
@media (min-width: 900px) { .bandeau-grille { grid-template-columns: 1.5fr .7fr; gap: 90px; } .bandeau.sans-image .bandeau-grille { grid-template-columns: 1fr; } }

.sommaire { position: sticky; top: 68px; z-index: 50; background: color-mix(in srgb, var(--creme) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-block: 1px solid var(--sable); }
.sommaire-piste { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--marge); scrollbar-width: none; width: min(1320px + 2 * var(--marge), 100%); margin-inline: auto; }
.sommaire-piste::-webkit-scrollbar { display: none; }
.sommaire a { flex: none; padding: 8px 18px; border-radius: 999px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--cacao); border: 1px solid transparent; transition: .4s; }
.sommaire a:hover, .sommaire a.actif { border-color: var(--or); color: var(--brun); background: var(--ivoire); }

.soins { overflow-x: clip; }
.soin { display: grid; gap: 36px; align-items: start; padding-block: clamp(50px, 7vw, 100px); border-bottom: 1px solid var(--sable); }
.soin:first-child { padding-top: 0; } .soin:last-child { border: 0; padding-bottom: 0; }
.soin-image { position: relative; width: min(380px, 64%); margin: 24% auto 0; }
.soin-numero { position: absolute; left: -12%; bottom: -6px; font: italic 300 clamp(70px, 9vw, 120px)/1 var(--titre); color: var(--or); opacity: .85; pointer-events: none; }
.soin h2 { font-size: clamp(30px, 3.5vw, 46px); margin-bottom: 18px; }
.qualites { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 24px; }
.qualites li { padding: 6px 16px; border: 1px solid var(--nude); border-radius: 999px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); background: var(--ivoire); }
.accroche { font-size: 18px; } .accroche em { font-family: var(--titre); font-size: 1.04em; color: var(--brun); }
.plus { margin: 4px 0 8px; border-block: 1px solid var(--sable); }
.plus summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--brun); }
.plus summary::-webkit-details-marker { display: none; }
.plus summary .icone { color: var(--or); transition: transform .5s var(--doux); } .plus[open] summary .icone { transform: rotate(135deg); }
.plus p { font-size: 16px; padding-bottom: 8px; }
.etapes-soin { margin: 0 0 26px; padding: 0; list-style: none; counter-reset: e; display: grid; gap: 10px; }
.etapes-soin li { counter-increment: e; display: flex; gap: 16px; align-items: baseline; font-size: 16px; }
.etapes-soin li::before { content: counter(e, decimal-leading-zero); font: italic 400 20px var(--titre); color: var(--or); }
.tarifs { margin: 30px 0 34px; padding: 8px 28px; background: var(--ivoire); border: 1px solid var(--sable); border-radius: 4px; }
.tarifs div { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; }
.tarifs div + div { border-top: 1px solid var(--sable); }
.tarifs dt { font-size: 15px; letter-spacing: .06em; color: var(--cacao); display: flex; flex: 1; gap: 14px; align-items: baseline; }
.tarifs dt::after { content: ""; flex: 1; border-bottom: 1px dotted var(--nude); min-width: 20px; }
.tarifs dd { margin: 0; font: 400 21px/1 var(--titre); color: var(--brun); white-space: nowrap; }
.formules { margin: 0 0 34px; padding: 28px; background: var(--nuit); color: var(--nude); border-radius: 4px; }
.formules-titre { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--or-clair); margin-bottom: 18px; }
.formule { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.formule strong { font: 400 19px var(--titre); color: var(--creme); }
.formule ul { list-style: none; padding: 0; margin: 6px 0 0; font-size: 15px; line-height: 1.7; }
.mention { margin: 14px 0 0; font: italic 300 15.5px/1.5 var(--titre); color: var(--or-clair); }
@media (min-width: 900px) { .soin { grid-template-columns: .8fr 1fr; gap: clamp(60px, 8vw, 120px); } .soin.inverse .soin-image { order: 2; } .soin-image { margin-top: 30%; } }
.renvoi { background: var(--rose); padding-block: clamp(60px, 8vw, 110px); }

.listes { display: grid; gap: 32px; }
.liste-bloc { padding: clamp(32px, 5vw, 64px); background: var(--ivoire); border: 1px solid var(--sable); border-radius: 6px; }
.liste-bloc.contre { background: var(--nuit); border-color: var(--nuit); color: var(--nude); }
.liste-bloc.contre h2 { color: var(--creme); } .liste-bloc.contre h2 em, .liste-bloc.contre .icone { color: var(--or-clair); }
.points.grands li { padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.alerte { margin: 28px 0 0; padding: 20px 24px; border: 1px solid var(--or-clair); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.7; color: var(--or-clair); }
@media (min-width: 900px) { .listes { grid-template-columns: 1fr 1fr; align-items: start; } }

.etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.etapes li { padding: 30px 26px; background: var(--ivoire); border: 1px solid var(--sable); border-radius: 4px; text-align: center; }
.etapes li span { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 14px; font: italic 300 30px/1 var(--titre); color: var(--brun); background: url(../img/soleil-jaune.svg) center / contain no-repeat; }
.etapes li strong { font: 400 21px var(--titre); color: var(--brun); }
.etapes li p { font-size: 15px; margin: 8px 0 0; line-height: 1.55; }
@media (min-width: 640px) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .etapes { grid-template-columns: repeat(5, 1fr); } }
.idees { margin-top: clamp(50px, 6vw, 80px); text-align: center; }
.idees .surtitre { justify-content: center; }
.idees div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.idees a { padding: 12px 24px; border: 1px solid var(--nude); border-radius: 999px; text-decoration: none; font: 400 17px var(--titre); color: var(--brun); transition: .4s; }
.idees a:hover { background: var(--brun); color: var(--creme); border-color: var(--brun); }
.demande-bloc { background: var(--ivoire); }

.contact-grille { display: grid; gap: 48px; }
.contact-coordonnees { display: grid; align-content: start; }
.contact-ligne { display: flex; gap: 20px; align-items: center; padding: 20px 0; margin: 0; border-bottom: 1px solid var(--sable); text-decoration: none; color: var(--brun); font: 400 18.5px/1.3 var(--titre); transition: padding .5s var(--doux); overflow-wrap: anywhere; }
a.contact-ligne:hover { padding-left: 10px; }
.contact-ligne .icone { width: 46px; height: 46px; padding: 12px; border: 1px solid var(--or-clair); border-radius: 50%; color: var(--or); }
.contact-ligne small { display: block; font: 400 11px var(--texte); letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); margin-bottom: 3px; }
.contact-formulaire { padding: clamp(28px, 4.5vw, 64px); background: var(--ivoire); border: 1px solid var(--sable); border-radius: 6px; }
.contact-formulaire h2 { font-size: clamp(32px, 3.6vw, 48px); }
@media (min-width: 980px) { .contact-grille { grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 7vw, 110px); } }

.page-editoriale { padding: calc(var(--entete) + 80px) 0 var(--section); }
.prose h1 { font-size: clamp(40px, 5vw, 64px); } .prose h2 { font-size: 32px; margin-top: 1.6em; } .prose a { color: var(--or); }

/* 9 — Avis */
.avis { background: var(--creme); overflow: hidden; }
.avis-piste { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--marge) 30px; margin-inline: calc(var(--marge) * -1); scrollbar-width: none; cursor: grab; }
.avis-piste::-webkit-scrollbar { display: none; }
.avis-piste.glisse { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.avis-carte { flex: 0 0 min(400px, 84vw); scroll-snap-align: start; margin: 0; padding: 34px 32px 30px; background: var(--ivoire); border: 1px solid var(--sable); border-radius: 4px; display: flex; flex-direction: column; position: relative; }
.avis-carte::before { content: "“"; position: absolute; right: 26px; top: 6px; font: 400 90px/1 var(--titre); color: var(--nude); }
.avis-carte blockquote { margin: 18px 0 24px; flex: 1; }
.avis-carte blockquote p { margin: 0; font: 300 17.5px/1.6 var(--titre); color: var(--brun); }
.avis-carte blockquote.tronque p { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.avis-suite { background: none; border: 0; padding: 8px 0 0; font: 400 12px var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--or); cursor: pointer; }
.avis-carte figcaption { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--sable); }
.avis-carte figcaption strong { display: block; font: 500 16px var(--texte); color: var(--brun); }
.avis-carte figcaption small { font-size: 12.5px; color: var(--taupe); letter-spacing: .04em; }
.avatar { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--nude); color: var(--brun); display: grid; place-items: center; font: 500 20px var(--titre); overflow: hidden; flex: none; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avis-pied { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; margin-top: 16px; }
.avis-liens { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.defile-fleches { display: flex; gap: 10px; }
.defile-fleches button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brun) 30%, transparent); background: transparent; color: var(--brun); display: grid; place-items: center; cursor: pointer; transition: .4s; }
.defile-fleches button:hover { background: var(--brun); color: var(--creme); }
.defile-fleches button:first-child .icone { transform: scaleX(-1); }

/* 10 — Instagram */
.instagram { background: var(--ivoire); }
.insta-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .insta-grille { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .insta-grille { grid-template-columns: repeat(6, 1fr); } .insta-case:nth-child(even) { margin-top: 36px; } }
.insta-case { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: var(--nude); }
.insta-case img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--doux); }
.insta-case:hover img { transform: scale(1.07); }
.insta-voile { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(33, 24, 19, .45); color: var(--creme); opacity: 0; transition: opacity .5s; }
.insta-voile .icone { width: 30px; height: 30px; } .insta-case:hover .insta-voile { opacity: 1; }
.insta-type { position: absolute; top: 10px; right: 10px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }

/* 11 — Formulaire */
.formulaire .leurre { position: absolute; left: -9999px; }
.champs { display: grid; gap: 22px 28px; }
@media (min-width: 640px) { .champs { grid-template-columns: 1fr 1fr; } .champ.large { grid-column: 1 / -1; } }
.champ { display: block; border: 0; padding: 0; margin: 0; min-width: 0; }
.champ > span, .champ legend { display: block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); margin-bottom: 6px; padding: 0; }
.champ small { text-transform: none; letter-spacing: 0; }
.champ input, .champ select, .champ textarea { width: 100%; border: 0; border-bottom: 1px solid var(--nude); background: transparent; padding: 10px 0 12px; font: 300 18px var(--texte); color: var(--brun); border-radius: 0; transition: border-color .4s; }
.champ select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08d57' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 20px no-repeat; }
.champ textarea { resize: vertical; min-height: 110px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; border-color: var(--or); box-shadow: 0 1px 0 var(--or); }
.champ.erreur input, .champ.erreur textarea { border-color: #a4402f; }
.champ .message-erreur { display: block; color: #a4402f; font-size: 13px; letter-spacing: 0; text-transform: none; margin: 6px 0 0; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix legend { width: 100%; margin-bottom: 12px; }
.choix label { cursor: pointer; }
.choix input { position: absolute; opacity: 0; width: 1px; }
.choix label span { display: block; padding: 12px 24px; border: 1px solid var(--nude); border-radius: 999px; font-size: 15px; transition: .4s; }
.choix input:checked + span { background: var(--brun); border-color: var(--brun); color: var(--creme); }
.choix input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 3px; }
.consentement { display: flex; gap: 12px; margin: 28px 0 8px; font-size: 14px; line-height: 1.55; color: var(--taupe); cursor: pointer; }
.consentement input { accent-color: var(--brun); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.formulaire-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; }
.formulaire-etat { margin: 0; font-size: 15px; color: var(--brun); } .formulaire-etat.echec { color: #a4402f; }
.formulaire-note { margin: 18px 0 0; font-size: 13.5px; color: var(--taupe); }
.formulaire.envoi button { opacity: .6; pointer-events: none; }
.formulaire.envoye .champs, .formulaire.envoye .consentement, .formulaire.envoye button, .formulaire.envoye .dycast-turnstile, .formulaire.envoye .formulaire-note { display: none; }
.formulaire.envoye .formulaire-etat { font: italic 300 23px/1.4 var(--titre); }

/* 12 — Appel & pied */
.appel { position: relative; overflow: hidden; padding-block: var(--section); background: var(--nuit); color: var(--nude); }
.appel h2 { color: var(--creme); } .appel h2 em { color: var(--or-clair); } .appel .chapo { color: var(--nude); }
.appel .surtitre { color: var(--or-clair); }
.appel-soleil { position: absolute; left: 50%; top: 50%; width: min(140vw, 1000px); translate: -50% -50%; color: var(--or); opacity: .16; pointer-events: none; }
.appel .bouton-plein { background: var(--or-clair); color: var(--nuit); } .appel .bouton-plein::before { background: var(--creme); }
.appel .bouton-ligne { color: var(--creme); border-color: rgba(255, 255, 255, .3); } .appel .bouton-ligne::before { background: var(--creme); } .appel .bouton-ligne:hover { color: var(--nuit); }
.appel .conteneur { position: relative; }
.pied { background: var(--nuit); color: var(--nude); border-top: 1px solid rgba(255, 255, 255, .08); padding: clamp(56px, 7vw, 96px) 0 0; font-size: 15.5px; }
.pied-grille { display: grid; gap: 40px; }
@media (min-width: 700px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 60px; } }
.logo-pied { width: 190px; color: var(--or-clair); } .logo-pied .mot-symbole { background: var(--creme); }
.pied h3 { font: 400 12px var(--texte); letter-spacing: .26em; text-transform: uppercase; color: var(--or-clair); margin-bottom: 20px; }
.pied a { text-decoration: none; transition: color .3s; } .pied a:hover { color: var(--or-clair); }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(40px, 5vw, 70px); padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; letter-spacing: .06em; }
.pied-bas p { margin: 0; } .pied-reseaux { display: flex; gap: 10px; }
.pied-reseaux a { width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; display: grid; place-items: center; }
.pied-reseaux a:hover { border-color: var(--or-clair); }

/* 13 — Barre d'action mobile : l'appel et la réservation toujours sous le pouce */
.barre-mobile { position: fixed; inset: auto 12px calc(12px + env(safe-area-inset-bottom)); z-index: 80; display: grid; grid-template-columns: 1fr 1fr 1.5fr; background: var(--nuit); border-radius: 999px; padding: 6px; box-shadow: 0 20px 50px -18px rgba(33, 24, 19, .7); transform: translateY(140%); transition: transform .7s var(--doux); }
.barre-mobile.visible { transform: none; }
.barre-mobile a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 8px; border-radius: 999px; text-decoration: none; color: var(--creme); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.barre-mobile .icone { width: 17px; height: 17px; }
.barre-mobile .fort { background: var(--or-clair); color: var(--nuit); font-weight: 500; }
@media (min-width: 900px) { .barre-mobile { display: none; } }

/* 13 bis — SIGNATURE : le soleil du logo comme système de formes.
   L'astre (photo dans le disque, rayons autour), la couronne (demi-soleil levant
   derrière une photo en galet), le sceau tournant, le compteur de minutes et
   l'ambiance qui suit l'heure du visiteur. Rien de tout cela ne vient d'un gabarit. */
.astre { position: relative; display: block; width: 100%; aspect-ratio: 1; isolation: isolate; }
.astre-image { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--nude); outline: 1px solid var(--soleil); outline-offset: 7px; }
.astre-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--doux); }
/* Le disque de la photo fait 183 unités de rayon dans un soleil de 940 de large : 940 / 366 = 257 %. */
.astre-rayons { position: absolute; z-index: -1; left: 50%; top: 50%; width: 257%; aspect-ratio: 1; translate: -50% -50%; color: var(--soleil); pointer-events: none; }
.astre-rayons .soleil { display: block; width: 100%; height: 100%; overflow: visible; }
.astre-hero .soleil .traits { stroke-width: 1.5; }
.astre-hero .astre-rayons { animation: tourne 260s linear infinite; }
.astre-hero .rayon { stroke-dashoffset: 1; animation: trace 1.7s var(--doux) calc(.5s + var(--i) * 50ms) forwards; }
.astre-hero .astre-image { box-shadow: 0 50px 100px -40px rgba(74, 56, 45, .5); }
.astre-carte { width: 66%; margin: 19% auto 17%; }
.astre-carte .soleil .traits { stroke-width: 2.6; }
.carte-soin:hover .astre-image img { transform: scale(1.07); }
.astre-pourquoi .soleil .traits { stroke-width: 2; }
.astre-pourquoi .astre-rayons { color: var(--ivoire); }
.astre-pourquoi .astre-image { outline-color: var(--ivoire); }
/* Les rayons se tracent quand l'astre entre à l'écran ; sur les cartes, au survol quand il y a une souris. */
.anime .astre-carte .rayon, .anime .astre-pourquoi .rayon, .anime .couronne .rayon, .anime .couronne .disque { stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--doux) calc(.2s + var(--i, 0) * 45ms); }
.anime .vu .astre-pourquoi .rayon, .anime .vu .couronne .rayon, .anime .vu .couronne .disque, .anime .bandeau .couronne .rayon, .anime .bandeau .couronne .disque { stroke-dashoffset: 0; }
@media (hover: none) { .anime .vu .astre-carte .rayon, .anime .vu.carte-soin .rayon { stroke-dashoffset: 0; } }
@media (hover: hover) { .anime .carte-soin .rayon { transition-delay: 0s; transition-duration: .6s; } .anime .carte-soin:hover .rayon { stroke-dashoffset: 0; transition-delay: calc(var(--i) * 22ms); transition-duration: .9s; } }

.couronne { position: relative; display: block; width: 100%; isolation: isolate; }
.couronne-image { display: block; aspect-ratio: 4 / 5.7; border-radius: 999px; overflow: hidden; background: var(--nude); }
.couronne-image img { width: 100%; height: 100%; object-fit: cover; }
/* Soleil large de 2,5 × la photo, centré sur le centre du demi-cercle du haut, moitié basse masquée. */
.couronne-rayons { position: absolute; z-index: -1; left: 50%; top: 0; width: 250%; aspect-ratio: 1; transform: translate(-50%, -30%); clip-path: inset(0 0 50% 0); color: var(--soleil); pointer-events: none; }
.couronne-rayons .soleil { display: block; width: 100%; height: 100%; }
.couronne-rayons .soleil .traits { stroke-width: 2; }

.sceau { position: absolute; left: -13%; bottom: -7%; width: clamp(104px, 31%, 138px); aspect-ratio: 1; border-radius: 50%; background: var(--brun); color: var(--creme); display: grid; place-items: center; text-decoration: none; box-shadow: 0 18px 40px -16px rgba(33, 24, 19, .6); transition: background .5s, scale .6s var(--doux); }
.sceau:hover { background: var(--or); scale: 1.06; }
.sceau-texte { position: absolute; inset: 0; width: 100%; height: 100%; animation: tourne 26s linear infinite; }
.sceau-texte text { font: 500 14.5px var(--texte); letter-spacing: .12em; text-transform: uppercase; fill: currentColor; }
.sceau-coeur { width: 38%; aspect-ratio: 1; background: var(--soleil); -webkit-mask: url(../img/soleil.svg) center / contain no-repeat; mask: url(../img/soleil.svg) center / contain no-repeat; }

.minutes { margin: 0 0 .1em; display: grid; justify-items: center; }
.minutes-nombre { font: italic 300 clamp(74px, 15vw, 210px)/.95 var(--titre); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.2px var(--or); font-variant-numeric: tabular-nums; }
.minutes-legende { margin: 14px 0 34px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--taupe); }
@supports not (-webkit-text-stroke: 1px red) { .minutes-nombre { color: var(--or); } }

.onde { position: relative; z-index: 1; height: 26px; margin-top: -25px; background: var(--nuit); -webkit-mask: url(../img/onde.svg) left bottom / 150px 26px repeat-x; mask: url(../img/onde.svg) left bottom / 150px 26px repeat-x; }

/* L'heure du visiteur (posée sur <html data-moment> par le script de l'en-tête). Essai : ?moment=aube|jour|soir|nuit */
[data-moment="aube"] .hero { --h1: #fcefeb; --h2: #f7e6dc; }
[data-moment="soir"] .hero { --h1: #fae7d1; --h2: #f3d6b9; }
[data-moment="soir"] .astre-hero .astre-rayons { color: #e8a13c; }
[data-moment="soir"] .astre-hero .astre-image { outline-color: #e8a13c; }
[data-moment="nuit"] .hero { --h1: #17110d; --h2: #2a1e17; color: var(--nude); }
[data-moment="nuit"] .hero h1 { color: var(--creme); }
[data-moment="nuit"] .hero h1 em, [data-moment="nuit"] .hero .surtitre { color: var(--or-clair); }
[data-moment="nuit"] .hero .chapo { color: var(--nude); }
[data-moment="nuit"] .hero .bouton-plein { background: var(--or-clair); color: var(--nuit); }
[data-moment="nuit"] .hero .bouton-plein::before { background: var(--creme); }
[data-moment="nuit"] .hero .bouton-ligne { color: var(--creme); border-color: rgba(255, 255, 255, .3); }
[data-moment="nuit"] .hero .bouton-ligne::before { background: var(--creme); }
[data-moment="nuit"] .hero .bouton-ligne:hover { color: var(--nuit); }
[data-moment="nuit"] .hero .pastille-avis { background: transparent; border-color: rgba(255, 255, 255, .18); color: var(--nude); }
[data-moment="nuit"] .hero .pastille-avis strong { color: var(--creme); }
[data-moment="nuit"] .hero .pastille-avis .g { background: var(--or-clair); color: var(--nuit); }
[data-moment="nuit"] .hero .sceau { background: var(--or-clair); color: var(--nuit); }
[data-moment="nuit"] .hero .sceau-coeur { background: var(--nuit); }
[data-moment="nuit"] .reassurance { background: transparent; border-color: rgba(255, 255, 255, .12); }
[data-moment="nuit"] .reassurance li { color: var(--nude); }
[data-moment="nuit"] .home .entete:not(.pleine) .entete-nav a, [data-moment="nuit"] .home .entete:not(.pleine) .entete-tel { color: var(--creme); }
[data-moment="nuit"] .home .entete:not(.pleine) .mot-symbole { background: var(--creme); }
[data-moment="nuit"] .home .entete:not(.pleine) .logo { color: var(--or-clair); }
[data-moment="nuit"] .home .entete:not(.pleine) .bouton-plein { background: var(--or-clair); color: var(--nuit); }

/* 13 ter — Pages locales et FAQ */
.h1-local { display: block; margin-bottom: 18px; font: 400 clamp(12px, 1.05vw, 13.5px)/1.5 var(--texte); letter-spacing: .24em; text-transform: uppercase; color: var(--or); }
[data-moment="nuit"] .hero .h1-local { color: var(--or-clair); }
.regle { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--sable); border: 1px solid var(--sable); border-radius: 4px; overflow: hidden; margin-bottom: clamp(56px, 8vw, 110px); }
.regle div { background: var(--ivoire); padding: 28px 24px; text-align: center; }
.regle strong { display: block; font: italic 300 clamp(26px, 2.6vw, 36px)/1.1 var(--titre); color: var(--brun); margin-bottom: 8px; }
.regle span { font-size: 13.5px; line-height: 1.5; color: var(--taupe); display: block; }
.communes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 32px; }
.communes a { display: flex; flex-direction: column; padding: 16px 0; border-bottom: 1px solid var(--sable); text-decoration: none; transition: padding .5s var(--doux); }
.communes a:hover { padding-left: 10px; }
.communes strong { font: 400 20px/1.25 var(--titre); color: var(--brun); }
.communes span { font-size: 13px; color: var(--taupe); letter-spacing: .04em; }
.note-source { margin-top: 36px; font-size: 14px; color: var(--taupe); max-width: 70ch; }
.secteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.secteur { padding: 30px 28px; background: var(--ivoire); border: 1px solid var(--sable); border-radius: 4px; }
.secteur h3 { font-size: 24px; margin-bottom: 10px; }
.secteur p { font-size: 15.5px; line-height: 1.6; }
.secteur ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.secteur li { padding: 5px 13px; border: 1px solid var(--nude); border-radius: 999px; font-size: 12.5px; color: var(--cacao); }
.entete-section.avec-marge { margin-top: clamp(64px, 9vw, 130px); }
.resume-prestations { display: grid; gap: 40px 64px; }
@media (min-width: 900px) { .resume-prestations { grid-template-columns: 1fr 1fr; } }
.resume-prestations h3 { font: 400 12px var(--texte); letter-spacing: .26em; text-transform: uppercase; color: var(--or); margin-bottom: 8px; }
.resume-prestations ul { list-style: none; padding: 0; margin: 0; }
.resume-prestations a { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--sable); text-decoration: none; transition: padding .5s var(--doux); }
.resume-prestations a:hover { padding-left: 10px; }
.resume-prestations a span { font: 400 19px/1.25 var(--titre); color: var(--brun); }
.resume-prestations small { display: block; font: 300 13px var(--texte); color: var(--taupe); margin-top: 2px; }
.resume-prestations em { font: italic 300 17px var(--titre); color: var(--or); white-space: nowrap; }
.voisines { padding-block: clamp(50px, 7vw, 90px); background: var(--ivoire); }
.voisines .idees { margin-top: 0; }
.zones-accueil .idees { margin-top: 0; text-align: left; } .zones-accueil .idees div { justify-content: flex-start; }
.faq { background: var(--creme); }
.faq-item { border-bottom: 1px solid var(--sable); }
.faq-item:first-child { border-top: 1px solid var(--sable); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item h3 { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; }
.faq-item summary .icone { color: var(--or); transition: transform .5s var(--doux); }
.faq-item[open] summary .icone { transform: rotate(135deg); }
.faq-item p { margin: 0; padding: 0 40px 26px 0; max-width: 68ch; }

/* 14 — Mouvement */
@keyframes monte { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes tourne { to { rotate: 360deg; } }
.soleil.tourne { animation: tourne 160s linear infinite; }
.anime [data-revele] { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--doux) calc(var(--d, 0) * 110ms), transform 1.3s var(--doux) calc(var(--d, 0) * 110ms); }
.anime [data-revele].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .anime [data-revele] { opacity: 1; transform: none; }
  .entree { display: none; }
}