/* Les p'tits soins d'Odile
   Concept : le dépliant. Des panneaux crème et sable qui se succèdent comme les volets du flyer,
   des soins présentés comme une carte avec points de suite jusqu'au prix, des éclats dorés en ponctuation.
   Thème clair assumé (identité de marque), couleurs toutes définies ici. */
:root {
  --creme: #fffeeb;
  --sable: #f5e5c1;
  --sable-clair: #fbf3dc;
  --taupe: #c8af91;
  --brun: #815e41;
  --encre: #4a3626;
  --sauge: #b3b776;
  --olive: #6d7a56;
  --olive-fonce: #56613f;
  --ligne: #e6d6b8;
  --blanc: #ffffff;
  --erreur: #9b3b2a;

  --f-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-texte: "Cormorant Garamond", Garamond, Georgia, serif;
  --f-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-script: "29LT Riwaya Informal", "Allura", "Segoe Script", cursive;

  --largeur: 72rem;
  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --rayon: 1.25rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--creme); color: var(--encre);
  font-family: var(--f-texte); font-size: clamp(1.13rem, 1.05rem + .3vw, 1.25rem); line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--olive); text-underline-offset: .2em; }
a:hover { color: var(--olive-fonce); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--f-titre); color: var(--brun); font-weight: 500; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 1.2rem + .5vw, 1.6rem); }
p { margin: 0; }
.etiquette { font-family: var(--f-ui); font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--brun); }
.script { font-family: var(--f-script); font-weight: 400; color: var(--olive); font-size: 1.7em; line-height: 1.1; }
.texte { max-width: 38rem; }
.texte > * + * { margin-top: 1rem; }
.centre { text-align: center; margin-inline: auto; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--sable { background: var(--sable-clair); }
.section--sable-fort { background: var(--sable); }
.entete-section { display: grid; gap: .75rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.entete-section.centre { justify-items: center; text-align: center; }
.eclat { width: 2.6rem; opacity: .9; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--f-ui); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 1rem 1.6rem; border-radius: 999px; border: 1px solid var(--olive);
  background: var(--olive); color: var(--creme); text-decoration: none; cursor: pointer; transition: background .2s, color .2s;
}
.bouton:hover { background: var(--olive-fonce); border-color: var(--olive-fonce); color: var(--creme); }
.bouton--clair { background: transparent; color: var(--olive); }
.bouton--clair:hover { background: var(--olive); color: var(--creme); }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* En-tête */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--creme) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5.5rem; }
.marque img { height: 3.6rem; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a:not(.bouton) { font-family: var(--f-ui); font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--encre); text-decoration: none; padding-block: .4rem; border-bottom: 1px solid transparent; }
.nav a:not(.bouton):hover, .nav a:not(.bouton)[aria-current="page"] { color: var(--olive); border-bottom-color: var(--sauge); }
.nav .bouton { padding: .75rem 1.2rem; }
.menu-bouton { display: none; font-family: var(--f-ui); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; background: none; border: 1px solid var(--taupe); color: var(--encre); border-radius: 999px; padding: .6rem 1rem; cursor: pointer; }
@media (max-width: 60rem) {
  .menu-bouton { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--creme); border-bottom: 1px solid var(--ligne); padding: .5rem var(--gouttiere) 1.25rem; }
  .nav.ouvert { display: flex; }
  .nav a:not(.bouton) { padding-block: .9rem; border-bottom: 1px solid var(--ligne); }
  .nav .bouton { margin-top: 1rem; }
}

/* Accueil : héros en deux volets */
.heros { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(42rem, 80vh); }
.heros__volet { display: grid; align-content: center; justify-items: center; gap: 1.5rem; text-align: center; padding: clamp(2.5rem, 6vw, 4rem) var(--gouttiere); background: var(--creme); }
.heros__logo { width: min(21rem, 80%); }
.heros__accroche { font-family: var(--f-texte); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); font-style: italic; color: var(--brun); max-width: 24rem; }
.heros__photo { position: relative; background: var(--sable); }
.heros__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.heros__citation { position: absolute; left: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem); right: clamp(1rem, 4vw, 3rem); max-width: 26rem; font-style: italic; color: var(--brun); background: color-mix(in srgb, var(--creme) 86%, transparent); padding: 1rem 1.25rem; border-radius: var(--rayon); }
@media (max-width: 52rem) { .heros { grid-template-columns: 1fr; min-height: 0; } .heros__photo { aspect-ratio: 4 / 3; } }

