/*
 * On the Mat — Coaching · Thème applicatif unique
 * Vitrine Astro, blog, espaces élève/coach et administration.
 * Toute règle visuelle runtime appartient à ce fichier.
 */

/* Polices auto-hébergées */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/lora-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/lora-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/lora-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/lora-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
}

/* ---------- Design system v2 — duo des espaces connectés ----------------------------
   Instrument Serif remplace Lora et Instrument Sans remplace Inter dans les surfaces
   élève, coach et administration UNIQUEMENT. La vitrine et le blog gardent le duo v1 :
   ce sont deux systèmes qui cohabitent, pas une migration à moitié faite.
   Auto-hébergées comme les précédentes (aucune requête vers un CDN de polices). */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/instrument-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/instrument-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/instrument-sans-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/instrument-sans-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}

/* ---------- Tokens du design system v2 ----------------------------------------------
   Ils ne remplacent PAS les tokens v1 ci-dessous : ceux-ci habillent encore la vitrine
   et le blog. Préfixe `--ds-` pour que la provenance d'une valeur se lise dans la règle.

   Les six règles qui tiennent ce système debout (source : design system v2) :
     1. un seul vert par écran — le vert est l'action suivante, pas une couleur de marque ;
     2. vert clair = ce qui vient (le prochain rendez-vous, jamais autre chose) ;
     3. brique = ce qui cloche — un dû, un retard, une réservation orpheline ;
     4. une phrase, pas un paragraphe — une règle métier s'affiche comme un fait daté ;
     5. le titre du contenu suffit — une étiquette n'existe que si elle regroupe ;
     6. un état vide garde son action. */

:root {
  /* Surfaces */
  --ds-creme: #F5F2EC;        /* fond de page, partout                                  */
  --ds-blanc: #FFFFFF;        /* cartes et listes                                       */
  --ds-voile: #FAF8F4;        /* en-têtes de tableau, champs inertes                    */
  --ds-gres: #EFEBE3;         /* fonds creux, lignes éteintes                           */
  --ds-sable: #E3DDD3;        /* traits et séparateurs                                  */
  --ds-sable-fort: #8A827A;   /* contour des contrôles — 3,4:1 minimum, cf. WCAG 1.4.11 */
  --ds-filet: #EFEBE3;        /* séparateur interne d'une carte                          */
  --ds-cacao: #2B241F;        /* aplats inverses, barre latérale de l'administration    */
  --ds-cacao-clair: #3A322C;  /* survol sur aplat inverse                                */

  /* Textes */
  --ds-encre: #1B1916;        /* titres et texte courant                                */
  --ds-encre-douce: #5E5750;  /* secondaire — 6,4:1 sur crème                           */
  --ds-encre-tenue: #6F6860;  /* étiquettes, méta, placeholders — 5,5:1                 */
  --ds-inverse: #F5F2EC;      /* texte sur aplat cacao                                  */
  --ds-inverse-doux: #D8CDBF; /* texte secondaire sur aplat cacao                       */

  /* Action — un seul vert */
  --ds-vert: #1F6B50;         /* action unique — 6,2:1 sur blanc                        */
  --ds-vert-presse: #17563F;  /* survol et appui                                        */
  --ds-vert-pale: #E4EFE8;    /* badges d'état positif                                  */
  --ds-vert-carte: #EAF3ED;   /* la carte « ce qui vient »                              */
  --ds-vert-filet: #C9DFD1;   /* contour de cette carte                                 */
  --ds-vert-filet-clair: #DAE8E0;
  --ds-vert-voile: #F1F6F2;   /* ligne de liste sélectionnée                            */

  /* Signal — ce qui cloche */
  --ds-brique: #B85C34;       /* jauges, filets, pastilles                              */
  --ds-brique-texte: #93441F; /* tout mot ou chiffre en brique — 6,1:1                  */
  --ds-brique-pale: #FBEADF;  /* fond de badge                                          */
  --ds-brique-carte: #FDF4EE; /* fond d'alerte, une par écran                           */
  --ds-brique-filet: #E8C3AE;

  /* Duo typographique */
  --ds-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ds-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Rayons — 8 champs · 12 boutons · 18 cartes · 999 badges seulement */
  --ds-r-champ: 8px;
  --ds-r-bouton: 12px;
  --ds-r-bouton-sm: 10px;
  --ds-r-bloc: 14px;
  --ds-r-carte: 18px;
  --ds-r-carte-lg: 20px;
  --ds-r-pilule: 999px;

  /* Rythme — multiples de 4, sans exception */
  --ds-1: 4px;
  --ds-2: 8px;
  --ds-3: 12px;
  --ds-4: 16px;
  --ds-5: 20px;
  --ds-6: 24px;
  --ds-8: 32px;
  --ds-12: 48px;

  /* Élévation — « flottante », jamais lourde : l'ombre porte loin et reste transparente. */
  --ds-ombre-carte: 0 1px 2px rgba(27, 25, 22, .04), 0 10px 28px -22px rgba(27, 25, 22, .38);
  --ds-ombre-levee: 0 2px 4px rgba(27, 25, 22, .05), 0 16px 34px -20px rgba(27, 25, 22, .42);
  --ds-ombre-flottante: 0 10px 30px -18px rgba(27, 25, 22, .40);
  --ds-ombre-haute: 0 24px 64px -28px rgba(27, 25, 22, .45);

  /* Mouvement — UNE durée, UNE courbe pour tout le système. */
  --ds-duree: 180ms;
  --ds-courbe: cubic-bezier(.22, .61, .36, 1);

  /* Focus clavier — même trait partout. */
  --ds-focus: 2px solid #1F6B50;
  --ds-focus-decalage: 2px;
}

/* On the Mat — Coaching · Design tokens
   Fusion de design-system/tokens/colors.css + spacing.css + typography.css.
   Les polices sont auto-hébergées dans /fonts/ et déclarées ci-dessus. */

:root {
  /* ---- Couleurs — palette « Cacao & vert d'eau » ---- */
  --cacao: #3B2E27;         /* Cacao — couleur principale (titres, aplats) */
  --cacao-fonce: #2E241E;   /* hover / press sur cacao */
  --cacao-clair: #6B5A4E;   /* variantes discrètes, icônes secondaires */
  --vert-eau: #3E7A62;      /* Vert d'eau — accent UNIQUE */
  --vert-eau-fonce: #346852;/* hover boutons vert d'eau */
  --vert-eau-press: #2C5745;/* press boutons vert d'eau */
  --pomme: #8FBE2F;         /* Vert pomme — alternative tonique (non utilisée actuellement) */
  --terracotta: #C97B5A;    /* Terracotta — liserés des cartes et tableaux */
  --terracotta-fonce: #B0674A; /* hover des liserés terracotta */
  --celadon: #DCE8DE;       /* fonds de sections, cartes */
  --celadon-fonce: #C6D7CB; /* bordures sur céladon, hover cartes */
  --creme: #F3EFE9;         /* fond de page */
  --encre: #28221E;         /* texte — jamais de noir pur */
  --encre-douce: #57504A;   /* texte secondaire */
  --blanc: #FFFFFF;         /* cartes sur fond céladon */

  /* Sémantiques */
  --bg-page: var(--creme);
  --bg-section: var(--celadon);
  --bg-card: var(--blanc);
  --bg-inverse: var(--cacao);
  --text-body: var(--encre);
  --text-muted: var(--encre-douce);
  --text-heading: var(--cacao);
  --text-on-inverse: var(--creme);
  --text-on-accent: #FFFFFF;
  --accent: var(--vert-eau);
  --accent-hover: var(--vert-eau-fonce);
  --accent-press: var(--vert-eau-press);
  --border-subtle: var(--celadon-fonce);
  --border-strong: var(--cacao);
  --focus-ring: var(--vert-eau);

  /* ---- Espacement (base 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Rayons — doux, jamais “pilule partout” */
  --radius-sm: 6px;    /* champs, badges rectangulaires */
  --radius-md: 10px;   /* boutons */
  --radius-lg: 16px;   /* cartes */
  --radius-pill: 999px;/* badge crédit d'impôt */

  /* Ombres — légères uniquement */
  --shadow-card: 0 1px 3px rgba(40, 34, 30, 0.07);
  --shadow-card-hover: 0 3px 10px rgba(40, 34, 30, 0.10);

  /* États */
  --focus-outline: 2px solid var(--focus-ring);
  --focus-offset: 2px;
  --tap-target: 48px;    /* zone cliquable minimale */
  --transition: 150ms ease;

  /* Mise en page */
  --container: 1120px;
  --container-narrow: 720px;

  /* ---- Typographie ---- */
  --font-serif: 'Lora', Georgia, serif;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Échelle */
  --text-xs: 14px;    /* mentions, légendes */
  --text-sm: 15px;    /* labels, meta */
  --text-base: 17px;  /* corps de texte (17–18px) */
  --text-md: 18px;    /* corps confortable, intro */
  --text-lg: 21px;    /* lead, sous-titres */
  --text-xl: 26px;    /* h3 */
  --text-2xl: 32px;   /* h2 */
  --text-3xl: 42px;   /* h1 */
  --text-4xl: 54px;   /* hero */

  /* Interlignage */
  --leading-body: 1.7;
  --leading-heading: 1.2;
  --leading-tight: 1.1;

  /* Graisse */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Lettrage */
  --tracking-caps: 0.08em; /* petites capitales de section */
}

/* Socle de la vitrine Astro */
/* On the Mat — Coaching · Styles globaux */

body.surface-public *,
body.surface-public *::before,
body.surface-public *::after {
  box-sizing: border-box;
}

body.surface-public {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.surface-public img {
  max-width: 100%;
  display: block;
}

body.surface-public a {
  color: var(--vert-eau-fonce);
}
body.surface-public a:hover {
  color: var(--vert-eau-fonce);
}

body.surface-public h1,
body.surface-public h2,
body.surface-public h3,
body.surface-public h4 {
  font-family: var(--font-serif);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

body.surface-public h1 {
  font-size: var(--text-3xl);
}

body.surface-public h2 {
  font-size: var(--text-2xl);
}

body.surface-public h3 {
  font-size: var(--text-xl);
}

/* Paliers mobiles documentés dans DESIGN.md (h1 30px, h2 24px sous 640px) — les h1 fixes
   à 42px débordaient de la charte sur petit écran (seul le héros d'accueil avait un clamp). */
@media (max-width: 640px) {
  body.surface-public h1 {
    font-size: 30px;
  }
  body.surface-public h2 {
    font-size: 24px;
  }
}

body.surface-public p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

/* Grille de mise en page */
body.surface-public .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

body.surface-public .container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Kicker : petite légende de section */
body.surface-public .kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--vert-eau-fonce);
}

/* Lien d'évitement */
body.surface-public .skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--cacao);
  color: var(--creme);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}
body.surface-public .skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* Focus visible global */
body.surface-public a:focus-visible,
body.surface-public button:focus-visible,
body.surface-public input:focus-visible,
body.surface-public textarea:focus-visible,
body.surface-public select:focus-visible,
body.surface-public [tabindex]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Composant Astro : BadgeCreditImpot.astro */
body.surface-public .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-weight: var(--weight-bold);
    line-height: 1;
    border-radius: var(--radius-pill);
    letter-spacing: 0.01em;
  }

  body.surface-public .badge--md {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-4);
  }
  body.surface-public .badge--lg {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-5);
  }

  body.surface-public .badge--celadon {
    background: var(--celadon);
    color: var(--vert-eau-fonce);
  }
  body.surface-public .badge--vert-eau {
    background: var(--vert-eau);
    color: #fff;
  }
  body.surface-public .badge--terracotta {
    background: var(--terracotta);
    color: #fff;
  }
  body.surface-public .badge--cacao {
    background: var(--cacao);
    color: var(--creme);
  }
  body.surface-public .badge--contour {
    background: transparent;
    color: var(--cacao);
    border: 1.5px solid var(--cacao);
  }

/* Composant Astro : Button.astro */
body.surface-public .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    line-height: 1;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
  }

  body.surface-public .btn:disabled,
body.surface-public .btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* Très petits écrans : le libellé peut passer sur deux lignes plutôt que déborder */
  @media (max-width: 400px) {
    body.surface-public .btn {
      white-space: normal;
      line-height: 1.3;
      text-align: center;
    }
  }

  /* Tailles */
  body.surface-public .btn--md {
    min-height: var(--tap-target);
    padding: 0 var(--space-5);
    font-size: 16px;
  }
  body.surface-public .btn--lg {
    min-height: 56px;
    padding: 0 var(--space-6);
    font-size: var(--text-base);
  }

  /* Variantes */
  body.surface-public .btn--primaire {
    background: var(--vert-eau);
    color: var(--text-on-accent);
    border: 1px solid transparent;
  }
  body.surface-public .btn--primaire:hover {
    background: var(--vert-eau-fonce);
  }
  body.surface-public .btn--primaire:active {
    background: var(--vert-eau-press);
  }

  body.surface-public .btn--secondaire {
    background: transparent;
    color: var(--cacao);
    border: 1.5px solid var(--cacao);
  }
  /* Hover fond crème (lettre de la charte, DESIGN.md §5 Buttons) + contour renforcé :
     sur les sections déjà crème, le fond seul serait invisible. */
  body.surface-public .btn--secondaire:hover {
    background: var(--creme);
    border-color: var(--cacao-fonce);
  }
  body.surface-public .btn--secondaire:active {
    background: var(--celadon);
  }

  body.surface-public .btn--inverse {
    background: var(--creme);
    color: var(--cacao);
    border: 1px solid transparent;
  }
  body.surface-public .btn--inverse:hover {
    background: var(--celadon);
  }
  body.surface-public .btn--inverse:active {
    background: var(--celadon-fonce);
  }

/* Composant Astro : ContactForm.astro */
body.surface-public .contact-form,
body.surface-public .contact-card {
    background: var(--blanc);
    border: 2px solid var(--vert-eau);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-sizing: border-box;
  }
  body.surface-public .contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  body.surface-public .contact-form__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
    line-height: 1.25;
  }
  body.surface-public .contact-form__subtitle {
    margin: var(--space-2) 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--encre-douce);
  }

  body.surface-public .contact-form__erreur {
    margin: 0;
    padding: var(--space-4);
    border: 1.5px solid var(--terracotta);
    border-radius: var(--radius-sm);
    background: var(--creme);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--encre);
  }
  body.surface-public .contact-form__erreur a {
    color: var(--vert-eau-fonce);
  }

  /* Honeypot : hors écran (jamais display:none, trop repérable pour les robots) */
  body.surface-public .contact-form__hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  body.surface-public .contact-form__ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  @media (max-width: 640px) {
    body.surface-public .contact-form__ligne {
      grid-template-columns: 1fr;
    }
  }

  body.surface-public .contact-form__parcours {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body.surface-public .contact-form__legende {
    margin-bottom: var(--space-3);
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--encre);
  }
  body.surface-public .contact-form__choix-parcours {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  body.surface-public .contact-form__radio-source {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  body.surface-public .contact-form__option-parcours {
    min-height: 132px;
    padding: var(--space-4);
    box-sizing: border-box;
    border: 1.5px solid var(--celadon-fonce);
    border-radius: var(--radius-md);
    background: var(--blanc);
    cursor: pointer;
    transition:
      border-color var(--transition),
      background-color var(--transition);
  }
  body.surface-public .contact-form__option-parcours:hover {
    border-color: var(--vert-eau);
    background: var(--creme);
  }
  body.surface-public .contact-form__radio-source:focus-visible + .contact-form__option-parcours {
    outline: 2px solid var(--vert-eau);
    outline-offset: 3px;
  }
  body.surface-public .contact-form__radio-source:checked + .contact-form__option-parcours {
    border-color: var(--vert-eau);
    background: var(--celadon);
  }
  body.surface-public .contact-form__radio-source:disabled + .contact-form__option-parcours {
    cursor: default;
  }
  body.surface-public .contact-form__option-titre,
  body.surface-public .contact-form__option-texte {
    display: block;
  }
  body.surface-public .contact-form__option-titre {
    font-family: var(--font-serif);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    color: var(--cacao);
  }
  body.surface-public .contact-form__option-texte {
    margin-top: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--encre-douce);
  }
  body.surface-public .contact-form__panneau {
    display: none;
    grid-column: 1 / -1;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--celadon-fonce);
    border-radius: var(--radius-md);
    background: var(--creme);
  }
  body.surface-public #contact-parcours-attribution:checked
    ~ .contact-form__panneau--attribution,
  body.surface-public #contact-parcours-coach:checked
    ~ .contact-form__panneau--coach {
    display: grid;
  }
  body.surface-public .contact-form__panneau-intro,
  body.surface-public .contact-form__confidentialite {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--encre-douce);
  }
  body.surface-public .contact-form__confidentialite {
    padding-top: var(--space-3);
    border-top: 1px solid var(--celadon-fonce);
  }
  @media (max-width: 640px) {
    body.surface-public .contact-form__choix-parcours {
      grid-template-columns: 1fr;
    }
    body.surface-public .contact-form__option-parcours {
      min-height: 0;
    }
  }

  body.surface-public .champ {
    display: block;
  }
  body.surface-public .telephone-compose {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  body.surface-public .telephone-compose__champs {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--space-3);
  }
  body.surface-public .telephone-compose label {
    min-width: 0;
  }
  body.surface-public .champ__sous-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--encre-douce);
  }
  body.surface-public .champ__label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--encre);
    margin-bottom: 6px;
  }
  body.surface-public .champ__input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--tap-target);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--celadon-fonce);
    outline: none;
    background: var(--blanc);
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--encre);
    transition: border-color var(--transition);
  }
  body.surface-public .champ__input:focus {
    border-color: var(--vert-eau);
  }
  body.surface-public .champ__input--textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
  }
  body.surface-public .champ__aide {
    display: block;
    margin-top: 6px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--encre-douce);
  }
  body.surface-public .contact-form__coach-etat {
    min-height: 1.5em;
    margin: -10px 0 0;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--encre-douce);
  }
  body.surface-public .contact-form__coach-etat--valide {
    color: var(--vert-eau-fonce);
    font-weight: var(--weight-semibold);
  }

  body.surface-public .contact-form__consentement {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--encre-douce);
    cursor: pointer;
  }
  body.surface-public .contact-form__consentement input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--vert-eau);
  }
  body.surface-public .contact-form__consentement a {
    color: var(--vert-eau-fonce);
  }

  body.surface-public .contact-form__envoi {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  body.surface-public .contact-form__delai {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--encre-douce);
  }

  body.surface-public .contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  body.surface-public .contact-card__coordonnees {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
  }
  body.surface-public .contact-card__ligne {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--encre);
  }
  body.surface-public .contact-card__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--vert-eau-fonce);
  }

/* Composant Astro : Footer.astro */
body.surface-public .footer {
    background: var(--cacao);
    color: var(--creme);
    padding: 56px 0 var(--space-6);
    box-sizing: border-box;
    font-family: var(--font-sans);
  }

  body.surface-public .footer__grille {
    display: flex;
    justify-content: space-between;
    gap: var(--space-7);
    flex-wrap: wrap;
  }

  body.surface-public .footer__marque {
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  body.surface-public .footer__logo {
    height: 52px;
    width: auto;
    align-self: flex-start;
  }
  body.surface-public .footer__baseline {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--celadon);
  }

  body.surface-public .footer__colonne {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body.surface-public .footer__titre {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--celadon);
  }
  body.surface-public .footer__lien {
    color: var(--celadon);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    /* Cible ≥ 48px comme partout sur le site public (charte §5) + coupe propre des
       adresses email longues sur petit écran. */
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    overflow-wrap: anywhere;
  }
  body.surface-public a.footer__lien:hover {
    color: #fff;
  }
  body.surface-public .footer__texte {
    font-size: var(--text-sm);
    color: var(--celadon);
  }

  body.surface-public .footer__bas {
    margin-top: 40px;
    padding-top: var(--space-5);
    border-top: 1px solid rgba(243, 239, 233, 0.25);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--celadon);
  }
  body.surface-public .footer__legal {
    display: flex;
    gap: var(--space-5);
  }
  body.surface-public .footer__legal a {
    color: var(--celadon);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: var(--text-xs);
    transition: color var(--transition);
  }
  body.surface-public .footer__legal a:hover {
    color: #fff;
  }

  @media (max-width: 640px) {
    body.surface-public .footer__grille {
      flex-direction: column;
      gap: var(--space-6);
    }
  }

/* Composant Astro : Header.astro */
body.surface-public .header {
    background: var(--creme);
    border-bottom: 1px solid var(--celadon-fonce);
    box-sizing: border-box;
    /* Sticky discret : le bouton « Réserver » (raison d'être du site) reste accessible
       sur toute la hauteur de page — critique du 2026-07-20, problème P1 n°1. Pas
       d'ombre ajoutée : la bordure basse suffit (règle de l'ombre timide). */
    position: sticky;
    top: 0;
    z-index: 100;
  }

  body.surface-public .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  body.surface-public .header__logo {
    display: flex;
    align-items: center;
    min-height: var(--tap-target);
  }
  body.surface-public .header__logo img {
    height: 48px;
    width: auto;
    display: block;
  }

  body.surface-public .header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  body.surface-public .header__lien {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: var(--weight-medium);
    color: var(--encre);
    text-decoration: none;
    padding: 12px 12px;
    min-height: var(--tap-target);
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
    /* Jamais de libellé sur deux lignes : sous le point de rupture, c'est le menu
       burger qui prend le relais (media query ci-dessous). */
    white-space: nowrap;
  }
  body.surface-public .header__lien:hover {
    color: var(--cacao);
  }

  /* Menu déroulant « Mon espace » : ouverture au CLIC (fiable au doigt, contrairement au
     survol), fermeture au clic extérieur / Échap gérée par le script ci-dessous. */
  body.surface-public .header__menu {
    position: relative;
  }
  body.surface-public .header__menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    gap: var(--space-2);
  }
  body.surface-public .header__chevron {
    transition: transform var(--transition);
  }
  body.surface-public .header__menu-btn[aria-expanded='true'] .header__chevron {
    transform: rotate(180deg);
  }
  body.surface-public .header__sousmenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 190px;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--celadon-fonce);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-hover);
    /* Rayons concentriques : externe (10) = interne (6) + padding (4). */
    padding: var(--space-1, 4px);
    z-index: 200;
  }
  body.surface-public .header__sousmenu--ouvert {
    display: flex;
  }
  body.surface-public .header__souslien {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: var(--weight-medium);
    color: var(--encre);
    text-decoration: none;
    padding: 12px 14px;
    min-height: var(--tap-target);
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
  }
  body.surface-public .header__souslien:hover {
    background: var(--celadon);
    color: var(--cacao);
  }

  body.surface-public .header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: var(--tap-target);
    height: var(--tap-target);
    background: transparent;
    border: 1.5px solid var(--cacao);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
  }
  body.surface-public .header__burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--cacao);
    transition: transform var(--transition), opacity var(--transition);
  }
  body.surface-public .header__burger[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.surface-public .header__burger[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
  }
  body.surface-public .header__burger[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  body.surface-public .header__cta {
    display: flex;
    align-items: center;
  }

  /* 1150px : en dessous, la barre complète (logo + 6 items + CTA, libellés sur UNE ligne)
     ne tient plus (besoin mesuré ≈ 1116px) → menu burger. */
  @media (max-width: 1150px) {
    body.surface-public .header__burger {
      display: flex;
    }

    body.surface-public .header__nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--creme);
      border-bottom: 1px solid var(--celadon-fonce);
      padding: var(--space-2) var(--space-6) var(--space-4);
      box-shadow: var(--shadow-card-hover);
    }
    body.surface-public .header__nav.header__nav--ouvert {
      display: flex;
    }
    body.surface-public .header__lien {
      width: 100%;
    }
    /* Dans le menu mobile, le déroulant devient un accordéon dans le flux (pas de panneau
       flottant) : sous-liens légèrement indentés sur fond céladon doux. */
    body.surface-public .header__menu {
      width: 100%;
    }
    body.surface-public .header__menu-btn {
      width: 100%;
      justify-content: space-between;
    }
    body.surface-public .header__sousmenu {
      position: static;
      border: none;
      box-shadow: none;
      background: transparent;
      padding: 0 0 var(--space-2) var(--space-4);
    }
  }

