/* ==========================================================================
   Charte graphique — cabinet de massage bien-être
   Direction artistique : calme, épurée, chaleureuse (CDC 10.1)
   Palette neutre et naturelle : sable, terracotta douce, vert sauge
   Accessibilité : contrastes ≥ 4,5:1, focus visible, base 16 px (CDC 10.4)
   ========================================================================== */

:root {
    /* Couleurs */
    --craie:            #fffdf9;
    --sable:            #f7f2ea;
    --sable-2:          #efe6d9;
    --sable-3:          #e3d7c6;
    --encre:            #2e2a26;
    --encre-doux:       #5b534b;
    --encre-clair:      #8a8078;
    --terracotta:       #c1704f;
    --terracotta-fonce: #a25a3d;
    --terracotta-pale:  #f6e7df;
    --sauge:            #7e9184;
    --sauge-fonce:      #5c6e61;
    --sauge-pale:       #e8efe9;
    --succes:           #3f7d5c;
    --alerte:           #a8452f;
    --info:             #4a6b86;

    /* Typographie : deux familles maximum (CDC 10.1).
       Polices système pour éviter tout appel réseau bloquant ;
       remplacer par les fichiers auto-hébergés du client si besoin. */
    --titre: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Rythme */
    --r-xs: .5rem;
    --r-sm: .875rem;
    --r-md: 1.5rem;
    --r-lg: 2.5rem;
    --r-xl: 4rem;
    --r-2xl: 6rem;

    --arrondi: 14px;
    --arrondi-sm: 8px;
    --ombre: 0 1px 2px rgba(46, 42, 38, .05), 0 8px 24px rgba(46, 42, 38, .06);
    --ombre-forte: 0 2px 4px rgba(46, 42, 38, .07), 0 16px 40px rgba(46, 42, 38, .1);
    --largeur: 1140px;
    --transition: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` doit primer sur les display des composants (.encart, .nav...). */
[hidden] { display: none !important; }

html { font-size: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--texte);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--encre);
    background: var(--craie);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--titre); font-weight: 600; line-height: 1.2; color: var(--encre); margin: 0 0 var(--r-sm); }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0 0 var(--r-sm); }
p:last-child { margin-bottom: 0; }

a { color: var(--terracotta-fonce); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--encre); }

img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
    outline: 3px solid var(--terracotta-fonce);
    outline-offset: 3px;
    border-radius: 4px;
}

.lien-evitement {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--encre); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--arrondi-sm) 0;
}
.lien-evitement:focus { left: 0; color: #fff; }

.conteneur { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.conteneur-etroit { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.section { padding-block: var(--r-2xl); }
.section--sable { background: var(--sable); }
.section--sauge { background: var(--sauge-pale); }
.section--compacte { padding-block: var(--r-xl); }

.surtitre {
    display: inline-block;
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--sauge-fonce); margin-bottom: var(--r-xs);
}
.chapeau { font-size: 1.1rem; color: var(--encre-doux); max-width: 62ch; }
.texte-doux { color: var(--encre-doux); }
.petit { font-size: .875rem; }
.tres-petit { font-size: .8rem; }
.centre { text-align: center; }
.centre .chapeau { margin-inline: auto; }
.visuellement-cache {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ boutons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--texte); font-size: 1rem; font-weight: 600; line-height: 1;
    padding: .95rem 1.6rem; border: 1.5px solid transparent; border-radius: 999px;
    cursor: pointer; text-decoration: none; text-align: center;
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn--primaire { background: var(--terracotta-fonce); color: #fff; }
.btn--primaire:hover { background: #8d4c33; color: #fff; }
.btn--secondaire { background: transparent; color: var(--encre); border-color: var(--sable-3); }
.btn--secondaire:hover { background: var(--sable); color: var(--encre); border-color: var(--encre-clair); }
.btn--sauge { background: var(--sauge-fonce); color: #fff; }
.btn--sauge:hover { background: #4b5b4f; color: #fff; }
.btn--discret { background: none; border: none; color: var(--encre-doux); text-decoration: underline; padding: .4rem .2rem; }
.btn--petit { font-size: .875rem; padding: .55rem 1rem; }
.btn--large { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn.est-en-chargement { position: relative; color: transparent; pointer-events: none; }
.btn.est-en-chargement::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 1.1rem; height: 1.1rem;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
    animation: rotation .7s linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: var(--r-sm); }
.centre .groupe-boutons { justify-content: center; }

/* ------------------------------------------------------------- en-tête */
.entete {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 253, 249, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sable-2);
}
.entete__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--r-md); min-height: 76px; }
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--encre); }
.logo__marque { width: 52px; height: 52px; flex: none; }
.logo__texte { display: flex; flex-direction: column; line-height: 1.15; }
.logo__nom { font-family: var(--titre); font-size: 1.12rem; font-weight: 600; }
.logo__baseline { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-clair); }

.nav { display: flex; align-items: center; gap: var(--r-md); }
.nav__liste { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.nav__lien { color: var(--encre-doux); text-decoration: none; font-size: .95rem; padding: .35rem 0; border-bottom: 2px solid transparent; }
.nav__lien:hover, .nav__lien[aria-current="page"] { color: var(--encre); border-bottom-color: var(--terracotta); }

.burger {
    display: none; background: none; border: 1.5px solid var(--sable-3); border-radius: var(--arrondi-sm);
    width: 46px; height: 42px; cursor: pointer; align-items: center; justify-content: center;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--encre); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--encre); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

@media (max-width: 900px) {
    .burger { display: flex; }
    .nav { position: fixed; inset: 76px 0 auto; background: var(--craie); flex-direction: column;
           align-items: stretch; gap: 0; padding: var(--r-md); border-bottom: 1px solid var(--sable-2);
           box-shadow: var(--ombre); }
    .nav[hidden] { display: none; }
    .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__lien { padding: .85rem 0; border-bottom: 1px solid var(--sable-2); }
    .nav .btn { margin-top: var(--r-sm); }
}

/* --------------------------------------------------------------- héros */
.heros { background: var(--sable); overflow: hidden; }
.heros__grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--r-xl); align-items: center;
                 padding-block: var(--r-2xl); }
.heros__visuel { border-radius: var(--arrondi); overflow: hidden; box-shadow: var(--ombre-forte); }
.heros h1 { margin-bottom: var(--r-md); }
.heros .chapeau { margin-bottom: var(--r-md); }
.heros__reassurance { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: var(--r-md);
                      font-size: .875rem; color: var(--encre-doux); }
.heros__reassurance span { display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 860px) {
    .heros__grille { grid-template-columns: 1fr; gap: var(--r-lg); padding-block: var(--r-xl); }
    .heros__visuel { order: -1; }
}

/* --------------------------------------------------------------- cartes */
.grille { display: grid; gap: var(--r-md); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.carte {
    background: var(--craie); border: 1px solid var(--sable-2); border-radius: var(--arrondi);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: var(--sable-3); }
.carte__visuel { aspect-ratio: 3 / 2; background: var(--sable-2); }
.carte__visuel img, .carte__visuel svg { width: 100%; height: 100%; object-fit: cover; }
.carte__corps { padding: var(--r-md); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.carte__titre { margin: 0; }
.carte__titre a { text-decoration: none; color: var(--encre); }
.carte__titre a:hover { color: var(--terracotta-fonce); }
.carte__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .4rem; }

.puce {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .8rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px;
    background: var(--sable); color: var(--encre-doux);
}
.puce--prix { background: var(--terracotta-pale); color: var(--terracotta-fonce); }
.puce--sauge { background: var(--sauge-pale); color: var(--sauge-fonce); }

/* ------------------------------------------------------------- tableaux */
.tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tableau { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
table.tableau th, table.tableau td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--sable-2); }
table.tableau thead th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
                         color: var(--encre-doux); background: var(--sable); border-bottom: 1px solid var(--sable-3); }
table.tableau tbody tr:hover { background: var(--sable); }
table.tableau td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------- encarts */
.encart {
    display: flex; gap: .85rem; padding: 1rem 1.15rem; border-radius: var(--arrondi-sm);
    border-left: 4px solid var(--sauge); background: var(--sauge-pale); color: var(--encre);
    font-size: .95rem; margin-bottom: var(--r-sm);
}
.encart--succes { border-left-color: var(--succes); background: #e9f3ed; }
.encart--erreur { border-left-color: var(--alerte); background: #fbeae6; }
.encart--info   { border-left-color: var(--info);   background: #e9f0f6; }
.encart--attention { border-left-color: var(--terracotta); background: var(--terracotta-pale); }
.encart p { margin: 0; }
.encart__titre { font-weight: 700; display: block; margin-bottom: .2rem; }

/* ------------------------------------------------------------ accordéon */
.accordeon { border-top: 1px solid var(--sable-2); }
.accordeon details { border-bottom: 1px solid var(--sable-2); }
.accordeon summary {
    cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
    font-family: var(--titre); font-size: 1.08rem; font-weight: 600; list-style: none;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after {
    content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
    font-size: 1.5rem; color: var(--terracotta-fonce); font-family: var(--texte); font-weight: 400;
}
.accordeon details[open] summary::after { content: "−"; }
.accordeon__contenu { padding: 0 2.5rem 1.3rem 0; color: var(--encre-doux); }

/* ---------------------------------------------------------------- avis */
.avis { background: var(--craie); border: 1px solid var(--sable-2); border-radius: var(--arrondi); padding: var(--r-md); }
.avis__note { color: var(--terracotta); letter-spacing: .12em; font-size: 1rem; }
.avis blockquote { margin: .6rem 0 1rem; font-family: var(--titre); font-size: 1.08rem; line-height: 1.55; }
.avis__auteur { font-size: .85rem; color: var(--encre-clair); }

/* ------------------------------------------------------------ formulaires */
.champ { margin-bottom: var(--r-md); }
.champ label, .legende { display: block; font-weight: 600; font-size: .93rem; margin-bottom: .4rem; }
.champ .aide { display: block; font-size: .83rem; color: var(--encre-clair); margin-bottom: .4rem; font-weight: 400; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ input[type="password"],
.champ input[type="date"], .champ input[type="time"], .champ input[type="number"], .champ input[type="search"],
.champ select, .champ textarea, .controle {
    width: 100%; font-family: var(--texte); font-size: 1rem; color: var(--encre);
    padding: .75rem .9rem; background: var(--craie);
    border: 1.5px solid var(--sable-3); border-radius: var(--arrondi-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .controle:focus {
    border-color: var(--terracotta-fonce); box-shadow: 0 0 0 3px var(--terracotta-pale); outline: none;
}
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--alerte); }
.erreur-champ { display: block; color: var(--alerte); font-size: .85rem; margin-top: .35rem; font-weight: 600; }

.case { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .85rem; font-size: .93rem; }
.case input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--terracotta-fonce); }
.case label { font-weight: 400; margin: 0; }

fieldset { border: none; margin: 0 0 var(--r-md); padding: 0; }
legend { font-weight: 600; font-size: .93rem; padding: 0; margin-bottom: .5rem; }

.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--r-md); }
@media (max-width: 640px) { .grille-champs { grid-template-columns: 1fr; } }

/* =========================================================== tunnel de réservation */
.fil-etapes { list-style: none; display: flex; gap: .4rem; margin: 0 0 var(--r-lg); padding: 0; counter-reset: etape; }
.fil-etapes li {
    flex: 1; position: relative; padding-top: 2.4rem; text-align: center;
    font-size: .82rem; color: var(--encre-clair); counter-increment: etape;
}
.fil-etapes li::before {
    content: counter(etape); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--sable-2); color: var(--encre-doux); font-weight: 700; font-size: .9rem;
}
.fil-etapes li::after {
    content: ""; position: absolute; top: 15px; left: calc(-50% + 16px); width: calc(100% - 32px);
    height: 2px; background: var(--sable-2);
}
.fil-etapes li:first-child::after { display: none; }
.fil-etapes li.est-active::before { background: var(--terracotta-fonce); color: #fff; }
.fil-etapes li.est-active { color: var(--encre); font-weight: 600; }
.fil-etapes li.est-faite::before { background: var(--sauge-fonce); color: #fff; content: "✓"; }
.fil-etapes li.est-faite::after, .fil-etapes li.est-active::after { background: var(--sauge); }

.tunnel { display: grid; grid-template-columns: 1fr 340px; gap: var(--r-lg); align-items: start; }
@media (max-width: 940px) { .tunnel { grid-template-columns: 1fr; } }

.recap {
    position: sticky; top: 100px; background: var(--sable); border: 1px solid var(--sable-2);
    border-radius: var(--arrondi); padding: var(--r-md);
}
.recap h2 { font-size: 1.15rem; }
.recap__ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0;
                border-bottom: 1px solid var(--sable-2); font-size: .93rem; }
.recap__ligne:last-of-type { border-bottom: none; }
.recap__ligne dt { color: var(--encre-doux); margin: 0; }
.recap__ligne dd { margin: 0; font-weight: 600; text-align: right; }
.recap__total { display: flex; justify-content: space-between; gap: 1rem; margin-top: .75rem;
                padding-top: .75rem; border-top: 2px solid var(--sable-3); font-size: 1.05rem; font-weight: 700; }

.choix-prestation { display: grid; gap: var(--r-sm); }
.choix {
    display: block; border: 1.5px solid var(--sable-3); border-radius: var(--arrondi);
    padding: var(--r-md); cursor: pointer; background: var(--craie); transition: all var(--transition);
}
.choix:hover { border-color: var(--terracotta); background: var(--sable); }
.choix:has(input:checked) { border-color: var(--terracotta-fonce); background: var(--terracotta-pale);
                            box-shadow: 0 0 0 1px var(--terracotta-fonce); }
.choix:has(input:focus-visible) { outline: 3px solid var(--terracotta-fonce); outline-offset: 3px; }
.choix__entete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.choix__nom { font-family: var(--titre); font-size: 1.15rem; font-weight: 600; }
.choix__prix { font-weight: 700; color: var(--terracotta-fonce); white-space: nowrap; }
.choix__desc { color: var(--encre-doux); font-size: .92rem; margin-top: .35rem; }

.durees { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.duree {
    position: relative; display: inline-flex; align-items: center; gap: .4rem;
    border: 1.5px solid var(--sable-3); border-radius: 999px; padding: .5rem 1rem;
    font-size: .9rem; cursor: pointer; background: var(--craie); transition: all var(--transition);
}
.duree:hover { border-color: var(--terracotta); }
.duree:has(input:checked) { background: var(--terracotta-fonce); border-color: var(--terracotta-fonce); color: #fff; }
.duree:has(input:focus-visible) { outline: 3px solid var(--terracotta-fonce); outline-offset: 3px; }
.duree input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }

/* ---------------------------------------------------------------- calendrier */
.calendrier { background: var(--craie); border: 1px solid var(--sable-2); border-radius: var(--arrondi); padding: var(--r-md); }
.calendrier__entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--r-sm); }
.calendrier__mois { font-family: var(--titre); font-size: 1.2rem; font-weight: 600; text-transform: capitalize; }
.calendrier__nav { display: flex; gap: .4rem; }
.calendrier__nav button {
    width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--sable-3);
    background: var(--craie); cursor: pointer; font-size: 1.1rem; color: var(--encre);
}
.calendrier__nav button:hover:not([disabled]) { background: var(--sable); border-color: var(--encre-clair); }
.calendrier__nav button[disabled] { opacity: .35; cursor: not-allowed; }

.calendrier__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendrier__jour-nom { text-align: center; font-size: .72rem; text-transform: uppercase;
                        letter-spacing: .06em; color: var(--encre-clair); padding-bottom: .4rem; font-weight: 700; }
.jour {
    aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--arrondi-sm);
    border: 1.5px solid transparent; background: none; font-family: var(--texte); font-size: .95rem;
    color: var(--encre-clair); cursor: not-allowed; font-variant-numeric: tabular-nums;
}
.jour--vide { visibility: hidden; }
.jour--libre { background: var(--sauge-pale); color: var(--encre); font-weight: 600; cursor: pointer; border-color: transparent; }
.jour--libre:hover { border-color: var(--sauge-fonce); }
.jour--libre::after { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%;
                      background: var(--sauge-fonce); position: absolute; transform: translateY(14px); }
.jour { position: relative; }
.jour--choisi { background: var(--terracotta-fonce); color: #fff; border-color: var(--terracotta-fonce); }
.jour--choisi::after { background: rgba(255,255,255,.8); }
.jour--aujourdhui { box-shadow: inset 0 0 0 1.5px var(--sable-3); }

.creneaux { margin-top: var(--r-md); }
.creneaux__titre { font-family: var(--titre); font-size: 1.05rem; margin-bottom: .75rem; }
.creneaux__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.creneaux__liste { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.creneau {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .6rem .5rem; border: 1.5px solid var(--sable-3); border-radius: var(--arrondi-sm);
    background: var(--craie); font-family: var(--texte); font-size: .95rem; font-weight: 600;
    cursor: pointer; color: var(--encre); transition: all var(--transition); font-variant-numeric: tabular-nums;
}
.creneau__heure { line-height: 1.2; }
.creneau__mention {
    font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--encre-clair);
}
.creneau:hover:not([disabled]) { border-color: var(--terracotta-fonce); background: var(--terracotta-pale); }
.creneau[aria-pressed="true"] { background: var(--terracotta-fonce); border-color: var(--terracotta-fonce); color: #fff; }

/* Creneaux indisponibles : visibles, mais clairement inertes.
   Le motif hachure double l'information portee par la couleur (RGAA 3.1). */
.creneau[disabled] { cursor: not-allowed; font-weight: 500; }
.creneau--reserve {
    background: repeating-linear-gradient(135deg, var(--sable) 0 5px, var(--sable-2) 5px 10px);
    border-color: var(--sable-3); color: var(--encre-doux);
}
.creneau--reserve .creneau__mention { color: var(--terracotta-fonce); }
.creneau--bloque, .creneau--passe, .creneau--trop_loin {
    background: var(--sable); border-color: var(--sable-2); color: var(--encre-clair);
}
.creneau--attente {
    background: var(--sauge-pale); border-color: var(--sauge); color: var(--sauge-fonce);
}

.legende-creneaux, .legende-calendrier {
    display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem;
    font-size: .78rem; color: var(--encre-doux);
}
.legende__item { display: inline-flex; align-items: center; gap: .4rem; }
.legende__item::before {
    content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--sable-3);
    flex: none;
}
.legende__item--libre::before { background: var(--craie); border-color: var(--terracotta-fonce); }
.legende__item--reserve::before {
    background: repeating-linear-gradient(135deg, var(--sable) 0 3px, var(--sable-2) 3px 6px);
}
.legende__item--bloque::before { background: var(--sable); }
.legende__item--complet::before { background: var(--craie); }
.legende-calendrier .legende__item--libre::before { background: var(--sauge-pale); border-color: var(--sauge-fonce); }

.chargement { color: var(--encre-clair); font-size: .9rem; padding: var(--r-md) 0; text-align: center; }

.compte-a-rebours { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ------------------------------------------------------------------ pied de page */
.pied { background: var(--encre); color: #d9d3cb; padding-block: var(--r-xl) var(--r-md); margin-top: var(--r-2xl); }
.pied a { color: #d9d3cb; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied h3 { color: #fff; font-size: 1rem; margin-bottom: .9rem; font-family: var(--texte);
           text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--r-lg); }
@media (max-width: 860px) { .pied__grille { grid-template-columns: 1fr 1fr; gap: var(--r-md); } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; } }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.pied__bas { margin-top: var(--r-lg); padding-top: var(--r-md); border-top: 1px solid rgba(255,255,255,.12);
             display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem; color: #9b948c; }

/* ------------------------------------------------------------------ fil d'ariane */
.ariane { font-size: .85rem; color: var(--encre-clair); padding-block: var(--r-md) 0; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.ariane li::after { content: "›"; margin-left: .4rem; color: var(--sable-3); }
.ariane li:last-child::after { display: none; }
.ariane a { color: var(--encre-clair); }

/* ------------------------------------------------------------ bandeau cookies */
.bandeau-cookies {
    position: fixed; bottom: 1rem; left: 1rem; right: 1rem; z-index: 90; max-width: 640px;
    margin-inline: auto; background: var(--craie); border: 1px solid var(--sable-3);
    border-radius: var(--arrondi); box-shadow: var(--ombre-forte); padding: var(--r-md);
    display: flex; flex-wrap: wrap; gap: var(--r-sm); align-items: center; justify-content: space-between;
}
.bandeau-cookies p { font-size: .88rem; margin: 0; flex: 1 1 260px; color: var(--encre-doux); }

/* ------------------------------------------------------------------ divers */
.contenu-riche h2 { margin-top: var(--r-lg); }
.contenu-riche h2:first-child { margin-top: 0; }
.contenu-riche ul, .contenu-riche ol { padding-left: 1.3rem; color: var(--encre-doux); }
.contenu-riche li { margin-bottom: .4rem; }
.contenu-riche table { width: 100%; border-collapse: collapse; margin: var(--r-md) 0; font-size: .93rem; }
.contenu-riche th, .contenu-riche td { padding: .7rem .9rem; border: 1px solid var(--sable-2); text-align: left; }
.contenu-riche th { background: var(--sable); }

.liste-avantages { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.liste-avantages li { display: flex; gap: .6rem; align-items: flex-start; color: var(--encre-doux); }
.liste-avantages li::before { content: "—"; color: var(--sauge-fonce); font-weight: 700; flex: none; }

.bloc-alerte-medicale {
    background: var(--sable); border-radius: var(--arrondi); padding: var(--r-md);
    border-left: 4px solid var(--terracotta);
}

.ancre-mobile { display: none; }
@media (max-width: 720px) {
    .ancre-mobile {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
        background: var(--craie); border-top: 1px solid var(--sable-2); padding: .7rem 1rem;
        box-shadow: 0 -4px 20px rgba(46,42,38,.08);
    }
    body { padding-bottom: 78px; }
    .pied { margin-bottom: 0; }
}

@media print {
    .entete, .pied, .ancre-mobile, .bandeau-cookies, .btn { display: none !important; }
    body { background: #fff; }
}

/* ------------------------------------------------------------ pages d'erreur */
.page-erreur .section { padding-block: var(--r-2xl); }
.erreur__code {
    font-family: var(--titre); font-size: clamp(5rem, 3rem + 12vw, 10rem); line-height: .9;
    color: var(--sable-2); margin: 0 0 -.4em; user-select: none; font-weight: 600;
}
.page-erreur .liste-avantages li::before { content: "›"; }
.pre-message {
    background: var(--sable); border-radius: var(--arrondi-sm); padding: .9rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .8rem; white-space: pre-wrap; word-break: break-word;
    max-height: 260px; overflow: auto; color: var(--encre-doux);
}