/* Infos pratiques en bandeau */
.bandeau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--ligne); background: var(--sable-clair); }
.bandeau > div { padding: 1.5rem var(--gouttiere); display: grid; gap: .3rem; align-content: start; }
.bandeau > div + div { border-left: 1px solid var(--ligne); }
@media (max-width: 52rem) { .bandeau { grid-template-columns: 1fr; } .bandeau > div + div { border-left: 0; border-top: 1px solid var(--ligne); } }

/* Présentation d'Odile */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.duo--inverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.duo--inverse > :first-child { order: 2; }
.portrait { border-radius: 12rem 12rem var(--rayon) var(--rayon); overflow: hidden; aspect-ratio: 3 / 4; max-width: 28rem; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.signature { font-family: var(--f-script); color: var(--olive); font-size: 2.4rem; }
@media (max-width: 52rem) { .duo, .duo--inverse { grid-template-columns: 1fr; } .duo--inverse > :first-child { order: 0; } .portrait { margin-inline: auto; width: 100%; } }

/* Carte des soins */
.carte { display: grid; gap: 0; border-top: 1px solid var(--ligne); }
.carte__soin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.5rem; padding-block: 1.4rem; border-bottom: 1px solid var(--ligne); text-decoration: none; color: inherit; }
.carte__nom { font-family: var(--f-titre); font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); color: var(--brun); display: flex; align-items: baseline; gap: .75rem; min-width: 0; }
.carte__nom::after { content: ""; flex: 1; border-bottom: 1px dotted var(--taupe); transform: translateY(-.3em); min-width: 1.5rem; }
.carte__prix { font-family: var(--f-titre); font-size: 1.35rem; color: var(--brun); font-variant-numeric: tabular-nums; align-self: baseline; }
.carte__accroche { grid-column: 1 / -1; font-style: italic; color: var(--encre); }
a.carte__soin:hover .carte__nom { color: var(--olive); }
.note { font-family: var(--f-ui); font-size: .8rem; letter-spacing: .04em; color: var(--brun); }

/* Fiches soins (page soins) */
.fiches { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.fiche { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; scroll-margin-top: 6rem; }
.fiche__corps { display: grid; gap: 1rem; }
.fiche__sous-titre { font-family: var(--f-ui); font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); }
.fiche ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.fiche li::marker { color: var(--sauge); }
.fiche__tarif { position: sticky; top: 6.5rem; background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 1.5rem; display: grid; gap: .9rem; }
.fiche__prix { font-family: var(--f-titre); font-size: 2.4rem; color: var(--brun); line-height: 1; font-variant-numeric: tabular-nums; }
.fiche__prix small { font-family: var(--f-ui); font-size: .75rem; letter-spacing: .1em; color: var(--encre); margin-left: .3rem; }
.fiche__ligne { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.05rem; border-top: 1px solid var(--ligne); padding-top: .7rem; }
.fiche__photo { border-radius: var(--rayon); overflow: hidden; }
.fiche__photo figcaption { font-size: .95rem; font-style: italic; color: var(--brun); padding-top: .5rem; }
@media (max-width: 52rem) { .fiche { grid-template-columns: 1fr; } .fiche__tarif { position: static; } }

.sommaire { display: flex; flex-wrap: wrap; gap: .5rem; }
.sommaire a { font-family: var(--f-ui); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--encre); border: 1px solid var(--taupe); border-radius: 999px; padding: .55rem 1rem; }
.sommaire a:hover { border-color: var(--olive); color: var(--olive); }

/* Tableau des tarifs */
.table-defile { overflow-x: auto; }
.tarifs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarifs th, .tarifs td { padding: 1rem .75rem; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tarifs th { font-family: var(--f-ui); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brun); }
.tarifs td.prix, .tarifs th.prix { text-align: right; white-space: nowrap; }
.tarifs td:first-child { font-family: var(--f-titre); color: var(--brun); font-size: 1.1rem; }
.tarifs .detail { display: block; font-family: var(--f-texte); font-style: italic; color: var(--encre); font-size: 1rem; }
.barre { text-decoration: line-through; color: var(--taupe); margin-right: .4rem; }
.prive { color: var(--olive); font-weight: 600; }

