/* ==========================================================================
   ProGestion MTL — feuille de style unique
   ---------------------------------------------------------------------------
   IMAGE DE MARQUE CENTRALISÉE : tout le design découle des variables ci-dessous.
   Les valeurs du commerce viennent de config.json (panneau « Ma vitrine »)
   et sont appliquées par js/app.js :
     • couleur principale  → --primaire       (config : code_couleur_primary)
     • couleur secondaire  → --accent-rgb     (config : theme.couleur_secondaire)
     • fond / ambiance     → data-ambiance    (config : theme.ambiance = nuit | creme)
     • police des titres   → data-titres      (config : theme.police_titres = moderne | elegante)
     • habillage           → data-decor       (config : theme.decor = "" | dentelle)
     • logo, icône d'onglet → config : logo_url, favicon_url
   ========================================================================== */

/* ---------- Polices (licence OFL, servies localement : aucun appel externe) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Jetons de design : ambiance « nuit » (par défaut, sombre néon) ---------- */
:root {
  color-scheme: dark;
  /* Image de marque (remplacée par app.js) */
  --primaire: #f59e0b;
  --primaire-rgb: 245, 158, 11;
  --primaire-texte: #f59e0b;      /* la couleur principale, ajustée pour rester lisible en texte */
  --accent-rgb: 139, 92, 246;      /* couleur secondaire */
  --accent-texte: #a78bfa;
  --sur-primaire: #0b0b10;
  --police: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titres: var(--police);
  --titres-poids: 750;
  --titres-poids-h1: 800;
  --titres-espacement: -0.025em;
  --titres-espacement-h1: -0.045em;
  --titres-interligne: 1.12;
  --h1-taille: clamp(2.3rem, 5.6vw, 4.6rem);
  --h2-taille: clamp(1.75rem, 3.4vw, 2.6rem);
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* Ambiance */
  --fond: #06070b;
  --fond-rgb: 6, 7, 11;
  --fond-2: #0b0d14;
  --encre-rgb: 255, 255, 255;      /* voiles et bordures : clairs sur fond sombre */
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.1);
  --bord: rgba(255, 255, 255, 0.08);
  --bord-fort: rgba(255, 255, 255, 0.15);
  --bord-survol: rgba(255, 255, 255, 0.3);
  --texte: #f4f5f8;
  --texte-2: #b4b7c5;
  --texte-3: #7e8294;
  --carte-fond: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
  --verre: rgba(13, 15, 22, 0.8);
  --bulle: rgba(18, 20, 30, 0.95);
  --modale: linear-gradient(180deg, #121420, #0b0d14);
  --voile-modale: rgba(3, 4, 8, 0.74);
  --champ-fond: rgba(255, 255, 255, 0.04);
  --champ-focus: rgba(255, 255, 255, 0.06);
  --creux: rgba(0, 0, 0, 0.35);
  --grille-decor: rgba(255, 255, 255, 0.035);
  --halo-1: 0.22;
  --halo-2: 0.15;
  --ombre: 0 24px 70px -28px rgba(0, 0, 0, 0.85);
  --degrade-depart: #ffffff;
  --orbe-reflet: rgba(255, 255, 255, 0.2);
  --orbe-fond: rgba(10, 11, 18, 0.96);
  --filtre-carte: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.85) saturate(0.35);
  --chargement: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M21 12a9 9 0 1 1-6.2-8.56'/%3E%3C/svg%3E");

  /* États (réservés aux statuts, jamais aux séries de données) */
  --succes: #22c55e; --succes-rgb: 34, 197, 94;
  --danger: #f43f5e; --danger-rgb: 244, 63, 94;
  --alerte: #fbbf24; --alerte-rgb: 251, 191, 36;
  --info: #38bdf8; --info-rgb: 56, 189, 248;
  --txt-succes: #86efac; --txt-danger: #fda4af; --txt-alerte: #fcd34d; --txt-info: #7dd3fc;

  /* Graphiques (palette validée daltonisme + contraste pour ce fond) */
  --serie-fideles: #3987e5;
  --serie-nouveaux: #5d6273;
  --grille-axe: rgba(255, 255, 255, 0.07);

  --rayon: 20px;
  --rayon-sm: 12px;
  --rayon-lg: 28px;
  --lueur: 0 0 0 1px rgba(var(--primaire-rgb), 0.5), 0 12px 40px -12px rgba(var(--primaire-rgb), 0.7);
  --largeur: 1180px;
  --vite: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Ambiance « crème » (claire et élégante) ---------- */
/* Palette beauté / lissage : blanc, crème #FDFBF7, beige satiné #E6D5C3 / #D4C2AD, texte #2C2A29 */
:root[data-ambiance="creme"] {
  color-scheme: light;
  --fond: #fdfbf7;
  --fond-rgb: 253, 251, 247;
  --fond-2: #f6efe6;
  --encre-rgb: 44, 42, 41;
  --surface: rgba(255, 255, 255, 0.7);
  --surface-2: #ffffff;
  --surface-3: rgba(212, 194, 173, 0.28);
  --bord: rgba(212, 194, 173, 0.45);
  --bord-fort: #d4c2ad;
  --bord-survol: #b9a58c;
  --texte: #2c2a29;
  --texte-2: #5d5853;
  --texte-3: #7d766f;
  --carte-fond: #ffffff;
  --verre: rgba(255, 255, 255, 0.88);
  --bulle: rgba(255, 255, 255, 0.98);
  --modale: linear-gradient(180deg, #ffffff, #fdfbf7);
  --voile-modale: rgba(44, 42, 41, 0.32);
  --champ-fond: #ffffff;
  --champ-focus: #ffffff;
  --creux: rgba(230, 213, 195, 0.3);
  --grille-decor: rgba(212, 194, 173, 0.0);
  --halo-1: 0.1;
  --halo-2: 0.08;
  --ombre: 0 4px 30px rgba(0, 0, 0, 0.04);
  --degrade-depart: #2c2a29;
  --orbe-reflet: rgba(255, 255, 255, 0.9);
  --orbe-fond: rgba(255, 250, 246, 0.96);
  --filtre-carte: saturate(0.6) sepia(0.12) brightness(1.02);
  --chargement: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%233a2d31' stroke-width='2'%3E%3Cpath d='M21 12a9 9 0 1 1-6.2-8.56'/%3E%3C/svg%3E");
  --txt-succes: #166534; --txt-danger: #9f1239; --txt-alerte: #92400e; --txt-info: #075985;
  --serie-fideles: #2a78d6;
  --serie-nouveaux: #8a8590;
  --grille-axe: rgba(76, 60, 64, 0.1);
}

/* Finitions propres à l'ambiance claire : navigation blanche à ombre très légère, transitions douces */
:root[data-ambiance="creme"] .nav { background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02); border-bottom-color: transparent; }
:root[data-ambiance="creme"] .btn { transition: all 0.3s ease-in-out; }
:root[data-ambiance="creme"] .btn-primaire { box-shadow: 0 8px 24px -14px rgba(var(--primaire-rgb), 0.9); }
:root[data-ambiance="creme"] .btn-primaire:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 12px 28px -14px rgba(var(--primaire-rgb), 1); }
:root[data-ambiance="creme"] .carte-service, :root[data-ambiance="creme"] .panneau, :root[data-ambiance="creme"] .kpi { border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03); }
:root[data-ambiance="creme"] .carte-service { padding: 1.75rem; }
:root[data-ambiance="creme"] .carte-service .prix { color: var(--primaire-texte); }
:root[data-ambiance="creme"] .orbe::before { opacity: 0.25; }
:root[data-ambiance="creme"] .surtitre::before { box-shadow: none; }

/* ---------- Police des titres « élégante » (serif) ---------- */
:root[data-titres="elegante"] {
  --police-titres: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --titres-poids: 600;
  --titres-poids-h1: 600;
  --titres-espacement: -0.005em;
  --titres-espacement-h1: -0.015em;
  --titres-interligne: 1.04;
  --h1-taille: clamp(2.6rem, 6.2vw, 5.2rem);
  --h2-taille: clamp(2rem, 3.8vw, 2.9rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  word-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: var(--titres-espacement); font-weight: var(--titres-poids); word-spacing: 0.08em; }
h1, h2 { font-family: var(--police-titres); line-height: var(--titres-interligne); }
h1 { font-size: var(--h1-taille); letter-spacing: var(--titres-espacement-h1); font-weight: var(--titres-poids-h1); }
h2 { font-size: var(--h2-taille); }
h3 { font-size: 1.15rem; letter-spacing: -0.015em; font-weight: 750; }
::selection { background: rgba(var(--primaire-rgb), 0.35); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid rgba(var(--primaire-rgb), 0.9); outline-offset: 3px; }
.ic { display: inline-flex; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Le contenu apparaît en fondu quand la configuration est chargée */
.attente-config main, .attente-config .nav, .attente-config .pied { opacity: 0; }
main, .nav, .pied { transition: opacity 0.45s ease; }

/* ---------- Décor (halos + grille) ---------- */
.decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.decor::before, .decor::after { content: ""; position: absolute; border-radius: 50%; }
.decor::before {
  width: 75vmax; height: 75vmax; left: -25vmax; top: -42vmax;
  background: radial-gradient(circle, rgba(var(--primaire-rgb), var(--halo-1)), transparent 62%);
}
.decor::after {
  width: 65vmax; height: 65vmax; right: -30vmax; top: -12vmax;
  background: radial-gradient(circle, rgba(var(--accent-rgb), var(--halo-2)), transparent 62%);
}
.decor .grille {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--grille-decor) 1px, transparent 1px), linear-gradient(90deg, var(--grille-decor) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 85% 55% at 50% 0%, #000 25%, transparent 75%);
}

/* ---------- Mise en page ---------- */
.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-tete { display: grid; gap: 0.75rem; margin-bottom: 2rem; max-width: 680px; }
.section-tete p { color: var(--texte-2); font-size: 1.04rem; }
.surtitre {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primaire-texte);
}
.surtitre::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.texte-degrade {
  background: linear-gradient(100deg, var(--degrade-depart) 0%, var(--degrade-depart) 30%, var(--primaire-texte) 70%, var(--accent-texte) 110%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.muet { color: var(--texte-2); }
.petit { font-size: 0.84rem; color: var(--texte-3); }
.mono { font-family: var(--mono); }

/* ---------- Boutons ---------- */
.btn {
  --b-fond: var(--surface-2); --b-texte: var(--texte); --b-bord: var(--bord-fort);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.7rem 1.25rem;
  border-radius: 999px; border: 1px solid var(--b-bord); background: var(--b-fond); color: var(--b-texte);
  font: inherit; font-size: 0.95rem; font-weight: 650; line-height: 1; white-space: nowrap;
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--vite), box-shadow var(--vite), background var(--vite), border-color var(--vite), opacity var(--vite);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); border-color: var(--bord-survol); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primaire {
  --b-fond: var(--primaire); --b-texte: var(--sur-primaire); --b-bord: transparent;
  box-shadow: 0 10px 30px -10px rgba(var(--primaire-rgb), 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primaire:hover {
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(var(--primaire-rgb), 0.18), 0 16px 44px -10px rgba(var(--primaire-rgb), 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-fantome { --b-fond: transparent; }
.btn-succes {
  --b-fond: var(--succes); --b-texte: #03140a; --b-bord: transparent;
  box-shadow: 0 10px 28px -12px rgba(var(--succes-rgb), 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-succes:hover { border-color: transparent; box-shadow: 0 0 0 4px rgba(var(--succes-rgb), 0.18), 0 14px 36px -10px rgba(var(--succes-rgb), 0.95); }
.btn-danger { --b-fond: rgba(var(--danger-rgb), 0.1); --b-texte: var(--txt-danger); --b-bord: rgba(var(--danger-rgb), 0.38); }
.btn-danger:hover { --b-fond: rgba(var(--danger-rgb), 0.18); border-color: rgba(var(--danger-rgb), 0.6); }
.btn-sm { min-height: 36px; padding: 0.5rem 0.95rem; font-size: 0.86rem; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-lg { min-height: 54px; padding: 0.95rem 1.7rem; font-size: 1.02rem; }
.btn-bloc { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.btn-icone { width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: 12px; }
.btn-icone.btn-sm { width: 34px; height: 34px; min-height: 34px; border-radius: 10px; }
.btn .rotation { animation: rotation 0.8s linear infinite; }
.lien-action {
  background: none; border: 0; padding: 0; color: var(--texte-3); font: inherit; font-size: 0.82rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bord-fort);
}
.lien-action:hover { color: var(--texte); }
.lien-action.danger:hover { color: var(--txt-danger); }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.champ { display: grid; gap: 0.4rem; min-width: 0; align-content: start; }
.champ > span, .champ > label { font-size: 0.84rem; font-weight: 650; color: var(--texte-2); }
.champ .aide { font-size: 0.78rem; color: var(--texte-3); font-weight: 500; }
.saisie, .formulaire input[type="text"], .formulaire input[type="tel"], .formulaire input[type="email"],
.formulaire input[type="password"], .formulaire input[type="number"], .formulaire input[type="url"],
.formulaire input[type="date"], .formulaire input[type="time"], .formulaire input[type="search"],
.formulaire select, .formulaire textarea {
  width: 100%; min-height: 46px; padding: 0.7rem 0.9rem;
  background: var(--champ-fond); border: 1px solid var(--bord-fort); border-radius: 12px;
  color: var(--texte); font: inherit; font-size: 16px; line-height: 1.4;
  transition: border-color var(--vite), box-shadow var(--vite), background var(--vite);
}
.formulaire textarea { min-height: 110px; resize: vertical; }
.formulaire select {
  appearance: none; padding-right: 2.2rem; background-repeat: no-repeat; background-size: 5px 5px;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-2) 50%), linear-gradient(135deg, var(--texte-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
}
.formulaire select option { background: var(--fond-2); color: var(--texte); }
.saisie::placeholder, .formulaire ::placeholder { color: var(--texte-3); }
.saisie:focus, .formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
  outline: none; border-color: rgba(var(--primaire-rgb), 0.85);
  box-shadow: 0 0 0 4px rgba(var(--primaire-rgb), 0.16); background-color: var(--champ-focus);
}
.formulaire input[aria-invalid="true"] { border-color: rgba(var(--danger-rgb), 0.8); box-shadow: 0 0 0 4px rgba(var(--danger-rgb), 0.14); }
.formulaire input[type="color"] { width: 54px; height: 46px; padding: 4px; border-radius: 12px; border: 1px solid var(--bord-fort); background: transparent; cursor: pointer; }
.rangee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.rangee-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rangee-action { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.rangee-action input { flex: 1 1 220px; }
.message-erreur { color: var(--txt-danger); font-size: 0.86rem; font-weight: 600; }

/* Interrupteur */
.interrupteur { position: relative; display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; font-weight: 650; }
.interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interrupteur .piste {
  position: relative; flex: none; width: 50px; height: 30px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--bord-fort); transition: background var(--vite), box-shadow var(--vite);
}
.interrupteur .piste::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform var(--vite);
}
.interrupteur input:checked + .piste { background: var(--succes); border-color: transparent; box-shadow: 0 0 22px -4px rgba(var(--succes-rgb), 0.9); }
.interrupteur input:checked + .piste::after { transform: translateX(20px); }
.interrupteur input:focus-visible + .piste { outline: 2px solid rgba(var(--primaire-rgb), 0.9); outline-offset: 2px; }
.case { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font-size: 0.92rem; color: var(--texte-2); }
.case input { width: 18px; height: 18px; accent-color: var(--primaire); }

/* ---------- Surfaces ---------- */
.carte { position: relative; padding: 1.5rem; border-radius: var(--rayon); background: var(--carte-fond); border: 1px solid var(--bord); box-shadow: var(--ombre); }
.carte-verre { background: var(--verre); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* Badges de statut (toujours avec un libellé : jamais la couleur seule) */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.65rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 750; letter-spacing: 0.01em; border: 1px solid; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.badge-bloque { color: var(--txt-alerte); background: rgba(var(--alerte-rgb), 0.12); border-color: rgba(var(--alerte-rgb), 0.4); }
.badge-declare { color: var(--txt-info); background: rgba(var(--info-rgb), 0.12); border-color: rgba(var(--info-rgb), 0.4); }
.badge-confirme { color: var(--txt-succes); background: rgba(var(--succes-rgb), 0.12); border-color: rgba(var(--succes-rgb), 0.4); }
.badge-termine { color: var(--texte-3); background: var(--surface); border-color: var(--bord); }
.badge-termine::before { box-shadow: none; }
.badge-neutre { color: var(--texte-2); background: var(--surface); border-color: var(--bord-fort); }
.badge-neutre::before { display: none; }

/* Pastille d'état (ouvert / fermé) */
.pastille {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  border-radius: 999px; border: 1px solid var(--bord-fort); background: var(--surface);
  font-size: 0.85rem; font-weight: 600; color: var(--texte-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pastille .point { width: 8px; height: 8px; border-radius: 50%; background: var(--texte-3); }
.pastille.ouvert .point { background: var(--succes); animation: pulsation 2s infinite; }
.pastille.ferme .point { background: var(--danger); }
.pastille.bientot .point { background: rgb(var(--accent-rgb)); animation: pulsation 2s infinite; }
.pastille strong { color: var(--texte); }

/* Puces de filtre */
.puces { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.puce {
  padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--bord-fort); background: transparent;
  color: var(--texte-2); font: inherit; font-size: 0.88rem; font-weight: 650; cursor: pointer; transition: all var(--vite);
}
.puce:hover { color: var(--texte); border-color: var(--bord-survol); }
.puce[aria-pressed="true"] { background: rgba(var(--primaire-rgb), 0.14); border-color: rgba(var(--primaire-rgb), 0.6); color: var(--texte); }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(var(--fond-rgb), 0.74); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--bord);
}
.nav-int { display: flex; align-items: center; gap: 1.5rem; min-height: 70px; }
.marque { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 800; letter-spacing: -0.02em; font-size: 1.08rem; min-width: 0; }
.marque-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-titres="elegante"] .marque-nom { font-family: var(--police-titres); font-weight: 700; font-size: 1.3em; letter-spacing: 0; }
.marque-logo { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; overflow: hidden; }
.marque-logo img { width: 100%; height: 100%; object-fit: contain; }
.monogramme {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(140deg, rgb(var(--primaire-rgb)), rgb(var(--accent-rgb)));
  color: var(--sur-primaire); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 0 22px -4px rgba(var(--primaire-rgb), 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.nav-liens { display: flex; gap: 0.25rem; margin-left: auto; }
.nav-liens a { padding: 0.5rem 0.85rem; border-radius: 999px; color: var(--texte-2); font-size: 0.92rem; font-weight: 600; transition: color var(--vite), background var(--vite); }
.nav-liens a:hover { color: var(--texte); background: var(--surface-2); }
.nav-int > .btn { margin-left: auto; }
.nav-liens + .btn { margin-left: 0.5rem; }
.nav-liens a[aria-current="page"] { color: var(--texte); background: var(--surface-2); }
.nav-int > .nav-menu-bouton { display: none; margin-left: 0; flex: none; }
.nav-panneau { display: grid; gap: 0.15rem; padding: 0.6rem clamp(16px, 4vw, 32px) 1rem; border-top: 1px solid var(--bord); }
.nav-panneau[hidden], .nav-liens a[hidden], .pied-liens a[hidden] { display: none; }
.nav-panneau a { padding: 0.75rem 0.5rem; border-radius: 8px; color: var(--texte-2); font-weight: 600; }
.nav-panneau a[aria-current="page"] { color: var(--texte); background: var(--surface-2); }
.pied-liens { flex-wrap: wrap; }

/* ---------- Vitrine : héros ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem); }
.hero-texte { display: grid; gap: 1.5rem; justify-items: start; }
.hero-titre { overflow-wrap: anywhere; }
.hero-slogan { font-size: clamp(1.06rem, 1.6vw, 1.25rem); color: var(--texte-2); max-width: 34ch; }
.hero-signature { font-family: var(--police-titres); font-style: italic; color: var(--texte-2); }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.atouts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0.3rem 0 0; padding: 0; list-style: none; color: var(--texte-2); font-size: 0.9rem; font-weight: 600; }
.atouts li { display: inline-flex; align-items: center; gap: 0.45rem; }
.atouts svg { width: 17px; height: 17px; color: var(--primaire-texte); }
.hero-visuel { position: relative; }
.hero { overflow-x: clip; } /* les anneaux décoratifs ne doivent pas élargir la page sur téléphone */
.hero-cadre { position: relative; aspect-ratio: 4 / 5; border-radius: 32px; overflow: hidden; border: 1px solid var(--bord-fort); box-shadow: 0 50px 120px -50px rgba(var(--primaire-rgb), 0.75); }
.hero-cadre img { width: 100%; height: 100%; object-fit: cover; }
.hero-cadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(var(--fond-rgb), 0.5)); }

.orbe { position: relative; width: min(100%, 470px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.orbe::before {
  content: ""; position: absolute; inset: 4%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(var(--primaire-rgb), 0.95), rgba(var(--accent-rgb), 0.95), transparent 72%);
  filter: blur(34px); opacity: 0.55; animation: rotation 16s linear infinite;
}
.orbe-anneau {
  position: absolute; inset: 9%; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 90deg, rgb(var(--primaire-rgb)), rgb(var(--accent-rgb)), transparent 50%, rgb(var(--primaire-rgb)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: rotation 10s linear infinite;
}
.orbe-anneau.lent { inset: 2%; opacity: 0.35; animation-duration: 26s; animation-direction: reverse; }
.orbe-coeur {
  position: relative; width: 64%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 26%, var(--orbe-reflet), transparent 38%),
    radial-gradient(circle at 50% 62%, rgba(var(--primaire-rgb), 0.38), var(--orbe-fond) 72%);
  border: 1px solid var(--bord-fort);
  box-shadow: inset 0 0 70px rgba(var(--primaire-rgb), 0.35), 0 40px 90px -30px rgba(var(--primaire-rgb), 0.85);
}
.orbe-lettre {
  font-family: var(--police-titres); font-size: clamp(4.5rem, 13vw, 8.5rem); font-weight: 800; letter-spacing: -0.06em; line-height: 1;
  background: linear-gradient(160deg, var(--degrade-depart) 20%, var(--primaire-texte)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(var(--primaire-rgb), 0.45));
}
:root[data-titres="elegante"] .orbe-lettre { font-weight: 600; letter-spacing: 0; }
.flottant {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem 0.8rem 0.8rem;
  border-radius: 18px; background: var(--verre); border: 1px solid var(--bord-fort);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--ombre);
  font-size: 0.84rem; line-height: 1.35; animation: flotte 7s ease-in-out infinite; max-width: 250px;
}
.flottant .icone-rond { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--primaire-rgb), 0.16); color: var(--primaire-texte); }
.flottant .icone-rond svg { width: 19px; height: 19px; }
.flottant strong { display: block; font-size: 0.93rem; color: var(--texte); }
.flottant small { color: var(--texte-3); font-size: 0.78rem; }
.flottant-1 { left: -3%; bottom: 12%; }
.flottant-2 { right: -2%; top: 10%; animation-delay: -3.5s; }

/* ---------- Vitrine : services ---------- */
.grille-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); gap: 1rem; }
.carte-service {
  position: relative; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.45rem; border-radius: var(--rayon); overflow: hidden;
  background: var(--carte-fond); border: 1px solid var(--bord);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.carte-service::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(420px 140px at 50% -10%, rgba(var(--primaire-rgb), 0.22), transparent 70%);
}
.carte-service:hover { transform: translateY(-3px); border-color: rgba(var(--primaire-rgb), 0.38); box-shadow: 0 26px 60px -32px rgba(var(--primaire-rgb), 0.65); }
.carte-service:hover::before { opacity: 1; }
.carte-service .categorie { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--texte-3); font-weight: 750; }
.carte-service h3 { font-size: 1.12rem; }
.carte-service .description { color: var(--texte-2); font-size: 0.93rem; flex: 1; }
.sous-titre-soin { color: var(--primaire-texte); font-size: 0.9rem; font-style: italic; }
.carte-service .bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--bord); }
.prix { font-size: 1.32rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.duree { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.83rem; color: var(--texte-2); font-weight: 600; }
.duree svg { width: 15px; height: 15px; }
.bandeau-acompte { display: flex; gap: 0.75rem; align-items: center; padding: 0.85rem 1rem; border-radius: 16px; margin-bottom: 1.25rem; background: rgba(var(--primaire-rgb), 0.08); border: 1px solid rgba(var(--primaire-rgb), 0.35); color: var(--texte-2); font-size: 0.92rem; }
.bandeau-acompte svg { width: 20px; height: 20px; flex: none; color: var(--primaire-texte); }
.bandeau-acompte strong { color: var(--texte); }

/* ---------- Vitrine : à propos, galerie, contact ---------- */
.apropos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.apropos-photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--rayon-lg); overflow: hidden; border: 1px solid var(--bord-fort);
  background: radial-gradient(circle at 30% 20%, rgba(var(--primaire-rgb), 0.35), transparent 55%), radial-gradient(circle at 80% 90%, rgba(var(--accent-rgb), 0.3), transparent 55%), var(--fond-2);
  box-shadow: 0 40px 100px -45px rgba(var(--primaire-rgb), 0.7);
}
.apropos-photo img { width: 100%; height: 100%; object-fit: cover; }
.apropos-photo .orbe-lettre { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(6rem, 16vw, 10rem); }
.texte-histoire { display: grid; gap: 1rem; color: var(--texte-2); font-size: 1.05rem; margin-top: 1.25rem; }
.chiffres { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.75rem; }
.chiffres div { display: grid; }
.chiffres strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; color: var(--texte); }
.chiffres span { font-size: 0.84rem; color: var(--texte-3); }

