/* =====================================================================
   Dr Marc Sitbon, chirurgien-dentiste à Levallois-Perret
   Direction artistique « Le halo » (06/10/2026) : le miroir rond du dentiste
   et la lumière douce de la photobiomodulation. Lin, sable, chêne, tilleul,
   vert feuille ; Young Serif pour les titres (avec retenue), Atkinson
   Hyperlegible Next pour le texte (dessinée pour être lue sans effort).
   Règles d'espace (Léo, 03/10/2026) : sur ordinateur, une partie = un écran ;
   une photo a la hauteur du texte d'à côté ; une bande d'appel n'est jamais
   un écran entier.
   ===================================================================== */

/* Polices (modernisation du 07/10/2026, demande de Léo) : Figtree, une sans-serif géométrique et chaleureuse, pour tout ;
   Source Serif 4 en italique pour le mot mis en lumière de chaque titre. Servies par le site, licence OFL. */
@font-face { font-family: "Figtree"; src: url("polices/figtree.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("polices/source-serif-italique.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --lin: #FBFAF6;
  --blanc: #FFFFFF;
  --sable: #F2ECE1;
  --sable-2: #E7DECF;
  --chene: #A8835C;
  --chene-fonce: #74563A;
  --ecorce: #2D2620;
  --ecorce-2: #594C42;
  --tilleul: #F7E4D3;
  --tilleul-2: #EFCDB4;
  --pousse: #E2A06E;
  --feuille: #B25A2B;   /* 15/10/2026 : #B85F2E à peine assombri, contraste 4,5 atteint sur le blanc et le lin (accessibilité) */
  --feuille-fonce: #8A4622;
  --nuit: #25201B;
  --nuit-2: #3A3029;
  --lumiere: #F0A27E;
  --rouge-doux: #E9876F;
  --infra: #C25A4B;
  --ligne: #E5DDCE;
  --rayon: 22px;
  --rayon-petit: 14px;
  --ombre: 0 26px 50px -30px rgba(61, 45, 30, .42);
  --ombre-douce: 0 12px 30px -20px rgba(61, 45, 30, .34);
  --courbe: cubic-bezier(.22, .8, .24, 1);
  --rebond: cubic-bezier(.34, 1.4, .5, 1);
  --titre: "Figtree", "Segoe UI", system-ui, sans-serif;
  --texte: "Figtree", "Segoe UI", system-ui, sans-serif;
  --accent: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --entete-h: 78px;
  --int: 1220px;
  --gouttiere: clamp(20px, 4vw, 48px);
  --ecart-tete: clamp(28px, 4.4vh, 50px);

  /* variables lues par socle.css (agenda, articles, sources) */
  --ag-rayon: 22px;
  --ag-ombre: 0 22px 46px -30px rgba(61, 45, 30, .45);
  --ag-ligne: #E5DDCE;
  --ag-fond-doux: #F2ECE1;
  --ag-fond-tete: #F2ECE1;
  --ag-titre: #2D2620;
  --ag-texte: #2D2620;
  --ag-gris: #594C42;
  --ag-gris-2: #74563A;
  --ag-accent: #B25A2B;
  --ag-accent-fonce: #8A4622;
  /* illustrations au trait du socle, recolorées à la charte */
  --illu-police: "Figtree", system-ui, sans-serif;
  --illu-texte: #2D2620;
  --illu-texte-2: #594C42;
  --illu-accent: #B25A2B;
  --illu-accent-2: #E2A06E;
  --illu-trait: #5C4A3B;
  --illu-doux: #F2ECE1;
  --illu-metal: #D9D4CB;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete-h) + 16px); overflow-x: clip; }
body { margin: 0; background: var(--lin); color: var(--ecorce); font-family: var(--texte); font-size: 18px; line-height: 1.62; font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--feuille); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--tilleul-2); color: var(--ecorce); }

.int { width: 100%; max-width: var(--int); margin-inline: auto; padding-inline: var(--gouttiere); }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: 12px; background: var(--ecorce); color: var(--lin); font-weight: 700; text-decoration: none; transition: top .2s; }
.evitement:focus { top: 12px; }

/* ---------- Titres : Young Serif, un mot en lumière (le halo) ---------- */
.t1, .t2 { font-family: var(--titre); font-weight: 400; color: var(--ecorce); letter-spacing: -.012em; text-wrap: balance; }
.t1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.06; }
.t2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; }
.t3 { font-family: var(--texte); font-weight: 700; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.25; color: var(--ecorce); letter-spacing: -.005em; }
.t4 { font-family: var(--texte); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--chene-fonce); }
.t1 em, .t2 em, .t3 em { font-style: normal; color: var(--feuille); position: relative; z-index: 0; white-space: nowrap; }
.t1 em::before, .t2 em::before { content: ""; position: absolute; z-index: -1; inset: -.04em -.28em -.02em; border-radius: 999px; background: radial-gradient(closest-side, rgba(240, 190, 150, .95), rgba(240, 190, 150, 0)); }
.surtitre { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; color: var(--chene-fonce); margin-bottom: 18px; }
.surtitre::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--feuille); box-shadow: 0 0 0 5px var(--tilleul); flex: none; }
.hero-chapo, .chapo { font-size: clamp(18px, 1.35vw, 20.5px); line-height: 1.58; color: var(--ecorce-2); max-width: 58ch; }
.page-tete .hero-chapo, .hero .hero-chapo { margin-top: 20px; }
.section-tete { max-width: 760px; margin-bottom: var(--ecart-tete); }
.section-tete .chapo { margin-top: 16px; }
.section-tete--centre { margin-inline: auto; text-align: center; }
.section-tete--centre .surtitre { justify-content: center; }
.section-tete--ligne { max-width: none; display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 16px 56px; }
.section-tete--ligne > div { max-width: 640px; flex: 1 1 auto; }
.section-tete--ligne > .chapo { flex: 0 1 430px; margin: 0; font-size: 17px; }
.section-tete--ligne > .lien-fleche { flex: none; }
@media (max-width: 900px) { .section-tete--ligne { flex-wrap: wrap; } .section-tete--ligne > .chapo { flex-basis: 100%; } }

/* ---------- Boutons : pilule vert feuille, rond qui glisse ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 7px 8px 7px 24px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 700; font-size: 16.5px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, border-color .3s, transform .4s var(--courbe), box-shadow .4s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-rond { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .16); transition: transform .45s var(--rebond), background .3s; }
.btn:hover .btn-rond { transform: translateX(3px) rotate(-8deg); }
.btn--plein { background: var(--feuille); color: #fff; box-shadow: 0 14px 30px -16px rgba(138, 70, 34, .75); }
.btn--plein:hover { background: var(--feuille-fonce); transform: translateY(-2px); }
.btn--contour { padding: 7px 22px; gap: 10px; border-color: var(--sable-2); background: var(--blanc); color: var(--ecorce); }
.btn--contour svg { color: var(--feuille); }
.btn--contour:hover { border-color: var(--feuille); transform: translateY(-2px); }
.btn--clair { background: var(--lin); color: var(--ecorce); }
.btn--clair .btn-rond { background: var(--feuille); color: #fff; }
.btn--clair:hover { background: #fff; transform: translateY(-2px); }
.btn--fantome { padding: 7px 22px; gap: 10px; border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn--fantome:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn--petit { min-height: 46px; font-size: 15px; padding: 5px 6px 5px 18px; }
.btn--petit .btn-rond { width: 34px; height: 34px; }
.btn--petit.btn--contour { padding: 5px 16px; }
.btn--large { width: 100%; }
.btn-texte { white-space: nowrap; }
.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--feuille-fonce); text-decoration: none; background: none; border: 0; padding: 0; }
.lien-fleche svg { width: 17px; height: 17px; transition: transform .35s var(--courbe); }
.lien-fleche:hover svg { transform: translateX(5px); }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- En-tête ---------- */
.progression { position: fixed; left: 0; top: 0; z-index: 120; width: 100%; height: 3px; background: linear-gradient(90deg, var(--pousse), var(--feuille)); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.entete { position: sticky; top: 0; z-index: 100; height: var(--entete-h); background: rgba(251, 250, 246, .9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.entete--solide { border-bottom-color: var(--ligne); box-shadow: 0 10px 30px -26px rgba(61, 45, 30, .5); }
.entete-int { height: 100%; display: flex; align-items: center; gap: 22px; max-width: 1440px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ecorce); flex: none; }
.logo-halo { width: 44px; height: 44px; flex: none; }
.logo-texte { display: grid; line-height: 1.12; }
.logo-texte b { font-family: var(--titre); font-weight: 400; font-size: 21px; letter-spacing: -.01em; }
.logo-texte small { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--chene-fonce); margin-top: 4px; }
/* Le nom du logo (07/10/2026) : « Dr Marc » en Figtree, « Sitbon » en Source Serif 4 italique vert, comme les titres. */
.logo-texte b em { font-family: var(--accent); font-style: italic; font-weight: 500; font-size: 1.05em; letter-spacing: 0; color: var(--feuille); }
.entete nav { margin-left: auto; }
.menu { display: flex; align-items: center; gap: 2px; }
.menu > li { position: relative; }
.menu a, .menu-soins > button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 10px 13px; border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--ecorce); text-decoration: none; background: none; border: 0; transition: background .25s, color .25s; }
.menu a:hover, .menu-soins > button:hover, .menu-soins.ouvert > button { background: var(--sable); }
.menu a.actif { background: var(--tilleul); color: var(--feuille-fonce); }
.menu-soins > button svg { width: 14px; height: 14px; transition: transform .3s; }
.menu-soins.ouvert > button svg { transform: rotate(180deg); }
.sous-menu { position: absolute; top: calc(100% + 10px); left: -10px; width: 330px; padding: 10px; border-radius: 20px; background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--ombre); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--courbe), visibility 0s .3s; }
.menu-soins.ouvert .sous-menu, .menu-soins:focus-within .sous-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--courbe); }
.sous-menu a { display: grid; grid-template-columns: 36px 1fr; gap: 2px 12px; align-items: center; padding: 10px 12px; border-radius: 14px; }
.sous-menu a i { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--tilleul); color: var(--feuille-fonce); display: grid; place-items: center; }
.sous-menu a i svg { width: 18px; height: 18px; }
.sous-menu a b { font-size: 15.5px; }
.sous-menu a small { font-size: 13px; font-weight: 500; color: var(--ecorce-2); }
.entete-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--sable-2); background: var(--blanc); place-items: center; }
.burger svg { width: 22px; height: 22px; }
.burger .icone-fermer, .burger[aria-expanded="true"] .icone-menu { display: none; }
.burger[aria-expanded="true"] .icone-fermer { display: block; }
.entete--menu { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--lin); }
@media (max-width: 1499px) { .entete-actions .btn--contour .btn-texte { display: none; } .entete-actions .btn--contour { width: 46px; padding: 0; } }
@media (max-width: 1320px) { .logo-texte small { display: none; } }
@media (max-width: 1180px) { .entete nav, .entete-actions .btn--contour { display: none; } .burger { display: grid; } .entete-actions { margin-left: auto; } }
@media (max-width: 520px) { .entete-actions .btn--plein { display: none; } .logo-texte b { font-size: 19px; } }
.menu-mobile { position: fixed; z-index: 90; inset: var(--entete-h) 0 0 0; overflow-y: auto; padding: 18px var(--gouttiere) 120px; background: var(--lin); display: flex; flex-direction: column; gap: 4px; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .35s var(--courbe), visibility 0s .35s; }
.menu-mobile.ouvert { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .35s var(--courbe); }
.menu-mobile .lien { display: block; padding: 13px 4px; font-family: var(--titre); font-size: 25px; text-decoration: none; border-bottom: 1px solid var(--ligne); }
.menu-mobile .lien--petit { font-family: var(--texte); font-size: 17px; font-weight: 600; padding: 10px 4px; border: 0; color: var(--ecorce-2); }
.menu-mobile .btn { margin-top: 12px; }

