/* Pat's Natural Beauty : feuille de style du site.
   Couleurs prélevées sur le logo, titres en Bonum (famille Bookman), texte en Alegreya Sans. */

@font-face { font-family: 'Bonum'; src: url('../fonts/bonum-bolditalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bonum'; src: url('../fonts/bonum-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bonum'; src: url('../fonts/bonum-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bonum'; src: url('../fonts/bonum-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../fonts/alegreya-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../fonts/alegreya-sans-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../fonts/alegreya-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../fonts/alegreya-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../fonts/alegreya-sans-700i.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('../fonts/alegreya-sans-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --encre: #17120F;
  --encre-2: #3B332D;
  --gris: #6B625B;
  --gris-clair: #9A918A;
  --filet: #E6E0DA;
  --filet-fort: #D3CBC4;
  --papier: #FFFFFF;
  --surface: #F5F4F2;
  --vermillon: #E94E1B;
  --vermillon-fonce: #C63A0C;
  --vermillon-pale: #FDECE5;
  --vert: #048C37;
  --vert-fonce: #037A30;
  --vert-pale: #E7F3EB;
  --ocre: #D97D16;
  --ocre-pale: #FBF0E1;
  --bronze: #9A5A2B;

  --titre: 'Bonum', 'Bookman Old Style', 'URW Bookman', Georgia, serif;
  --texte: 'Alegreya Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --courbe: cubic-bezier(.2, .7, .1, 1);
  --courbe-ressort: cubic-bezier(.34, 1.56, .64, 1);
  --rapide: 180ms;
  --moyen: 320ms;

  --r-champ: 10px;
  --r-carte: 18px;
  --feuille: 10% 70% 10% 70%;
  --entete: 64px;
  --barre: 66px;
  --bas-sur: env(safe-area-inset-bottom, 0px);
  --marge: clamp(18px, 4.6vw, 56px);
  --largeur: 1240px;
}
@media (min-width: 1024px) { :root { --entete: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
body {
  margin: 0;
  font-family: var(--texte);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; }
::selection { background: var(--ocre); color: #fff; }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 1em; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aller-contenu { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 8px; }
.aller-contenu:focus { top: 12px; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
[hidden] { display: none !important; }

.conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }

/* ---------- Typographie ---------- */
.titre-section { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: clamp(2.15rem, 1.4rem + 2.7vw, 3.75rem); line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; margin-bottom: .42em; }
.section-tete .titre-section { margin-bottom: 0; }
.titre-moyen { font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.3rem); }
.section-tete { margin-bottom: clamp(28px, 4vw, 52px); }
.section-tete-large { display: grid; gap: 18px 64px; }
@media (min-width: 900px) { .section-tete-large { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.section-tete-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.section-intro { color: var(--encre-2); font-size: 1.08em; max-width: 34em; margin: 0; }
.repere { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--vert-fonce); margin-bottom: .8em; }
.repere .ic { color: var(--vert); width: 1em; height: 1em; }

/* ---------- Boutons ---------- */
.bouton {
  --fond: var(--vermillon-fonce);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: .62em 1.35em; border: 0; border-radius: 999px;
  background: var(--fond); color: #fff; font-weight: 800; font-size: 1.02rem; letter-spacing: .005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--rapide) var(--courbe), background var(--rapide), box-shadow var(--rapide);
  -webkit-tap-highlight-color: transparent;
}
.bouton > .ic:first-child:not(.ic-fin) { width: 2.05em; height: 2.05em; padding: .42em; margin-left: -.78em; border-radius: 50%; background: #fff; color: var(--fond); }
.bouton > .ic-fin { transition: transform var(--rapide) var(--courbe); }
.bouton:hover { background: color-mix(in srgb, var(--fond) 88%, #000); }
.bouton:hover > .ic-fin { transform: translateX(4px); }
.bouton:active { transform: scale(.97); }
.bouton-grand { min-height: 58px; font-size: 1.12rem; padding-inline: 1.6em; }
.bouton-petit { min-height: 42px; font-size: .95rem; padding: .45em 1.1em; }
.bouton-petit > .ic:first-child:not(.ic-fin) { margin-left: -.6em; }
.bouton-vert { --fond: var(--vert-fonce); }
.bouton-encre { --fond: var(--encre); }
.bouton-ligne { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.bouton-ligne:hover { background: var(--encre); color: #fff; }
.bouton-ligne > .ic:first-child:not(.ic-fin) { background: var(--encre); color: #fff; }
.bouton-ligne:hover > .ic:first-child:not(.ic-fin) { background: #fff; color: var(--encre); }
.bouton-ligne-clair { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.bouton-ligne-clair:hover { background: var(--encre); color: #fff; }
.bouton-ligne-clair > .ic:first-child:not(.ic-fin) { background: var(--encre); color: #fff; }
.bouton.est-occupe { pointer-events: none; }
.bouton.est-occupe > .ic:first-child:not(.ic-fin) { animation: scintille .9s var(--courbe) infinite; }
.bouton-texte { background: none; border: 0; padding: .4em 0; color: var(--vermillon-fonce); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.bouton-icone { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--encre); cursor: pointer; transition: background var(--rapide); -webkit-tap-highlight-color: transparent; text-decoration: none; }
.bouton-icone:hover { background: var(--surface); }
.bouton-icone .ic { width: 23px; height: 23px; }
.bouton-icone-plein { background: var(--surface); }
.bouton-icone-plein:hover { background: var(--encre); color: #fff; }
.lien-fleche { display: inline-flex; align-items: center; gap: .45em; font-weight: 800; color: var(--encre); text-decoration: none; background: none; border: 0; padding: .3em 0; cursor: pointer; border-bottom: 1.5px solid currentColor; }
.lien-fleche .ic { width: 1.05em; height: 1.05em; transition: transform var(--rapide) var(--courbe); }
.lien-fleche:hover .ic:last-child { transform: translateX(4px); }
.lien-souligne { display: inline-flex; align-items: center; gap: .5em; background: none; border: 0; padding: 0; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; color: inherit; }
.bouton-ajout { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--vermillon-fonce); color: #fff; cursor: pointer; transition: transform var(--rapide) var(--courbe-ressort), background var(--rapide); flex: none; }
.bouton-ajout .ic { width: 20px; height: 20px; }
.bouton-ajout:hover { transform: rotate(90deg); }
.bouton-ajout.est-ajoute { background: var(--vert-fonce); }

/* ---------- Pastilles, étiquettes, points ---------- */
.etiquette { position: absolute; left: 12px; top: 12px; z-index: 2; background: var(--encre); color: #fff; font-size: .8rem; font-weight: 700; padding: .25em .7em; border-radius: 999px; }
.etiquette-vert { background: var(--vert-fonce); }
.point { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--gris-clair); vertical-align: .08em; flex: none; }
.point-ouvert { background: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.compteur { position: absolute; top: 4px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--vermillon-fonce); color: #fff; font-size: .72rem; font-weight: 800; line-height: 19px; text-align: center; }
.pastille { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--vermillon); box-shadow: 0 0 0 2px #fff; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid transparent; transition: border-color var(--moyen); view-transition-name: entete; }
.entete.est-defile { border-color: var(--filet); }
.entete-in { display: flex; align-items: center; gap: 18px; height: var(--entete); padding-inline: var(--marge); max-width: 1480px; margin-inline: auto; }
.marque { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--encre); flex: none; }
.marque-embleme { width: 44px; height: 46px; }
.marque-mot { width: 74px; height: auto; margin-top: 4px; }
.marque-image { height: 52px; width: auto; }
.nav-principale { display: none; }
.entete-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.entete-rdv { display: none; margin-left: 10px; }
@media (min-width: 1024px) {
  .marque-embleme { width: 54px; height: 56px; }
  .marque-mot { width: 88px; }
  .nav-principale { display: flex; gap: clamp(14px, 1.6vw, 28px); margin-left: clamp(18px, 3vw, 48px); }
  .nav-principale a { position: relative; text-decoration: none; font-weight: 700; color: var(--encre-2); padding: .4em 0; font-size: 1.02rem; }
  .nav-principale a::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--vermillon); transform: translateX(-50%) scale(0); transition: transform var(--moyen) var(--courbe-ressort); }
  .nav-principale a:hover, .nav-principale a[aria-current] { color: var(--encre); }
  .nav-principale a:hover::after, .nav-principale a[aria-current]::after { transform: translateX(-50%) scale(1); }
  .nav-principale a { white-space: nowrap; }
}
@media (min-width: 1200px) { .entete-rdv { display: inline-flex; } }

/* ---------- Barre d'application (téléphone et tablette) ---------- */
.barre-app {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--barre) + var(--bas-sur)); padding-bottom: var(--bas-sur);
  background: #fff; border-top: 1px solid var(--filet); box-shadow: 0 -6px 18px rgba(23, 18, 15, .05);
  view-transition-name: barre-app;
}
.barre-app a, .barre-app button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; padding: 12px 0 0; border: 0; background: none; color: var(--gris); font: inherit; font-size: .74rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.barre-app span { position: relative; z-index: 1; }
.barre-app .ic { width: 24px; height: 24px; position: relative; z-index: 1; transition: transform var(--moyen) var(--courbe-ressort), color var(--moyen); }
/* La pastille de l'onglet actif a la forme d'une feuille du logo et reste derrière l'icône seule. */
.barre-app a::before { content: ''; position: absolute; top: 7px; left: 50%; width: 58px; height: 34px; margin-left: -29px; border-radius: 20px 6px 20px 6px; background: var(--vert-pale); transform: scale(.4, .7) rotate(-8deg); opacity: 0; transition: transform .45s var(--courbe-ressort), opacity var(--rapide); }
.barre-app a[aria-current] { color: var(--encre); }
.barre-app a[aria-current] .ic { color: var(--vert-fonce); }
.barre-app a[aria-current]::before { transform: none; opacity: 1; }
.barre-app a:active .ic, .barre-app button:active .ic { transform: scale(.88); }
body { padding-bottom: calc(var(--barre) + var(--bas-sur)); }
body:has(> .pied) { padding-bottom: 0; }
body:has(> .pied) .pied-bas { padding-bottom: calc(30px + var(--barre) + var(--bas-sur)); }
@media (min-width: 1024px) { .barre-app { display: none; } body { padding-bottom: 0; } body:has(> .pied) .pied-bas { padding-bottom: 30px; } }

/* ---------- Feuilles (menu, panier, notifications...) ---------- */
.voile { position: fixed; inset: 0; z-index: 80; background: rgba(23, 18, 15, .42); opacity: 0; transition: opacity var(--moyen); }
.voile.est-ouvert { opacity: 1; }
.feuille {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; max-height: min(90svh, 820px);
  background: #fff; border-radius: 24px 24px 0 0;
  transform: translateY(102%); transition: transform 380ms var(--courbe);
  padding-bottom: var(--bas-sur);
}
.feuille.est-ouverte { transform: translateY(0); }
.feuille-poignee { width: 44px; height: 5px; border-radius: 3px; background: var(--filet-fort); margin: 10px auto 0; flex: none; }
.feuille-tete { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 22px; flex: none; }
.feuille-tete h2 { font-family: var(--titre); font-style: italic; font-size: 1.6rem; flex: 1; }
.feuille-corps { padding: 6px 22px 24px; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.feuille-pied { padding: 16px 22px calc(16px + var(--bas-sur)); border-top: 1px solid var(--filet); display: grid; gap: 8px; flex: none; }
.feuille-pied .bouton { justify-self: center; }
.feuille-sous-titre { font-size: 1rem; font-weight: 800; margin: 26px 0 10px; color: var(--encre-2); }
@media (min-width: 1024px) {
  .feuille { left: auto; top: 0; bottom: 0; width: 460px; max-height: none; border-radius: 0; transform: translateX(102%); padding-bottom: 0; }
  .feuille.est-ouverte { transform: translateX(0); }
  .feuille-poignee { display: none; }
  .feuille-tete { padding-top: 22px; }
  .feuille-pied .bouton { justify-self: end; }
  .feuille-recherche { width: 620px; }
}
.menu-grand { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; margin-bottom: 18px; }
.menu-grand a { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid var(--filet); text-decoration: none; }
.menu-grand a span { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 1.32rem; line-height: 1.1; }
.menu-grand a small { color: var(--gris); font-size: .88rem; }
.menu-grand a[aria-current] span { color: var(--vermillon-fonce); }
.menu-outils { display: grid; gap: 2px; margin-bottom: 20px; }
.menu-outils a, .menu-outils button { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border: 0; background: none; text-decoration: none; font-weight: 700; text-align: left; cursor: pointer; border-radius: 10px; }
.menu-outils a:hover, .menu-outils button:hover { background: var(--surface); }
.menu-outils .ic { color: var(--vert-fonce); }
.menu-contact { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.reseaux { display: flex; gap: 6px; flex-wrap: wrap; }
.reseaux a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface); color: var(--encre); transition: background var(--rapide), color var(--rapide); }
.reseaux a:hover { background: var(--encre); color: #fff; }
.reseaux .ic { width: 20px; height: 20px; }

/* Panier */
.vide { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 10px; color: var(--gris); }
.vide-ic { width: 56px; height: 56px; color: var(--filet-fort); }
.ligne-panier { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.ligne-panier img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--feuille); background: var(--ocre-pale); }
.ligne-panier h3 { font-size: 1rem; font-weight: 800; line-height: 1.25; }
.ligne-panier p { margin: 2px 0 0; color: var(--gris); font-size: .92rem; }
.quantite { display: inline-flex; align-items: center; border: 1.5px solid var(--filet-fort); border-radius: 999px; height: 38px; }
.quantite button { width: 36px; height: 34px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.quantite button .ic { width: 16px; height: 16px; }
.quantite span { min-width: 24px; text-align: center; font-weight: 800; }
.panier-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 1.1rem; }
.panier-total strong { font-size: 1.3rem; }
.panier-note { margin: 0; color: var(--gris); font-size: .9rem; }

/* Notifications */
.abonnement { background: var(--vert-pale); border-radius: var(--r-carte); padding: 16px 18px; }
.abonnement p { margin-bottom: 12px; }
.abonnement-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 14px; }
.liste-notifs { list-style: none; margin: 0; padding: 0; }
.liste-notifs li { padding: 12px 0; border-bottom: 1px solid var(--filet); }
.liste-notifs a { text-decoration: none; display: block; }
.liste-notifs strong { display: block; }
.liste-notifs span { color: var(--gris); font-size: .92rem; }
.liste-notifs time { display: block; color: var(--gris-clair); font-size: .82rem; margin-top: 2px; }
.liste-notifs .est-nouvelle strong::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vermillon); margin-right: 8px; vertical-align: .12em; }
.message-zone { margin: 12px 0 0; font-weight: 700; }
.message-zone.est-erreur { color: var(--vermillon-fonce); }

/* Installer */
.installer-tete { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.installer-tete img { border-radius: 16px; border: 1px solid var(--filet); }
.installer-tete p { margin: 0; }
.etapes-ios { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.etapes-ios li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: var(--surface); border-radius: 14px; padding: 12px 14px; }
.etapes-ios p { margin: 0; }
.etape-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--encre); color: #fff; font-weight: 800; }
.ios-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #fff; color: #0A84FF; vertical-align: middle; margin-inline: 2px; }
.ios-ic .ic { width: 18px; height: 18px; }
.installer-ok { display: flex; gap: 8px; align-items: center; font-weight: 800; color: var(--vert-fonce); }

/* Recherche */
.champ-recherche { flex: 1; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 999px; background: var(--surface); }
.champ-recherche input { flex: 1; border: 0; background: none; font: inherit; font-size: 1.05rem; outline: none; min-width: 0; }
.champ-recherche .ic { color: var(--gris); }
.resultats { list-style: none; margin: 0; padding: 0; }
.resultats a { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 12px 6px; text-decoration: none; border-bottom: 1px solid var(--filet); border-radius: 8px; }
.resultats a:hover { background: var(--surface); }
.resultats small { grid-row: span 2; align-self: center; font-weight: 800; font-size: .74rem; color: var(--vert-fonce); background: var(--vert-pale); padding: .2em .6em; border-radius: 999px; }
.resultats strong { font-weight: 800; }
.resultats span { color: var(--gris); font-size: .92rem; }
.suggestions p { font-weight: 800; color: var(--gris); margin: 18px 0 10px; }

/* Puces (cases à cocher, choix) */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; display: inline-flex; cursor: pointer; text-decoration: none; }
.puce input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.puce span { display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: .35em 1em; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--filet-fort); font-weight: 700; font-size: .95rem; transition: background var(--rapide), color var(--rapide), box-shadow var(--rapide); }
.puce input:checked + span, .puce[aria-current] span, .puce.est-choisie span { background: var(--encre); color: #fff; box-shadow: none; }
.puce input:focus-visible + span { outline: 3px solid var(--ocre); outline-offset: 2px; }
.puce-lien:hover span { box-shadow: inset 0 0 0 1.5px var(--encre); }

/* Annonces (messages flottants) */
.annonces { position: fixed; z-index: 200; left: 50%; top: calc(var(--entete) + 10px); transform: translateX(-50%); width: min(560px, calc(100% - 28px)); display: grid; gap: 8px; pointer-events: none; }
.annonce { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--encre); color: #fff; font-weight: 700; box-shadow: 0 14px 40px -12px rgba(23, 18, 15, .45); pointer-events: auto; animation: annonce-entree 380ms var(--courbe) both; }
.annonce.est-erreur { background: var(--vermillon-fonce); }
.annonce.est-succes .ic { color: #6ED39A; }
.annonce .ic { margin-top: 2px; }
.annonce p { margin: 0; flex: 1; }
.annonce button { border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.annonce button .ic { width: 16px; height: 16px; margin: 0; }
.annonce.est-sortie { animation: annonce-sortie 260ms var(--courbe) both; }
@keyframes annonce-entree { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes annonce-sortie { to { opacity: 0; transform: translateY(-10px) scale(.98); } }

@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes eclot { 0% { transform: scale(0) rotate(-45deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes scintille { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.7) rotate(45deg); } }

/* ---------- Accueil : la chevelure ---------- */
.chevelure {
  --c-afro: var(--ocre);
  --c-tresses: #0B5E31;
  --c-locks: #B63D15;
  --c-nattes: #F4E7D4;
  --c-chignon: var(--vert-pale);
  --ch-fond: var(--c-afro);
  --ch-texte: var(--encre);
  --ch-doux: #2B1B0C;
  --ch-mot: rgba(23, 18, 15, .1);
  --ch-filet: rgba(23, 18, 15, .26);
  --ch-accent: #FFF6EA;
  --ch-bouton: var(--encre);
  --ch-bouton-texte: #FFF6EA;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ch-texte);
  background: var(--ch-fond);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M8 15V4M12 15V3M16 15V3M20 15V3M24 15V4' stroke='%23fff' stroke-width='4.4'/%3E%3Cpath d='M8 15V4M12 15V3M16 15V3M20 15V3M24 15V4' stroke='%2317120F' stroke-width='2.2'/%3E%3C/g%3E%3Crect x='5.5' y='14' width='21' height='6' rx='3' fill='%2317120F' stroke='%23fff' stroke-width='1.4'/%3E%3Crect x='12.5' y='19' width='7' height='11' rx='3.5' fill='%23D97D16' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 16 3, auto;
  touch-action: pan-y;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .chevelure { --c-tresses: color-mix(in srgb, var(--vert) 66%, #00150a); --c-locks: color-mix(in srgb, var(--vermillon) 78%, #000); }
}
.chevelure[data-style="tresses"] { --ch-fond: var(--c-tresses); --ch-texte: #FFF6EA; --ch-doux: #E9F2EA; --ch-mot: rgba(255, 255, 255, .07); --ch-filet: rgba(255, 246, 234, .3); --ch-accent: var(--ocre); --ch-bouton: #FFF6EA; --ch-bouton-texte: #0B4A27; }
.chevelure[data-style="locks"] { --ch-fond: var(--c-locks); --ch-texte: #FFF6EA; --ch-doux: #FBE6DB; --ch-mot: rgba(255, 255, 255, .08); --ch-filet: rgba(255, 246, 234, .3); --ch-accent: #F7D477; --ch-bouton: #FFF6EA; --ch-bouton-texte: #8E2C0C; }
.chevelure[data-style="nattes"] { --ch-fond: var(--c-nattes); --ch-texte: var(--encre); --ch-doux: var(--encre-2); --ch-mot: rgba(154, 90, 43, .13); --ch-filet: rgba(23, 18, 15, .18); --ch-accent: var(--vert); --ch-bouton: var(--vert-fonce); --ch-bouton-texte: #fff; }
.chevelure[data-style="chignon"] { --ch-fond: var(--c-chignon); --ch-texte: var(--encre); --ch-doux: var(--encre-2); --ch-mot: rgba(4, 140, 55, .1); --ch-filet: rgba(23, 18, 15, .18); --ch-accent: var(--vermillon); --ch-bouton: var(--vermillon-fonce); --ch-bouton-texte: #fff; }
.chevelure a, .chevelure button { cursor: pointer; }
.chevelure-fonds, .chevelure-fonds .fond { position: absolute; inset: 0; }
.chevelure-fonds { z-index: 0; }
.fond-afro { background: var(--c-afro); }
.fond-tresses { background: var(--c-tresses); }
.fond-locks { background: var(--c-locks); }
.fond-nattes { background: var(--c-nattes); }
.fond-chignon { background: var(--c-chignon); }
.chevelure-toile { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.chevelure-mot { position: absolute; z-index: 1; left: 0; right: 0; top: 2%; height: 30%; margin: 0; pointer-events: none; font-family: var(--titre); font-style: italic; font-weight: 700; line-height: 1; color: var(--ch-mot); transition: color .9s var(--courbe); user-select: none; }
.chevelure-mot .geant { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; letter-spacing: -.035em; font-size: 22vw; }
.chevelure-mot .geant > span { display: inline-block; }
.chevelure-mot .geant.entre > span { animation: mot-entre 1s var(--courbe) both; animation-delay: calc(var(--i) * 60ms + 260ms); }
.chevelure-mot .geant.part > span { animation: mot-part .55s cubic-bezier(.6, 0, .8, .3) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes mot-entre { from { opacity: 0; transform: translateY(55%) rotate(9deg) scale(.9); } }
@keyframes mot-part { to { opacity: 0; transform: translateY(-45%) rotate(-12deg) scale(.92); } }

.chevelure-in { position: relative; z-index: 3; pointer-events: none; display: flex; flex-direction: column; padding: 14px var(--marge) 30px; }
.chevelure-in > * { pointer-events: auto; }
.chevelure-in > .ch-scene { pointer-events: none; }
.ch-reperes { display: none; flex-wrap: wrap; align-items: center; gap: .5em; font-weight: 700; color: var(--ch-texte); margin: 0; font-size: .92rem; transition: color .9s var(--courbe); }
.ch-reperes .reperes-etoile { width: .8em; height: .8em; }
.ch-reperes .reperes-etoile { color: var(--ch-accent); transition: color .9s var(--courbe); }
.ch-scene { order: 1; height: clamp(300px, 50svh, 520px); margin-inline: calc(var(--marge) * -1); }
.ch-texte, .ch-essai { display: contents; }
.ch-titre { order: 2; position: relative; margin-top: clamp(-110px, -12svh, -56px) !important; }
.ch-choix { order: 3; }
.ch-fiches { order: 4; }
.ch-actions { order: 5; margin-top: 18px; }
.ch-intro { order: 6; margin-top: 22px !important; }
.ch-titre { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: clamp(2.35rem, 1.1rem + 6.2vw, 3.6rem); line-height: .98; letter-spacing: -.02em; margin: 0 0 .36em; transition: color .9s var(--courbe); }
.ch-titre .ligne { display: block; overflow: hidden; padding: .02em .08em .1em 0; margin-bottom: -.08em; }
.ch-titre .ligne > span { display: inline-block; }
.ch-intro { color: var(--ch-doux); font-size: 1rem; max-width: 34em; margin: 0; transition: color .9s var(--courbe); }
.ch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ch-bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--ch-bouton); color: var(--ch-bouton-texte); font-weight: 700; font-size: 1.04rem; text-decoration: none; transition: background-color .9s var(--courbe), color .9s var(--courbe), transform var(--rapide) var(--courbe); }
.ch-bouton .ic { width: 20px; height: 20px; }
.ch-bouton:active { transform: scale(.97); }
.ch-lien { display: inline-flex; align-items: center; gap: 8px; color: var(--ch-texte); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--ch-filet); padding-bottom: 3px; transition: color .9s var(--courbe), border-color var(--moyen); }
.ch-lien:hover { border-color: var(--ch-texte); }
.ch-lien .ic { width: 18px; height: 18px; transition: transform var(--moyen) var(--courbe); }
.ch-lien:hover .ic { transform: translateX(4px); }

.ch-essai-titre { order: 3; margin: 16px 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ch-doux); transition: color .9s var(--courbe); }
.ch-choix { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--marge) * -1); padding: 4px var(--marge) 6px; scroll-padding-inline: var(--marge); }
.ch-choix::-webkit-scrollbar { display: none; }
.ch-onglet { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ch-filet); background: transparent; color: var(--ch-texte); font: inherit; font-weight: 700; font-size: .98rem; -webkit-tap-highlight-color: transparent; transition: background-color .45s var(--courbe), color .45s var(--courbe), border-color .45s var(--courbe), transform var(--rapide) var(--courbe); }
.ch-onglet:active { transform: scale(.95); }
.ch-num { font-size: .74rem; letter-spacing: .06em; opacity: .7; font-variant-numeric: tabular-nums; }
.ch-etoile { display: none; }
.ch-onglet[aria-selected="true"] { background: var(--ch-texte); border-color: var(--ch-texte); color: var(--ch-fond); }
.ch-onglet:focus-visible { outline: 3px solid var(--ch-accent); outline-offset: 2px; }
.ch-fiches { margin-top: 10px; min-height: 52px; }
.ch-fiche { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; animation: monte .5s var(--courbe) both; }
.ch-fiche[hidden] { display: none; }
.ch-fiche-nom { margin: 0; font-weight: 700; }
.ch-fiche-infos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--ch-doux); font-size: .95rem; transition: color .9s var(--courbe); }
.ch-fiche-infos span { display: inline-flex; align-items: center; gap: 5px; }
.ch-fiche-infos .ic { width: 15px; height: 15px; }
.ch-fiche-lien { display: inline-flex; align-items: center; gap: 6px; color: var(--ch-texte); font-weight: 700; font-size: .95rem; text-decoration: underline; text-decoration-color: var(--ch-filet); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ch-fiche-lien .ic { width: 16px; height: 16px; transition: transform var(--moyen) var(--courbe); }
.ch-fiche-lien:hover .ic { transform: translateX(4px); }
.ch-astuce { position: absolute; left: var(--marge); top: 16px; max-width: min(16em, calc(100% - var(--marge) * 2)); display: flex; justify-content: flex-start; text-align: left; align-items: center; gap: 8px; margin: 0; padding: 8px 14px 8px 11px; border-radius: 16px; background: var(--ch-fond); box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .5); font-size: .86rem; font-weight: 700; line-height: 1.3; color: var(--ch-texte); opacity: 0; pointer-events: none; transition: opacity .8s var(--courbe), color .9s var(--courbe), background-color .9s var(--courbe); }
.chevelure.est-prete .ch-astuce { opacity: .94; transition-delay: 2.6s, 0s, 0s; }
.chevelure.est-prete .ch-astuce.est-vue { opacity: 0; transition-delay: 0s; }
.ch-astuce .ic { width: 18px; height: 18px; flex: none; color: var(--ch-texte); }
.ch-astuce .si-souris { display: none; }
@media (hover: hover) and (pointer: fine) { .ch-astuce .si-souris { display: inline; } .ch-astuce .si-doigt { display: none; } }

/* Entrée du titre */
.js .ch-titre .ligne > span { transform: translateY(105%); }
.js body.est-pret .ch-titre .ligne > span { transform: none; transition: transform .9s var(--courbe) .2s; }
.js body.est-pret .ch-titre .ligne:nth-child(2) > span { transition-delay: .28s; }
.js body.est-pret .ch-titre .ligne:nth-child(3) > span { transition-delay: .36s; }
.js body.est-pret .ch-titre .ligne:nth-child(4) > span { transition-delay: .44s; }

@media (min-width: 700px) and (max-width: 1023px) {
  .ch-scene { height: clamp(420px, 60svh, 640px); }
  .ch-titre { font-size: clamp(3rem, 1rem + 5.4vw, 4.2rem); }
}
@media (min-width: 1024px) {
  .chevelure { height: calc(100svh - var(--entete)); min-height: 640px; max-height: 1060px; }
  .chevelure-mot { left: var(--marge); right: var(--marge); top: 3.5%; height: 33%; }
  .chevelure-in { display: grid; height: 100%; max-width: 1560px; margin-inline: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, .74fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0 clamp(22px, 3vw, 44px); padding: 22px var(--marge) 34px; }
  .ch-reperes { display: flex; grid-column: 1; grid-row: 1; align-self: start; }
  .ch-scene { order: 0; grid-column: 2; grid-row: 1 / 4; height: auto; margin: 0 0 -34px clamp(-70px, -5vw, -40px); }
  .ch-texte, .ch-essai { display: block; }
  .ch-texte { grid-column: 1; grid-row: 3; margin: 0; align-self: end; }
  .ch-titre { margin-top: 0 !important; }
  .ch-intro { margin: 0 0 22px !important; }
  .ch-actions { margin-top: 0; }
  .ch-titre { font-size: min(4.9vw, 4.6rem); }
  .ch-titre .ligne { white-space: nowrap; }
  .ch-intro { font-size: 1.06rem; }
  .ch-essai { order: 0; grid-column: 3; grid-row: 1 / 4; align-self: center; margin: 0; padding-bottom: 40px; }
  .ch-essai-titre { margin: 0 0 12px; font-size: .78rem; }
  .ch-choix { display: grid; gap: 0; overflow: visible; margin: 0; padding: 0; border-top: 1px solid var(--ch-filet); transition: border-color .9s var(--courbe); }
  .ch-onglet { position: relative; min-height: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ch-filet); border-radius: 0; background: none; gap: 14px; text-align: left; opacity: .62; transition: opacity var(--moyen) var(--courbe), color .9s var(--courbe), border-color .9s var(--courbe); }
  .ch-onglet .ch-nom { font-family: var(--titre); font-style: italic; font-size: clamp(1.25rem, .3rem + 1.5vw, 1.55rem); line-height: 1.1; transition: transform .5s var(--courbe); transform-origin: left center; }
  .ch-onglet:hover { opacity: 1; }
  .ch-onglet:hover .ch-nom { transform: translateX(6px); }
  .ch-etoile { display: block; position: absolute; right: 2px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ch-accent); transform: scale(0) rotate(-90deg); transition: transform .6s var(--courbe-ressort), color .9s var(--courbe); }
  .ch-onglet[aria-selected="true"] { background: none; color: var(--ch-texte); opacity: 1; }
  .ch-onglet[aria-selected="true"] .ch-nom { transform: translateX(6px) scale(1.12); }
  .ch-onglet[aria-selected="true"] .ch-etoile { transform: none; }
  .ch-fiches { margin-top: 18px; min-height: 120px; }
  .ch-fiche { display: grid; gap: 6px; }
  .ch-fiche-nom { font-size: 1.08rem; }
  .ch-astuce { position: absolute; left: auto; top: auto; right: var(--marge); bottom: 30px; width: min(21em, 22%); max-width: none; justify-content: flex-start; text-align: left; padding: 0; border-radius: 0; background: none; box-shadow: none; line-height: inherit; }
  .chevelure.est-prete .ch-astuce { opacity: .78; }
  .ch-astuce .ic { color: var(--ch-accent); }
}
@media (min-width: 1024px) and (max-height: 720px) {
  .ch-intro { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-calme="1"] .chevelure-mot .geant > span, html[data-calme="1"] .ch-fiche { animation: none; }
}

/* ---------- Trois maisons ---------- */
.maisons { padding-block: clamp(72px, 9vw, 140px) clamp(40px, 6vw, 90px); }
.maisons-branche { position: relative; display: grid; gap: 56px; }
.branche { display: none; }
.maison { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; z-index: 1; }
.maison-feuille { position: relative; display: block; width: min(72vw, 330px); aspect-ratio: 1; --r: 6% 72% 6% 72%; }
.maison-feuille::before { content: ''; position: absolute; inset: -14px; border: 1.5px solid var(--ocre); border-radius: var(--r); transform: rotate(-7deg); transition: transform 1s var(--courbe); pointer-events: none; }
.maison-photo { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; background: var(--ocre-pale); }
.maison-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1s var(--courbe); }
.maison-nervure { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.maison-nervure path { stroke: rgba(255, 255, 255, .7); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--courbe) .5s; }
.maison:hover .maison-photo img { transform: scale(1.12); }
.maison:hover .maison-feuille::before { transform: rotate(4deg) scale(1.02); }
.maison-cosmetique .maison-feuille { --r: 72% 6% 72% 6%; }
.maison-cosmetique .maison-feuille::before { border-color: var(--vert); transform: rotate(7deg); }
.maison-cosmetique .maison-nervure { transform: scaleX(-1); }
.maison-academy .maison-feuille::before { border-color: var(--vermillon); }
.maison-sous { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--vert-fonce); margin-bottom: .5em; }
.maison-sous .ic { width: .9em; height: .9em; color: var(--vert); }
.maison h3 { font-family: var(--titre); font-style: italic; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); line-height: 1.05; margin-bottom: .4em; }
.maison h3 a { text-decoration: none; }
.maison-texte p:not(.maison-sous) { color: var(--encre-2); max-width: 26em; }
.maison-cosmetique .maison-feuille { justify-self: end; }
.js .maison-photo { clip-path: polygon(0 0, 0 0, 0 0); transition: clip-path 1.3s cubic-bezier(.65, 0, .25, 1); }
.js .maison-cosmetique .maison-photo { clip-path: polygon(100% 0, 100% 0, 100% 0); }
.js .maison.est-vue .maison-photo { clip-path: polygon(0 0, 200% 0, 0 200%); }
.js .maison-cosmetique.est-vue .maison-photo { clip-path: polygon(100% 0, 100% 200%, -100% 0); }
.js .maison-feuille::before { opacity: 0; transform: rotate(-24deg) scale(.86); transition: transform 1.2s var(--courbe-ressort) .3s, opacity .6s .3s; }
.js .maison.est-vue .maison-feuille::before { opacity: 1; transform: rotate(-7deg); }
.js .maison-cosmetique.est-vue .maison-feuille::before { transform: rotate(7deg); }
.maison.est-vue .maison-nervure path, html:not(.js) .maison-nervure path { stroke-dashoffset: 0; }
@media (min-width: 900px) {
  .maisons-branche { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; padding-bottom: 40px; }
  .branche { display: block; position: absolute; inset: 4% 4% 6% 6%; width: 90%; height: 90%; overflow: visible; pointer-events: none; }
  .branche-trait { fill: none; stroke: var(--vert); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--trace, 1); vector-effect: non-scaling-stroke; }
  .maison { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 36px; }
  .maison-institut { grid-column: 1 / span 7; }
  .maison-institut .maison-feuille { width: clamp(280px, 30vw, 420px); }
  .maison-cosmetique { grid-column: 5 / span 8; margin-top: -40px; grid-template-columns: minmax(0, 1fr) auto; }
  .maison-cosmetique .maison-feuille { order: 2; width: clamp(240px, 25vw, 350px); }
  .maison-cosmetique .maison-texte { text-align: right; justify-items: end; display: grid; }
  .maison-cosmetique .maison-texte p { margin-left: auto; }
  .maison-academy { grid-column: 2 / span 8; margin-top: -20px; }
  .maison-academy .maison-feuille { width: clamp(220px, 22vw, 310px); }
}

/* ---------- Retour au naturel ---------- */
.naturel { position: relative; background: var(--encre); color: #F4EEE8; }
.naturel-colle { padding-block: clamp(70px, 9vw, 120px); }
.naturel-in { width: 100%; max-width: calc(var(--largeur) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); display: grid; gap: 34px; }
.naturel .titre-section { color: #fff; margin-bottom: .5em; }
.naturel-texte p { color: #D9D0C8; max-width: 31em; }
.naturel-chiffre { display: flex; align-items: baseline; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); }
.naturel-chiffre strong { font-family: var(--titre); font-style: italic; font-size: clamp(2.6rem, 2rem + 2.6vw, 4.2rem); line-height: 1; color: var(--ocre); white-space: nowrap; }
.naturel-chiffre span { color: #E9E1DA; font-weight: 700; line-height: 1.3; }
.naturel-scene { display: grid; gap: 16px; }
.meches { width: 100%; max-width: 520px; height: auto; margin-inline: auto; overflow: visible; }
.meches path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.naturel-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: etape; }
.naturel-etapes li { position: relative; padding-left: 30px; color: rgba(244, 238, 232, .38); font-weight: 700; transition: color var(--moyen); }
.naturel-etapes li::before { content: ''; position: absolute; left: 4px; top: .5em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; transition: background var(--moyen), transform var(--moyen) var(--courbe-ressort); }
.naturel-etapes li.est-active { color: #fff; }
.naturel-etapes li.est-active::before { background: var(--ocre); border-color: var(--ocre); transform: scale(1.3); }
@media (min-width: 1024px) {
  html[data-scenes="1"]:not([data-economie]) .naturel { height: 250vh; }
  html[data-scenes="1"]:not([data-economie]) .naturel-colle { position: sticky; top: var(--entete); min-height: calc(100svh - var(--entete)); display: grid; align-items: center; padding-block: 40px; }
  .naturel-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 70px; }
  .naturel-scene { grid-template-columns: minmax(0, 1fr) 220px; align-items: center; }
  .meches { max-height: calc(100svh - var(--entete) - 120px); }
}

/* ---------- Textures ---------- */
.textures { padding-block: clamp(70px, 9vw, 130px); background: var(--vert-pale); }
.textures-in { display: grid; gap: 40px; }
.textures-texte p { color: var(--encre-2); max-width: 28em; }
.textures-texte .bouton { margin-top: 10px; }
.textures-choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.texture { display: grid; justify-items: center; gap: 6px; padding: 14px 4px 16px; border: 0; border-radius: 22px; background: transparent; cursor: pointer; transition: background var(--moyen); -webkit-tap-highlight-color: transparent; }
.texture:hover { background: rgba(255, 255, 255, .65); }
.texture[aria-checked="true"] { background: #fff; }
.ressort { width: 100%; max-width: 74px; height: clamp(150px, 26vw, 230px); overflow: visible; }
.ressort path { fill: none; stroke: var(--encre); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--moyen); }
.texture[aria-checked="true"] .ressort path { stroke: var(--vermillon); }
.texture-code { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 1.6rem; line-height: 1; }
.texture-nom { font-size: .88rem; font-weight: 700; color: var(--encre-2); text-align: center; line-height: 1.2; }
@media (min-width: 900px) {
  .textures-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 70px; }
  .textures-choix { gap: 18px; }
}

/* ---------- Produits ---------- */
.rail-section { padding-block: clamp(70px, 9vw, 120px) 40px; }
.rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(var(--marge), calc((100% - var(--largeur)) / 2)) 24px; scroll-padding-inline: max(var(--marge), calc((100% - var(--largeur)) / 2)); scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 min(68vw, 290px); }
@media (min-width: 1300px) { .rail { padding-inline: calc((100vw - var(--largeur)) / 2); } }
.produit { position: relative; display: grid; gap: 12px; align-content: start; }
.produit-image { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-carte); overflow: hidden; background: var(--ocre-pale); }
.produit-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--courbe); }
.produit:hover .produit-image img { transform: scale(1.05); }
.produit-corps { display: grid; gap: 2px; }
.produit-nom { font-size: 1.12rem; font-weight: 800; line-height: 1.22; }
.produit-nom a { text-decoration: none; }
.produit-contenance { margin: 0; color: var(--gris); font-size: .92rem; }
.produit-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.produit-prix { margin: 0; font-weight: 800; font-size: 1.08rem; white-space: nowrap; }
.produit-prix s { color: var(--gris-clair); font-weight: 500; font-size: .9em; }

/* ---------- Duo : sessions et salons ---------- */
.duo { display: grid; gap: 60px; padding-block: clamp(60px, 8vw, 110px); }
@media (min-width: 1024px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }
.sessions { list-style: none; margin: 0; padding: 0; }
.session { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--filet); }
.session:last-child { border-bottom: 1px solid var(--filet); }
.session-date { margin: 0; display: grid; justify-items: center; line-height: 1; }
.session-jour { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 2.5rem; color: var(--vermillon-fonce); }
.session-mois { font-size: .82rem; font-weight: 700; color: var(--gris); margin-top: 4px; white-space: nowrap; }
.session-info h3 { font-size: 1.1rem; font-weight: 800; line-height: 1.25; }
.session-info h3 a { text-decoration: none; }
.session-info p { margin: 2px 0 8px; color: var(--gris); font-size: .93rem; }
.session-places { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 700; color: var(--encre-2); }
.session-jauge { width: 90px; height: 5px; border-radius: 3px; background: var(--filet); overflow: hidden; flex: none; }
.session-jauge span { display: block; height: 100%; width: var(--taux); background: var(--ocre); border-radius: 3px; }
.salons-liste { list-style: none; margin: 0; padding: 0; }
.salon-ligne { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--filet); }
.salon-ligne:last-child { border-bottom: 1px solid var(--filet); }
.salon-ligne.est-proche { background: linear-gradient(90deg, var(--vert-pale), transparent 80%); }
.salon-rond { width: 64px; height: 64px; border-radius: var(--feuille); overflow: hidden; background: var(--ocre-pale); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ocre); }
.salon-rond img { width: 100%; height: 100%; object-fit: cover; }
.salon-info h3 { font-size: 1.08rem; font-weight: 800; }
.salon-info p { margin: 0; font-size: .92rem; color: var(--gris); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.salon-distance { color: var(--vert-fonce); font-weight: 700; }
.salon-actions { display: flex; gap: 6px; }

/* ---------- Chiffres ---------- */
.chiffres { background: var(--vert-fonce); color: #fff; padding-block: clamp(64px, 8vw, 110px); }
.chiffres-titre { font-family: var(--titre); font-style: italic; font-size: 1.4rem; color: #CFE8D8; margin-bottom: 18px; }
.chiffres-phrase { font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); line-height: 1.7; font-weight: 500; max-width: 1100px; margin: 0; }
.chiffre strong { white-space: nowrap; font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 1.9em; line-height: 1; margin-right: .12em; color: #fff; }
.chiffre em { font-style: normal; color: #B8DEC6; }
.chiffre-sep .ic { display: inline-block; width: .7em; height: .7em; color: var(--ocre); margin: 0 .55em; vertical-align: .05em; }

/* ---------- Témoignages ---------- */
.temoignages { padding-block: clamp(60px, 8vw, 110px); }
.temoignages-rail { display: grid; gap: 18px; margin-top: 30px; }
@media (min-width: 900px) { .temoignages-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.temoignage { margin: 0; padding: 24px; border-radius: var(--r-carte); background: var(--ocre-pale); }
.temoignage blockquote { margin: 0 0 16px; font-size: 1.06rem; }
.temoignage figcaption { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; }
.temoignage-photo { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.temoignage figcaption span { color: var(--gris); font-size: .9rem; }

/* ---------- Articles ---------- */
.conseils-accueil { padding-block: clamp(60px, 8vw, 110px); }
.articles-mosaique { display: grid; gap: 28px; }
@media (min-width: 900px) { .articles-mosaique { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 26px 40px; } .articles-mosaique .carte-article-grande { grid-row: 1 / span 4; } }
.carte-article { display: grid; gap: 14px; align-content: start; }
.carte-article-image { display: block; border-radius: var(--r-carte); overflow: hidden; aspect-ratio: 16 / 10; background: var(--ocre-pale); }
.carte-article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--courbe); }
.carte-article:hover .carte-article-image img { transform: scale(1.05); }
.carte-article-grande .carte-article-image { aspect-ratio: 4 / 3.2; }
.carte-article-meta { margin: 0 0 4px; font-size: .9rem; font-weight: 700; color: var(--vert-fonce); }
.carte-article h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.carte-article-grande h3 { font-family: var(--titre); font-style: italic; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.08; margin-bottom: .4em; }
.carte-article h3 a { text-decoration: none; }
.carte-article p { color: var(--encre-2); margin: 0; }
.articles-mosaique .carte-article:not(.carte-article-grande) { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; }
.articles-mosaique .carte-article:not(.carte-article-grande) .carte-article-image { aspect-ratio: 1; border-radius: var(--feuille); }
.articles-mosaique .carte-article:not(.carte-article-grande) p:not(.carte-article-meta) { display: none; }
@media (min-width: 900px) { .articles-mosaique .carte-article:not(.carte-article-grande) { grid-template-columns: 150px minmax(0, 1fr); gap: 22px; } }

/* ---------- Application ---------- */
.application { background: var(--vermillon-pale); padding-block: clamp(64px, 8vw, 110px); overflow: hidden; }
.application-in { display: grid; gap: 50px; align-items: center; }
.application-texte p { color: var(--encre-2); max-width: 30em; }
.application-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
@media (min-width: 900px) { .application-in { grid-template-columns: minmax(0, 1fr) auto; gap: 80px; } }
.telephone { justify-self: center; width: 270px; height: 540px; border-radius: 44px; padding: 12px; background: var(--encre); box-shadow: 0 40px 80px -30px rgba(23, 18, 15, .5); transform: rotate(-4deg); }
.telephone-ecran { position: relative; height: 100%; border-radius: 33px; background: #fff; overflow: hidden; padding: 16px 14px; display: grid; align-content: start; gap: 10px; }
.tel-barre { display: flex; align-items: center; gap: 8px; font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.tel-embleme { width: 34px; height: 35px; }
.tel-ic { margin-left: auto; width: 20px; height: 20px; }
.tel-carte { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: var(--surface); font-size: .8rem; line-height: 1.25; }
.tel-carte .ic { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: #fff; color: var(--vermillon-fonce); }
.tel-carte strong { display: block; font-size: .86rem; }
.tel-carte span { color: var(--gris); }
.tel-carte-colis .ic { color: var(--vert-fonce); }
.tel-carte-session .ic { color: var(--ocre); }
.tel-onglets { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; border-top: 1px solid var(--filet); display: grid; grid-template-columns: repeat(5, 1fr); place-items: center; }
.tel-onglets span { width: 20px; height: 20px; border-radius: 6px; background: var(--filet); }
.tel-onglets span:first-child { background: var(--vermillon); border-radius: 50%; }
.js .tel-carte { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .6s var(--courbe), transform .6s var(--courbe); }
.js .application.est-vue .tel-carte { opacity: 1; transform: none; }
.js .application.est-vue .tel-carte-colis { transition-delay: .5s; }
.js .application.est-vue .tel-carte-session { transition-delay: 1s; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: #E9E2DB; padding-top: clamp(56px, 7vw, 90px); }
.pied a { color: #fff; }
.pied-haut { width: 100%; max-width: calc(var(--largeur) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); display: grid; gap: 40px; }
.pied-mot { width: 150px; color: #fff; margin-bottom: 10px; }
.pied-slogan { font-family: var(--titre); font-style: italic; font-size: 1.35rem; color: #fff; margin-bottom: .5em; }
.pied-texte { color: #BDB3AA; max-width: 22em; }
.pied-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
.pied-colonnes h2 { font-size: .98rem; font-weight: 800; color: var(--ocre); margin-bottom: 10px; }
.pied-colonnes a { display: block; padding: 4px 0; text-decoration: none; color: #E9E2DB; }
.pied-colonnes a:hover { color: #fff; text-decoration: underline; }
.pied-contact { display: grid; gap: 8px; align-content: start; }
.pied-tel { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; text-decoration: none; }
.pied-tel .ic { color: var(--ocre); }
.pied-contact p { color: #BDB3AA; margin: 4px 0 12px; }
.pied .reseaux a { background: rgba(255, 255, 255, .08); color: #fff; }
.pied .reseaux a:hover { background: #fff; color: var(--encre); }
.pied-bas { width: 100%; max-width: calc(var(--largeur) + 2 * var(--marge)); margin: 50px auto 0; padding: 22px var(--marge) 30px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .92rem; color: #A39990; }
.pied-bas a { color: #CFC6BE; }
@media (min-width: 1024px) { .pied-haut { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.2fr) minmax(0, 1fr); gap: 60px; } .pied-colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Mouvement réduit, économie de données ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-calme="1"] *, html[data-calme="1"] *::before, html[data-calme="1"] *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* ---------- Transitions entre pages ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 260ms var(--courbe) both page-sort; }
::view-transition-new(root) { animation: 420ms var(--courbe) both page-entre; }
@keyframes page-sort { to { opacity: 0; transform: scale(.985); } }
@keyframes page-entre { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* =====================================================================
   Pages intérieures
   ===================================================================== */
.titre-page { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem); line-height: .98; letter-spacing: -.015em; margin-bottom: .3em; text-wrap: balance; }
.titre-page-moyen { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); }
.sous-titre { font-size: 1.22rem; font-weight: 800; margin: 1.6em 0 .6em; }
.petit-texte { font-size: .92rem; color: var(--gris); }
.texte-vert { color: var(--vert-fonce); }
.texte-erreur { color: var(--vermillon-fonce); }
.champ-erreur { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--vermillon-fonce); font-weight: 700; font-size: .93rem; }
.champ-erreur::before { content: '!'; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--vermillon-fonce); color: #fff; font-size: .75rem; font-weight: 800; }
.scintille-ligne { color: var(--gris); font-weight: 700; }
.scintille-ligne::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; background: var(--vert); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: scintille 1s var(--courbe) infinite; vertical-align: -1px; }
.vide-texte, p.vide { color: var(--gris); padding: 30px 0; }
.fil { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 18px; font-size: .92rem; font-weight: 700; color: var(--gris); }
.fil a { text-decoration: none; color: var(--encre-2); }
.fil a:hover { text-decoration: underline; }
.fil .ic { width: 14px; height: 14px; color: var(--gris-clair); }
.piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Têtes de page des trois maisons */
.tete-pole { padding-block: clamp(28px, 5vw, 70px) clamp(40px, 6vw, 90px); }
.tete-pole-in { display: grid; gap: 34px; align-items: center; }
.tete-pole-intro { font-size: 1.1em; color: var(--encre-2); max-width: 34em; }
.tete-pole-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 24px; }
.tete-pole-visuel { position: relative; justify-self: center; width: min(86vw, 520px); }
@media (min-width: 1024px) {
  .tete-pole-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; }
  .tete-pole-visuel { width: min(100%, 540px); }
}
.feuille-ornee { position: relative; aspect-ratio: 1; --r: 6% 72% 6% 72%; }
.feuille-ornee::before, .feuille-ornee::after { content: ''; position: absolute; border-radius: var(--r); pointer-events: none; }
.feuille-ornee::before { inset: 3%; border: 1.5px solid var(--ocre); transform: rotate(-8deg); }
.feuille-ornee::after { width: 15%; aspect-ratio: 1; right: 2%; top: 4%; border-radius: 0 70% 0 70%; background: var(--vert); transform: rotate(12deg); }
.feuille-ornee-photo { position: absolute; inset: 9%; border-radius: var(--r); overflow: hidden; background: var(--ocre-pale); }
.feuille-ornee-photo img { width: 100%; height: 100%; object-fit: cover; }
.feuille-ornee-verte::before { border-color: var(--vert); }
.feuille-ornee-verte::after { background: var(--vermillon); }
.js .feuille-ornee::before { animation: feuille-pose 1.3s var(--courbe-ressort) .25s both; }
.js .feuille-ornee::after { animation: eclot .8s var(--courbe-ressort) .7s both; }
.js .feuille-ornee-photo { animation: feuille-ouvre 1.2s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes feuille-pose { from { opacity: 0; transform: rotate(-30deg) scale(.85); } }
@keyframes feuille-ouvre { from { clip-path: polygon(0 0, 0 0, 0 0); } to { clip-path: polygon(0 0, 200% 0, 0 200%); } }
.faits { list-style: none; margin: 0; padding: 0; }
.fait { position: absolute; background: #fff; border-radius: 999px; padding: .5em 1em; font-weight: 700; font-size: .92rem; box-shadow: 0 10px 30px -12px rgba(23, 18, 15, .35); white-space: nowrap; }
.fait strong { font-family: var(--titre); font-style: italic; font-size: 1.25em; color: var(--vermillon-fonce); }
.fait-1 { left: -4%; top: 14%; }
.fait-2 { right: -6%; top: 48%; }
.fait-3 { left: 4%; bottom: 4%; }
@media (max-width: 599px) { .fait { font-size: .8rem; } .fait-2 { right: -2%; } .fait-1 { left: 0; } }
.garanties { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.garanties li { display: flex; gap: 12px; align-items: center; color: var(--encre-2); }
.garanties .ic { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-fonce); }
.tete-simple { padding-block: clamp(28px, 5vw, 64px) 26px; }
.tete-simple .tete-pole-intro { margin-bottom: 18px; }

/* Puces qui défilent */
.filtres-defile { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; margin-inline: -2px; }
.filtres-defile::-webkit-scrollbar { display: none; }
.filtres-defile .puce { flex: none; }
.puce.est-choisie span { background: var(--encre); color: #fff; box-shadow: none; }
button.puce { border: 0; background: none; padding: 0; }
.onglets-colles { position: sticky; top: var(--entete); z-index: 40; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--filet); }
.onglets-defile { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--marge); max-width: calc(var(--largeur) + 2 * var(--marge)); margin-inline: auto; }
.onglets-defile::-webkit-scrollbar { display: none; }
.onglets-defile .puce { flex: none; }

/* Prestations */
.prestations { padding-block: 30px 40px; }
.categorie { padding-block: clamp(36px, 5vw, 70px) 10px; scroll-margin-top: calc(var(--entete) + 70px); display: grid; gap: 22px; }
.categorie-tete { display: flex; gap: 18px; align-items: center; }
.categorie-tete p { margin: 6px 0 0; color: var(--encre-2); max-width: 30em; }
.categorie-rond { flex: none; width: 84px; height: 84px; border-radius: var(--feuille); overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--ocre); }
.categorie-rond img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .categorie { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 60px; align-items: start; }
  .categorie-tete { position: sticky; top: calc(var(--entete) + 80px); flex-direction: column; align-items: flex-start; }
  .categorie-rond { width: 128px; height: 128px; }
}
.prestations-liste { list-style: none; margin: 0; padding: 0; }
.prestation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: start; padding: 20px 0; border-top: 1px solid var(--filet); }
.prestation:last-child { border-bottom: 1px solid var(--filet); }
.prestation-tete h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.prestation-tete p { margin: 4px 0 0; color: var(--encre-2); font-size: .98rem; }
.prestation-meta { display: grid; justify-items: end; gap: 2px; text-align: right; }
.prestation-duree { display: inline-flex; gap: 6px; align-items: center; color: var(--gris); font-size: .9rem; font-weight: 700; }
.prestation-duree .ic { width: 16px; height: 16px; }
.prestation-prix { font-size: 1.02rem; white-space: nowrap; }
.prestation { grid-template-rows: auto 1fr; }
.prestation-tete { grid-row: 1 / span 2; }
.prestation-meta { grid-column: 2; grid-row: 1; }
.prestation-reserver { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; }
.prestation-plus { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; border: 0; background: none; padding: 4px 0; font-weight: 700; color: var(--vert-fonce); cursor: pointer; }
.prestation-plus .ic { width: 16px; height: 16px; transition: transform var(--moyen) var(--courbe); }
.prestation-plus[aria-expanded="true"] .ic { transform: rotate(45deg); }
.prestation-details { display: none; list-style: none; margin: 8px 0 0; padding: 0; }
.prestation-details.est-deplie { display: grid; gap: 4px; animation: monte .35s var(--courbe); }
.prestation-details li { position: relative; padding-left: 18px; color: var(--encre-2); font-size: .95rem; }
.prestation-details li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ocre); }
.badge-doux { display: inline-block; vertical-align: .15em; margin-left: 6px; font-size: .74rem; font-weight: 800; padding: .15em .6em; border-radius: 999px; background: var(--vermillon-pale); color: var(--vermillon-fonce); }
@media (min-width: 700px) {
  .prestation { grid-template-columns: minmax(0, 1fr) 170px auto; grid-template-rows: auto; align-items: center; }
  .prestation-tete, .prestation-meta, .prestation-reserver { grid-column: auto; grid-row: auto; align-self: center; }
}

/* Bande « passer au naturel » */
.bande-naturel { background: var(--vert-fonce); color: #fff; padding-block: clamp(56px, 7vw, 100px); margin-top: 40px; }
.bande-naturel-in { display: grid; gap: 30px; align-items: center; }
.bande-naturel p { color: #DCEFE3; max-width: 34em; }
.bande-naturel .bouton { --fond: #fff; color: var(--vert-fonce); margin-top: 8px; }
.bande-naturel .bouton > .ic:first-child:not(.ic-fin) { background: var(--vert-fonce); color: #fff; }
.bande-naturel-meche { display: none; width: 120px; height: auto; fill: none; stroke: var(--ocre); stroke-width: 3; stroke-linecap: round; }
@media (min-width: 900px) { .bande-naturel-in { grid-template-columns: minmax(0, 1fr) auto; gap: 80px; } .bande-naturel-meche { display: block; } }

/* Salons */
.salons { padding-block: clamp(56px, 7vw, 100px); scroll-margin-top: calc(var(--entete) + 10px); }
.salons-grille { display: grid; gap: 22px; }
@media (min-width: 760px) { .salons-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .salons-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Un seul institut : une carte large, photo d'un côté et informations de l'autre. */
@media (min-width: 760px) {
  .salons-grille-un { grid-template-columns: minmax(0, 1fr) !important; }
  .salons-grille-un .carte-salon { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .salons-grille-un .carte-salon-image { aspect-ratio: auto; min-height: 340px; }
  .salons-grille-un .carte-salon-image img { position: absolute; inset: 0; }
  .salons-grille-un .carte-salon-corps { padding: clamp(22px, 3vw, 40px); align-content: center; gap: 14px; }
  .salons-grille-un .carte-salon h3 { font-size: 1.5rem; }
}
.carte-salon { display: grid; align-content: start; border-radius: var(--r-carte); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); }
.carte-salon.est-proche { box-shadow: inset 0 0 0 2px var(--vert); }
.carte-salon-image { position: relative; aspect-ratio: 16 / 10; background: var(--ocre-pale); }
.carte-salon-image img { width: 100%; height: 100%; object-fit: cover; }
.carte-salon-etat { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: .3em .8em; font-size: .85rem; font-weight: 700; }
.carte-salon-corps { padding: 16px 18px 18px; display: grid; gap: 10px; }
.carte-salon h3 { font-size: 1.15rem; font-weight: 800; }
.carte-salon-adresse { display: flex; gap: 8px; margin: 0; color: var(--encre-2); font-size: .95rem; }
.carte-salon-adresse .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--vermillon-fonce); }
.carte-salon-adresse small { color: var(--gris); }
.horaires { margin: 0; font-size: .9rem; display: grid; gap: 2px; }
.horaires div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--filet); padding: 3px 0; }
.horaires dt { color: var(--gris); }
.horaires dd { margin: 0; font-weight: 700; }
.carte-salon-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.carte-salon-actions .bouton { margin-right: auto; }

/* Questions */
.faq { padding-block: clamp(40px, 6vw, 90px); }
.faq-liste { margin-top: 24px; max-width: 900px; }
@media (min-width: 1024px) { .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 60px; align-items: start; } .faq > .titre-section { position: sticky; top: calc(var(--entete) + 30px); } .faq-liste { margin-top: 0; } }
.question { border-top: 1px solid var(--filet); }
.question:last-child { border-bottom: 1px solid var(--filet); }
.question summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 800; font-size: 1.08rem; cursor: pointer; }
.question summary::-webkit-details-marker { display: none; }
.question summary .ic { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--surface); transition: transform var(--moyen) var(--courbe), background var(--rapide); }
.question[open] summary .ic { transform: rotate(45deg); background: var(--ocre-pale); }
.reponse { padding: 0 0 18px; color: var(--encre-2); max-width: 46em; }

/* Bandeau d'appel */
.appel { padding-block: 10px clamp(56px, 7vw, 100px); }
.appel-in { border-radius: 28px; background: var(--ocre-pale); padding: clamp(26px, 5vw, 56px); display: grid; gap: 12px; }
.appel-in p { color: var(--encre-2); max-width: 36em; }
.appel-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Parcours en étapes ---------- */
.page-rendez-vous .barre-app, .page-commande .barre-app, .page-diagnostic .barre-app { display: none; }
.page-rendez-vous, .page-commande, .page-diagnostic { padding-bottom: 0; }
.page-rendez-vous .pied, .page-commande .pied { display: none; }
.parcours { padding: 14px 0 0; min-height: calc(100svh - var(--entete)); }
.parcours-in { width: 100%; max-width: calc(1180px + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); display: grid; gap: 0 60px; grid-template-columns: minmax(0, 1fr); }
.parcours-tete { display: flex; gap: 14px; align-items: center; padding-block: 6px 12px; }
.parcours-titre { font-family: var(--titre); font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.05; }
.parcours-sous { margin: 2px 0 0; color: var(--gris); font-weight: 700; font-size: .95rem; }
.parcours-progres { height: 4px; border-radius: 2px; background: var(--filet); overflow: hidden; margin-bottom: 18px; }
.parcours-progres span { display: block; height: 100%; width: var(--p, 0%); background: var(--vermillon); border-radius: 2px; transition: width .5s var(--courbe); }
.parcours-form { min-width: 0; padding-bottom: calc(100px + var(--bas-sur)); }
.etape { border: 0; margin: 0; padding: 0; min-width: 0; }
.etape-titre { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.1; margin-bottom: 16px; padding: 0; outline: none; }
.etape-titre small { font-family: var(--texte); font-style: normal; font-weight: 700; font-size: .9rem; color: var(--gris); margin-left: 8px; }
.etape-aide { margin-bottom: 12px; }
.choix { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 760px) { .choix-prestations, .choix-salons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choix-carte { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--filet); cursor: pointer; transition: box-shadow var(--rapide), background var(--rapide), transform var(--rapide) var(--courbe); -webkit-tap-highlight-color: transparent; }
.choix-carte:hover { box-shadow: inset 0 0 0 1.5px var(--filet-fort); }
.choix-carte:active { transform: scale(.99); }
.choix-carte input { position: absolute; opacity: 0; pointer-events: none; }
.choix-carte:has(input:checked) { box-shadow: inset 0 0 0 2px var(--encre); background: var(--surface); }
.choix-carte:has(input:focus-visible) { outline: 3px solid var(--ocre); outline-offset: 2px; }
.choix-image { width: 58px; height: 58px; border-radius: 12px; overflow: hidden; background: var(--ocre-pale); flex: none; }
.choix-image img { width: 100%; height: 100%; object-fit: cover; }
.choix-image-rond { border-radius: var(--feuille); }
.choix-texte { display: grid; gap: 2px; min-width: 0; }
.choix-texte strong { font-weight: 800; line-height: 1.25; }
.choix-texte small { color: var(--gris); font-size: .9rem; line-height: 1.35; }
.choix-coche { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--filet-fort); color: transparent; transition: background var(--rapide), color var(--rapide); }
.choix-coche .ic { width: 16px; height: 16px; }
.choix-carte:has(input:checked) .choix-coche { background: var(--vermillon-fonce); box-shadow: none; color: #fff; }
.choix-ligne { grid-template-columns: minmax(0, 1fr) auto; }
.choix-ligne:has(input[type=radio])::before { content: ''; position: absolute; }
.choix-prix { font-weight: 800; white-space: nowrap; }
.moyens { display: flex; gap: 4px; color: var(--vert-fonce); }
.moyens .ic { width: 26px; height: 26px; }
.jours { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.jours::-webkit-scrollbar { display: none; }
.jour { flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 0; width: 64px; padding: 10px 0; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--filet); cursor: pointer; line-height: 1.15; }
.jour span { font-size: .8rem; font-weight: 700; color: var(--gris); text-transform: capitalize; }
.jour strong { font-family: var(--titre); font-style: italic; font-size: 1.55rem; }
.jour small { font-size: .78rem; color: var(--gris); }
.jour.est-ferme { background: repeating-linear-gradient(135deg, #fff 0 6px, var(--surface) 6px 12px); }
.jour.est-ferme strong { color: var(--gris-clair); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.jour.est-choisi { background: var(--encre); box-shadow: none; }
.jour.est-choisi span, .jour.est-choisi strong, .jour.est-choisi small { color: #fff; }
.heures-zone { margin-top: 14px; }
.heures-titre { font-weight: 800; margin-bottom: 10px; }
.heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.heure { height: 46px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--filet-fort); font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums; }
.heure:hover { box-shadow: inset 0 0 0 1.5px var(--encre); }
.heure.est-complet, .heure.est-passe { color: var(--gris-clair); background: var(--surface); box-shadow: none; text-decoration: line-through; }
.heure.est-choisie { background: var(--vermillon-fonce); color: #fff; box-shadow: none; }
.champs { display: grid; gap: 14px; }
@media (min-width: 760px) { .champs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .champ-large, .champs .case { grid-column: 1 / -1; } }
.champ { display: grid; gap: 6px; }
.champ > span { font-weight: 800; font-size: .95rem; }
.champ em { font-style: normal; font-weight: 500; color: var(--gris); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--filet-fort); border-radius: var(--r-champ);
  background: #fff; font: inherit; color: var(--encre); transition: border-color var(--rapide), box-shadow var(--rapide); -webkit-appearance: none; appearance: none;
}
.champ textarea { resize: vertical; min-height: 96px; }
.champ select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2317120F'%3E%3Cpath d='M4.4 8.6a1.3 1.3 0 0 1 1.84 0L12 14.38l5.76-5.78a1.3 1.3 0 1 1 1.84 1.84l-6.68 6.7a1.3 1.3 0 0 1-1.84 0L4.4 10.44a1.3 1.3 0 0 1 0-1.84z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 4px rgba(217, 125, 22, .22); }
.champ [aria-invalid="true"] { border-color: var(--vermillon-fonce); background: #FFF8F5; }
.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.case { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.case input { width: 22px; height: 22px; accent-color: var(--vermillon-fonce); }
.recap { margin: 0 0 16px; display: grid; gap: 0; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--filet); overflow: hidden; }
.recap div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--filet); }
.recap div:last-child { border-bottom: 0; }
.recap dt { color: var(--gris); font-weight: 700; }
.recap dd { margin: 0; font-weight: 800; }
.recap dd small { font-weight: 500; color: var(--gris); }
.recap .recap-total { background: var(--surface); }
.recap .recap-total dd { font-size: 1.15rem; }
.paiement-choix { display: grid; gap: 10px; margin: 6px 0 16px; }
.paiement-texte { margin: 0; }
.parcours-barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--marge) calc(12px + var(--bas-sur)); background: rgba(255, 255, 255, .98); border-top: 1px solid var(--filet);
}
.parcours-barre .bouton { margin-left: auto; }
.parcours-barre .bouton-texte { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--encre); }
.parcours-barre .bouton-texte .ic { width: 18px; height: 18px; }
.resume { display: none; }
@media (min-width: 1024px) {
  .parcours-in { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .parcours-tete, .parcours-progres { grid-column: 1 / -1; }
  .parcours-form { padding-bottom: 60px; }
  .parcours-barre { position: sticky; bottom: 0; padding-inline: 0; margin-top: 26px; border-top: 1px solid var(--filet); background: #fff; }
  .resume { display: block; position: sticky; top: calc(var(--entete) + 20px); padding: 24px; border-radius: 22px; background: var(--surface); }
  .resume h2 { font-family: var(--titre); font-style: italic; font-size: 1.5rem; margin-bottom: 14px; }
  .resume dl { margin: 0 0 16px; display: grid; gap: 12px; }
  .resume dt { font-size: .85rem; font-weight: 700; color: var(--gris); }
  .resume dd { margin: 0; font-weight: 800; }
  .resume .resume-total { padding-top: 12px; border-top: 1px solid var(--filet-fort); }
  .resume .resume-total dd { font-size: 1.3rem; }
  .resume-note { color: var(--gris); font-size: .92rem; }
  .parcours-in-simple { grid-template-columns: minmax(0, 860px); justify-content: center; }
}

/* ---------- Écrans de résultat (suivi, certificat, paiement) ---------- */
.ecran-resultat { min-height: calc(100svh - var(--entete) - var(--barre) - var(--bas-sur)); display: grid; place-items: center; padding: 16px var(--marge) 24px; }
@media (min-width: 1024px) { .ecran-resultat { min-height: calc(100svh - var(--entete)); padding-block: 40px; } }
.resultat-carte { width: 100%; max-width: 560px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.resultat-sceau { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.resultat-sceau > svg:not(.ic) { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; transform: rotate(-90deg); }
.sceau-anneau { stroke: var(--ocre); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace .9s var(--courbe) .1s forwards; }
.sceau-arc { stroke: var(--vert); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace .7s var(--courbe) .6s forwards; }
.sceau-ic { position: relative; width: 38px; height: 38px; color: var(--encre); animation: eclot .7s var(--courbe-ressort) .4s both; }
.ton-ok .sceau-ic { color: var(--vert-fonce); }
.ton-ko .sceau-ic { color: var(--vermillon-fonce); }
.ton-ko .sceau-arc { stroke: var(--vermillon); }
.sceau-attente > svg:not(.ic) { animation: tourne 2.4s linear infinite; }
@keyframes tourne { to { transform: rotate(270deg); } }
.resultat-titre { font-family: var(--titre); font-style: italic; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.08; margin-top: 4px; }
.resultat-texte { color: var(--encre-2); margin: 0; max-width: 30em; }
.reference { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 8px 10px 8px 16px; border: 0; border-radius: 999px; background: var(--surface); cursor: pointer; }
.reference span { font-size: .82rem; font-weight: 700; color: var(--gris); }
.reference strong { font-size: 1.2rem; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.reference .ic { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #fff; }
.resultat-details { width: 100%; margin: 4px 0; display: grid; gap: 0; text-align: left; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--filet); }
.resultat-details div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--filet); }
.resultat-details div:last-child { border-bottom: 0; }
.resultat-details dt .ic { width: 22px; height: 22px; color: var(--vermillon-fonce); margin-top: 1px; }
.resultat-details dd { margin: 0; font-size: .97rem; line-height: 1.4; }
.resultat-details dd span { color: var(--gris); }
.resultat-details-serre div { padding-block: 9px; }
.resultat-payer { width: 100%; display: grid; justify-items: center; }
.resultat-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 6px; }
.action-ronde { display: grid; justify-items: center; gap: 4px; border: 0; background: none; padding: 0; font-size: .8rem; font-weight: 700; color: var(--encre-2); text-decoration: none; cursor: pointer; }
.action-ronde .ic { width: 50px; height: 50px; padding: 13px; border-radius: 50%; background: var(--surface); color: var(--encre); transition: background var(--rapide), color var(--rapide), transform var(--rapide) var(--courbe); }
.action-ronde:hover .ic { background: var(--encre); color: #fff; transform: translateY(-2px); }
.alerte-ligne { display: flex; gap: 8px; align-items: flex-start; text-align: left; margin: 2px 0; padding: 10px 14px; border-radius: 12px; background: var(--vermillon-pale); color: var(--vermillon-fonce); font-weight: 700; font-size: .93rem; }
.alerte-ligne .ic { width: 20px; height: 20px; margin-top: 1px; }
.montant { font-family: var(--titre); font-style: italic; font-size: 2rem; margin: 6px 0; }
.frise { list-style: none; margin: 8px 0 4px; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.frise::before { content: ''; position: absolute; left: 10%; right: 10%; top: 9px; height: 3px; border-radius: 2px; background: var(--filet); }
.frise::after { content: ''; position: absolute; left: 10%; top: 9px; height: 3px; border-radius: 2px; background: var(--vert); width: calc(80% * var(--etape) / var(--total)); transition: width 1s var(--courbe); }
.frise li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--gris); }
.frise li span { width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--filet); }
.frise li.est-faite span { background: var(--vert); box-shadow: 0 0 0 3px #fff; }
.frise li.est-faite { color: var(--encre); }
.frise li.est-courante span { background: var(--vermillon); box-shadow: 0 0 0 4px var(--vermillon-pale); }
.certificat-details { width: 100%; margin: 6px 0 12px; text-align: left; display: grid; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--filet); }
.certificat-details div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--filet); }
.certificat-details div:last-child { border-bottom: 0; }
.certificat-details dt { color: var(--gris); font-weight: 700; }
.certificat-details dd { margin: 0; font-weight: 800; }
.certificat-form, .suivi-form { width: 100%; display: grid; gap: 12px; text-align: left; margin-top: 8px; }
.formulaire-pied { display: flex; justify-content: center; margin-top: 6px; }
@media (min-width: 1024px) { .carte-formulaire .formulaire-pied, .carte-inscription .formulaire-pied { justify-content: flex-end; } }
.mes-demandes { width: 100%; text-align: left; margin-top: 6px; }
.mes-demandes h2 { font-size: 1rem; font-weight: 800; margin-bottom: 6px; }
.mes-demandes ul { list-style: none; margin: 0; padding: 0; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--filet); }
.mes-demandes a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; text-decoration: none; border-bottom: 1px solid var(--filet); }
.mes-demandes li:last-child a { border-bottom: 0; }
.mes-demandes small { font-size: .74rem; font-weight: 800; color: var(--vert-fonce); background: var(--vert-pale); padding: .2em .6em; border-radius: 999px; }
.mes-demandes span { color: var(--gris); font-size: .85rem; }

/* ---------- Boutique ---------- */
.roue-zone { display: grid; justify-items: center; gap: 14px; }
.roue { position: relative; width: min(84vw, 470px); aspect-ratio: 1; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.roue:active { cursor: grabbing; }
.roue-anneau { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; pointer-events: none; }
.roue-anneau circle { stroke: var(--ocre); stroke-width: 1.2; stroke-dasharray: 2 5; }
.roue-anneau path { stroke: var(--vert); stroke-width: 2.4; stroke-linecap: round; }
.roue-item { position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 1; border-radius: var(--feuille); overflow: hidden; background: var(--ocre-pale); box-shadow: 0 0 0 4px #fff, 0 16px 30px -18px rgba(23, 18, 15, .5); transition: box-shadow var(--moyen); will-change: transform; }
.roue-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.roue-item.est-devant { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--vermillon), 0 20px 40px -18px rgba(23, 18, 15, .6); }
.roue-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46%; text-align: center; pointer-events: auto; z-index: 0; }
.roue-centre a { display: grid; gap: 4px; text-decoration: none; }
.roue-centre strong { font-family: var(--titre); font-style: italic; font-size: clamp(1.15rem, .9rem + 1vw, 1.55rem); line-height: 1.1; }
.roue-centre span { font-weight: 800; color: var(--vermillon-fonce); }
.roue-commandes { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--gris); }
.catalogue { padding-block: 10px 60px; scroll-margin-top: var(--entete); }
.catalogue-barre { position: sticky; top: var(--entete); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; background: rgba(255, 255, 255, .97); margin-bottom: 18px; }
.catalogue-compte { margin: 0; color: var(--gris); font-weight: 700; white-space: nowrap; display: none; }
@media (min-width: 760px) { .catalogue-compte { display: block; } }
.grille-produits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
@media (min-width: 760px) { .grille-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; } }
@media (min-width: 1200px) { .grille-produits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .grille-produits .produit-nom { font-size: 1rem; } .grille-produits .bouton-ajout { width: 38px; height: 38px; } }
.infos-boutique { background: var(--vert-pale); padding-block: clamp(50px, 6vw, 90px); }
.infos-boutique-in { display: grid; gap: 30px; }
@media (min-width: 900px) { .infos-boutique-in { grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; } }
.infos-boutique h2 { font-size: 1.25rem; font-weight: 800; margin: 12px 0 8px; }
.infos-boutique p { color: var(--encre-2); }
.infos-ic { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: #fff; color: var(--vert-fonce); }
.zones { list-style: none; margin: 10px 0 0; padding: 0; }
.zones li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(4, 140, 55, .25); font-size: .95rem; }
.zones strong { white-space: nowrap; }