.grille-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0.75rem; }
.grille-galerie button { aspect-ratio: 1; padding: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--bord); background: var(--surface); cursor: zoom-in; }
.grille-galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.grille-galerie button:hover img { transform: scale(1.05); }

/* ---------- Vitrine : avant / après (comparateur relié à un service) ---------- */
.grille-avant-apres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; }
.carte-avant-apres {
  display: flex; flex-direction: column; border-radius: var(--rayon); overflow: hidden;
  background: var(--carte-fond); border: 1px solid var(--bord);
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.carte-avant-apres:hover { border-color: rgba(var(--primaire-rgb), 0.38); box-shadow: 0 26px 60px -32px rgba(var(--primaire-rgb), 0.55); }
.comparateur {
  --position: 50%;
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fond-2);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comparateur-apres { clip-path: inset(0 0 0 var(--position)); }
.comparateur-etiquette {
  position: absolute; top: 0.85rem; padding: 0.3rem 0.7rem; border-radius: 999px; pointer-events: none;
  font-size: 0.7rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.88); color: #2c2a29; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.comparateur-etiquette.avant { left: 0.85rem; }
.comparateur-etiquette.apres { right: 0.85rem; }
.comparateur-ligne {
  position: absolute; top: 0; bottom: 0; left: var(--position); width: 2px; transform: translateX(-1px);
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); pointer-events: none;
}
.comparateur-poignee {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: #ffffff; color: #2c2a29; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s ease-in-out;
}
.comparateur-poignee svg { width: 16px; height: 16px; margin: 0 -2px; }
.comparateur:hover .comparateur-poignee { transform: translate(-50%, -50%) scale(1.06); }
.comparateur:has(.comparateur-curseur:focus-visible) .comparateur-poignee { outline: 2px solid rgba(var(--primaire-rgb), 0.9); outline-offset: 3px; }
.carte-avant-apres .corps { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem 1.45rem 1.5rem; flex: 1; }
.carte-avant-apres .categorie { font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--texte-3); font-weight: 750; }
.carte-avant-apres h3 { font-size: 1.15rem; }
.carte-avant-apres .legende { color: var(--texte); font-size: 0.95rem; font-style: italic; padding-left: 0.8rem; border-left: 2px solid rgba(var(--primaire-rgb), 0.55); }
.carte-avant-apres .description { color: var(--texte-2); font-size: 0.93rem; flex: 1; }
.carte-avant-apres .bas { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--bord); }
.carte-avant-apres > .corps > .btn { align-self: flex-start; }

.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem; align-items: stretch; }
.carte-infos { display: grid; gap: 1.4rem; align-content: start; }
.info-ligne { display: flex; gap: 0.85rem; align-items: flex-start; color: var(--texte-2); }
.info-ligne svg { width: 20px; height: 20px; flex: none; margin-top: 0.15rem; color: var(--primaire-texte); }
.info-ligne a:hover { color: var(--texte); }
.info-adresse { display: inline-flex; align-items: center; gap: 0.35rem; }
.info-adresse svg { width: 15px; height: 15px; }
.horaires { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.horaires td { padding: 0.48rem 0; border-bottom: 1px dashed var(--bord); }
.horaires td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--texte-2); }
.horaires tr:last-child td { border-bottom: 0; }
.horaires tr.aujourdhui td { color: var(--texte); font-weight: 750; }
.horaires tr.aujourdhui td:first-child::after { content: "Aujourd'hui"; margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.68rem; background: rgba(var(--primaire-rgb), 0.16); color: var(--primaire-texte); vertical-align: 1px; }
.reseaux { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.carte-map {
  position: relative; min-height: 400px; border-radius: var(--rayon-lg); overflow: hidden; border: 1px solid var(--bord-fort);
  background: radial-gradient(circle at 50% 45%, rgba(var(--primaire-rgb), 0.18), transparent 50%), var(--fond-2);
}
.carte-map.leaflet-container { background-color: var(--fond-2); font-family: var(--police); }
.carte-map .leaflet-tile-pane { filter: var(--filtre-carte); }
.carte-map .leaflet-control-attribution { background: var(--verre); color: var(--texte-3); font-size: 10px; }
.carte-map .leaflet-control-attribution a { color: var(--texte-2); }
.carte-map .leaflet-bar a { background: var(--bulle); color: var(--texte); border-color: var(--bord-fort); }
.carte-map .leaflet-bar a:hover { background: var(--fond-2); }
.contact-carte { display: grid; gap: 0.9rem; min-width: 0; grid-template-rows: 1fr auto; }
.itineraire { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; flex-wrap: wrap; }
.epingle { position: relative; display: block; width: 72px; height: 90px; }
.epingle-halo { position: absolute; left: 50%; bottom: -5px; width: 22px; height: 10px; margin-left: -11px; border-radius: 50%; background: rgba(var(--primaire-rgb), 0.35); animation: epingle-pouls 2.6s ease-out infinite; }
.epingle-goutte { position: absolute; left: 5px; top: 0; width: 62px; height: 62px; border-radius: 50% 50% 50% 0; background: var(--primaire); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.45); transform: rotate(-45deg); }
.epingle-medaillon { position: absolute; left: 11px; top: 6px; width: 50px; height: 50px; border: 3px solid var(--fond); display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--fond); color: var(--primaire-texte); font-family: var(--police-titres); font-size: 1.3rem; font-weight: 600; }
.carte-map .epingle-medaillon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Leaflet laisse sinon les images déborder */
@keyframes epingle-pouls { from { transform: scale(0.7); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
.carte-map .leaflet-popup-content-wrapper { border-radius: var(--rayon-sm); background: var(--bulle); color: var(--texte); box-shadow: var(--ombre); }
.carte-map .leaflet-popup-tip { background: var(--bulle); }
.carte-map .leaflet-popup-content { margin: 0.9rem 1.1rem; font-family: var(--police); font-size: 0.86rem; line-height: 1.45; }
.bulle-carte { display: grid; gap: 0.3rem; justify-items: start; }
.bulle-carte strong { font-family: var(--police-titres); font-size: 1.15rem; font-weight: 600; }
.bulle-carte .btn { margin-top: 0.4rem; }
.carte-map .bulle-carte a.btn { color: var(--sur-primaire); }
.marqueur-neon { width: 22px; height: 22px; border-radius: 50%; background: var(--primaire); border: 3px solid #fff; box-shadow: 0 0 0 7px rgba(var(--primaire-rgb), 0.28), 0 0 34px 8px rgba(var(--primaire-rgb), 0.85); }
.carte-repli { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; gap: 1rem; }
.carte-repli .marqueur-neon { margin: 0 auto 1rem; }

.cta-final {
  position: relative; overflow: hidden; display: grid; justify-items: center; gap: 1.2rem; text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; margin-block: 2rem clamp(4rem, 8vw, 6rem); border-radius: 32px; border: 1px solid var(--bord-fort);
  background: radial-gradient(600px 220px at 50% 0%, rgba(var(--primaire-rgb), 0.28), transparent 70%), var(--carte-fond);
}
.cta-final p { color: var(--texte-2); max-width: 46ch; }

/* Marques : bande au-dessus du pied de page, description sur la page Soins */
.bande-marques { margin-top: clamp(2.5rem, 6vw, 4rem); padding-block: 1.75rem; border-top: 1px solid var(--bord); text-align: center; }
.bande-marques .surtitre { justify-content: center; margin-bottom: 1rem; }
.bande-marques ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.25rem clamp(2rem, 7vw, 5rem); margin: 0; padding: 0; list-style: none; }
.bande-marques a { display: block; color: var(--texte-2); font-weight: 650; }
.bande-marques img { width: auto; height: clamp(30px, 4vw, 38px); opacity: 0.82; transition: opacity var(--vite); }
.bande-marques a:hover img { opacity: 1; }
.grille-marques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; }
.carte-marque { display: grid; gap: 0.8rem; justify-items: center; align-content: start; padding: 2rem 1.75rem; text-align: center; border-radius: var(--rayon-lg); border: 1px solid var(--bord); background: var(--carte-fond); box-shadow: var(--ombre); }
.carte-marque img { width: auto; max-width: 100%; height: 46px; }
.carte-marque p { color: var(--texte-2); }
.carte-marque a { color: var(--primaire-texte); font-weight: 650; font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; }
.lien-marques { margin-top: 1rem; color: var(--texte-2); }
.lien-marques a { color: var(--primaire-texte); text-decoration: underline; text-underline-offset: 3px; }
.ligne-liste .logo-marque { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ligne-liste .logo-marque img { height: 34px; width: auto; max-width: 150px; }
.pied { border-top: 1px solid var(--bord); padding-block: 2rem 2.5rem; color: var(--texte-3); font-size: 0.86rem; }
.pied-int { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pied-liens { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.pied a:hover { color: var(--texte); }
/* Instagram : glyphe en une couleur, jamais déformé, toujours avec le nom */
.lien-instagram { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--texte); font-weight: 600; text-decoration: none; }
.glyphe-instagram { flex: none; width: 1.25em; height: 1.25em; }
.lien-instagram.grand { min-height: 44px; font-size: 1.2rem; }
.lien-instagram.grand .glyphe-instagram { width: 28px; height: 28px; }
.lien-instagram span { overflow-wrap: anywhere; }
.horaires-resume { margin-bottom: 0.5rem; font-weight: 600; }
.bloc-instagram p { color: var(--texte-2); font-size: 0.93rem; }
.pied-liens [data-instagram] { display: inline-flex; }
.pied .lien-instagram { color: var(--texte); min-height: 44px; }

.barre-mobile { display: none; }

/* ---------- Vitrine : contenus facultatifs (annonce, ouverture, déroulé, citation, FAQ) ---------- */
.annonce {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.6rem 16px;
  background: var(--primaire); color: var(--sur-primaire); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-align: center;
}
.annonce .fleche svg { width: 15px; height: 15px; transition: transform var(--vite); }
.annonce:hover .fleche svg { transform: translateX(3px); }
.accroche { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--texte-2); }
.hero-titre em { font-style: italic; color: var(--accent-texte); }

.ouverture { padding-block: clamp(1rem, 3vw, 2rem); }
.ouverture-contenu { display: contents; }
.ouverture-suite { display: none; }
.ouverture-cadre {
  position: relative; display: grid; justify-items: center; gap: 1rem; text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem); border-radius: var(--rayon-lg);
  background: radial-gradient(500px 200px at 50% 0%, rgba(var(--primaire-rgb), 0.12), transparent 70%), var(--carte-fond);
  border: 1px solid var(--bord-fort);
}
.ouverture-date { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; color: var(--texte-2); }
.ouverture-cadre h2 { max-width: 22ch; }
.ouverture-texte { color: var(--texte-2); max-width: 54ch; }
.ouverture-cadre .btn { white-space: normal; text-align: center; line-height: 1.35; }
.decompte { display: flex; align-items: baseline; gap: 0.6rem; color: var(--texte-2); font-size: 0.9rem; }
.decompte strong { font-family: var(--police-titres); font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--texte); }

.section-tete.centre { margin-inline: auto; text-align: center; justify-items: center; }
.etapes-visite { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; counter-reset: etape; }
.etapes-visite li { display: grid; gap: 0.6rem; align-content: start; padding: 1.75rem 1.5rem; border-radius: var(--rayon); background: var(--carte-fond); border: 1px solid var(--bord); }
.etapes-visite .numero { font-family: var(--police-titres); font-size: 2.2rem; line-height: 1; color: var(--primaire-texte); }
.etapes-visite h3 { font-size: 1.15rem; }
.etapes-visite p { color: var(--texte-2); font-size: 0.95rem; }