/* Composant Astro : PorteCard.astro */
body.surface-public .porte-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--celadon-fonce);
    box-shadow: var(--shadow-card);
    padding: var(--space-6);
    text-decoration: none;
    transition: box-shadow var(--transition), border-color var(--transition);
    min-height: 260px;
    box-sizing: border-box;
  }
  body.surface-public .porte-card:hover {
    border-color: var(--cacao-clair);
    box-shadow: var(--shadow-card-hover);
  }

  body.surface-public .porte-card__kicker {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--vert-eau-fonce);
  }

  body.surface-public .porte-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
    line-height: 1.25;
  }

  body.surface-public .porte-card__description {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--encre);
  }

  body.surface-public .porte-card__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.surface-public .porte-card__points li {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--encre-douce);
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
  }
  body.surface-public .porte-card__puce {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cacao-clair);
    flex-shrink: 0;
    position: relative;
    top: -3px;
  }

  body.surface-public .porte-card__cta {
    margin-top: auto;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: var(--weight-semibold);
    color: var(--vert-eau-fonce);
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    transition: color var(--transition);
  }
  body.surface-public .porte-card:hover .porte-card__cta {
    color: var(--vert-eau-fonce);
  }
  body.surface-public .porte-card__fleche {
    transition: transform var(--transition);
  }
  body.surface-public .porte-card:hover .porte-card__fleche {
    transform: translateX(3px);
  }

/* Composant Astro : PrestationCard.astro */
body.surface-public .prestation-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--celadon-fonce);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-sizing: border-box;
  }
  body.surface-public .prestation-card--celadon {
    background: var(--celadon);
  }
  body.surface-public .prestation-card--blanc {
    background: var(--blanc);
  }

  body.surface-public .prestation-card__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  body.surface-public .prestation-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
  }
  body.surface-public .prestation-card__duree {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--encre-douce);
    white-space: nowrap;
  }

  body.surface-public .prestation-card__description {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--encre);
  }

  body.surface-public .prestation-card__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.surface-public .prestation-card__points li {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--encre);
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
  }
  body.surface-public .prestation-card__puce {
    color: var(--cacao);
    font-weight: var(--weight-bold);
  }

  body.surface-public .prestation-card__pour-qui {
    margin-top: auto;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--encre-douce);
    border-top: 1px solid var(--celadon-fonce);
    padding-top: var(--space-3);
  }
  body.surface-public .prestation-card__pour-qui-label {
    font-weight: var(--weight-semibold);
    color: var(--cacao);
  }

/* Composant Astro : PrixReel.astro */
body.surface-public .prix-reel {
    font-family: var(--font-sans);
  }
  body.surface-public .prix-reel--center {
    text-align: center;
  }

  body.surface-public .prix-reel__ligne {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }
  body.surface-public .prix-reel--center .prix-reel__ligne {
    justify-content: center;
  }

  body.surface-public .prix-reel__reel {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--cacao);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  body.surface-public .prix-reel__unite {
    font-size: var(--text-sm);
    color: var(--encre-douce);
  }
  body.surface-public .prix-reel__facial {
    font-size: var(--text-sm);
    color: var(--encre-douce);
    margin-top: var(--space-2);
  }
  body.surface-public .prix-reel__barre {
    text-decoration: line-through;
  }

/* Composant Astro : Reassurance.astro */
body.surface-public .reassurance {
    border-radius: var(--radius-lg);
    padding: 18px var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: 10px var(--space-5);
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-sans);
    box-sizing: border-box;
  }
  body.surface-public .reassurance--celadon {
    background: var(--celadon);
  }
  body.surface-public .reassurance--cacao {
    background: var(--cacao);
  }

  body.surface-public .reassurance__item {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.3;
    white-space: nowrap;
    color: var(--encre);
  }
  body.surface-public .reassurance--cacao .reassurance__item {
    color: var(--creme);
  }

  body.surface-public .reassurance__icone {
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    body.surface-public .reassurance__item {
      white-space: normal;
    }
  }

/* Composant Astro : TarifTable.astro */
body.surface-public .tarif-table {
    font-family: var(--font-sans);
  }

  body.surface-public .tarif-table__cadre {
    background: var(--blanc);
    border-radius: var(--radius-lg);
    border: 2px solid var(--terracotta);
    overflow: hidden;
  }

  body.surface-public .tarif-table__entete,
body.surface-public .tarif-table__ligne {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-4);
    align-items: center;
  }

  body.surface-public .tarif-table__entete {
    padding: 14px var(--space-7);
    background: var(--cacao);
    color: var(--creme);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  body.surface-public .tarif-table__col-prix {
    text-align: right;
    min-width: 90px;
  }
  body.surface-public .tarif-table__col-reel {
    text-align: right;
    min-width: 150px;
  }

  body.surface-public .tarif-table__ligne {
    padding: 22px var(--space-7);
  }
  body.surface-public .tarif-table__ligne--highlight {
    background: var(--celadon);
  }
  body.surface-public .tarif-table__ligne--bordure {
    border-top: 1px solid var(--celadon-fonce);
  }

  body.surface-public .tarif-table__formule {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
  }
  body.surface-public .tarif-table__detail {
    font-size: var(--text-sm);
    color: var(--encre-douce);
    margin-top: 4px;
    line-height: 1.5;
  }

  body.surface-public .tarif-table__facial {
    text-align: right;
    min-width: 90px;
    font-size: 16px;
    color: var(--encre-douce);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
  }

  body.surface-public .tarif-table__reel-bloc {
    text-align: right;
    min-width: 150px;
  }
  body.surface-public .tarif-table__reel {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--cacao);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  body.surface-public .tarif-table__reel-legende {
    font-size: var(--text-xs);
    color: var(--encre-douce);
    margin-top: 2px;
  }

  body.surface-public .tarif-table__mention {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-top: var(--space-4);
  }
  body.surface-public .tarif-table__mention p {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--encre-douce);
    max-width: 560px;
  }

  @media (max-width: 640px) {
    body.surface-public .tarif-table__entete,
body.surface-public .tarif-table__ligne {
      grid-template-columns: 1fr;
      gap: var(--space-2);
      text-align: left;
    }
    body.surface-public .tarif-table__col-prix,
body.surface-public .tarif-table__col-reel,
body.surface-public .tarif-table__facial,
body.surface-public .tarif-table__reel-bloc {
      text-align: left;
      min-width: 0;
    }
    body.surface-public .tarif-table__entete {
      display: none;
    }
  }

/* Page Astro : 404.astro */
body.surface-public.page--404 #contenu .introuvable {
    padding: var(--space-9) 0 var(--space-10);
    text-align: center;
  }
  body.surface-public.page--404 #contenu .introuvable__texte {
    max-width: 520px;
    margin: var(--space-4) auto 0;
    font-size: var(--text-md);
    color: var(--encre-douce);
  }
  body.surface-public.page--404 #contenu .introuvable__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-6);
  }
  body.surface-public.page--404 #contenu .introuvable__aide {
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--encre-douce);
  }
  body.surface-public.page--404 #contenu .introuvable__aide a {
    color: var(--vert-eau-fonce);
    font-weight: var(--weight-semibold);
  }

/* Page Astro : a-propos.astro */
body.surface-public.page--a-propos #contenu .apropos-hero {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-7);
    align-items: center;
    padding-top: var(--space-9);
    padding-bottom: var(--space-8);
  }

  body.surface-public.page--a-propos #contenu .apropos-hero__intro {
    font-size: var(--text-md);
    color: var(--encre);
    max-width: 560px;
  }

  body.surface-public.page--a-propos #contenu .apropos-hero__portrait {
    width: 100%;
  }
  /* Portrait carré (844x843) : plein cadre de sa colonne, même traitement visuel que les
     autres photos du site (arrondi, ombre, fond céladon pendant le chargement). */
  body.surface-public.page--a-propos #contenu .apropos-hero__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--celadon);
    box-shadow: var(--shadow-card);
  }
  @media (max-width: 1024px) {
    body.surface-public.page--a-propos #contenu .apropos-hero__photo {
      max-width: 420px;
      margin-inline: auto;
    }
  }

  body.surface-public.page--a-propos #contenu .apropos-parcours {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  body.surface-public.page--a-propos #contenu .parcours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  body.surface-public.page--a-propos #contenu .parcours-card {
    background: var(--celadon);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-sizing: border-box;
  }

  body.surface-public.page--a-propos #contenu .parcours-card__titre {
    margin: 0;
  }

  body.surface-public.page--a-propos #contenu .parcours-card__texte {
    margin: 0;
    font-size: var(--text-base);
    color: var(--encre);
    line-height: var(--leading-body);
  }

  body.surface-public.page--a-propos #contenu .apropos-attention {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: center;
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  /* Photo portrait : cadre au ratio natif 3/4 (aucun rognage), taille contenue, centrée
     dans sa colonne — même traitement que les photos de l'accueil. */
  body.surface-public.page--a-propos #contenu .apropos-attention__photo {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin-inline: auto;
    border-radius: var(--radius-lg);
    background: var(--celadon);
    box-shadow: var(--shadow-card);
  }
  body.surface-public.page--a-propos #contenu .apropos-attention__texte h2 {
    margin: var(--space-2) 0 var(--space-4);
  }
  body.surface-public.page--a-propos #contenu .apropos-attention__texte p:not(.kicker) {
    margin: 0;
    color: var(--encre);
  }

  body.surface-public.page--a-propos #contenu .apropos-pourqui {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  body.surface-public.page--a-propos #contenu .apropos-cta {
    padding-top: var(--space-8);
    padding-bottom: var(--space-9);
  }

  body.surface-public.page--a-propos #contenu .apropos-cta__inner {
    background: var(--celadon);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    box-sizing: border-box;
  }

  body.surface-public.page--a-propos #contenu .apropos-cta__rappel {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
  }

  body.surface-public.page--a-propos #contenu .apropos-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }

  @media (max-width: 1024px) {
    body.surface-public.page--a-propos #contenu .apropos-hero {
      grid-template-columns: 1fr;
      padding-top: var(--space-8);
      padding-bottom: var(--space-7);
    }

    body.surface-public.page--a-propos #contenu .parcours-grid {
      grid-template-columns: 1fr;
    }

    body.surface-public.page--a-propos #contenu .apropos-attention {
      grid-template-columns: 1fr;
    }
  }

/* Page Astro : carnets.astro */
body.surface-public.page--carnets #contenu .carnet {
    padding: var(--space-9) 0 var(--space-10);
  }
  body.surface-public.page--carnets #contenu .carnet--bientot {
    text-align: center;
  }
  body.surface-public.page--carnets #contenu .carnet__intro {
    max-width: 560px;
    margin: var(--space-4) 0 0;
    font-size: var(--text-md);
    color: var(--encre-douce);
  }
  body.surface-public.page--carnets #contenu .carnet--bientot .carnet__intro {
    margin-inline: auto;
  }

  body.surface-public.page--carnets #contenu .carnet__offre {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin: var(--space-6) 0 var(--space-8);
    padding: var(--space-6);
    background: var(--celadon);
    border-radius: var(--radius-lg);
  }
  body.surface-public.page--carnets #contenu .carnet__prix {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  body.surface-public.page--carnets #contenu .carnet__prix-reel {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
  }
  body.surface-public.page--carnets #contenu .carnet__prix-facial {
    font-size: var(--text-sm);
    color: var(--encre-douce);
  }

  body.surface-public.page--carnets #contenu .carnet__etapes {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  body.surface-public.page--carnets #contenu .carnet__etapes li {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
  }
  body.surface-public.page--carnets #contenu .carnet__numero {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cacao);
    color: var(--creme);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  body.surface-public.page--carnets #contenu .carnet__note {
    margin: var(--space-8) 0 0;
    color: var(--encre-douce);
  }
  body.surface-public.page--carnets #contenu .carnet__note a {
    color: var(--vert-eau-fonce);
  }

  body.surface-public.page--carnets #contenu .carnet__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-6);
  }

/* Page Astro : commencer.astro */
body.surface-public.page--commencer #contenu .commencer-hero {
    padding: var(--space-9) 0 var(--space-7);
  }
  body.surface-public.page--commencer #contenu .commencer-hero__intro {
    font-size: var(--text-md);
    color: var(--encre-douce);
    margin: 0 0 var(--space-5);
    max-width: 560px;
  }
  body.surface-public.page--commencer #contenu .commencer-hero__prix {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }

  body.surface-public.page--commencer #contenu .commencer-etapes {
    padding: var(--space-7) 0 var(--space-8);
  }
  body.surface-public.page--commencer #contenu .commencer-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  body.surface-public.page--commencer #contenu .commencer-etape {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    background: var(--celadon);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
  }
  body.surface-public.page--commencer #contenu .commencer-etape__numero {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cacao);
    color: var(--creme);
    font-family: var(--font-serif);
    font-weight: var(--weight-semibold);
    font-size: var(--text-md);
    line-height: 1;
  }
  body.surface-public.page--commencer #contenu .commencer-etape__titre {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
  }
  body.surface-public.page--commencer #contenu .commencer-etape__texte {
    margin: 0;
    color: var(--encre);
    line-height: var(--leading-body);
  }

  body.surface-public.page--commencer #contenu .commencer-contact {
    padding: var(--space-8) 0 var(--space-9);
    text-align: center;
  }
  body.surface-public.page--commencer #contenu .commencer-contact__texte {
    color: var(--encre-douce);
    max-width: 480px;
    margin: var(--space-3) auto var(--space-6);
  }
  body.surface-public.page--commencer #contenu .commencer-contact__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }
  body.surface-public.page--commencer #contenu .commencer-contact__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: 0 var(--space-5);
    border: 1.5px solid var(--vert-eau-fonce);
    border-radius: var(--radius-md);
    color: var(--vert-eau-fonce);
    font-weight: var(--weight-semibold);
    font-size: 16px;
    text-decoration: none;
    transition: background var(--transition);
  }
  body.surface-public.page--commencer #contenu .commencer-contact__whatsapp:hover {
    background: var(--celadon);
  }
  body.surface-public.page--commencer #contenu .commencer-contact__autres {
    margin: var(--space-6) 0 0;
    font-size: var(--text-sm);
    color: var(--encre-douce);
  }
  body.surface-public.page--commencer #contenu .commencer-contact__autres a {
    color: var(--vert-eau-fonce);
    font-weight: 600;
  }

  @media (max-width: 640px) {
    body.surface-public.page--commencer #contenu .commencer-etape {
      flex-direction: column;
      gap: var(--space-4);
    }
  }

/* Page Astro : conditions.astro */
body.surface-public.page--conditions #contenu .legal-content {
    max-width: 720px;
    padding: var(--space-8) var(--space-6);
  }
  body.surface-public.page--conditions #contenu .intro {
    font-size: var(--text-md);
    color: var(--encre-douce);
  }
  body.surface-public.page--conditions #contenu h1 {
    font-family: 'Lora', serif;
    font-size: var(--text-3xl);
    font-weight: 600;
    color: var(--cacao);
    margin-bottom: var(--space-6);
  }
  body.surface-public.page--conditions #contenu h2 {
    font-family: 'Lora', serif;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--cacao);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
  }
  body.surface-public.page--conditions #contenu p {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--encre);
    margin-bottom: var(--space-4);
  }
  body.surface-public.page--conditions #contenu .maj {
    margin-top: var(--space-8);
    font-size: var(--text-sm);
    color: var(--encre-douce);
  }
  body.surface-public.page--conditions #contenu a {
    color: var(--vert-eau-fonce);
    text-decoration: none;
    transition: color 150ms ease;
  }
  body.surface-public.page--conditions #contenu a:hover { color: var(--vert-eau-fonce); }
  body.surface-public.page--conditions #contenu a:focus { outline: 2px solid var(--vert-eau); outline-offset: 2px; }
  @media (max-width: 640px) {
    body.surface-public.page--conditions #contenu h1 { font-size: var(--text-2xl); overflow-wrap: break-word; }
  }

/* Page Astro : index.astro */
body.surface-public.page--accueil #contenu .hero {
    padding: var(--space-8) 0 var(--space-7);
  }
  body.surface-public.page--accueil #contenu .hero__grille {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-8);
    align-items: center;
  }
  body.surface-public.page--accueil #contenu .hero__texte {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  body.surface-public.page--accueil #contenu .hero__titre {
    /* Fluide : 54px plein écran, ~34px sur petit mobile — sans palier brutal. Évite les
       5 lignes de Lora qui repoussaient le CTA sous le pli à 375px (critique 2026-07-20). */
    font-size: clamp(34px, 6.5vw, var(--text-4xl));
    line-height: 1.12;
    margin: 0;
    text-wrap: balance;
  }
  body.surface-public.page--accueil #contenu .hero__paragraphe {
    margin: 0;
    font-size: var(--text-md);
    max-width: 520px;
  }
  body.surface-public.page--accueil #contenu .hero__cta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  body.surface-public.page--accueil #contenu .hero__prix {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }
  body.surface-public.page--accueil #contenu .hero__media {
    width: 100%;
  }
  /* La vidéo occupe TOUTE la colonne de droite (pas seulement sa largeur native) :
     object-fit: cover remplit le cadre en recadrant légèrement si besoin. */
  body.surface-public.page--accueil #contenu .hero__video {
    height: 560px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
    background: var(--celadon);
    box-shadow: var(--shadow-card);
  }
  @media (max-width: 1024px) {
    body.surface-public.page--accueil #contenu .hero__video {
      height: 420px;
    }
  }
  body.surface-public.page--accueil #contenu .hero__reassurance {
    padding-top: var(--space-7);
  }

  /* --- Bouton pause/lecture des vidéos décoratives (WCAG 2.2.2) --- */
  body.surface-public.page--accueil #contenu .video-cadre {
    position: relative;
  }
  body.surface-public.page--accueil #contenu .video-pause {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    z-index: 3;
    /* Cible ≥ 48px : exigence de la charte (44px ne la respectait pas). */
    width: var(--tap-target);
    height: var(--tap-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(40, 34, 30, 0.55);
    color: var(--creme);
    cursor: pointer;
    transition: background var(--transition);
  }
  body.surface-public.page--accueil #contenu .video-pause:hover {
    background: rgba(40, 34, 30, 0.75);
  }
  body.surface-public.page--accueil #contenu .video-pause:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
  }
  /* Icône affichée selon l'état : pause quand ça joue, lecture quand c'est en pause. */
  body.surface-public.page--accueil #contenu .video-pause__icone-lecture { display: none; }
  body.surface-public.page--accueil #contenu .video-pause.est-en-pause .video-pause__icone-pause { display: none; }
  body.surface-public.page--accueil #contenu .video-pause.est-en-pause .video-pause__icone-lecture { display: block; }
  body.surface-public.page--accueil #contenu .portes__pause {
    bottom: var(--space-4);
    right: var(--space-4);
  }

  /* --- Rappel de réservation après les avis --- */
  body.surface-public.page--accueil #contenu .rappel-cta {
    padding: var(--space-7) 0 var(--space-8);
  }
  body.surface-public.page--accueil #contenu .rappel-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
  }
  body.surface-public.page--accueil #contenu .rappel-cta__texte {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
    text-wrap: balance;
  }

  body.surface-public.page--accueil #contenu .media-duo {
    padding: var(--space-8) 0;
  }
  body.surface-public.page--accueil #contenu .media-duo__grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: center;
  }
  body.surface-public.page--accueil #contenu .media-duo__texte {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  body.surface-public.page--accueil #contenu .media-duo__texte h2 {
    margin: 0;
  }
  body.surface-public.page--accueil #contenu .media-duo__texte p {
    margin: 0;
    color: var(--encre);
  }
  body.surface-public.page--accueil #contenu .media-photo {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
    background: var(--celadon);
    box-shadow: var(--shadow-card);
  }
  /* Photo au format portrait : centrée, taille contenue (nette, sans étirement).
     Conservée pour réemploi sur une autre page (photo « inversion »). */
  body.surface-public.page--accueil #contenu .media-photo--portrait {
    max-width: 430px;
    height: 540px;
    margin-inline: auto;
    object-position: center 45%;
  }
  @media (max-width: 640px) {
    body.surface-public.page--accueil #contenu .media-photo--portrait {
      height: 420px;
    }
  }
  /* Photo au format paysage : cadre au ratio natif 4/3 → aucun rognage, centrée.
     height:auto neutralise l'attribut height (sinon il bloque l'aspect-ratio). */
  body.surface-public.page--accueil #contenu .media-photo--paysage {
    max-width: 760px;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-inline: auto;
    object-position: center;
  }

  body.surface-public.page--accueil #contenu .portes {
    position: relative;
    overflow: hidden;
    background: var(--celadon);
    padding: var(--space-9) 0;
  }
  body.surface-public.page--accueil #contenu .portes__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  /* Voile céladon translucide UNIFORME : garde l'ambiance et la lisibilité (le contenu
     vit sur des cartes opaques) en laissant respirer la vidéo. Aplat simple — la charte
     interdit les dégradés, y compris fonctionnels (critique 2026-07-20). */
  body.surface-public.page--accueil #contenu .portes__voile {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(220, 232, 222, 0.55);
  }
  body.surface-public.page--accueil #contenu .portes__inner {
    position: relative;
    z-index: 2;
  }
  body.surface-public.page--accueil #contenu .portes__entete {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-7);
  }
  body.surface-public.page--accueil #contenu .portes__entete h2 {
    font-size: var(--text-2xl);
  }
  body.surface-public.page--accueil #contenu .portes__entete p {
    margin: var(--space-4) 0 0;
    font-size: var(--text-md);
    color: var(--encre-douce);
  }
  body.surface-public.page--accueil #contenu .portes__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  body.surface-public.page--accueil #contenu .prestations {
    padding: var(--space-9) 0;
  }
  body.surface-public.page--accueil #contenu .prestations__intro {
    max-width: 640px;
    margin-bottom: var(--space-7);
  }
  body.surface-public.page--accueil #contenu .prestations__texte {
    margin: var(--space-4) 0 0;
    color: var(--encre-douce);
  }
  body.surface-public.page--accueil #contenu .prestations__grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  /* Note sous les cartes : même bord gauche que l'intro, mais sur TOUTE la largeur des
     cartes (une note courte contrainte à 640px se tassait sur 4 lignes). */
  body.surface-public.page--accueil #contenu .prestations__ouverture {
    margin: var(--space-6) 0 0;
    font-size: var(--text-sm);
    color: var(--encre-douce);
  }
  body.surface-public.page--accueil #contenu .prestations__ouverture a {
    color: var(--vert-eau-fonce);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
  }
  body.surface-public.page--accueil #contenu .prestations__ouverture a:hover {
    color: var(--cacao);
  }

  body.surface-public.page--accueil #contenu .tarifs {
    background: var(--celadon);
    padding: var(--space-9) 0;
  }
  body.surface-public.page--accueil #contenu .tarifs__grille {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-7);
    align-items: start;
  }
  body.surface-public.page--accueil #contenu .tarifs__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  body.surface-public.page--accueil #contenu .tarifs__intro h2 {
    margin: 0;
  }
  body.surface-public.page--accueil #contenu .tarifs__intro p {
    margin: 0;
    color: var(--encre);
  }

  body.surface-public.page--accueil #contenu .avis {
    padding: var(--space-9) 0;
  }
  body.surface-public.page--accueil #contenu .avis__entete {
    max-width: 640px;
    margin-bottom: var(--space-7);
  }
  body.surface-public.page--accueil #contenu .avis__entete h2 {
    margin: var(--space-2) 0 0;
  }
  body.surface-public.page--accueil #contenu .avis__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: stretch;
  }
  body.surface-public.page--accueil #contenu .avis__carte {
    margin: 0;
    background: var(--celadon);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-sizing: border-box;
  }
  body.surface-public.page--accueil #contenu .avis__etoiles {
    margin: 0;
    /* Cacao : le terracotta est réservé à UN élément marquant par page — ici c'est le
       cadre du tableau des tarifs (charte §2 ; sur /reserver/ les étoiles le gardent). */
    color: var(--cacao);
    font-size: var(--text-md);
    letter-spacing: 0.15em;
  }
  body.surface-public.page--accueil #contenu .avis__texte {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--encre);
    flex: 1;
  }
  body.surface-public.page--accueil #contenu .avis__auteur {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
  }

  body.surface-public.page--accueil #contenu .teaser-pros {
    background: var(--cacao);
    padding: var(--space-8) 0;
  }
  body.surface-public.page--accueil #contenu .teaser-pros__grille {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
  }
  body.surface-public.page--accueil #contenu .teaser-pros__texte {
    max-width: 640px;
  }
  body.surface-public.page--accueil #contenu .teaser-pros__kicker {
    color: var(--celadon);
  }
  body.surface-public.page--accueil #contenu .teaser-pros__titre {
    color: var(--creme);
    font-size: var(--text-2xl);
    line-height: 1.25;
    margin: var(--space-2) 0 0;
  }

  body.surface-public.page--accueil #contenu .contact {
    padding: var(--space-9) 0;
  }
  body.surface-public.page--accueil #contenu .contact__grille {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-7);
    align-items: start;
  }
  body.surface-public.page--accueil #contenu .contact__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  body.surface-public.page--accueil #contenu .contact__intro h2 {
    margin: 0;
  }
  body.surface-public.page--accueil #contenu .contact__intro p {
    margin: 0;
    color: var(--encre-douce);
  }
  /* Bouton PLEIN : WhatsApp est le canal privilégié de la maison — c'est l'action
     principale de la section, le formulaire est l'alternative. */
  body.surface-public.page--accueil #contenu .contact__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    align-self: flex-start;
    min-height: 52px;
    padding: 0 var(--space-6);
    background: var(--vert-eau);
    border-radius: var(--radius-md);
    color: #fff;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: background var(--transition);
  }
  body.surface-public.page--accueil #contenu .contact__whatsapp:hover {
    background: var(--vert-eau-fonce);
  }
  body.surface-public.page--accueil #contenu .contact__whatsapp:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
  }
  body.surface-public.page--accueil #contenu .contact__whatsapp-aide {
    margin: 0;
    font-size: var(--text-sm);
  }

  @media (max-width: 1023px) {
    body.surface-public.page--accueil #contenu .hero__grille {
      grid-template-columns: 1fr;
    }
    body.surface-public.page--accueil #contenu .portes__grille {
      grid-template-columns: 1fr;
    }
    body.surface-public.page--accueil #contenu .tarifs__grille,
