/* =====================================================================
   herbes-a-t.fr — Feuille de style
   Palette lin & sauge, typographie Cormorant Garamond + Jost.
   ===================================================================== */

/* ---------- Polices (hébergées localement, aucun appel externe) ------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------------------------- Jetons ---------------------------------- */
:root {
  --lin:            #FAF6EF;
  --lin-fonce:      #F3ECE0;
  --creme:          #FFFDF9;
  --encre:          #2E3A34;
  --encre-doux:     #5C6B62;
  --encre-clair:    #8B968E;
  --sauge:          #7C9A85;
  --sauge-fonce:    #55755F;
  --sauge-profond:  #3C5548;
  --terre:          #C08B6E;
  --trait:          #E7DFD1;
  --trait-clair:    #F0E9DD;
  --ombre-douce:    0 1px 2px rgba(62,74,66,.04), 0 8px 24px rgba(62,74,66,.05);
  --ombre-levee:    0 2px 4px rgba(62,74,66,.05), 0 18px 40px rgba(62,74,66,.09);

  --serif: 'Cormorant Garamond', Cormorant, Garamond, Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --largeur:      1160px;
  --largeur-fine: 720px;
  --rythme:       clamp(4.5rem, 9vw, 7.5rem);
  --rayon:        18px;
  --transition:   .5s cubic-bezier(.22,.61,.36,1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--lin);
  color: var(--encre);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .97rem + .18vw, 1.075rem);
  line-height: 1.75;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--sauge-fonce); text-decoration-color: rgba(85,117,95,.35); text-underline-offset: .25em; }
a:hover { color: var(--encre); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: -.005em; margin: 0; }

strong { font-weight: 500; color: var(--encre); }

::selection { background: rgba(124,154,133,.25); }

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

.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;
}

.lien-evitement {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--creme); color: var(--encre);
  padding: .8rem 1.4rem; border-radius: 0 0 12px 12px; box-shadow: var(--ombre-levee);
  transition: top .25s ease;
}
.lien-evitement:focus { top: 0; }

/* --------------------------- Structure -------------------------------- */
.conteneur {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
}
.conteneur--etroit { width: min(100% - 2.5rem, var(--largeur-fine)); }

.section { padding-block: var(--rythme); position: relative; }
.section--claire { background: var(--creme); }
.section--lin    { background: var(--lin); }

.section--sauge {
  background:
    radial-gradient(120% 90% at 15% 0%, #4A6553 0%, transparent 60%),
    linear-gradient(160deg, var(--sauge-profond) 0%, #354B3F 100%);
  color: #EFEADF;
}
.section--sauge h2, .section--sauge h3 { color: #FBF8F1; }
.section--sauge a { color: #D9E3D6; }
.section--sauge a:hover { color: #fff; }

.page-simple { padding-top: 72px; }

/* --------------------------- Typographie ------------------------------ */
.sur-titre {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--sauge-fonce);
  margin-bottom: 1.1rem;
}
.sur-titre--clair { color: #AFC4B3; }

.titre-section {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  margin-bottom: 1.2rem;
}

.texte-large {
  font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  line-height: 1.8;
  color: var(--encre-doux);
}
.section--sauge .texte-large { color: #D7DED2; }

.entete-section { max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.entete-section__texte { margin-top: .4rem; }

.note {
  margin-top: 2.5rem;
  font-size: .92rem;
  color: var(--encre-clair);
  max-width: 44rem;
}
.note--attention {
  margin-inline: auto;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--terre);
  background: rgba(192,139,110,.06);
  color: var(--encre-doux);
  text-align: left;
}

.centre { text-align: center; }
.centre__actions { margin-top: 2.5rem; }

/* ----------------------------- Boutons -------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 1px solid var(--sauge-fonce);
  border-radius: 999px;
  background: var(--sauge-fonce);
  color: var(--lin);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.bouton:hover {
  background: var(--sauge-profond);
  border-color: var(--sauge-profond);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--ombre-levee);
}

.bouton--discret {
  background: transparent;
  color: var(--encre);
  border-color: var(--trait);
}
.bouton--discret:hover {
  background: transparent;
  color: var(--sauge-fonce);
  border-color: var(--sauge);
}

.bouton--petit { padding: .62rem 1.25rem; font-size: .78rem; }

.bouton--plein { width: 100%; margin-top: .6rem; padding: 1.05rem 2rem; }

/* ----------------------------- En-tête -------------------------------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.15rem;
  transition: background .45s ease, box-shadow .45s ease, padding .45s ease;
}
.entete.defile {
  background: rgba(250,246,239,.88);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--trait-clair);
  padding-block: .7rem;
}
.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--encre);
}
.marque__sceau { width: 38px; color: var(--sauge); flex: none; }
.marque__sceau svg { width: 100%; height: auto; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque__nom {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: .06em;
}
.marque__sous {
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--encre-clair);
}

.navigation__liste {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation__liste a:not(.bouton) {
  text-decoration: none;
  font-size: .88rem;
  letter-spacing: .05em;
  color: var(--encre-doux);
  position: relative;
  padding-block: .3rem;
}
.navigation__liste a:not(.bouton)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--sauge);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}
.navigation__liste a:not(.bouton):hover { color: var(--encre); }
.navigation__liste a:not(.bouton):hover::after { transform: scaleX(1); transform-origin: left; }

/* la page où l'on se trouve garde son trait tiré */
.navigation__liste a.navigation__actif { color: var(--encre); }
.navigation__liste a.navigation__actif::after { transform: scaleX(1); transform-origin: left; }

.navigation__bouton {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--trait);
  border-radius: 50%;
  background: rgba(255,253,249,.7);
  cursor: pointer;
  position: relative;
}
.navigation__barres,
.navigation__barres::before,
.navigation__barres::after {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1px;
  background: var(--encre);
  transform: translate(-50%,-50%);
  transition: transform .35s ease, opacity .2s ease;
}
.navigation__barres::before { content: ''; transform: translate(-50%,-6px); }
.navigation__barres::after  { content: ''; transform: translate(-50%, 5px); }
.navigation__bouton[aria-expanded="true"] .navigation__barres { background: transparent; }
.navigation__bouton[aria-expanded="true"] .navigation__barres::before { transform: translate(-50%,-50%) rotate(45deg); }
.navigation__bouton[aria-expanded="true"] .navigation__barres::after  { transform: translate(-50%,-50%) rotate(-45deg); }

/* ---------------------------- Ouverture ------------------------------- */
.ouverture {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 0 6rem;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, #FDFBF6 0%, transparent 70%),
    linear-gradient(180deg, var(--lin) 0%, var(--lin-fonce) 100%);
}

.ouverture__voile { position: absolute; inset: 0; pointer-events: none; }
.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  animation: derive 26s ease-in-out infinite;
}
.halo--1 {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  top: -8%; left: -6%;
  background: radial-gradient(circle, rgba(124,154,133,.42) 0%, transparent 68%);
}
.halo--2 {
  width: 38vw; height: 38vw; min-width: 280px; min-height: 280px;
  bottom: -12%; right: -4%;
  background: radial-gradient(circle, rgba(192,139,110,.28) 0%, transparent 68%);
  animation-delay: -9s;
}
.halo--3 {
  width: 30vw; height: 30vw; min-width: 220px; min-height: 220px;
  top: 38%; right: 22%;
  background: radial-gradient(circle, rgba(216,201,168,.34) 0%, transparent 68%);
  animation-delay: -17s;
}
@keyframes derive {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(3vw, 2vh, 0) scale(1.08); }
  66%      { transform: translate3d(-2vw, -3vh, 0) scale(.95); }
}

.ouverture__interieur { position: relative; max-width: 46rem; }

.ouverture__titre {
  font-size: clamp(2.7rem, 1.6rem + 4.6vw, 5.1rem);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}
.ouverture__titre em {
  font-style: italic;
  color: var(--sauge-fonce);
}

.ouverture__texte {
  font-size: clamp(1.05rem, .98rem + .45vw, 1.28rem);
  line-height: 1.85;
  color: var(--encre-doux);
  max-width: 34rem;
  margin-inline: auto;
}

.ouverture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.6rem;
}

.ouverture__fleche {
  position: absolute;
  bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--trait);
  border-radius: 50%;
  background: rgba(255,253,249,.55);
}
.ouverture__fleche span {
  width: 7px; height: 7px;
  border-right: 1px solid var(--encre-doux);
  border-bottom: 1px solid var(--encre-doux);
  transform: translateY(-2px) rotate(45deg);
  animation: descendre 2.6s ease-in-out infinite;
}
@keyframes descendre {
  0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: .5; }
  50%      { transform: translateY(1px) rotate(45deg);  opacity: 1; }
}

/* ---------------------------- Grilles --------------------------------- */
.grille-deux {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}

.grille-rdv {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.grille-infos {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* ---------------------------- Repères --------------------------------- */
.reperes {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 1.8rem 0 0;
  border-top: 1px solid var(--trait);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.6rem;
}
.reperes li { display: flex; flex-direction: column; gap: .35rem; }
.reperes__valeur {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--sauge-fonce);
}
.reperes__legende { font-size: .87rem; color: var(--encre-clair); line-height: 1.55; }

/* ----------------------------- Cartes --------------------------------- */
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.carte {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-levee);
  border-color: rgba(124,154,133,.45);
}

.carte__ornement {
  width: 46px; height: 46px;
  color: var(--sauge);
  margin-bottom: 1.5rem;
  opacity: .9;
}
.carte__ornement svg { width: 100%; height: 100%; }

.carte__titre { font-size: 1.55rem; margin-bottom: .7rem; }
.carte__texte { color: var(--encre-doux); font-size: .97rem; line-height: 1.75; flex: 1; }

.carte__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.6rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--trait-clair);
}
.carte__tarif { font-family: var(--serif); font-size: 1.35rem; color: var(--encre); }