.citation { padding-block: clamp(2rem, 5vw, 3.5rem); }
.citation figure { margin: 0; display: grid; justify-items: center; gap: 1.25rem; text-align: center; }
.citation-image { width: min(100%, 520px); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.citation-image img { width: 100%; height: auto; }
.citation blockquote { margin: 0; max-width: 30ch; font-family: var(--police-titres); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.25; }
.citation figcaption { color: var(--texte-3); font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; }

.faq { display: grid; max-width: 820px; margin-inline: auto; border-top: 1px solid var(--bord-fort); }
.faq details { border-bottom: 1px solid var(--bord-fort); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0.25rem;
  cursor: pointer; list-style: none; font-weight: 650; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .signe { position: relative; width: 14px; height: 14px; flex: none; }
.faq .signe::before, .faq .signe::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform var(--vite); }
.faq .signe::after { transform: rotate(90deg); }
.faq details[open] .signe::after { transform: rotate(0deg); }
.faq details p { padding: 0 0.25rem 1.35rem; color: var(--texte-2); max-width: 68ch; }

/* ==========================================================================
   HABILLAGE « DENTELLE » (theme.decor = "dentelle")
   Le système visuel de la marque : ivoire, lin, taupe, terracotta clair et espresso, titres serif,
   filets fins, ombres diffuses, verre léger. Les couleurs du commerce gardent leur rôle
   (principale = boutons, secondaire = italiques). Les jetons ci-dessous pilotent tout le reste.
   ========================================================================== */
:root[data-decor="dentelle"] {
  color-scheme: light;
  /* Palette : ivoire, lin, taupe, terracotta très clair, espresso (jamais de noir pur) */
  --ivoire: #fbf9f7;
  --ivoire-rgb: 251, 249, 247;
  --lin: #efe8df;
  --taupe: #a8978a;
  --terracotta-clair: #e9d2c4;
  --espresso: #2b211c;
  --espresso-rgb: 43, 33, 28;
  --or: #8a6f52;

  /* Rôles */
  --fond: var(--ivoire);
  --fond-rgb: var(--ivoire-rgb);
  --fond-2: #f5f0ea;
  --encre-rgb: var(--espresso-rgb);
  --surface: rgba(255, 255, 255, 0.66);
  --surface-2: #ffffff;
  --surface-3: rgba(168, 151, 138, 0.16);
  --bord: rgba(var(--espresso-rgb), 0.08);
  --bord-fort: rgba(var(--espresso-rgb), 0.15);
  --bord-survol: rgba(var(--espresso-rgb), 0.3);
  --texte: var(--espresso);
  --texte-2: #5c4f47;
  --texte-3: #75675d;
  --carte-fond: #ffffff;
  --verre: rgba(var(--ivoire-rgb), 0.78);
  --bulle: rgba(255, 255, 255, 0.97);
  --modale: #ffffff;
  --voile-modale: rgba(var(--espresso-rgb), 0.34);
  --champ-fond: #ffffff;
  --champ-focus: #ffffff;
  --creux: var(--fond-2);
  --papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .2 0 0 0 0 .16 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Profondeur, rayons, mouvement */
  --ombre-douce: 0 1px 2px rgba(var(--espresso-rgb), 0.03), 0 14px 44px -20px rgba(var(--espresso-rgb), 0.12);
  --ombre-haute: 0 2px 6px rgba(var(--espresso-rgb), 0.04), 0 28px 70px -28px rgba(var(--espresso-rgb), 0.2);
  --ombre: var(--ombre-douce);
  --rayon-sm: 12px;
  --rayon: 16px;
  --rayon-lg: 20px;
  --rayon-pill: 999px;
  --transition: 0.3s ease;

  /* Échelle d'espacements */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2.5rem;
  --esp-7: 4rem;
  --esp-8: clamp(4.5rem, 10vw, 8rem);

  /* Échelle typographique */
  --texte-xs: 0.7rem;
  --texte-sm: 0.875rem;
  --texte-lg: 1.125rem;
  --interligne: 1.75;
  --h1-taille: clamp(3rem, 7vw, 6rem);
  --h2-taille: clamp(2.2rem, 4vw, 3.2rem);
  --titres-poids: 500;
  --titres-poids-h1: 400;
  --titres-espacement: 0;
  --titres-espacement-h1: -0.01em;
  --titres-interligne: 1.08;

  /* Hauteurs utiles à la photo d'accueil */
  --nav-h: 78px;
}
:root[data-decor="dentelle"] body { background: var(--papier), var(--fond); color: var(--texte); line-height: 1.7; }
:root[data-decor="dentelle"] ::selection { background: var(--terracotta-clair); }
:root[data-decor="dentelle"] .decor::before { background: radial-gradient(circle, rgba(233, 210, 196, 0.22), transparent 62%); }
:root[data-decor="dentelle"] .decor::after { background: radial-gradient(circle, rgba(239, 232, 223, 0.5), transparent 62%); }
:root[data-decor="dentelle"] h1 em, :root[data-decor="dentelle"] h2 em { font-style: italic; color: var(--accent-texte); }

/* Rythme : de l'air entre les sections */
:root[data-decor="dentelle"] .section { padding-block: var(--esp-8); }
:root[data-decor="dentelle"] .section-tete { gap: var(--esp-3); margin-bottom: var(--esp-6); }
:root[data-decor="dentelle"] .section-tete p { font-size: var(--texte-lg); line-height: var(--interligne); }

/* Boutons : pilules fines, capitales espacées, éclaircissement au survol */
:root[data-decor="dentelle"] .btn { border-radius: var(--rayon-pill); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; font-weight: 600; transition: all var(--transition); }
:root[data-decor="dentelle"] .btn-sm { font-size: 0.68rem; padding-inline: 1.15rem; }
:root[data-decor="dentelle"] .btn-lg { font-size: 0.78rem; padding-inline: 2.2rem; }
:root[data-decor="dentelle"] .btn:hover { transform: none; }
:root[data-decor="dentelle"] .btn-primaire, :root[data-decor="dentelle"] .btn-primaire:hover { box-shadow: none; }
:root[data-decor="dentelle"] .btn-primaire:hover { transform: scale(1.015); filter: brightness(1.16); }
:root[data-decor="dentelle"] .btn-fantome { --b-bord: var(--bord-fort); }
:root[data-decor="dentelle"] .btn-icone { border-radius: var(--rayon-sm); }
:root[data-decor="dentelle"] .btn-icone.btn-sm { padding-inline: 0; border-radius: 10px; }
:root[data-decor="dentelle"] .btn-succes, :root[data-decor="dentelle"] .btn-succes:hover { --b-fond: var(--primaire); --b-texte: var(--sur-primaire); box-shadow: none; }
:root[data-decor="dentelle"] .btn-succes:hover { filter: brightness(1.16); }
:root[data-decor="dentelle"] .puce { border-radius: var(--rayon-pill); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; padding: 0.55rem 1.15rem; transition: all var(--transition); }
:root[data-decor="dentelle"] .puce[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); border-color: var(--primaire); }

/* En-têtes de section */
:root[data-decor="dentelle"] .surtitre { color: var(--or); letter-spacing: 0.28em; font-weight: 600; font-size: var(--texte-xs); }
:root[data-decor="dentelle"] .surtitre::before { width: 28px; height: 1px; box-shadow: none; }
:root[data-decor="dentelle"] .centre .surtitre::after, :root[data-decor="dentelle"] .ouverture-cadre .surtitre::after,
:root[data-decor="dentelle"] #galerie .surtitre::after { content: ""; width: 28px; height: 1px; background: currentColor; }
:root[data-decor="dentelle"] .prix, :root[data-decor="dentelle"] .chiffres strong, :root[data-decor="dentelle"] .decompte strong,
:root[data-decor="dentelle"] .etapes-visite .numero, :root[data-decor="dentelle"] .kpi .valeur { font-variant-numeric: lining-nums tabular-nums; }
:root[data-decor="dentelle"] .hero-titre { line-height: 1.02; }
:root[data-decor="dentelle"] .hero-titre em { white-space: nowrap; }
:root[data-decor="dentelle"] .pastille { border-radius: var(--rayon-pill); background: var(--surface-2); }