body.surface-public.page--accueil #contenu .contact__grille,
body.surface-public.page--accueil #contenu .media-duo__grille,
body.surface-public.page--accueil #contenu .avis__grille {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 767px) {
    body.surface-public.page--accueil #contenu .prestations__grille {
      grid-template-columns: 1fr;
    }
  }

/* Page Astro : mentions-legales.astro */
body.surface-public.page--mentions-legales #contenu .legal-content {
    max-width: 720px;
    padding: var(--space-8) var(--space-6);
  }

  body.surface-public.page--mentions-legales #contenu h1 {
    font-family: 'Lora', serif;
    font-size: var(--text-3xl);
    font-weight: 600;
    color: var(--cacao);
    margin-bottom: var(--space-8);
  }

  body.surface-public.page--mentions-legales #contenu h2 {
    font-family: 'Lora', serif;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--cacao);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
  }

  body.surface-public.page--mentions-legales #contenu p {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--encre);
    margin-bottom: var(--space-4);
  }

  body.surface-public.page--mentions-legales #contenu a {
    color: var(--vert-eau-fonce);
    text-decoration: none;
    transition: color 150ms ease;
  }

  body.surface-public.page--mentions-legales #contenu a:hover {
    color: var(--vert-eau-fonce);
  }

  body.surface-public.page--mentions-legales #contenu a:focus {
    outline: 2px solid var(--vert-eau);
    outline-offset: 2px;
  }

  @media (max-width: 640px) {
    body.surface-public.page--mentions-legales #contenu h1 {
      font-size: var(--text-2xl);
      overflow-wrap: break-word;
    }
  }

/* Page Astro : merci.astro */
body.surface-public.page--merci #contenu .merci {
    padding: var(--space-9) 0 var(--space-10);
    text-align: center;
  }
  body.surface-public.page--merci #contenu .merci__texte {
    max-width: 520px;
    margin: var(--space-4) auto 0;
    font-size: var(--text-md);
    color: var(--encre-douce);
  }
  body.surface-public.page--merci #contenu .merci__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-6);
  }

/* Page Astro : mobilite-strasbourg.astro */
body.surface-public.page--mobilite-strasbourg #contenu .mob-hero {
    padding: var(--space-9) 0 var(--space-8);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-hero__intro {
    font-size: var(--text-md);
    color: var(--encre-douce);
    margin: 0 0 var(--space-6);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }

  body.surface-public.page--mobilite-strasbourg #contenu .mob-lien {
    color: var(--vert-eau-fonce);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-lien:hover {
    color: var(--cacao);
  }

  body.surface-public.page--mobilite-strasbourg #contenu .mob-section {
    padding: var(--space-8) 0;
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-section--celadon {
    background: var(--celadon);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-section h2 {
    margin: var(--space-2) 0 var(--space-4);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-section p {
    color: var(--encre);
    margin: 0 0 var(--space-4);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-section p:last-child {
    margin-bottom: 0;
  }

  body.surface-public.page--mobilite-strasbourg #contenu .mob-def {
    display: inline-block;
    background: var(--cacao);
    color: var(--creme) !important;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--text-base);
    padding: 8px 20px;
    /* Rayon de carte, pas de pilule : la forme pilule est réservée aux badges (charte §6). */
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-4) !important;
  }

  body.surface-public.page--mobilite-strasbourg #contenu .mob-cartes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-carte {
    background: var(--blanc);
    border: 1px solid var(--celadon-fonce);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-carte__titre {
    margin: 0 0 var(--space-3);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-carte__texte {
    margin: 0 !important;
    font-size: var(--text-base);
    color: var(--encre);
    line-height: var(--leading-body);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-note {
    margin: var(--space-5) 0 0 !important;
    font-size: var(--text-sm);
    color: var(--encre-douce) !important;
  }

  body.surface-public.page--mobilite-strasbourg #contenu .mob-etapes {
    margin: var(--space-2) 0 0;
    padding-left: 1.4em;
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-etapes li {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--encre);
    margin-bottom: var(--space-4);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-etapes li:last-child {
    margin-bottom: 0;
  }

  body.surface-public.page--mobilite-strasbourg #contenu .mob-prix__detail {
    margin-top: var(--space-5) !important;
  }

  body.surface-public.page--mobilite-strasbourg #contenu .mob-cta {
    padding-top: var(--space-8);
    padding-bottom: var(--space-9);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-cta__inner {
    background: var(--celadon);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    box-sizing: border-box;
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-cta__rappel {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
  }
  body.surface-public.page--mobilite-strasbourg #contenu .mob-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }

  @media (max-width: 768px) {
    body.surface-public.page--mobilite-strasbourg #contenu .mob-hero { padding: var(--space-8) 0 var(--space-7); }
    body.surface-public.page--mobilite-strasbourg #contenu .mob-section { padding: var(--space-7) 0; }
    body.surface-public.page--mobilite-strasbourg #contenu .mob-cartes { grid-template-columns: 1fr; }
  }

/* Page Astro : mon-carnet.astro */
body.surface-public.page--mon-carnet #contenu .carnet-solde {
    padding: var(--space-9) 0 var(--space-10);
  }

  body.surface-public.page--mon-carnet #contenu .carnet-solde__intro {
    max-width: 560px;
    margin: var(--space-4) 0 0;
    font-size: var(--text-md);
    color: var(--encre-douce);
  }

  body.surface-public.page--mon-carnet #contenu .carnet-solde__succes,
body.surface-public.page--mon-carnet #contenu .carnet-solde__erreur {
    margin: var(--space-6) 0 0;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--encre);
  }
  body.surface-public.page--mon-carnet #contenu .carnet-solde__succes {
    border: 1.5px solid var(--vert-eau);
    background: var(--celadon);
  }
  body.surface-public.page--mon-carnet #contenu .carnet-solde__erreur {
    border: 1.5px solid var(--terracotta);
    background: var(--creme);
  }
  body.surface-public.page--mon-carnet #contenu .carnet-solde__erreur a {
    color: var(--vert-eau-fonce);
  }

  body.surface-public.page--mon-carnet #contenu .carnet-solde__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
    max-width: 480px;
    margin-top: var(--space-6);
  }

  /* Honeypot : hors écran (jamais display:none, trop repérable pour les robots) */
  body.surface-public.page--mon-carnet #contenu .carnet-solde__hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  body.surface-public.page--mon-carnet #contenu .champ {
    display: block;
    flex: 1 1 260px;
  }
  body.surface-public.page--mon-carnet #contenu .champ__label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--encre);
    margin-bottom: 6px;
  }
  body.surface-public.page--mon-carnet #contenu .champ__input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--tap-target);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--celadon-fonce);
    outline: none;
    background: var(--blanc);
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--encre);
    transition: border-color var(--transition);
  }
  body.surface-public.page--mon-carnet #contenu .champ__input:focus {
    border-color: var(--vert-eau);
  }

  body.surface-public.page--mon-carnet #contenu .carnet-solde__suite {
    margin-top: var(--space-9);
    padding-top: var(--space-6);
    border-top: 1px solid var(--celadon-fonce);
  }
  body.surface-public.page--mon-carnet #contenu .carnet-solde__suite-titre {
    font-family: var(--font-sans);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
    margin: 0 0 var(--space-4);
  }
  body.surface-public.page--mon-carnet #contenu .carnet-solde__suite-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  @media (max-width: 640px) {
    body.surface-public.page--mon-carnet #contenu .carnet-solde__form {
      flex-direction: column;
      align-items: stretch;
    }
  }

/* Page Astro : politique-de-confidentialite.astro */
body.surface-public.page--politique-de-confidentialite #contenu .legal-content {
    max-width: 720px;
    padding: var(--space-8) var(--space-6);
  }

  body.surface-public.page--politique-de-confidentialite #contenu h1 {
    font-family: 'Lora', serif;
    font-size: var(--text-3xl);
    font-weight: 600;
    color: var(--cacao);
    margin-bottom: var(--space-4);
  }

  body.surface-public.page--politique-de-confidentialite #contenu .last-update {
    font-size: 15px;
    color: var(--encre-douce);
    margin-bottom: var(--space-8);
    font-style: italic;
  }

  body.surface-public.page--politique-de-confidentialite #contenu h2 {
    font-family: 'Lora', serif;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--cacao);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
  }

  body.surface-public.page--politique-de-confidentialite #contenu p {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--encre);
    margin-bottom: var(--space-4);
  }

  body.surface-public.page--politique-de-confidentialite #contenu ul {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--encre);
    margin-left: var(--space-6);
    margin-bottom: var(--space-4);
  }

  body.surface-public.page--politique-de-confidentialite #contenu li {
    margin-bottom: var(--space-3);
  }

  body.surface-public.page--politique-de-confidentialite #contenu a {
    color: var(--vert-eau-fonce);
    text-decoration: none;
    transition: color 150ms ease;
  }

  body.surface-public.page--politique-de-confidentialite #contenu a:hover {
    color: var(--vert-eau-fonce);
  }

  body.surface-public.page--politique-de-confidentialite #contenu a:focus {
    outline: 2px solid var(--vert-eau);
    outline-offset: 2px;
  }

  @media (max-width: 640px) {
    body.surface-public.page--politique-de-confidentialite #contenu h1 {
      font-size: var(--text-2xl);
      overflow-wrap: break-word;
    }
  }

/* Page Astro : professeurs.astro */
body.surface-public.page--professeurs #contenu .pro-hero {
    padding: var(--space-9) 0 var(--space-8);
  }
  body.surface-public.page--professeurs #contenu .pro-hero__intro {
    font-size: var(--text-md);
    color: var(--encre-douce);
    margin: 0 0 var(--space-6);
  }
  body.surface-public.page--professeurs #contenu .pro-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }
  body.surface-public.page--professeurs #contenu .pro-hero__lien,
body.surface-public.page--professeurs #contenu .pro-lien {
    color: var(--vert-eau-fonce);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
  }
  body.surface-public.page--professeurs #contenu .pro-hero__lien:hover,
body.surface-public.page--professeurs #contenu .pro-lien:hover { color: var(--cacao); }

  body.surface-public.page--professeurs #contenu .pro-section {
    padding: var(--space-8) 0;
  }
  body.surface-public.page--professeurs #contenu .pro-section--celadon {
    background: var(--celadon);
  }
  body.surface-public.page--professeurs #contenu .pro-section h2 {
    margin: var(--space-2) 0 var(--space-4);
  }
  body.surface-public.page--professeurs #contenu .pro-section p {
    color: var(--encre);
    margin: 0 0 var(--space-4);
  }
  body.surface-public.page--professeurs #contenu .pro-exemple {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--cacao);
  }

  body.surface-public.page--professeurs #contenu .pro-tableau {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
  }
  body.surface-public.page--professeurs #contenu .pro-tableau__col {
    background: var(--blanc);
    border: 1px solid var(--celadon-fonce);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
  }
  /* Cadre COMPLET (le liseré latéral est un interdit acté de la charte). */
  body.surface-public.page--professeurs #contenu .pro-tableau__col--fort {
    border: 2px solid var(--vert-eau);
  }
  body.surface-public.page--professeurs #contenu .pro-tableau__titre {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--encre-douce);
  }
  body.surface-public.page--professeurs #contenu .pro-tableau__gros {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--cacao);
    margin: var(--space-2) 0 !important;
    font-variant-numeric: tabular-nums;
  }
  body.surface-public.page--professeurs #contenu .pro-tableau__note {
    font-size: var(--text-sm);
    color: var(--encre-douce);
    margin: 0 !important;
  }

  body.surface-public.page--professeurs #contenu .pro-liste {
    margin: var(--space-2) 0 0;
    padding-left: 1.2em;
  }
  body.surface-public.page--professeurs #contenu .pro-liste li {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--encre);
    margin-bottom: var(--space-2);
  }

  body.surface-public.page--professeurs #contenu .pro-cta {
    text-align: center;
  }
  body.surface-public.page--professeurs #contenu .pro-cta h2 { margin-bottom: var(--space-4); }
  body.surface-public.page--professeurs #contenu .pro-cta__intro {
    max-width: 560px;
    margin: 0 auto var(--space-6) !important;
    color: var(--encre-douce) !important;
  }
  body.surface-public.page--professeurs #contenu .pro-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }
  body.surface-public.page--professeurs #contenu .pro-cta__email {
    margin: 0 !important;
    font-size: var(--text-sm);
    color: var(--encre-douce);
  }

  @media (max-width: 768px) {
    body.surface-public.page--professeurs #contenu .pro-hero { padding: var(--space-8) 0 var(--space-7); }
    body.surface-public.page--professeurs #contenu .pro-section { padding: var(--space-7) 0; }
    body.surface-public.page--professeurs #contenu .pro-tableau { grid-template-columns: 1fr; }
  }

/* Page Astro : reserver.astro */
body.surface-public.page--reserver #contenu section {
    box-sizing: border-box;
  }

  /* En-tête */
  body.surface-public.page--reserver #contenu .entete {
    padding: var(--space-9) var(--space-6) var(--space-8);
  }
  body.surface-public.page--reserver #contenu .entete__intro {
    font-size: var(--text-md);
    color: var(--encre-douce);
    max-width: 640px;
  }
  body.surface-public.page--reserver #contenu .entete__prix {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-top: var(--space-5);
  }

  /* Comment ça se passe */
  body.surface-public.page--reserver #contenu .etapes {
    padding: var(--space-8) var(--space-6);
  }
  body.surface-public.page--reserver #contenu .etapes__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  body.surface-public.page--reserver #contenu .etapes__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    font-size: var(--text-md);
    line-height: 1.65;
  }
  body.surface-public.page--reserver #contenu .etapes__numero {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cacao);
    color: var(--creme);
    font-family: var(--font-serif);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    line-height: 1;
  }

  /* Créneau régulier */
  body.surface-public.page--reserver #contenu .creneau-fixe {
    padding: var(--space-8) var(--space-6);
  }
  body.surface-public.page--reserver #contenu .creneau-fixe__carte {
    background: var(--celadon);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-sizing: border-box;
  }
  body.surface-public.page--reserver #contenu .creneau-fixe__carte h2 {
    margin-bottom: var(--space-3);
  }
  body.surface-public.page--reserver #contenu .creneau-fixe__carte p {
    margin: 0;
    color: var(--encre);
  }

  /* Agenda */
  body.surface-public.page--reserver #contenu .agenda {
    padding: var(--space-8) var(--space-6);
    background: var(--celadon);
  }
  /* Avis Google court au-dessus de l'agenda : dernier coup de pouce avant la réservation. */
  body.surface-public.page--reserver #contenu .agenda__avis {
    max-width: 560px;
    margin: 0 auto var(--space-6);
    text-align: center;
  }
  body.surface-public.page--reserver #contenu .agenda__avis-texte {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--encre);
  }
  body.surface-public.page--reserver #contenu .agenda__avis-etoiles {
    display: block;
    color: var(--terracotta);
    letter-spacing: 0.15em;
    margin-bottom: var(--space-2);
  }
  body.surface-public.page--reserver #contenu .agenda__avis-auteur {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
  }
  body.surface-public.page--reserver #contenu .agenda__titre {
    text-align: center;
  }
  body.surface-public.page--reserver #contenu .agenda__embed {
    width: 100%;
    min-height: 620px;
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--blanc);
  }

  body.surface-public.page--reserver #contenu .agenda__repli {
    max-width: var(--container-narrow);
    margin: 0 auto;
    background: var(--blanc);
    border: 2px solid var(--vert-eau);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
    align-items: center;
  }
  body.surface-public.page--reserver #contenu .agenda__repli h3 {
    margin: 0;
  }
  body.surface-public.page--reserver #contenu .agenda__repli p {
    margin: 0;
    color: var(--encre-douce);
  }
  body.surface-public.page--reserver #contenu .agenda__coordonnees {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-2) 0;
  }
  body.surface-public.page--reserver #contenu .agenda__ligne {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 16px;
    color: var(--encre);
  }
  body.surface-public.page--reserver #contenu .agenda__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--vert-eau-fonce);
  }

  /* Note tarifs */
  body.surface-public.page--reserver #contenu .note-tarifs {
    padding: var(--space-8) var(--space-6) var(--space-9);
  }
  body.surface-public.page--reserver #contenu .note-tarifs__grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  body.surface-public.page--reserver #contenu .note-tarifs__item {
    background: var(--blanc);
    border: 1px solid var(--celadon-fonce);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-sizing: border-box;
  }
  body.surface-public.page--reserver #contenu .note-tarifs__label {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
  }

  /* Secours sous l'embed (masqué par le script quand l'agenda a chargé) */
  body.surface-public.page--reserver #contenu #agenda-secours {
    margin-top: var(--space-5);
  }

  /* FAQ */
  body.surface-public.page--reserver #contenu .faq {
    padding: var(--space-8) var(--space-6) var(--space-9);
    background: var(--celadon);
  }
  body.surface-public.page--reserver #contenu .faq__liste {
    margin: var(--space-6) 0 0;
  }
  body.surface-public.page--reserver #contenu .faq__item {
    background: var(--blanc);
    border: 1px solid var(--celadon-fonce);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-4);
  }
  body.surface-public.page--reserver #contenu .faq__question {
    font-family: var(--font-serif);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--cacao);
  }
  body.surface-public.page--reserver #contenu .faq__reponse {
    margin: var(--space-3) 0 0;
    color: var(--encre);
    line-height: var(--leading-body);
  }
  body.surface-public.page--reserver #contenu .faq__note {
    margin: var(--space-5) 0 0;
    font-size: var(--text-sm);
    color: var(--encre-douce);
  }
  body.surface-public.page--reserver #contenu .faq__note a {
    color: var(--vert-eau-fonce);
    font-weight: 600;
  }

  @media (max-width: 640px) {
    body.surface-public.page--reserver #contenu .note-tarifs__grille {
      grid-template-columns: 1fr;
    }
  }

/* Page Astro : yoga-a-domicile-strasbourg.astro */
body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-hero {
    padding: var(--space-9) 0 var(--space-8);
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-hero__intro {
    font-size: var(--text-md);
    color: var(--encre-douce);
    margin: 0 0 var(--space-6);
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }

  /* Liens texte : --vert-eau-fonce pour garantir le contraste AA. */
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-lien {
    color: var(--vert-eau-fonce);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-lien:hover {
    color: var(--cacao);
  }

  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-section {
    padding: var(--space-8) 0;
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-section--celadon {
    background: var(--celadon);
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-section h2 {
    margin: var(--space-2) 0 var(--space-4);
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-section p {
    color: var(--encre);
    margin: 0 0 var(--space-4);
  }

  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-cartes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-5);
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-carte {
    background: var(--blanc);
    border: 1px solid var(--celadon-fonce);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-carte__titre {
    margin: 0 0 var(--space-3);
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-carte__texte {
    margin: 0 !important;
    font-size: var(--text-base);
    color: var(--encre);
    line-height: var(--leading-body);
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-note {
    margin: var(--space-5) 0 0 !important;
    color: var(--encre-douce) !important;
  }

  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-etapes {
    margin: var(--space-4) 0 var(--space-5);
    padding-left: 1.4em;
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-etapes li {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--encre);
    margin-bottom: var(--space-3);
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-etapes li strong {
    color: var(--cacao);
  }

  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-liste {
    margin: var(--space-2) 0 0;
    padding-left: 1.2em;
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-liste li {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.7;
    color: var(--encre);
    margin-bottom: var(--space-2);
  }

  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-prix {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    background: var(--blanc);
    border: 1px solid var(--celadon-fonce);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-5);
  }

  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-cta {
    text-align: center;
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-cta h2 {
    margin-bottom: var(--space-4);
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-cta__intro {
    max-width: 560px;
    margin: 0 auto var(--space-6) !important;
    color: var(--encre-douce) !important;
  }
  body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    flex-wrap: wrap;
  }

  @media (max-width: 1024px) {
    body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-cartes {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 768px) {
    body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-hero {
      padding: var(--space-8) 0 var(--space-7);
    }
    body.surface-public.page--yoga-a-domicile-strasbourg #contenu .yoga-section {
      padding: var(--space-7) 0;
    }
  }

/* Blog et espaces ?l?ve/coach PHP */
/* On the Mat — Coaching · surfaces PHP.
   Aucune dépendance externe (aucun CDN) : polices auto-hébergées et tokens centraux
   restent communs au blog, aux espaces connectés et à l'administration. */

/* ---------- Polices (auto-hébergées, déjà copiées dans /fonts/) ---------- */

/* ---------- Tokens partagés ---------- */

/* ---------- Reset minimal + corps ---------- */

body.surface-php {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.surface-php img {
  max-width: 100%;
  display: block;
}

body.surface-php a {
  color: var(--vert-eau-fonce);
}
body.surface-php a:hover {
  color: var(--vert-eau-fonce);
}

body.surface-php h1,
body.surface-php h2,
body.surface-php h3,
body.surface-php h4 {
  font-family: var(--font-serif);
  color: var(--cacao);
  line-height: var(--leading-heading);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-4);
}
body.surface-php h1 { font-size: var(--text-3xl); }
body.surface-php h2 { font-size: var(--text-2xl); }
body.surface-php h3 { font-size: var(--text-xl); }

body.surface-php p {
  margin: 0 0 var(--space-4);
}

body.surface-php .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
  box-sizing: border-box;
}
body.surface-php .container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
  box-sizing: border-box;
}

/* Lien d'évitement */
body.surface-php .skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--cacao);
  color: var(--creme);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}
body.surface-php .skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* Focus visible global */
body.surface-php a:focus-visible,
body.surface-php button:focus-visible,
body.surface-php [tabindex]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* ---------- Boutons ---------- */

body.surface-php .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  white-space: nowrap;
  min-height: var(--tap-target);
  padding: 0 var(--space-5);
  font-size: 16px;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
@media (max-width: 400px) {
  body.surface-php .btn {
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}
body.surface-php .btn--lg {
  min-height: 56px;
  padding: 0 var(--space-6);
  font-size: var(--text-base);
}
body.surface-php .btn--primaire {
  background: var(--vert-eau);
  color: #FFFFFF;
}
body.surface-php .btn--primaire:hover {
  background: var(--vert-eau-fonce);
  color: #FFFFFF;
}
body.surface-php .btn--primaire:active {
  background: var(--vert-eau-press);
}
body.surface-php .btn--secondaire {
  background: transparent;
  color: var(--cacao);
  border: 1.5px solid var(--cacao);
}
body.surface-php .btn--secondaire:hover {
  background: rgba(59, 46, 39, 0.08);
  color: var(--cacao);
}

/* ---------- En-tête (identique au site) ---------- */

body.surface-php .site-header {
  background: var(--creme);
  border-bottom: 1px solid var(--celadon-fonce);
  box-sizing: border-box;
  /* Sticky discret, aligné sur le header Astro : « Réserver » reste accessible partout. */
  position: sticky;
  top: 0;
  z-index: 100;
}

body.surface-php .site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

body.surface-php .site-header__logo {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  order: 1;
}
body.surface-php .site-header__logo img {
  height: 48px;
  width: auto;
  display: block;
}

body.surface-php .site-header__cta {
  display: flex;
  align-items: center;
  /* Bureau (comme le reste du site) : le bouton vient APRÈS la navigation, tout à droite. */
  order: 3;
}

body.surface-php .site-header__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  order: 2;
}

body.surface-php .site-header__lien {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--weight-regular);
  color: var(--encre);
  text-decoration: none;
  padding: 12px 12px;
  min-height: var(--tap-target);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
  /* Un libellé ne se plie jamais au milieu : les liens passent à la ligne en bloc
     (flex-wrap de la nav), jamais coupés en deux. */
  white-space: nowrap;
}
body.surface-php .site-header__lien:hover {
  color: var(--cacao);
}

/* Menu déroulant « Mon espace » (même comportement que le site statique : ouverture au
   clic, fermeture au clic extérieur / Échap — gérées par le script du gabarit). */
body.surface-php .site-header__menu {
  position: relative;
}
body.surface-php .site-header__menu-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  gap: var(--space-2);
}
body.surface-php .site-header__chevron {
  transition: transform var(--transition);
}
body.surface-php .site-header__menu-btn[aria-expanded='true'] .site-header__chevron {
  transform: rotate(180deg);
}
body.surface-php .site-header__sousmenu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 190px;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--celadon-fonce);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-2);
  z-index: 200;
}
body.surface-php .site-header__sousmenu--ouvert {
  display: flex;
}
body.surface-php .site-header__souslien {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--weight-regular);
  color: var(--encre);
  text-decoration: none;
  padding: 12px 14px;
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
body.surface-php .site-header__souslien:hover {
  background: var(--celadon);
  color: var(--cacao);
}