.etiquette {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sauge-fonce);
  background: rgba(124,154,133,.1);
  padding: .35rem .75rem;
  border-radius: 999px;
}

/* ----------------------------- Étapes --------------------------------- */
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: etape;
}
.etape { position: relative; padding-top: 2.2rem; border-top: 1px solid var(--trait); }
.etape__numero {
  position: absolute;
  top: -.75rem; left: 0;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .18em;
  color: var(--sauge);
  background: var(--creme);
  padding-right: .8rem;
}
.etape__titre { font-size: 1.4rem; margin-bottom: .55rem; }
.etape p { color: var(--encre-doux); font-size: .96rem; line-height: 1.75; }

/* ---------------------------- Citation -------------------------------- */
.citation {
  margin: clamp(3.5rem, 7vw, 5.5rem) auto 0;
  max-width: 44rem;
  text-align: center;
}
.citation blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2rem);
  line-height: 1.45;
  color: var(--encre);
}
.citation figcaption {
  margin-top: 1.1rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-clair);
}

/* --------------------------- Rendez-vous ------------------------------ */
.rdv__points {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}
.rdv__points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .95rem;
  color: #CFD8CB;
}
.rdv__points li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sauge);
}

.rdv__telephone {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(239,234,223,.18);
  font-size: .93rem;
  color: #BDC8BC;
}
.rdv__telephone a {
  font-family: var(--serif);
  font-size: 1.5rem;
  text-decoration: none;
  color: #F3EFE4;
}

.rdv__carte {
  background: var(--creme);
  border-radius: var(--rayon);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  box-shadow: 0 30px 60px rgba(28,40,33,.22);
  color: var(--encre);
}

/* --------------------------- Formulaire ------------------------------- */
.formulaire { display: grid; gap: 1.15rem; }

.champ-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1.15rem;
}

.champ { display: grid; gap: .45rem; margin: 0; }

.champ label {
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.requis { color: var(--terre); }

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="password"],
.champ input[type="tel"],
.champ input[type="date"],
.champ textarea,
.selecteur select {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--encre);
  background: var(--lin);
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: .85rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  appearance: none;
}
.champ textarea { resize: vertical; min-height: 7rem; line-height: 1.7; }

.champ input::placeholder,
.champ textarea::placeholder { color: #A9B2A8; }

.champ input:focus,
.champ textarea:focus,
.selecteur select:focus {
  outline: none;
  background: var(--creme);
  border-color: var(--sauge);
  box-shadow: 0 0 0 3px rgba(124,154,133,.16);
}

.selecteur { position: relative; display: block; }
.selecteur::after {
  content: '';
  position: absolute;
  right: 1.1rem; top: 50%;
  width: 7px; height: 7px;
  border-right: 1px solid var(--encre-doux);
  border-bottom: 1px solid var(--encre-doux);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.selecteur select { padding-right: 2.6rem; cursor: pointer; }

.champ--case {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .75rem;
}
.champ--case input[type="checkbox"] {
  appearance: none;
  width: 20px; height: 20px;
  margin: .18rem 0 0;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--lin);
  cursor: pointer;
  flex: none;
  transition: background var(--transition), border-color var(--transition);
}
.champ--case input[type="checkbox"]:checked {
  background: var(--sauge-fonce);
  border-color: var(--sauge-fonce);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FAF6EF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.champ--case label {
  text-transform: none;
  letter-spacing: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--encre-doux);
  cursor: pointer;
}

.formulaire__note {
  font-size: .82rem;
  color: var(--encre-clair);
  line-height: 1.6;
  margin: .3rem 0 0;
}

/* Explication rattachée au duo e-mail / téléphone */
.formulaire__aide {
  margin: -.55rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid rgba(124,154,133,.35);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--encre-doux);
}

.chausse-trappe {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.alerte {
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.6rem;
  font-size: .93rem;
  line-height: 1.65;
}
.alerte--erreur {
  background: rgba(192,139,110,.09);
  border: 1px solid rgba(192,139,110,.35);
  color: #8A5236;
}
.alerte p { margin: 0 0 .4rem; }
.alerte ul { margin: 0; padding-left: 1.1rem; }

/* -------------------------- Confirmation ------------------------------ */
.sceau-confirmation {
  display: block;
  width: 74px;
  margin: 0 auto 2rem;
  color: var(--sauge);
  animation: apparaitre .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes apparaitre {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}

.recapitulatif {
  margin: 2.8rem auto 0;
  max-width: 30rem;
  text-align: left;
  background: var(--lin);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.6rem 1.8rem;
}
.recapitulatif__titre {
  font-size: .74rem;
  font-family: var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-clair);
  margin-bottom: 1rem;
}
.recapitulatif dl { margin: 0; display: grid; gap: .7rem; }
.recapitulatif dl > div { display: flex; justify-content: space-between; gap: 1.5rem; }
.recapitulatif dt { color: var(--encre-clair); font-size: .88rem; }
.recapitulatif dd { margin: 0; text-align: right; font-size: .95rem; }

/* ------------------------ Informations pratiques ----------------------- */
.infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
}
.infos__bloc { padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.infos__titre {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sauge-fonce);
  margin-bottom: .9rem;
}
.infos p { font-size: .98rem; color: var(--encre-doux); }
.infos a { text-decoration: none; }
.infos a:hover { text-decoration: underline; }
.infos__note { margin-top: .8rem; font-size: .87rem; color: var(--encre-clair); line-height: 1.6; }

.horaires { margin: 0; display: grid; gap: .5rem; }
.horaires__ligne { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.horaires dt { color: var(--encre-doux); }
.horaires dd { margin: 0; color: var(--encre); }

/* ---------------------------- Pied de page ---------------------------- */
.pied {
  background: var(--lin-fonce);
  border-top: 1px solid var(--trait);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.pied__interieur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 2.5rem;
}
.pied__nom {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--encre);
  display: block;
  margin-bottom: .5rem;
}
.pied__texte { font-size: .93rem; color: var(--encre-clair); line-height: 1.7; }
.pied__titre {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sauge-fonce);
  margin-bottom: 1rem;
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied__liste a { font-size: .94rem; text-decoration: none; color: var(--encre-doux); }
.pied__liste a:hover { color: var(--sauge-fonce); text-decoration: underline; }

.pied__bas {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: .8rem;
  color: var(--encre-clair);
}
.pied__bas p { margin: 0; }
.pied__avertissement { max-width: 34rem; line-height: 1.6; }

/* --------------------------- Page de texte ----------------------------- */
.texte-legal h2 {
  font-size: 1.55rem;
  margin: 2.6rem 0 .8rem;
}
.texte-legal h2:first-of-type { margin-top: 1.5rem; }
.texte-legal p, .texte-legal li { color: var(--encre-doux); font-size: .98rem; }
.texte-legal ul { padding-left: 1.2rem; display: grid; gap: .4rem; }

/* ------------------------- Révélation au défilement -------------------- */
.reveler {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .95s cubic-bezier(.22,.61,.36,1) var(--retard, 0ms),
              transform .95s cubic-bezier(.22,.61,.36,1) var(--retard, 0ms);
  will-change: opacity, transform;
}
.reveler.vu { opacity: 1; transform: none; }

.retard-1 { --retard: 0ms; }
.retard-2 { --retard: 90ms; }
.retard-3 { --retard: 180ms; }
.retard-4 { --retard: 270ms; }
.retard-5 { --retard: 360ms; }

/* ------------------------------ Mobile --------------------------------- */
@media (max-width: 900px) {
  .grille-deux, .grille-rdv, .grille-infos { grid-template-columns: 1fr; }
  html { scroll-padding-top: 76px; }
}

@media (max-width: 760px) {
  .navigation__bouton { display: block; z-index: 2; }

  .navigation__liste {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6rem 1.75rem 2.5rem;
    background: rgba(250,246,239,.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 48px rgba(46,58,52,.12);
    transform: translateY(-102%);
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
  }
  .navigation__liste.ouvert { transform: translateY(0); }
  .navigation__liste li { border-bottom: 1px solid var(--trait-clair); }
  .navigation__liste li:last-child { border: 0; padding-top: 1.4rem; }
  .navigation__liste a:not(.bouton) {
    display: block;
    padding: 1rem 0;
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--encre);
  }
  .navigation__liste .bouton { width: 100%; }

  .ouverture { min-height: 92svh; padding-top: 7rem; }
  .ouverture__actions .bouton { width: 100%; }
  .marque__sous { display: none; }
  .marque__nom { font-size: 1.3rem; letter-spacing: .04em; }
  .marque__sceau { width: 32px; }
  .recapitulatif dl > div { flex-direction: column; gap: .15rem; }
  .recapitulatif dd { text-align: left; }
}

/* --------------------- Préférences d'accessibilité --------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveler { opacity: 1; transform: none; }
}

@media print {
  .entete, .ouverture__fleche, .navigation, .section--sauge { display: none; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   Page « Application » — présentation de l'outil en ligne.
   N'ajoute que ce qui lui est propre ; tout le reste (sections, cartes,
   boutons, titres) vient de la feuille commune, sans rien y changer.
   ===================================================================== */
.app-ouverture { text-align: center; padding-block: clamp(5rem, 10vw, 8.5rem); }
.app-titre     { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.app-accroche  { margin-inline: auto; max-width: 46ch; }

/* Les trois repères chiffrés, sous l'accroche */
.app-reperes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}
.app-reperes li {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 8rem;
}
.app-reperes b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.5vw, 2.9rem);
  line-height: 1;
  color: var(--sauge-fonce);
}
.app-reperes span {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-clair);
  line-height: 1.5;
}

.app-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }

/* Les six cartes sont plus nombreuses que les soins : on les resserre un
   peu pour qu'il en tienne trois de front sur un écran large. */
.app-cartes { margin-top: 2.8rem; }
.app-cartes .carte__titre { font-size: 1.32rem; }