/* Badges de statut : pastilles douces, texte coloré */
:root[data-decor="dentelle"] .badge { border: 0; border-radius: var(--rayon-pill); padding: 0.28rem 0.75rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; }
:root[data-decor="dentelle"] .badge::before { box-shadow: none; width: 5px; height: 5px; }
:root[data-decor="dentelle"] .badge-confirme { color: #3e5a45; background: #e7efe6; }
:root[data-decor="dentelle"] .badge-bloque { color: #80541c; background: #f7ecdc; }
:root[data-decor="dentelle"] .badge-declare { color: #3f5670; background: #e6ebf1; }
:root[data-decor="dentelle"] .badge-termine { color: #6b5e55; background: var(--lin); }
:root[data-decor="dentelle"] .badge-neutre { color: var(--texte-2); background: var(--lin); }

/* Champs : bordures douces, focus lumineux discret, validation sobre */
:root[data-decor="dentelle"] .saisie, :root[data-decor="dentelle"] .formulaire input:not([type="checkbox"]):not([type="color"]):not([type="radio"]),
:root[data-decor="dentelle"] .formulaire select, :root[data-decor="dentelle"] .formulaire textarea { border-radius: var(--rayon-sm); border-color: var(--bord-fort); transition: border-color var(--transition), box-shadow var(--transition); }
:root[data-decor="dentelle"] .saisie:focus, :root[data-decor="dentelle"] .formulaire input:focus,
:root[data-decor="dentelle"] .formulaire select:focus, :root[data-decor="dentelle"] .formulaire textarea:focus { border-color: var(--taupe); box-shadow: 0 0 0 4px rgba(233, 210, 196, 0.5); }
:root[data-decor="dentelle"] .formulaire input:user-valid:not(:placeholder-shown):not(:focus) { border-color: rgba(94, 130, 104, 0.5); }
:root[data-decor="dentelle"] .formulaire input:user-invalid, :root[data-decor="dentelle"] .formulaire input[aria-invalid="true"] { border-color: rgba(160, 72, 72, 0.6); box-shadow: 0 0 0 4px rgba(160, 72, 72, 0.08); }
:root[data-decor="dentelle"] .champ > span, :root[data-decor="dentelle"] .champ > label { font-weight: 600; letter-spacing: 0.01em; }

/* Navigation : verre ivoire, filet très fin, logo complet */
:root[data-decor="dentelle"] .nav {
  background: var(--verre); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--bord); box-shadow: none; transition: background var(--transition), border-color var(--transition);
}
:root[data-decor="dentelle"] .nav-int { min-height: var(--nav-h); }
:root[data-decor="dentelle"] .marque-logo:has(img) { width: auto; height: 54px; border-radius: 0; overflow: visible; }
:root[data-decor="dentelle"] .marque-logo img { width: auto; max-width: none; height: 54px; transition: filter var(--transition); }
:root[data-decor="dentelle"] .marque:has(.marque-logo img) .marque-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:root[data-decor="dentelle"] .nav-liens a { border-radius: 0; white-space: nowrap; padding-inline: 0.7rem; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; transition: color var(--transition), box-shadow var(--transition); }
:root[data-decor="dentelle"] .nav-liens a:hover, :root[data-decor="dentelle"] .nav-liens a[aria-current="page"] { background: none; color: var(--texte); box-shadow: inset 0 -1px 0 var(--or); }
:root[data-decor="dentelle"] .nav-panneau { background: rgba(var(--ivoire-rgb), 0.96); }
:root[data-decor="dentelle"] .nav-panneau a { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.76rem; }
:root[data-decor="dentelle"] .annonce { letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.66rem; padding-block: 0.65rem; background: var(--espresso); }

/* Héros sans photo : texte sur l'ivoire */
:root[data-decor="dentelle"] .hero {
  position: relative; display: flex; align-items: center; gap: 0; max-width: none; min-height: min(80vh, 720px); isolation: isolate;
  padding-inline: max(clamp(16px, 4vw, 32px), calc((100% - var(--largeur)) / 2 + 32px));
}
:root[data-decor="dentelle"] .hero-texte { gap: var(--esp-4); max-width: 640px; }
:root[data-decor="dentelle"] .hero-visuel { position: static; flex: none; width: 0; margin-inline: 0; animation: none; }
:root[data-decor="dentelle"] #hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
:root[data-decor="dentelle"] #hero-media .orbe { display: none; }
:root[data-decor="dentelle"] .hero-titre .texte-degrade { background: none; color: var(--texte); -webkit-background-clip: border-box; background-clip: border-box; }
:root[data-decor="dentelle"] .hero-signature { margin-top: calc(-1 * var(--esp-2)); font-size: clamp(1.2rem, 2vw, 1.5rem); }
:root[data-decor="dentelle"] .hero-slogan { max-width: 46ch; font-size: 1.05rem; line-height: var(--interligne); }
:root[data-decor="dentelle"] .hero-actions { margin-top: var(--esp-3); align-items: center; gap: var(--esp-5); }
:root[data-decor="dentelle"] .hero-cadre { aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
:root[data-decor="dentelle"] .hero-cadre::after { background: linear-gradient(90deg, rgba(var(--fond-rgb), 0.95) 0%, rgba(var(--fond-rgb), 0.86) 45%, rgba(var(--fond-rgb), 0.3) 100%); }
:root[data-decor="dentelle"] .flottant { border-radius: var(--rayon); animation: none; background: var(--surface-2); box-shadow: var(--ombre-douce); }
:root[data-decor="dentelle"] .flottant .icone-rond { border-radius: 50%; background: rgba(var(--accent-rgb), 0.16); color: var(--texte); }
:root[data-decor="dentelle"] .flottant-1 { left: auto; right: max(clamp(16px, 4vw, 32px), calc((100% - var(--largeur)) / 2 + 32px)); bottom: clamp(3.5rem, 11vh, 7rem); }
:root[data-decor="dentelle"] .flottant-2 { display: none; }
:root[data-decor="dentelle"] .atouts { font-weight: 500; font-size: 0.86rem; }
:root[data-decor="dentelle"] .atouts svg { color: var(--or); }

/* Héros plein écran : la photo monte sous le menu translucide, texte ivoire sur voile espresso */
:root[data-decor="dentelle"] .hero-immersif .hero {
  margin-top: calc(-1 * var(--nav-h)); min-height: calc(100svh - var(--annonce-h, 0px)); align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--esp-6)); padding-bottom: clamp(3.5rem, 11vh, 7rem);
}
:root[data-decor="dentelle"] .hero-immersif .hero-cadre::after {
  background: linear-gradient(180deg, rgba(var(--espresso-rgb), 0.42) 0%, rgba(var(--espresso-rgb), 0) 26%),
    linear-gradient(95deg, rgba(var(--espresso-rgb), 0.78) 0%, rgba(var(--espresso-rgb), 0.52) 42%, rgba(var(--espresso-rgb), 0.08) 100%);
}
:root[data-decor="dentelle"] .hero-immersif .hero-cadre img { animation: hero-respire 16s ease-out both; }
@keyframes hero-respire { from { transform: scale(1.06); } to { transform: scale(1); } }
:root[data-decor="dentelle"] .hero-immersif .hero-texte { color: var(--ivoire); }
:root[data-decor="dentelle"] .hero-immersif .accroche { color: rgba(var(--ivoire-rgb), 0.9); font-size: var(--texte-xs); font-weight: 600; letter-spacing: 0.3em; }
:root[data-decor="dentelle"] .hero-immersif .pastille, :root[data-decor="dentelle"] .hero-immersif .atouts { display: none; }
:root[data-decor="dentelle"] .hero-immersif .hero-titre, :root[data-decor="dentelle"] .hero-immersif .hero-titre .texte-degrade { color: var(--ivoire); }
:root[data-decor="dentelle"] .hero-immersif .hero-titre em { display: block; color: var(--terracotta-clair); }
:root[data-decor="dentelle"] .hero-immersif .hero-signature { color: rgba(var(--ivoire-rgb), 0.92); }
:root[data-decor="dentelle"] .hero-immersif .hero-slogan { color: rgba(var(--ivoire-rgb), 0.9); }
:root[data-decor="dentelle"] .hero-immersif .hero-actions .btn-primaire { --b-fond: var(--ivoire); --b-texte: var(--espresso); }
:root[data-decor="dentelle"] .hero-immersif .hero-actions .btn-fantome {
  --b-bord: transparent; --b-texte: var(--ivoire); min-height: 0; padding: 0.3rem 0; border-radius: 0; box-shadow: inset 0 -1px 0 rgba(var(--ivoire-rgb), 0.6);
}
:root[data-decor="dentelle"] .hero-immersif .hero-actions .btn-fantome:hover { box-shadow: inset 0 -1px 0 var(--ivoire); }
:root[data-decor="dentelle"] .hero-immersif .flottant {
  background: rgba(var(--ivoire-rgb), 0.14); border: 1px solid rgba(var(--ivoire-rgb), 0.24); box-shadow: none; color: var(--ivoire);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
:root[data-decor="dentelle"] .hero-immersif .flottant strong { color: var(--ivoire); }
:root[data-decor="dentelle"] .hero-immersif .flottant small { color: rgba(var(--ivoire-rgb), 0.82); }
:root[data-decor="dentelle"] .hero-immersif .flottant .icone-rond { background: rgba(var(--ivoire-rgb), 0.16); color: var(--ivoire); }

/* Menu posé sur la photo : à peine teinté ; il redevient ivoire translucide au défilement */
:root[data-decor="dentelle"] .hero-immersif:not(.defile) .nav:not(.ouvert) {
  background: rgba(var(--ivoire-rgb), 0.1); border-bottom-color: rgba(var(--ivoire-rgb), 0.18);
  -webkit-backdrop-filter: blur(8px) saturate(1.15); backdrop-filter: blur(8px) saturate(1.15);
}
:root[data-decor="dentelle"] .hero-immersif:not(.defile) .nav:not(.ouvert) .marque-logo img { filter: brightness(0) invert(0.97); }
:root[data-decor="dentelle"] .hero-immersif:not(.defile) .nav:not(.ouvert) .nav-liens a { color: rgba(var(--ivoire-rgb), 0.92); }
:root[data-decor="dentelle"] .hero-immersif:not(.defile) .nav:not(.ouvert) .nav-liens a:hover,
:root[data-decor="dentelle"] .hero-immersif:not(.defile) .nav:not(.ouvert) .nav-liens a[aria-current="page"] { color: var(--ivoire); box-shadow: inset 0 -1px 0 rgba(var(--ivoire-rgb), 0.8); }
:root[data-decor="dentelle"] .hero-immersif:not(.defile) .nav:not(.ouvert) .btn { --b-fond: rgba(var(--ivoire-rgb), 0.14); --b-texte: var(--ivoire); --b-bord: rgba(var(--ivoire-rgb), 0.4); }
:root[data-decor="dentelle"] .hero-immersif:not(.defile) .barre-mobile { transform: translateY(120%); }
:root[data-decor="dentelle"] .tiroir .modal-tete h2 { font-family: var(--police-titres); font-weight: 500; font-size: 1.65rem; letter-spacing: 0; }

/* Cartes : blanc sur ivoire, filet fin, ombre diffuse */
:root[data-decor="dentelle"] .carte-service, :root[data-decor="dentelle"] .etapes-visite li, :root[data-decor="dentelle"] .carte-avant-apres {
  border-radius: var(--rayon-lg); border: 1px solid var(--bord); background: var(--carte-fond); box-shadow: var(--ombre-douce);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
:root[data-decor="dentelle"] .carte-service { padding: 2rem 1.9rem 1.7rem; gap: var(--esp-3); }
:root[data-decor="dentelle"] .carte-service::before { display: none; }
:root[data-decor="dentelle"] .carte-service:hover { transform: translateY(-3px); border-color: var(--bord-fort); box-shadow: var(--ombre-haute); }
:root[data-decor="dentelle"] .carte-service .categorie, :root[data-decor="dentelle"] .carte-avant-apres .categorie { color: var(--or); letter-spacing: 0.22em; font-weight: 600; font-size: 0.66rem; }
:root[data-decor="dentelle"] .carte-service h3, :root[data-decor="dentelle"] .etapes-visite h3, :root[data-decor="dentelle"] .ligne-service h3,
:root[data-decor="dentelle"] .carte-avant-apres h3, :root[data-decor="dentelle"] .apropos h3 {
  font-family: var(--police-titres); font-weight: 500; font-size: 1.6rem; letter-spacing: 0; line-height: 1.15;
}
:root[data-decor="dentelle"] .carte-service .description { line-height: var(--interligne); }
:root[data-decor="dentelle"] .carte-service .bas { border-top: 1px solid var(--bord); }
:root[data-decor="dentelle"] .prix { font-family: var(--police-titres); font-weight: 500; font-size: 1.6rem; letter-spacing: 0; color: var(--texte); }
:root[data-decor="dentelle"] .carte-service .prix { color: var(--texte); }

/* Ouverture : bandeau espresso, cadre de dentelle en fond décoratif, contenu centré sur l'ovale.
   Géométrie mesurée sur les images : centre (49,7 %, 48,6 %) en horizontal, (48,6 %, 50,3 %) en vertical.
   Les tailles suivent la largeur du cadre (cqi). L'ovale garde l'essentiel ; sur écran étroit, texte et bouton passent dessous. */
:root[data-decor="dentelle"] .ouverture { max-width: none; padding-block: clamp(3.5rem, 8vw, 7rem); background: var(--papier), var(--espresso); }
:root[data-decor="dentelle"] .ouverture-cadre {
  position: relative; display: block; container-type: inline-size; width: min(100%, 1100px); aspect-ratio: 1573 / 1068; margin-inline: auto;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: ouverture-fondu 0.9s ease both;
}
@keyframes ouverture-fondu { from { opacity: 0; } to { opacity: 1; } }
:root[data-decor="dentelle"] .ouverture-cadre::before {
  content: ""; position: absolute; inset: 0; background: url("../img/cadre-dentelle-horizontal.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 20px 40px rgba(20, 14, 11, 0.5));
}
:root[data-decor="dentelle"] .ouverture-contenu {
  position: absolute; left: 49.7%; top: 48.6%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  width: 54%; max-height: 56%; gap: clamp(0.3rem, 0.95cqi, 0.7rem); text-align: center; color: var(--espresso);
}
:root[data-decor="dentelle"] .ouverture-cadre .surtitre { font-size: clamp(0.56rem, 0.95cqi, 0.7rem); letter-spacing: 0.3em; color: #6f5a43; }
:root[data-decor="dentelle"] .ouverture-cadre .surtitre::before, :root[data-decor="dentelle"] .ouverture-cadre .surtitre::after { width: 22px; }
:root[data-decor="dentelle"] .ouverture-date { font-family: var(--police-titres); font-weight: 500; font-size: clamp(1.7rem, 4.4cqi, 3rem); line-height: 1.08; letter-spacing: 0; color: var(--espresso); }
:root[data-decor="dentelle"] .ouverture-date { font-variant-numeric: lining-nums; }
:root[data-decor="dentelle"] .ouverture-date sup { font-size: 0.56em; line-height: 0; vertical-align: 0.5em; }
:root[data-decor="dentelle"] .ouverture-cadre h2 { max-width: none; font-size: clamp(1.15rem, 2.5cqi, 1.75rem); font-weight: 500; letter-spacing: 0.01em; line-height: 1.15; }
:root[data-decor="dentelle"] .ouverture-cadre h2 em { color: #75535a; }
:root[data-decor="dentelle"] .ouverture-texte { max-width: none; font-size: clamp(0.8rem, 1.32cqi, 0.92rem); line-height: 1.5; color: #4e4238; }
:root[data-decor="dentelle"] .decompte { gap: 0.45rem; font-size: clamp(0.7rem, 1.2cqi, 0.84rem); letter-spacing: 0.03em; color: #4e4238; }
:root[data-decor="dentelle"] .decompte strong { font-size: clamp(1.7rem, 3.4cqi, 2.4rem); font-weight: 500; color: var(--espresso); }
:root[data-decor="dentelle"] .ouverture-cadre .btn { min-height: 0; padding: clamp(0.5rem, 1cqi, 0.72rem) clamp(1.1rem, 2.4cqi, 1.7rem); font-size: clamp(0.6rem, 0.98cqi, 0.7rem); white-space: nowrap; }
:root[data-decor="dentelle"] .ouverture-suite { display: none; }
/* Déroulé : bandeau sur photo de dentelle voilée d'ivoire */
:root[data-decor="dentelle"] .bandeau-photo { position: relative; isolation: isolate; }
:root[data-decor="dentelle"] .bandeau-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(var(--fond-rgb), 0.88), rgba(var(--fond-rgb), 0.92)), var(--bandeau, none) center / cover;
  border-block: 1px solid var(--bord);
}
:root[data-decor="dentelle"] .etapes-visite li { padding: 2.4rem 2rem; text-align: center; justify-items: center; }
:root[data-decor="dentelle"] .etapes-visite .numero { font-style: italic; font-size: 2.6rem; color: var(--or); }

/* À propos : photo sous une arche fine */
:root[data-decor="dentelle"] .apropos-photo { border-radius: 999px 999px var(--rayon-lg) var(--rayon-lg); border: 1px solid var(--bord); padding: 10px; background: var(--carte-fond); box-shadow: var(--ombre-douce); }
:root[data-decor="dentelle"] .apropos-photo img { border-radius: 999px 999px var(--rayon) var(--rayon); }
:root[data-decor="dentelle"] .texte-histoire { line-height: var(--interligne); }
:root[data-decor="dentelle"] .chiffres strong { font-family: var(--police-titres); font-weight: 500; font-size: 2.1rem; }

/* Galerie : portraits */
:root[data-decor="dentelle"] .grille-galerie { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
:root[data-decor="dentelle"] #galerie .section-tete { margin-inline: auto; text-align: center; justify-items: center; }
:root[data-decor="dentelle"] .grille-galerie button { aspect-ratio: 3 / 4; border-radius: var(--rayon); overflow: hidden; }

/* Citation : plaque espresso */
:root[data-decor="dentelle"] .citation figure {
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem); border-radius: var(--rayon-lg); color: var(--ivoire); background: var(--espresso);
}
:root[data-decor="dentelle"] .citation-image { box-shadow: none; border-radius: var(--rayon); }
:root[data-decor="dentelle"] .citation blockquote { font-style: italic; font-weight: 400; }
:root[data-decor="dentelle"] .citation blockquote em { color: var(--terracotta-clair); }
:root[data-decor="dentelle"] .citation figcaption { color: rgba(var(--ivoire-rgb), 0.74); letter-spacing: 0.2em; }

/* FAQ, contact, appel final, pied */
:root[data-decor="dentelle"] .faq summary { font-family: var(--police-titres); font-size: 1.35rem; font-weight: 500; }
:root[data-decor="dentelle"] .faq .signe { color: var(--or); }
:root[data-decor="dentelle"] .carte-infos, :root[data-decor="dentelle"] .carte-map { border-radius: var(--rayon-lg); }
:root[data-decor="dentelle"] .carte-infos h3 { font-family: var(--police-titres); font-weight: 500; font-size: 1.5rem; }
:root[data-decor="dentelle"] .carte-map { box-shadow: var(--ombre-douce); min-height: 380px; }
:root[data-decor="dentelle"] .carte-map .leaflet-tile-pane { filter: grayscale(1) sepia(0.25) brightness(1.04) contrast(0.92); }
:root[data-decor="dentelle"] .carte-map .leaflet-bar { border: 1px solid var(--bord-fort); border-radius: var(--rayon-sm); overflow: hidden; box-shadow: var(--ombre-douce); }
:root[data-decor="dentelle"] .carte-map .leaflet-bar a { background: rgba(var(--ivoire-rgb), 0.92); color: var(--espresso); border-color: var(--bord); }
:root[data-decor="dentelle"] .carte-map .leaflet-control-attribution { background: rgba(var(--ivoire-rgb), 0.82); color: var(--texte-2); border-radius: 8px 0 0 0; }
:root[data-decor="dentelle"] .epingle-goutte { background: var(--espresso); }
:root[data-decor="dentelle"] .bande-marques { background: var(--fond-2); margin-top: var(--esp-7); padding-block: var(--esp-6); }
:root[data-decor="dentelle"] .section-marques { padding-bottom: 0; }
:root[data-decor="dentelle"] .carte-marque { box-shadow: var(--ombre-douce); }
:root[data-decor="dentelle"] .carte-marque h3 { font-family: var(--police-titres); font-weight: 500; font-size: 1.5rem; }
:root[data-decor="dentelle"] .marqueur-neon { box-shadow: 0 0 0 7px rgba(var(--primaire-rgb), 0.2); }
:root[data-decor="dentelle"] .cta-final { border-radius: var(--rayon-lg); border-color: var(--bord); background: linear-gradient(180deg, var(--lin), var(--fond-2)); box-shadow: none; }
:root[data-decor="dentelle"] /* Marques : bande au-dessus du pied de page, description sur la page Soins */
.bande-marques { margin-top: clamp(2.5rem, 6vw, 4rem); padding-block: 1.75rem; border-top: 1px solid var(--bord); text-align: center; }
.bande-marques .surtitre { justify-content: center; margin-bottom: 1rem; }
.bande-marques ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.25rem clamp(2rem, 7vw, 5rem); margin: 0; padding: 0; list-style: none; }
.bande-marques a { display: block; color: var(--texte-2); font-weight: 650; }
.bande-marques img { width: auto; height: clamp(30px, 4vw, 38px); opacity: 0.82; transition: opacity var(--vite); }
.bande-marques a:hover img { opacity: 1; }
.grille-marques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; }
.carte-marque { display: grid; gap: 0.8rem; justify-items: center; align-content: start; padding: 2rem 1.75rem; text-align: center; border-radius: var(--rayon-lg); border: 1px solid var(--bord); background: var(--carte-fond); box-shadow: var(--ombre); }
.carte-marque img { width: auto; max-width: 100%; height: 46px; }
.carte-marque p { color: var(--texte-2); }
.carte-marque a { color: var(--primaire-texte); font-weight: 650; font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; }
.lien-marques { margin-top: 1rem; color: var(--texte-2); }
.lien-marques a { color: var(--primaire-texte); text-decoration: underline; text-underline-offset: 3px; }
.ligne-liste .logo-marque { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ligne-liste .logo-marque img { height: 34px; width: auto; max-width: 150px; }
.pied { border-top: 1px solid var(--bord); }

/* Réservation et paiement : mêmes rayons, mêmes filets */
:root[data-decor="dentelle"] .ligne-service, :root[data-decor="dentelle"] .panier-carte, :root[data-decor="dentelle"] .carte,
:root[data-decor="dentelle"] .bandeau-acompte { border-radius: var(--rayon-lg); box-shadow: var(--ombre-douce); }
:root[data-decor="dentelle"] .creneau, :root[data-decor="dentelle"] .date-pastille { border-radius: var(--rayon-sm); transition: all var(--transition); }
:root[data-decor="dentelle"] .etape { border-radius: var(--rayon-pill); }
:root[data-decor="dentelle"] .modal-boite { border-radius: var(--rayon-lg); box-shadow: var(--ombre-haute); }
:root[data-decor="dentelle"] .ligne-service { background: var(--carte-fond); padding: 1.4rem 1.5rem; }
:root[data-decor="dentelle"] .ligne-service h3 { font-size: 1.4rem; }
:root[data-decor="dentelle"] .ligne-service .meta .prix { font-size: 1.2rem; }
:root[data-decor="dentelle"] .categorie-titre { color: var(--or); letter-spacing: 0.24em; font-weight: 600; }
:root[data-decor="dentelle"] .panier-tete h2, :root[data-decor="dentelle"] .modal-tete h2 { font-family: var(--police-titres); font-weight: 500; font-size: 1.65rem; letter-spacing: 0; }
:root[data-decor="dentelle"] .etape.active { background: var(--carte-fond); border-color: var(--or); }
:root[data-decor="dentelle"] .etape.faite b { background: var(--or); color: #fff; }
:root[data-decor="dentelle"] .date-pastille .dispo { background: var(--or); box-shadow: none; }
:root[data-decor="dentelle"] .bandeau-acompte { background: var(--carte-fond); border-color: var(--bord); }

/* Espace propriétaire : un logiciel calme, lisible d'un coup d'œil */
:root[data-decor="dentelle"] .admin-menu { background: var(--fond-2); border-color: var(--bord); }
:root[data-decor="dentelle"] .menu-lien { border-radius: var(--rayon-sm); font-weight: 600; font-size: var(--texte-sm); transition: background var(--transition), color var(--transition); }
:root[data-decor="dentelle"] .menu-lien[aria-current="page"] { background: #ffffff; box-shadow: var(--ombre-douce); }
:root[data-decor="dentelle"] .menu-lien .compteur { background: var(--primaire); color: var(--sur-primaire); }
:root[data-decor="dentelle"] .admin-tete h1 { font-size: clamp(2.2rem, 3.6vw, 3rem); }
:root[data-decor="dentelle"] .panneau { border-radius: var(--rayon-lg); padding: 1.75rem; box-shadow: var(--ombre-douce); }
:root[data-decor="dentelle"] .panneau + .panneau, :root[data-decor="dentelle"] .grille-2 + .panneau, :root[data-decor="dentelle"] .panneau + .grille-2 { margin-top: var(--esp-5); }
:root[data-decor="dentelle"] .panneau-tete { margin-bottom: var(--esp-5); }
:root[data-decor="dentelle"] .panneau-tete h2 { font-family: var(--police-titres); font-size: 1.5rem; font-weight: 500; letter-spacing: 0; }
:root[data-decor="dentelle"] .panneau-tete h2 svg { width: 18px; height: 18px; color: var(--or); }
:root[data-decor="dentelle"] .kpis { gap: var(--esp-4); margin-bottom: var(--esp-5); }
:root[data-decor="dentelle"] .kpi { border-radius: var(--rayon); padding: 1.3rem 1.4rem; box-shadow: var(--ombre-douce); }
:root[data-decor="dentelle"] .kpi .libelle { font-weight: 600; letter-spacing: 0.01em; }
:root[data-decor="dentelle"] .kpi .valeur { font-family: var(--police-titres); font-weight: 500; font-size: 2.3rem; letter-spacing: 0; }
:root[data-decor="dentelle"] .kpi.accent { border-color: #ecd9bd; background: #fcf6ec; }
:root[data-decor="dentelle"] .kpi.accent .valeur { color: #80541c; }
:root[data-decor="dentelle"] .resa { border-radius: var(--rayon); background: var(--carte-fond); }
:root[data-decor="dentelle"] .resa.urgente { border-color: #ecd9bd; box-shadow: none; }
:root[data-decor="dentelle"] .resa.declaree { border-color: #d6dfe9; }
:root[data-decor="dentelle"] .resa-code, :root[data-decor="dentelle"] .tableau .mono { font-weight: 600; font-size: 0.92rem; }
:root[data-decor="dentelle"] .tableau th { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--texte-3); }
:root[data-decor="dentelle"] .tableau th, :root[data-decor="dentelle"] .tableau td { border-color: var(--bord); padding-block: 0.85rem; }
:root[data-decor="dentelle"] .fiche-stats strong { font-family: var(--police-titres); font-weight: 500; font-size: 1.9rem; }

/* ---------- Page « politique de confidentialité » ---------- */
.texte-legal { max-width: 760px; padding-block: 2.5rem 5rem; }
.texte-legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.5rem; }
.texte-legal h2 { font-size: 1.3rem; font-family: var(--police); font-weight: 750; margin: 2rem 0 0.6rem; letter-spacing: -0.01em; }
.texte-legal p, .texte-legal li { color: var(--texte-2); }
.texte-legal ul { padding-left: 1.2rem; display: grid; gap: 0.35rem; }

/* ---------- Tunnel de réservation ---------- */
.tunnel { padding-block: 2rem 7rem; }
.etapes { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.etape { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem 0.4rem 0.45rem; border-radius: 999px; border: 1px solid var(--bord); font-size: 0.82rem; font-weight: 650; color: var(--texte-3); }
.etape b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 0.74rem; }
.etape.active { color: var(--texte); border-color: rgba(var(--primaire-rgb), 0.5); background: rgba(var(--primaire-rgb), 0.1); }
.etape.active b { background: var(--primaire); color: var(--sur-primaire); }
.etape.faite { color: var(--texte-2); }
.etape.faite b { background: var(--succes); color: #03140a; }
.tunnel-grille { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 2rem; align-items: start; }
.tunnel-intro { display: grid; gap: 0.6rem; margin-bottom: 0.5rem; }
.tunnel-intro h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
.tunnel-intro p { color: var(--texte-2); max-width: 60ch; }
.categorie-titre { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-3); font-weight: 750; margin: 1.8rem 0 0.75rem; font-family: var(--police); }
.ligne-service {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem;
  border-radius: 18px; border: 1px solid var(--bord); background: var(--surface); transition: border-color var(--vite), background var(--vite);
}
.ligne-service + .ligne-service { margin-top: 0.6rem; }
.ligne-service:hover { border-color: var(--bord-fort); background: var(--surface-2); }
.ligne-service h3 { font-size: 1.02rem; }
.ligne-service .meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; color: var(--texte-2); font-size: 0.86rem; margin-top: 0.25rem; align-items: center; }
.ligne-service .meta .prix { font-size: 0.98rem; color: var(--texte); }
.ligne-service .description { color: var(--texte-3); font-size: 0.86rem; margin-top: 0.35rem; }
.ligne-service.choisi { border-color: rgba(var(--succes-rgb), 0.45); background: rgba(var(--succes-rgb), 0.05); }
.ligne-service .deja { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--txt-succes); font-weight: 650; font-size: 0.8rem; }
.ligne-service .deja svg { width: 14px; height: 14px; }

.panier { position: sticky; top: 90px; }
.panier-carte { padding: 1.4rem; }
.panier-tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.4rem; }
.panier-tete h2 { font-size: 1.2rem; font-family: var(--police); font-weight: 750; letter-spacing: -0.015em; }
.panier-vide { display: grid; justify-items: center; gap: 0.6rem; text-align: center; padding: 1.6rem 0.5rem; color: var(--texte-3); font-size: 0.92rem; }
.panier-vide svg { width: 34px; height: 34px; color: var(--texte-3); opacity: 0.7; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; padding: 0.9rem 0; border-bottom: 1px solid var(--bord); }
.article .nom { font-weight: 700; }
.article .quand { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.84rem; color: var(--primaire-texte); font-weight: 650; }
.article .quand svg { width: 14px; height: 14px; }
.article .prix-article { font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.article .actions { grid-column: 1 / -1; display: flex; gap: 1rem; margin-top: 0.3rem; }
.article.en-conflit { border-left: 3px solid var(--danger); padding-left: 0.75rem; }
.article .alerte-conflit { grid-column: 1 / -1; color: var(--txt-danger); font-size: 0.82rem; font-weight: 600; margin-top: 0.3rem; }
.article .actions { align-items: center; flex-wrap: wrap; }
#panier-titre:focus { outline: none; }
.panier-vide strong { color: var(--texte); }
.panier-outils { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.7rem; font-size: 0.8rem; color: var(--texte-3); }
.panier-outils .lien-action { margin-left: auto; }
.panier-recap { display: grid; gap: 0.3rem; margin-top: 0.7rem; padding: 0.75rem 0.9rem; border-radius: var(--rayon-sm); background: var(--creux); font-size: 0.85rem; }
.panier-recap div { display: flex; justify-content: space-between; gap: 1rem; }
.panier-recap span { color: var(--texte-2); }
.panier-recap strong { font-weight: 650; text-align: right; }
.totaux { display: grid; gap: 0.38rem; padding: 1rem 0 1.1rem; font-size: 0.93rem; font-variant-numeric: tabular-nums; }
.totaux .ligne { display: flex; justify-content: space-between; gap: 1rem; color: var(--texte-2); }
.totaux .ligne.total { color: var(--texte); font-weight: 800; font-size: 1.15rem; padding-top: 0.65rem; margin-top: 0.3rem; border-top: 1px solid var(--bord); }
.totaux .ligne.du { color: var(--primaire-texte); font-weight: 750; }
.note-confiance { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.8rem; color: var(--texte-3); margin-top: 0.9rem; }
.note-confiance svg { width: 15px; height: 15px; flex: none; margin-top: 0.15rem; }
.note-confiance a { text-decoration: underline; text-underline-offset: 2px; }
.form-client { padding-top: 1.1rem; border-top: 1px solid var(--bord); }
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-client h3 { font-size: 1rem; margin-bottom: 0.2rem; }

/* ---------- Fenêtres modales & calendrier ---------- */
.modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 1rem; }
.modal-fond { position: absolute; inset: 0; background: var(--voile-modale); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fondu 0.2s ease; }
.modal-boite {
  position: relative; width: min(100%, 740px); max-height: min(92vh, 880px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--modale); border: 1px solid var(--bord-fort); border-radius: 26px;
  box-shadow: 0 50px 140px -40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--primaire-rgb), 0.08); animation: monte 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.modal-boite.etroite { width: min(100%, 540px); }
.modal-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.3rem 1.4rem 1rem; border-bottom: 1px solid var(--bord); }
.modal-tete h2 { font-size: 1.3rem; font-family: var(--police); font-weight: 750; letter-spacing: -0.02em; }
.modal-tete p { color: var(--texte-2); font-size: 0.9rem; margin-top: 0.25rem; }
.modal-corps { padding: 1.2rem 1.4rem; overflow-y: auto; overscroll-behavior: contain; }
.modal-pied { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border-top: 1px solid var(--bord); background: var(--surface); }
.modal-pied .resume { font-size: 0.9rem; color: var(--texte-2); min-width: 0; }
.modal-pied .resume strong { color: var(--texte); display: block; font-size: 1rem; }
.modal-image { padding: 0; background: #000; }
.modal-image img { max-height: 86vh; width: auto; margin: auto; }

.dates-defil { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.5rem 0.6rem 1.1rem; margin: -0.2rem -0.6rem 0; scroll-padding-inline: 0.6rem; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.date-pastille {
  flex: 0 0 auto; width: 70px; padding: 0.6rem 0 0.55rem; display: grid; justify-items: center; gap: 0.05rem;
  border-radius: 16px; border: 1px solid var(--bord); background: var(--surface); color: var(--texte);
  font: inherit; cursor: pointer; scroll-snap-align: start; transition: all var(--vite);
}
.date-pastille:hover:not(:disabled) { border-color: rgba(var(--primaire-rgb), 0.6); }
.date-pastille .j { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-3); font-weight: 750; }
.date-pastille .n { font-size: 1.35rem; font-weight: 800; line-height: 1.15; }
.date-pastille .m { font-size: 0.72rem; color: var(--texte-2); }
.date-pastille .dispo { width: 6px; height: 6px; margin-top: 0.25rem; border-radius: 50%; background: var(--succes); box-shadow: 0 0 8px rgba(var(--succes-rgb), 0.9); }
.date-pastille .dispo.peu { background: var(--alerte); box-shadow: 0 0 8px rgba(var(--alerte-rgb), 0.9); }
.date-pastille .dispo.aucun { background: transparent; box-shadow: none; }
.date-pastille[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); border-color: transparent; box-shadow: 0 6px 18px -8px rgba(var(--primaire-rgb), 0.9); }
.date-pastille[aria-pressed="true"] .j, .date-pastille[aria-pressed="true"] .m { color: inherit; opacity: 0.75; }
.date-pastille[aria-pressed="true"] .dispo { background: var(--sur-primaire); box-shadow: none; }
.date-pastille:disabled { opacity: 0.32; cursor: not-allowed; }
.groupe-creneaux h4 { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--texte-3); margin: 1.1rem 0 0.6rem; font-weight: 750; }
.groupe-creneaux:first-child h4 { margin-top: 0.2rem; }
.grille-creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 0.5rem; }
.creneau {
  position: relative; min-height: 46px; border-radius: 12px; border: 1px solid var(--bord-fort); background: var(--surface);
  color: var(--texte); font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-variant-numeric: tabular-nums; transition: all var(--vite);
}
.creneau:hover { border-color: rgba(var(--primaire-rgb), 0.75); background: rgba(var(--primaire-rgb), 0.08); }
.creneau[aria-pressed="true"] { background: var(--primaire); color: var(--sur-primaire); border-color: transparent; box-shadow: var(--lueur); }
.creneau.suggere { border-color: rgba(var(--accent-rgb), 0.85); background: rgba(var(--accent-rgb), 0.12); }
.creneau.suggere::after {
  content: "Enchaîné"; position: absolute; top: -9px; right: 6px; padding: 0.05rem 0.42rem; border-radius: 999px;
  background: rgb(var(--accent-rgb)); color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.02em;
}
.creneau.suggere[aria-pressed="true"] { background: var(--primaire); border-color: transparent; }
.info-panier-jour { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 0.9rem; border-radius: 12px; background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--texte-2); font-size: 0.86rem; margin-bottom: 0.4rem; }
.info-panier-jour svg { width: 17px; height: 17px; flex: none; margin-top: 0.1rem; color: var(--accent-texte); }
.etat-vide { display: grid; justify-items: center; gap: 0.7rem; text-align: center; padding: 2.2rem 1rem; color: var(--texte-3); }
.etat-vide .illustration { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(var(--primaire-rgb), 0.1); border: 1px solid rgba(var(--primaire-rgb), 0.25); color: var(--primaire-texte); }
.etat-vide .illustration svg { width: 28px; height: 28px; }
.etat-vide > svg { width: 32px; height: 32px; opacity: 0.7; }
.etat-vide strong { color: var(--texte); font-size: 1rem; }
.etat-vide .btn { margin-top: 0.3rem; }
.squelette { border-radius: 12px; min-height: 46px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-3) 50%, var(--surface) 75%); background-size: 200% 100%; animation: miroiter 1.2s infinite; }
.squelette-vue { display: grid; gap: 1rem; }
.squelette-vue .titre { height: 42px; width: min(320px, 60%); min-height: 0; }
.squelette-vue .ligne-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.squelette-vue .kpi-s { height: 104px; }
.squelette-vue .bloc { height: 220px; }