/* En dessous de 1024px (comme le reste du site) : la navigation passe entièrement à la
   ligne suivante, sous le logo et le bouton Réserver qui, eux, restent sur la même ligne
   et donc toujours visibles — sans JavaScript ni bouton burger. */
@media (max-width: 1024px) {
  /* Mobile/tablette : le bouton Réserver reste collé au logo sur la première ligne
     (jamais caché), la navigation passe entièrement à la ligne suivante — sans JS. */
  body.surface-php .site-header__cta {
    order: 2;
  }
  body.surface-php .site-header__nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    padding-top: var(--space-2);
  }
  /* Le panneau « Mon espace » s'ancre à gauche du bouton (la nav étant alignée à gauche
     sous le logo) pour ne jamais déborder hors de l'écran. */
  body.surface-php .site-header__sousmenu {
    left: 0;
    right: auto;
  }
}

/* ---------- Pied de page (identique au site, fond cacao) ---------- */

body.surface-php .site-footer {
  background: var(--cacao);
  color: var(--creme);
  padding: 56px 0 var(--space-6);
  box-sizing: border-box;
  font-family: var(--font-sans);
}

body.surface-php .site-footer__grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-7);
}

body.surface-php .site-footer__marque {
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
body.surface-php .site-footer__logo {
  height: 52px;
  width: auto;
  align-self: flex-start;
}
body.surface-php .site-footer__baseline {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--celadon);
}

body.surface-php .site-footer__colonne {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.surface-php .site-footer__titre {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--celadon);
}
body.surface-php .site-footer__lien {
  color: var(--celadon);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
body.surface-php .site-footer__lien:hover {
  color: #FFFFFF;
}

body.surface-php .site-footer__bas {
  margin-top: 40px;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(250, 245, 238, 0.25);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 13px;
  color: var(--celadon);
}
body.surface-php .site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
body.surface-php .site-footer__legal a {
  color: var(--celadon);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 13px;
  transition: color var(--transition);
}
body.surface-php .site-footer__legal a:hover {
  color: #FFFFFF;
}

@media (max-width: 640px) {
  body.surface-php .site-footer__grille {
    flex-direction: column;
    gap: var(--space-6);
  }
}

/* ---------- Page liste (/blog/) ---------- */

body.surface-php .blog-liste {
  padding: var(--space-8) 0 var(--space-9);
}

body.surface-php .blog-liste__vide {
  color: var(--encre-douce);
  font-size: var(--text-md);
}

body.surface-php .blog-liste__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

body.surface-php .carte-article {
  background: var(--blanc);
  border: 1px solid var(--celadon-fonce);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), border-color var(--transition);
}
body.surface-php .carte-article:hover {
  box-shadow: var(--shadow-card-hover);
}

body.surface-php .carte-article__titre {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
body.surface-php .carte-article__titre a {
  color: var(--cacao);
  text-decoration: none;
}
body.surface-php .carte-article__titre a:hover {
  color: var(--vert-eau-fonce);
  text-decoration: underline;
}

body.surface-php .carte-article__date {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 var(--space-3);
}

body.surface-php .carte-article__chapo {
  font-size: var(--text-sm);
  color: var(--encre-douce);
  margin: 0;
}

/* ---------- Page article (/blog/<slug>/) ---------- */

body.surface-php .article {
  padding: var(--space-8) 0 var(--space-9);
}

body.surface-php .article__titre {
  margin-bottom: var(--space-3);
}

body.surface-php .article__date {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 var(--space-5);
}

body.surface-php .article__chapo {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--encre);
  margin: 0 0 var(--space-6);
}

/* Typographie du corps d'article, rendu par otm_markdown() (api/db.php). */
body.surface-php .article__corps {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--encre);
}
body.surface-php .article__corps h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
}
body.surface-php .article__corps h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
body.surface-php .article__corps p {
  margin: 0 0 var(--space-4);
}
body.surface-php .article__corps ul,
body.surface-php .article__corps ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.4em;
}
body.surface-php .article__corps li {
  margin-bottom: var(--space-2);
}
body.surface-php .article__corps a {
  color: var(--vert-eau-fonce);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.surface-php .article__corps a:hover {
  color: var(--vert-eau-fonce);
}
body.surface-php .article__corps strong {
  font-weight: var(--weight-bold);
  color: var(--cacao);
}
body.surface-php .article__corps em {
  font-style: italic;
}
body.surface-php .article__corps blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--celadon);
  border-radius: var(--radius-sm);
  color: var(--encre);
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-style: italic;
}
body.surface-php .article__corps blockquote p:last-child {
  margin-bottom: 0;
}

body.surface-php .article__cta {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--celadon);
  border-radius: var(--radius-lg);
  text-align: center;
}
body.surface-php .article__cta-titre {
  font-family: var(--font-serif);
  color: var(--cacao);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-4);
}

/* ---------- Page introuvable (404) ---------- */

body.surface-php .blog-introuvable {
  padding: var(--space-9) 0;
  text-align: center;
}
body.surface-php .blog-introuvable p {
  color: var(--encre-douce);
  margin-bottom: var(--space-5);
}

/* ---------- Petits écrans (320px) : marges resserrées, pas de scroll horizontal ---------- */

@media (max-width: 480px) {
  body.surface-php .container,
body.surface-php .container-narrow {
    padding: 0 var(--space-4);
  }
  body.surface-php h1 { font-size: 30px; }
  body.surface-php h2 { font-size: 24px; }
}

/* ---------- Abonnement aux articles (capture d'email légère) ---------- */

body.surface-php .blog-abonnement {
  margin-top: var(--space-8);
  background: var(--celadon);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 560px;
}
body.surface-php .blog-abonnement__titre {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}
body.surface-php .blog-abonnement__texte {
  margin: 0 0 var(--space-4);
  color: var(--encre-douce);
  font-size: var(--text-sm);
}
body.surface-php .blog-abonnement__label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--cacao);
  margin-bottom: var(--space-2);
}
body.surface-php .blog-abonnement__ligne {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
body.surface-php .blog-abonnement__ligne input[type=email] {
  flex: 1 1 220px;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid var(--celadon-fonce);
  border-radius: var(--radius-sm);
  font-family: inherit;
  background: #fff;
  color: var(--encre);
  min-height: var(--tap-target);
  box-sizing: border-box;
}
body.surface-php .blog-abonnement__ligne button {
  min-height: var(--tap-target);
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  background: var(--vert-eau);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
body.surface-php .blog-abonnement__ligne button:hover {
  background: var(--vert-eau-fonce);
}
body.surface-php .blog-abonnement__consent {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--encre-douce);
}
body.surface-php .blog-abonnement__consent input {
  margin-top: 3px;
  accent-color: var(--vert-eau);
}
body.surface-php .blog-abonnement__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Espaces connectés (/compte/ et /coach/) — design system v2, 2026-07-31.

   Ces écrans ne sont plus des pages du site : ce sont une APPLICATION. Ils quittent
   l'en-tête et le pied de page de la vitrine pour une coquille propre — barre haute
   compacte, contenu en colonne, barre d'onglets. La marque `surface-espace` distingue
   cette coquille du blog public, qui reste sur `surface-php` seul et garde la charte v1.

   Règle 1 du système : UN SEUL VERT PAR ÉCRAN. `.ds-bouton` (plein) est cette action ;
   tout le reste est `--secondaire` (contour) ou `--tertiaire` (nu).
   ========================================================================== */

body.surface-php.surface-espace {
  margin: 0;
  background: var(--ds-creme);
  color: var(--ds-encre);
  font-family: var(--ds-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Coquille ------------------------------------------------------------------------ */

body.surface-php.surface-espace .espace {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Barre haute : elle suit le défilement et laisse voir le contenu au travers. C'est la
   part « flottante » de l'interface — une ombre qui porte loin, jamais un aplat lourd. */
body.surface-php.surface-espace .espace__barre {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(245, 242, 236, .86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ds-duree) var(--ds-courbe);
}

body.surface-php.surface-espace .espace__barre-inner {
  display: flex;
  align-items: center;
  gap: var(--ds-2);
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--ds-3) var(--ds-4);
}

body.surface-php.surface-espace .espace__marque {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--ds-serif);
  font-size: 19px;
  line-height: 1.2;
  color: var(--ds-encre);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bouton carré de 40 px : aide `?`, retour, déconnexion. Cible tactile portée à 44 px par
   la zone de contact, pas par la taille visuelle du carré. */
body.surface-php.surface-espace .espace__icone {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ds-sable);
  border-radius: var(--ds-r-bouton);
  background: var(--ds-blanc);
  color: var(--ds-encre-douce);
  font-family: var(--ds-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ds-duree) var(--ds-courbe),
              border-color var(--ds-duree) var(--ds-courbe),
              transform var(--ds-duree) var(--ds-courbe);
}

body.surface-php.surface-espace .espace__icone:hover {
  background: var(--ds-gres);
  border-color: var(--ds-sable-fort);
  color: var(--ds-encre);
  text-decoration: none;
  transform: translateY(-1px);
}

body.surface-php.surface-espace .espace__icone:focus-visible {
  outline: var(--ds-focus);
  outline-offset: var(--ds-focus-decalage);
}

body.surface-php.surface-espace .espace__icone svg {
  width: 18px;
  height: 18px;
  display: block;
}

body.surface-php.surface-espace .espace__icone-forme {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Formulaire nu autour d'un bouton icône (déconnexion) : il ne doit rien peser. */
body.surface-php.surface-espace .espace__forme-nue {
  display: contents;
}

/* --- Barre d'onglets ------------------------------------------------------------------
   Sur téléphone, elle est posée en bas, à portée du pouce, et flotte au-dessus du
   contenu. Au-delà de 900 px elle reprend sa place naturelle sous l'en-tête : le DOM ne
   change jamais, seule la mise en page bascule. */

body.surface-php.surface-espace .espace__nav {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--ds-1);
  padding: var(--ds-2) var(--ds-2) calc(var(--ds-2) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--ds-sable);
  box-shadow: var(--ds-ombre-haute);
}

body.surface-php.surface-espace .espace__nav-lien {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--ds-1);
  min-height: 52px;
  padding: var(--ds-1) var(--ds-2);
  border-radius: var(--ds-r-bouton);
  color: var(--ds-encre-tenue);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: color var(--ds-duree) var(--ds-courbe),
              background var(--ds-duree) var(--ds-courbe);
}

body.surface-php.surface-espace .espace__nav-lien:hover {
  background: var(--ds-gres);
  color: var(--ds-encre);
  text-decoration: none;
}

body.surface-php.surface-espace .espace__nav-lien:focus-visible {
  outline: var(--ds-focus);
  outline-offset: -2px;
}

body.surface-php.surface-espace .espace__nav-lien--actif {
  color: var(--ds-vert);
  font-weight: 600;
}

body.surface-php.surface-espace .espace__nav-icone {
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
}

body.surface-php.surface-espace .espace__nav-libelle {
  display: block;
  line-height: 1.2;
}

body.surface-php.surface-espace .espace__nav-pastille {
  position: absolute;
  top: -4px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--ds-r-pilule);
  background: var(--ds-vert);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* --- Contenu -------------------------------------------------------------------------- */

body.surface-php.surface-espace .espace__corps {
  flex: 1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  /* Le bas réserve la hauteur de la barre d'onglets flottante : sans cette réserve, la
     dernière carte de chaque écran passe DERRIÈRE elle et devient injoignable au doigt. */
  padding: var(--ds-2) var(--ds-4) calc(96px + env(safe-area-inset-bottom, 0px));
}

body.surface-php.surface-espace .espace__salut {
  margin: var(--ds-2) 0 var(--ds-1);
  font-family: var(--ds-serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ds-encre);
  text-wrap: balance;
}

body.surface-php.surface-espace .espace__sous {
  margin: 0 0 var(--ds-5);
  font-size: 14px;
  color: var(--ds-encre-tenue);
}

/* Entrée du contenu : une seule respiration, en une fois. C'est le seul mouvement de
   l'application, et il est coupé net par prefers-reduced-motion (bloc global en fin de
   fichier).

   PAS DE DÉCALAGE CARTE PAR CARTE : un `animation-delay` combiné à `both` maintient
   l'élément à `opacity:0` PENDANT toute l'attente. Une carte décalée de 200 ms est donc
   littéralement invisible pendant 200 ms — pour un lecteur d'écran c'est sans effet, mais
   toute capture, tout export PDF et tout navigateur qui n'anime pas rendaient un écran
   vide. Le charme d'un escalier ne vaut pas un contenu qui peut ne pas exister. */
@keyframes ds-monte {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

body.surface-php.surface-espace .espace__corps {
  animation: ds-monte 320ms var(--ds-courbe) both;
}

/* --- Cartes ---------------------------------------------------------------------------- */

body.surface-php.surface-espace .ds-carte {
  background: var(--ds-blanc);
  border: 1px solid var(--ds-sable);
  border-radius: var(--ds-r-carte-lg);
  padding: var(--ds-5);
  margin: 0 0 var(--ds-3);
  box-shadow: var(--ds-ombre-carte);
}

/* Règle 2 : le vert clair porte CE QUI VIENT. Jamais autre chose. */
body.surface-php.surface-espace .ds-carte--suivant {
  background: var(--ds-vert-carte);
  border-color: var(--ds-vert-filet);
}

/* Règle 3 : la brique porte CE QUI CLOCHE. Une seule zone par écran. */
body.surface-php.surface-espace .ds-carte--signal {
  background: var(--ds-brique-carte);
  border-color: var(--ds-brique-filet);
}

/* Carte dont le contenu est une liste : les lignes touchent les bords. */
body.surface-php.surface-espace .ds-carte--liste {
  padding: 0;
  overflow: hidden;
}

body.surface-php.surface-espace .coach-rdv-futurs .ds-carte__titre {
  padding: var(--ds-4) var(--ds-4) var(--ds-2);
}

body.surface-php.surface-espace .ds-carte > :first-child { margin-top: 0; }
body.surface-php.surface-espace .ds-carte > :last-child { margin-bottom: 0; }

body.surface-php.surface-espace .ds-carte__titre {
  margin: 0 0 var(--ds-3);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ds-encre);
}

body.surface-php.surface-espace .ds-carte__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-3);
  margin: 0 0 var(--ds-3);
}

/* Règle 5 : une étiquette de registre n'existe que si elle REGROUPE. */
/* Une étiquette REGROUPE ce qui la suit : quand elle vient après un contenu — « Cette
   semaine » sous les chapitres d'un programme — elle a besoin d'air au-dessus, sinon elle se
   colle à la ligne précédente et ne sépare plus rien. En tête de carte, la règle
   `.ds-carte > :first-child` annule déjà cette marge. */
body.surface-php.surface-espace .ds-etiquette {
  margin: var(--ds-5) 0 var(--ds-2);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-encre-tenue);
}

body.surface-php.surface-espace .ds-etiquette--ok { color: var(--ds-vert-presse); }
body.surface-php.surface-espace .ds-etiquette--signal { color: var(--ds-brique-texte); }

/* Le serif ne sert QUE quand l'écran s'adresse à quelqu'un : salutation, date, chiffre. */
body.surface-php.surface-espace .ds-date {
  margin: 0 0 var(--ds-1);
  font-family: var(--ds-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ds-encre);
}

body.surface-php.surface-espace .ds-heure {
  margin: 0 0 var(--ds-4);
  font-size: 17px;
  font-weight: 500;
  color: #3A352F;
  font-variant-numeric: tabular-nums;
}

body.surface-php.surface-espace .ds-compteur-bloc {
  display: flex;
  align-items: baseline;
  gap: var(--ds-3);
  margin: 0 0 var(--ds-4);
}

body.surface-php.surface-espace .ds-chiffre {
  font-family: var(--ds-serif);
  font-size: 44px;
  line-height: .9;
  color: var(--ds-encre);
  font-variant-numeric: tabular-nums;
}

body.surface-php.surface-espace .ds-chiffre--signal { color: var(--ds-brique-texte); }

body.surface-php.surface-espace .ds-chiffre-libelle {
  font-size: 16px;
  font-weight: 500;
  color: var(--ds-encre);
}

/* Bloc d'information posé DANS une carte teintée : l'adresse d'une séance, une consigne. */
body.surface-php.surface-espace .ds-bloc {
  display: flex;
  align-items: center;
  gap: var(--ds-3);
  padding: var(--ds-3) var(--ds-4);
  border: 1px solid var(--ds-vert-filet-clair);
  border-radius: var(--ds-r-bloc);
  background: var(--ds-blanc);
  margin: 0 0 var(--ds-3);
  color: var(--ds-encre);
  font-size: 15px;
  text-decoration: none;
}

body.surface-php.surface-espace .ds-bloc svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  stroke: var(--ds-vert);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.surface-php.surface-espace .ds-bloc__texte {
  display: block;
  flex: 1;
  min-width: 0;
}

body.surface-php.surface-espace .ds-bloc__titre {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-encre);
  overflow-wrap: anywhere;
}

body.surface-php.surface-espace .ds-bloc__meta {
  display: block;
  margin: 1px 0 0;
  font-size: 13px;
  color: var(--ds-encre-douce);
}

/* Règle 4 : un fait daté, pas un paragraphe de conditions. */
body.surface-php.surface-espace .ds-fait {
  margin: var(--ds-3) 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-encre-douce);
}

/* Un fait devenu défavorable — la limite d'annulation gratuite une fois passée. */
body.surface-php.surface-espace .ds-fait--signal { color: var(--ds-brique-texte); }

body.surface-php.surface-espace .ds-texte {
  margin: 0 0 var(--ds-3);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ds-encre-douce);
}

body.surface-php.surface-espace .ds-texte--pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* La disponibilité est le fait principal ; les deux règles fixes forment un groupe de même
   niveau, pour ne pas suggérer qu'une règle est plus importante que l'autre. */
body.surface-php.surface-espace .compte-formule__regles {
  display: grid;
  gap: var(--ds-2);
  margin: var(--ds-3) 0 0;
  color: var(--ds-encre-tenue);
  font-size: 13px;
  line-height: 1.45;
}

body.surface-php.surface-espace .compte-formule__regles p {
  margin: 0;
}

/* --- Boutons ---------------------------------------------------------------------------
   48 px sur mobile. Trois rangs seulement : plein (l'action de l'écran), contour, nu.
   « Annuler » n'est plus un lien nu : c'est un bouton, en troisième rang. */

body.surface-php.surface-espace .ds-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-2);
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--ds-r-bouton);
  background: var(--ds-vert);
  color: #fff;
  font-family: var(--ds-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ds-duree) var(--ds-courbe),
              transform var(--ds-duree) var(--ds-courbe),
              box-shadow var(--ds-duree) var(--ds-courbe);
}

body.surface-php.surface-espace .ds-bouton:hover {
  background: var(--ds-vert-presse);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--ds-ombre-levee);
}

body.surface-php.surface-espace .ds-bouton:active { transform: none; }

body.surface-php.surface-espace .ds-bouton:focus-visible {
  outline: var(--ds-focus);
  outline-offset: var(--ds-focus-decalage);
}

body.surface-php.surface-espace .ds-bouton[disabled] {
  background: var(--ds-sable-fort);
  color: var(--ds-blanc);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

body.surface-php.surface-espace .ds-bouton--bloc {
  display: flex;
  width: 100%;
}

body.surface-php.surface-espace .ds-bouton--secondaire {
  background: var(--ds-blanc);
  border-color: var(--ds-sable-fort);
  color: var(--ds-encre);
}

body.surface-php.surface-espace .ds-bouton--secondaire:hover {
  background: var(--ds-gres);
  color: var(--ds-encre);
}

body.surface-php.surface-espace .ds-bouton--tertiaire {
  padding: 0 14px;
  background: transparent;
  border-color: transparent;
  color: var(--ds-encre-douce);
  font-weight: 500;
}

body.surface-php.surface-espace .ds-bouton--tertiaire:hover {
  background: var(--ds-gres);
  color: var(--ds-encre);
  box-shadow: none;
}

/* Contour vert : une action confirmée depuis une carte DÉJÀ verte — le plein y serait
   invisible et casserait la règle « un seul vert ». */
body.surface-php.surface-espace .ds-bouton--contour-vert {
  background: var(--ds-blanc);
  border-color: var(--ds-vert);
  color: var(--ds-vert-presse);
}

body.surface-php.surface-espace .ds-bouton--contour-vert:hover {
  background: var(--ds-vert-pale);
  color: var(--ds-vert-presse);
}

body.surface-php.surface-espace .ds-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-2);
  margin: 0;
}

body.surface-php.surface-espace .ds-actions > .ds-bouton { flex: 1 1 auto; }
body.surface-php.surface-espace .ds-actions > .ds-bouton--tertiaire { flex: 0 0 auto; }

/* --- Jauge de carnet -------------------------------------------------------------------
   Elle dit en un regard s'il reste des séances ou s'il en manque : vert = disponible,
   brique = dû. Elle remplace un chiffre isolé qu'il fallait interpréter. */

body.surface-php.surface-espace .ds-jauge {
  display: flex;
  gap: var(--ds-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.surface-php.surface-espace .ds-jauge__seg {
  height: 8px;
  flex: 1;
  border-radius: var(--ds-r-pilule);
  background: var(--ds-sable);
}

body.surface-php.surface-espace .ds-jauge__seg--plein { background: var(--ds-vert); }
body.surface-php.surface-espace .ds-jauge__seg--du { background: var(--ds-brique); }

body.surface-php.surface-espace .ds-jauge--fine .ds-jauge__seg { height: 6px; }

/* --- Badges et pastilles ---------------------------------------------------------------- */

body.surface-php.surface-espace .ds-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--ds-r-pilule);
  background: var(--ds-gres);
  color: var(--ds-encre-douce);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.surface-php.surface-espace .ds-badge--ok {
  background: var(--ds-vert-pale);
  color: var(--ds-vert-presse);
}

body.surface-php.surface-espace .ds-badge--signal {
  background: var(--ds-brique-pale);
  color: var(--ds-brique-texte);
}

body.surface-php.surface-espace .ds-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--ds-r-pilule);
  background: var(--ds-vert);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* --- Lignes de liste ---------------------------------------------------------------------
   Une phrase, une date française, un chiffre. Plus de « Réservation Cal 8f3a… » ni
   d'horodatage SQL. */

body.surface-php.surface-espace .ds-ligne {
  display: flex;
  align-items: center;
  gap: var(--ds-3);
  min-height: 64px;
  padding: var(--ds-3) var(--ds-4);
  border-top: 1px solid var(--ds-filet);
  color: var(--ds-encre);
  text-decoration: none;
  transition: background var(--ds-duree) var(--ds-courbe);
}

body.surface-php.surface-espace .ds-ligne:first-child { border-top: 0; }

body.surface-php.surface-espace a.ds-ligne:hover {
  background: var(--ds-voile);
  text-decoration: none;
}

body.surface-php.surface-espace a.ds-ligne:focus-visible {
  outline: var(--ds-focus);
  outline-offset: -2px;
}