.app-prix {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.1;
  color: var(--encre);
  margin: 2rem 0 .4rem;
}
.app-prix-detail {
  color: var(--encre-clair);
  font-size: .93rem;
  max-width: 44ch;
  margin-inline: auto;
}
.app-attente {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  color: var(--sauge-fonce);
  margin: 2rem 0 .5rem;
}

/* ------------------------- Connexion ---------------------------------- */
.connexion__formulaire {
  max-width: 26rem;
  margin: 2.2rem 0 1.8rem;
}
.connexion__aide {
  font-size: .9rem;
  color: var(--encre-clair);
  margin-bottom: .5rem;
}

/* L'état connecté, dans la barre de navigation */
.navigation__compte {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--encre-clair);
}
.navigation__compte form { display: inline; margin: 0; }
.navigation__sortie {
  font: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--encre-doux);
  text-decoration: underline;
  text-decoration-color: rgba(85,117,95,.35);
  text-underline-offset: .25em;
}
.navigation__sortie:hover { color: var(--encre); }

/* Un avis n'est pas une erreur : on l'habille en sauge, pas en terre */
.alerte--avis {
  background: rgba(124,154,133,.1);
  border: 1px solid rgba(124,154,133,.35);
  color: var(--sauge-fonce);
}

.sous-titre-h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin: 2.8rem 0 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--trait);
}

.compte-fiche {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1.5rem;
  margin: 2rem 0 1.4rem;
  font-size: .95rem;
}
.compte-fiche dt {
  color: var(--encre-clair);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  align-self: center;
}
.compte-fiche dd { margin: 0; color: var(--encre); }

/* ---------------------- Administration des comptes -------------------- */
/* Le tableau défile seul quand l'écran est étroit : jamais la page. */
.admin-tableau { overflow-x: auto; margin: 2.2rem 0 1rem; }

.admin-liste {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 46rem;
}
.admin-liste th {
  text-align: left;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-clair);
  padding: 0 1rem .6rem 0;
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}
.admin-liste td {
  padding: .9rem 1rem .9rem 0;
  border-bottom: 1px solid var(--trait-clair);
  vertical-align: top;
}
.admin-liste tr:last-child td { border-bottom: 0; }
.admin-liste b { font-weight: 500; display: block; }

.admin-suspendu { opacity: .5; }
.admin-nom    { display: block; color: var(--encre-clair); font-size: .85rem; }
.admin-detail { color: var(--encre-clair); font-size: .85rem; }
.admin-moi {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sauge-fonce);
  background: rgba(124,154,133,.12);
  border-radius: 999px;
  padding: .1rem .5rem;
  vertical-align: middle;
}
.admin-ouvert {
  display: block;
  color: var(--sauge-fonce);
  font-weight: 500;
}

.admin-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.admin-actions form { margin: 0; }
.admin-bouton {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .04em;
  padding: .4rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--creme);
  color: var(--encre-doux);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.admin-bouton:hover { border-color: var(--sauge); color: var(--encre); }
.admin-bouton--danger:hover { border-color: var(--terre); color: #8A5236; }

.admin-motdepasse {
  font-family: 'Jost', monospace;
  font-size: 1.25rem;
  letter-spacing: .08em;
  color: var(--encre);
  margin: .5rem 0 .8rem;
}
.admin-creer { max-width: 34rem; margin-bottom: 1.2rem; }

/* ------------------ Qui est connecté en ce moment ------------------- */
.admin-presence {
  margin: 2.4rem 0 1rem;
  padding: 1.6rem 1.8rem;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.admin-presence-chiffre { margin: 0 0 1rem; font-size: 1.02rem; }
.admin-presence-chiffre b {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--sauge-fonce);
  margin-right: .3rem;
}
.admin-presence-liste { list-style: none; margin: 0; padding: 0; }
.admin-presence-liste li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .75rem 0;
  border-top: 1px solid var(--trait-clair);
}
.admin-presence-qui { flex: 1; min-width: 0; }
.admin-presence-qui b { font-weight: 500; display: block; }
.admin-presence-quand { text-align: right; white-space: nowrap; line-height: 1.5; }
.admin-presence-point {
  flex: none;
  width: 9px; height: 9px;
  margin-top: .45rem;
  border-radius: 50%;
  background: var(--trait);
  border: 1px solid var(--encre-clair);
}
.admin-presence-point.est-actif {
  background: var(--sauge);
  border-color: var(--sauge-fonce);
}
.admin-presence-note {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--trait-clair);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .admin-presence-liste li { flex-wrap: wrap; }
  .admin-presence-quand { text-align: left; width: 100%; padding-left: 1.6rem; }
}

/* =====================================================================
   L'agenda du cabinet — grille, demandes, fiches
   Ajouté le 06/09/2026. Toutes les règles sont préfixées `ag-`, sauf
   celles qui étendent `admin-` ou `navigation-`.

   PENSÉ POUR LE TÉLÉPHONE D'ABORD. Trois choses en découlent :
   — la grille a son propre ascenseur, ce qui garde les jours et les heures
     sous les yeux quand on descend dans la journée ;
   — la colonne des heures est COLLÉE à gauche : on parcourt la semaine en
     glissant le doigt sans jamais perdre le repère horaire ;
   — le rail des jours sert de menu, et le mois se réduit à des pastilles
     quand l'écran ne permet plus d'écrire un nom.
   ===================================================================== */

/* ---------------------------- Jetons de l'agenda ---------------------- */
:root {
  --ag-attente:  #C08B6E;
  --ag-confirme: #7C9A85;
  --ag-honore:   #3C5548;
  --ag-annule:   #B9AFA2;
  --ag-ferme:    #DED5C6;
  --ag-case:     52px;
  --ag-heures:   62px;
}

/* Le menu du haut porte maintenant cinq entrées côté cabinet. Sans
   `nowrap`, « Les soins » se coupait en deux au milieu du menu : c'est le
   groupe entier qui doit passer à la ligne, pas les mots. */
.navigation__liste > li > a { white-space: nowrap; }
.navigation__compte { flex-wrap: wrap; gap: .5rem .7rem; }
.navigation__compte > a, .navigation__sortie { white-space: nowrap; }

/* ---------------------------- Barre du haut --------------------------- */
.ag-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 28px 0 16px;
  padding: 14px 16px;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
}
.ag-vues { display: flex; border: 1px solid var(--trait); border-radius: 999px; overflow: hidden; }
.ag-vue {
  padding: 9px 18px;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-doux);
  background: transparent;
  transition: background var(--transition), color var(--transition);
}
.ag-vue:hover { background: var(--lin-fonce); }
.ag-vue.est-active { background: var(--sauge-fonce); color: var(--creme); }

.ag-nav { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; }
.ag-titre { font-family: var(--serif); font-size: 1.35rem; min-width: 11ch; }
.ag-outils { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------- Les volets ------------------------------ */
/* Chaque bloc de la page s'ouvre et se ferme. C'est `details`/`summary` :
   le navigateur s'en charge, aucun script n'est nécessaire pour cela —
   `agenda.js` ne sert qu'à s'en souvenir d'une page à l'autre. */
.ag-volet {
  margin: 20px 0;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  overflow: hidden;
}
.ag-volet--vif { border-left: 4px solid var(--sauge-fonce); }

.ag-volet-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--transition);
}
.ag-volet-tete::-webkit-details-marker { display: none; }
.ag-volet-tete:hover { background: var(--lin-fonce); }
.ag-volet-tete:focus-visible { outline: 2px solid var(--sauge); outline-offset: -3px; }

.ag-volet-titre {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.2;
}
.ag-volet-compte {
  min-width: 26px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--sauge-fonce);
  color: var(--creme);
  font-size: .78rem;
  text-align: center;
}
.ag-volet-chevron { margin-left: auto; display: flex; padding: 4px; }
.ag-volet-chevron::before {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--encre-doux);
  border-bottom: 2px solid var(--encre-doux);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}
.ag-volet[open] .ag-volet-chevron::before { transform: rotate(-135deg); }

.ag-volet-corps { padding: 0 20px 22px; }
.ag-volet-corps--nu { padding: 0; }
/* Dans un volet, la grille n'a plus besoin de son propre cadre. */
.ag-volet .ag-grille-cadre {
  border: 0; border-radius: 0; box-shadow: none; max-width: none;
}
.ag-volet .ag-legende { padding: 12px 20px 16px; margin: 0; }
.ag-volet .ag-form, .ag-volet .ag-fermetures, .ag-volet .ag-fiche {
  margin: 0; padding: 0; background: none; border: 0;
  border-radius: 0; box-shadow: none;
}

/* ---------------------------- Le rail des jours ----------------------- */
/* Le carrousel des jours, qu'on fait glisser au doigt ou à la souris.
   Visible partout — sur ordinateur aussi il évite d'aller chercher la
   bonne semaine à la flèche. */
.ag-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 2px 10px;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ag-rail--toujours { display: flex; }

.ag-rail-jour {
  flex: 0 0 auto;
  scroll-snap-align: center;
  scroll-margin-inline: 42%;          /* le jour choisi vient se centrer */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 52px;
  padding: 8px 6px 6px;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--creme);
  text-decoration: none;
  color: var(--encre-doux);
  transition: background var(--transition), border-color var(--transition);
}
.ag-rail-nom { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.ag-rail-num { font-family: var(--serif); font-size: 1.25rem; color: var(--encre); line-height: 1.1; }
.ag-rail-points { display: flex; gap: 3px; height: 6px; align-items: center; }
.ag-rail-points i { width: 5px; height: 5px; border-radius: 50%; background: var(--sauge); }

.ag-rail-jour.est-weekend { background: var(--lin); }
.ag-rail-jour.est-aujourdhui { border-color: var(--sauge); }
.ag-rail-jour.est-aujourdhui .ag-rail-num { color: var(--sauge-fonce); }
.ag-rail-jour.est-ici {
  background: var(--sauge-fonce);
  border-color: var(--sauge-fonce);
  color: var(--creme);
}
.ag-rail-jour.est-ici .ag-rail-num { color: var(--creme); }
.ag-rail-jour.est-ici .ag-rail-points i { background: var(--creme); }

/* ---------------------------- Demandes reçues ------------------------- */
.ag-demandes { margin: 24px 0 8px; }
.ag-demande {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 6px 24px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--ag-attente);
  border-radius: var(--rayon);
}
.ag-demande-qui, .ag-demande-quand { display: flex; flex-direction: column; gap: 3px; }
.ag-demande-mot {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding: 10px 14px;
  background: var(--lin);
  border-radius: 12px;
  font-size: .94rem;
}
.ag-demande-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.ag-demande-actions form { margin: 0; }