/* ---------- Le halo : cercle photo, anneau de lumière qui respire ---------- */
.halo { position: relative; aspect-ratio: 1; border-radius: 50%; isolation: isolate; }
.halo::before { content: ""; position: absolute; inset: -5.5%; z-index: -1; border-radius: 50%; background: conic-gradient(from 210deg, #EBC2A4, #EADFCB 30%, #F4C9AE 52%, #F5DCC8 74%, #EBC2A4); filter: blur(.5px); animation: halo-respire 9s ease-in-out infinite; }
.halo::after { content: ""; position: absolute; inset: -11%; z-index: -2; border-radius: 50%; border: 1px solid rgba(168, 131, 92, .28); }
.halo img, .halo .halo-fond { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 30px 60px -36px rgba(45, 38, 32, .6); }
@keyframes halo-respire { 0%, 100% { transform: scale(1) rotate(0deg); opacity: .95; } 50% { transform: scale(1.03) rotate(22deg); opacity: 1; } }
.halo--sans-anneau::after { display: none; }

/* ---------- Écrans : sur ordinateur, une partie = un écran (règle de Léo) ---------- */
.section { position: relative; padding-block: clamp(56px, 8vh, 96px); }
.section--sable { background: var(--sable); }
.section--tilleul { background: linear-gradient(180deg, var(--tilleul) 0%, #F7EEE4 100%); }
@media (min-width: 1024px) and (min-height: 640px) {
  .ecran { min-height: min(calc(100svh - var(--entete-h)), 980px); display: flex; flex-direction: column; justify-content: center; }
  .ecran > .int { width: 100%; }
}

/* ---------- Accueil : l'ouverture d'écran ---------- */
.hero { position: relative; padding-block: clamp(20px, 3.4vh, 44px) clamp(18px, 3vh, 34px); overflow: clip; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -260px; top: -320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 228, 211, .9), rgba(247, 228, 211, 0)); }
.hero-int { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 70px); align-items: center; flex: 1; }
.hero .t1 { max-width: 17ch; font-size: clamp(36px, 3.7vw, 56px); }
.hero .hero-chapo { max-width: 52ch; }
.hero-confiance { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: 15px; color: var(--ecorce-2); }
.hero-confiance li { display: inline-flex; align-items: center; gap: 8px; }
.hero-confiance b { font-weight: 700; color: var(--chene-fonce); }
.hero-confiance svg { width: 18px; height: 18px; color: var(--feuille); }
.hero-visuel { position: relative; align-self: stretch; container-type: size; min-height: 320px; }
.hero-visuel .halo { position: absolute; left: 50%; top: 50%; width: min(86cqw, 86cqh); transform: translate(-50%, -50%); }
.carte-flottante { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); border: 1px solid var(--ligne); box-shadow: var(--ombre-douce); font-size: 14.5px; line-height: 1.3; color: var(--ecorce-2); animation: flotte 7s ease-in-out infinite; }
.carte-flottante b { display: block; color: var(--ecorce); font-size: 15px; }
.carte-flottante > i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tilleul); color: var(--feuille-fonce); flex: none; }
.carte-flottante > i svg { width: 19px; height: 19px; }
.carte-flottante--1 { left: 2%; bottom: 14%; }
.carte-flottante--2 { right: 0; top: 10%; animation-delay: -3.5s; }
.carte-flottante--lumiere > i { background: radial-gradient(circle at 50% 50%, #FBE2D3 0 30%, #F3B595 60%, #EE9C7A 100%); color: #7A2F1F; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.statut { display: inline-flex; align-items: center; gap: 8px; }
.statut::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--chene); box-shadow: 0 0 0 4px rgba(168, 131, 92, .18); flex: none; }
.statut.ouvert::before { background: #D9733F; box-shadow: 0 0 0 4px rgba(217, 115, 63, .2); animation: pouls 2.4s ease-out infinite; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(217, 115, 63, .45); } 100% { box-shadow: 0 0 0 10px rgba(217, 115, 63, 0); } }
.reperes { margin-top: clamp(16px, 2.6vh, 30px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: 26px; background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--ombre-douce); }
.repere { display: flex; gap: 12px; align-items: center; padding: 16px 20px; min-width: 0; }
.repere + .repere { border-left: 1px solid var(--ligne); }
.repere > i { width: 40px; height: 40px; border-radius: 50%; background: var(--tilleul); color: var(--feuille-fonce); display: grid; place-items: center; flex: none; }
.repere > i svg { width: 20px; height: 20px; }
.repere b { display: block; font-size: 15.5px; line-height: 1.3; }
.repere span { display: block; font-size: 14.5px; line-height: 1.4; color: var(--ecorce-2); margin-top: 3px; }
.repere a { color: inherit; text-decoration-color: var(--tilleul-2); text-underline-offset: 3px; }

/* ---------- Accueil : les soins (cartes, deux grandes) ---------- */
.soins-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: 16px; }
.soin-carte { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; min-width: 0; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--ligne); text-decoration: none; color: var(--ecorce); overflow: hidden; transition: transform .45s var(--courbe), box-shadow .45s, border-color .3s; }
.soin-carte:hover { transform: translateY(-5px); box-shadow: var(--ombre); border-color: transparent; }
.soin-carte .t3 { margin-top: 6px; }
.soin-carte p { font-size: 16px; line-height: 1.55; color: var(--ecorce-2); }
.soin-carte .lien-fleche { margin-top: auto; padding-top: 6px; font-size: 15px; }
.soin-icone { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--tilleul); color: var(--feuille-fonce); flex: none; transition: transform .5s var(--rebond), box-shadow .4s; }
.soin-icone svg { width: 25px; height: 25px; }
.soin-carte:hover .soin-icone { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(247, 228, 211, .7); }
.soin-carte--grande { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 14px; align-items: stretch; padding: 0; }
.soin-carte--grande .soin-texte { display: flex; flex-direction: column; gap: 8px; padding: 24px 0 22px 26px; }
.soin-carte--grande .soin-photo { position: relative; container-type: size; min-height: 220px; }
.soin-carte--grande .soin-photo .halo { position: absolute; width: min(82cqw, 82cqh); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.soin-carte--grande .t3 { font-family: var(--titre); font-weight: 400; font-size: clamp(25px, 2vw, 30px); line-height: 1.12; }
.soin-prix { display: inline-flex; align-self: flex-start; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--sable); font-size: 14px; color: var(--ecorce-2); }
.soin-prix b { color: var(--ecorce); font-size: 15px; }
.soin-carte--lumiere { background: linear-gradient(155deg, #FFFFFF 40%, #FBEFE7 100%); }
.soin-carte--lumiere .soin-icone { background: radial-gradient(circle, #FCE6D9 0 35%, #F6C3A8 75%, #F1AE8F 100%); color: #7A2F1F; }

/* ---------- Accueil : l'implant, étape par étape ---------- */
.implant-int { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 84px); align-items: stretch; }
.implant-visuel { position: relative; container-type: size; min-height: 360px; }
.implant-visuel .halo { position: absolute; left: 50%; top: 50%; width: min(96cqw, 92cqh); transform: translate(-50%, -50%); }
.implant-visuel .halo-fond { display: grid; place-items: center; background: var(--blanc); padding: 15%; }
.implant-visuel .illu { width: 100%; }
.etapes { margin-top: 22px; display: grid; gap: 0; position: relative; }
.etape { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding-bottom: 14px; position: relative; }
.etape:last-child { padding-bottom: 0; }
.etape::before { content: ""; position: absolute; left: 23px; top: 46px; bottom: 2px; width: 2px; background: linear-gradient(var(--tilleul-2), var(--sable-2)); }
.etape:last-child::before { display: none; }
.etape-num { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); border: 1.5px solid var(--tilleul-2); font-family: var(--titre); font-size: 22px; color: var(--feuille); position: relative; z-index: 1; }
.etape .etape-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; }
.etape b { font-size: 17.5px; line-height: 1.3; color: var(--ecorce); }
.etape p { font-size: 15.5px; line-height: 1.5; color: var(--ecorce-2); margin-top: 2px; }
.etape small { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--sable-2); font-size: 12.5px; font-weight: 700; color: var(--chene-fonce); letter-spacing: .02em; }
.note-prix { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--sable); font-size: 15.5px; line-height: 1.5; color: var(--ecorce-2); }
.note-prix svg { width: 20px; height: 20px; color: var(--feuille); flex: none; margin-top: 2px; }
.note-prix b { color: var(--ecorce); }