body.surface-php.surface-espace .ds-ligne svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  stroke: var(--ds-encre-tenue);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* `display:block` explicite : ces éléments sont des <span> (une ligne de liste peut être un
   <p> ou un <a>, qui n'acceptent pas de <div>). Sans lui, `text-overflow:ellipsis` n'a aucun
   effet — une boîte inline n'a pas de débordement à couper — et un message long dépassait de
   la carte au lieu de finir en « … ». */
body.surface-php.surface-espace .ds-ligne__corps {
  display: block;
  flex: 1;
  min-width: 0;
}

body.surface-php.surface-espace .ds-ligne__titre {
  display: block;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-encre);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.surface-php.surface-espace .ds-ligne__meta {
  display: block;
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--ds-encre-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.surface-php.surface-espace .ds-ligne__valeur {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-encre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.surface-php.surface-espace .ds-ligne__valeur--signal { color: var(--ds-brique-texte); }
body.surface-php.surface-espace .ds-ligne__valeur--ok { color: var(--ds-vert-presse); }

body.surface-php.surface-espace .ds-ligne--eteinte { opacity: .6; }

/* --- Coche de progression (séance de programme faite) ------------------------------------- */

body.surface-php.surface-espace .ds-coche {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  stroke: var(--ds-vert);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.surface-php.surface-espace .ds-coche-vide {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ds-sable-fort);
  border-radius: var(--ds-r-pilule);
}

/* --- États vides — règle 6 : « Aucun message » + le bouton pour en écrire un. ------------- */

body.surface-php.surface-espace .ds-vide {
  margin: 0 0 var(--ds-4);
  font-size: 15px;
  color: var(--ds-encre-tenue);
}

/* --- Messages système (flash) --------------------------------------------------------------
   Les classes `msg` / `msg-succes` / `msg-erreur` sont conservées : elles sont le contrat
   partagé par les quatre surfaces et par les bancs de test. Seul leur habillage change. */

body.surface-php.surface-espace .msg {
  margin: 0 0 var(--ds-3);
  padding: var(--ds-3) var(--ds-4);
  border: 1px solid var(--ds-sable);
  border-radius: var(--ds-r-bloc);
  background: var(--ds-blanc);
  font-size: 15px;
  font-weight: 500;
  color: var(--ds-encre);
}

body.surface-php.surface-espace .msg-succes {
  background: var(--ds-vert-pale);
  border-color: var(--ds-vert-filet);
  color: var(--ds-vert-presse);
}

body.surface-php.surface-espace .msg-erreur {
  background: var(--ds-brique-pale);
  border-color: var(--ds-brique-filet);
  color: var(--ds-brique-texte);
}

/* --- Formulaires ---------------------------------------------------------------------------- */

body.surface-php.surface-espace .ds-form { margin: 0; }

body.surface-php.surface-espace .coordonnees-form {
  display: grid;
  gap: var(--ds-3);
  margin-top: var(--ds-4);
}

body.surface-php.surface-espace .coordonnees-form .telephone-compose {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.surface-php.surface-espace .coordonnees-form .telephone-compose legend {
  margin-bottom: var(--ds-2);
  font-size: 14px;
  font-weight: 600;
}

body.surface-php.surface-espace .coordonnees-form .telephone-compose__champs {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--ds-3);
}

body.surface-php.surface-espace .coordonnees-form .telephone-compose__champs label {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

/* Constructeur de programme : trois niveaux lisibles, sans empiler des cartes dans la
   carte. Les paramètres forment le premier groupe, puis chaque chapitre contient des
   contenus simples. Les commandes d'ajout restent tertiaires : elles organisent le
   formulaire, elles ne concurrencent pas l'action de l'écran. */
body.surface-php.surface-espace .programme-constructeur .ds-carte__titre {
  margin-bottom: var(--ds-5);
}

body.surface-php.surface-espace .programme-constructeur__declencheur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin: calc(-1 * var(--ds-4));
  padding: var(--ds-4);
  border-radius: var(--ds-r-carte);
  color: var(--ds-encre);
  font-family: var(--ds-serif);
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

body.surface-php.surface-espace .programme-constructeur__declencheur::-webkit-details-marker {
  display: none;
}

body.surface-php.surface-espace .programme-constructeur__declencheur::after {
  content: "+";
  margin-left: var(--ds-3);
  color: var(--ds-vert);
  font-family: var(--ds-sans);
  font-size: 24px;
  font-weight: 400;
}

body.surface-php.surface-espace .programme-constructeur[open] > .programme-constructeur__declencheur::after {
  content: "−";
}

body.surface-php.surface-espace .programme-constructeur__declencheur:focus-visible {
  outline: var(--ds-focus);
  outline-offset: var(--ds-focus-decalage);
}

body.surface-php.surface-espace .programme-constructeur__corps {
  margin-top: var(--ds-5);
}

body.surface-php.surface-espace .programme-modele {
  margin: 0 0 var(--ds-5);
  padding: 0 0 var(--ds-5);
  border-bottom: 1px solid var(--ds-sable);
}

body.surface-php.surface-espace .programme-enregistrer-modele {
  margin: 0 0 var(--ds-4);
}

body.surface-php.surface-espace .programme-destination {
  display: grid;
  gap: var(--ds-2);
  margin: var(--ds-5) 0 var(--ds-4);
  padding: var(--ds-4);
  border: 1px solid var(--ds-sable);
  border-radius: var(--ds-r-bloc);
}

body.surface-php.surface-espace .programme-destination__choix {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-2);
  min-height: 48px;
  padding: var(--ds-2);
  cursor: pointer;
}

body.surface-php.surface-espace .programme-destination__choix input {
  flex: 0 0 auto;
  margin-top: 3px;
}

body.surface-php.surface-espace .programme-parametres {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--ds-4);
  margin: 0 0 var(--ds-5);
}

body.surface-php.surface-espace .programme-parametres__principal {
  grid-column: 1 / -1;
}

body.surface-php.surface-espace .programme-chapitres {
  display: grid;
  gap: var(--ds-4);
  margin: 0 0 var(--ds-3);
}

body.surface-php.surface-espace .programme-chapitre {
  min-width: 0;
  margin: 0;
  padding: var(--ds-4);
  border: 1px solid var(--ds-sable);
  border-radius: var(--ds-r-bloc);
  background: var(--ds-gres);
}

body.surface-php.surface-espace .programme-chapitre__legende,
body.surface-php.surface-espace .programme-contenu__titre {
  max-width: 100%;
  padding: 0 var(--ds-2);
  color: var(--ds-encre);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}

body.surface-php.surface-espace .programme-contenus {
  display: grid;
  gap: var(--ds-3);
  margin: var(--ds-2) 0 var(--ds-2);
}

body.surface-php.surface-espace .programme-contenu {
  min-width: 0;
  margin: 0;
  padding: var(--ds-4);
  border: 1px solid var(--ds-sable);
  border-radius: var(--ds-r-champ);
  background: var(--ds-blanc);
}

body.surface-php.surface-espace .programme-contenu__entete {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ds-2);
  margin: calc(-1 * var(--ds-2)) 0 0;
}

body.surface-php.surface-espace .programme-chapitre__ordre {
  display: flex;
  align-items: center;
  gap: var(--ds-3);
  min-width: 0;
  margin: 0 0 var(--ds-2);
}

body.surface-php.surface-espace .programme-poignee {
  flex: 0 0 auto;
  min-height: 44px;
  gap: var(--ds-2);
  padding: var(--ds-2) var(--ds-3);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

body.surface-php.surface-espace .programme-poignee:active,
body.surface-php.surface-espace .programme-poignee[data-deplacement-actif="1"] {
  color: var(--ds-vert-presse);
  background: var(--ds-vert-pale);
  cursor: grabbing;
}

body.surface-php.surface-espace .programme-poignee__icone {
  width: 16px;
  height: 20px;
  flex: 0 0 auto;
  fill: currentColor;
}

body.surface-php.surface-espace .programme-contenu__entete [data-retirer-contenu] {
  margin-left: auto;
}

body.surface-php.surface-espace .programme-deplacement__aide {
  margin: calc(-1 * var(--ds-3)) 0 var(--ds-4);
}

body.surface-php.surface-espace .programme-deplacement__commandes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-2);
  margin: 0 0 var(--ds-3);
}

body.surface-php.surface-espace .programme-deplacement__commandes[hidden] {
  display: none;
}

body.surface-php.surface-espace .programme-deplacement__commandes .ds-bouton {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  margin: 0;
  text-align: center;
}

body.surface-php.surface-espace .programme-chapitres--deplacement-chapitre .programme-chapitre,
body.surface-php.surface-espace .programme-chapitres--deplacement-contenu .programme-contenu {
  transition:
    border-color var(--ds-duree) var(--ds-courbe),
    background-color var(--ds-duree) var(--ds-courbe);
}

body.surface-php.surface-espace .programme-element--deplace {
  border-color: var(--ds-vert);
  background: var(--ds-vert-carte);
  outline: 2px solid var(--ds-vert);
  outline-offset: 2px;
}

body.surface-php.surface-espace .programme-chapitre--destination {
  outline: 2px dashed var(--ds-vert);
  outline-offset: 3px;
}

body.surface-php.surface-espace .programme-chapitre--depot-refuse {
  outline: 2px solid var(--ds-brique-texte);
  outline-offset: 3px;
}

body.surface-php.surface-espace .programme-contenu__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--ds-4);
}

body.surface-php.surface-espace .programme-action {
  width: auto;
  max-width: 100%;
  justify-content: flex-start;
  margin: 0;
  text-align: left;
}

body.surface-php.surface-espace .programme-action--chapitre {
  margin: 0 0 var(--ds-4);
}

body.surface-php.surface-espace .programme-note {
  margin-top: var(--ds-2);
  padding-top: var(--ds-3);
  border-top: 1px solid var(--ds-sable);
}

body.surface-php.surface-espace .programme-constructeur__aide {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.surface-php.surface-espace .programme-chapitres--deplacement-chapitre .programme-chapitre,
  body.surface-php.surface-espace .programme-chapitres--deplacement-contenu .programme-contenu {
    transition: none;
  }
}

body.surface-php.surface-espace .programme-ressource__note {
  margin: var(--ds-3) 0 0;
  padding: var(--ds-3) 0 0;
  border-top: 1px solid var(--ds-sable);
}

body.surface-php.surface-espace .programme-ressource__note-titre {
  margin: 0 0 var(--ds-1);
  color: var(--ds-encre-tenue);
  font-size: 13px;
  font-weight: 600;
}

body.surface-php.surface-espace .programme-suivi {
  margin-top: var(--ds-4);
  padding-top: var(--ds-3);
  border-top: 1px solid var(--ds-sable);
}

body.surface-php.surface-espace .programme-suivi > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ds-vert);
  font-weight: 600;
  cursor: pointer;
}

body.surface-php.surface-espace .programme-suivi > summary:focus-visible {
  outline: var(--ds-focus);
  outline-offset: var(--ds-focus-decalage);
}

/* Suivi hebdomadaire : les traits donnent le compte avant le texte, puis le formulaire
   nomme l’emplacement exact. Les semaines restent de simples sections, pas des cartes
   imbriquées dans la carte du programme. */
body.surface-php.surface-espace .programme-calendrier {
  display: grid;
  gap: var(--ds-4);
  margin-top: var(--ds-5);
  padding-top: var(--ds-4);
  border-top: 1px solid var(--ds-sable);
}

body.surface-php.surface-espace .programme-semaine {
  min-width: 0;
  padding: var(--ds-3) 0;
}

body.surface-php.surface-espace .programme-semaine--courante {
  padding: var(--ds-4);
  border: 1px solid var(--ds-sable);
  border-radius: var(--ds-r-bloc);
  background: var(--ds-gres);
}

body.surface-php.surface-espace .programme-semaine__entete :is(h3, h4),
body.surface-php.surface-espace .programme-semaine__entete p {
  margin: 0;
}

body.surface-php.surface-espace .programme-semaine__entete :is(h3, h4) {
  color: var(--ds-encre);
  font-family: var(--ds-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}

body.surface-php.surface-espace .programme-semaine__entete p {
  margin-top: var(--ds-1);
  color: var(--ds-encre-tenue);
  font-size: 13px;
}

body.surface-php.surface-espace .programme-semaine__traits {
  display: flex;
  gap: var(--ds-2);
  margin: var(--ds-3) 0 0;
  padding: 0;
  list-style: none;
}

body.surface-php.surface-espace .programme-semaine__trait {
  flex: 1 1 0;
  height: 7px;
  border-radius: var(--ds-r-pilule);
  background: var(--ds-sable);
}

body.surface-php.surface-espace .programme-semaine__trait--fait {
  background: var(--ds-vert);
}

body.surface-php.surface-espace .programme-semaine__faits {
  display: grid;
  gap: var(--ds-1);
  margin: var(--ds-3) 0 0;
  padding: 0;
  color: var(--ds-encre-tenue);
  font-size: 13px;
  line-height: 1.45;
  list-style: none;
}

body.surface-php.surface-espace .programme-semaine__faits strong {
  color: var(--ds-encre);
}

body.surface-php.surface-espace .programme-seance-reponse {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: var(--ds-2);
}

body.surface-php.surface-espace .programme-seance-reponse .programme-seance-edition__texte {
  min-width: 0;
}

body.surface-php.surface-espace .programme-seance-reponse__action {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  border-radius: var(--ds-rayon-champ);
  color: var(--ds-encre-tenue);
}

body.surface-php.surface-espace .programme-seance-reponse__action:hover {
  background: var(--ds-blanc);
  color: var(--ds-encre);
}

body.surface-php.surface-espace .programme-seance-reponse__action:focus-visible {
  outline: var(--ds-focus);
  outline-offset: var(--ds-focus-decalage);
}

body.surface-php.surface-espace .programme-seance-reponse__action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.surface-php.surface-espace .message-retour-programme {
  margin: 0 0 var(--ds-2);
}

body.surface-php.surface-espace .message-retour-programme__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-1);
  min-height: 44px;
  padding: 0 var(--ds-1);
  color: var(--ds-encre-tenue);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

body.surface-php.surface-espace .message-retour-programme__lien:hover {
  color: var(--ds-encre);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.surface-php.surface-espace .message-retour-programme__lien:focus-visible {
  outline: var(--ds-focus);
  outline-offset: var(--ds-focus-decalage);
}

body.surface-php.surface-espace .message-retour-programme__lien svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.surface-php.surface-espace .programme-sessions-actions {
  margin: var(--ds-3) 0 0;
}

/* L’écran explicite de modification porte le résumé natif et son formulaire sans JavaScript.
   La cible du déclencheur reste à 44 px. */
body.surface-php.surface-espace .programme-seance-edition > summary {
  display: flex;
  align-items: center;
  gap: var(--ds-2);
  min-height: 44px;
  margin: 0;
  color: inherit;
  list-style: none;
  cursor: pointer;
}

body.surface-php.surface-espace .programme-seance-edition > summary::-webkit-details-marker {
  display: none;
}

body.surface-php.surface-espace .programme-seance-edition__texte {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

body.surface-php.surface-espace .programme-seance-edition__icone {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-r-champ);
  color: var(--ds-encre-douce);
  transition: background var(--ds-duree) var(--ds-courbe),
              color var(--ds-duree) var(--ds-courbe),
              transform var(--ds-duree) var(--ds-courbe);
}

body.surface-php.surface-espace .programme-seance-edition__icone svg {
  display: block;
  width: 17px;
  height: 17px;
}

body.surface-php.surface-espace .programme-seance-edition > summary:hover .programme-seance-edition__icone {
  background: var(--ds-blanc);
  color: var(--ds-encre);
}

body.surface-php.surface-espace .programme-seance-edition > summary:active .programme-seance-edition__icone {
  transform: scale(.96);
}

body.surface-php.surface-espace .programme-seance-edition > summary:focus-visible {
  outline: var(--ds-focus);
  outline-offset: var(--ds-focus-decalage);
}

body.surface-php.surface-espace .programme-seance-edition__form {
  margin-top: var(--ds-2);
  padding: var(--ds-3) 0 var(--ds-2);
  border-top: 1px solid var(--ds-sable);
}

body.surface-php.surface-espace .programme-historique {
  border-top: 1px solid var(--ds-sable);
}

body.surface-php.surface-espace .programme-historique > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--ds-vert);
  font-weight: 700;
  cursor: pointer;
}

body.surface-php.surface-espace .programme-historique > summary:focus-visible {
  outline: var(--ds-focus);
  outline-offset: var(--ds-focus-decalage);
}

body.surface-php.surface-espace .programme-historique__liste .programme-semaine + .programme-semaine {
  border-top: 1px solid var(--ds-sable);
}

body.surface-php.surface-espace .programme-validation {
  margin-top: 0;
  padding-top: var(--ds-4);
  border-top: 1px solid var(--ds-sable);
}

@media (max-width: 640px) {
  body.surface-php.surface-espace .coordonnees-form .telephone-compose__champs,
  body.surface-php.surface-espace .programme-parametres,
  body.surface-php.surface-espace .programme-contenu__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  body.surface-php.surface-espace .programme-chapitre,
  body.surface-php.surface-espace .programme-contenu {
    padding: var(--ds-3);
  }
}

body.surface-php.surface-espace .ds-groupe {
  min-width: 0;
  margin: 0 0 var(--ds-4);
  padding: var(--ds-4);
  border: 1px solid var(--ds-sable);
  border-radius: var(--ds-r-champ);
}

body.surface-php.surface-espace .ds-sous-groupe {
  min-width: 0;
  margin: var(--ds-3) 0 0;
  padding: var(--ds-4) 0 0;
  border-top: 1px solid var(--ds-sable);
}

body.surface-php.surface-espace .ds-label {
  display: block;
  margin: 0 0 var(--ds-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-encre);
}

body.surface-php.surface-espace .ds-champ {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0 0 var(--ds-3);
  padding: var(--ds-3) var(--ds-4);
  border: 1px solid var(--ds-sable-fort);
  border-radius: var(--ds-r-champ);
  background: var(--ds-blanc);
  color: var(--ds-encre);
  font-family: var(--ds-sans);
  font-size: 16px;
  line-height: 1.4;
}

body.surface-php.surface-espace .ds-champ::placeholder { color: var(--ds-encre-tenue); }

body.surface-php.surface-espace .ds-champ:focus {
  outline: none;
  border-color: var(--ds-vert);
  box-shadow: 0 0 0 1px var(--ds-vert);
}

body.surface-php.surface-espace textarea.ds-champ {
  min-height: 112px;
  resize: vertical;
}

body.surface-php.surface-espace .ds-aide-champ {
  margin: -6px 0 var(--ds-3);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-encre-tenue);
}

/* Piège à robots : hors écran, jamais display:none (trop repérable). */
body.surface-php.surface-espace .ds-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Écran d'authentification (connexion, activation, mot de passe) -------------------------- */

body.surface-php.surface-espace .espace__accueil-auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 140px);
  max-width: 440px;
  margin: 0 auto;
  padding: var(--ds-6) var(--ds-4) var(--ds-12);
}

body.surface-php.surface-espace .ds-liens {
  display: grid;
  gap: var(--ds-2);
  margin: var(--ds-4) 0 0;
  font-size: 14px;
  text-align: center;
}

/* Ces liens sont des COMMANDES (créer un compte, mot de passe oublié), pas des mots dans une
   phrase : ils gardent une cible confortable au doigt. Un lien inline dans un paragraphe,
   lui, garde la taille de son texte — l'agrandir casserait la phrase. */
body.surface-php.surface-espace .ds-liens a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--ds-3);
  border-radius: var(--ds-r-bouton);
  color: var(--ds-vert);
  font-weight: 600;
  text-decoration: none;
}

body.surface-php.surface-espace .ds-liens a:hover {
  color: var(--ds-vert-presse);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Fil de messages ------------------------------------------------------------------------- */

body.surface-php.surface-espace .ds-fil {
  display: flex;
  flex-direction: column;
  gap: var(--ds-2);
  margin: 0 0 var(--ds-4);
}

body.surface-php.surface-espace .ds-bulle {
  max-width: 84%;
  padding: var(--ds-3) var(--ds-4);
  border: 1px solid var(--ds-sable);
  border-radius: var(--ds-r-bloc);
  background: var(--ds-blanc);
  align-self: flex-start;
}

body.surface-php.surface-espace .ds-bulle--moi {
  align-self: flex-end;
  background: var(--ds-vert-pale);
  border-color: var(--ds-vert-filet);
}

body.surface-php.surface-espace .ds-bulle__texte {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ds-encre);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body.surface-php.surface-espace .ds-bulle__meta {
  margin: var(--ds-1) 0 0;
  font-size: 12px;
  color: var(--ds-encre-tenue);
}

/* --- Contenu rédigé (objectifs, programme) rendu par otm_markdown() --------------------------- */

body.surface-php.surface-espace .ds-md {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ds-encre-douce);
}

body.surface-php.surface-espace .ds-md > :first-child { margin-top: 0; }
body.surface-php.surface-espace .ds-md > :last-child { margin-bottom: 0; }

/* Le markdown inséré dans une carte descend d'un cran (h3/h4) : le titre de la carte est le
   h2 de la section. Tous ces niveaux se ressemblent visuellement — c'est le PLAN qui change,
   pas l'apparence : sans cela, « A — Échauffement » se retrouvait au même rang que « Vos
   objectifs » et le lecteur d'écran ne pouvait plus s'orienter. */
body.surface-php.surface-espace .ds-md h2,
body.surface-php.surface-espace .ds-md h3,
body.surface-php.surface-espace .ds-md h4 {
  margin: var(--ds-4) 0 var(--ds-2);
  font-family: var(--ds-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-encre);
}

body.surface-php.surface-espace .ds-md p { margin: 0 0 var(--ds-3); }

body.surface-php.surface-espace .ds-md ul,
body.surface-php.surface-espace .ds-md ol {
  margin: 0 0 var(--ds-3);
  padding-left: var(--ds-5);
}

body.surface-php.surface-espace .ds-md li { margin: 0 0 var(--ds-1); }

body.surface-php.surface-espace .ds-md a {
  color: var(--ds-vert);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.surface-php.surface-espace .ds-md a:hover { color: var(--ds-vert-presse); }

/* --- Navigation de jour en jour (journée du coach) --------------------------------------------
   La date est le titre de ce qui suit ; les deux pas de côté restent des commandes discrètes,
   à 44 px de cible tactile. */

body.surface-php.surface-espace .ds-jour {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-3);
  margin: 0 0 var(--ds-4);
}

body.surface-php.surface-espace .ds-jour__pas {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ds-sable);
  border-radius: var(--ds-r-bouton);
  background: var(--ds-blanc);
  color: var(--ds-encre-douce);
}

body.surface-php.surface-espace .ds-jour__pas:hover {
  background: var(--ds-gres);
  color: var(--ds-encre);
}

body.surface-php.surface-espace .ds-jour__pas svg {
  width: 18px;
  height: 18px;
  display: block;
}

body.surface-php.surface-espace .ds-jour__date {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-encre-douce);
}

/* --- Séparateur « Maintenant » de la journée du coach ------------------------------------------ */

body.surface-php.surface-espace .ds-repere {
  display: flex;
  align-items: center;
  gap: var(--ds-3);
  margin: var(--ds-4) 0 var(--ds-3);
}

body.surface-php.surface-espace .ds-repere__mot {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-brique-texte);
}

body.surface-php.surface-espace .ds-repere__trait {
  flex: 1;
  height: 1px;
  background: var(--ds-brique-filet);
}

/* --- Sélecteur de nombre (séances à créditer, côté coach : lecture seule) ----------------------- */

body.surface-php.surface-espace .ds-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

body.surface-php.surface-espace .ds-tableau th,
body.surface-php.surface-espace .ds-tableau td {
  padding: var(--ds-3) var(--ds-2);
  text-align: left;
  border-bottom: 1px solid var(--ds-filet);
}

body.surface-php.surface-espace .ds-tableau th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-encre-tenue);
}

body.surface-php.surface-espace .ds-tableau td { color: var(--ds-encre-douce); }

/* --- Lien d'aide `?` de la barre haute -----------------------------------------------------
   `body.surface-php .aide-contextuelle` habille le bouton du blog et de la vitrine : il
   s'appliquerait ici aussi, puisque cette surface porte encore `surface-php`. La règle
   ci-dessous, plus spécifique, le rend au format des autres commandes de la barre. La cible
   tactile reste de 48 px (exigence AGENTS.md) grâce à la zone de contact étendue. */

body.surface-php.surface-espace .aide-contextuelle {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-color: var(--ds-sable);
  border-radius: var(--ds-r-bouton);
  background: var(--ds-blanc);
  color: var(--ds-encre-douce);
  font-family: var(--ds-sans);
  font-size: 15px;
}

body.surface-php.surface-espace .aide-contextuelle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
}

/* --- Au-delà de 900 px : la barre d'onglets remonte sous l'en-tête ------------------------------
   Une barre collée en bas d'un écran de bureau n'a aucun sens : elle redevient une rangée
   d'onglets, à sa place naturelle dans le DOM. Le contenu s'élargit. */

@media (min-width: 900px) {
  /* `width:100%` est indispensable : sur un élément flex, une marge automatique DÉSACTIVE
     l'étirement (`align-items:stretch`) — la barre se réduisait alors à la largeur de ses
     quatre onglets et flottait au milieu de l'écran au lieu de s'aligner sur le contenu. */
  body.surface-php.surface-espace .espace__nav {
    position: sticky;
    top: 65px;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 20;
    grid-auto-columns: auto;
    justify-content: start;
    gap: var(--ds-2);
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--ds-2) var(--ds-6);
    background: rgba(245, 242, 236, .88);
    border-top: 0;
    border-bottom: 1px solid var(--ds-sable);
    box-shadow: none;
  }

  body.surface-php.surface-espace .espace__nav-lien {
    grid-auto-flow: column;
    justify-items: start;
    align-items: center;
    gap: var(--ds-2);
    min-height: 40px;
    padding: 0 var(--ds-4);
    font-size: 14px;
  }

  body.surface-php.surface-espace .espace__nav-lien--actif {
    background: var(--ds-vert-pale);
  }

  body.surface-php.surface-espace .espace__corps {
    max-width: 880px;
    padding: var(--ds-6) var(--ds-6) var(--ds-12);
  }

  body.surface-php.surface-espace .espace__salut { font-size: 44px; }

  /* Deux colonnes seulement quand l'écran le mérite : l'essentiel reste à gauche. */
  body.surface-php.surface-espace .ds-duo {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--ds-4);
    align-items: start;
  }
}