/* Entreprises */
.colonnes-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.colonnes-3 h3 { margin-bottom: .75rem; }
.colonnes-3 ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.colonnes-3 li::marker { color: var(--sauge); }
@media (max-width: 52rem) { .colonnes-3 { grid-template-columns: 1fr; } }
.bulle { font-family: var(--f-ui); font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brun); text-align: center; line-height: 1.9; max-width: 34rem; margin-inline: auto; padding: 2rem; border: 1px solid var(--sauge); border-radius: 50%; }
.offre { background: var(--olive); color: var(--creme); border-radius: var(--rayon); padding: clamp(1.75rem, 4vw, 3rem); display: grid; gap: 1.25rem; }
.offre h2, .offre h3, .offre .etiquette { color: var(--creme); }
.offre .tarifs th, .offre .tarifs td { border-color: color-mix(in srgb, var(--creme) 25%, transparent); color: var(--creme); }
.offre .tarifs td:first-child { color: var(--creme); }
.offre .barre { color: color-mix(in srgb, var(--creme) 60%, transparent); }
.offre .prive { color: var(--sable); }
.offre .tarifs .detail { color: color-mix(in srgb, var(--creme) 85%, transparent); }

/* Formulaires */
.formulaire { display: grid; gap: 1.1rem; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 40rem) { .champs { grid-template-columns: 1fr; } }
.champ { display: grid; gap: .4rem; min-width: 0; }
.champ label, .champ legend { font-family: var(--f-ui); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brun); }
.champ input, .champ textarea, .champ select {
  font: inherit; font-size: 1.1rem; color: var(--encre); background: var(--blanc); border: 1px solid var(--taupe); border-radius: .75rem; padding: .8rem 1rem; width: 100%;
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: 2px solid var(--sauge); outline-offset: 1px; border-color: var(--olive); }
.case { display: flex; gap: .7rem; align-items: flex-start; font-size: 1.05rem; }
.case input { width: 1.2rem; height: 1.2rem; margin-top: .3rem; accent-color: var(--olive); flex: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message-form { font-family: var(--f-ui); font-size: .9rem; line-height: 1.5; padding: 1rem 1.2rem; border-radius: .75rem; }
.message-form.ok { background: color-mix(in srgb, var(--sauge) 25%, var(--creme)); color: var(--olive-fonce); }
.message-form.ko { background: color-mix(in srgb, var(--erreur) 10%, var(--creme)); color: var(--erreur); }
.panneau { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(1.25rem, 3vw, 2.25rem); }

/* Contact */
.coordonnees { display: grid; gap: 1.5rem; }
.coordonnees dt { font-family: var(--f-ui); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brun); }
.coordonnees dd { margin: .25rem 0 0; font-size: 1.2rem; }
.horaires { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horaires td { padding: .2rem 1.5rem .2rem 0; }

/* Réservation */
.etapes { display: grid; gap: 1.5rem; }
.etape { display: grid; gap: 1rem; }
.etape__titre { display: flex; align-items: baseline; gap: .75rem; }
.etape__num { font-family: var(--f-titre); font-style: italic; color: var(--sauge); font-size: 1.6rem; }
.choix-soins { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.choix-soin { position: relative; }
.choix-soin input { position: absolute; opacity: 0; inset: 0; }
.choix-soin label { display: grid; gap: .2rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--ligne); border-radius: 1rem; background: var(--blanc); cursor: pointer; transition: border-color .15s, background .15s; }
.choix-soin label strong { font-family: var(--f-titre); font-weight: 500; color: var(--brun); font-size: 1.1rem; }
.choix-soin label span { font-size: 1rem; font-style: italic; }
.choix-soin label em { font-style: normal; font-family: var(--f-ui); font-size: .8rem; letter-spacing: .06em; color: var(--olive); }
.choix-soin input:checked + label { border-color: var(--olive); background: color-mix(in srgb, var(--sauge) 14%, var(--blanc)); box-shadow: inset 0 0 0 1px var(--olive); }
.choix-soin input:focus-visible + label { outline: 2px solid var(--olive); outline-offset: 2px; }

.agenda { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 52rem) { .agenda { grid-template-columns: 1fr; } }
.calendrier__tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.calendrier__mois { font-family: var(--f-titre); font-size: 1.3rem; color: var(--brun); text-transform: capitalize; }
.calendrier__nav { background: none; border: 1px solid var(--taupe); color: var(--encre); width: 2.5rem; height: 2.5rem; border-radius: 50%; cursor: pointer; font-size: 1.1rem; }
.calendrier__nav:disabled { opacity: .35; cursor: default; }
.calendrier__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; text-align: center; }
.calendrier__jsem { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brun); padding-block: .4rem; }
.jour { aspect-ratio: 1; border-radius: 50%; border: 1px solid transparent; background: none; font-family: var(--f-ui); font-size: .9rem; color: var(--taupe); font-variant-numeric: tabular-nums; display: grid; place-items: center; }
.jour--libre { color: var(--encre); background: var(--blanc); border-color: var(--ligne); cursor: pointer; }
.jour--libre:hover { border-color: var(--olive); }
.jour--choisi, .jour--choisi:hover { background: var(--olive); border-color: var(--olive); color: var(--creme); }
.jour--auj { text-decoration: underline; text-underline-offset: .25em; }
.creneaux__titre { font-family: var(--f-titre); color: var(--brun); font-size: 1.2rem; margin-bottom: .75rem; }
.creneaux__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.creneau { font-family: var(--f-ui); font-size: .9rem; font-variant-numeric: tabular-nums; padding: .75rem .5rem; border: 1px solid var(--taupe); border-radius: 999px; background: var(--blanc); color: var(--encre); cursor: pointer; }
.creneau:hover { border-color: var(--olive); color: var(--olive); }
.creneau[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: var(--creme); }
.vide { font-style: italic; color: var(--brun); }
.recap { background: var(--sable-clair); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 1.25rem 1.5rem; display: grid; gap: .3rem; }
.recap strong { font-family: var(--f-titre); font-weight: 500; color: var(--brun); font-size: 1.2rem; }
.confirmation { text-align: center; display: grid; gap: 1rem; justify-items: center; padding-block: 2rem; }