/* ---------- Paiement Interac ---------- */
.paiement { padding-block: 2rem 6rem; }
.paiement-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; }
.paiement-entete { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.paiement-entete h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.paiement-entete p { color: var(--texte-2); margin-top: 0.3rem; }
.anneau { position: relative; width: 104px; height: 104px; flex: none; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 7; }
.anneau .fond-anneau { stroke: var(--surface-3); }
.anneau .avance { stroke: var(--primaire); stroke-linecap: round; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 6px rgba(var(--primaire-rgb), 0.85)); }
.anneau .temps { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.anneau .temps small { display: block; font-size: 0.62rem; font-weight: 650; color: var(--texte-3); letter-spacing: 0.06em; text-transform: uppercase; }
.anneau.urgent .avance { stroke: var(--danger); filter: drop-shadow(0 0 6px rgba(var(--danger-rgb), 0.9)); }
.bloc-code { display: grid; gap: 0.5rem; justify-items: start; padding: 1.2rem 1.3rem; margin-bottom: 1.25rem; border-radius: 18px; background: rgba(var(--primaire-rgb), 0.08); border: 1px dashed rgba(var(--primaire-rgb), 0.6); }
.bloc-code .libelle { font-size: 0.8rem; font-weight: 700; color: var(--texte-2); text-transform: uppercase; letter-spacing: 0.1em; }
.code-rdv { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; font-family: var(--mono); font-size: clamp(1.7rem, 4.6vw, 2.4rem); font-weight: 800; letter-spacing: 0.08em; text-shadow: 0 0 24px rgba(var(--primaire-rgb), 0.45); }
.instructions { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.instructions li { counter-increment: etape; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--bord); }
.instructions li::before { content: counter(etape); width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--primaire-rgb), 0.15); color: var(--primaire-texte); font-weight: 800; }
.instructions strong { display: block; }
.instructions .petit { margin-top: 0.15rem; }
.valeur-copiable { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.5rem; padding: 0.55rem 0.55rem 0.55rem 0.85rem; border-radius: 12px; background: var(--creux); border: 1px solid var(--bord); font-family: var(--mono); font-weight: 700; font-size: 0.98rem; flex-wrap: wrap; }
.valeur-copiable span { min-width: 0; overflow-wrap: anywhere; flex: 1 1 14ch; }
.valeur-copiable .btn, .code-rdv .btn { font-family: var(--police); letter-spacing: 0; text-shadow: none; flex: none; }
.recap h2 { font-size: 1.15rem; margin-bottom: 0.4rem; font-family: var(--police); font-weight: 750; letter-spacing: -0.015em; }
.recap .article:last-of-type { border-bottom: 0; }
.etat-final { display: grid; justify-items: center; gap: 1rem; text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 1.5rem; }
.etat-final h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.etat-final p { color: var(--texte-2); max-width: 48ch; }
.icone-geante { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; }
.icone-geante svg { width: 40px; height: 40px; }
.icone-geante.succes { background: rgba(var(--succes-rgb), 0.14); color: var(--succes); box-shadow: 0 0 0 12px rgba(var(--succes-rgb), 0.06), 0 0 70px rgba(var(--succes-rgb), 0.4); }
.icone-geante.info { background: rgba(var(--info-rgb), 0.14); color: var(--info); box-shadow: 0 0 0 12px rgba(var(--info-rgb), 0.06), 0 0 70px rgba(var(--info-rgb), 0.35); }
.icone-geante.neutre { background: var(--surface-2); color: var(--texte-2); }
.bandeau { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 16px; margin-bottom: 1.25rem; font-size: 0.93rem; }
.bandeau svg { width: 20px; height: 20px; flex: none; margin-top: 0.1rem; }
.bandeau strong { display: block; color: var(--texte); }
.bandeau-info { background: rgba(var(--info-rgb), 0.08); border: 1px solid rgba(var(--info-rgb), 0.35); color: var(--texte-2); }
.bandeau-info svg { color: var(--info); }
.bandeau-alerte { background: rgba(var(--alerte-rgb), 0.08); border: 1px solid rgba(var(--alerte-rgb), 0.35); color: var(--texte-2); }
.bandeau-alerte svg { color: var(--alerte); }
.bandeau-succes { background: rgba(var(--succes-rgb), 0.08); border: 1px solid rgba(var(--succes-rgb), 0.35); color: var(--texte-2); }
.bandeau-succes svg { color: var(--succes); }

/* ---------- Notifications (toasts) ---------- */
.toasts { position: fixed; z-index: 1000; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 0.6rem; width: min(calc(100vw - 32px), 430px); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: 16px;
  background: var(--bulle); border: 1px solid var(--bord-fort); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 0.92rem; animation: toast-entree 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast svg { width: 20px; height: 20px; flex: none; margin-top: 0.05rem; }
.toast.succes { border-color: rgba(var(--succes-rgb), 0.5); } .toast.succes svg { color: var(--succes); }
.toast.erreur { border-color: rgba(var(--danger-rgb), 0.55); } .toast.erreur svg { color: var(--danger); }
.toast.info svg { color: var(--primaire-texte); }
/* Panier : tiroir à droite sur grand écran, plein écran depuis le bas sur téléphone */
.modal.tiroir { place-items: stretch end; padding: 0; }
.tiroir .modal-boite { width: min(100vw, 460px); height: 100dvh; max-height: none; border-radius: 0; border-width: 0 0 0 1px; animation: tiroir-droite 0.3s ease; }
.tiroir .modal-corps { flex: 1; min-height: 0; }
.tiroir .modal-tete { align-items: center; }
.tiroir .panier-tete { flex: 1; margin: 0; }
.tiroir-pied { display: grid; grid-template-columns: 1fr 1fr; }
.tiroir-pied .btn { width: 100%; padding-inline: 0.75rem; white-space: normal; text-align: center; line-height: 1.25; }
.tiroir-pied .btn:only-child { grid-column: 1 / -1; }
@keyframes tiroir-droite { from { transform: translateX(100%); } to { transform: none; } }
@keyframes tiroir-bas { from { transform: translateY(100%); } to { transform: none; } }
.nav-panier { position: relative; flex: none; margin-left: 0.5rem; }
.nav-int > .nav-panier { margin-left: 0.5rem; }
.nav-panier-compte { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--primaire); color: var(--sur-primaire); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; }
.carte-service.choisi { border-color: rgba(var(--succes-rgb), 0.45); }
.toast.sortie { animation: toast-sortie 0.3s ease forwards; }
.toast > div { flex: 1; min-width: 0; }
.toast-action {
  flex: none; align-self: center; pointer-events: auto; padding: 0.3rem 0.2rem; border: 0; background: none; cursor: pointer;
  color: var(--primaire-texte); font: inherit; font-size: 0.86rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Administration ---------- */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.connexion-carte { width: min(100%, 420px); display: grid; gap: 1.25rem; padding: 2.2rem 1.8rem; text-align: center; }
.connexion-carte .marque-logo { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto; }
.connexion-carte .monogramme { font-size: 1.5rem; }
.connexion-carte h1 { font-size: 1.6rem; }
.connexion-carte form { text-align: left; }
.indice-demo { padding: 0.7rem 0.9rem; border-radius: 12px; background: rgba(var(--info-rgb), 0.08); border: 1px solid rgba(var(--info-rgb), 0.3); font-size: 0.86rem; color: var(--texte-2); }

.admin-app { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }
.admin-menu {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 1rem;
  border-right: 1px solid var(--bord); background: var(--verre); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); overflow-y: auto;
}
.admin-menu .marque { padding: 0.3rem 0.5rem 1.1rem; font-size: 1rem; }
.menu-lien {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.66rem 0.8rem; border-radius: 12px; border: 0; background: none;
  color: var(--texte-2); font: inherit; font-weight: 650; font-size: 0.93rem; cursor: pointer; text-align: left; transition: background var(--vite), color var(--vite);
}
.menu-lien svg { width: 19px; height: 19px; flex: none; }
.menu-lien:hover { background: var(--surface-2); color: var(--texte); }
.menu-lien[aria-current="page"] { background: rgba(var(--primaire-rgb), 0.12); color: var(--texte); box-shadow: inset 0 0 0 1px rgba(var(--primaire-rgb), 0.3); }
.menu-lien[aria-current="page"] svg { color: var(--primaire-texte); }
.menu-lien .compteur { margin-left: auto; min-width: 22px; height: 22px; padding: 0 0.4rem; border-radius: 999px; display: grid; place-items: center; background: var(--alerte); color: #1a1200; font-size: 0.74rem; font-weight: 800; }
.menu-bas { margin-top: auto; display: grid; gap: 0.3rem; padding-top: 1rem; border-top: 1px solid var(--bord); }
.admin-contenu { min-width: 0; padding: 2rem clamp(1rem, 3vw, 2.6rem) 5rem; max-width: 1280px; width: 100%; }
.admin-entete-mobile { display: none; }
.admin-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.admin-tete h1 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
:root[data-titres="elegante"] .admin-tete h1 { font-size: clamp(2rem, 3.6vw, 2.6rem); }
.admin-tete p { color: var(--texte-2); margin-top: 0.3rem; }
.admin-tete .actions-tete { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.en-direct { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; color: var(--texte-3); font-weight: 600; }
.point-direct { width: 8px; height: 8px; border-radius: 50%; background: var(--succes); animation: pulsation 2s infinite; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { position: relative; overflow: hidden; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid var(--bord); background: var(--carte-fond); }
.kpi .libelle { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--texte-3); font-weight: 650; }
.kpi .libelle svg { width: 15px; height: 15px; }
.kpi .valeur { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.035em; margin-top: 0.35rem; line-height: 1.15; }
.kpi .detail { font-size: 0.8rem; color: var(--texte-2); margin-top: 0.15rem; }
.kpi.accent { border-color: rgba(var(--alerte-rgb), 0.45); background: linear-gradient(180deg, rgba(var(--alerte-rgb), 0.12), rgba(var(--alerte-rgb), 0.02)); }
.kpi.accent .valeur { color: var(--txt-alerte); }
.delta-hausse { color: var(--txt-succes); font-weight: 700; }
.delta-baisse { color: var(--txt-danger); font-weight: 700; }

.panneau { padding: 1.4rem; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--carte-fond); }
.panneau + .panneau, .grille-2 + .panneau, .panneau + .grille-2 { margin-top: 1.25rem; }
.panneau-tete { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.panneau-tete h2 { font-family: var(--police); font-size: 1.1rem; font-weight: 750; letter-spacing: -0.015em; display: flex; align-items: center; gap: 0.6rem; }
.panneau-tete h2 svg { width: 20px; height: 20px; flex: none; color: var(--primaire-texte); }
.panneau-tete p { color: var(--texte-3); font-size: 0.86rem; margin-top: 0.15rem; }
.panneau-tete .btn { max-width: 100%; white-space: normal; text-align: center; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.grille-2 > .panneau { margin-top: 0; }

.confirmer-code { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.confirmer-code input { flex: 1 1 180px; font-family: var(--mono); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.liste-resa { display: grid; gap: 0.75rem; }
.resa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.9rem 1.5rem; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid var(--bord); background: var(--surface); }
.resa.nouvelle { animation: eclat 1.6s ease; }
.resa.urgente { border-color: rgba(var(--alerte-rgb), 0.5); box-shadow: 0 0 0 1px rgba(var(--alerte-rgb), 0.12), 0 14px 40px -24px rgba(var(--alerte-rgb), 0.7); }
.resa.declaree { border-color: rgba(var(--info-rgb), 0.45); }
.resa-ligne1 { display: flex; align-items: center; gap: 0.6rem 0.8rem; flex-wrap: wrap; }
.resa-code { font-family: var(--mono); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; }
.resa-client { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.45rem; color: var(--texte-2); font-size: 0.9rem; }
.resa-client strong { color: var(--texte); }
.resa-client a { display: inline-flex; align-items: center; gap: 0.3rem; }
.resa-client a:hover { color: var(--texte); }
.resa-client svg { width: 14px; height: 14px; }
.resa-items { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; font-size: 0.88rem; color: var(--texte-2); }
.resa-items b { color: var(--texte); font-weight: 650; }
.resa-note { margin-top: 0.45rem; font-size: 0.84rem; color: var(--texte-3); font-style: italic; }
.resa-cote { display: grid; justify-items: end; align-content: space-between; gap: 0.7rem; text-align: right; }
.resa-montant { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.resa-montant small { display: block; font-size: 0.74rem; font-weight: 600; color: var(--texte-3); letter-spacing: 0; }
.resa-minuterie { font-size: 0.82rem; color: var(--texte-2); font-variant-numeric: tabular-nums; display: inline-flex; gap: 0.35rem; align-items: center; }
.resa-minuterie svg { width: 14px; height: 14px; }
.resa-minuterie.urgent { color: var(--txt-alerte); font-weight: 700; }
.resa-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }

.agenda-jour + .agenda-jour { margin-top: 1.1rem; }
.agenda-jour h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texte-3); margin-bottom: 0.55rem; }
.agenda-rdv { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.75rem 0.9rem; border-radius: 14px; border: 1px solid var(--bord); background: var(--surface); }
.agenda-rdv + .agenda-rdv { margin-top: 0.45rem; }
.agenda-rdv .heure { font-weight: 800; font-variant-numeric: tabular-nums; }
.agenda-rdv .heure small { display: block; font-size: 0.75rem; color: var(--texte-3); font-weight: 600; }
.agenda-rdv .qui { min-width: 0; }
.agenda-rdv .qui strong { display: block; }
.agenda-rdv .qui span { font-size: 0.86rem; color: var(--texte-2); }
.agenda-rdv.passe { opacity: 0.55; }

/* Liste « pour que vos clientes puissent réserver » */
.progression { height: 8px; border-radius: 999px; background: rgba(var(--primaire-rgb), 0.16); overflow: hidden; margin: 0.2rem 0 1rem; }
.progression span { display: block; height: 100%; border-radius: inherit; background: var(--primaire); }
.liste-controle { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.liste-controle li { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.8rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--bord); font-size: 0.9rem; }
.liste-controle li svg { width: 18px; height: 18px; flex: none; }
.liste-controle li.fait { color: var(--texte-2); }
.liste-controle li.fait svg { color: var(--succes); }
.liste-controle li.a-faire { color: var(--texte); }
.liste-controle li.a-faire svg { color: var(--texte-3); }
.liste-controle li a { margin-left: auto; font-size: 0.82rem; color: var(--primaire-texte); font-weight: 650; white-space: nowrap; }

/* Planning de la semaine */
.planning-barre { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.planning-nav { display: flex; align-items: center; gap: 0.5rem; }
.planning-nav strong { font-size: 1.05rem; min-width: 12ch; }
.legende-statuts { display: flex; gap: 0.5rem 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--texte-2); }
.legende-statuts span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legende-statuts i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid; display: inline-block; }
.legende-statuts .confirme { background: rgba(var(--succes-rgb), 0.25); border-color: var(--succes); }
.legende-statuts .attente { background: rgba(var(--alerte-rgb), 0.25); border-color: var(--alerte); }
.legende-statuts .termine { background: var(--surface-3); border-color: var(--bord-fort); }
.legende-statuts .indispo { background: repeating-linear-gradient(135deg, var(--surface-3) 0 3px, transparent 3px 6px); border-color: var(--bord-fort); }
.planning { --h-heure: 58px; position: relative; overflow: auto; max-height: 76vh; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte-fond); }
.planning-grille { display: grid; grid-template-columns: 58px repeat(7, minmax(128px, 1fr)); min-width: 960px; }
.planning-coin, .planning-entete { position: sticky; top: 0; z-index: 4; background: var(--fond-2); border-bottom: 1px solid var(--bord); }
.planning-coin { left: 0; z-index: 5; }
.planning-entete { padding: 0.65rem 0.5rem; text-align: center; border-left: 1px solid var(--bord); }
.planning-entete .j { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texte-3); font-weight: 750; }
.planning-entete .n { display: block; font-size: 1.25rem; font-weight: 800; }
.planning-entete .nb { display: block; font-size: 0.72rem; color: var(--texte-3); }
.planning-entete.aujourdhui .n { color: var(--primaire-texte); }
.planning-entete.aujourdhui { box-shadow: inset 0 -2px 0 var(--primaire); }
.planning-heures { position: sticky; left: 0; z-index: 3; background: var(--fond-2); }
.planning-heures div { height: var(--h-heure); padding: 0 0.4rem; font-size: 0.72rem; color: var(--texte-3); text-align: right; transform: translateY(-0.5em); font-variant-numeric: tabular-nums; }
.planning-jour { position: relative; border-left: 1px solid var(--bord); background-image: repeating-linear-gradient(to bottom, var(--bord) 0 1px, transparent 1px var(--h-heure)); }
.planning-jour.aujourdhui { background-color: rgba(var(--primaire-rgb), 0.04); }
.zone-fermee { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, transparent 6px 12px); }
.zone-fermee span { position: sticky; top: 60px; display: block; padding: 0.4rem; font-size: 0.72rem; color: var(--texte-3); text-align: center; }
.bloc-rdv {
  position: absolute; left: 4px; right: 4px; z-index: 1; display: grid; align-content: start; gap: 0.1rem; padding: 0.35rem 0.5rem 0.35rem 0.6rem;
  border-radius: 10px; border: 1px solid; border-left-width: 4px; font: inherit; font-size: 0.76rem; line-height: 1.25; text-align: left;
  overflow: hidden; cursor: pointer; color: var(--texte); transition: transform var(--vite), box-shadow var(--vite);
}
.bloc-rdv:hover, .bloc-rdv:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); z-index: 2; }
.bloc-rdv strong { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloc-rdv .h { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--texte-2); }
.bloc-rdv .s { color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloc-rdv .etat { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.68rem; font-weight: 750; }
.bloc-rdv .etat svg { width: 12px; height: 12px; }
.bloc-rdv.court { gap: 0; padding-top: 0.25rem; }
.bloc-rdv.court .s, .bloc-rdv.sans-etat .etat { display: none; }
.bloc-rdv.mini { display: flex; align-items: center; gap: 0.35rem; padding-block: 0; }
.bloc-rdv.mini .s, .bloc-rdv.mini .etat { display: none; }
.bloc-rdv.mini .h, .bloc-rdv.mini strong { font-size: 0.72rem; }
.bloc-rdv.confirme { background: rgba(var(--succes-rgb), 0.14); border-color: rgba(var(--succes-rgb), 0.4); border-left-color: var(--succes); }
.bloc-rdv.confirme .etat { color: var(--txt-succes); }
.bloc-rdv.attente { background: rgba(var(--alerte-rgb), 0.16); border-color: rgba(var(--alerte-rgb), 0.45); border-left-color: var(--alerte); }
.bloc-rdv.attente .etat { color: var(--txt-alerte); }
.bloc-rdv.termine { background: var(--surface-2); border-color: var(--bord-fort); border-left-color: var(--texte-3); color: var(--texte-2); }
.bloc-rdv.termine .etat { color: var(--texte-3); }
.ligne-maintenant { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; background: var(--danger); box-shadow: 0 0 8px rgba(var(--danger-rgb), 0.8); pointer-events: none; }
.ligne-maintenant::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }

/* Rappels anti-lapin */
.etapes-rappel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.2rem; }
.etape-rappel { position: relative; padding: 1rem; border-radius: 16px; border: 1px solid var(--bord); background: var(--surface); }
.etape-rappel .quand { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primaire-texte); font-weight: 750; }
.etape-rappel strong { display: block; margin-top: 0.2rem; }
.etape-rappel p { font-size: 0.84rem; color: var(--texte-2); margin-top: 0.2rem; }
.etape-rappel.inactive { opacity: 0.45; }
.variables { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.variables button { padding: 0.25rem 0.55rem; border-radius: 8px; border: 1px dashed var(--bord-fort); background: var(--surface); color: var(--texte-2); font-family: var(--mono); font-size: 0.78rem; cursor: pointer; }
.variables button:hover { color: var(--texte); border-color: var(--bord-survol); }
.etat-rappel { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 650; white-space: nowrap; }
.etat-rappel svg { width: 14px; height: 14px; }
.etat-rappel.envoye { color: var(--txt-succes); }
.etat-rappel.prevu { color: var(--txt-info); }
.etat-rappel.inutile, .etat-rappel.desactive { color: var(--texte-3); }

/* Top prestations (barres horizontales : une seule série, valeurs écrites en bout de barre) */
.top-prestations { display: grid; gap: 1rem; }
.top-ligne { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0.4rem 0.8rem; align-items: center; padding: 0.35rem; border-radius: 12px; outline: none; }
.top-ligne:hover, .top-ligne:focus-visible { background: var(--surface); }
.top-rang { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; font-size: 0.82rem; }
.top-ligne .nom { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.top-ligne .nom span { color: var(--texte-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-piste { display: flex; align-items: center; gap: 0.6rem; }
.top-barre { height: 14px; min-width: 4px; border-radius: 0 4px 4px 0; background: var(--serie-fideles); transition: filter var(--vite); }
.top-ligne:hover .top-barre, .top-ligne:focus-visible .top-barre { filter: brightness(1.15); }
.top-piste small { font-size: 0.78rem; color: var(--texte-3); white-space: nowrap; }

/* Textes de la vitrine : listes modifiables (étapes, questions) */
.pile-panneaux, .pile-panneaux + .panneau { margin-top: 1.25rem; }
.liste-contenu { display: grid; gap: 0.75rem; }
.ligne-liste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.9rem; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface); }
.ligne-liste .formulaire { gap: 0.6rem; }
.ligne-liste .formulaire textarea { min-height: 72px; }
.ligne-liste .actions-ligne { display: flex; flex-direction: column; gap: 0.35rem; }

/* Image de marque */
.choix-visuels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.choix-visuel { display: grid; gap: 0.6rem; padding: 0.75rem; border-radius: 16px; border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte); font: inherit; text-align: left; cursor: pointer; transition: all var(--vite); }
.choix-visuel:hover { border-color: var(--bord-survol); }
.choix-visuel[aria-pressed="true"] { border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(var(--primaire-rgb), 0.25); }
.choix-visuel .apercu-ambiance { height: 64px; border-radius: 10px; display: flex; align-items: flex-end; gap: 6px; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.1); }
.choix-visuel .apercu-ambiance i { width: 26px; height: 8px; border-radius: 4px; display: block; }
.choix-visuel .apercu-ambiance.nuit { background: #06070b; }
.choix-visuel .apercu-ambiance.creme { background: #faf5f0; }
.choix-visuel .apercu-police { font-size: 2rem; line-height: 1; font-weight: 700; padding: 0.4rem 0.2rem; }
.choix-visuel .apercu-police.elegante { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 2.3rem; }
.choix-visuel small { color: var(--texte-3); font-size: 0.78rem; }
.paire-couleurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.tableau-conteneur { overflow-x: auto; margin-inline: -0.4rem; }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tableau th { text-align: left; font-size: 0.73rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--texte-3); font-weight: 750; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.tableau td { padding: 0.75rem 0.7rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau tr.cliquable { cursor: pointer; }
.tableau tr.cliquable:hover td { background: var(--surface); }
.tableau tr.inactif td { opacity: 0.5; }
.tableau td svg.ic { width: 15px; height: 15px; vertical-align: -2px; color: var(--texte-3); }
/* Services : une carte par soin, tout au même endroit */
.liste-soins { display: grid; gap: 0.7rem; margin-top: 0.8rem; padding: 0; list-style: none; }
.soin-admin { display: grid; grid-template-columns: auto 72px minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.7rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); }
.soin-admin.masque .soin-miniature, .soin-admin.masque .soin-infos > strong { opacity: 0.55; }
.soin-admin.en-deplacement { opacity: 0.5; }
.soin-poignee { cursor: grab; color: var(--texte-3); }
.soin-miniature { display: block; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.soin-infos { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 0; }
.soin-infos strong { overflow-wrap: anywhere; }
.soin-prix { font-weight: 600; }
.soin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
.soin-fleche { display: none; }
.carte-photo-neutre { display: block; background: radial-gradient(circle at 30% 25%, #f6eee5, transparent 60%), linear-gradient(135deg, #eadccd, #cdb6a3); }
.carte-photo.carte-photo-neutre { width: 100%; }
.choix-prix { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.photo-soin { min-width: 0; margin: 0; padding: 0.8rem; border: 1px solid var(--bord); border-radius: var(--rayon); }
.photo-soin legend { padding-inline: 0.4rem; font-weight: 600; }
.photo-soin .apercu-photo { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: var(--creux); }
.photo-soin .apercu-photo img, .photo-soin .apercu-photo .carte-photo-neutre { width: 100%; height: 100%; object-fit: cover; }
.photo-boutons { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block: 0.6rem; }
.photo-soin progress { width: 100%; height: 8px; }
.details-soin summary { cursor: pointer; font-weight: 600; padding-block: 0.4rem; }
.details-soin[open] { display: grid; gap: 0.8rem; }
@media (max-width: 720px) {
  .soin-admin { grid-template-columns: 72px minmax(0, 1fr); }
  .soin-poignee { display: none; }
  .soin-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .soin-actions .btn { min-height: 44px; }
  .soin-actions .btn-sm { flex: 1 1 28%; justify-content: center; }
  .soin-fleche { display: inline-flex; min-width: 44px; }
  .photo-boutons .btn { min-height: 44px; }
}
.actions-ligne { display: flex; gap: 0.35rem; justify-content: flex-end; }

.zones-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.zone-depot {
  position: relative; display: grid; place-items: center; align-content: center; gap: 0.5rem; min-height: 170px; padding: 1.2rem; overflow: hidden;
  border: 1.5px dashed var(--bord-fort); border-radius: 16px; background: var(--surface); text-align: center; color: var(--texte-2);
  font-size: 0.86rem; cursor: pointer; transition: all var(--vite);
}
.zone-depot.compacte { min-height: 120px; }
.zone-depot:hover, .zone-depot:focus-visible { border-color: rgba(var(--primaire-rgb), 0.7); background: rgba(var(--primaire-rgb), 0.05); }
.zone-depot.survol { border-color: var(--primaire); background: rgba(var(--primaire-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--primaire-rgb), 0.45); }
.zone-depot svg { width: 26px; height: 26px; color: var(--primaire-texte); }
.zone-depot strong { color: var(--texte); font-size: 0.92rem; }
.zone-depot img.apercu { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.zone-depot.zone-logo img.apercu, .zone-depot.zone-favicon img.apercu { object-fit: contain; padding: 1rem; background: var(--creux); }
.zone-depot .voile { position: absolute; inset: auto 0 0 0; padding: 0.6rem; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75)); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
/* Zones compactes : l'aperçu en haut, les boutons sur leur propre bande, sans chevauchement */
.zone-depot.compacte:has(.apercu) { min-height: 158px; }
.zone-depot.compacte img.apercu { inset: 0 0 46px; height: calc(100% - 46px); opacity: 1; }
.zone-depot.compacte[class*="zone-logo"] img.apercu, .zone-depot.compacte.zone-favicon img.apercu { object-fit: contain; padding: 0.6rem; background: var(--creux); }
.zone-depot.compacte[class*="zone-logo"][class*="clair"] img.apercu { background: #4b342c; }
.prix-final { margin-block: 0.8rem; padding: 0.8rem; border: 1px solid var(--bord); border-radius: var(--rayon); }
.prix-final .rangee-prix { display: flex; align-items: flex-end; gap: 0.6rem; }
.prix-final .rangee-prix .champ { flex: 1; min-width: 0; }
.prix-final #reste-salon { font-weight: 600; margin-top: 0.3rem; }
.prix-final ul { margin-top: 0.3rem; padding-left: 1rem; }
.bandeaux-proposes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.bandeaux-proposes button { padding: 2px; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; min-height: 44px; }
.bandeaux-proposes button.choisi { border-color: var(--primaire); }
.bandeaux-proposes img { display: block; width: 120px; height: 60px; border-radius: 7px; object-fit: cover; }
.zone-depot.compacte .voile { height: 46px; padding: 0.4rem; flex-wrap: nowrap; align-items: center; gap: 0.35rem; background: var(--surface); border-top: 1px solid var(--bord); }
.zone-depot.compacte .voile .btn { min-height: 0; padding: 0.35rem 0.55rem; font-size: 0.66rem; letter-spacing: 0.04em; white-space: nowrap; }
.zone-depot.compacte .voile .btn svg { width: 13px; height: 13px; }
.zone-depot.chargement::after { content: ""; position: absolute; inset: 0; background: rgba(var(--fond-rgb), 0.6) var(--chargement) center / 32px no-repeat; }
.galerie-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.7rem; margin-top: 1rem; }
.galerie-admin figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--bord); }
.galerie-admin img { width: 100%; height: 100%; object-fit: cover; }
.galerie-admin .btn { position: absolute; top: 6px; right: 6px; background: var(--verre); }
.liste-avant-apres-admin { display: grid; gap: 0.7rem; margin-top: 1rem; }
.ligne-avant-apres { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem; border-radius: 14px; border: 1px solid var(--bord); background: var(--surface); }
.ligne-avant-apres .vignettes { display: flex; gap: 4px; flex: none; }
.ligne-avant-apres .vignettes img { width: 56px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bord); }
.ligne-avant-apres .texte { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.ligne-avant-apres .texte .petit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paire-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.choix-photo { position: relative; display: grid; place-items: center; gap: 0.3rem; aspect-ratio: 4 / 5; padding: 0.75rem; border-radius: 14px; overflow: hidden;
  border: 1.5px dashed var(--bord-fort); background: var(--creux); color: var(--texte-2); text-align: center; font-size: 0.86rem; cursor: pointer; }
.choix-photo:hover, .choix-photo:focus-within { border-color: rgba(var(--primaire-rgb), 0.7); }
.choix-photo strong { color: var(--texte); }
.choix-photo svg { width: 24px; height: 24px; color: var(--primaire-texte); }
.choix-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.choix-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nuancier { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.nuancier button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.nuancier button[aria-pressed="true"] { border-color: var(--texte); }
.nuancier .auto { width: auto; padding: 0 0.7rem; border-radius: 999px; border: 1px dashed var(--bord-fort); background: transparent; color: var(--texte-2); font: inherit; font-size: 0.8rem; box-shadow: none; }
.nuancier .auto[aria-pressed="true"] { border-style: solid; border-color: var(--texte); color: var(--texte); }

.horaires-edition { display: grid; gap: 0.5rem; }
.jour-edition { display: grid; grid-template-columns: 150px repeat(4, minmax(0, 1fr)); gap: 0.6rem; align-items: center; padding: 0.6rem 0.75rem; border-radius: 14px; border: 1px solid var(--bord); background: var(--surface); }
.jour-edition.ferme .heures { opacity: 0.35; pointer-events: none; }
.jour-edition input[type="time"] { min-height: 40px; padding: 0.45rem 0.6rem; }
.jour-edition .etiquette-mobile { display: none; font-size: 0.72rem; color: var(--texte-3); }
.entetes-horaires { display: grid; grid-template-columns: 150px repeat(4, minmax(0, 1fr)); gap: 0.6rem; padding: 0 0.75rem 0.3rem; font-size: 0.72rem; color: var(--texte-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.liste-simple { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.liste-simple li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid var(--bord); background: var(--surface); }
.liste-simple li span { font-size: 0.86rem; color: var(--texte-2); }

.message-boite { display: grid; gap: 0.35rem; padding: 0.9rem 1rem; border-radius: 14px; border: 1px solid var(--bord); background: var(--surface); cursor: pointer; }
.message-boite + .message-boite { margin-top: 0.55rem; }
.message-boite .tete { display: flex; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; align-items: center; font-size: 0.84rem; color: var(--texte-3); }
.message-boite .tete strong { color: var(--texte); font-size: 0.92rem; }
.message-boite .tete svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--texte-3); }
.message-boite pre { margin: 0; white-space: pre-wrap; font-family: var(--police); font-size: 0.88rem; color: var(--texte-2); max-height: 7.5em; overflow: hidden; }
.message-boite.ouvert pre { max-height: none; }
.apercu-message { padding: 1rem; border-radius: 14px; background: var(--creux); border: 1px solid var(--bord); font-size: 0.9rem; color: var(--texte-2); white-space: pre-wrap; }
.apercu-sms { position: relative; max-width: 420px; padding: 0.8rem 1rem; border-radius: 18px 18px 18px 6px; background: rgba(var(--info-rgb), 0.12); border: 1px solid rgba(var(--info-rgb), 0.3); font-size: 0.9rem; color: var(--texte); white-space: pre-wrap; }

.fiche-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.2rem; }
.fiche-stats div { padding: 0.8rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--bord); }
.fiche-stats strong { display: block; font-size: 1.25rem; font-weight: 800; }
.fiche-stats span { font-size: 0.78rem; color: var(--texte-3); }
.notes-client { white-space: pre-line; }

/* Graphique (statistiques) — bleu = clientes fidèles, gris = nouvelles (palette validée pour chaque ambiance) */
.graphique { position: relative; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphique .grille-axe { stroke: var(--grille-axe); stroke-width: 1; shape-rendering: crispEdges; }
.graphique .texte-axe { fill: var(--texte-3); font-size: 12px; font-family: var(--police); font-variant-numeric: tabular-nums; }
.graphique .etiquette-total { fill: var(--texte); font-size: 12.5px; font-weight: 750; font-family: var(--police); }
.graphique .barre { transition: opacity var(--vite), filter var(--vite); }
.graphique .barre.fideles { fill: var(--serie-fideles); }
.graphique .barre.nouveaux { fill: var(--serie-nouveaux); }
.graphique .colonne { outline: none; }
.graphique .colonne:hover .barre, .graphique .colonne:focus .barre { filter: brightness(1.15); }
.graphique .colonne.estompee .barre { opacity: 0.45; }
.graphique .colonne:focus-visible > rect { fill: var(--surface); }
.legende { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.84rem; color: var(--texte-2); margin-bottom: 0.6rem; }
.legende span { display: inline-flex; align-items: center; gap: 0.45rem; }
.legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.infobulle { position: absolute; pointer-events: none; z-index: 5; display: grid; gap: 0.2rem; padding: 0.6rem 0.75rem; border-radius: 12px; background: var(--bulle); border: 1px solid var(--bord-fort); font-size: 0.82rem; color: var(--texte-2); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.5); white-space: nowrap; transform: translate(-50%, -100%); }
.infobulle strong { color: var(--texte); }
.infobulle b { color: var(--texte); font-size: 0.95rem; }
.cle-ligne { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 0.45rem; vertical-align: middle; }

/* ---------- Animations ---------- */
@keyframes rotation { to { transform: rotate(360deg); } }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulsation { 0% { box-shadow: 0 0 0 0 rgba(var(--succes-rgb), 0.65); } 70% { box-shadow: 0 0 0 9px rgba(var(--succes-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--succes-rgb), 0); } }
@keyframes fondu { from { opacity: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes monte-mobile { from { transform: translateY(100%); } }
@keyframes toast-entree { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes toast-sortie { to { opacity: 0; transform: translateY(10px); } }
@keyframes miroiter { to { background-position: -200% 0; } }
@keyframes eclat { 0% { box-shadow: 0 0 0 0 rgba(var(--primaire-rgb), 0.7); } 100% { box-shadow: 0 0 0 18px rgba(var(--primaire-rgb), 0); } }
.apparait { animation: monte 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---------- Adaptation tablette / mobile ---------- */
@media (max-width: 1080px) {
  .kpis, .squelette-vue .ligne-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zones-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .nav-liens { display: none; }
  .nav-liens + .btn { margin-left: auto; }
  .nav-int > .nav-menu-bouton { display: inline-flex; }
  .hero { grid-template-columns: 1fr; padding-top: 2.2rem; }
  .hero-visuel { max-width: 460px; width: 100%; margin-inline: auto; }
  .apropos, .contact { grid-template-columns: 1fr; }
  .apropos-photo { max-width: 420px; }
  .tunnel-grille, .paiement-grille { grid-template-columns: 1fr; }
  .panier { position: static; }
  .admin-app { grid-template-columns: 1fr; }
  .admin-menu {
    position: sticky; top: 0; z-index: 60; height: auto; flex-direction: row; gap: 0.25rem; padding: 0.55rem 0.6rem;
    overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--bord); scrollbar-width: none;
  }
  .admin-menu::-webkit-scrollbar { display: none; }
  .admin-menu .marque, .menu-bas { display: none; }
  .menu-lien { flex: 0 0 auto; padding: 0.55rem 0.75rem; font-size: 0.86rem; }
  .admin-entete-mobile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
  .admin-contenu { padding-top: 1.25rem; }
  .grille-2 { grid-template-columns: 1fr; }
  .jour-edition { grid-template-columns: 1fr 1fr; }
  .entetes-horaires { display: none; }
  .jour-edition > :first-child { grid-column: 1 / -1; }
  .jour-edition .etiquette-mobile { display: block; }
  .etapes-rappel { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  :root[data-decor="dentelle"] .nav-liens { display: none; }
  :root[data-decor="dentelle"] .nav-liens + .btn { margin-left: auto; }
  :root[data-decor="dentelle"] .nav-int > .nav-menu-bouton { display: inline-flex; }
}
@media (max-width: 960px) {
  :root[data-decor="dentelle"] .hero { justify-content: center; min-height: 0; padding-block: 3.5rem; }
  :root[data-decor="dentelle"] .hero-cadre::after { background: rgba(var(--fond-rgb), 0.86); }
  :root[data-decor="dentelle"] .hero-visuel .flottant-1 { display: none; }
  :root[data-decor="dentelle"] .hero-texte { justify-items: center; text-align: center; }
  :root[data-decor="dentelle"] .hero-immersif .hero { justify-content: flex-start; align-items: flex-end; padding-top: calc(var(--nav-h) + var(--esp-6)); padding-bottom: var(--esp-6); }
  :root[data-decor="dentelle"] .hero-immersif .hero-texte { justify-items: start; text-align: left; width: 100%; }
  :root[data-decor="dentelle"] .hero-immersif .hero-actions { justify-content: flex-start; width: 100%; }
  :root[data-decor="dentelle"] .hero-immersif .hero-actions .btn-primaire { flex: 1 1 100%; }
  :root[data-decor="dentelle"] .hero-immersif .hero-actions .btn-fantome { flex: 0 0 auto; }
  :root[data-decor="dentelle"] .hero-immersif .hero-cadre::after {
    background: linear-gradient(180deg, rgba(var(--espresso-rgb), 0.46) 0%, rgba(var(--espresso-rgb), 0.34) 26%, rgba(var(--espresso-rgb), 0.78) 58%, rgba(var(--espresso-rgb), 0.9) 100%);
  }
  :root[data-decor="dentelle"] .hero-actions, :root[data-decor="dentelle"] .atouts { justify-content: center; }
}
@media (max-width: 960px) {
  :root[data-decor="dentelle"] .ouverture-contenu > [data-ouverture-texte], :root[data-decor="dentelle"] .ouverture-contenu > .btn { display: none; }
  :root[data-decor="dentelle"] .ouverture-contenu { gap: clamp(0.3rem, 1.6cqi, 0.75rem); }
  :root[data-decor="dentelle"] .ouverture-date { font-size: clamp(1.9rem, 6.2cqi, 3rem); }
  :root[data-decor="dentelle"] .ouverture-cadre h2 { font-size: clamp(1.1rem, 3.5cqi, 1.6rem); }
  :root[data-decor="dentelle"] .decompte strong { font-size: clamp(1.7rem, 5cqi, 2.4rem); }
  :root[data-decor="dentelle"] .ouverture-suite { display: grid; justify-items: center; gap: var(--esp-5); margin-top: var(--esp-6); text-align: center; color: var(--ivoire); }
  :root[data-decor="dentelle"] .ouverture-suite .ouverture-texte { max-width: 52ch; font-size: 1rem; line-height: var(--interligne); color: rgba(var(--ivoire-rgb), 0.86); }
  :root[data-decor="dentelle"] .ouverture-suite .btn { --b-fond: var(--ivoire); --b-texte: var(--espresso); --b-bord: transparent; white-space: normal; text-align: center; line-height: 1.3; }
}
@media (max-width: 640px) {
  .modal.tiroir { place-items: end stretch; }
  .tiroir .modal-boite { width: 100%; border-width: 0; animation-name: tiroir-bas; }
  .nav-int { gap: 0.5rem; }
  .nav-int > .btn-primaire { display: none; } /* la barre du bas propose déjà de réserver */
  .nav-int > .nav-panier { margin-left: auto; }
  :root[data-decor="dentelle"] .ouverture-cadre { width: min(100%, 420px); aspect-ratio: 1068 / 1573; }
  :root[data-decor="dentelle"] .ouverture-cadre::before { background-image: url("../img/cadre-dentelle-vertical.webp"); }
  :root[data-decor="dentelle"] .ouverture-contenu { left: 48.6%; top: 50.3%; width: 58%; gap: clamp(0.4rem, 2.6cqi, 0.8rem); }
  :root[data-decor="dentelle"] .ouverture-cadre .surtitre { gap: 0.35rem; font-size: 0.62rem; letter-spacing: 0.18em; white-space: nowrap; }
  :root[data-decor="dentelle"] .ouverture-cadre .surtitre::before, :root[data-decor="dentelle"] .ouverture-cadre .surtitre::after { display: none; }
  :root[data-decor="dentelle"] .ouverture-date { font-size: clamp(1.6rem, 9.6cqi, 2.4rem); }
  :root[data-decor="dentelle"] .ouverture-cadre h2 { font-size: clamp(1.05rem, 6cqi, 1.5rem); }
  :root[data-decor="dentelle"] .decompte strong { font-size: clamp(1.7rem, 9cqi, 2.4rem); }
  :root[data-decor="dentelle"] .ouverture-suite .btn { width: min(100%, 420px); }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  :root[data-decor="dentelle"] { --nav-h: 66px; }
  :root[data-decor="dentelle"] .marque-logo:has(img), :root[data-decor="dentelle"] .marque-logo img { height: 42px; }
  :root[data-decor="dentelle"] .grille-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  :root[data-decor="dentelle"] .annonce { font-size: 0.62rem; letter-spacing: 0.12em; }
  .hero-actions .btn { flex: 1 1 100%; }
  .nav-int { min-height: 62px; gap: 0.75rem; }
  .flottant { position: relative; inset: auto; margin-top: 0.75rem; max-width: none; animation: none; }
  .flottant-2 { display: none; }
  .barre-mobile {
    transition: transform 0.3s ease;
    display: block; position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; padding: 0.75rem 16px calc(0.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(var(--fond-rgb), 0), rgba(var(--fond-rgb), 0.92) 30%);
  }
  .barre-mobile .contenu { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.55rem 0.55rem 1rem; border-radius: 999px; background: var(--bulle); border: 1px solid var(--bord-fort); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .barre-mobile .contenu > div { flex: 1; min-width: 0; font-size: 0.84rem; color: var(--texte-2); line-height: 1.3; }
  .barre-mobile .contenu strong { display: block; color: var(--texte); font-size: 1rem; }
  .avec-barre .toasts { bottom: 96px; }
  .avec-barre .pied { padding-bottom: 6.5rem; }
  .rangee, .rangee-3, .paire-couleurs { grid-template-columns: 1fr; }
  .modal { padding: 0; place-items: end stretch; }
  .modal-boite { width: 100%; max-height: 94vh; border-radius: 24px 24px 0 0; animation: monte-mobile 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); }
  .modal-pied { flex-direction: column; align-items: stretch; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .modal-pied .btn { width: 100%; }
  .grille-creneaux { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .ligne-service { grid-template-columns: 1fr; }
  .ligne-service .btn { width: 100%; }
  .paiement-entete { align-items: flex-start; }
  .anneau { width: 84px; height: 84px; }
  .resa { grid-template-columns: 1fr; }
  .resa-cote { justify-items: start; text-align: left; }
  .resa-actions { justify-content: stretch; width: 100%; }
  .resa-actions .btn { flex: 1; }
  .agenda-rdv { grid-template-columns: 84px minmax(0, 1fr); }
  .agenda-rdv > :last-child { grid-column: 1 / -1; justify-self: start; }
  .kpi .valeur { font-size: 1.5rem; }
  .zones-images { grid-template-columns: 1fr !important; } /* l'emporte sur les deux colonnes écrites dans la page */
  .fiche-stats { grid-template-columns: 1fr 1fr; }
  .planning { --h-heure: 52px; max-height: 70vh; }
  .planning-grille { grid-template-columns: 48px repeat(7, minmax(118px, 1fr)); min-width: 880px; }
}
/* Parcours sans paiement en ligne : chaque texte n'apparaît que dans son mode */
.sans-paiement [data-paiement] { display: none !important; }
body:not(.sans-paiement) [data-sans-paiement] { display: none !important; }
.mention-prix { margin-top: 0.5rem; color: var(--texte-3); }
.case-longue { display: flex; align-items: flex-start; }
.case-longue input { flex: none; margin-top: 0.15rem; }
.recap-contrat { font-size: 0.84rem; color: var(--texte-2); }
.recap-contrat h3 { margin-bottom: 0.35rem; font-size: 0.95rem; }
.recap-contrat ul { margin: 0.5rem 0; padding-left: 1.1rem; }
.recap-contrat li + li { margin-top: 0.3rem; }
.bloc-legal { margin-top: 1rem; color: var(--texte-2); }
.contact-rdv { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.contact-rdv .btn { min-height: 40px; }
.alerte-expiration { margin-top: 0.3rem; font-weight: 650; color: var(--txt-alerte, var(--texte)); }
.grille-consignes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.consigne h3 { margin-bottom: 0.4rem; font-size: 1.1rem; }
.consigne p { white-space: pre-line; color: var(--texte-2); }
.temoignage blockquote { font-family: var(--police-titres); font-size: 1.15rem; line-height: 1.4; }
.temoignage figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--texte-3); }
.zone-2fa { display: grid; gap: 0.7rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--bord); border-radius: var(--rayon-sm); background: var(--surface); }
.qr-2fa { width: max-content; padding: 0.4rem; border-radius: 8px; background: #fff; }
.codes-secours { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.3rem 1.5rem; margin: 0; padding: 0; list-style: none; }
/* Bandeau photo en haut des pages */
.bandeau-page { position: relative; display: flex; align-items: flex-end; height: 42vh; min-height: 300px; margin-top: calc(-1 * var(--nav-h)); overflow: hidden; background: var(--espresso, #2b211c); }
.bandeau-page.fin { height: 25vh; min-height: 210px; }
/* Détails d'un soin : panneau qui monte du bas sur téléphone */
@keyframes feuille-monte { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 640px) {
  #modal-soin, #modal-creneau, .modal.feuille-mobile { place-items: end stretch; padding: 0; }
  #modal-soin .modal-boite, #modal-creneau .modal-boite, .modal.feuille-mobile .modal-boite { width: 100%; max-height: 92dvh; border-radius: var(--rayon-lg) var(--rayon-lg) 0 0; animation: feuille-monte 0.28s ease; }
}
.bandeau-page img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--focus, 50%); }
.bandeau-page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(43, 33, 28, var(--voile, 0.45)), rgba(43, 33, 28, calc(var(--voile, 0.45) * 0.75))); }
:root[data-texte-bandeau="fonce"] .bandeau-page::after { background: linear-gradient(to bottom, rgba(var(--ivoire-rgb), var(--voile, 0.45)), rgba(var(--ivoire-rgb), calc(var(--voile, 0.45) * 0.75))); }
.bandeau-texte { position: relative; z-index: 1; width: 100%; padding-block: 0 clamp(1.25rem, 3vh, 2.25rem); color: var(--ivoire, #fbf9f7); }
:root[data-texte-bandeau="fonce"] .bandeau-texte { color: var(--espresso, #2b211c); }
:root[data-decor] .bandeau-texte .surtitre { color: inherit; opacity: 0.95; }
:root[data-decor] .bandeau-texte .surtitre::before { background: currentColor; }
.bandeau-titre { font-family: var(--police-titres); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 500; line-height: 1.1; color: inherit; }
.bandeau-page.fin .bandeau-titre { font-size: clamp(1.8rem, 4vw, 2.6rem); }
:root[data-decor="dentelle"] .avec-bandeau.hero-immersif:not(.defile) .barre-mobile { transform: none; }
/* Cartes des soins */
.grille-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
/* Choix du créneau : un mois entier, puis toutes les heures libres du jour */
.calendrier-mois { max-width: 420px; margin-inline: auto; }
.cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.cal-tete strong { font-family: var(--police-titres); font-size: 1.25rem; font-weight: 600; }
.cal-tete .btn { font-size: 1.3rem; min-width: 44px; min-height: 44px; }
.cal-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.2rem; }
.cal-nom { padding-block: 0.25rem; text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--texte-3); }
.jour-cal { aspect-ratio: 1; min-height: 40px; border: 1px solid var(--bord-fort); border-radius: 10px; background: var(--carte-fond); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.jour-cal:hover:not(:disabled) { border-color: var(--primaire); }
.jour-cal[aria-pressed="true"] { background: var(--primaire); border-color: transparent; color: var(--sur-primaire); }
.jour-cal:disabled { border-color: transparent; background: transparent; color: var(--texte-3); opacity: 0.45; font-weight: 400; cursor: not-allowed; }
.cal-legende { margin-block: 0.4rem 0.9rem; text-align: center; }
/* Page Soins : d'abord les soins, le prix et le bouton */
.titre-repli { display: none; }
.bandeau-page.avec-action { height: auto; min-height: 340px; padding-top: calc(var(--nav-h) + 2.6rem); padding-bottom: 1.5rem; }
.bandeau-sous-titre { margin-block: 0.25rem 0.9rem; font-size: 1rem; opacity: 0.95; }
.bandeau-texte .btn-primaire { min-height: 44px; }
.section-soins { padding-block: 1.1rem; }
.comment-marche { padding-block: 1rem 0; }
.etapes-resa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.93rem; color: var(--texte-2); }
.etapes-resa li { display: flex; align-items: center; gap: 0.6rem; }
.etape-numero { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--primaire-texte); border-radius: 50%; font-family: var(--police-titres); color: var(--primaire-texte); }
body[data-vue="soins"] .grille-services { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; }
body[data-vue="soins"] .carte-photo { aspect-ratio: 2 / 1; }
body[data-vue="soins"] .section-tete { margin-bottom: 0.8rem; }
body[data-vue="soins"] .carte-corps { padding: 0.9rem 1.1rem 1rem; }
.carte-service .description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex: none; }
.carte-corps { justify-content: flex-start; }
.carte-actions { margin-top: auto; }
.une-categorie .carte-service .categorie { display: none; }
.etiquettes-ideal { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.etiquettes-ideal li { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--surface-2); color: var(--texte-2); font-size: 0.76rem; }
.ligne-prix-soin { display: flex; align-items: baseline; gap: 0.45rem; margin-top: 0.7rem; color: var(--texte-2); }
.ligne-prix-soin strong { font-family: var(--police-titres); font-size: 1.5rem; font-weight: 600; color: var(--texte); }
.carte-actions { align-items: center; }
.carte-service.en-valeur { animation: en-valeur 1.6s ease; }
@keyframes en-valeur { 30% { box-shadow: 0 0 0 3px var(--primaire-texte); } }
.guide-soins, .bon-a-savoir { padding: 1.3rem 1.4rem; border: 1px solid var(--bord); border-radius: 18px; background: var(--carte-fond); }
.guide-soins h2, .bon-a-savoir h2, #faq-soins h2, .bande-fin-soins h2 { font-family: var(--police-titres); font-size: 1.6rem; font-weight: 500; }
.guide-soins ul, .bon-a-savoir ul { margin: 0.6rem 0; padding: 0; list-style: none; }
.ligne-guide { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; min-height: 44px; padding: 0.4rem 0; border: 0; border-bottom: 1px solid var(--bord); background: none; color: var(--texte-2); font: inherit; text-align: left; cursor: pointer; transition: color 0.3s ease; }
.ligne-guide strong { display: inline-flex; align-items: center; gap: 0.35rem; flex: none; color: var(--texte); }
.ligne-guide svg { width: 16px; height: 16px; }
.ligne-guide:hover { color: var(--texte); }
.bon-a-savoir li { position: relative; padding: 0.25rem 0 0.25rem 1rem; color: var(--texte-2); font-size: 0.93rem; }
.bon-a-savoir li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 5px; height: 5px; border-radius: 50%; background: var(--primaire-texte); }
.question-soin { border-bottom: 1px solid var(--bord); }
.question-soin summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.question-soin p { padding-bottom: 0.8rem; color: var(--texte-2); }
.bande-fin-soins { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.6rem 1.8rem; border-radius: 18px; background: var(--surface-2); }
.bande-fin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.ajout-soin { margin-bottom: 0.7rem; }
.actions-recap { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.8rem; }
.actions-recap .btn { min-height: 44px; }
body[data-vue="soins"] .grille-rassurance { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
body[data-vue="soins"] .rassurance { padding: 0.7rem 0.85rem; }
body[data-vue="soins"] .rassurance h3 { font-size: 1rem; }
body[data-vue="soins"] .rassurance p { font-size: 0.8rem; }
@media (max-width: 767px) {
  body[data-vue="soins"] .grille-services { grid-template-columns: minmax(0, 1fr); }
  body[data-vue="soins"] .grille-rassurance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes-resa { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .bandeau-page.avec-action { min-height: 0; padding-top: calc(var(--nav-h) + 2.2rem); padding-bottom: 1.3rem; }
  .carte-actions .btn-primaire { flex: 1; min-height: 44px; }
  .lien-action[data-details] { min-height: 44px; padding-inline: 0.8rem; }
}
/* Grand écran : photo à gauche, pour voir les prix des deux premiers soins sans défiler */
@media (min-width: 1024px) {
  body[data-vue="soins"] .grille-services { max-width: none; }
  body[data-vue="soins"] .carte-service { display: grid; grid-template-columns: 42% minmax(0, 1fr); }
  body[data-vue="soins"] .carte-photo { aspect-ratio: auto; height: 100%; min-height: 270px; }
}
@media (prefers-reduced-motion: reduce) { .carte-service.en-valeur { animation: none; outline: 3px solid var(--primaire-texte); } }
.grille-services:has(> :only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
:root[data-decor="dentelle"] .carte-service { padding: 0; gap: 0; border-radius: 18px; }
:root[data-decor="dentelle"] .carte-service:hover { transition: all 0.3s ease; }
.carte-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.carte-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.carte-badge { position: absolute; top: 0.7rem; left: 0.7rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--ivoire, #fff); color: var(--espresso, #2b211c); font-size: 0.72rem; font-weight: 650; box-shadow: var(--ombre-douce); }
.carte-corps { display: flex; flex: 1; flex-direction: column; gap: 0.45rem; padding: 1.15rem 1.25rem 1.25rem; }
.carte-service h3 { font-family: var(--police-titres); font-size: 1.45rem; font-weight: 500; line-height: 1.2; }
.carte-infos-soin { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--bord); }
.carte-infos-soin .prix { font-size: 1.1rem; font-weight: 700; }
.carte-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.3rem; }
.carte-actions .btn { min-height: 44px; }
@media (hover: hover) { .carte-service:hover .carte-photo img { transform: scale(1.04); } }
:root[data-decor] .puce:has(img) { display: inline-flex; align-items: center; gap: 0.5rem; padding-block: 0.3rem; padding-inline-start: 0.4rem; }
.puce img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.grille-rassurance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.rassurance { padding: 0.9rem 1rem; border: 1px solid var(--bord); border-radius: 18px; background: var(--carte-fond); }
.rassurance h3 { font-family: var(--police-titres); font-size: 1.1rem; font-weight: 600; }
.rassurance p { font-size: 0.84rem; color: var(--texte-2); }
.soin-photo { aspect-ratio: 3 / 2; margin-bottom: 1rem; overflow: hidden; border-radius: 16px; }
.soin-photo img { width: 100%; height: 100%; object-fit: cover; }
.soin-bloc { margin-top: 1rem; }
.soin-bloc h3 { margin-bottom: 0.3rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texte-3); }
.soin-bloc ul { padding-left: 1.1rem; }
#soin-corps > .btn-bloc { margin-top: 1rem; }
@media (max-width: 1023px) {
  .grille-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-rassurance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grille-services { grid-template-columns: minmax(0, 1fr); }
  .bandeau-page { height: 32vh; min-height: 250px; }
  .bandeau-page.fin { height: 24vh; min-height: 180px; }
  #filtres-categories { position: sticky; top: var(--nav-bas); z-index: 5; flex-wrap: nowrap; margin-inline: -1rem; padding: 0.5rem 1rem; overflow-x: auto; background: rgba(var(--ivoire-rgb), 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); scrollbar-width: none; }
  #filtres-categories .puce { flex: none; min-height: 44px; }
  #soin-corps { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}
.ligne-categorie { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.ligne-categorie img { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.apercu-soin { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.apercu-photo { width: 180px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; background: var(--surface-2); }
.apercu-photo img { width: 100%; height: 100%; object-fit: cover; }
.ligne-bandeau { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1rem; padding-block: 0.75rem; border-top: 1px solid var(--bord); }
@media (max-width: 640px) { .ligne-bandeau { grid-template-columns: minmax(0, 1fr); } }

/* Planning : gabarit des vues Jour, Semaine en liste et Mois */
.planning.planning-mobile { overflow: visible; max-height: none; border: 0; border-radius: 0; background: none; }
.pm-bande { position: sticky; top: 0; z-index: 6; display: grid; gap: 0.35rem; padding: 0.35rem; border: 1px solid var(--bord); border-radius: var(--rayon-sm); background: var(--fond-2); box-shadow: var(--ombre-douce); }
.pm-semaine { display: flex; align-items: center; gap: 0.15rem; min-width: 0; }
.pm-semaine strong { flex: 1; min-width: 0; font-size: 0.86rem; line-height: 1.2; text-align: center; }
.pm-semaine .btn, .pm-jour-tete .btn-icone { flex: none; min-width: 44px; min-height: 44px; }
.pm-semaine .btn-icone { background: none; border-color: transparent; box-shadow: none; }
.pm-semaine .btn-sm { padding-inline: 0.65rem; letter-spacing: 0.04em; font-size: 0.68rem; }
.pm-jours { position: relative; display: flex; gap: 0.2rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.pm-jours::-webkit-scrollbar { display: none; }
.pm-pastille { flex: 1 0 46px; display: grid; justify-items: center; gap: 0.05rem; min-height: 58px; padding: 0.3rem 0 0.25rem; border: 1px solid transparent; border-radius: var(--rayon-sm); background: none; color: var(--texte); font: inherit; cursor: pointer; }
.pm-pastille .j { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-3); font-weight: 700; }
.pm-pastille .n { font-size: 1.08rem; font-weight: 750; line-height: 1.2; }
.pm-pastille i { width: 6px; height: 6px; border-radius: 50%; }
.pm-pastille i.plein { background: var(--primaire); }
.pm-pastille.ferme .n { color: var(--texte-3); font-weight: 500; }
.pm-pastille.aujourdhui { border-color: var(--bord-fort); }
.pm-pastille.actif { border-color: var(--espresso, var(--primaire)); background: var(--espresso, var(--primaire)); }
.pm-pastille.actif .j, .pm-pastille.actif .n { color: var(--ivoire, #fff); }
.pm-pastille.actif i.plein { background: var(--ivoire, #fff); }
.pm-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem; margin: 0.75rem 0; padding: 0.2rem; border-radius: var(--rayon-sm); background: var(--surface-2); }
.pm-modes button { min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--texte-2); font: inherit; font-size: 0.9rem; font-weight: 650; cursor: pointer; }
.pm-modes button[aria-pressed="true"] { background: var(--carte-fond); color: var(--texte); box-shadow: var(--ombre-douce); }
.pm-jour-tete { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.75rem; text-align: center; }
.pm-jour-tete > div { min-width: 0; }
.pm-jour-tete h2 { font-size: 1.2rem; line-height: 1.2; }
.pm-jour-tete h2::first-letter { text-transform: uppercase; }
.pm-jour-tete p { font-size: 0.8rem; color: var(--texte-3); }
.pm-balayage { touch-action: pan-y; }
.pm-chrono { display: grid; grid-template-columns: 42px minmax(0, 1fr); padding-top: 0.6rem; }
.pm-chrono .planning-heures { position: static; background: none; }
.pm-chrono .planning-heures div { padding: 0 0.45rem 0 0; font-size: 0.74rem; }
.pm-chrono .planning-jour { border: 1px solid var(--bord); border-radius: var(--rayon-sm); background-color: var(--carte-fond); }
.pm-chrono .zone-fermee { z-index: 0; }
.pm-bloc.bloc-rdv { display: grid; align-content: center; gap: 0.15rem; min-width: 0; padding: 0.3rem 0.55rem; font-size: 0.82rem; }
.pm-bloc:hover, .pm-bloc:focus-visible { transform: none; }
.pm-ligne { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.pm-ligne .h { white-space: nowrap; }
.pm-ligne .etat { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-qui { display: grid; gap: 0.05rem; min-width: 0; }
.pm-qui strong { font-size: 0.96rem; }
.pm-bloc.compact { padding-block: 0.1rem; gap: 0; line-height: 1.2; }
.pm-bloc.compact .pm-qui { display: flex; align-items: baseline; gap: 0.4rem; }
.pm-bloc.compact .pm-qui strong { flex: 0 1 auto; font-size: 0.84rem; }
.pm-bloc.compact .s { flex: 1 1 0; min-width: 0; font-size: 0.74rem; }
.pm-groupe + .pm-groupe { margin-top: 1.1rem; }
.pm-groupe h3 { margin-bottom: 0.45rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texte-3); }
.pm-groupe h3.aujourdhui { color: var(--primaire-texte); }
.pm-groupe .pm-bloc { position: relative; left: auto; right: auto; width: 100%; min-height: 76px; }
.pm-groupe .pm-bloc + .pm-bloc { margin-top: 0.45rem; }
.pm-vide { display: grid; justify-items: center; gap: 0.3rem; padding: 2.75rem 1rem; border: 1px dashed var(--bord-fort); border-radius: var(--rayon-sm); color: var(--texte-3); text-align: center; }
.pm-vide svg { width: 30px; height: 30px; margin-bottom: 0.4rem; color: var(--or, var(--primaire)); }
.pm-vide strong { font-family: var(--police-titres); font-size: 1.25rem; font-weight: 500; color: var(--texte); }
.pm-vide span { font-size: 0.86rem; }
.planning-resume { margin: 0.1rem 0 0.75rem; font-size: 0.86rem; font-weight: 600; color: var(--texte-2); }
.planning-barre .pm-modes { margin: 0; min-width: 270px; }
.planning-barre .planning-resume { margin: 0; }
.pm-groupe .pm-bloc.bloc-rdv { position: relative; }
.mois-tete { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: 0.3rem; text-align: center; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--texte-3); }
.mois-corps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--bord); border-radius: var(--rayon-sm); background: var(--bord); }
.mois-case { min-width: 0; min-height: 118px; display: grid; align-content: start; gap: 0.2rem; padding: 0.3rem; background: var(--carte-fond); }
.mois-case.ferme { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--carte-fond) 6px 12px); }
.mois-case.hors .n { color: var(--texte-3); opacity: 0.6; }
.mois-jour { display: flex; align-items: center; justify-content: space-between; gap: 0.2rem; width: 100%; min-height: 30px; padding: 0.1rem 0.25rem; border: 0; border-radius: 8px; background: none; color: var(--texte); font: inherit; cursor: pointer; }
.mois-jour:hover, .mois-jour:focus-visible { background: var(--surface-2); }
.mois-jour .n { font-weight: 700; font-size: 0.92rem; }
.mois-case.aujourdhui .n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--espresso, var(--primaire)); color: var(--ivoire, #fff); }
.mois-compte { min-width: 20px; padding: 0 0.3rem; border-radius: 999px; background: rgba(var(--succes-rgb), 0.18); color: var(--txt-succes); font-size: 0.72rem; font-weight: 750; text-align: center; }
.mois-compte.attente { background: rgba(var(--alerte-rgb), 0.2); color: var(--txt-alerte); }
.mois-liste { display: grid; gap: 0.15rem; min-width: 0; }
.mois-rdv, .mois-plus { display: block; width: 100%; min-width: 0; padding: 0.1rem 0.3rem; border: 0; border-left: 3px solid; border-radius: 5px; background: var(--surface-2); color: var(--texte); font: inherit; font-size: 0.7rem; line-height: 1.35; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.mois-rdv.confirme { border-color: var(--succes); background: rgba(var(--succes-rgb), 0.12); }
.mois-rdv.attente { border-color: var(--alerte); background: rgba(var(--alerte-rgb), 0.14); }
.mois-rdv.termine { border-color: var(--texte-3); color: var(--texte-2); }
.mois-plus { border-left: 0; background: none; color: var(--texte-3); font-weight: 700; }
@media (max-width: 640px) {
  .tete-planning { align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
  .tete-planning p { display: none; }
  .tete-planning .btn { min-height: 44px; }
  .planning-barre { display: none; }
  .fiche-rdv .modal-boite { height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .fiche-rdv .modal-corps { flex: 1; min-height: 0; }
  .fiche-rdv .modal-tete { padding-top: calc(1.1rem + env(safe-area-inset-top)); }
  .fiche-rdv .modal-tete .btn, .fiche-rdv .modal-corps a.btn, .fiche-rdv .modal-corps button.btn { min-width: 44px; min-height: 44px; }
  .fiche-rdv .modal-corps a.btn, .fiche-rdv .modal-corps button.btn { flex: 1 1 40%; }
  .fiche-rdv .modal-pied .btn { min-height: 44px; }
  .pm-bande { top: 60px; }
  .mois-case { min-height: 52px; padding: 0.1rem; position: relative; }
  .mois-liste { display: none; }
  .mois-jour { flex-direction: column; justify-content: flex-start; gap: 0.05rem; min-height: 50px; padding: 0.2rem 0; }
}
/* Barre en verre : très translucide sur la photo, plus présente au défilement, jamais pleine */
:root:not([data-ambiance]) .nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-decor="dentelle"] .nav {
  background: rgba(var(--ivoire-rgb), 0.6); border-bottom-color: rgba(var(--ivoire-rgb), 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  transition: background 0.3s ease, border-color 0.3s ease;
}
:root[data-decor="dentelle"] .hero-immersif:not(.defile) .nav:not(.ouvert) {
  background: rgba(var(--ivoire-rgb), 0.14); border-bottom-color: rgba(var(--ivoire-rgb), 0.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
/* Voile derrière la barre : c'est lui, et non l'opacité de la barre, qui porte le contraste du logo */
.nav::before { content: ""; position: absolute; inset: 0 0 auto; height: 140px; z-index: -1; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  background: linear-gradient(to bottom, rgba(43, 33, 28, 0.45), rgba(43, 33, 28, 0)); }
:root[data-texte-bandeau="fonce"] .nav::before { background: linear-gradient(to bottom, rgba(var(--ivoire-rgb), 0.6), rgba(var(--ivoire-rgb), 0)); }
/* Bandeaux des pages : photos souvent claires, le voile couvre toute la hauteur du logo */
:root[data-texte-bandeau="clair"] .avec-bandeau .nav::before { height: 170px; background: linear-gradient(to bottom, rgba(43, 33, 28, 0.62), rgba(43, 33, 28, 0.5) 110px, rgba(43, 33, 28, 0)); }
.hero-immersif:not(.defile) .nav:not(.ouvert)::before { opacity: 1; }
/* Logo : deux versions superposées, le fondu suit l'état de la barre */
:root[data-decor="dentelle"] { --nav-h: 100px; --nav-bas: 78px; --logo-h: 90px; --logo-bas: 62px; }
/* La barre s'affine au défilement : la marge compense, le contenu ne bouge pas */
:root[data-decor="dentelle"] .nav-int { min-height: var(--nav-h); transition: min-height 0.3s ease; }
:root[data-decor="dentelle"] .nav { transition: background 0.3s ease, border-color 0.3s ease, margin-bottom 0.3s ease; }
:root[data-decor="dentelle"] .defile .nav-int { min-height: var(--nav-bas); }
:root[data-decor="dentelle"] .defile .nav { margin-bottom: calc(var(--nav-h) - var(--nav-bas)); }
/* Logo vectoriel : un seul tracé, sa couleur suit l'état de la barre */
.logo-svg { display: block; height: var(--logo-h); aspect-ratio: 1119 / 598; color: #4b342c; transition: color 0.3s ease, height 0.3s ease; }
.logo-svg svg { display: block; width: 100%; height: 100%; }
:root[data-decor] .marque-logo:has(.logo-svg) { width: auto; height: auto; border-radius: 0; overflow: visible; }
:root[data-decor="dentelle"] .marque:has(.logo-svg) .marque-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.defile .nav .logo-svg { height: var(--logo-bas); }
:root[data-texte-bandeau="clair"] .hero-immersif:not(.defile) .nav:not(.ouvert) .logo-svg { color: #f2e9de; filter: drop-shadow(0 1px 6px rgba(43, 33, 28, 0.35)); }
.admin-app .logo-svg { height: 52px; }
.admin-menu .marque:has(.logo-svg) { padding-bottom: 0.6rem; }
.connexion-carte .logo-svg { height: 96px; margin-inline: auto; }
.logo-paire { display: grid; }
.logo-v { grid-area: 1 / 1; display: block; transition: opacity 0.3s ease; }
.logo-clair { opacity: 0; }
:root[data-decor] .nav .marque-logo .logo-v img { display: block; width: auto; max-width: none; height: var(--logo-h); filter: none; transition: height 0.3s ease; }
:root[data-decor] .defile .nav .marque-logo .logo-v img { height: var(--logo-bas); }
:root[data-texte-bandeau="clair"] .hero-immersif:not(.defile) .nav:not(.ouvert) .logo-clair { opacity: 1; }
:root[data-texte-bandeau="clair"] .hero-immersif:not(.defile) .nav:not(.ouvert) .logo-fonce { opacity: 0; }
:root[data-decor="dentelle"] .hero-immersif:not(.defile) .nav:not(.ouvert) .marque-logo .logo-v img { filter: drop-shadow(0 1px 6px rgba(43, 33, 28, 0.35)); }
:root[data-decor="dentelle"] .marque-logo:has(.logo-paire) { height: auto; }
.nav .marque { flex: none; min-height: 44px; }
@media (max-width: 640px) {
  :root[data-decor="dentelle"] { --nav-h: 80px; --nav-bas: 66px; --logo-h: 68px; --logo-bas: 54px; }
  .nav-int > .nav-panier, .nav-int > .nav-menu-bouton { min-width: 44px; min-height: 44px; }
  .nav-int > .btn-fantome .texte-long { display: none; }
  :root[data-decor="dentelle"] .nav-int > .btn-fantome { padding-inline: 0.65rem; letter-spacing: 0.02em; font-size: 0.68rem; white-space: nowrap; }
}
@media (max-width: 400px) {
  .nav-int > .btn-fantome { display: none; } /* le logo ramène déjà à l'accueil */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}