/* ---------------------------- La grille ------------------------------- */
/* Son propre ascenseur : les en-têtes de jour et la colonne des heures
   restent visibles quand on descend dans la journée. Sans cela, la page
   entière défilait et on perdait le repère au bout de trois heures. */
.ag-grille-cadre {
  overflow: auto;
  min-width: 0;
  max-width: 100%;
  max-height: min(74vh, 820px);
  overscroll-behavior: contain;
  /* La colonne des heures est collée à gauche : sans cette marge, le
     calage par colonnes glissait le lundi DESSOUS et on ne le voyait plus. */
  scroll-padding-left: var(--ag-heures);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--creme);
  box-shadow: var(--ombre-douce);
}
.ag-grille-cadre--mois { max-height: none; }

/* `separate` et non `collapse` : c'est ce qui permet aux cases collantes
   de garder leurs bordures quand on fait glisser la semaine. */
.ag-grille, .ag-mois {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.ag-grille--semaine { min-width: 780px; }
/* `fixed` : sept colonnes strictement égales. Sans cela, samedi et
   dimanche se rétrécissaient parce qu'ils portent moins de texte. */
.ag-mois { min-width: 700px; table-layout: fixed; }

.ag-grille th, .ag-grille td, .ag-mois th, .ag-mois td {
  border-right: 1px solid var(--trait-clair);
  border-bottom: 1px solid var(--trait-clair);
  vertical-align: top;
}
.ag-grille th:last-child, .ag-grille td:last-child,
.ag-mois th:last-child, .ag-mois td:last-child { border-right: 0; }

.ag-grille thead th, .ag-mois thead th {
  position: sticky; top: 0; z-index: 3;
  padding: 10px 6px;
  background: var(--lin-fonce);
  font-family: var(--sans);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.ag-grille thead th a { text-decoration: none; color: inherit; display: block; }
.ag-jour-nom  { display: block; }
.ag-jour-num  { display: block; font-size: 1.5rem; font-family: var(--serif); letter-spacing: 0; color: var(--encre); }
.ag-jour-mois { display: block; font-size: .7rem; color: var(--encre-clair); }
.ag-grille thead th.est-aujourdhui,
.ag-mois-case.est-aujourdhui { background: #EFF3EE; }
.ag-grille thead th.est-aujourdhui .ag-jour-num { color: var(--sauge-fonce); }

/* La colonne des heures ne bouge pas quand on parcourt la semaine. */
.ag-col-heure {
  position: sticky; left: 0; z-index: 2;
  width: var(--ag-heures);
  min-width: var(--ag-heures);
  padding: 2px 8px 0 0;
  text-align: right;
  font-size: .75rem;
  color: var(--encre-clair);
  font-weight: 300;
  background: var(--lin);
  border-right: 1px solid var(--trait);
}
.ag-grille thead th.ag-col-heure { z-index: 4; background: var(--lin-fonce); }
.ag-invisible {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.ag-heure-pleine > td, .ag-heure-pleine > .ag-col-heure { border-top: 1px solid var(--trait); }

.ag-case { height: var(--ag-case); padding: 0; }
.ag-case--prise { padding: 2px; }
.ag-case--double { outline: 2px solid var(--terre); outline-offset: -2px; }

.ag-libre {
  display: block;
  height: 100%;
  min-height: var(--ag-case);
  text-align: center;
  line-height: var(--ag-case);
  /* Le « + » reste discrètement visible, jamais transparent : au doigt il
     n'y a pas de survol, et rien ne dirait qu'une case vide se touche. */
  color: var(--trait);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.ag-libre:hover, .ag-libre:focus {
  background: var(--lin-fonce);
  color: var(--sauge-fonce);
}

.ag-rail { min-width: 0; max-width: 100%; }

/* ---------------------------- Un rendez-vous -------------------------- */
.ag-bloc {
  display: block;
  height: 100%;
  padding: 5px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--creme);
  font-size: .82rem;
  line-height: 1.32;
  overflow: hidden;
}
.ag-bloc + .ag-bloc { margin-top: 2px; }
.ag-bloc-h    { display: block; font-weight: 500; opacity: .9; }
.ag-bloc-qui  { display: block; font-weight: 500; }
.ag-bloc-soin { display: block; font-size: .74rem; opacity: .85; }

.ag-bloc--a_confirmer { background: var(--ag-attente); }
.ag-bloc--confirme    { background: var(--ag-confirme); }
.ag-bloc--honore      { background: var(--ag-honore); }
.ag-bloc--annule      { background: var(--ag-annule); text-decoration: line-through; }
.ag-bloc--ferme {
  background: repeating-linear-gradient(45deg,
    var(--ag-ferme), var(--ag-ferme) 6px, var(--lin-fonce) 6px, var(--lin-fonce) 12px);
  color: var(--encre-doux);
}
.ag-bloc:hover, .ag-bloc:focus { filter: brightness(1.08); }

.ag-etat {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .74rem;
  color: var(--creme);
}

.ag-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 14px 0 0;
  font-size: .82rem;
  color: var(--encre-doux);
}
.ag-leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ag-leg-mot { flex-basis: 100%; }
.ag-pastille {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 4px;
  vertical-align: -2px;
}

/* ---------------------------- La vue du mois -------------------------- */
.ag-mois-case { height: 118px; padding: 4px; }
.ag-mois-case.est-hors-mois { background: var(--lin); }
.ag-mois-case.est-hors-mois .ag-mois-num { color: var(--encre-clair); }
.ag-mois-case.est-fermee {
  background: repeating-linear-gradient(45deg,
    #F6F1E7, #F6F1E7 8px, var(--lin-fonce) 8px, var(--lin-fonce) 16px);
}
.ag-mois-tete { display: flex; justify-content: space-between; align-items: center; }
.ag-mois-num {
  font-family: var(--serif);
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--encre);
  padding: 0 4px;
}
.ag-mois-plus {
  text-decoration: none;
  color: transparent;
  padding: 0 6px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}
.ag-mois-case:hover .ag-mois-plus { color: var(--sauge-fonce); background: var(--lin-fonce); }

.ag-mini {
  display: block;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 7px;
  font-size: .74rem;
  color: var(--creme);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-mini-h { font-weight: 500; margin-right: 4px; }
.ag-mini--reste { background: transparent; color: var(--encre-doux); }

/* ---------------------------- Formulaires ----------------------------- */
.ag-form, .ag-fermetures, .ag-fiche {
  margin: 24px 0;
  padding: 22px 24px;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
}
.ag-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ag-form-effacer {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--trait-clair);
}
.ag-coche label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ag-coche input { width: 20px; height: 20px; accent-color: var(--sauge-fonce); }

.ag-fermetures-liste { list-style: none; margin: 0 0 20px; padding: 0; }
.ag-fermetures-liste li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--trait-clair);
}
.ag-fermetures-liste form { margin: 0 0 0 auto; }
.ag-fermeture-quand { display: flex; flex-direction: column; gap: 2px; font-weight: 400; }

/* « Modifier » et « Supprimer » vont ensemble, poussés à droite : le `auto`
   passe sur le groupe, plus sur le formulaire tout seul. */
.ag-fermeture-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ag-fermetures-liste .ag-fermeture-actions form { margin: 0; }

/* La règle qu'on est en train de reprendre. Sans ce repère, avec dix
   fermetures dans la liste, on ne sait pas laquelle le formulaire du bas
   est en train de changer. */
.ag-fermetures-liste li.est-modifiee {
  background: var(--lin-fonce);
  border-left: 3px solid var(--sauge);
  border-radius: 8px;
  padding: 10px 12px;
}

.ag-sous-titre {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 26px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--trait-clair);
}

/* Les blocs du formulaire des fermetures. Sans le script ils sont tous
   visibles : plus chargé, mais rien ne casse — le serveur ne lit que ce
   qui correspond au genre choisi. */
.ag-bloc-type {
  border: 1px solid var(--trait-clair);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 16px;
  display: grid;
  gap: 1.15rem;
}
/* `display:grid` l'emporterait sur le `hidden` du navigateur : sans ces
   deux lignes, le script masque les blocs et ils restent visibles. */
.ag-bloc-type[hidden], .ag-fermer [hidden] { display: none; }

/* ---------------------- L'agenda sur le téléphone ------------------- */
/* `hidden` doit l'emporter : sur téléphone, .admin-bouton passe en
   inline-flex et réapparaîtrait sinon. */
.appli [hidden] { display: none !important; }
.appli-titre { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; margin: 0 0 10px; }
.appli-titre ~ .appli-titre { margin-top: 26px; }
.appli-etapes { margin: 0 0 12px; padding-left: 1.2em; }
.appli-etapes li { margin-bottom: 6px; }
.appli-ok, .appli-etat { margin: 0 0 12px; }
.appli-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.ag-etiquette {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-doux);
}