@media (min-width: 1240px) {
  body.surface-php.surface-espace .espace__corps { max-width: 1000px; }
}

/* --- Lecteur d'aide DANS la coquille -------------------------------------------------------
   Le guide `?` s'ouvre désormais sans quitter l'application : plus de bascule vers l'en-tête
   de la vitrine au milieu d'une question. Les règles `body.surface-php .aide-*` habillent
   déjà sa structure ; celles-ci, plus spécifiques, la ramènent au vocabulaire v2. */

body.surface-php.surface-espace .aide-page {
  width: auto;
  max-width: none;
  padding: 0;
}

body.surface-php.surface-espace .aide-page__barre {
  margin-bottom: var(--ds-4);
  padding-bottom: var(--ds-3);
  border-bottom: 1px solid var(--ds-sable);
  font-size: 13px;
  color: var(--ds-encre-tenue);
}

body.surface-php.surface-espace .aide-sommaire,
body.surface-php.surface-espace .aide-article {
  border-color: var(--ds-sable);
  border-radius: var(--ds-r-carte-lg);
  background: var(--ds-blanc);
  box-shadow: var(--ds-ombre-carte);
}

body.surface-php.surface-espace .aide-sommaire__titre {
  font-family: var(--ds-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-encre-tenue);
}

body.surface-php.surface-espace .aide-sommaire a { color: var(--ds-encre-douce); }
body.surface-php.surface-espace .aide-sommaire a[aria-current="page"] { color: var(--ds-vert-presse); }

body.surface-php.surface-espace .aide-article h1 {
  font-family: var(--ds-serif);
  font-weight: 400;
  color: var(--ds-encre);
}

body.surface-php.surface-espace .aide-article__audience {
  font-family: var(--ds-sans);
  letter-spacing: .12em;
  color: var(--ds-encre-tenue);
}

body.surface-php.surface-espace .aide-article__texte { color: var(--ds-encre-douce); }

body.surface-php.surface-espace .aide-article__texte h2,
body.surface-php.surface-espace .aide-article__texte h3 {
  font-family: var(--ds-sans);
  font-weight: 600;
  color: var(--ds-encre);
}

body.surface-php.surface-espace .aide-figure {
  border-color: var(--ds-sable);
  border-radius: var(--ds-r-bloc);
}

/* --- Très petits écrans --------------------------------------------------------------------- */

@media (max-width: 380px) {
  body.surface-php.surface-espace .espace__corps { padding-left: var(--ds-3); padding-right: var(--ds-3); }
  body.surface-php.surface-espace .espace__salut { font-size: 30px; }
  body.surface-php.surface-espace .ds-carte { padding: var(--ds-4); }
}

/* Administration PHP — design system v2 (2026-07-31)
   Ce bloc est le POINT DE BRANCHEMENT de toute l'administration sur le nouveau système :
   les noms locaux (--cacao, --vert-eau, --bordure…) sont conservés parce que 400 règles les
   consomment, mais ils ne portent plus une valeur en dur — ils pointent sur les jetons
   `--ds-*` déclarés en tête de fichier. Changer la palette du système change l'admin. */
body.surface-admin{
  --cacao:var(--ds-cacao);
  --cacao-hover:var(--ds-cacao-clair);
  --vert-eau:var(--ds-vert);
  --vert-eau-hover:var(--ds-vert-presse);
  --vert-eau-press:var(--ds-vert-presse);
  --fond:var(--ds-creme);
  --texte:var(--ds-encre);
  --doux:var(--ds-encre-tenue);
  --rouge:var(--ds-brique-texte);
  --orange:var(--ds-brique-texte);
  --carte:var(--ds-blanc);
  --carte-douce:var(--ds-blanc);
  --bordure:var(--ds-sable);
  --filet-leger:var(--ds-filet);
  --contour:var(--ds-sable-fort);  /* contour des contrôles, distinct du filet de séparation */
  --voile:var(--ds-voile);         /* en-têtes de tableau et champs inertes                  */

  /* --- Typographie « product » ------------------------------------------------------
     L'échelle du design system v2 : serif pour les moments où l'écran s'adresse à
     quelqu'un (titre de section, nom d'un dossier), sans pour tout ce qui sert.
     `--pt-xl` et `--pt-2xl` habillent enfin des règles : c'est la dette du README §8. */
  --serif:var(--ds-serif);
  --sans:var(--ds-sans);
  --pt-xs:11px;     /* étiquettes de colonne, méta                                      */
  --pt-sm:13px;     /* aide, sous-lignes                                                */
  --pt-md:14px;     /* corps de l'interface                                             */
  --pt-lg:15px;     /* libellés de formulaire, boutons                                  */
  --pt-xl:17px;     /* titres de carte                                                  */
  --pt-2xl:20px;    /* intertitres denses                                               */
  --pt-3xl:26px;    /* titre d'écran (serif)                                            */

  /* --- Rythme vertical et horizontal : multiples de 4, sans exception ---------------- */
  --pr-1:4px; --pr-2:8px; --pr-3:12px; --pr-4:16px; --pr-5:24px; --pr-6:32px; --pr-7:48px;

  /* --- Formes : 8 champs · 10 boutons · 16 cartes · 999 badges ----------------------- */
  --pa-radius-sm:8px;
  --pa-radius:10px;
  --pa-radius-carte:16px;

  /* --- Mouvement : UNE durée, UNE courbe. Toute transition de l'admin les consomme,
     donc « ralentir l'interface » se fait en changeant une seule ligne. ---------------- */
  --pa-duree:var(--ds-duree);
  --pa-courbe:var(--ds-courbe);

  /* --- Couleurs d'état, alignées sur le vocabulaire du système : vert pâle = ce qui va,
     brique = ce qui cloche. ------------------------------------------------------------ */
  --etat-alerte:var(--ds-brique-texte);
  --etat-alerte-fond:var(--ds-brique-carte);
  --etat-alerte-filet:var(--ds-brique-filet);
  --etat-ok:var(--ds-vert-presse);
  --etat-ok-fond:var(--ds-vert-pale);
  --etat-ok-filet:var(--ds-vert-filet);
  --etat-erreur:var(--ds-brique-texte);
  --etat-erreur-fond:var(--ds-brique-pale);
}
body.surface-admin{
  margin:0;
  font-family:var(--sans);
  background:var(--fond);
  color:var(--texte);
  line-height:1.55;
  font-size:var(--pt-md);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Écrans de connexion/installation : conteneur simple, centré. */
body.surface-admin .conteneur{max-width:960px;margin:0 auto;padding:48px 16px 64px;}
body.surface-admin h1,
body.surface-admin h2,
body.surface-admin h3{color:var(--texte);line-height:1.15;font-family:var(--serif);font-weight:400;}
/* L'échelle du système : le serif porte le titre d'écran ET les intertitres de section
   (« À traiter », « Aujourd'hui »), le sans porte les étiquettes de registre. C'est la
   dette « --pt-xl et --pt-2xl déclarés mais inutilisés » du README §8, résorbée. */
body.surface-admin h1{font-size:var(--pt-3xl);margin:0 0 4px;letter-spacing:-.01em;text-wrap:balance;}
body.surface-admin h2{font-size:var(--pt-3xl);margin:var(--pr-6) 0 var(--pr-4);letter-spacing:-.01em;}
body.surface-admin h3{font-family:var(--sans);font-size:var(--pt-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;margin:0 0 var(--pr-3);color:var(--doux);}
/* Les cartes redeviennent des CARTES : un aplat blanc, un contour sable, un rayon de 16 px
   et une ombre qui porte loin sans peser. C'est le vocabulaire du design system v2 ; la
   version « section à filet haut » du 26/07/2026 est remplacée. */
body.surface-admin .carte{background:var(--carte);border:1px solid var(--bordure);
  border-top:1px solid var(--bordure);border-radius:var(--pa-radius-carte);
  padding:var(--pr-5);margin:0 0 var(--pr-5);overflow-x:auto;
  box-shadow:var(--ds-ombre-carte);}
body.surface-admin .carte--etroite{max-width:480px;}
body.surface-admin .carte--moyenne{max-width:640px;}
/* Carte dont le contenu est une liste ou un tableau : les lignes touchent les bords. */
body.surface-admin .carte--liste{padding:0;overflow:hidden;}
body.surface-admin table{width:100%;border-collapse:collapse;font-size:var(--pt-md);font-variant-numeric:tabular-nums;}
body.surface-admin th,
body.surface-admin td{text-align:left;padding:var(--pr-3) var(--pr-3);border-bottom:1px solid var(--filet-leger);vertical-align:middle;}
body.surface-admin th{color:var(--doux);font-size:var(--pt-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;background:var(--voile);border-bottom:1px solid var(--bordure);}
body.surface-admin th:first-child,
body.surface-admin td:first-child{padding-left:var(--pr-4);}
body.surface-admin th:last-child,
body.surface-admin td:last-child{padding-right:var(--pr-4);}
body.surface-admin tbody tr:last-child td{border-bottom:none;}
body.surface-admin tbody tr:hover td{background:var(--voile);}
/* Un tableau posé dans une carte-liste occupe tout son cadre : le rayon de la carte le
   rogne (overflow:hidden), donc aucun coin carré ne dépasse. */
body.surface-admin .carte--liste table{margin:0;}
body.surface-admin tfoot td,
body.surface-admin tfoot th{border-top:2px solid var(--cacao);border-bottom:none;font-weight:600;color:var(--cacao);padding-top:10px;text-align:left;}
/* Cellules : atomiques (.nowrap — dates, chiffres, groupes de boutons) vs longues
   (.souple — emails, motifs, détails : coupent proprement au lieu de pousser la table). */
body.surface-admin .nowrap{white-space:nowrap;}
body.surface-admin .souple{overflow-wrap:anywhere;}
body.surface-admin .solde-negatif{color:var(--rouge);font-weight:700;}
body.surface-admin .solde-bas{color:#9A5D20;font-weight:700;} /* orange assombri : 4,5:1 sur blanc (revue) */
body.surface-admin label{display:block;margin:var(--pr-3) 0 var(--pr-1);font-weight:600;font-size:var(--pt-sm);color:var(--doux);}
body.surface-admin input[type=text],
body.surface-admin input[type=email],
body.surface-admin input[type=password],
body.surface-admin input[type=number],
body.surface-admin input[type=date],
body.surface-admin input[type=search],
body.surface-admin input[type=tel],
body.surface-admin select,
body.surface-admin textarea{
  width:100%;padding:var(--pr-2) var(--pr-3);font-size:16px;border:1px solid var(--contour);
  border-radius:var(--pa-radius-sm);font-family:inherit;background:#fff;color:var(--texte);min-height:40px;
}
body.surface-admin select{width:auto;max-width:100%;}
body.surface-admin input[readonly]{background:var(--voile);color:var(--texte);}
body.surface-admin .telephone-compose{min-width:0;margin:var(--pr-3) 0 0;padding:0;border:0;}
body.surface-admin .telephone-compose legend{padding:0;font-weight:600;font-size:var(--pt-sm);color:var(--doux);}
body.surface-admin .telephone-compose__champs{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--pr-3);}
body.surface-admin .telephone-compose label{min-width:0;margin-top:var(--pr-1);}
body.surface-admin input:focus,
body.surface-admin select:focus,
body.surface-admin textarea:focus{outline:2px solid var(--vert-eau);outline-offset:2px;}
/* Boutons : 36 px en administration (48 px sur mobile, plus bas). Un seul rang plein — le
   vert est l'action suivante de l'écran, jamais une couleur de marque. */
body.surface-admin button,
body.surface-admin .bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--pr-2);
  min-height:36px;padding:var(--pr-2) var(--pr-4);border-radius:var(--pa-radius);
  border:1px solid transparent;
  background:var(--vert-eau);color:#fff;font-family:inherit;font-size:var(--pt-md);font-weight:600;
  cursor:pointer;text-decoration:none;line-height:1.3;white-space:nowrap;
  transition:background var(--pa-duree) var(--pa-courbe),
             border-color var(--pa-duree) var(--pa-courbe),
             color var(--pa-duree) var(--pa-courbe),
             transform var(--pa-duree) var(--pa-courbe),
             box-shadow var(--pa-duree) var(--pa-courbe);
}
body.surface-admin button:hover,
body.surface-admin .bouton:hover{background:var(--vert-eau-hover);transform:translateY(-1px);box-shadow:var(--ds-ombre-levee);}
body.surface-admin button:active,
body.surface-admin .bouton:active{background:var(--vert-eau-press);transform:none;}
body.surface-admin button:focus-visible,
body.surface-admin .bouton:focus-visible,
body.surface-admin a:focus-visible{outline:2px solid var(--vert-eau);outline-offset:2px;}
body.surface-admin button.discret,
body.surface-admin .bouton.discret{background:#fff;color:var(--texte);border-color:var(--contour);}
body.surface-admin button.discret:hover,
body.surface-admin .bouton.discret:hover{background:var(--ds-gres);border-color:var(--contour);color:var(--texte);}
body.surface-admin button.discret:active,
body.surface-admin .bouton.discret:active{background:var(--ds-sable);}
/* Rang destructeur : il ne ressemble ni au vert de l'action de l'écran, ni au blanc d'un
   bouton anodin. « Supprimer définitivement » avait exactement l'apparence de « Désactiver
   l'accès », son voisin immédiat, alors qu'aucun retour arrière n'existe. */
/* Lien d'évitement : dix liens de menu et la déconnexion précèdent le contenu sur chaque
   écran d'administration. Même comportement que dans les espaces élève et coach. */
body.surface-admin .skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--cacao);color:var(--ds-creme);
  padding:var(--pr-3) var(--pr-4);border-radius:var(--pa-radius-sm);
  text-decoration:none;font-weight:600;
}
body.surface-admin .skip-link:focus{left:var(--pr-4);top:var(--pr-4);}
body.surface-admin button.danger{background:#fff;color:var(--ds-brique-texte);border-color:var(--ds-brique);}
body.surface-admin button.danger:hover{background:var(--ds-brique);color:#fff;border-color:var(--ds-brique);}
body.surface-admin button.danger:active{background:var(--ds-brique-texte);color:#fff;}
body.surface-admin button.danger:focus-visible{outline-color:var(--ds-brique-texte);}
body.surface-admin button.rapide,
body.surface-admin a.rapide{min-height:32px;padding:var(--pr-1) var(--pr-3);font-size:var(--pt-sm);background:#fff;color:var(--vert-eau-hover);border:1px solid var(--contour);border-radius:var(--pa-radius-sm);box-shadow:none;}
body.surface-admin button.rapide:hover,
body.surface-admin a.rapide:hover{background:var(--ds-vert-pale);border-color:var(--vert-eau);box-shadow:none;}
body.surface-admin button.rapide:active,
body.surface-admin a.rapide:active{background:var(--ds-vert-pale);}
body.surface-admin a.rapide{display:inline-flex;align-items:center;text-decoration:none;}
body.surface-admin .ligne-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
/* Dans une cellule .nowrap, les groupes de boutons restent sur UNE ligne : white-space ne
   contraint pas les items flex, il faut couper le wrap du flex lui-même (revue 2026-07-20). */
body.surface-admin td.nowrap .ligne-inline{flex-wrap:nowrap;}
body.surface-admin .ligne-inline input{width:auto;flex:0 0 auto;}
body.surface-admin .ligne-inline input[name=motif]{flex:1 1 160px;}
/* Utilitaires (remplacent les styles inline récurrents du HTML PHP). */
body.surface-admin .mt{margin-top:16px;}
body.surface-admin .form-inline{display:inline;}
body.surface-admin .sous-nom{font-size:12.5px;color:var(--doux);margin-top:2px;}
/* Alertes : cadre COMPLET teinté (jamais de liseré latéral — interdit charte). */
body.surface-admin .a-encaisser{padding:var(--pr-3) var(--pr-4);border:1px solid var(--etat-alerte-filet);
  background:var(--etat-alerte-fond);border-radius:var(--pa-radius-sm);margin:0 0 var(--pr-4);
  font-size:var(--pt-md);}
body.surface-admin .a-encaisser strong{color:var(--etat-alerte);}
body.surface-admin .a-encaisser--action{
  display:block;min-height:48px;color:var(--texte);text-decoration:none;cursor:pointer;
  transition:background var(--pa-duree) var(--pa-courbe),
             border-color var(--pa-duree) var(--pa-courbe);
}
body.surface-admin .a-encaisser--action:visited{color:var(--texte);}
body.surface-admin .a-encaisser--action:hover{background:#F8EEE7;border-color:#D9B49E;}
body.surface-admin .a-encaisser--action:active{background:#F3E5DB;}
body.surface-admin .a-encaisser--action>span:not(.a-encaisser__cta){
  display:block;margin-top:var(--pr-1);
}
body.surface-admin .a-encaisser__cta{
  display:block;margin-top:var(--pr-2);color:var(--vert-eau-hover);font-weight:600;
}
body.surface-admin .a-encaisser__actions{margin:var(--pr-3) 0 0;}
body.surface-admin .msg{padding:var(--pr-3) var(--pr-4);border-radius:var(--pa-radius-sm);
  margin-bottom:var(--pr-4);font-weight:600;font-size:var(--pt-md);}
body.surface-admin .msg-succes{background:var(--etat-ok-fond);border:1px solid var(--etat-ok-filet);color:var(--etat-ok);}
body.surface-admin .msg-erreur{background:var(--etat-erreur-fond);border:1px solid var(--etat-alerte-filet);color:var(--etat-erreur);}
body.surface-admin .aide{font-size:var(--pt-sm);color:var(--doux);margin:var(--pr-1) 0 var(--pr-3);max-width:68ch;}
/* Onglets d'une section dense (Réglages) : de vrais liens, donc navigables au clavier et
   fonctionnels sans JavaScript. Marquage de l'onglet actif par un filet vert d'eau de 2 px —
   pas de pilule (réservée aux badges), pas de dégradé, pas d'ombre. */
body.surface-admin .onglets{display:flex;flex-wrap:wrap;gap:var(--pr-1);margin:0 0 var(--pr-5);
  border-bottom:1px solid var(--bordure);}
body.surface-admin .onglet{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--pr-4);
  color:var(--doux);text-decoration:none;font-weight:600;font-size:var(--pt-md);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--pa-duree) var(--pa-courbe),border-color var(--pa-duree) var(--pa-courbe);}
body.surface-admin .onglet:hover{color:var(--texte);border-bottom-color:var(--bordure);}
body.surface-admin .onglet--actif{color:var(--vert-eau);border-bottom-color:var(--vert-eau);}
body.surface-admin .onglet:focus-visible{outline:2px solid var(--vert-eau);outline-offset:2px;border-radius:var(--pa-radius-sm);}
/* --- Fiche élève : TIROIR superposé (décision du 26/07/2026) ---------------------------
   La liste garde toute sa largeur ; la fiche glisse par-dessus, à droite. L'ouverture est
   instantanée parce que le panneau est DÉJÀ dans le document : seul son contenu est
   remplacé. Le repli sans JavaScript reste entier — le serveur rend le tiroir déjà ouvert
   quand l'URL porte ?fiche=, et le voile est un vrai lien de fermeture.
   Les règles `.deux-colonnes` / `.deux-colonnes__liste` qui précédaient ici étaient le
   vestige de la disposition à deux colonnes abandonnée le même jour : `display:block` et
   `min-width:0` sur un bloc, c'est-à-dire rien. Retirées avec leurs deux `<div>`. */
body.surface-admin .panneau{
  position:fixed;top:0;right:0;bottom:0;z-index:40;
  width:min(520px,100vw);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  background:var(--carte);border-left:1px solid var(--bordure);border-radius:0;box-shadow:var(--ds-ombre-haute);
  padding:var(--pr-5) var(--pr-5) var(--pr-7);
  transform:translateX(105%);
  transition:transform calc(var(--pa-duree) * 1.2) var(--pa-courbe);
}
body.surface-admin .panneau--ouvert{transform:none;}
/* Le tiroir est l'unique zone qui défile quand il est ouvert. Le document derrière reste
   visible comme contexte, mais ne crée ni second ascenseur ni déplacement involontaire. */
body.surface-admin:has(.panneau--ouvert){overflow:hidden;}
/* Voile : assombrit la liste sans la masquer, et reste un LIEN — donc cliquable, tabulable
   et fonctionnel sans JavaScript. Pas de flou : il coûte cher et n'apporte rien ici. */
body.surface-admin .panneau__voile{
  position:fixed;inset:0;z-index:39;display:block;
  background:rgba(40,34,30,.34);
  opacity:0;visibility:hidden;
  transition:opacity calc(var(--pa-duree) * 1.2) var(--pa-courbe),
             visibility calc(var(--pa-duree) * 1.2) var(--pa-courbe);
}
body.surface-admin .panneau__voile--ouvert{opacity:1;visibility:visible;}
body.surface-admin .panneau__fermer{display:flex;justify-content:flex-end;margin:0 0 var(--pr-1);}
body.surface-admin .panneau__fermer a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;border-radius:var(--pa-radius-sm);
  font-weight:600;text-decoration:none;color:var(--doux);
  transition:background var(--pa-duree) var(--pa-courbe),color var(--pa-duree) var(--pa-courbe);
}
body.surface-admin .panneau__fermer a:hover{background:var(--filet-leger);color:var(--texte);}
/* Densité du tiroir : c'est un écran de travail quotidien, pas une page de documentation.
   Les cartes n'ont ni cadre ni fond — un simple filet les sépare — et les paragraphes d'aide
   restent des lignes de méta, jamais des pavés. La pédagogie vit dans le guide « ? ». */
/* DÉFAUT CORRIGÉ le 26/07/2026 : `.carte` porte `overflow-x:auto` et un `max-width`, pensés
   pour une pleine largeur. Dans un tiroir de 520 px, chaque carte devenait son propre
   conteneur de défilement — six barres imbriquées, des champs coupés en deux, un panneau
   impossible à parcourir. Un seul élément défile ici : le tiroir. */
body.surface-admin .panneau .carte{border:0;background:transparent;
  padding:0 0 var(--pr-4);margin:0 0 var(--pr-4);border-bottom:1px solid var(--filet-leger);
  overflow:visible;max-width:none;}
/* Un tableau plus large que le tiroir défile DANS SON PROPRE cadre, pas la carte entière. */
body.surface-admin .panneau .carte table{display:block;overflow-x:auto;max-width:100%;}
body.surface-admin .panneau .carte:last-child{border-bottom:0;margin-bottom:0;}
body.surface-admin .panneau h3{font-family:var(--sans);font-size:var(--pt-xs);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--doux);margin:0 0 var(--pr-2);}
body.surface-admin .panneau .aide{margin:var(--pr-1) 0 var(--pr-2);font-size:var(--pt-sm);}
body.surface-admin .panneau label{margin-top:var(--pr-2);}
body.surface-admin .panneau .mt,
body.surface-admin .panneau .u-mt-20{margin-top:var(--pr-3);}
@media (max-width:640px){
  /* `100vw` inclut la barre de défilement : le panneau débordait alors de 15 px à gauche
     dans une fenêtre Windows étroite. `100%` suit la zone réellement disponible. */
  body.surface-admin .panneau{width:100%;max-width:none;border-left:0;padding:16px 16px 40px;}
}
/* Une seule requête de mouvement réduit pour toute la surface : elle neutralise le socle,
   donc toute transition qui consomme --pa-duree est couverte, présente et à venir. */
@media (prefers-reduced-motion: reduce){
  body.surface-admin{--pa-duree:0ms;}
  body.surface-admin *,
  body.surface-admin *::before,
  body.surface-admin *::after{transition-duration:0ms !important;animation-duration:0ms !important;}
}
/* --- Liens de l'administration ---------------------------------------------------------
   Sans cette règle, les liens des tableaux tombaient sur le bleu par défaut du navigateur,
   et viraient au VIOLET une fois visités : deux couleurs étrangères à la charte, sur
   l'écran le plus consulté. L'accent d'action reste le vert d'eau. */
body.surface-admin a{color:var(--vert-eau-hover);}
body.surface-admin a:visited{color:var(--vert-eau-hover);}
/* Nom d'une ligne ouvrable : ce n'est pas un lien « bleu souligné », c'est le libellé de la
   ligne. Toute la ligne est la cible ; le soulignement n'apparaît qu'au survol. */
body.surface-admin tr.ligne-fiche td.client-nom > a{
  color:var(--texte);font-weight:600;text-decoration:none;
}
body.surface-admin tr.ligne-fiche:hover td.client-nom > a,
body.surface-admin tr.ligne-fiche td.client-nom > a:hover{
  color:var(--cacao);text-decoration:underline;text-underline-offset:3px;
}
body.surface-admin tr.ligne-fiche--active td.client-nom > a{color:var(--vert-eau);}
/* La liste des élèves laisse le navigateur distribuer l'espace selon le contenu. Les deux
   champs courts prennent leur largeur utile ; seuls les emails peuvent couper n'importe où. */
body.surface-admin .table-clients{table-layout:auto;}
body.surface-admin .table-clients .client-nom{width:30%;overflow-wrap:break-word;}
body.surface-admin .table-clients .client-email{width:30%;overflow-wrap:anywhere;}
body.surface-admin .table-clients .client-solde,
body.surface-admin .table-clients .client-mouvement{width:1%;white-space:nowrap;}
body.surface-admin .section-entete-actions{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--pr-3);margin-bottom:var(--pr-4);
}
body.surface-admin .section-entete-actions h2{margin:0;}
body.surface-admin .dossier-documents{list-style:none;margin:0;padding:0;}
body.surface-admin .dossier-document{
  display:flex;align-items:center;justify-content:space-between;gap:var(--pr-3);
  padding:var(--pr-3) 0;border-bottom:1px solid var(--filet-leger);
}
body.surface-admin .dossier-document:last-child{border-bottom:0;}
body.surface-admin .dossier-document form{margin:0;flex:0 0 auto;}
/* Ligne de tableau ouvrable : le pointeur et le survol annoncent la cible, la ligne ouverte
   reste identifiable pendant que l'on travaille dans le panneau. */
body.surface-admin tr.ligne-fiche{cursor:pointer;}
body.surface-admin tr.ligne-fiche td{transition:background var(--pa-duree) var(--pa-courbe);}
body.surface-admin tr.ligne-fiche:hover td,
body.surface-admin tr.ligne-fiche--active td{background:var(--filet-leger);}
body.surface-admin tr.ligne-fiche--active td:first-child{box-shadow:inset 2px 0 0 var(--vert-eau);}
/* Liste courte sous un bandeau d'alerte (ex. dossiers dont la formule reste à confirmer). */
body.surface-admin .liste-compacte{margin:calc(var(--pr-2) * -1) 0 var(--pr-4);padding-left:var(--pr-5);
  font-size:var(--pt-md);line-height:2;}
body.surface-admin .liste-compacte a{font-weight:600;}
body.surface-admin .grille-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;}
body.surface-admin .pied{margin-top:48px;font-size:12px;color:var(--doux);text-align:center;}
/* --- Disposition : barre latérale cacao + feuille crème ---------------------------------
   232 px de large, aplat #2B241F, items de 42 px. L'item actif est un APLAT VERT PLEIN :
   c'est le seul endroit où le vert ne désigne pas une action mais une position — dans la
   navigation il n'y a pas d'ambiguïté possible. */