/* ---------- La lumière (photobiomodulation) : le seul moment sombre ---------- */
.section--lumiere { background: var(--nuit); color: #F4ECE3; overflow: clip; isolation: isolate; }
.section--lumiere::before { content: ""; position: absolute; z-index: -1; width: 1100px; height: 1100px; left: 50%; top: 50%; transform: translate(-6%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 162, 126, .28), rgba(194, 90, 75, .12) 45%, rgba(37, 32, 27, 0) 72%); animation: lueur 10s ease-in-out infinite; }
@keyframes lueur { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.section--lumiere .t2, .section--lumiere .t3 { color: #FBF4EC; }
.section--lumiere .t2 em { color: var(--lumiere); }
.section--lumiere .t2 em::before { background: radial-gradient(closest-side, rgba(240, 162, 126, .32), rgba(240, 162, 126, 0)); }
.section--lumiere .surtitre { color: #E8C7AE; }
.section--lumiere .surtitre::before { background: var(--lumiere); box-shadow: 0 0 0 5px rgba(240, 162, 126, .22), 0 0 18px 4px rgba(240, 162, 126, .45); }
.section--lumiere .chapo { color: #D9CBBE; }
.lumiere-int { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.lumiere-points { margin-top: 26px; display: grid; gap: 14px; }
.lumiere-points li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 16.5px; line-height: 1.5; color: #E9DDD1; }
.lumiere-points li svg { width: 20px; height: 20px; color: var(--lumiere); margin-top: 3px; }
.lumiere-points b { color: #FFF6EE; }
.section--lumiere .btn--plein { background: #F3E9DE; color: var(--nuit); box-shadow: 0 18px 40px -22px rgba(240, 162, 126, .7); }
.section--lumiere .btn--plein .btn-rond { background: var(--nuit); color: #F3E9DE; }
.section--lumiere .btn--plein:hover { background: #fff; }
.schema { border-radius: 28px; background: linear-gradient(180deg, #2F2822, #2A231E); border: 1px solid rgba(255, 255, 255, .08); padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8); }
.schema-choix { display: inline-flex; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); gap: 4px; }
.schema-choix button { border: 0; background: none; padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 700; color: #D9CBBE; display: inline-flex; align-items: center; gap: 8px; transition: background .3s, color .3s; }
.schema-choix button i { width: 10px; height: 10px; border-radius: 50%; background: var(--rouge-doux); box-shadow: 0 0 10px 2px rgba(233, 135, 111, .6); }
.schema-choix button[data-onde="infra"] i { background: var(--infra); box-shadow: 0 0 10px 2px rgba(194, 90, 75, .55); }
.schema-choix button[aria-pressed="true"] { background: #F3E9DE; color: var(--nuit); }
.schema svg { width: 100%; height: auto; margin-top: 16px; display: block; }
.schema-legende { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #D9CBBE; min-height: 3em; }
.schema-legende b { color: #FFF6EE; }
.sch-gencive { fill: #E7B6A6; }
.sch-gencive-trait { fill: none; stroke: #F3CDBF; stroke-width: 2; }
.sch-os { fill: #E9DCC6; }
.sch-os-pores { fill: #D9C8AC; }
.sch-dent { fill: #FBF7F0; stroke: #CDBFAE; stroke-width: 2; }
.sch-racine { fill: #F3EADC; stroke: #CDBFAE; stroke-width: 2; }
.sch-sonde { fill: #4A3F37; stroke: #6A5B50; stroke-width: 1.5; }
.sch-tete { fill: #5A4C42; }
.sch-texte { font-family: var(--texte); font-size: 15px; font-weight: 700; fill: #F4ECE3; }
.sch-petit { font-family: var(--texte); font-size: 13px; font-weight: 600; fill: #CDBFB2; }
.sch-faisceau { opacity: .9; transition: opacity .6s; }
.sch-faisceau--rouge { fill: url(#faisceau-rouge); }
.sch-faisceau--infra { fill: url(#faisceau-infra); }
.sch-trait-niveau { stroke: rgba(255, 255, 255, .25); stroke-width: 1; stroke-dasharray: 3 5; }
.schema[data-onde="rouge"] .sch-faisceau--infra, .schema[data-onde="infra"] .sch-faisceau--rouge { opacity: 0; }
.sch-rayon { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 14; animation: rayon 1.6s linear infinite; }
.sch-rayon--rouge { stroke: #F6B49C; }
.sch-rayon--infra { stroke: #E07A68; }
.schema[data-onde="rouge"] .sch-rayon--infra, .schema[data-onde="infra"] .sch-rayon--rouge { opacity: 0; }
@keyframes rayon { to { stroke-dashoffset: -40; } }

/* ---------- Le praticien ---------- */
.praticien-int { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 84px); align-items: stretch; }
.praticien-visuel { position: relative; container-type: size; min-height: 340px; }
.praticien-visuel .halo { position: absolute; left: 50%; top: 50%; width: min(92cqw, 92cqh); transform: translate(-50%, -50%); }
.monogramme { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--sable) 70%); font-family: var(--titre); font-size: clamp(64px, 9vw, 120px); color: var(--feuille); letter-spacing: -.02em; }
.faits { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fait { padding: 16px 18px; border-radius: 18px; background: var(--blanc); border: 1px solid var(--ligne); }
.fait b { display: block; font-family: var(--titre); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--feuille); }
.fait span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.4; color: var(--ecorce-2); }
.langues { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.langues li { padding: 6px 12px; border-radius: 999px; background: var(--tilleul); color: var(--feuille-fonce); font-size: 14px; font-weight: 700; }

/* ---------- Le cabinet : trois cercles ---------- */
.cabinet-int { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 84px); align-items: center; }
.cercles { position: relative; aspect-ratio: 1; max-height: min(74vh, 640px); margin-inline: auto; width: 100%; }
.cercles .halo { position: absolute; }
.cercles .halo:nth-child(1) { width: 76%; left: 0; top: 0; z-index: 1; }
.cercles .halo:nth-child(2) { width: 56%; right: 0; bottom: 0; z-index: 2; }
.cercles .halo:nth-child(2)::before { animation-delay: -3s; }
.liste-coches { display: grid; gap: 12px; margin-top: 24px; }
.liste-coches li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: 16.5px; line-height: 1.5; color: var(--ecorce-2); }
.liste-coches li svg { width: 22px; height: 22px; color: var(--feuille); margin-top: 1px; }
.liste-coches li b { color: var(--ecorce); }

/* ---------- Prix repères (honoraires) ---------- */
.prix-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.prix-carte { padding: 24px 26px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--ligne); }
.prix-carte span { display: block; font-size: 15px; font-weight: 700; color: var(--chene-fonce); }
.prix-carte b { display: block; margin-top: 8px; font-family: var(--titre); font-weight: 400; font-size: clamp(28px, 2.4vw, 36px); line-height: 1.1; color: var(--ecorce); }
.prix-carte p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ecorce-2); }

/* ---------- Infos pratiques : le plan dans un cercle ---------- */
.infos-int { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.plan-halo { width: min(100%, 600px); margin-inline: auto; }
.plan-halo .plan { border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: 0 30px 60px -36px rgba(45, 38, 32, .6); }
.plan-halo .plan img { width: 100%; height: 100%; object-fit: cover; }
.plan-halo .plan-legende { text-align: center; }
.horaires { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--ligne); }
.horaires li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 4px; border-bottom: 1px solid var(--ligne); font-size: 16px; }
.horaires li span:last-child { color: var(--ecorce-2); text-align: right; }
.horaires li.aujourdhui { background: linear-gradient(90deg, var(--tilleul), rgba(247, 228, 211, 0)); font-weight: 700; padding-inline: 12px; border-radius: 10px; }
.horaires li.aujourdhui span:last-child { color: var(--ecorce); }
.acces-liste { display: grid; gap: 14px; margin-top: 24px; }
.acces-liste li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.5; color: var(--ecorce-2); }
.acces-liste li > i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); border: 1px solid var(--ligne); color: var(--feuille); }
.acces-liste li > i svg { width: 19px; height: 19px; }
.acces-liste b { color: var(--ecorce); }
.colonnes-infos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 8px; }

/* ---------- Questions (FAQ) : le bouton « + » rond ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.question { border-radius: 18px; background: var(--blanc); border: 1px solid var(--ligne); transition: border-color .3s, box-shadow .3s; }
.question[open] { border-color: var(--tilleul-2); box-shadow: var(--ombre-douce); }
.question summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px 18px 24px; font-weight: 700; font-size: 17.5px; line-height: 1.4; }
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: "+"; width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tilleul); color: var(--feuille-fonce); font-size: 22px; font-weight: 500; line-height: 1; transition: transform .4s var(--rebond), background .3s, color .3s; }
.question[open] summary::after { transform: rotate(45deg); background: var(--feuille); color: #fff; }
.question p { padding: 0 24px 20px; font-size: 16.5px; line-height: 1.6; color: var(--ecorce-2); max-width: 70ch; }

/* ---------- Bande d'appel : jamais un écran entier ---------- */
.section--appel { padding-block: clamp(40px, 6vh, 72px); }
.appel { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(30px, 4vw, 52px) clamp(26px, 4vw, 56px); border-radius: 30px; background: var(--feuille-fonce); color: #EEF4E8; isolation: isolate; }
.appel::before, .appel::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; border: 1px solid rgba(247, 228, 211, .22); }
.appel::before { width: 420px; height: 420px; right: -120px; top: -180px; box-shadow: 0 0 0 46px rgba(247, 228, 211, .05), 0 0 0 92px rgba(247, 228, 211, .035); }
.appel::after { width: 160px; height: 160px; left: 38%; bottom: -110px; }
.appel .t2 { color: #FBFAF6; max-width: 20ch; }
.appel .t2 em { color: #F3D3BC; }
.appel .t2 em::before { background: radial-gradient(closest-side, rgba(226, 160, 110, .45), rgba(226, 160, 110, 0)); }
.appel p { margin-top: 10px; color: #EBD9CB; max-width: 52ch; font-size: 17px; }
.appel-boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Conseils sur l'accueil (cartes du socle, à la charte) ---------- */
.conseil-carte { border-radius: var(--rayon); }
.conseil-carte img { aspect-ratio: 16 / 10; }

/* ---------- Pages intérieures ---------- */
.page-tete { position: relative; background: linear-gradient(180deg, var(--sable) 0%, var(--lin) 100%); overflow: clip; }
.page-tete::before { content: ""; position: absolute; z-index: 0; width: 760px; height: 760px; right: -200px; top: -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247, 228, 211, .95), rgba(247, 228, 211, 0)); }
.page-tete-int { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; padding-top: clamp(30px, 5vh, 60px); padding-bottom: clamp(40px, 6vh, 72px); }
.page-tete .t1 { font-size: clamp(36px, 4vw, 58px); }
.page-visuel { position: relative; aspect-ratio: 1; width: min(100%, 50vh, 470px); margin-inline: auto; border-radius: 50%; isolation: isolate; }
.page-visuel::before { content: ""; position: absolute; inset: -5.5%; z-index: -1; border-radius: 50%; background: conic-gradient(from 210deg, var(--tilleul-2), var(--sable) 30%, #F6D7C3 52%, var(--tilleul) 74%, var(--tilleul-2)); animation: halo-respire 9s ease-in-out infinite; }
.page-visuel img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 14.5px; color: var(--ecorce-2); }
.fil a { color: var(--ecorce-2); text-decoration: none; font-weight: 600; }
.fil a:hover { color: var(--feuille-fonce); text-decoration: underline; text-underline-offset: 3px; }
.fil span::before { content: "·"; margin-right: 6px; color: var(--chene); }
.en-bref { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.en-bref li { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .8); border: 1px solid var(--ligne); }
.en-bref b { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--chene-fonce); }
.en-bref span { display: block; margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--ecorce); line-height: 1.35; }
.bloc { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: stretch; }
.bloc--inverse > :first-child { order: 2; }
.bloc-texte p:not([class]) { font-size: 17.5px; line-height: 1.68; color: var(--ecorce-2); margin-top: 14px; }
.bloc-texte p:not([class]) b { color: var(--ecorce); }
.bloc-texte .t2 + p { margin-top: 18px; }
.bloc-visuel { position: relative; container-type: size; min-height: 300px; }
.bloc-visuel .halo { position: absolute; left: 50%; top: 50%; width: min(92cqw, 92cqh, 560px); transform: translate(-50%, -50%); }
.bloc-visuel .illu-cadre { position: absolute; inset: 0; margin: auto; height: fit-content; max-height: 100%; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(14px, 2.5vw, 28px); }
.cartes-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cartes-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.carte { padding: 26px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--ligne); }
.carte .soin-icone { margin-bottom: 16px; }
.carte .t3 { margin-bottom: 8px; }
.carte p { font-size: 16px; line-height: 1.55; color: var(--ecorce-2); }
.section--sable .carte, .section--sable .question, .section--sable .fait { background: var(--blanc); }
.encadre-doux { margin-top: 22px; padding: 18px 20px; border-radius: 18px; background: var(--tilleul); color: var(--ecorce); font-size: 16px; line-height: 1.55; }
.encadre-doux b { display: block; margin-bottom: 4px; color: var(--feuille-fonce); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.tableau-prix { width: 100%; border-collapse: collapse; background: var(--blanc); border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--ligne); }
.tableau-prix th, .tableau-prix td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--ligne); font-size: 16px; vertical-align: top; }
.tableau-prix th { background: var(--sable); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--chene-fonce); }
.tableau-prix td:last-child { white-space: nowrap; font-weight: 700; }
.tableau-prix tr:last-child td { border-bottom: 0; }
.tableau-prix small { display: block; color: var(--ecorce-2); font-size: 14px; margin-top: 2px; font-weight: 400; }
.a-confirmer { background: #FFF1C8; padding: 1px 6px; border-radius: 6px; font-weight: 700; }
.texte-legal { max-width: 820px; }
.texte-legal h2 { font-family: var(--titre); font-weight: 400; font-size: 28px; margin: 34px 0 10px; }
.texte-legal p, .texte-legal li { font-size: 16.5px; line-height: 1.65; color: var(--ecorce-2); margin-top: 8px; }
.texte-legal ul { list-style: disc; padding-left: 20px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--ecorce); color: #D9CFC4; padding-top: clamp(52px, 7vh, 80px); }
.pied-int { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.pied a { color: #EFE7DD; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pied .t4 { color: #F3D3BC; margin-bottom: 14px; }
.pied ul { display: grid; gap: 8px; font-size: 15.5px; }
.logo--pied { color: #FBFAF6; }
.logo--pied .logo-texte small { color: #CDBFB2; }
.logo--pied .logo-texte b em { color: #F0B48C; }
.pied-desc { margin-top: 16px; font-size: 15px; line-height: 1.6; max-width: 38ch; color: #CDBFB2; }
.pied-legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; line-height: 1.6; color: #B9AB9E; max-width: 110ch; }
.pied-bas { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 18px 0 30px; font-size: 13.5px; color: #B9AB9E; }
.pied-bas a { color: #D9CFC4; }
.barre-mobile { display: none; }

/* ---------- Apparitions douces (jamais sur le premier écran, jamais en JS seul) ---------- */
html.reveal-actif [data-reveal]:not([data-vu]) { opacity: 0; transform: translateY(22px); }
html.reveal-actif [data-reveal="zoom"]:not([data-vu]) { opacity: 0; transform: scale(.94); }
[data-reveal] { transition: opacity .9s var(--courbe), transform .9s var(--courbe); }
[data-net] { transition: none !important; }

/* ---------- L'onde au clic : un petit halo qui s'ouvre ---------- */
.onde { position: fixed; z-index: 400; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid rgba(184, 95, 46, .55); pointer-events: none; animation: onde .7s var(--courbe) forwards; }
@keyframes onde { to { transform: scale(5); opacity: 0; } }

/* ---------- L'ouverture (une fois par visite) : le point de lumière éclot, l'anneau puis la dent du logo se dessinent,
   le nom apparaît, l'iris s'ouvre sur la page (07/10/2026, logo validé par Léo) ---------- */
#ouverture { position: fixed; inset: 0; z-index: 500; display: none; pointer-events: none; }
html.avec-ouverture:not(.ouverture-finie) #ouverture { display: block; }
.ouverture-iris { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 160vmax var(--lin); }
html.ouverture-prete .ouverture-iris { animation: iris .95s cubic-bezier(.65, 0, .35, 1) 1.85s forwards; }
@keyframes iris { to { width: 320vmax; height: 320vmax; } }
.ouverture-int { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 24px; }
.ouverture-logo { width: 136px; height: 136px; overflow: visible; opacity: 0; }
html.avec-ouverture .ouverture-logo [pathLength] { stroke-dasharray: 1 2; stroke-dashoffset: 1.001; }
.ouverture-logo .l-point, .ouverture-logo .l-lueur { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.ouverture-nom { font-family: var(--titre); font-weight: 600; letter-spacing: -.02em; font-size: clamp(30px, 4vw, 44px); color: var(--ecorce); opacity: 0; transform: translateY(10px); text-align: center; line-height: 1.1; }
.ouverture-nom em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: 0; font-size: 1.05em; color: var(--feuille); }
.ouverture-sous { display: block; margin-top: 10px; font-family: var(--texte); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--chene-fonce); }
html.ouverture-prete .ouverture-logo { animation: apparait .2s ease-out forwards; }
html.ouverture-prete .ouverture-logo .l-point { animation: eclot .7s var(--rebond) .05s forwards; }
html.ouverture-prete .ouverture-logo .l-lueur { animation: lueur-eclot 1.5s ease-out .05s forwards; }
html.ouverture-prete .ouverture-logo .l-anneau { animation: trace 1.05s var(--courbe) .2s forwards; }
html.ouverture-prete .ouverture-logo .l-dent { animation: trace 1.2s var(--courbe) .4s forwards; }
html.ouverture-prete .ouverture-nom { animation: nom .7s var(--courbe) .75s forwards; }
html.ouverture-prete .ouverture-int { animation: disparait .45s ease-in 1.8s forwards; }
@keyframes apparait { to { opacity: 1; } }
@keyframes eclot { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes lueur-eclot { 0% { transform: scale(0); opacity: 0; } 40% { transform: scale(2.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes nom { to { opacity: 1; transform: none; } }
@keyframes disparait { to { opacity: 0; transform: scale(1.04); } }
html.avec-ouverture:not(.ouverture-finie) .halo::before { animation-play-state: paused; }

/* ---------- Écrans moyens ---------- */
@media (max-width: 1120px) {
  .soins-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soins-grille--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repere:nth-child(3) { border-left: 0; }
  .repere:nth-child(n + 3) { border-top: 1px solid var(--ligne); }
  .pied-int { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-int, .implant-int, .lumiere-int, .praticien-int, .cabinet-int, .infos-int, .page-tete-int, .bloc { grid-template-columns: minmax(0, 1fr); }
  .bloc--inverse > :first-child { order: 0; }
  .hero-visuel, .implant-visuel, .praticien-visuel, .bloc-visuel, .soin-carte--grande .soin-photo { container-type: normal; min-height: 0; }
  .hero-visuel .halo, .implant-visuel .halo, .praticien-visuel .halo, .bloc-visuel .halo, .soin-carte--grande .soin-photo .halo { position: relative; left: auto; top: auto; transform: none; margin-inline: auto; width: min(78vw, 420px); }
  .bloc-visuel .illu-cadre { position: static; }
  .hero-visuel { padding-block: 26px 10px; }
  .carte-flottante { font-size: 13.5px; padding: 9px 14px 9px 9px; }
  .carte-flottante--1 { left: 0; bottom: 0; }
  .carte-flottante--2 { right: 0; top: 14px; }
  .soin-carte--grande { grid-template-columns: minmax(0, 1fr); }
  .soin-carte--grande .soin-texte { padding: 26px 26px 0; }
  .soin-carte--grande .soin-photo { padding: 18px 0 30px; }
  .soin-carte--grande .soin-photo .halo { width: min(60vw, 260px); }
  .cercles { max-width: 520px; }
  .prix-grille, .cartes-3 { grid-template-columns: minmax(0, 1fr); }
  .en-bref { grid-template-columns: 1fr; }
  .page-visuel { width: min(72vw, 380px); }
  .colonnes-infos { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  :root { --entete-h: 68px; }
  body { font-size: 17px; }
  .logo-halo { width: 38px; height: 38px; }
  .section { padding-block: 56px; }
  .section--appel { padding-block: 34px; }
  .hero { padding-top: 22px; }
  .boutons .btn { flex: 1 1 100%; }
  .soins-grille { grid-template-columns: minmax(0, 1fr); }
  .soin-carte--grande .t3 { font-size: 23px; }
  .btn-texte { white-space: normal; text-align: center; }
  .btn { white-space: normal; }
  .soin-carte--grande { grid-column: auto; }
  .reperes { grid-template-columns: 1fr; border-radius: 22px; }
  .repere + .repere { border-left: 0; border-top: 1px solid var(--ligne); }
  .repere { padding: 16px 18px; }
  .faits { grid-template-columns: 1fr 1fr; }
  .cartes-2 { grid-template-columns: 1fr; }
  .appel { border-radius: 24px; }
  .appel-boutons .btn { flex: 1 1 100%; }
  .pied-int { grid-template-columns: 1fr; gap: 28px; }
  .question summary { font-size: 16.5px; padding: 16px 16px 16px 18px; }
  .question p { padding: 0 18px 18px; }
  .tableau-prix th, .tableau-prix td { padding: 12px 14px; font-size: 15px; }
  .barre-mobile { position: fixed; z-index: 95; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .96); border: 1px solid var(--ligne); box-shadow: 0 18px 40px -20px rgba(45, 38, 32, .55); }
  .barre-mobile .btn { min-height: 48px; }
  .barre-mobile .btn--contour { width: 48px; padding: 0; }
  .barre-mobile .btn--contour .btn-texte { display: none; }
  .pied { padding-bottom: 80px; }
}

/* ---------- Réduire les animations ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .carte-flottante { animation: none; }
}

/* ---------- Ajouts de l'accueil (06/10/2026) ---------- */
.hero-texte { min-width: 0; }
.statut--ligne { margin: 6px 0 20px; font-size: 16px; }
.statut--ligne b { font-weight: 700; }
.statut-carte .statut { gap: 10px; }
.statut-carte .statut > span { display: block; }
.halo--texte { display: grid; place-items: center; background: var(--blanc); border-radius: 50%; box-shadow: 0 30px 60px -40px rgba(45, 38, 32, .5); }
.cercle-texte { text-align: center; padding: 12%; }
.cercle-texte b { display: block; font-family: var(--titre); font-weight: 400; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; color: var(--feuille); }
.cercle-texte span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.35; color: var(--ecorce-2); }
.bloc-lien { margin-top: 22px; }
.conseils-grille .conseil-carte .t3 { font-size: 20px; }

/* petites cartes de soins : toute la carte est un lien, une flèche discrète en haut à droite */
.soin-fleche { position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ligne); color: var(--feuille-fonce); transition: transform .4s var(--courbe), background .3s, color .3s, border-color .3s; }
.soin-fleche svg { width: 15px; height: 15px; }
.soin-carte:hover .soin-fleche { background: var(--feuille); border-color: var(--feuille); color: #fff; transform: rotate(-45deg); }

.soin-tete { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.soin-tete .t3 { margin-top: 0; }
.soin-carte--grande .soin-tete { padding-right: 0; }

/* l'illustration de l'implant : une carte blanche sur un halo de lumière, à la hauteur du texte */
.illu-halo { position: absolute; inset: 0; margin: auto; height: fit-content; max-height: 100%; display: grid; gap: 12px; isolation: isolate; }
.illu-halo::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(191, 213, 169, .95), rgba(244, 201, 174, .55) 52%, rgba(242, 236, 225, 0) 74%); }
.illu-carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 28px; padding: clamp(16px, 2.4vw, 30px); box-shadow: var(--ombre); }
.illu-halo figcaption { text-align: center; font-size: 14px; color: var(--ecorce-2); }
.illu-carte .illu { overflow: visible; }
@media (max-width: 900px) { .illu-halo { position: relative; } }

.soins-grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.soins-grille--trois .soin-carte { padding-top: 24px; }
@media (max-width: 1120px) { .soins-grille--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .soins-grille--trois { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pages intérieures : compléments ---------- */
.bloc--deux-listes { align-items: start; }
.bloc-visuel--schema { container-type: normal; min-height: 0; align-self: center; }
.boutons--centre { justify-content: center; margin-top: 0; }
.statut--centre { justify-content: center; text-align: center; margin-top: 18px; }
.note-horaires { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ecorce-2); }
.pied-col { min-width: 0; }
.plan-site { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.plan-groupe .t3 { margin-bottom: 12px; }
.plan-groupe ul { display: grid; gap: 8px; }
.plan-groupe a { color: var(--feuille-fonce); text-decoration: none; font-weight: 600; }
.plan-groupe a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan-halo--tete { width: min(100%, 560px); }
.preuves { padding: 4px; }
.preuves .t4 { margin-bottom: 10px; color: var(--feuille-fonce); }
.preuves p:not([class]) { font-size: 16px; line-height: 1.6; color: var(--ecorce-2); }
@media (max-width: 900px) { .plan-site { grid-template-columns: minmax(0, 1fr); } }

/* Questions fréquentes : titre à gauche, questions à droite (la moitié droite ne reste plus vide) */
.faq-grille { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.faq-tete { position: sticky; top: calc(var(--entete-h) + 28px); }
.faq-tete .t2 { max-width: 14ch; }
.faq-aide { margin: 18px 0 22px; font-size: 16.5px; line-height: 1.6; color: var(--ecorce-2); max-width: 34ch; }
.faq-grille .faq { max-width: none; }
@media (max-width: 900px) {
  .faq-grille { grid-template-columns: minmax(0, 1fr); }
  .faq-tete { position: static; }
  .faq-aide { margin: 12px 0 16px; }
}

/* Honoraires : deux tableaux côte à côte, la page tient en un écran */
.tarifs-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 36px); align-items: start; }
.tarifs-grille .tableau-prix th, .tarifs-grille .tableau-prix td { padding: 11px 18px; }
.tarifs-grille .tableau-prix b { line-height: 1.35; }
.tarifs-grille .tableau-prix small { margin-top: 1px; line-height: 1.4; }
.tarifs-grille + div .encadre-doux { margin-top: 20px; }
@media (max-width: 900px) { .tarifs-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Écrans d'ordinateur peu hauts (1440 × 800, 1366 × 768, portable avec la barre du navigateur) ----------
   Règle de Léo : sur ordinateur, une partie = un écran. Sous 860 px de haut, tout se resserre un peu
   (marges, titres, cartes), sans rien enlever. Mesuré avec la boucle de contrôle à 1440 × 800 et 1366 × 700. */
@media (min-width: 1024px) and (max-height: 860px) {
  :root { --ecart-tete: clamp(18px, 3.2vh, 34px); }
  .section:not(.section--appel) { padding-block: clamp(36px, 6vh, 64px); }
  .surtitre { margin-bottom: 12px; }
  .t2 { font-size: clamp(28px, min(3vw, 5.2vh), 42px); }
  .chapo, .hero-chapo { font-size: clamp(16.5px, 2.3vh, 19px); }
  .section-tete .chapo { margin-top: 10px; }
  .page-tete-int { padding-top: clamp(18px, 3vh, 36px); padding-bottom: clamp(24px, 4vh, 48px); }
  .page-tete .t1 { font-size: clamp(34px, min(3.6vw, 6.2vh), 52px); }
  .page-tete .hero-chapo, .hero .hero-chapo { margin-top: 14px; }
  .hero .t1 { font-size: clamp(34px, min(3.5vw, 6.2vh), 54px); }
  .fil { margin-bottom: 12px; }
  .en-bref { margin-top: 20px; }
  .en-bref li { padding: 10px 14px; }
  .boutons { margin-top: 20px; }
  .bloc-texte p:not([class]) { font-size: 16.5px; line-height: 1.6; margin-top: 10px; }
  .etapes { margin-top: 16px; }
  .etape { padding-bottom: 10px; }
  .etape p { font-size: 15px; line-height: 1.45; }
  .conseils-grille .conseil-carte img { aspect-ratio: 16 / 9; }
  .tarifs-grille .tableau-prix th, .tarifs-grille .tableau-prix td { padding-block: 10px; }
  .texte-legal h2 { margin-top: 26px; }
  .carte { padding: 20px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .carte .soin-icone { margin-bottom: 0; }
  .carte .t3 { margin-bottom: 0; }
  .carte > p { grid-column: 1 / -1; margin-top: 10px; }
}

/* Mentions légales : deux colonnes sur ordinateur, la page se lit d'un coup d'œil */
@media (min-width: 1024px) {
  .texte-legal { max-width: none; columns: 2; column-gap: clamp(40px, 5vw, 80px); }
  .texte-legal h2 { break-after: avoid; }
  .texte-legal h2:first-child { margin-top: 0; }
  .texte-legal p { break-inside: avoid; }
}

/* Page Conseils : sur grand écran, les articles côte à côte par quatre (socle.css est chargé après : sélecteurs renforcés) */
@media (min-width: 1100px) {
  .conseils-grille.conseils-grille--index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .conseils-grille.conseils-grille--index .conseil-carte--grande { grid-column: auto; display: flex; flex-direction: column; padding-right: 0; }
  .conseils-grille.conseils-grille--index .conseil-carte img { grid-row: auto; aspect-ratio: 16 / 10; height: auto; }
  .conseils-grille.conseils-grille--index .conseil-carte--grande > *:not(img) { grid-column: auto; margin-left: 22px; margin-right: 22px; }
  .conseils-grille.conseils-grille--index .conseil-carte--grande .conseil-cat { margin-top: 18px; }
  .conseils-grille.conseils-grille--index .conseil-carte--grande .t3 { font-size: 20px; }
  .conseils-grille.conseils-grille--index .conseil-carte--grande p { -webkit-line-clamp: 3; font-size: 15px; flex: 1; }
  .conseils-grille.conseils-grille--index .conseil-carte--grande .lien-fleche { margin: 14px 22px 22px; }
}
@media (min-width: 1100px) and (max-height: 860px) {
  .conseils-grille.conseils-grille--index .conseil-carte img { aspect-ratio: 16 / 9; }
}

/* Plan du site : quatre colonnes sur grand écran (soins, cabinet, alentours + informations, conseils) */
@media (min-width: 1100px) {
  .plan-site { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
  .plan-site > :nth-child(1), .plan-site > :nth-child(2) { grid-row: 1 / span 2; }
  .plan-site > :nth-child(3) { grid-column: 3; grid-row: 1; }
  .plan-site > :nth-child(4) { grid-column: 4; grid-row: 1 / span 2; }
  .plan-site > :nth-child(5) { grid-column: 3; grid-row: 2; }
}

/* Second cran, sous 780 px de haut (portable 13 pouces avec la barre de favoris) */
@media (min-width: 1024px) and (max-height: 780px) {
  :root { --ecart-tete: clamp(16px, 2.6vh, 24px); }
  .section:not(.section--appel) { padding-block: clamp(28px, 4.6vh, 40px); }
  .t2 { font-size: clamp(28px, min(3vw, 4.8vh), 40px); }
  .tarifs-grille .tableau-prix th, .tarifs-grille .tableau-prix td { padding-block: 9px; }
  .texte-legal h2 { font-size: 24px; margin: 22px 0 8px; }
  .texte-legal p { font-size: 16px; line-height: 1.58; }
}

/* Étiquettes des cartes d'articles : jamais sous 12 px (socle.css est chargé après, sélecteur renforcé) */
.conseil-carte .conseil-cat { font-size: 12.5px; }

/* Page urgence : la permanence du dimanche, sous les boutons */
.note--centre { text-align: center; max-width: 64ch; margin: 16px auto 0; }
.tarifs-grille--encadres { align-items: stretch; }
.tarifs-grille--encadres > div { display: flex; }
.tarifs-grille--encadres .encadre-doux { margin-top: 0; flex: 1; }


/* =====================================================================
   Modernisation (07/10/2026) : titres en Figtree demi-gras, serrés ; le mot mis en lumière en Source Serif 4 italique
   ===================================================================== */
.t1, .t2, .logo-texte b, .soin-carte--grande .t3, .fait b, .prix-carte b, .texte-legal h2, .ouverture-nom, .menu-mobile .lien, .etape-num { font-weight: 600; }
.t1, .t2 { letter-spacing: -.035em; }
.t1 { line-height: 1.02; }
.t2 { line-height: 1.06; }
.logo-texte b { letter-spacing: -.02em; }
.soin-carte--grande .t3, .fait b, .prix-carte b { letter-spacing: -.03em; }
.t1 em, .t2 em, .t3 em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: -.01em; padding-right: .04em; }
.t3 { font-weight: 650; letter-spacing: -.015em; }
.btn { font-weight: 650; letter-spacing: -.005em; }

/* =====================================================================
   Mouvement (07/10/2026, demande de Léo : moderniser, plus d'animations) : apparitions plus vivantes, titres mot à mot,
   photos qui glissent dans leur cercle, reflet sur les cartes, boutons aimantés, bandeau qui défile, grains de lumière,
   transitions entre les pages. Tout s'arrête si « réduire les animations » est demandé ; le premier écran ne part jamais
   d'une opacité nulle.
   ===================================================================== */
html.reveal-actif [data-reveal]:not([data-vu]) { filter: blur(3px); }
[data-reveal] { transition: opacity .9s var(--courbe), transform .9s var(--courbe), filter .9s var(--courbe); }

/* titres : chaque mot glisse et se précise, puis le mot en lumière s'allume */
html.reveal-actif .mot { display: inline-block; opacity: 0; transform: translateY(.42em); filter: blur(5px); transition: opacity .75s var(--courbe), transform 1s var(--courbe), filter .75s var(--courbe); transition-delay: calc(var(--i, 0) * 45ms + 120ms); }
html.reveal-actif [data-vu] .mot { opacity: 1; transform: none; filter: none; }
.lie { white-space: nowrap; }
html.reveal-actif .t2 em::before { opacity: 0; transform: scaleX(.3); transition: opacity .9s var(--courbe) .5s, transform 1.2s var(--courbe) .5s; }
html.reveal-actif [data-vu] .t2 em::before { opacity: 1; transform: none; }

/* photos : le cercle garde sa forme, la photo glisse dedans au défilement et se pose à l'apparition */
.halo-cadre { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(45, 38, 32, .6); }
.halo-cadre img { border-radius: 0; box-shadow: none; translate: 0 var(--py, 0px); scale: 1.12; transition: scale 1.6s var(--courbe); }
html.reveal-actif [data-reveal]:not([data-vu]) .halo-cadre img { scale: 1.3; }
html.mouvement .halo:hover .halo-cadre img { scale: 1.17; }

/* cartes : un reflet suit la souris, la carte s'incline à peine */
html.mouvement .spot { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--courbe), box-shadow .4s, border-color .4s, opacity .9s var(--courbe), filter .9s var(--courbe); }
html.mouvement .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(240, 190, 150, .4), transparent 55%); opacity: 0; transition: opacity .35s; }
html.mouvement .spot:hover::after { opacity: 1; }
html.mouvement .soin-carte.spot:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px); }
html.mouvement .conseil-carte.spot:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }

/* boutons principaux aimantés */
html.mouvement .aimant { transform: translate(var(--bx, 0px), var(--by, 0px)); transition: transform .4s var(--courbe), background .3s, color .3s, box-shadow .4s; }
html.mouvement .aimant:hover { transform: translate(var(--bx, 0px), var(--by, 0px)); }
html.mouvement .aimant .btn-rond { transform: translate(calc(var(--bx, 0px) * .5), calc(var(--by, 0px) * .5)); }
html.mouvement .aimant:hover .btn-rond { transform: translate(calc(var(--bx, 0px) * .5), calc(var(--by, 0px) * .5)) rotate(-8deg); }

/* ouverture de l'accueil : une lueur douce suit la souris */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(560px circle at var(--hx, 70%) var(--hy, 35%), rgba(244, 201, 174, .32), rgba(247, 228, 211, .2) 42%, transparent 70%); opacity: 0; transition: opacity .8s; }
.hero--lueur::after { opacity: 1; }


/* bandeau qui défile sous l'ouverture */
.bandeau { position: relative; overflow: hidden; padding-block: 13px; background: linear-gradient(90deg, #F7EEE4, #F5F0E7 55%, #F7EEE4); color: var(--feuille-fonce); border-block: 1px solid var(--ligne); pointer-events: none; }
.bandeau-piste { display: flex; width: max-content; animation: defile 52s linear infinite; }
.bandeau ul { display: flex; flex: none; }
.bandeau li { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.bandeau li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pousse); }
.bandeau li:nth-child(3n+2) { font-family: var(--accent); font-style: italic; font-weight: 500; color: var(--chene-fonce); }
@keyframes defile { to { transform: translateX(-50%); } }

/* la partie « lumière » : des grains de lumière dérivent lentement */
.section--lumiere::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(2px 2px at 12% 20%, rgba(240, 162, 126, .9), transparent 60%), radial-gradient(1.5px 1.5px at 38% 72%, rgba(246, 210, 188, .8), transparent 60%), radial-gradient(2.5px 2.5px at 66% 34%, rgba(240, 162, 126, .7), transparent 60%), radial-gradient(1.5px 1.5px at 84% 80%, rgba(246, 210, 188, .8), transparent 60%), radial-gradient(2px 2px at 92% 12%, rgba(240, 162, 126, .8), transparent 60%);
  background-size: 420px 420px; animation: grains 40s linear infinite; }
@keyframes grains { to { background-position: 0 -420px; } }

/* étapes : le trait qui les relie se dessine au défilement (navigateurs récents) */
@supports (animation-timeline: view()) {
  html.mouvement .etape::before { transform-origin: top; animation: trait-etape linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
}
@keyframes trait-etape { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* passage d'une page à l'autre en fondu (Chrome, Edge, Safari récents) */
@view-transition { navigation: auto; }
.entete { view-transition-name: entete; }
::view-transition-old(root) { animation: vt-sortie .28s var(--courbe) both; }
::view-transition-new(root) { animation: vt-entree .55s var(--courbe) both; }
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  .bandeau-piste, .section--lumiere::after { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media print {
  [data-reveal], .mot { opacity: 1 !important; transform: none !important; filter: none !important; }
  .bandeau, .entete, .barre-mobile { display: none; }
}

/* un peu d'air entre un titre et le texte qui le suit (Figtree est plus compacte que l'ancienne police) */
.t2 + p, .t2 + .chapo, .t2 + .liste-coches { margin-top: 14px; }


/* =====================================================================
   07/10/2026, deuxième passage (retours de Léo)
   ===================================================================== */
/* Apparitions plus franches : les éléments arrivent par le bas, comme si la page se chargeait au fur et à mesure */
html.reveal-actif [data-reveal]:not([data-vu]) { opacity: 0; transform: translateY(46px); filter: blur(4px); }
html.reveal-actif [data-reveal="zoom"]:not([data-vu]) { opacity: 0; transform: translateY(40px) scale(.94); filter: blur(4px); }
[data-reveal] { transition: opacity 1s var(--courbe), transform 1.15s var(--courbe), filter 1s var(--courbe); }
/* dans un bloc de texte, chaque élément arrive à son tour */
html.reveal-actif [data-cascade][data-reveal]:not([data-vu]) { opacity: 1; transform: none; filter: none; }
html.reveal-actif [data-cascade] > * { transition: opacity 1s var(--courbe), transform 1.15s var(--courbe), filter 1s var(--courbe); transition-delay: var(--d, 0s); }
html.reveal-actif [data-cascade]:not([data-vu]) > * { opacity: 0; transform: translateY(42px); filter: blur(4px); }
/* le premier écran n'attend jamais une apparition */
html.reveal-actif .page-visuel[data-reveal]:not([data-vu]) { opacity: 1; transform: none; filter: none; }

.mosaique img { width: 100%; height: 100%; object-fit: cover; translate: 0 var(--py, 0px); scale: 1.1; transition: scale 1.6s var(--courbe); }
html.reveal-actif [data-reveal]:not([data-vu]) .mosaique img { scale: 1.26; }

/* La page du cabinet : trois vraies photos, la grande salle en grand */
.bloc-visuel:has(> .mosaique) { container-type: normal; min-height: 0; align-self: center; }
.mosaique { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mosaique figure { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px -34px rgba(45, 38, 32, .55); }
.mosaique .mosaique-grande { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: 28px; }
@media (max-width: 900px) {
  .mosaique { gap: 10px; }
}


/* =====================================================================
   07/10/2026, troisième passage : un site plus vivant (point 3 accepté par Léo)
   ===================================================================== */
/* Les dessins d'un trait des soins (outils/dessins.py) : ils se tracent quand leur carte arrive, le point pêche éclot */
.soin-icone--dessin { position: relative; width: 58px; height: 58px; background: none; border-radius: 0; isolation: isolate; }
.soin-icone--dessin::before { content: ""; position: absolute; z-index: -1; left: 1px; bottom: 1px; width: 40px; height: 40px; border-radius: 50%; background: var(--tilleul); transition: transform .6s var(--rebond); }
.soin-carte--lumiere .soin-icone--dessin { background: none; }
.soin-carte--lumiere .soin-icone--dessin::before { background: radial-gradient(circle, #FCE6D9 0 45%, #F8D3BE 100%); }
.soin-icone--dessin .dessin { width: 58px; height: 58px; overflow: visible; }
.soin-carte:hover .soin-icone--dessin { transform: none; box-shadow: none; }
.soin-carte:hover .soin-icone--dessin::before { transform: translate(4px, -3px) scale(1.12); }
.dessin path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; }
.dessin .t { stroke: var(--feuille-fonce); }
.dessin .a { stroke: #E9876F; }
.dessin .p { fill: var(--lumiere); filter: drop-shadow(0 0 3px rgba(240, 162, 126, .85)); transform-box: fill-box; transform-origin: center; }
html.reveal-actif [data-reveal]:not([data-vu]) .dessin [pathLength] { stroke-dasharray: 1 2; stroke-dashoffset: 1.001; }
html.reveal-actif [data-reveal]:not([data-vu]) .dessin .p { transform: scale(0); }
html.reveal-actif [data-reveal][data-vu]:not([data-net]) .dessin [pathLength] { stroke-dasharray: 1 2; animation: dessine 1.5s var(--courbe) both; animation-delay: calc(var(--rd, 0s) + .45s); }
html.reveal-actif [data-reveal][data-vu]:not([data-net]) .dessin .a { animation-duration: .9s; animation-delay: calc(var(--rd, 0s) + 1.15s); }
html.reveal-actif [data-reveal][data-vu]:not([data-net]) .dessin .p { animation: eclot .7s var(--rebond) both; animation-delay: calc(var(--rd, 0s) + 1.7s); }
@keyframes dessine { from { stroke-dashoffset: 1.001; } to { stroke-dashoffset: 0; } }

/* La lumière pêche respire autour du portrait ; le point de lumière du logo se pose sur son anneau */
.hero-visuel .halo { z-index: 1; }
.hero-visuel::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(108cqw, 108cqh); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle, rgba(240, 162, 126, .42) 0%, rgba(244, 201, 174, .22) 42%, rgba(244, 201, 174, 0) 68%); pointer-events: none; animation: respire-lumiere 7s ease-in-out infinite; }
@keyframes respire-lumiere { 0%, 100% { scale: .9; opacity: .55; } 50% { scale: 1.06; opacity: 1; } }
.halo-point { position: absolute; z-index: 3; left: 91.6%; top: 17.5%; width: 4.4%; min-width: 12px; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle, #FFF6EC 0 26%, var(--lumiere) 72%); box-shadow: 0 0 14px 4px rgba(240, 162, 126, .45); animation: point-respire 7s ease-in-out infinite; pointer-events: none; }
@keyframes point-respire { 0%, 100% { box-shadow: 0 0 12px 3px rgba(240, 162, 126, .38); } 50% { box-shadow: 0 0 28px 11px rgba(240, 162, 126, .66); } }

/* « Ouvert maintenant » : un point vert qui bat doucement */
.statut { position: relative; }
.statut.ouvert::before { animation: none; box-shadow: none; }
.statut.ouvert::after { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: rgba(217, 115, 63, .6); animation: battement 2.2s cubic-bezier(0, 0, .2, 1) infinite; pointer-events: none; }
@keyframes battement { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(3.1); opacity: 0; } }
.statut-carte [data-statut-detail] { display: block; }

/* Le cabinet : la salle en photo sur tout l'écran, et une carte posée dessus avec le texte et la bulle de l'accueil
   (07/10/2026 ; la première version, photo plus large que le texte et bulle qui débordait dans le vide, faisait bizarre) */
.section--cabinet { isolation: isolate; overflow: hidden; }
.cabinet-photo { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: var(--sable); }
.cabinet-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 62%; translate: 0 var(--py, 0px); scale: 1.06; }
.cabinet-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(37, 32, 27, .3), rgba(37, 32, 27, 0) 58%); pointer-events: none; }
.cabinet-int { display: flex; justify-content: flex-end; }
.cabinet-carte { position: relative; width: min(560px, 100%); padding: clamp(32px, 4.4vh, 46px) clamp(26px, 3vw, 42px) clamp(26px, 3.6vh, 36px); border-radius: 30px; background: rgba(251, 250, 246, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 44px 90px -50px rgba(37, 32, 27, .75); }
.cabinet-carte .t2 { max-width: 13em; }
.cabinet-bulle.halo { position: absolute; top: 0; right: clamp(26px, 3vw, 42px); width: 124px; translate: 0 -46%; z-index: 2; }
.cabinet-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin-top: 22px; }
.cabinet-points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.45; color: var(--ecorce-2); }
.cabinet-points li svg { width: 20px; height: 20px; color: var(--feuille); margin-top: 1px; }
.cabinet-points b { display: block; color: var(--ecorce); }
.cabinet-carte .bloc-lien { margin-top: 22px; }
@media (max-width: 900px) {
  .hero-visuel::before { width: min(100vw, 540px); top: calc(26px + min(78vw, 420px) / 2); }
  .section--cabinet { padding-top: 0; overflow: visible; }
  .cabinet-photo { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; }
  .cabinet-photo::after { display: none; }
  .cabinet-photo img { object-position: 24% 64%; }
  .cabinet-int { display: block; position: relative; z-index: 1; margin-top: -48px; }
  .cabinet-carte { width: 100%; padding: 44px 22px 28px; }
  .cabinet-bulle.halo { width: 96px; right: 22px; }
  .cabinet-points { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visuel::before, .halo-point, .statut.ouvert::after { animation: none; }
}
@media print {
  .dessin [pathLength] { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .dessin .p { transform: none !important; }
}

/* 07/10/2026 : plus de lueur qui suit la souris sur l'ouverture (l'effet ne reste que sur les cartes des soins), et un
   grain sur les fonds sombres et beiges pour donner de la matière. L'accueil sombre essayé le même jour est abandonné. */
.hero::after { display: none; }
.section--lumiere { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 .16 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.section--sable { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .15 .09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }


/* =====================================================================
   07/10/2026, cinquième passage : une phrase manifeste dont les mots s'allument (l'aplat vert du praticien,
   jugé trop agressif par Léo, est retiré). Le motif d'anneaux ondulés essayé le même jour est retiré (Léo : « trop, on ne comprend plus rien,
   ça n'a pas de sens »).
   ===================================================================== */
.hero-texte { position: relative; z-index: 2; }
.section--sable { overflow: clip; isolation: isolate; }
/* la phrase manifeste */
.section--manifeste { position: relative; overflow: clip; isolation: isolate; background: var(--sable); padding-block: clamp(84px, 14vh, 160px); text-align: center; }
.manifeste { font-family: var(--titre); font-weight: 600; font-size: clamp(46px, 7.6vw, 124px); line-height: .98; letter-spacing: -.05em; color: var(--ecorce); max-width: 11ch; margin-inline: auto; text-wrap: balance; }
.manifeste em { font-family: var(--accent); font-style: italic; font-weight: 500; letter-spacing: -.02em; color: #D9714A; }
.manifeste-sous { max-width: 46ch; margin: clamp(22px, 3.4vh, 34px) auto 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ecorce-2); }
html.mouvement .manifeste .m-mot { opacity: .14; transition: opacity .7s var(--courbe); }
html.mouvement .manifeste .m-mot.allume { opacity: 1; }
@media (max-width: 900px) {
}
@media (prefers-reduced-motion: reduce) {
}

/* =====================================================================
   07/10/2026, l'ouverture refaite d'après les exemples de Léo (Odontolia, Aster, Croix-Rousse, Monceau) : la vraie salle
   en photo de fond qui se fond dans le lin, des grains de lumière qui montent doucement (la lumière du cabinet et de la
   photobiomodulation ; ils prolongent le point de lumière de l'ouverture animée), un fragment de l'anneau du logo dans
   la marge gauche, deux mots surlignés. Les couleurs claires restent celles de la première version.
   ===================================================================== */
.hero { isolation: isolate; }
.hero::before, .hero-visuel::before { display: none; }
.hero-fond { position: absolute; z-index: -3; top: 0; right: 0; bottom: 0; width: 64%; margin: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
.hero-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 58%; animation: fond-respire 26s ease-in-out infinite alternate; }
.hero-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251, 250, 246, .5) 0%, rgba(251, 250, 246, 0) 22%, rgba(251, 250, 246, 0) 72%, rgba(251, 250, 246, .7) 100%); }
@keyframes fond-respire { from { scale: 1; } to { scale: 1.05; } }
/* les grains de lumière */
.lumieres { position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: 70%; overflow: hidden; pointer-events: none; }
.lumieres span { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 1.35); height: calc(var(--s) * 1.35); border-radius: 50%; background: radial-gradient(circle, #FFF4EA 0 22%, #F3A47F 58%, rgba(240, 162, 126, 0) 74%); box-shadow: 0 0 12px 3px rgba(240, 150, 110, .45); opacity: 0; animation: grain-lumiere var(--t) linear var(--d) infinite; }
.lumieres span.gros { filter: blur(2.5px); box-shadow: 0 0 22px 6px rgba(240, 150, 110, .35); background: radial-gradient(circle, rgba(255, 240, 228, .95) 0 30%, rgba(240, 150, 110, .6) 60%, rgba(240, 162, 126, 0) 74%); }
@keyframes grain-lumiere { 0% { transform: translate(0, 40px); opacity: 0; } 15% { opacity: var(--o); } 80% { opacity: var(--o); } 100% { transform: translate(var(--dx), -160px); opacity: 0; } }
/* le fragment de l'anneau du logo, dans la marge gauche, avec son point de lumière */
.hero-arc { position: absolute; z-index: -1; left: -430px; top: 50%; width: 600px; height: 600px; translate: 0 -50%; overflow: visible; pointer-events: none; }
.hero-arc .arc-trait { fill: none; stroke: url(#arc-hero); stroke-width: 2.2; stroke-linecap: round; opacity: .75; stroke-dasharray: 1 2; stroke-dashoffset: 1.001; animation: trace 2.2s var(--courbe) .3s forwards; }
.hero-arc .arc-point { fill: var(--lumiere); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: eclot .8s var(--rebond) 1.9s forwards; }
.hero-arc .arc-lueur { fill: rgba(240, 162, 126, .28); filter: blur(6px); transform-box: fill-box; transform-origin: center; transform: scale(0); animation: eclot 1.2s var(--rebond) 2s forwards, lueur-arc 6s ease-in-out 3.2s infinite; }
@keyframes lueur-arc { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
html.avec-ouverture .hero-arc .arc-trait { animation-delay: 2.3s; }
html.avec-ouverture .hero-arc .arc-point { animation-delay: 3.9s; }
html.avec-ouverture .hero-arc .arc-lueur { animation-delay: 4s, 5.2s; }
/* deux mots surlignés, comme au marqueur */
.surligne { color: var(--ecorce); font-weight: 600; background: linear-gradient(transparent 58%, rgba(240, 162, 126, .34) 58%, rgba(240, 162, 126, .34) 94%, transparent 94%) no-repeat 0 0 / 0% 100%; animation: surligne 1s var(--courbe) .9s forwards; }
.surligne--2 { animation-delay: 1.25s; }
html.avec-ouverture .surligne { animation-delay: 2.9s; }
html.avec-ouverture .surligne--2 { animation-delay: 3.25s; }
@keyframes surligne { to { background-size: 100% 100%; } }
/* les cartes posées sur la photo : le praticien, la lumière, l'horaire */
.carte-praticien .carte-avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(240, 162, 126, .55); }
.carte-praticien .carte-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-visuel .carte-flottante--3 { top: 13%; left: 6%; right: auto; bottom: auto; animation-delay: -2s; }
.hero-visuel .carte-flottante--2 { top: 43%; right: 0; left: auto; bottom: auto; }
.hero-visuel .carte-flottante--1 { bottom: 13%; left: 16%; right: auto; top: auto; }
@media (max-width: 1300px) { .hero-arc { display: none; } }
@media (max-width: 900px) {
  .hero-fond { top: auto; height: 520px; width: 100%; -webkit-mask-image: linear-gradient(0deg, #000 50%, transparent 100%); mask-image: linear-gradient(0deg, #000 50%, transparent 100%); }
  .lumieres { width: 100%; top: auto; height: 520px; }
  .hero-visuel { display: grid; gap: 10px; justify-items: start; padding: 120px 0 18px; }
  .hero-visuel .carte-flottante { position: static; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fond img, .lumieres span, .hero-arc .arc-lueur { animation: none; }
  .lumieres span { opacity: var(--o); }
  .hero-arc .arc-trait { stroke-dashoffset: 0; animation: none; }
  .hero-arc .arc-point, .hero-arc .arc-lueur { transform: none; }
  .surligne { background-size: 100% 100%; animation: none; }
}

/* 07/10/2026, retours de Léo : la phrase manifeste moins grosse ; la tête du praticien à gauche de l'ouverture, dans
   l'anneau du logo (le texte se décale un peu) ; deux bulles sur la photo, plus la carte du praticien */
.section--manifeste { padding-block: clamp(60px, 10vh, 118px); }
.manifeste { font-size: clamp(36px, 4.8vw, 74px); max-width: 14ch; }
.hero .hero-int { max-width: 1560px; grid-template-columns: clamp(190px, 16vw, 290px) minmax(0, 1.1fr) minmax(0, .8fr); gap: clamp(28px, 3.2vw, 64px); }
.hero-portrait { position: relative; align-self: center; z-index: 2; }
.hero-portrait .halo { width: 100%; }
.hero-portrait .halo::after { display: none; }
.hero-portrait .hero-arc { display: block; position: absolute; z-index: -1; left: -17%; top: -17%; width: 134%; height: 134%; translate: none; }
.hero-visuel .carte-flottante--2 { top: 24%; right: 2%; left: auto; bottom: auto; }
.hero-visuel .carte-flottante--1 { bottom: 22%; left: 8%; right: auto; top: auto; }
@media (max-width: 1180px) {
  .hero .hero-int { grid-template-columns: clamp(170px, 18vw, 220px) minmax(0, 1fr); }
  .hero .hero-visuel { display: none; }
}
@media (max-width: 900px) {
  .hero .hero-int { grid-template-columns: minmax(0, 1fr); }
  .hero-portrait { width: min(46vw, 210px); margin: 8px auto 4px; }
  .hero .hero-visuel { display: grid; }
}
/* avec le portrait à gauche, le texte se décale : la photo de fond recule pour que le texte reste sur le lin */
.hero-fond { width: 54%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%); mask-image: linear-gradient(90deg, transparent 0%, #000 46%); }
.lumieres { width: 60%; }
@media (max-width: 900px) { .hero-fond { width: 100%; -webkit-mask-image: linear-gradient(0deg, #000 50%, transparent 100%); mask-image: linear-gradient(0deg, #000 50%, transparent 100%); } .lumieres { width: 100%; } }
@media (min-width: 901px) { .hero-fond { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 16%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, transparent 16%, #000 62%); } }

/* 07/10/2026, essai demandé par Léo : beige, marron clair et orange, plus de vert (les jetons « feuille », « tilleul »,
   « pousse » portent maintenant des orangés). Le logo de la page suit (le fichier du logo remis au cabinet ne change pas
   tant que Léo n'a pas tranché). */
.logo-halo .l-dent { stroke: var(--feuille-fonce); }
.logo--pied .logo-halo .l-dent { stroke: #F4ECE3; }
.logo-halo stop:nth-child(1) { stop-color: #8A4622; }
.logo-halo stop:nth-child(2) { stop-color: #D9733F; }
.logo-halo stop:nth-child(3) { stop-color: #E6CBB0; }
.logo-halo stop:nth-child(4) { stop-color: #F0A27E; }
.logo--pied .logo-halo stop:nth-child(1) { stop-color: #E2A06E; }
.ouverture-logo .l-dent { stroke: #8A4622; }
.ouverture-logo stop:nth-child(1) { stop-color: #8A4622; }
.ouverture-logo stop:nth-child(2) { stop-color: #D9733F; }

/* 07/10/2026, retours de Léo : les listes à coches ne se cassent plus mot par mot (le texte qui suit un mot en gras
   tombait dans la colonne de la coche) ; le plan se fond dans la page ; la carte de la lumière ressort, l'horaire est
   plus petit et juste en dessous */
.liste-coches li { display: block; position: relative; padding-left: 38px; }
.liste-coches li > svg { position: absolute; left: 0; top: .18em; }
.plan-halo .plan { border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(0deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(0deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.plan-halo { width: min(100%, 680px); }
.carte-lumiere { padding: 14px 24px 14px 14px; gap: 16px; color: var(--ecorce-2); text-decoration: none; border: 1px solid rgba(240, 162, 126, .5); box-shadow: 0 22px 46px -22px rgba(184, 95, 46, .55); transition: transform .4s var(--courbe), box-shadow .4s; }
.carte-lumiere:hover { transform: translateY(-3px); box-shadow: 0 28px 52px -22px rgba(184, 95, 46, .65); }
.carte-lumiere b { font-size: 17px; margin-bottom: 2px; }
.carte-lumiere-icone { width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #FFF3EA 0 42%, #F8CDB2 100%); box-shadow: 0 0 0 6px rgba(240, 162, 126, .18), 0 0 26px 6px rgba(240, 162, 126, .45); animation: lumiere-pulse 4s ease-in-out infinite; }
.carte-lumiere-icone .dessin { width: 42px; height: 42px; }
@keyframes lumiere-pulse { 50% { box-shadow: 0 0 0 11px rgba(240, 162, 126, .1), 0 0 38px 10px rgba(240, 162, 126, .58); } }
.hero-visuel .carte-flottante--2 { top: 27%; right: 3%; left: auto; bottom: auto; }
.hero-visuel .carte-flottante--1 { top: calc(27% + 112px); right: 20%; left: auto; bottom: auto; font-size: 13.5px; padding: 8px 16px 8px 8px; }
.hero-visuel .carte-flottante--1 > i { width: 32px; height: 32px; }
@media (max-width: 900px) { .hero-visuel .carte-flottante--1 { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .carte-lumiere-icone { animation: none; } }
.sch-texte { font-size: 18px; }
.sch-petit { font-size: 15px; }

/* 07/10/2026, choix de Léo : l'ouverture sans le portrait (la salle en fond, les grains de lumière, l'anneau du logo dans
   la marge, deux bulles) ; Marc reste présenté dans « Votre praticien » */
.hero .hero-int { max-width: var(--int); grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
@media (min-width: 901px) { .hero-fond { width: 62%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, #000 58%); mask-image: linear-gradient(90deg, transparent 0%, transparent 12%, #000 58%); } }
@media (max-width: 1180px) { .hero .hero-int { grid-template-columns: minmax(0, 1fr); } .hero .hero-visuel { display: none; } }
@media (max-width: 900px) { .hero .hero-visuel { display: grid; } }

/* Page Conseils : texte propre à la page sous les articles (15/10/2026, audit TK-15) */
.conseils-note { max-width: 820px; margin: clamp(32px, 4vw, 52px) auto 0; }