/* Les sept jours de la semaine, à cocher au doigt. */
.ag-jours { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-jour-case { position: relative; cursor: pointer; }
.ag-jour-case input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.ag-jour-case span {
  display: flex; align-items: center; justify-content: center;
  min-width: 52px; min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--trait);
  border-radius: 12px;
  background: var(--lin);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--encre-doux);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.ag-jour-case input:checked + span {
  background: var(--sauge-fonce);
  border-color: var(--sauge-fonce);
  color: var(--creme);
}
.ag-jour-case input:focus-visible + span { outline: 2px solid var(--sauge); outline-offset: 2px; }

.ag-chercher { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.ag-chercher .champ { flex: 1 1 260px; margin: 0; }

/* Les listes de l'agenda tiennent dans un écran de téléphone : les
   colonnes accessoires s'effacent au lieu d'imposer un défilement
   latéral, qu'on ne devine pas sur un tableau. */
.ag-liste { min-width: 0; }

/* =====================================================================
   TABLETTE — jusqu'à 1024 px
   ===================================================================== */
@media (max-width: 1024px) {
  :root { --ag-case: 50px; }
  .ag-grille--semaine { min-width: 720px; }
}

/* =====================================================================
   TÉLÉPHONE — jusqu'à 700 px
   ===================================================================== */
@media (max-width: 700px) {
  :root { --ag-case: 48px; --ag-heures: 44px; }

  /* La barre se range en trois rangées franches plutôt qu'en bouillie. */
  .ag-barre { padding: 12px; gap: 10px; margin-top: 20px; }
  .ag-nav   { order: -1; width: 100%; justify-content: space-between; }
  .ag-titre { font-size: 1.05rem; min-width: 0; text-align: center; }
  .ag-vues  { width: 100%; border-radius: 14px; }
  .ag-vue   { flex: 1; text-align: center; padding: 11px 0; font-size: .74rem; }
  .ag-outils { width: 100%; }
  .ag-outils > * { flex: 1 1 auto; text-align: center; }

  /* Doigt, pas souris : on vise 44 px de haut au minimum. */
  .admin-bouton, .ag-vue, .bouton--petit { min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; }

  .ag-rail { gap: 6px; }
  .ag-rail-jour { min-width: 48px; padding: 7px 5px 5px; }

  /* La semaine se parcourt en glissant, jour par jour. */
  .ag-grille--semaine { min-width: 0; }
  .ag-grille--semaine thead th:not(.ag-col-heure) { min-width: 116px; scroll-snap-align: start; }
  .ag-grille-cadre { scroll-snap-type: x proximity; max-height: 68vh; }
  .ag-jour-num  { font-size: 1.2rem; }
  .ag-jour-mois { display: none; }

  .ag-bloc { padding: 4px 6px; font-size: .76rem; }
  .ag-bloc-soin { display: none; }
  .ag-legende { font-size: .76rem; }

  /* Le mois tient dans la largeur : plus de noms, des pastilles.
     Écrire un nom sur 45 px de large ne donne rien de lisible. */
  .ag-mois { min-width: 0; }
  .ag-mois-case { height: 76px; padding: 3px 2px; }
  .ag-mois thead th { font-size: .62rem; letter-spacing: .04em; padding: 8px 2px; }
  .ag-mois-num { font-size: .95rem; padding: 0 2px; }
  .ag-mois-plus { display: none; }
  .ag-mini {
    display: inline-block;
    width: 9px; height: 9px;
    margin: 3px 3px 0 0;
    padding: 0;
    border-radius: 50%;
    font-size: 0;                      /* la pastille remplace le texte */
  }
  .ag-mini--reste {
    width: auto; height: auto;
    font-size: .6rem;
    padding: 0 3px;
    border-radius: 6px;
    vertical-align: 2px;
  }

  /* Une demande, un bloc ; les boutons prennent toute la largeur. */
  .ag-demande { grid-template-columns: 1fr; padding: 14px; }
  .ag-demande-actions { flex-direction: column; align-items: stretch; }
  .ag-demande-actions form { width: 100%; }
  .ag-demande-actions .admin-bouton { width: 100%; }

  .ag-form, .ag-fermetures, .ag-fiche { padding: 16px 14px; margin: 18px 0; }
  .ag-volet-tete { padding: 14px; gap: 10px; }
  .ag-volet-titre { font-size: 1.1rem; }
  .ag-volet-corps { padding: 0 14px 18px; }
  .ag-volet-corps--nu { padding: 0; }
  .ag-volet .ag-legende { padding: 10px 14px 14px; }
  .ag-form-actions { flex-direction: column; align-items: stretch; }
  .ag-form-actions > * { width: 100%; }
  .ag-fermetures-liste form { margin-left: 0; width: 100%; }
  .ag-fermetures-liste .admin-bouton { width: 100%; }
  /* Les deux boutons se partagent la largeur, chacun assez large pour le
     doigt — plutôt que l'un sous l'autre, qui allongerait la liste. */
  .ag-fermeture-actions { margin-left: 0; width: 100%; gap: 10px; }
  .ag-fermeture-actions > * { flex: 1 1 0; min-width: 0; }

  /* En colonne, le `flex-basis: 260px` du champ devenait une HAUTEUR :
     le champ de recherche faisait 260 px de haut. */
  .ag-chercher { flex-direction: column; align-items: stretch; }
  .ag-chercher .champ { flex: 0 0 auto; }

  /* Les colonnes accessoires disparaissent : le tableau tient sans
     ascenseur latéral, qu'on ne devine pas au doigt. */
  .ag-secondaire { display: none; }
  .ag-liste { font-size: .86rem; }
  .ag-liste th, .ag-liste td { padding-left: 6px; padding-right: 6px; }
}

/* =====================================================================
   Prendre rendez-vous — le visiteur choisit son créneau
   Ajouté le 07/09/2026. Pensé pour le pouce d'abord : les heures sont
   des pastilles d'au moins 44 px, et rien ne déborde sur 320 px de large.
   ===================================================================== */

/* ---------------------------- Les trois temps ------------------------- */
.pas-a-pas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  counter-reset: pas;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--encre-clair);
}
.pas-a-pas li {
  counter-increment: pas;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pas-a-pas li::before {
  content: counter(pas);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--trait);
  font-size: .72rem;
}
.pas-a-pas li + li::after { content: none; }
.pas-a-pas li:not(:last-child) { padding-right: 10px; }
.pas-a-pas .est-fait { color: var(--encre-doux); }
.pas-a-pas .est-fait::before {
  background: var(--lin-fonce);
  border-color: var(--trait);
}
.pas-a-pas .est-ici { color: var(--encre); }
.pas-a-pas .est-ici::before {
  background: var(--sauge-fonce);
  border-color: var(--sauge-fonce);
  color: var(--creme);
}

/* ---------------------------- Le choix du soin ------------------------ */
.choix-soins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  margin: 26px 0 8px;
}
.choix-soin {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
  justify-content: center;
  padding: 18px 20px;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--encre);
  box-shadow: var(--ombre-douce);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
}
.choix-soin:hover, .choix-soin:focus-visible {
  border-color: var(--sauge);
  box-shadow: var(--ombre-levee);
  transform: translateY(-2px);
}
.choix-soin__nom   { font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; }
.choix-soin__duree { font-size: .85rem; color: var(--encre-doux); }

/* ---------------------------- La semaine ------------------------------ */
.cr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin: 24px 0 18px;
}
.cr-nav .est-eteint { opacity: .35; cursor: default; }

/* Première visite / déjà venu : décide de la longueur des créneaux. */
.cr-visite { display: flex; margin: 0 0 8px; }
.cr-visite .ag-vue { text-align: center; }

.cr-jours { display: grid; gap: 12px; }

.cr-jour {
  padding: 16px 18px;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.cr-jour.est-vide { background: var(--lin); }
.cr-jour__titre {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.cr-jour__date { font-size: .88rem; color: var(--encre-doux); font-family: var(--sans); }

.cr-heures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Une heure : pastille de 44 px de haut au minimum, pour le pouce. */
.cr-heure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--sauge);
  background: var(--creme);
  color: var(--sauge-fonce);
  text-decoration: none;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition), color var(--transition);
}
.cr-heure:hover, .cr-heure:focus-visible {
  background: var(--sauge-fonce);
  border-color: var(--sauge-fonce);
  color: var(--creme);
}
/* Indisponible. On ne dit JAMAIS pourquoi : ni qui, ni quel motif. */
.cr-heure.est-prise {
  border-color: var(--trait);
  background: var(--lin-fonce);
  color: var(--encre-clair);
  text-decoration: line-through;
  cursor: default;
}

.cr-rien {
  margin: 0;
  color: var(--encre-clair);
  font-size: .92rem;
}
.cr-aucun {
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--lin-fonce);
  border-radius: var(--rayon);
}

/* ---------------------------- Le créneau retenu ----------------------- */
.cr-retenu {
  margin: 22px 0 26px;
  padding: 20px 24px;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--sauge-fonce);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
}
.cr-retenu__quand {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.3;
}
.cr-retenu__soin    { margin: 0 0 10px; color: var(--encre-doux); }
.cr-retenu__changer { margin: 0; font-size: .9rem; }

.cr-avertissement {
  margin: 22px 0 0;
  padding: 16px 18px;
  background: #FBF3EA;
  border: 1px solid #EAD9C4;
  border-radius: 14px;
  font-size: .94rem;
}
.cr-avertissement p { margin: 0 0 8px; }
.cr-avertissement p:last-child { margin-bottom: 0; }

/* ---------------------------- L'entrée, sur l'accueil ----------------- */
.rdv__entree { display: grid; gap: 14px; }
.rdv__entree-titre {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
}
.rdv__entree-texte  { margin: 0; }
.rdv__entree-action { margin: 4px 0 0; }
.rdv__entree-note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--trait-clair);
  font-size: .9rem;
  color: var(--encre-doux);
}