body.surface-admin .disposition{display:flex;align-items:stretch;min-height:100vh;max-width:none;margin:0;padding:0;gap:0;}
body.surface-admin .menu-lateral{flex:0 0 232px;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--cacao);border:0;border-radius:0;padding:var(--pr-5) 0 var(--pr-7);display:flex;flex-direction:column;gap:0;}
body.surface-admin .menu-marque{margin:0 0 var(--pr-5);padding:0 var(--pr-5);font-family:var(--serif);font-style:normal;font-weight:400;color:var(--ds-inverse);font-size:19px;line-height:1.2;}
/* Sur l'aplat cacao, le texte secondaire est --ds-inverse-doux : --ds-grain est un jeton de
   filet, il le déclare lui-même, et il tombait à 4,0:1 sur 10 px en capitales. */
body.surface-admin .menu-marque small{display:block;font-family:var(--sans);font-style:normal;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ds-inverse-doux);margin-top:var(--pr-1);}
body.surface-admin .menu-lateral a{display:flex;align-items:center;justify-content:space-between;gap:var(--pr-2);min-height:42px;padding:0 var(--pr-5);border-radius:0;color:var(--ds-inverse-doux);text-decoration:none;font-weight:500;font-size:var(--pt-lg);transition:background var(--pa-duree) var(--pa-courbe),color var(--pa-duree) var(--pa-courbe);}
body.surface-admin .menu-lateral a:hover{color:var(--ds-inverse);background:rgba(255,255,255,.06);}
body.surface-admin .menu-lateral a.actif{background:var(--vert-eau);color:#fff;font-weight:600;}
body.surface-admin .menu-compteur{margin-left:auto;border-radius:var(--pa-radius-sm);background:rgba(255,255,255,.14);padding:3px 8px;font-size:14px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1.2;}
body.surface-admin .menu-compteur--signal{background:var(--vert-eau);}
body.surface-admin .menu-deconnexion{margin:auto var(--pr-5) 0;padding-top:var(--pr-4);border-top:1px solid rgba(255,255,255,.12);}
body.surface-admin .menu-deconnexion button{width:100%;background:transparent;color:var(--ds-inverse-doux);border:1px solid rgba(255,255,255,.2);}
body.surface-admin .menu-deconnexion button:hover{background:rgba(255,255,255,.08);color:var(--ds-inverse);box-shadow:none;}
/* Focus sur l'aplat cacao : l'anneau vert d'eau n'y contraste qu'à 2,6:1 — crème (10,8:1). */
body.surface-admin .menu-lateral a:focus-visible,
body.surface-admin .menu-deconnexion button:focus-visible{outline-color:var(--fond);}

/* --- En-tête de travail : la recherche vit ICI, pas au-dessus d'un tableau ---------------
   Elle suit d'une section à l'autre. C'est le point d'entrée permanent de l'administration :
   un nom, un email, et la liste se réduit. */
body.surface-admin .adm-barre{
  display:flex;align-items:center;gap:var(--pr-4);flex-wrap:wrap;
  padding:var(--pr-3) var(--pr-6);background:#fff;border-bottom:1px solid var(--bordure);
  position:sticky;top:0;z-index:20;
}
body.surface-admin .adm-recherche{
  display:flex;align-items:center;gap:var(--pr-2);flex:1 1 260px;max-width:520px;
  height:42px;padding:0 var(--pr-3);border:1px solid var(--contour);
  border-radius:var(--pa-radius);background:var(--voile);
  transition:border-color var(--pa-duree) var(--pa-courbe),background var(--pa-duree) var(--pa-courbe);
}
body.surface-admin .adm-recherche:focus-within{border-color:var(--vert-eau);background:#fff;}
body.surface-admin .adm-recherche svg{flex:0 0 18px;width:18px;height:18px;stroke:var(--doux);fill:none;stroke-width:1.8;stroke-linecap:round;}
body.surface-admin .adm-recherche input{
  flex:1;min-width:0;min-height:0;height:40px;padding:0;border:0;border-radius:0;
  background:transparent;font-size:var(--pt-lg);color:var(--texte);
}
body.surface-admin .adm-recherche input:focus{outline:none;}
body.surface-admin .adm-recherche button{min-height:30px;padding:0 var(--pr-3);font-size:var(--pt-sm);}
body.surface-admin .adm-date{margin:0 0 0 auto;font-size:var(--pt-md);color:var(--doux);white-space:nowrap;}
body.surface-admin .adm-barre-actions{display:flex;align-items:center;gap:var(--pr-2);flex:0 0 auto;}

/* --- « À traiter » : une pastille, une phrase, un bouton --------------------------------
   Une alerte qui décrit une procédure est une alerte ratée. Chaque ligne porte le bouton
   qui la fait disparaître. */
body.surface-admin .adm-traiter{display:block;}
body.surface-admin .adm-traiter__ligne{
  display:flex;align-items:center;gap:var(--pr-3);padding:var(--pr-3) var(--pr-4);
  border-top:1px solid var(--filet-leger);
}
body.surface-admin .adm-traiter__ligne:first-child{border-top:0;}
body.surface-admin .adm-traiter__point{
  flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--contour);
}
body.surface-admin .adm-traiter__point--urgent{background:var(--ds-brique);}
body.surface-admin .adm-traiter__texte{
  flex:1;min-width:0;margin:0;font-size:var(--pt-lg);color:var(--doux);
}
body.surface-admin .adm-traiter__texte strong{font-weight:600;color:var(--texte);}
body.surface-admin .adm-traiter__action{flex:0 0 auto;}
body.surface-admin .adm-traiter__vide{
  margin:0;padding:var(--pr-4);font-size:var(--pt-lg);color:var(--doux);
}

/* --- Filtres rapides d'une liste (chips) ------------------------------------------------- */
body.surface-admin .adm-filtres{display:flex;align-items:center;flex-wrap:wrap;gap:var(--pr-2);margin:0 0 var(--pr-4);}
body.surface-admin .adm-filtre{
  display:inline-flex;align-items:center;gap:var(--pr-2);min-height:32px;padding:0 var(--pr-3);
  border:1px solid var(--contour);border-radius:var(--pa-radius-sm);background:#fff;
  color:var(--texte);font-size:var(--pt-md);font-weight:500;text-decoration:none;
}
body.surface-admin .adm-filtre:hover{background:var(--ds-gres);color:var(--texte);}
body.surface-admin .adm-filtre--actif{background:var(--texte);border-color:var(--texte);color:var(--fond);font-weight:600;}
body.surface-admin .adm-filtre--actif:hover{background:var(--cacao);color:var(--fond);}
body.surface-admin .adm-filtre__compte{opacity:.6;}
body.surface-admin .adm-filtres__total{margin:0 0 0 auto;font-size:var(--pt-md);color:var(--doux);}

/* --- Recharge d'un carnet en UN geste ----------------------------------------------------
   Quantité et tarif sont deux formulaires frères : Entrée dans le prix l'enregistre sans
   jamais créditer le carnet. */
body.surface-admin .adm-recharge{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--pr-3);margin:0 0 var(--pr-2);}
body.surface-admin .adm-recharge__pas{
  display:grid;gap:var(--pr-1);margin:0;font-size:var(--pt-sm);font-weight:600;color:var(--doux);
}
body.surface-admin .adm-recharge__pas input{
  width:64px;min-height:42px;height:42px;margin:0;padding:0 var(--pr-2);
  text-align:center;font-size:16px;font-weight:700;background:#fff;
}
body.surface-admin .adm-recharge__tarif{
  display:grid;gap:var(--pr-1);flex:1;min-width:190px;margin:0;
}
body.surface-admin .adm-recharge__tarif-label{margin:0;font-size:var(--pt-sm);font-weight:600;color:var(--doux);}
body.surface-admin .adm-recharge__prix{display:flex;align-items:center;gap:var(--pr-2);margin-top:var(--pr-1);font-size:16px;font-weight:600;color:var(--texte);font-variant-numeric:tabular-nums;}
body.surface-admin .adm-recharge__prix input{width:92px;min-height:42px;height:42px;margin:0;font-weight:700;}
body.surface-admin .adm-recharge__unite{display:grid;align-self:stretch;align-content:center;gap:2px;white-space:nowrap;}
body.surface-admin .adm-recharge__unite .aide{margin:0;font-weight:400;white-space:nowrap;}
body.surface-admin .panneau .carte table.tableau-seances{display:table;width:100%;table-layout:fixed;overflow:visible;}
body.surface-admin .tableau-seances th:first-child{width:34%;}
body.surface-admin .tableau-seances th:nth-child(2){width:28%;}
body.surface-admin .adm-etat-seance{display:flex;align-items:center;justify-content:space-between;gap:var(--pr-2);flex-wrap:wrap;}
body.surface-admin .adm-etat-seance form{margin:0;}
body.surface-admin .adm-etat-seance>span{display:grid;gap:2px;min-width:0;text-wrap:pretty;}
body.surface-admin .grille-form{
  display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:var(--pr-3);margin:var(--pr-3) 0;
}

/* L'état d'une séance est une information métier, jamais une méta décorative à couper. */
body.surface-php.surface-espace .ds-ligne--seance .ds-ligne__titre,
body.surface-php.surface-espace .ds-ligne--seance .ds-ligne__meta {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
body.surface-admin .grille-form label{min-width:0;margin:0;}
body.surface-admin .grille-form input,
body.surface-admin .grille-form select{width:100%;margin-top:var(--pr-1);font-variant-numeric:tabular-nums;}
body.surface-admin .adm-ecart-reglement{
  display:flex;align-items:flex-start;gap:var(--pr-2);margin:var(--pr-3) 0;color:var(--doux);
  font-size:var(--pt-sm);font-weight:400;text-wrap:pretty;
}
body.surface-admin .adm-ecart-reglement input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;}
body.surface-admin .pile{display:grid;gap:var(--pr-3);}
body.surface-admin .carte-interne{
  margin:0;padding:var(--pr-4);border:1px solid var(--filet-leger);
  border-radius:calc(var(--pa-radius-sm) + var(--pr-2));background:var(--voile);
}
body.surface-admin .carte-interne p{margin:0;text-wrap:pretty;}

/* Le Carnet vit toujours dans un tiroir de 520 px au plus : sa composition dépend de cette
   largeur réelle, jamais de celle de la fenêtre derrière. Les quatre repères restent donc en
   grille 2 × 2, avec un axe commun entre libellés et valeurs. */
body.surface-admin .adm-carnet{display:grid;min-width:0;}
body.surface-admin .adm-carnet-section{
  min-width:0;margin:0;padding:0 0 var(--pr-5);border-bottom:1px solid var(--filet-leger);
}
body.surface-admin .adm-carnet-section + .adm-carnet-section{padding-top:var(--pr-5);}
body.surface-admin .adm-carnet h3{
  margin:0 0 var(--pr-3);font-family:var(--sans);font-size:17px;line-height:1.3;font-weight:650;
  letter-spacing:0;text-transform:none;color:var(--texte);text-wrap:balance;
}
body.surface-admin .adm-carnet-resume{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin:0;
  border:1px solid var(--filet-leger);border-radius:var(--pa-radius-sm);background:var(--voile);
  overflow:hidden;
}
body.surface-admin .adm-carnet-indicateur{
  display:flex;min-width:0;min-height:86px;flex-direction:column;justify-content:space-between;
  gap:var(--pr-1);padding:var(--pr-3) var(--pr-4);
}
body.surface-admin .adm-carnet-indicateur:nth-child(even){border-left:1px solid var(--filet-leger);}
body.surface-admin .adm-carnet-indicateur:nth-child(n+3){border-top:1px solid var(--filet-leger);}
body.surface-admin .adm-carnet-indicateur dt{
  min-width:0;color:var(--doux);font-size:var(--pt-sm);line-height:1.35;text-wrap:pretty;
}
body.surface-admin .adm-carnet-indicateur dd{
  margin:0;color:var(--texte);font-size:20px;line-height:1.15;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* Règlement reçu : le parcours courant tient sur trois champs. Tarif, montant différent et
   libellé restent accessibles sans prendre toute la hauteur du tiroir. */
body.surface-admin .adm-reglement__entete{
  display:flex;align-items:center;justify-content:space-between;gap:var(--pr-3);margin-bottom:var(--pr-3);
}
body.surface-admin .adm-reglement__entete h3{margin:0;}
body.surface-admin .adm-tarif-compact{display:flex;align-items:center;gap:var(--pr-1);color:var(--doux);font-size:var(--pt-sm);}
body.surface-admin .adm-tarif-compact strong{color:var(--texte);font-variant-numeric:tabular-nums;white-space:nowrap;}
body.surface-admin .adm-tarif-compact details{position:relative;}
body.surface-admin .adm-tarif-compact summary,
body.surface-admin .adm-seance-actions summary{
  display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid transparent;
  border-radius:var(--pa-radius-sm);cursor:pointer;color:var(--doux);list-style:none;
}
body.surface-admin .adm-tarif-compact summary::-webkit-details-marker,
body.surface-admin .adm-seance-actions summary::-webkit-details-marker,
body.surface-admin .adm-legende-etats summary::-webkit-details-marker{display:none;}
body.surface-admin .adm-tarif-compact summary:hover,
body.surface-admin .adm-seance-actions summary:hover{background:var(--voile);border-color:var(--filet-leger);color:var(--texte);}
body.surface-admin .adm-tarif-compact summary:focus-visible,
body.surface-admin .adm-seance-actions summary:focus-visible,
body.surface-admin .adm-legende-etats summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
body.surface-admin .adm-tarif-compact summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
body.surface-admin .adm-tarif-compact__form{
  position:absolute;z-index:8;top:calc(100% + var(--pr-1));right:0;width:min(280px,70vw);margin:0;
  padding:var(--pr-3);border:1px solid var(--bordure);border-radius:var(--pa-radius-sm);
  background:var(--carte);box-shadow:var(--ds-ombre-carte);
}
body.surface-admin .adm-tarif-compact__form input{width:100%;margin-top:var(--pr-1);}
body.surface-admin .adm-tarif-compact__form button{margin-top:var(--pr-2);}
body.surface-admin .adm-reglement__resume{
  margin:0;padding:var(--pr-3) var(--pr-4);border-radius:var(--pa-radius-sm);background:var(--voile);
  color:var(--texte);font-variant-numeric:tabular-nums;
}
body.surface-admin .adm-reglement{margin:0;}
body.surface-admin .adm-reglement__cible{display:grid;gap:2px;margin:0 0 var(--pr-3);color:var(--doux);font-size:var(--pt-sm);}
body.surface-admin .adm-reglement__cible strong{color:var(--texte);}
body.surface-admin .adm-reglement__essentiel{
  display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);gap:var(--pr-3);
  align-items:end;margin:var(--pr-4) 0 var(--pr-3);
}
body.surface-admin .adm-reglement__essentiel label{min-width:0;margin:0;}
body.surface-admin .adm-reglement__essentiel input,
body.surface-admin .adm-reglement__essentiel select{
  width:100%;margin-top:var(--pr-1);font-variant-numeric:tabular-nums;
}
body.surface-admin .adm-reglement__quantite-fixe{
  display:flex;align-items:center;width:100%;min-height:42px;margin-top:var(--pr-1);padding:0 var(--pr-3);
  border:1px solid var(--bordure);border-radius:var(--pa-radius-sm);background:var(--voile);
  color:var(--texte);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
}
body.surface-admin .adm-reglement__avance{margin-top:var(--pr-3);border-top:1px solid var(--filet-leger);}
body.surface-admin .adm-reglement__avance>summary{
  width:max-content;max-width:100%;padding:var(--pr-3) 0;cursor:pointer;color:var(--cacao);
  font-size:var(--pt-sm);font-weight:600;
}
body.surface-admin .adm-reglement__avance>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
body.surface-admin .adm-reglement__action{margin:var(--pr-3) 0 0;}
body.surface-admin .adm-reglement-historique{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--pr-3);
  padding:var(--pr-3) 0;
}
body.surface-admin .adm-reglement-historique>span{min-width:0;overflow-wrap:anywhere;}
body.surface-admin .adm-reglement-historique form{margin:0;}

/* La formule et les reprises historiques sont disponibles sans concurrencer l'encaissement,
   geste principal de l'écran. La zone s'ouvre automatiquement lorsqu'un ancien crédit attend. */
body.surface-admin .adm-carnet-outils{min-width:0;padding:var(--pr-4) 0 0;}
body.surface-admin .adm-carnet-outils>summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--pr-3);min-height:44px;
  align-content:center;padding:0 var(--pr-1);cursor:pointer;list-style:none;
  color:var(--texte);font-weight:650;
}
body.surface-admin .adm-carnet-outils>summary::-webkit-details-marker{display:none;}
body.surface-admin .adm-carnet-outils>summary span{grid-column:1;}
body.surface-admin .adm-carnet-outils>summary span:last-child{
  color:var(--doux);font-size:var(--pt-sm);font-weight:400;
}
body.surface-admin .adm-carnet-outils>summary::after{
  content:"";grid-column:2;grid-row:1 / span 2;align-self:center;width:9px;height:9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform var(--pa-duree) var(--pa-courbe);
}
body.surface-admin .adm-carnet-outils[open]>summary::after{transform:rotate(225deg);}
body.surface-admin .adm-carnet-outils>summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
body.surface-admin .adm-carnet-outils__contenu{
  display:grid;gap:var(--pr-5);margin-top:var(--pr-3);padding-top:var(--pr-4);
  border-top:1px solid var(--filet-leger);
}
body.surface-admin .adm-carnet-outils__section{min-width:0;}
body.surface-admin .adm-carnet-outils__section h4{
  margin:0 0 var(--pr-2);font-size:var(--pt-md);line-height:1.35;font-weight:650;color:var(--texte);
}
body.surface-admin .adm-carnet-outils__section select{width:100%;margin-top:var(--pr-1);}

/* Suivi compact : l'état tient en deux lettres et sa légende est consultable avec souris,
   toucher ou clavier. Le menu d'actions ne dilate pas la ligne. */
body.surface-admin .adm-etat-entete{display:inline-flex;align-items:center;gap:var(--pr-1);}
body.surface-admin .adm-legende-etats{position:relative;display:inline-block;vertical-align:middle;}
body.surface-admin .adm-legende-etats summary{
  display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;
  color:var(--cacao);cursor:pointer;list-style:none;font:700 13px/1 var(--sans);
}
body.surface-admin .adm-legende-etats summary span{
  display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--contour);
  border-radius:50%;background:var(--carte);
}
body.surface-admin .adm-legende-etats summary:hover span{background:var(--voile);}
body.surface-admin .adm-legende-etats__bulle{
  position:absolute;z-index:10;top:calc(100% + var(--pr-1));left:0;display:none;width:230px;
  padding:var(--pr-3);border:1px solid var(--bordure);border-radius:var(--pa-radius-sm);
  background:var(--carte);box-shadow:var(--ds-ombre-carte);color:var(--texte);text-align:left;font-weight:400;
}
body.surface-admin .adm-legende-etats[open]>.adm-legende-etats__bulle,
body.surface-admin .adm-legende-etats:not([open]):not([data-echappe]):hover>.adm-legende-etats__bulle,
body.surface-admin .adm-legende-etats:not([open]):not([data-echappe]):focus-within>.adm-legende-etats__bulle{display:block;}
body.surface-admin .adm-legende-etats__bulle ul{display:grid;gap:5px;margin:var(--pr-2) 0 0;padding:0;list-style:none;}
body.surface-admin .adm-legende-etats__bulle strong{display:inline-block;min-width:28px;}
body.surface-admin .tableau-suivi td{font-variant-numeric:tabular-nums;vertical-align:middle;overflow:visible;}
body.surface-admin .adm-code-etat{
  display:inline-grid;place-items:center;min-width:30px;height:28px;padding:0 5px;border:1px solid var(--contour);
  border-radius:var(--pa-radius-sm);color:var(--texte);font-weight:700;text-decoration:none;
}
body.surface-admin .adm-seance-a-regler{font-weight:700;white-space:nowrap;}
body.surface-admin .adm-seance-actions{position:relative;margin-left:auto;}
body.surface-admin .adm-seance-actions summary svg{width:20px;height:20px;fill:currentColor;}
body.surface-admin .adm-seance-actions__menu{
  position:absolute;z-index:7;top:calc(100% + 2px);right:0;display:grid;gap:var(--pr-1);
  min-width:150px;padding:var(--pr-2);border:1px solid var(--bordure);
  border-radius:var(--pa-radius-sm);background:var(--carte);box-shadow:var(--ds-ombre-carte);
}
body.surface-admin .adm-seance-actions__menu form{margin:0;}
body.surface-admin .adm-seance-actions__menu button{width:100%;white-space:nowrap;}

/* --- Onglets internes du tiroir de dossier ------------------------------------------------ */
body.surface-admin .panneau__onglets{display:flex;gap:var(--pr-5);margin:0 0 var(--pr-4);border-bottom:1px solid var(--filet-leger);}
body.surface-admin .panneau__onglet{
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin-bottom:-1px;
  border-bottom:2px solid transparent;color:var(--doux);font-size:var(--pt-md);font-weight:500;
  text-decoration:none;
}
body.surface-admin .panneau__onglet:hover{color:var(--texte);}
body.surface-admin .panneau__onglet--actif{color:var(--texte);font-weight:600;border-bottom-color:var(--vert-eau);}
body.surface-admin .panneau__entete{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--pr-3);
  margin:0 0 var(--pr-3);
}
body.surface-admin .panneau__identite{min-width:0;}
body.surface-admin .panneau__titre{margin:0;font-family:var(--serif);font-weight:400;font-size:var(--pt-3xl);line-height:1.1;color:var(--texte);}
body.surface-admin .panneau__meta{margin:var(--pr-1) 0 0;font-size:var(--pt-md);color:var(--doux);overflow-wrap:anywhere;text-wrap:pretty;}
body.surface-admin .panneau__entete .panneau__fermer{margin:-6px -6px 0 0;}