/* Pied de page */
.pied { background: var(--sable); color: var(--encre); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.pied__logo { width: 11rem; }
.pied h2 { font-family: var(--f-ui); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brun); margin-bottom: .75rem; }
.pied p, .pied li { font-size: 1.05rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pied a { color: var(--encre); }
.pied__bas { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--taupe); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font-family: var(--f-ui); font-size: .75rem; letter-spacing: .04em; }
@media (max-width: 52rem) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .pied__grille { grid-template-columns: 1fr; } }

.apparait { animation: apparait .8s ease-out both; }
@keyframes apparait { from { opacity: .001; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.evitement { position: absolute; left: -9999px; top: .5rem; z-index: 50; background: var(--olive); color: var(--creme); padding: .6rem 1rem; border-radius: 999px; font-family: var(--f-ui); font-size: .8rem; }
.evitement:focus { left: 1rem; }

fieldset.panneau { min-width: 0; }
fieldset.etape > legend { float: left; width: 100%; padding: 0; margin-bottom: 1rem; }
fieldset.etape > legend + * { clear: both; }

/* Espace d'Odile : agenda visuel */
.ag { --rang: 2.4rem; display: grid; gap: 1rem; }
.ag__barre { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.ag__nav { display: flex; align-items: center; gap: .5rem; }
.ag__auj { padding: .6rem 1rem; }
.ag__titre { font-size: 1.35rem; flex: 1; min-width: 12rem; }
.ag__legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-family: var(--f-ui); font-size: .75rem; color: var(--encre); }
.ag__legende li { display: flex; align-items: center; gap: .4rem; }
.pastille { width: .85rem; height: .85rem; border-radius: .25rem; display: inline-block; border: 1px solid var(--ligne); }
.pastille--rdv { background: var(--olive); border-color: var(--olive); }
.pastille--ferme { background: repeating-linear-gradient(135deg, var(--sable) 0 4px, var(--taupe) 4px 5px); }
.pastille--libre { background: var(--blanc); }
.ag__zone { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
.ag__grille { display: grid; grid-template-columns: 3rem minmax(0, 1fr); background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: .75rem .75rem 1rem 0; min-width: 0; }
.ag__coin { height: 3.2rem; }
.ag__echelle { position: relative; height: calc(var(--rang) * var(--lignes)); }
.ag__echelle span { position: absolute; right: .5rem; transform: translateY(-.55em); font-family: var(--f-ui); font-size: .7rem; color: var(--brun); font-variant-numeric: tabular-nums; }
.ag__jours { display: grid; grid-template-columns: repeat(var(--nb), minmax(0, 1fr)); gap: .35rem; min-width: 0; }
.ag__jtete { height: 3.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--f-ui); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brun); }
.ag__jtete strong { font-family: var(--f-titre); font-size: 1.3rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--encre); line-height: 1.1; }
.ag__jour--auj .ag__jtete strong { color: var(--creme); background: var(--olive); border-radius: 999px; padding: 0 .5rem; }
.ag__colonne { position: relative; height: calc(var(--rang) * var(--lignes)); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rang) * 2 - 1px), var(--ligne) calc(var(--rang) * 2 - 1px), var(--ligne) calc(var(--rang) * 2)); border-top: 1px solid var(--ligne); }
.ag__case { position: absolute; left: 0; right: 0; height: var(--rang); border: 0; background: transparent; cursor: pointer; border-radius: .4rem; padding: 0; }
.ag__case:hover:not(:disabled) { background: color-mix(in srgb, var(--sauge) 22%, transparent); }
.ag__case:hover:not(:disabled)::after { content: "+"; font-family: var(--f-ui); color: var(--olive); font-size: .9rem; }
.ag__case:disabled { cursor: default; border-radius: 0; background: color-mix(in srgb, var(--ligne) 30%, transparent); }
.ag__case--choisie { background: color-mix(in srgb, var(--sauge) 40%, transparent) !important; box-shadow: inset 0 0 0 1px var(--olive); }
.ag__hors { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--sable-clair) 0 6px, var(--ligne) 6px 7px); border-radius: .4rem; display: flex; align-items: center; justify-content: center; }
.ag__hors span { font-family: var(--f-ui); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brun); background: var(--sable-clair); padding: .1rem .4rem; border-radius: .3rem; }
.ag__item { position: absolute; left: 2px; right: 2px; z-index: 1; border-radius: .5rem; padding: .3rem .45rem; text-align: left; display: flex; flex-direction: column; gap: .1rem; overflow: hidden; cursor: pointer; font-family: var(--f-ui); font-size: .72rem; line-height: 1.25; }
.ag__item strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.ag__item--rdv { background: var(--olive); color: var(--creme); border: 1px solid var(--olive-fonce); }
.ag__item--ferme { background: repeating-linear-gradient(135deg, var(--sable) 0 6px, color-mix(in srgb, var(--taupe) 70%, var(--sable)) 6px 7px); color: var(--encre); border: 1px solid var(--taupe); }
.ag__item--choisi { outline: 2px solid var(--brun); outline-offset: 1px; }
.ag__fiche { position: sticky; top: 6.5rem; display: grid; gap: .9rem; font-size: 1.05rem; }
.ag__fiche h3 { font-size: 1.35rem; }
.ag__fermer { display: none; position: absolute; top: .6rem; right: .8rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--brun); cursor: pointer; padding: .3rem .5rem; }
.ag__lien { background: none; border: 0; padding: 0; text-align: left; font: inherit; font-size: 1rem; color: var(--olive); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.ag__infos { margin: 0; display: grid; gap: .6rem; }
.ag__infos dt { font-family: var(--f-ui); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brun); }
.ag__infos dd { margin: .1rem 0 0; }
.prochains { list-style: none; margin: 0; padding: 0; display: grid; }
.prochains li { display: flex; flex-wrap: wrap; gap: .2rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--ligne); }
.prochains__quand { font-family: var(--f-ui); font-size: .8rem; color: var(--brun); min-width: 15rem; }
@media (max-width: 52rem) {
  .ag { --rang: 2.6rem; }
  .ag__zone { grid-template-columns: 1fr; }
  .ag__fiche { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; border-radius: var(--rayon) var(--rayon) 0 0; max-height: 75vh; overflow-y: auto; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px color-mix(in srgb, var(--encre) 18%, transparent); transform: translateY(105%); transition: transform .25s ease; }
  .ag__fiche--ouverte { transform: none; }
  .ag__fermer { display: block; }
  .ag__item { font-size: .8rem; }
}
.ag__item--google { background: var(--blanc); color: var(--encre); border: 1px solid var(--brun); border-left-width: 4px; }
.ag__tampon { position: absolute; left: 2px; right: 2px; background: color-mix(in srgb, var(--sauge) 22%, transparent); border-radius: .4rem; pointer-events: none; }
.pastille--google { background: var(--blanc); border: 1px solid var(--brun); border-left-width: 3px; }
.pastille--tampon { background: color-mix(in srgb, var(--sauge) 30%, var(--blanc)); }