/* Fiche produit */
.fiche-produit { display: grid; gap: 28px; padding-block: 18px clamp(40px, 6vw, 80px); }
@media (min-width: 1024px) { .fiche-produit { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: start; } .fiche-galerie { position: sticky; top: calc(var(--entete) + 20px); } }
.fiche-image-principale { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--ocre-pale); }
.fiche-image-principale img { width: 100%; height: 100%; object-fit: cover; }
.fiche-vignettes { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.fiche-vignettes button { flex: none; width: 74px; height: 74px; border: 0; padding: 0; border-radius: var(--feuille); overflow: hidden; cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--filet); }
.fiche-vignettes button.est-choisie { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--vermillon); }
.fiche-vignettes img { width: 100%; height: 100%; object-fit: cover; }
.fiche-titre { font-family: var(--titre); font-style: italic; font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); line-height: 1.02; margin-bottom: .2em; }
.fiche-accroche { font-size: 1.14rem; color: var(--encre-2); }
.fiche-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.fiche-prix strong { font-size: 1.8rem; font-weight: 800; }
.fiche-prix s { color: var(--gris-clair); }
.fiche-prix span { color: var(--gris); font-weight: 700; }
.fiche-dispo { font-weight: 700; color: var(--vert-fonce); }
.fiche-dispo.est-rupture { color: var(--vermillon-fonce); }
.fiche-achat { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 14px; }
.quantite-grande { height: 58px; }
.quantite-grande input { width: 46px; border: 0; text-align: center; font: inherit; font-weight: 800; font-size: 1.1rem; background: none; -moz-appearance: textfield; }
.quantite-grande input::-webkit-inner-spin-button, .quantite-grande input::-webkit-outer-spin-button { -webkit-appearance: none; }
.quantite-grande button { width: 50px; height: 54px; }
.fiche-wa { color: var(--vert-fonce); }
.fiche-wa .ic { color: var(--vert); }
.fiche-onglets { margin: 26px 0 18px; }
.fiche-onglets details { border-top: 1px solid var(--filet); }
.fiche-onglets details:last-child { border-bottom: 1px solid var(--filet); }
.fiche-onglets summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-weight: 800; cursor: pointer; }
.fiche-onglets summary::-webkit-details-marker { display: none; }
.fiche-onglets summary .ic { width: 20px; height: 20px; transition: transform var(--moyen) var(--courbe); }
.fiche-onglets details[open] summary .ic { transform: rotate(45deg); }
.fiche-onglets details > div { padding-bottom: 16px; color: var(--encre-2); }
.barre-achat { position: fixed; z-index: 58; left: 0; right: 0; bottom: calc(var(--barre) + var(--bas-sur)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--marge); background: #fff; border-top: 1px solid var(--filet); transform: translateY(120%); transition: transform var(--moyen) var(--courbe); }
.barre-achat.est-visible { transform: none; }
.barre-achat div { display: grid; min-width: 0; }
.barre-achat strong { font-size: 1.1rem; }
.barre-achat span { color: var(--gris); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { .barre-achat { display: none; } }
.rail-section-court { padding-top: 10px; }
.rail-court > * { flex-basis: min(60vw, 240px); }

/* ---------- Academy ---------- */
.tresse-section { background: var(--encre); color: #fff; padding-block: clamp(40px, 6vw, 80px); overflow: hidden; }
.tresse-zone { position: relative; max-width: 1400px; margin-inline: auto; }
.tresse { width: 100%; height: clamp(150px, 22vw, 260px); overflow: visible; }
.brin { fill: none; stroke-width: 9; stroke-linecap: round; }
.brin-1 { stroke: var(--vermillon); }
.brin-2 { stroke: var(--ocre); }
.brin-3 { stroke: var(--vert); }
.tresse-mots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; margin: 0; padding-inline: var(--marge); pointer-events: none; }
.mot { justify-self: center; font-family: var(--titre); font-style: italic; font-weight: 700; font-size: clamp(1.4rem, .8rem + 3vw, 3.4rem); background: var(--encre); padding: 0 .3em; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .7s var(--courbe), transform .7s var(--courbe); }
.mot.est-visible { opacity: 1; transform: none; }
.formations { padding-block: clamp(56px, 7vw, 100px); scroll-margin-top: var(--entete); }
.formations-liste { display: grid; gap: 0; }
.formation-ligne { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px 20px; padding: 24px 0; border-top: 1px solid var(--filet); align-items: center; }
.formation-ligne:last-child { border-bottom: 1px solid var(--filet); }
.formation-rond { width: 96px; height: 96px; border-radius: var(--feuille); overflow: hidden; background: var(--ocre-pale); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--vert); }
.formation-rond img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--courbe); }
.formation-ligne:hover .formation-rond img { transform: scale(1.08); }
.formation-texte h3 { font-family: var(--titre); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.08; }
.formation-texte h3 a { text-decoration: none; }
.formation-texte > p { margin: 4px 0 8px; color: var(--encre-2); }
.formation-faits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; color: var(--gris); font-weight: 700; }
.formation-faits li { display: inline-flex; gap: 6px; align-items: center; }
.formation-faits .ic { width: 16px; height: 16px; color: var(--vert-fonce); }
.formation-prix { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.formation-prix p { margin: 0; display: grid; line-height: 1.2; }
.formation-prix span { font-size: .8rem; color: var(--gris); font-weight: 700; }
.formation-prix .bouton { margin-left: auto; }
@media (min-width: 1024px) {
  .formation-ligne { grid-template-columns: 170px minmax(0, 1fr) 240px; gap: 36px; padding: 30px 0; }
  .formation-rond { width: 170px; height: 170px; }
  .formation-prix { grid-column: auto; display: grid; justify-items: end; text-align: right; gap: 8px; }
  .formation-prix .bouton { margin-left: 0; margin-top: 6px; }
}
.parcours-eleve { background: var(--ocre-pale); padding-block: clamp(50px, 6vw, 90px); }
.chemin { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.chemin::before { content: ''; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: repeating-linear-gradient(var(--ocre) 0 6px, transparent 6px 11px); }
.chemin li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 18px; padding: 10px 0; align-items: center; }
.chemin p { margin: 0; font-weight: 700; font-size: 1.08rem; }
.chemin-point { width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--vert); position: relative; z-index: 1; }
.chemin li:last-child .chemin-point { background: var(--vert); box-shadow: 0 0 0 4px #fff; }
@media (min-width: 900px) {
  .chemin { grid-template-columns: repeat(var(--n, 4), 1fr); gap: 20px; }
  .chemin::before { left: 12px; right: 12%; top: 11px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--ocre) 0 6px, transparent 6px 11px); }
  .chemin li { grid-template-columns: 1fr; align-items: start; }
}
.bloc-sessions { padding-block: clamp(56px, 7vw, 100px); scroll-margin-top: var(--entete); }
@media (min-width: 900px) { .sessions-larges .session { grid-template-columns: 110px minmax(0, 1fr) auto; } .sessions-larges .session-jour { font-size: 3rem; } }
.galerie-courte { padding-bottom: clamp(56px, 7vw, 100px); }
.certificat-appel { background: var(--encre); color: #fff; padding-block: clamp(50px, 6vw, 90px); }
.certificat-appel-in { display: grid; gap: 20px; align-items: center; }
.certificat-appel p { color: #D9D0C8; }
.certificat-appel-ic { width: 64px; height: 64px; color: var(--ocre); }
.certificat-mini { display: flex; gap: 8px; flex-wrap: wrap; }
.certificat-mini input { flex: 1; min-width: 200px; height: 52px; padding: 0 18px; border-radius: 999px; border: 0; font: inherit; text-transform: uppercase; }
.certificat-mini input::placeholder, .certificat-form input::placeholder { text-transform: none; }
@media (min-width: 1024px) { .certificat-appel-in { grid-template-columns: auto minmax(0, 1fr) minmax(0, 420px); gap: 40px; } }

/* Fiche formation */
.fiche-formation { padding-block: 16px clamp(50px, 6vw, 90px); }
.fiche-formation-tete { display: grid; gap: 26px; align-items: center; padding-bottom: 30px; }
.fiche-formation-image { border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 11; background: var(--ocre-pale); }
.fiche-formation-image img { width: 100%; height: 100%; object-fit: cover; }
.formation-cles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 20px 0 0; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--filet); overflow: hidden; }
.formation-cles div { padding: 12px 16px; border-bottom: 1px solid var(--filet); border-right: 1px solid var(--filet); }
.formation-cles div:nth-child(2n) { border-right: 0; }
.formation-cles dt { font-size: .82rem; color: var(--gris); font-weight: 700; }
.formation-cles dd { margin: 0; font-weight: 800; }
.fiche-formation-corps { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .fiche-formation-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
  .fiche-formation-corps { grid-template-columns: minmax(0, 1fr) 430px; gap: 70px; align-items: start; }
  .carte-inscription { position: sticky; top: calc(var(--entete) + 20px); }
}
.fiche-formation-texte { color: var(--encre-2); }
.programme { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.programme li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--encre); font-weight: 500; }
.programme .ic { width: 16px; height: 16px; color: var(--vert); margin-top: 5px; }
.ic-ligne { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; color: var(--ocre); }
.carte-inscription { border-radius: 26px; background: var(--surface); padding: clamp(20px, 3vw, 30px); scroll-margin-top: calc(var(--entete) + 10px); }
.carte-inscription form { display: grid; gap: 14px; }
.carte-inscription h2 { font-family: var(--titre); font-style: italic; font-size: 1.7rem; line-height: 1.1; }
.carte-inscription .petit-texte { margin: 0; }
.carte-inscription .choix { margin: 0; }
.carte-inscription .champ input, .carte-inscription .champ select, .carte-inscription .champ textarea { background-color: #fff; }
.bascule { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--filet); }
.bascule label { position: relative; cursor: pointer; }
.bascule input { position: absolute; opacity: 0; }
.bascule span { display: block; text-align: center; padding: 10px 8px; border-radius: 999px; font-weight: 800; font-size: .95rem; transition: background var(--rapide), color var(--rapide); }
.bascule input:checked + span { background: var(--encre); color: #fff; }
.bascule input:focus-visible + span { outline: 3px solid var(--ocre); }
.autres-formations { padding-bottom: clamp(50px, 6vw, 90px); }
.autres-grille { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 900px) { .autres-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.autre-formation { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--filet); text-decoration: none; }
.autre-formation:hover { box-shadow: inset 0 0 0 1.5px var(--encre); }
.autre-rond { width: 64px; height: 64px; border-radius: var(--feuille); overflow: hidden; }
.autre-rond img { width: 100%; height: 100%; object-fit: cover; }
.autre-formation span { display: grid; }
.autre-formation small { color: var(--gris); }

/* ---------- À propos ---------- */
.tete-apropos { display: grid; gap: 30px; align-items: center; padding-block: clamp(28px, 5vw, 70px); }
.tete-apropos-visuel { justify-self: center; width: min(76vw, 440px); }
.apropos-embleme { width: 100%; height: auto; overflow: visible; }
@media (min-width: 1024px) { .tete-apropos { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 60px; } }
.histoire { display: grid; gap: 40px; padding-block: 20px clamp(50px, 6vw, 90px); }
.histoire-texte p { font-size: 1.1em; color: var(--encre-2); max-width: 36em; }
.lettrine > p:first-child::first-letter { float: left; font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 4.4em; line-height: .82; margin: .06em .1em 0 0; color: var(--vermillon); }
.histoire-cote { display: grid; gap: 22px; align-content: start; }
.citation { margin: 0; position: relative; padding-left: 26px; border-left: 3px solid var(--ocre); }
.citation p { font-family: var(--titre); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); line-height: 1.22; color: var(--encre); margin: 0; }
.fondatrice { display: grid; gap: 2px; padding: 18px 20px; border-radius: 18px; background: var(--surface); }
.fondatrice strong { font-size: 1.1rem; }
.fondatrice span { color: var(--gris); }
@media (min-width: 1024px) { .histoire { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 80px; } .histoire-cote { position: sticky; top: calc(var(--entete) + 30px); } }
.mission-vision { display: grid; gap: 18px; padding-bottom: clamp(40px, 6vw, 80px); }
@media (min-width: 900px) { .mission-vision { grid-template-columns: 1fr 1fr; gap: 24px; } }
.mv { padding: clamp(24px, 4vw, 44px); border-radius: 26px; }
.mv h2 { font-family: var(--titre); font-style: italic; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); margin-bottom: .4em; }
.mv p { margin: 0; font-size: 1.06em; }
.mv-mission { background: var(--vert-pale); }
.mv-vision { background: var(--vermillon-pale); }
.valeurs { padding-bottom: clamp(50px, 6vw, 90px); }
.valeurs-liste { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px 40px; }
@media (min-width: 900px) { .valeurs-liste { grid-template-columns: 1fr 1fr; } }
.valeurs-liste li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--filet); font-weight: 700; font-size: 1.05rem; }
.valeurs-liste .ic { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-fonce); }
.engagement { background: var(--encre); color: #fff; padding-block: clamp(50px, 6vw, 90px); }
.engagement p { color: #D9D0C8; max-width: 44em; font-size: 1.08em; }
.reconnaissances { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.reconnaissances li { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.reconnaissances .ic { width: 16px; height: 16px; color: var(--ocre); }
.trois-liens { display: grid; gap: 12px; padding-block: clamp(50px, 6vw, 90px); }
@media (min-width: 900px) { .trois-liens { grid-template-columns: repeat(3, 1fr); } }
.trois-liens a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 22px 24px; border-radius: 22px; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--filet); transition: background var(--rapide), color var(--rapide); }
.trois-liens a span { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 1.5rem; }
.trois-liens a small { grid-row: 2; color: var(--gris); }
.trois-liens a .ic { grid-row: span 2; grid-column: 2; }
.trois-liens a:hover { background: var(--encre); color: #fff; }
.trois-liens a:hover small { color: #CFC6BE; }

/* ---------- Conseils et articles ---------- */
.article-une { display: grid; gap: 22px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--filet); }
.article-une-image { border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ocre-pale); }
.article-une-image img { width: 100%; height: 100%; object-fit: cover; }
.article-une h2 { font-family: var(--titre); font-style: italic; font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1.04; margin-bottom: .35em; }
.article-une h2 a { text-decoration: none; }
.article-une p { color: var(--encre-2); }
@media (min-width: 1024px) { .article-une { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 50px; align-items: center; } }
.articles-grille { display: grid; gap: 34px 26px; padding-bottom: clamp(50px, 6vw, 90px); }
@media (min-width: 760px) { .articles-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .articles-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lecture-tete { padding-block: 10px 26px; max-width: 980px; }
.lecture-chapo { font-size: 1.2em; color: var(--encre-2); max-width: 36em; }
.lecture-meta { color: var(--gris); font-weight: 700; font-size: .93rem; }
.lecture-image { margin: 0 auto 40px; max-width: 1180px; padding-inline: var(--marge); }
.lecture-image img { width: 100%; border-radius: 26px; aspect-ratio: 16 / 9; object-fit: cover; }
.lecture-corps { display: grid; gap: 30px; padding-bottom: clamp(50px, 6vw, 90px); }
@media (min-width: 1024px) { .lecture-corps { grid-template-columns: minmax(0, 720px) 280px; gap: 90px; } .lecture-cote { position: sticky; top: calc(var(--entete) + 30px); align-self: start; } }
.prose { font-size: 1.08em; max-width: 720px; }
.prose p, .prose li { color: var(--encre-2); }
.prose h2 { font-family: var(--titre); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 1.5em 0 .5em; color: var(--encre); }
.prose h3 { font-size: 1.2rem; margin: 1.3em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; }
.prose ul li::marker { color: var(--ocre); }
.prose ol li::marker { color: var(--vermillon-fonce); font-weight: 800; }
.prose strong { color: var(--encre); }
.prose blockquote { margin: 1.4em 0; padding-left: 20px; border-left: 3px solid var(--ocre); font-family: var(--titre); font-style: italic; font-size: 1.2em; }
.prose a { color: var(--vermillon-fonce); }
.lecture-cote { display: grid; gap: 18px; align-content: start; }
.lecture-encart { padding: 20px; border-radius: 20px; background: var(--vert-pale); }
.autres-articles { padding-bottom: 20px; }
.legal { padding-block: 30px clamp(50px, 6vw, 90px); }

/* ---------- Galerie ---------- */
.mosaique { columns: 2 160px; column-gap: 12px; }
@media (min-width: 900px) { .mosaique { columns: 3 260px; column-gap: 18px; } }
.mosaique-courte { columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(44%, 230px), 1fr)); gap: 12px; }
.mosaique-courte .tuile { margin: 0; aspect-ratio: 4 / 5; }
.mosaique-courte .tuile img { height: 100%; object-fit: cover; }
@media (min-width: 900px) { .mosaique-courte { gap: 18px; } }
.tuile { position: relative; display: block; margin-bottom: 12px; break-inside: avoid; border-radius: 18px; overflow: hidden; background: var(--ocre-pale); }
@media (min-width: 900px) { .tuile { margin-bottom: 18px; } }
.tuile img, .tuile video { width: 100%; height: auto; transition: transform .8s var(--courbe); }
.tuile:hover img { transform: scale(1.04); }
.tuile-titre { position: absolute; left: 10px; bottom: 10px; padding: .3em .8em; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: .85rem; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity var(--moyen), transform var(--moyen) var(--courbe); }
.tuile:hover .tuile-titre, .tuile:focus-visible .tuile-titre { opacity: 1; transform: none; }
@media (hover: none) { .tuile-titre { opacity: 1; transform: none; } }
.tuile-lecture { position: absolute; inset: 0; display: grid; place-items: center; }
.tuile-lecture .ic { width: 58px; height: 58px; color: #fff; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4)); }
.galerie-pied { display: grid; justify-items: center; gap: 10px; padding: 30px 0 clamp(50px, 6vw, 90px); text-align: center; color: var(--gris); }
.visionneuse { position: fixed; inset: 0; z-index: 300; background: rgba(15, 11, 9, .94); display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; padding: 20px 6px; }
.visionneuse figure { margin: 0; display: grid; justify-items: center; gap: 12px; min-width: 0; }
.visionneuse-media { width: 100%; display: grid; place-items: center; }
.visionneuse img { max-width: 100%; max-height: 80svh; width: auto; border-radius: 12px; }
.visionneuse video { max-width: 100%; max-height: 80svh; border-radius: 12px; }
.visionneuse iframe { width: min(100%, 1000px); aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.visionneuse figcaption { color: #fff; font-weight: 700; }
.visionneuse button { width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.visionneuse-fermer { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.visionneuse-fermer .ic { width: 20px; height: 20px; }

/* ---------- Contact ---------- */
.contact-grille { display: grid; gap: 30px; padding-bottom: 20px; }
@media (min-width: 1024px) { .contact-grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 50px; align-items: start; } }
.contact-rapide { display: grid; gap: 12px; align-content: start; }
.contact-tuile { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: var(--surface); text-decoration: none; transition: background var(--rapide), color var(--rapide); }
.contact-tuile .ic { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: #fff; color: var(--encre); }
.contact-tuile span { display: grid; }
.contact-tuile strong { font-size: 1.1rem; }
.contact-tuile small { color: var(--gris); font-weight: 700; font-size: .95rem; }
.contact-tuile:hover { background: var(--encre); color: #fff; }
.contact-tuile:hover small { color: #CFC6BE; }
.contact-wa { background: var(--vert-pale); }
.contact-wa .ic { color: var(--vert-fonce); }
.contact-reseaux p { font-weight: 800; margin: 8px 0; }
.carte-formulaire { border-radius: 26px; background: var(--surface); padding: clamp(20px, 3vw, 34px); display: grid; gap: 16px; }
.carte-formulaire h2 { font-family: var(--titre); font-style: italic; font-size: 1.8rem; }
.carte-formulaire .champ input, .carte-formulaire .champ select, .carte-formulaire .champ textarea { background-color: #fff; }
.carte-zone { position: relative; border-radius: 26px; overflow: hidden; margin-bottom: 24px; background: var(--surface); }
.carte-google { display: block; width: 100%; height: clamp(280px, 40vw, 440px); border: 0; filter: saturate(.85); }
.carte-onglets { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.carte-onglets .puce { flex: none; }
.carte-onglets .puce span { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); }

/* ---------- Diagnostic ---------- */
.parcours-diagnostic .parcours-form { max-width: 860px; }
.choix-diag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix-diag-carte { grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; min-height: 104px; padding: 16px; }
.choix-diag-carte .choix-coche { position: absolute; top: 12px; right: 12px; }
.choix-diag-carte .ressort-mini, .choix-diag-carte .dessin-etat { justify-self: center; }
.choix-diag-carte .choix-texte { padding-right: 18px; }
.ressort-mini { width: 44px; height: 110px; margin: 0 auto 6px; }
.ressort-mini path { stroke-width: 4; }
.choix-diag-carte:has(input:checked) .ressort-mini path { stroke: var(--vermillon); }
.dessin-etat { width: 100%; height: 92px; fill: none; stroke: var(--encre); stroke-width: 5.5; stroke-linecap: round; margin: 4px 0 8px; transition: stroke var(--rapide); }
.choix-diag-carte:has(input:checked) .dessin-etat { stroke: var(--vermillon); }
@media (min-width: 760px) { .choix-diag:not(.choix-diag-serre) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .choix-diag-serre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.verre-scene { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin-bottom: 8px; }
.verre { width: 110px; height: auto; overflow: visible; }
.verre-eau { fill: rgba(4, 140, 55, .1); }
.verre-vague { fill: none; stroke: rgba(4, 140, 55, .5); stroke-width: 2; }
.verre-bord { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linejoin: round; }
.verre-cheveu { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); }
.diagnostic-resultat { padding-bottom: 60px; }
.resultat-diag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.resultat-diag > * { min-width: 0; }
.resultat-diag-grille { display: grid; gap: 18px; }
@media (min-width: 900px) { .resultat-diag-grille { grid-template-columns: 1fr 1fr; } }
.resultat-diag-bloc { padding: 22px; border-radius: 22px; background: var(--surface); }
.resultat-diag-bloc h3, .resultat-diag-produits h3, .resultat-diag-prestations h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; }
.resultat-diag-bloc p { color: var(--encre-2); }
.resultat-diag-routine { background: var(--vert-pale); }
.routine { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: r; }
.routine li { display: grid; gap: 2px; padding-left: 34px; position: relative; counter-increment: r; }
.routine li::before { content: counter(r); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--vert-fonce); color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.routine span { color: var(--encre-2); }
.resultat-diag-produits .rail { padding-inline: 0; }
.resultat-diag-prestations ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.resultat-diag-prestations a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--filet); text-decoration: none; }
.resultat-diag-prestations a:hover { box-shadow: inset 0 0 0 1.5px var(--encre); }
.resultat-diag-prestations span { display: grid; }
.resultat-diag-prestations small { color: var(--gris); }
.resultat-diag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* ---------- Notifications, recherche, erreurs ---------- */
.notifs-page { padding-bottom: clamp(50px, 6vw, 90px); display: grid; gap: 24px; max-width: 760px; }
.liste-notifs-page li { padding: 16px 0; }
.recherche-page { max-width: 640px; }
.resultats-page { padding-bottom: 60px; max-width: 820px; }
.erreur { min-height: calc(100svh - var(--entete) - var(--barre)); display: grid; gap: 30px; align-items: center; justify-items: center; padding-block: 40px; text-align: center; }
.erreur-anneau { position: relative; width: min(60vw, 300px); }
.erreur-embleme { width: 100%; height: auto; overflow: visible; opacity: .9; }
.erreur-anneau span { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 2.2rem; background: #fff; padding: 0 .3em; color: var(--vermillon-fonce); }
.erreur-texte p { color: var(--encre-2); max-width: 30em; margin-inline: auto; }
.erreur-liens { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 16px; }
@media (min-width: 900px) { .erreur { grid-template-columns: auto minmax(0, 1fr); text-align: left; justify-items: start; } .erreur-texte p { margin-inline: 0; } .erreur-liens { justify-content: flex-start; } }
.panier-recap { display: grid; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--filet); padding: 0 14px; }
.panier-recap .ligne-panier:last-child { border-bottom: 0; }
.parcours .vide { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 40px 0; }
.parcours .vide[hidden] { display: none; }
.vide-ic { width: 56px; height: 56px; color: var(--gris-clair); }
.resultat-diag-tete { display: grid; gap: 4px; padding-top: 10px; }
.resultat-diag-mention { color: var(--gris); font-size: .92rem; }
.contenu { overflow-x: clip; }
@media (max-width: 699px) {
  .tresse-mots { position: static; grid-template-columns: 1fr; justify-items: center; gap: 2px; padding-top: 14px; }
  .mot { font-size: 2.1rem; background: none; padding: 0; }
}
.certificat-form .bouton, .suivi-form .bouton { justify-self: center; width: auto; }

.retrait-lieu { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--ocre-pale); color: var(--encre); font-weight: 600; }
.retrait-lieu .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--vermillon-fonce); }