/* ==========================================================================
   Aide contextuelle et documentation intégrée
   ========================================================================== */
body.surface-php .aide-contextuelle,
body.surface-admin .aide-contextuelle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  width:48px;
  height:48px;
  border:1px solid var(--cacao-clair);
  border-radius:10px;
  background:var(--blanc);
  color:var(--cacao);
  font-family:Inter,Helvetica Neue,Arial,sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  box-shadow:0 1px 3px rgba(40,34,30,.07);
  transition-property:background-color,color,box-shadow,scale;
  transition-duration:150ms;
  transition-timing-function:ease-out;
}
body.surface-php .aide-contextuelle:hover,
body.surface-admin .aide-contextuelle:hover{
  background:var(--celadon);
  color:var(--vert-eau-fonce);
  box-shadow:0 3px 10px rgba(40,34,30,.1);
}
body.surface-php .aide-contextuelle:active,
body.surface-admin .aide-contextuelle:active{scale:.96;}
body.surface-php .aide-contextuelle:focus-visible,
body.surface-admin .aide-contextuelle:focus-visible{
  outline:2px solid var(--vert-eau);
  outline-offset:2px;
}
body.surface-php .site-header__cta{gap:10px;}
body.surface-admin .entete-section-admin{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}
body.surface-admin .entete-section-admin h1{margin:0;}
body.surface-admin .entete-section-admin .aide-contextuelle{flex-basis:48px;width:48px;height:48px;}
body.surface-admin .aide-contextuelle--admin-connexion,
body.surface-admin .aide-contextuelle--admin-blog{
  position:absolute;
  z-index:5;
  top:24px;
  right:24px;
}

body.surface-php .aide-page{
  width:min(1180px,calc(100% - 40px));
  padding-block:40px 72px;
}
body.surface-php .aide-page__barre{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
  color:var(--encre-douce);
  font-size:14px;
}
body.surface-php .aide-page__grille{
  display:grid;
  grid-template-columns:minmax(210px,280px) minmax(0,1fr);
  gap:32px;
  align-items:start;
}
body.surface-php .aide-sommaire{
  position:sticky;
  top:24px;
  overflow:hidden;
  border:1px solid var(--celadon-fonce);
  border-radius:16px;
  background:var(--blanc);
  box-shadow:0 1px 3px rgba(40,34,30,.07);
}
body.surface-php .aide-sommaire__titre{
  margin:0;
  padding:16px 18px 10px;
  color:var(--encre-douce);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.surface-php .aide-sommaire a{
  display:block;
  padding:12px 18px;
  border-top:1px solid var(--celadon-fonce);
  color:var(--cacao);
  font-size:14px;
  line-height:1.35;
  text-decoration:none;
  text-wrap:pretty;
}
body.surface-php .aide-sommaire a:hover{background:var(--creme);}
body.surface-php .aide-sommaire a[aria-current="page"]{
  background:var(--celadon);
  color:var(--vert-eau-fonce);
  font-weight:700;
}
body.surface-php .aide-article,
body.surface-admin .aide-article{
  min-width:0;
  padding:clamp(24px,4vw,48px);
  border:1px solid var(--celadon-fonce);
  border-radius:16px;
  background:var(--blanc);
  box-shadow:0 1px 3px rgba(40,34,30,.07);
}
body.surface-php .aide-article h1,
body.surface-php .aide-article h2,
body.surface-php .aide-article h3,
body.surface-admin .aide-article h1,
body.surface-admin .aide-article h2,
body.surface-admin .aide-article h3{text-wrap:balance;}
body.surface-php .aide-article h1,
body.surface-admin .aide-article h1{margin:0 0 24px;}
body.surface-php .aide-article__audience,
body.surface-admin .aide-article__audience{
  margin:0 0 8px;
  color:var(--vert-eau-fonce);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
body.surface-php .aide-article__texte,
body.surface-admin .aide-article__texte{max-width:74ch;}
body.surface-php .aide-article__texte h2,
body.surface-admin .aide-article__texte h2{margin:34px 0 12px;font-size:26px;}
body.surface-php .aide-article__texte h3,
body.surface-admin .aide-article__texte h3{margin:26px 0 10px;font-size:20px;}
body.surface-php .aide-article__texte p,
body.surface-php .aide-article__texte li,
body.surface-admin .aide-article__texte p,
body.surface-admin .aide-article__texte li{line-height:1.7;text-wrap:pretty;}
body.surface-php .aide-article__texte ul,
body.surface-php .aide-article__texte ol,
body.surface-admin .aide-article__texte ul,
body.surface-admin .aide-article__texte ol{padding-left:24px;}
body.surface-php .aide-article__fin{
  margin:36px 0 0;
  padding-top:20px;
  border-top:1px solid var(--celadon-fonce);
  color:var(--encre-douce);
  font-size:14px;
}
body.surface-php .aide-figure,
body.surface-admin .aide-figure{margin:0 0 32px;}
body.surface-php .aide-figure img,
body.surface-admin .aide-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  outline:1px solid rgba(0,0,0,.1);
  outline-offset:-1px;
}
body.surface-php .aide-figure figcaption,
body.surface-admin .aide-figure figcaption{
  margin-top:8px;
  color:var(--encre-douce);
  font-size:13px;
  line-height:1.5;
  text-wrap:pretty;
}
body.surface-admin .aide-admin-publique{
  width:min(760px,calc(100% - 40px));
  margin:64px auto;
}
body.surface-admin .aide-admin-publique>.aide-article{margin-top:20px;}

body.surface-admin .aide-admin-outils{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:20px;
  padding:14px 16px;
  border:1px solid var(--bordure);
  border-radius:10px;
  background:var(--fond-carte);
}
body.surface-admin .aide-admin-outils>div{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-right:auto;
}
body.surface-admin .aide-admin-outils strong{
  color:var(--cacao);
  font-family:Lora,Georgia,serif;
  font-size:24px;
  font-variant-numeric:tabular-nums;
}
body.surface-admin .aide-admin-outils span{color:var(--texte-secondaire);font-size:13px;}
body.surface-admin .aide-admin-outils form{margin:0;}
body.surface-admin .aide-admin-grille{
  display:grid;
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  gap:20px;
  align-items:start;
}
body.surface-admin .aide-admin-liste{
  overflow:hidden;
  border:1px solid var(--bordure);
  border-radius:10px;
  background:var(--fond-carte);
}
body.surface-admin .aide-recherche{
  display:grid;
  gap:8px;
  padding:14px;
  border-bottom:1px solid var(--bordure);
}
body.surface-admin .aide-recherche label{margin:0;}
body.surface-admin .aide-admin-liste nav{
  display:block;
  max-height:calc(100vh - 330px);
  overflow-y:auto;
}
body.surface-admin .aide-admin-liste nav>a{
  display:block;
  padding:12px 14px;
  border-bottom:1px solid var(--bordure);
  color:var(--cacao);
  text-decoration:none;
}
body.surface-admin .aide-admin-liste nav>a:hover{background:var(--fond);}
body.surface-admin .aide-admin-liste nav>a[aria-current="page"]{
  background:var(--celadon);
  color:var(--vert-eau-fonce);
}
body.surface-admin .aide-admin-liste nav>a span{display:block;font-weight:700;text-wrap:pretty;}
body.surface-admin .aide-admin-liste nav>a small{
  display:block;
  margin-top:3px;
  color:var(--texte-secondaire);
  font-size:11px;
}
body.surface-admin .aide-admin-lecture{min-width:0;}
body.surface-admin .aide-article--admin{padding:28px;}
body.surface-admin .aide-editeur,
body.surface-admin .aide-vide{
  padding:26px;
  border:1px solid var(--bordure);
  border-radius:10px;
  background:var(--fond-carte);
}
body.surface-admin .aide-editeur__entete{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
body.surface-admin .aide-editeur__entete h2{margin:0;}
body.surface-admin .aide-formulaire,
body.surface-admin .aide-capture-form{display:grid;gap:10px;}
body.surface-admin .aide-formulaire__ligne{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
body.surface-admin .aide-formulaire__ligne>div{display:grid;gap:6px;}
body.surface-admin .aide-formulaire textarea{
  min-height:420px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:13px;
  line-height:1.55;
}
body.surface-admin .aide-formulaire__actions{display:flex;justify-content:flex-end;margin-top:6px;}
body.surface-admin .aide-capture-form{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--bordure);
}
body.surface-admin .aide-capture-form h3{margin:0;}
body.surface-admin .aide-capture-supprimer{margin-top:14px;}
body.surface-admin .aide-revisions{margin-top:28px;padding-top:18px;border-top:1px solid var(--bordure);}
body.surface-admin .aide-revisions summary{cursor:pointer;font-weight:700;}
body.surface-admin .aide-revisions li{font-variant-numeric:tabular-nums;}
body.surface-admin .msg-info{border-color:var(--celadon-fonce);background:var(--celadon);}

@media (max-width:900px){
  body.surface-php .aide-page__grille{grid-template-columns:1fr;}
  body.surface-php .aide-sommaire{position:static;}
  body.surface-php .aide-sommaire nav{display:grid;grid-template-columns:1fr 1fr;}
  body.surface-admin .aide-admin-grille{grid-template-columns:1fr;}
  /* EXCEPTION ASSUMÉE à la règle « aucun cadre à défilement interne » (AGENTS.md, patron des
     surfaces denses) : sur une colonne, la liste des guides fait plus de 1100 px. La laisser
     couler obligerait à franchir dix-sept titres avant d'atteindre le guide qu'on vient
     d'ouvrir — pire que le cadre. Relevé par l'audit UI du 26/07/2026 ; un accordéon serait la
     vraie réponse, c'est un choix de conception à arbitrer. */
  body.surface-admin .aide-admin-liste nav{max-height:300px;}
}
@media (max-width:600px){
  body.surface-php .aide-page{width:min(100% - 24px,1180px);padding-block:24px 48px;}
  body.surface-php .aide-page__barre{align-items:flex-start;flex-direction:column;gap:8px;}
  body.surface-php .aide-sommaire nav{grid-template-columns:1fr;}
  body.surface-php .aide-article,
  body.surface-admin .aide-article{padding:22px 18px;}
  body.surface-php .aide-article__texte h2,
  body.surface-admin .aide-article__texte h2{font-size:23px;}
  body.surface-admin .aide-contextuelle--admin-connexion,
  body.surface-admin .aide-contextuelle--admin-blog{top:12px;right:12px;}
  body.surface-admin .entete-section-admin{align-items:center;}
  body.surface-admin .aide-admin-outils{align-items:stretch;flex-direction:column;}
  body.surface-admin .aide-admin-outils>div{margin-right:0;}
  body.surface-admin .aide-formulaire__ligne{grid-template-columns:1fr;}
  body.surface-admin .aide-editeur__entete{align-items:stretch;flex-direction:column;}
}
/* La feuille de travail est CRÈME : ce sont les cartes qui sont blanches et qui flottent
   au-dessus. Un aplat blanc plein écran écrasait la hiérarchie — tout y avait le même poids. */
body.surface-admin .contenu-section{flex:1;min-width:0;background:var(--fond);padding:0;max-width:none;}
body.surface-admin .contenu-section h1{margin-top:0;}
/* Corps d'une section, sous la barre de recherche collante. */
body.surface-admin .adm-corps{padding:var(--pr-5) var(--pr-6) var(--pr-7);max-width:1500px;}
body.surface-admin .adm-duo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--pr-5);align-items:start;}
body.surface-admin .adm-colonne{min-width:0;}
/* Ligne « libellé / valeur » d'une carte de synthèse (chiffres du mois, boîte mail). */
body.surface-admin .adm-stat{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pr-3);padding:var(--pr-3) var(--pr-4);border-top:1px solid var(--filet-leger);}
body.surface-admin .adm-stat:first-child{border-top:0;}
body.surface-admin .adm-stat__libelle{font-size:var(--pt-md);color:var(--doux);}
body.surface-admin .adm-stat__valeur{font-size:17px;font-weight:700;color:var(--texte);font-variant-numeric:tabular-nums;}
body.surface-admin .adm-stat__valeur--signal{color:var(--ds-brique-texte);}
/* En-tête et pied d'une carte de synthèse : une étiquette de registre et son repère. */
body.surface-admin .adm-carte-entete{display:flex;align-items:center;justify-content:space-between;gap:var(--pr-3);padding:var(--pr-3) var(--pr-4);border-bottom:1px solid var(--filet-leger);}
body.surface-admin .adm-carte-entete p{margin:0;font-size:var(--pt-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);}
body.surface-admin .adm-carte-entete span{font-size:var(--pt-sm);color:var(--doux);}
body.surface-admin .adm-carte-entete .badge{font-size:14px;line-height:1.2;color:#fff;}
body.surface-admin .adm-carte-pied{padding:var(--pr-3) var(--pr-4);border-top:1px solid var(--filet-leger);}
body.surface-admin .adm-carte-bloc{padding:var(--pr-3) var(--pr-4);border-top:1px solid var(--filet-leger);}
body.surface-admin .adm-carte-bloc:first-child{border-top:0;}
body.surface-admin .adm-carte-bloc__titre{margin:0;font-size:var(--pt-lg);font-weight:600;color:var(--texte);}
body.surface-admin .adm-carte-bloc__meta{margin:1px 0 0;font-size:var(--pt-md);color:var(--doux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Tableau de bord Accueil */
body.surface-admin .accueil-date{font-size:var(--pt-xs);font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--doux);margin:0 0 var(--pr-1);}
body.surface-admin .kpi-bande{display:grid;grid-template-columns:repeat(4,1fr);margin:0;}
body.surface-admin .kpi{padding:var(--pr-2) var(--pr-5);border-left:1px solid var(--filet-leger);}
body.surface-admin .kpi:first-child{padding-left:0;border-left:none;}
body.surface-admin .kpi-valeur{font-family:var(--serif);font-size:32px;color:var(--texte);line-height:1.15;font-variant-numeric:tabular-nums;margin:0;}
body.surface-admin .kpi-valeur small{font-size:16px;color:var(--doux);font-family:var(--sans);}
body.surface-admin .kpi-libelle{margin:var(--pr-1) 0 0;font-size:var(--pt-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--doux);}
body.surface-admin .rappel-echeance{font-size:var(--pt-sm);color:var(--doux);margin:var(--pr-3) 0 0;}
/* Stats : tableau contraint + cartes latérales (composition « Carnet »).
   DÉFAUT CORRIGÉ le 26/07/2026 (audit UI) : ces cartes s'appelaient `.panneau` — le nom pris
   plus haut par le TIROIR de fiche élève. Même sélecteur, deux composants : la règle du
   tiroir gagnait ici (`position:fixed` + `transform:translateX(105%)`), donc « Échéances » et
   « Réglages du calcul » sortaient de l'écran — le tarif et la durée par défaut devenaient
   injoignables depuis l'interface. En sens inverse, la règle ci-dessous étant la DERNIÈRE du
   fichier, le tiroir héritait de son cadre arrondi, de son fond, d'un padding de 16 px au lieu
   de 56 px en bas, et d'un `margin-bottom:18px` qui raccourcit un élément `top:0;bottom:0`.
   Un nom par composant : le contrôle `T3` de `tests/theme.sh` refuse désormais ce doublon. */
body.surface-admin .stats-duo{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:var(--pr-5);align-items:start;}
body.surface-admin .carte-laterale{border:1px solid var(--bordure);border-radius:var(--pa-radius-carte);padding:var(--pr-5);margin:0 0 var(--pr-5);background:var(--carte);box-shadow:var(--ds-ombre-carte);}
body.surface-admin .carte-laterale h3{margin-bottom:var(--pr-3);}
body.surface-admin .stats-mois{display:grid;gap:2px;justify-items:start;}
body.surface-admin .stats-mois-etat{color:var(--doux);font-size:var(--pt-sm);font-weight:400;white-space:nowrap;}
/* Doigt plutôt que souris : sous 900 px, la barre latérale s'est déjà couchée et l'admin se
   consulte au pouce. Les commandes passent donc de 38 à 44 px — le seuil sous lequel une cible
   se rate. Constat de l'audit UI du 26/07/2026 : les 17 écrans de l'administration étaient
   concernés, y compris les gestes du quotidien « −1 séance » et « +1 paiement ». Le desktop ne
   bouge pas : la gamme dense reste celle voulue (README §8). Une seule règle, dans la couche
   partagée, plutôt qu'une correction par écran. */
@media (max-width:900px){
  body.surface-admin button,
  body.surface-admin .bouton{min-height:44px;}
  body.surface-admin button.rapide,
  body.surface-admin a.rapide{min-height:44px;padding:4px 14px;}
  body.surface-admin .disposition{flex-direction:column;min-height:0;}
  body.surface-admin .menu-lateral{position:static;height:auto;width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;padding:10px 12px;}
  body.surface-admin .menu-marque{flex:1 1 100%;margin-bottom:6px;}
  body.surface-admin .menu-deconnexion{margin:0;padding:0;border:none;}
  body.surface-admin .menu-deconnexion button{width:auto;}
  body.surface-admin .contenu-section{padding:22px 16px 48px;}
  body.surface-admin .kpi-bande{grid-template-columns:1fr 1fr;gap:14px 0;}
  body.surface-admin .kpi:nth-child(odd){padding-left:0;border-left:none;}
  body.surface-admin .stats-duo{grid-template-columns:1fr;}
}
/* Bascule en mode fiche montée à 760px : entre 681 et ~740px, les min-content des tables
   Soldes/Historique dépassaient encore la place disponible (revue 2026-07-20). */
@media (max-width:760px){
  body.surface-admin .grille-2{grid-template-columns:1fr;}
  body.surface-admin table,
body.surface-admin thead,
body.surface-admin tbody,
body.surface-admin tr,
body.surface-admin th,
body.surface-admin td{display:block;}
  body.surface-admin thead{display:none;}
  body.surface-admin table tr{border-bottom:2px solid var(--bordure);padding:10px 0;margin-bottom:4px;}
  body.surface-admin table td{border:none;padding:4px 0;white-space:normal;}
  body.surface-admin .table-clients .client-nom,
  body.surface-admin .table-clients .client-email,
  body.surface-admin .table-clients .client-solde,
  body.surface-admin .table-clients .client-mouvement{width:auto;white-space:normal;}
  body.surface-admin .section-entete-actions{align-items:stretch;}
  body.surface-admin .section-entete-actions .bouton{justify-content:center;width:100%;}
  body.surface-admin .dossier-document{align-items:flex-start;flex-direction:column;}
  body.surface-admin .grille-form{grid-template-columns:1fr;}
  body.surface-php .programme__seance--faite{grid-template-columns:1fr;}
  body.surface-php .programme__date{padding-left:34px;}
  body.surface-admin table td::before{content:attr(data-libelle);font-weight:600;color:var(--cacao);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;}
body.surface-admin tfoot td,
body.surface-admin tfoot th{border-top:none;display:block;}
}
@media (max-width:760px){
  body.surface-admin .adm-reglement__entete{align-items:flex-start;flex-direction:column;}
  body.surface-admin .adm-tarif-compact{width:100%;justify-content:space-between;}
  body.surface-admin .adm-tarif-compact summary,
  body.surface-admin .adm-seance-actions summary{width:44px;height:44px;}
  body.surface-admin .adm-tarif-compact__form{right:-2px;width:min(290px,calc(100vw - 64px));}

  /* Cette table reste une table à 375 px : trois colonnes courtes sont plus lisibles que
     trois pseudo-cartes répétant Date / État / Règlement pour chaque séance. */
  body.surface-admin table.tableau-suivi{display:table;width:100%;table-layout:fixed;}
  body.surface-admin .tableau-suivi thead{display:table-header-group;}
  body.surface-admin .tableau-suivi tbody{display:table-row-group;}
  body.surface-admin .tableau-suivi tr{display:table-row;border:0;padding:0;margin:0;}
  body.surface-admin .tableau-suivi th,
  body.surface-admin .tableau-suivi td{display:table-cell;padding:10px 5px;border-bottom:1px solid var(--filet-leger);white-space:nowrap;}
  body.surface-admin .tableau-suivi th:first-child{width:31%;}
  body.surface-admin .tableau-suivi th:nth-child(2){width:29%;}
  body.surface-admin .tableau-suivi th:nth-child(3){width:40%;}
  body.surface-admin .tableau-suivi td::before{display:none;content:none;}
  body.surface-admin .tableau-suivi .adm-etat-seance{flex-wrap:nowrap;gap:2px;}
  body.surface-admin .adm-legende-etats summary{width:44px;height:44px;}
  body.surface-admin .adm-legende-etats__bulle{
    left:50%;right:auto;width:min(230px,calc(100vw - 82px));transform:translateX(-50%);
  }
  body.surface-admin .adm-seance-actions__menu{right:-4px;}
}
@media (max-width:420px){
  body.surface-admin .adm-reglement__essentiel{grid-template-columns:1fr;align-items:stretch;}
  body.surface-admin .adm-reglement__action button{width:100%;}
  body.surface-admin .adm-reglement-historique{grid-template-columns:1fr;align-items:start;}
}
body.surface-admin textarea{resize:vertical;line-height:1.6;}
body.surface-admin .barre-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0 4px;}
body.surface-admin .badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;}
body.surface-admin .badge-publie{background:var(--vert-eau);}
body.surface-admin .badge-brouillon{background:#6E6759;} /* assombri : blanc ≥ 4,5:1 (revue) */
body.surface-admin .apercu{border:1px dashed var(--bordure);background:var(--fond);padding:16px;}
body.surface-admin .apercu :first-child{margin-top:0;}
body.surface-admin .apercu :last-child{margin-bottom:0;}
body.surface-admin form.inline{display:inline-block;}
body.surface-admin .retour{display:inline-block;margin-bottom:8px;color:var(--cacao);text-decoration:none;font-weight:600;}
body.surface-admin .retour:hover{text-decoration:underline;}

/* Utilitaires sans style inline. */
body.surface-public .u-align-self-start { align-self: flex-start; }
body.surface-public [hidden] { display: none !important; }
body.surface-php.surface-espace [hidden],
body.surface-admin [hidden] { display: none !important; }
body.surface-admin .u-carte-420 { max-width: 420px; }
body.surface-admin .u-mt-4 { margin-top: 4px; }
body.surface-admin .u-mt-10 { margin-top: 10px; }
body.surface-admin .u-mt-12 { margin-top: 12px; }
body.surface-admin .u-mt-14 { margin-top: 14px; }
body.surface-admin .u-mt-20 { margin-top: 20px; }
body.surface-admin .u-mt-32 { margin-top: 32px; }
body.surface-admin .u-mb-0 { margin-bottom: 0; }
body.surface-admin .u-mb-14 { margin-bottom: 14px; }
body.surface-admin .u-m-0 { margin: 0; }
body.surface-admin .u-filtre { margin: 10px 0 14px; }
body.surface-admin .u-form-mouvement { margin: 10px 0 0; }
body.surface-admin .u-champ-motif { min-width: 120px; }
body.surface-admin .u-champ-delta { width: 120px; }
body.surface-admin .u-etat-ok { color: #1F4433; font-weight: 600; }
body.surface-admin .u-etat-alerte { color: #7A2E1E; font-weight: 600; }
body.surface-admin .u-actions-courrier { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
body.surface-admin .u-kpi-compact { margin: 0 0 6px; }
/* Programme d'un élève affiché dans le tiroir : ces classes venaient du socle des espaces
   connectés, qui a changé de vocabulaire le 31/07/2026. L'administration garde les siennes,
   déclarées ici — une classe portée par le balisage sans règle ne casse rien, elle EFFACE. */
body.surface-admin .fiche{border:1px solid var(--bordure);border-radius:var(--pa-radius);
  padding:var(--pr-4);margin:0 0 var(--pr-3);background:var(--voile);}
body.surface-admin .fiche__titre{margin:0 0 var(--pr-1);font-size:var(--pt-lg);font-weight:600;color:var(--texte);}
body.surface-admin .fiche__date{margin:0 0 var(--pr-2);font-size:var(--pt-sm);color:var(--doux);}
body.surface-admin .fiche__corps{font-size:var(--pt-md);line-height:1.6;color:var(--doux);}
body.surface-admin .fiche__corps p{margin:0 0 var(--pr-2);}
body.surface-admin .mt-form{margin-top:var(--pr-4);}
/* Libellé réservé aux lecteurs d'écran : présent dans l'arbre d'accessibilité, hors de
   l'écran. Jamais display:none — un lecteur d'écran l'ignorerait aussi. */
body.surface-admin .sh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
body.surface-systeme { margin: 0; padding: 48px; background: var(--creme); color: var(--encre); font-family: var(--font-sans); }
body.surface-systeme h1 { color: var(--cacao); }
@media (max-width: 640px) { body.surface-systeme { padding: 24px; } }

/* Garanties transversales aux quatre surfaces. */
html { scroll-behavior: smooth; }
*,
*::before,
*::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}