/* ---------------------------- Téléphone ------------------------------- */
@media (max-width: 700px) {
  .pas-a-pas { font-size: .74rem; gap: 6px 8px; }
  .cr-jour { padding: 14px; }
  .cr-heures { gap: 6px; }
  .cr-heure { min-width: 68px; flex: 1 1 auto; }
  .cr-nav { gap: 8px; }
  .cr-nav > * { flex: 1 1 auto; text-align: center; }
  .cr-retenu { padding: 16px 18px; }
  .cr-retenu__quand { font-size: 1.2rem; }
  .choix-soin { min-height: 0; padding: 15px 16px; }
}

/* --- Les demandes à confirmer : la liste des noms, le détail au clic --- */
.ag-plis { display: grid; gap: 8px; }

.ag-pli {
  background: var(--lin);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--ag-attente);
  border-radius: 14px;
  overflow: hidden;
}
.ag-pli[open] { background: var(--creme); }
/* La règle des volets vise `.ag-volet[open]` : elle ne couvre pas les plis,
   dont la flèche resterait figée. */
.ag-pli[open] .ag-volet-chevron::before { transform: rotate(-135deg); }

.ag-pli-tete {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--transition);
}
.ag-pli-tete::-webkit-details-marker { display: none; }
.ag-pli-tete:hover { background: var(--lin-fonce); }
.ag-pli-tete:focus-visible { outline: 2px solid var(--sauge); outline-offset: -3px; }

.ag-pli-nom {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}
.ag-pli-quand {
  font-size: .84rem;
  color: var(--encre-doux);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Le détail : plus de cadre à lui, c'est le pli qui le porte. */
.ag-pli-corps.ag-demande {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--trait-clair);
  border-radius: 0;
  background: none;
  padding: 14px 16px 16px;
}

@media (max-width: 700px) {
  .ag-pli-tete { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
  .ag-pli-nom { font-size: 1.05rem; flex: 1 1 100%; }
  .ag-pli-quand { font-size: .78rem; }
  .ag-pli-corps.ag-demande { padding: 12px; }
}

/* --- Un rendez-vous annulé : on le barre, franchement --- */
.cr-retenu--annule {
  border-left-color: var(--ag-annule);
  background: var(--lin);
  position: relative;
  overflow: hidden;
}
.cr-retenu--annule .cr-retenu__quand,
.cr-retenu--annule .cr-retenu__soin {
  text-decoration: line-through;
  color: var(--encre-clair);
}
/* Le trait qui traverse tout l'encadré : on ne peut pas s'y tromper. */
.cr-retenu--annule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right,
    transparent calc(50% - 1px), var(--ag-annule) calc(50% - 1px),
    var(--ag-annule) calc(50% + 1px), transparent calc(50% + 1px));
  opacity: .5;
  pointer-events: none;
}

/* Dans l'agenda, un rendez-vous annulé est barré ET rayé en diagonale. */
.ag-bloc--annule {
  position: relative;
  overflow: hidden;
}
.ag-bloc--annule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right,
    transparent calc(50% - 1px), rgba(255,253,250,.85) calc(50% - 1px),
    rgba(255,253,250,.85) calc(50% + 1px), transparent calc(50% + 1px));
  pointer-events: none;
}

/* Le bouton qui efface les rendez-vous annulés, dans la barre de l'agenda. */
.ag-vider { margin: 0; }

/* =====================================================================
   L'AGENDA, REFAIT LE 05/10/2026 — un vrai agenda, comme Google Agenda
   Chaque rendez-vous a la hauteur de sa durée, deux qui se chevauchent
   se rangent côte à côte, une ligne rouge dit « maintenant ».
   Sur téléphone : barre compacte, rond « + » sous le pouce, et la page ne
   déborde plus — c'était elle qui obligeait à rétrécir avec les doigts.
   ===================================================================== */
:root {
  --ag-quart:   15px;     /* un quart d'heure : 60 px l'heure */
  --ag-col-min: 0px;      /* largeur mini d'un jour en vue semaine */
}

/* Le rail débordait de la page entière : ses mots cachés aux yeux (pour
   les lecteurs d'écran) sont en `position: absolute`, et sans repère ils
   se plaçaient par rapport à la PAGE, hors de l'ascenseur du rail. Le
   téléphone élargissait alors la page à 1 127 px et rétrécissait tout. */
.ag-rail-jour { position: relative; }

/* ---------------------------- La barre -------------------------------- */
.ag-barre { gap: 12px 16px; }
.ag-nav { gap: 8px; }
.ag-titre { min-width: 0; text-align: center; white-space: nowrap; }
.ag-fleche {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--trait);
  border-radius: 50%;
  background: var(--creme);
  color: var(--encre);
  font-size: 1.7rem; line-height: 1;
  text-decoration: none;
  padding-bottom: 3px;
  transition: background var(--transition);
}
.ag-fleche:hover { background: var(--lin-fonce); }
.ag-nouveau-plus { display: none; }
.ag-vider { display: flex; justify-content: flex-end; margin: 4px 0 16px; }
/* « 7 jours » : seulement sur téléphone (voir plus bas). */
.ag-vue--tel { display: none; }
.ag-vue--tel.est-active { display: inline-block; }
.ag-vider .admin-bouton { font-size: .78rem; }

/* Le titre de page cède la place à l'agenda. */
.page-agenda main > .section { padding-block: 28px 64px; }
.page-agenda main .sur-titre { margin-bottom: .4rem; }
.page-agenda main .titre-section { font-size: 2rem; margin-bottom: .2rem; }

/* ---------------------------- La grille ------------------------------- */
.ag-cal-cadre {
  overflow: auto;
  max-height: min(76vh, 900px);
  overscroll-behavior: contain;
  scroll-padding-left: var(--ag-heures);
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
}
.ag-cal {
  display: grid;
  grid-template-columns: var(--ag-heures) repeat(7, minmax(var(--ag-col-min), 1fr));
  min-width: 100%;
}
.ag-cal--1 { grid-template-columns: var(--ag-heures) minmax(0, 1fr); }

/* Les noms des jours restent en haut, les heures à gauche, quand on fait
   défiler la journée ou glisser la semaine. */
.ag-cal-coin, .ag-cal-tete {
  position: sticky; top: 0; z-index: 6;
  background: var(--lin-fonce);
  border-bottom: 1px solid var(--trait);
}
.ag-cal-coin { left: 0; z-index: 7; border-right: 1px solid var(--trait); }
.ag-cal-tete {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px;
  border-left: 1px solid var(--trait-clair);
  text-decoration: none;
  color: var(--encre-doux);
}
.ag-cal-tete-nom { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.ag-cal-tete-num {
  display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  font-family: var(--serif); font-size: 1.35rem; line-height: 1;
  color: var(--encre);
}
.ag-cal-tete.est-aujourdhui { color: var(--sauge-fonce); }
.ag-cal-tete.est-aujourdhui .ag-cal-tete-num { background: var(--sauge-fonce); color: var(--creme); }
.ag-cal-tete:hover .ag-cal-tete-num { background: var(--trait); }
.ag-cal-tete.est-aujourdhui:hover .ag-cal-tete-num { background: var(--sauge-profond); }
/* En vue « jour », le titre de la barre dit déjà quel jour c'est. */
.ag-cal--1 .ag-cal-coin, .ag-cal--1 .ag-cal-tete { display: none; }

.ag-cal-heures {
  position: sticky; left: 0; z-index: 5;
  display: grid;
  grid-auto-rows: var(--ag-quart);
  background: var(--lin);
  border-right: 1px solid var(--trait);
}
.ag-cal-heures span {
  padding-right: 6px;
  text-align: right;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--encre-clair);
  transform: translateY(-.6em);      /* l'heure se lit SUR son trait */
}
.ag-cal-heures span:first-child { transform: none; padding-top: 2px; }

/* Une journée : douze sous-colonnes (pour ranger 1, 2, 3 ou 4 rendez-vous
   côte à côte) et un rang par quart d'heure. Les traits des heures sont
   dessinés en fond : plein à l'heure, pâle à la demie. */
.ag-cal-jour {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: var(--ag-quart);
  border-left: 1px solid var(--trait-clair);
  background-image:
    linear-gradient(to bottom, var(--trait) 1px, transparent 1px),
    linear-gradient(to bottom, var(--trait-clair) 1px, transparent 1px);
  background-size: 100% calc(var(--ag-quart) * 4), 100% calc(var(--ag-quart) * 4);
  background-position: 0 0, 0 calc(var(--ag-quart) * 2);
}
.ag-cal-jour.est-aujourdhui { background-color: #F6F8F3; }
.ag-cal-jour > * { grid-column: 1 / -1; }

.ag-vide { z-index: 0; }
.ag-vide:hover, .ag-vide:focus-visible { background: rgba(124,154,133,.13); outline: 0; }

.ag-ferme {
  z-index: 1;
  pointer-events: none;           /* on peut quand même poser par-dessus */
  padding: 3px 6px;
  overflow: hidden;
  font-size: .68rem;
  color: var(--encre-clair);
  background: repeating-linear-gradient(45deg,
    rgba(222,213,198,.6) 0 6px, transparent 6px 12px);
}

/* Un rendez-vous : une carte teintée, la couleur de son état en liseré. */
.ag-ev {
  z-index: 2;
  position: relative;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
  margin: 1px 2px;
  padding: 4px 7px;
  overflow: hidden;
  border-left: 4px solid var(--ag-confirme);
  border-radius: 8px;
  background: #E7EFE9;
  box-shadow: 0 1px 2px rgba(46,58,52,.1);
  color: var(--encre);
  font-size: .82rem;
  line-height: 1.25;
  text-decoration: none;
  transition: box-shadow var(--transition);
}
.ag-ev:hover, .ag-ev:focus-visible { box-shadow: 0 3px 10px rgba(46,58,52,.18); z-index: 4; }
.ag-ev-h {
  font-size: .72rem;
  color: var(--encre-doux);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ag-ev-qui, .ag-ev-soin { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-ev-qui  { font-weight: 500; }
.ag-ev-soin { font-size: .72rem; color: var(--encre-doux); }

/* Une demi-heure ou moins : tout sur une ligne. */
.ag-ev.est-court { flex-direction: row; align-items: center; gap: 6px; padding-block: 0; }
.ag-ev.est-court .ag-ev-fin, .ag-ev.est-court .ag-ev-soin { display: none; }

.ag-ev--a_confirmer { border-left-color: var(--ag-attente); background: #F8EBE1; }
.ag-ev--a_confirmer .ag-ev-h::after { content: ' · à confirmer'; color: #A26C4F; }
.ag-ev--honore      { border-left-color: var(--ag-honore);  background: #DDE6E0; }
.ag-ev--annule      { border-left-color: var(--ag-annule);  background: #F2EEE8; color: var(--encre-clair); box-shadow: none; }
.ag-ev--annule .ag-ev-qui { text-decoration: line-through; }

/* Maintenant : un trait rouge et son point, comme partout. */
.ag-maintenant {
  z-index: 3;
  position: relative;
  align-self: start;
  height: 2px;
  background: #C4513E;
  pointer-events: none;
}
.ag-maintenant::before {
  content: '';
  position: absolute; left: -5px; top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #C4513E;
}

/* ---------------------------- La liste -------------------------------- */
.ag-lj-tout { display: grid; gap: 22px; }
.ag-lj-titre {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px;
  font-family: var(--sans); font-weight: 400;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-doux);
}
.ag-lj-titre a { color: inherit; text-decoration: none; }
.ag-lj-date { color: var(--encre); }
.ag-lj.est-aujourdhui .ag-lj-titre a { color: var(--sauge-fonce); }
.ag-lj-auj {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--sauge-fonce);
  color: var(--creme);
  font-size: .64rem; letter-spacing: .1em;
}
.ag-lj-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--ag-confirme);
  border-radius: 14px;
  box-shadow: var(--ombre-douce);
  color: var(--encre);
  text-decoration: none;
  transition: box-shadow var(--transition);
}
a.ag-li:hover { box-shadow: var(--ombre-levee); }
.ag-li-h {
  display: flex; flex-direction: column;
  min-width: 3.7rem;
  font-size: .82rem;
  color: var(--encre-clair);
  font-variant-numeric: tabular-nums;
}
.ag-li-h b { font-weight: 500; font-size: 1rem; color: var(--encre); }
.ag-li-corps { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ag-li-qui {
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-li-soin { font-size: .84rem; color: var(--encre-doux); }
.ag-li-etat {
  flex: none;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-clair);
}
.ag-li--a_confirmer { border-left-color: var(--ag-attente); background: #FCF4EE; }
.ag-li--a_confirmer .ag-li-etat { color: #A26C4F; }
.ag-li--honore { border-left-color: var(--ag-honore); }
.ag-li--annule { border-left-color: var(--ag-annule); color: var(--encre-clair); box-shadow: none; }
.ag-li--annule .ag-li-qui { text-decoration: line-through; }
.ag-li--ferme {
  border-left-color: var(--ag-ferme);
  box-shadow: none;
  background: repeating-linear-gradient(45deg, var(--lin) 0 8px, var(--lin-fonce) 8px 16px);
  color: var(--encre-doux);
  padding-block: 8px;
}
.ag-li--ferme .ag-li-qui { font-size: 1rem; }
.ag-lj-rien {
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  color: var(--encre-clair);
  background: var(--creme);
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
}

/* =====================================================================
   TÉLÉPHONE
   ===================================================================== */
@media (max-width: 700px) {
  :root { --ag-quart: 16px; --ag-heures: 40px; }

  /* Le titre de page s'efface (il reste lu par les lecteurs d'écran) :
     sur un téléphone, l'agenda doit commencer tout en haut. */
  .page-agenda main > .section { padding-block: 10px 110px; }
  .page-agenda main .conteneur { width: min(100% - 1.5rem, var(--largeur)); }
  .page-agenda main .sur-titre,
  .page-agenda main .titre-section {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* La barre : flèches et titre, puis les quatre vues. Rien d'autre. */
  .ag-barre { margin: 6px 0 10px; padding: 8px; gap: 8px; border-radius: 16px; }
  .ag-nav { gap: 6px; }
  .ag-titre { flex: 1 1 auto; font-size: 1.12rem; overflow: hidden; text-overflow: ellipsis; }
  .ag-fleche { width: 38px; height: 38px; }
  .ag-auj { min-height: 38px !important; padding: 0 12px; font-size: .78rem; }
  .ag-vues { border-radius: 12px; }
  .ag-vue { padding: 8px 0; min-height: 38px; font-size: .7rem; letter-spacing: .06em; }
  .ag-outils { width: auto; }
  .ag-outil-large { display: none !important; }

  /* Le rond « + », sous le pouce, toujours là. */
  .ag-nouveau {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    width: 58px; height: 58px; min-height: 0;
    margin: 0; padding: 0;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(46,58,52,.3);
  }
  .ag-nouveau-plus { display: block; font-size: 2.1rem; font-weight: 300; line-height: 1; margin-top: -3px; }
  /* Formulaire ouvert : le rond masquerait ses cases, et on y est déjà. */
  .ag-nouveau.est-masque-tel { display: none !important; }
  .ag-nouveau-mot {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  .ag-rail { margin-bottom: 4px; padding-bottom: 6px; }
  .ag-rail-jour { min-width: 44px; padding: 5px 4px 4px; border-radius: 12px; }
  .ag-rail-num { font-size: 1.1rem; }

  /* La grille occupe l'écran ; la semaine se parcourt en glissant, jour
     par jour, la colonne des heures restant collée à gauche. */
  .ag-cal-cadre {
    max-height: calc(100svh - 205px);
    min-height: 380px;
    border-radius: 14px;
    scroll-snap-type: x proximity;
  }
  .ag-cal--7 { grid-template-columns: var(--ag-heures) repeat(7, minmax(104px, 1fr)); }
  .ag-cal-tete { scroll-snap-align: start; padding: 6px 2px; }
  .ag-cal-tete-num { width: 1.9rem; height: 1.9rem; font-size: 1.2rem; }
  .ag-cal-heures span { font-size: .66rem; padding-right: 4px; }
  .ag-ev { padding: 3px 5px; font-size: .78rem; border-left-width: 3px; }
  .ag-cal--7 .ag-ev-fin { display: none; }

  .ag-legende { font-size: .74rem; }
  .ag-leg-mot { display: none; }

  /* Cinq vues dans la largeur : on serre un peu les lettres. */
  .ag-vue { font-size: .62rem; letter-spacing: .02em; }
  .ag-vue--tel { display: inline-flex; }

  /* « 7 jours » : toute la semaine dans la largeur, toute la journée dans
     la hauteur — comme le widget de Google Agenda. Les cartes ne gardent
     que l'heure et le nom ; toucher un jour l'ouvre en grand. */
  .ag-cal--serre {
    --ag-quart: 12px;
    grid-template-columns: 28px repeat(7, minmax(0, 1fr));
  }
  .ag-cal--serre .ag-cal-tete { padding: 4px 0; gap: 0; }
  .ag-cal--serre .ag-cal-tete-nom { font-size: .54rem; letter-spacing: .03em; }
  .ag-cal--serre .ag-cal-tete-num { width: 1.45rem; height: 1.45rem; font-size: .98rem; }
  .ag-cal--serre .ag-cal-heures span { font-size: .54rem; padding-right: 2px; }
  .ag-cal--serre .ag-ev {
    margin: 0 1px; padding: 1px 2px; gap: 0;
    border-left-width: 2px; border-radius: 4px;
    font-size: .56rem; line-height: 1.15;
  }
  .ag-cal--serre .ag-ev-h { font-size: .52rem; }
  .ag-cal--serre .ag-ev-fin,
  .ag-cal--serre .ag-ev-soin,
  .ag-cal--serre .ag-ev.est-court .ag-ev-h { display: none; }
  .ag-cal--serre .ag-ev--a_confirmer .ag-ev-h::after { content: none; }
  /* Le nom passe à la ligne entre les mots, jamais au milieu : un mot trop
     long pour la colonne est rogné plutôt que haché lettre par lettre. */
  .ag-cal--serre .ag-ev-qui { white-space: normal; overflow-wrap: normal; text-overflow: clip; }
  /* Deux rendez-vous côte à côte dans une colonne de 45 px : l'heure ne
     tient plus, la place de la carte dans la grille la dit déjà. */
  .ag-cal--serre .ag-ev:not(.ag-v-0-1) .ag-ev-h { display: none; }
  .ag-cal--serre .ag-ev.est-court { flex-direction: column; align-items: stretch; }
  .ag-cal--serre .ag-ferme span { display: none; }
  .ag-cal--serre .ag-maintenant::before { width: 6px; height: 6px; left: -3px; top: -2px; }

  .ag-li { padding: 11px 12px; gap: 12px; }
  .ag-li-qui { font-size: 1.12rem; }
  .ag-li--confirme .ag-li-etat, .ag-li--honore .ag-li-etat { display: none; }
}

/* ---- Placement dans la grille : produit par un script, ne pas retoucher à la main ----
   ag-l-N : commence au N-ième quart d'heure · ag-h-N : dure N quarts d'heure (jusqu'à 24 h)
   ag-v-I-N : voie I sur N · ag-m-N : N minutes plus bas (la ligne « maintenant ») */
.ag-l-1{grid-row-start:1}.ag-l-2{grid-row-start:2}.ag-l-3{grid-row-start:3}.ag-l-4{grid-row-start:4}.ag-l-5{grid-row-start:5}.ag-l-6{grid-row-start:6}.ag-l-7{grid-row-start:7}.ag-l-8{grid-row-start:8}.ag-l-9{grid-row-start:9}.ag-l-10{grid-row-start:10}.ag-l-11{grid-row-start:11}.ag-l-12{grid-row-start:12}.ag-l-13{grid-row-start:13}.ag-l-14{grid-row-start:14}.ag-l-15{grid-row-start:15}.ag-l-16{grid-row-start:16}.ag-l-17{grid-row-start:17}.ag-l-18{grid-row-start:18}.ag-l-19{grid-row-start:19}.ag-l-20{grid-row-start:20}.ag-l-21{grid-row-start:21}.ag-l-22{grid-row-start:22}.ag-l-23{grid-row-start:23}.ag-l-24{grid-row-start:24}.ag-l-25{grid-row-start:25}.ag-l-26{grid-row-start:26}.ag-l-27{grid-row-start:27}.ag-l-28{grid-row-start:28}.ag-l-29{grid-row-start:29}.ag-l-30{grid-row-start:30}.ag-l-31{grid-row-start:31}.ag-l-32{grid-row-start:32}.ag-l-33{grid-row-start:33}.ag-l-34{grid-row-start:34}.ag-l-35{grid-row-start:35}.ag-l-36{grid-row-start:36}.ag-l-37{grid-row-start:37}.ag-l-38{grid-row-start:38}.ag-l-39{grid-row-start:39}.ag-l-40{grid-row-start:40}.ag-l-41{grid-row-start:41}.ag-l-42{grid-row-start:42}.ag-l-43{grid-row-start:43}.ag-l-44{grid-row-start:44}.ag-l-45{grid-row-start:45}.ag-l-46{grid-row-start:46}.ag-l-47{grid-row-start:47}.ag-l-48{grid-row-start:48}.ag-l-49{grid-row-start:49}.ag-l-50{grid-row-start:50}.ag-l-51{grid-row-start:51}.ag-l-52{grid-row-start:52}.ag-l-53{grid-row-start:53}.ag-l-54{grid-row-start:54}.ag-l-55{grid-row-start:55}.ag-l-56{grid-row-start:56}.ag-l-57{grid-row-start:57}.ag-l-58{grid-row-start:58}.ag-l-59{grid-row-start:59}.ag-l-60{grid-row-start:60}.ag-l-61{grid-row-start:61}.ag-l-62{grid-row-start:62}.ag-l-63{grid-row-start:63}.ag-l-64{grid-row-start:64}.ag-l-65{grid-row-start:65}.ag-l-66{grid-row-start:66}.ag-l-67{grid-row-start:67}.ag-l-68{grid-row-start:68}.ag-l-69{grid-row-start:69}.ag-l-70{grid-row-start:70}.ag-l-71{grid-row-start:71}.ag-l-72{grid-row-start:72}.ag-l-73{grid-row-start:73}.ag-l-74{grid-row-start:74}.ag-l-75{grid-row-start:75}.ag-l-76{grid-row-start:76}.ag-l-77{grid-row-start:77}.ag-l-78{grid-row-start:78}.ag-l-79{grid-row-start:79}.ag-l-80{grid-row-start:80}.ag-l-81{grid-row-start:81}.ag-l-82{grid-row-start:82}.ag-l-83{grid-row-start:83}.ag-l-84{grid-row-start:84}.ag-l-85{grid-row-start:85}.ag-l-86{grid-row-start:86}.ag-l-87{grid-row-start:87}.ag-l-88{grid-row-start:88}.ag-l-89{grid-row-start:89}.ag-l-90{grid-row-start:90}.ag-l-91{grid-row-start:91}.ag-l-92{grid-row-start:92}.ag-l-93{grid-row-start:93}.ag-l-94{grid-row-start:94}.ag-l-95{grid-row-start:95}.ag-l-96{grid-row-start:96}
.ag-h-1{grid-row-end:span 1}.ag-h-2{grid-row-end:span 2}.ag-h-3{grid-row-end:span 3}.ag-h-4{grid-row-end:span 4}.ag-h-5{grid-row-end:span 5}.ag-h-6{grid-row-end:span 6}.ag-h-7{grid-row-end:span 7}.ag-h-8{grid-row-end:span 8}.ag-h-9{grid-row-end:span 9}.ag-h-10{grid-row-end:span 10}.ag-h-11{grid-row-end:span 11}.ag-h-12{grid-row-end:span 12}.ag-h-13{grid-row-end:span 13}.ag-h-14{grid-row-end:span 14}.ag-h-15{grid-row-end:span 15}.ag-h-16{grid-row-end:span 16}.ag-h-17{grid-row-end:span 17}.ag-h-18{grid-row-end:span 18}.ag-h-19{grid-row-end:span 19}.ag-h-20{grid-row-end:span 20}.ag-h-21{grid-row-end:span 21}.ag-h-22{grid-row-end:span 22}.ag-h-23{grid-row-end:span 23}.ag-h-24{grid-row-end:span 24}.ag-h-25{grid-row-end:span 25}.ag-h-26{grid-row-end:span 26}.ag-h-27{grid-row-end:span 27}.ag-h-28{grid-row-end:span 28}.ag-h-29{grid-row-end:span 29}.ag-h-30{grid-row-end:span 30}.ag-h-31{grid-row-end:span 31}.ag-h-32{grid-row-end:span 32}.ag-h-33{grid-row-end:span 33}.ag-h-34{grid-row-end:span 34}.ag-h-35{grid-row-end:span 35}.ag-h-36{grid-row-end:span 36}.ag-h-37{grid-row-end:span 37}.ag-h-38{grid-row-end:span 38}.ag-h-39{grid-row-end:span 39}.ag-h-40{grid-row-end:span 40}.ag-h-41{grid-row-end:span 41}.ag-h-42{grid-row-end:span 42}.ag-h-43{grid-row-end:span 43}.ag-h-44{grid-row-end:span 44}.ag-h-45{grid-row-end:span 45}.ag-h-46{grid-row-end:span 46}.ag-h-47{grid-row-end:span 47}.ag-h-48{grid-row-end:span 48}.ag-h-49{grid-row-end:span 49}.ag-h-50{grid-row-end:span 50}.ag-h-51{grid-row-end:span 51}.ag-h-52{grid-row-end:span 52}.ag-h-53{grid-row-end:span 53}.ag-h-54{grid-row-end:span 54}.ag-h-55{grid-row-end:span 55}.ag-h-56{grid-row-end:span 56}.ag-h-57{grid-row-end:span 57}.ag-h-58{grid-row-end:span 58}.ag-h-59{grid-row-end:span 59}.ag-h-60{grid-row-end:span 60}.ag-h-61{grid-row-end:span 61}.ag-h-62{grid-row-end:span 62}.ag-h-63{grid-row-end:span 63}.ag-h-64{grid-row-end:span 64}.ag-h-65{grid-row-end:span 65}.ag-h-66{grid-row-end:span 66}.ag-h-67{grid-row-end:span 67}.ag-h-68{grid-row-end:span 68}.ag-h-69{grid-row-end:span 69}.ag-h-70{grid-row-end:span 70}.ag-h-71{grid-row-end:span 71}.ag-h-72{grid-row-end:span 72}.ag-h-73{grid-row-end:span 73}.ag-h-74{grid-row-end:span 74}.ag-h-75{grid-row-end:span 75}.ag-h-76{grid-row-end:span 76}.ag-h-77{grid-row-end:span 77}.ag-h-78{grid-row-end:span 78}.ag-h-79{grid-row-end:span 79}.ag-h-80{grid-row-end:span 80}.ag-h-81{grid-row-end:span 81}.ag-h-82{grid-row-end:span 82}.ag-h-83{grid-row-end:span 83}.ag-h-84{grid-row-end:span 84}.ag-h-85{grid-row-end:span 85}.ag-h-86{grid-row-end:span 86}.ag-h-87{grid-row-end:span 87}.ag-h-88{grid-row-end:span 88}.ag-h-89{grid-row-end:span 89}.ag-h-90{grid-row-end:span 90}.ag-h-91{grid-row-end:span 91}.ag-h-92{grid-row-end:span 92}.ag-h-93{grid-row-end:span 93}.ag-h-94{grid-row-end:span 94}.ag-h-95{grid-row-end:span 95}.ag-h-96{grid-row-end:span 96}
.ag-cal-jour>.ag-v-0-1{grid-column:1/span 12}.ag-cal-jour>.ag-v-0-2{grid-column:1/span 6}.ag-cal-jour>.ag-v-1-2{grid-column:7/span 6}.ag-cal-jour>.ag-v-0-3{grid-column:1/span 4}.ag-cal-jour>.ag-v-1-3{grid-column:5/span 4}.ag-cal-jour>.ag-v-2-3{grid-column:9/span 4}.ag-cal-jour>.ag-v-0-4{grid-column:1/span 3}.ag-cal-jour>.ag-v-1-4{grid-column:4/span 3}.ag-cal-jour>.ag-v-2-4{grid-column:7/span 3}.ag-cal-jour>.ag-v-3-4{grid-column:10/span 3}
.ag-m-1{margin-top:calc(var(--ag-quart)*1/15)}.ag-m-2{margin-top:calc(var(--ag-quart)*2/15)}.ag-m-3{margin-top:calc(var(--ag-quart)*3/15)}.ag-m-4{margin-top:calc(var(--ag-quart)*4/15)}.ag-m-5{margin-top:calc(var(--ag-quart)*5/15)}.ag-m-6{margin-top:calc(var(--ag-quart)*6/15)}.ag-m-7{margin-top:calc(var(--ag-quart)*7/15)}.ag-m-8{margin-top:calc(var(--ag-quart)*8/15)}.ag-m-9{margin-top:calc(var(--ag-quart)*9/15)}.ag-m-10{margin-top:calc(var(--ag-quart)*10/15)}.ag-m-11{margin-top:calc(var(--ag-quart)*11/15)}.ag-m-12{margin-top:calc(var(--ag-quart)*12/15)}.ag-m-13{margin-top:calc(var(--ag-quart)*13/15)}.ag-m-14{margin-top:calc(var(--ag-quart)*14/15)}