/* =====================================================================
   OhMyBuddy — Réservation
   Feuille de style unique.

   Tout le style vit ici, jamais en ligne dans un gabarit : la politique
   de sécurité de contenu est en 'self' strict et refuse les balises
   <style> en ligne (cf. SecurityHeadersSubscriber).

   ---------------------------------------------------------------------
   CE FICHIER NE CONTIENT AUCUNE COULEUR CHOISIE — il n'en lit que des
   variables. Les valeurs viennent de theme.css, engendré par
   ThemeService à partir du thème en service, et chargé APRÈS celui-ci.

   La séparation est nette et vaut d'être tenue : ici la STRUCTURE, qui
   ne s'importe pas et qu'un thème ne peut donc pas casser ; là-bas les
   VALEURS, qu'un administrateur remplace sans toucher au code.

   Le bloc :root ci-dessous n'est pas le thème : c'est le filet. Si
   theme.css manquait — storage vidé, droits perdus — la page resterait
   lisible au lieu de s'afficher en noir sur noir. Ses valeurs sont
   celles du thème « ardoise » ; un essai vérifie qu'aucune variable
   utilisée plus bas n'y manque.
   ===================================================================== */

:root {
    --paper:      #f1f4f3;
    --card:       #ffffff;
    --ink:        #0f1a1b;
    --ink-2:      #3b4c4d;
    --ink-3:      #6d7e7e;
    --line:       #d4dddb;
    --line-2:     #e6eceb;
    --deep:       #0f4c48;
    --deep-soft:  #e1eeec;
    --on-deep:    #ffffff;
    --accent:     #b4471f;
    --crit:       #a0241d;
    --crit-soft:  #fae2e0;
    --ok:         #14614a;
    --ok-soft:    #ddefe7;
    --warn:       #7f5c0c;
    --warn-soft:  #f8efd6;

    --header-bg:   transparent;
    --header-ink:  #0f1a1b;
    --header-line: #d4dddb;
    --footer-bg:   transparent;
    --footer-ink:  #6d7e7e;

    --btn-bg:       #0f4c48;
    --btn-ink:      #ffffff;
    --btn-line:     #0f4c48;
    --btn-case:     none;
    --btn-weight:   600;
    --btn-tracking: 0;

    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:  ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

    --display-weight:   400;
    --display-tracking: -0.015em;
    --display-case:     none;
    --base-size:        16px;

    --radius:       4px;
    --radius-field: 3px;
    --radius-btn:   3px;
    --shadow:       none;
}

/* TROIS ÉTATS, PAS DEUX — même structure que la feuille engendrée.
   Sans attribut, l'appareil décide ; « clair » et « sombre » l'emportent
   sur lui. Le « :not » du premier bloc est ce qui permet à un visiteur
   d'imposer le clair sur un téléphone réglé en sombre : sans lui, son
   choix n'aurait aucun effet là où il compte le plus. */
@media (prefers-color-scheme: dark) {
    :root:not([data-mode="clair"]) {
        --paper:     #0b1313;
        --card:      #111c1c;
        --ink:       #e5eeec;
        --ink-2:     #b0c1bf;
        --ink-3:     #7f9391;
        --line:      #22322f;
        --line-2:    #1a2726;
        --deep:      #48c1b2;
        --deep-soft: #102e2c;
        --on-deep:   #071312;
        --accent:    #e5825a;
        --crit:      #f0837b;
        --crit-soft: #2d1513;
        --ok:        #5ec69d;
        --ok-soft:   #0f271f;
        --warn:      #dcad4c;
        --warn-soft: #2a2110;

        --header-ink:  #e5eeec;
        --header-line: #22322f;
        --footer-ink:  #7f9391;

        --btn-bg:   #48c1b2;
        --btn-ink:  #071312;
        --btn-line: #48c1b2;
    }
}

/* Le sombre demandé explicitement, quoi que dise l'appareil. Mêmes
   valeurs que ci-dessus : ce sont deux conditions pour un seul jeu de
   couleurs, et elles doivent le rester. */
:root[data-mode="sombre"] {
    --paper:     #0b1313;
    --card:      #111c1c;
    --ink:       #e5eeec;
    --ink-2:     #b0c1bf;
    --ink-3:     #7f9391;
    --line:      #22322f;
    --line-2:    #1a2726;
    --deep:      #48c1b2;
    --deep-soft: #102e2c;
    --on-deep:   #071312;
    --accent:    #e5825a;
    --crit:      #f0837b;
    --crit-soft: #2d1513;
    --ok:        #5ec69d;
    --ok-soft:   #0f271f;
    --warn:      #dcad4c;
    --warn-soft: #2a2110;

    --header-ink:  #e5eeec;
    --header-line: #22322f;
    --footer-ink:  #7f9391;

    --btn-bg:   #48c1b2;
    --btn-ink:  #071312;
    --btn-line: #48c1b2;
}

/* Les contrôles natifs — cases à cocher, listes déroulantes, calendriers
   — suivent ce réglage plutôt que celui du système. Sans cette ligne, un
   visiteur qui impose le sombre garde des cases à cocher blanches, et
   qui impose le clair garde un sélecteur de date noir. */
:root { color-scheme: light; }
:root[data-mode="sombre"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
    :root:not([data-mode="clair"]) { color-scheme: dark; }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font: var(--base-size)/1.6 var(--sans);
    -webkit-text-size-adjust: 100%;
}

a { color: var(--deep); text-underline-offset: 2px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Structure ----------

   Le bandeau du haut et celui du bas tiennent toute la largeur, leur
   contenu reste dans la colonne de lecture. Sans cette séparation, un
   thème qui donne un fond au bandeau obtiendrait un rectangle flottant
   au milieu de la page au lieu d'une bande. */

.bande {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 20px;
}

.page {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 20px 64px;
}

.masthead {
    background: var(--header-bg);
    color: var(--header-ink);
    border-bottom: 1px solid var(--header-line);
    margin-bottom: 32px;
}

.masthead .bande {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 18px;
    padding-bottom: 18px;
}

.brand {
    font: var(--display-weight) 1.25rem/1 var(--serif);
    letter-spacing: var(--display-tracking);
    color: var(--header-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.brand span { color: var(--deep); font-style: italic; }

/* Le logo téléversé remplace le mot, il ne s'y ajoute pas. Sa hauteur
   est choisie dans l'administration parmi trois valeurs : une image de
   marque a des proportions qu'on ne connaît pas d'avance, et un champ
   libre en pixels donnerait surtout l'occasion d'écrire 400. */
.brand-logo { display: block; width: auto; }
.brand-logo--petit { height: 30px; }
.brand-logo--moyen { height: 40px; }
.brand-logo--grand { height: 56px; }

.nav { display: flex; gap: 18px; font-size: 14px; }
.masthead .nav a { color: var(--header-ink); }

/* ---------- Blocs ---------- */

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
    max-width: 34rem;
    margin: 0 auto;
}
.panel--wide { max-width: 46rem; }

/* Deux panneaux à la suite sont deux sujets distincts — les réglages et
   la remise à zéro, par exemple. Sans cet écart ils forment un seul bloc
   à bord continu, et l'on ne voit plus où l'un finit. */
.panel + .panel { margin-top: 28px; }

h1 {
    font: var(--display-weight) clamp(1.5rem, 4vw, 2rem)/1.15 var(--serif);
    letter-spacing: var(--display-tracking);
    text-transform: var(--display-case);
    margin: 0 0 12px;
    text-wrap: balance;
}

h2 {
    font: 700 .95rem/1.3 var(--sans);
    margin: 28px 0 12px;
    color: var(--ink);
}

p { margin: 0 0 14px; max-width: 62ch; }
.lede { color: var(--ink-2); }
.muted { color: var(--ink-3); font-size: 14px; }

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

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field-row { display: grid; gap: 18px; grid-template-columns: 1fr; }

/* Case à cocher : l'intitulé passe à droite et reprend un poids normal.
   Une phrase d'engagement en gras se lit moins bien qu'en texte courant,
   et c'est ici la phrase entière qui compte, pas une étiquette. */
.field--check label {
    display: flex; align-items: flex-start; gap: 10px;
    font-weight: 400; line-height: 1.5;
}
.field--check input[type="checkbox"] { margin-top: 3px; flex: none; }
@media (min-width: 34rem) {
    .field-row { grid-template-columns: 1fr 1fr; }
    .field-row--postal { grid-template-columns: 10rem 1fr; }
}

label { font-size: 14px; font-weight: 600; }

/* TOUS LES CHAMPS, PAS SEULEMENT CEUX DE TEXTE. La liste s'arrêtait à
   « text, email, password, tel » : les trente-sept champs numériques, les
   dates et les zones de texte du back-office gardaient l'apparence par
   défaut du navigateur, au milieu d'un formulaire qui n'en avait pas.
   Cela ne casse rien et ne se voit que sur la page — donc jamais dans un
   essai. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="file"],
textarea,
select {
    font: inherit;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--card);
    color: var(--ink);
    width: 100%;
}

textarea { line-height: 1.55; resize: vertical; }

/* Un compteur n'a pas besoin de toute la largeur : à côté d'un intitulé
   court, un champ pleine largeur laisse croire qu'on attend une phrase. */
.field--short { max-width: 8rem; }

input[aria-invalid="true"] { border-color: var(--crit); }

.hint { font-size: 13px; color: var(--ink-3); }

.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.check input { margin-top: 4px; flex: none; }
.check label { font-weight: 400; font-size: 14px; }

.btn {
    font: var(--btn-weight) 15px/1 var(--sans);
    letter-spacing: var(--btn-tracking);
    text-transform: var(--btn-case);
    padding: 12px 22px;
    border: 1px solid var(--btn-line);
    border-radius: var(--radius-btn);
    background: var(--btn-bg);
    color: var(--btn-ink);
    cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--deep); border-color: var(--deep); }

/* Un bouton qui efface pour de bon ne doit pas ressembler aux autres.
   Il reste en retrait — contour et non aplat — parce qu'il n'est jamais
   l'action principale de l'écran : on ne vient pas sur une réservation
   pour la supprimer, on tombe dessus. */
.btn--danger { background: transparent; color: var(--crit); border-color: var(--crit); }

/* UNE MARGE EN BAS AUTANT QU'EN HAUT. Cette règle n'avait que
   « margin-top », ce qui suffisait tant que les actions terminaient un
   formulaire. Sur les listes, la barre d'outils OUVRE l'écran : le
   tableau, la carte de filtres ou les faits qui la suivent venaient se
   coller sous les boutons, sans rien pour séparer ce qu'on déclenche de
   ce qu'on lit. */
.actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 24px 0; }

/* ---------- Messages ---------- */

.alert {
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-3);
    border-radius: var(--radius-field);
    padding: 12px 16px;
    margin: 20px 0;
    font-size: 14.5px;
}

/* Les messages éphémères ouvrent le contenu principal : là, une marge
   haute les décollerait du titre de page pour rien. Partout ailleurs —
   un avertissement sous un bouton, une alerte entre deux tableaux — elle
   est nécessaire. */
.alert:first-child { margin-top: 0; }
.alert--error   { border-left-color: var(--crit); background: var(--crit-soft); color: var(--crit); }
.alert--success { border-left-color: var(--ok);   background: var(--ok-soft);   color: var(--ok); }
.alert--info    { border-left-color: var(--deep); background: var(--deep-soft); color: var(--deep); }
.alert--warn    { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn); }

.errors { list-style: none; margin: 4px 0 0; padding: 0; color: var(--crit); font-size: 13.5px; }

/* ---------- Tableaux, pastilles, tuiles ----------

   CES RÈGLES VIVAIENT DANS admin.css, ET LES PAGES CLIENTS NE LE
   CHARGENT PAS. La liste des factures, la page d'abonnement, l'agenda,
   la liste des réservations et l'accueil emploient « grid », « pill » et
   « tile » : sur ces cinq écrans, les tableaux sortaient sans filets ni
   en-têtes et les pastilles d'état sortaient en texte nu. Rien ne le
   signalait, puisque les mêmes classes sont impeccables dans
   l'administration — le seul endroit où on les regardait.

   admin.css garde ce qui n'existe que là-bas ; ce que les deux espaces
   partagent appartient à la feuille commune. */

table.grid { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--card); }
table.grid th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--deep);
    background: var(--deep-soft);
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
}
table.grid td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.grid tr:last-child td { border-bottom: 0; }

/* Un tableau plus large que l'écran défile DANS SON CADRE, et non en
   emportant la page avec lui. Ce conteneur enveloppe dix-neuf tableaux
   et n'était défini nulle part : sur un téléphone, ouvrir la liste des
   réservations décalait tout l'écran, menu et titre compris. */
.scroll { overflow-x: auto; margin-bottom: 24px; }

/* Liste des inscrits d'une activité. Sans puces : ce sont des personnes,
   pas des éléments d'énumération, et une colonne de prénoms se lit mieux
   aérée que serrée. */
.roster-names { list-style: none; margin: 12px 0 20px; padding: 0; }
.roster-names li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.roster-names li:last-child { border-bottom: 0; }
.roster-names .muted { font-size: 13px; margin-left: 6px; }

/* Une colonne de nombres se lit alignée à droite, et sur des chiffres de
   largeur constante — sans quoi les montants ne se comparent pas d'un
   coup d'œil, ce qui est pourtant la seule raison de les mettre en
   colonne. */
.nombre { text-align: right; font-variant-numeric: tabular-nums; }
table.grid th.nombre { text-align: right; }

.pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 2px; }
.pill--on  { background: var(--ok-soft);   color: var(--ok); }
.pill--off { background: var(--crit-soft); color: var(--crit); }

.tiles {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin: 0 0 32px;
}

.tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--deep);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tile--warn { border-left-color: var(--warn); }

.tile-label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.tile-value {
    font: var(--display-weight) 1.9rem/1 var(--serif);
    font-variant-numeric: tabular-nums;
}
.tile-note { font-size: 12.5px; color: var(--ink-3); }

/* ---------- Éléments d'appoint ----------

   Chacune de ces classes était posée dans les gabarits et absente des
   feuilles de style. Un nom de classe qui ne correspond à rien ne
   produit aucune erreur : le navigateur l'ignore, et le défaut ne se
   voit que sur la page. */

/* Même rôle que « hint », sous un champ ou dans un panneau. */
.help { font-size: 13px; color: var(--ink-3); }

/* Un compteur de places n'attend pas une phrase : pleine largeur, il
   laissait croire le contraire. */
.field--seats select { max-width: 14rem; }

/* Étiquette et champ dans un même « label » : le texte y est une phrase,
   pas un intitulé de formulaire, et le gras le faisait crier. */
.field--inline { font-weight: 400; }

/* Corps d'une page publiée, en relecture. Elle sortait en texte compact,
   sans respiration entre les paragraphes — c'est-à-dire pas du tout
   comme elle paraîtra en ligne, ce qui vide la relecture de son sens. */
.prose { line-height: 1.65; max-width: 62ch; }
.prose h2 { margin: 26px 0 10px; }
.prose h3 { font-size: 1rem; margin: 20px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose li { margin-bottom: 4px; }
.prose blockquote {
    margin: 0 0 14px;
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--line);
    color: var(--ink-2);
}

/* Le bloc « pot de miel » doit être invisible pour un humain sans que le
   navigateur le retire de l'arbre du document : un robot le remplit,
   un client ne le voit jamais. */
.trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Pied de page ---------- */

.site-foot {
    margin-top: 48px;
    background: var(--footer-bg);
    color: var(--footer-ink);
    border-top: 1px solid var(--line);
    font-size: 13px;
}

.site-foot .bande {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: baseline;
    padding-top: 20px;
    padding-bottom: 26px;
}

.site-foot a { color: var(--footer-ink); }

/* Sur un pied de page en aplat, la pastille pleine du sélecteur de
   langue disparaîtrait dans le fond. La langue courante s'y marque donc
   par un contour, qui tient sur n'importe quelle couleur. */
.site-foot .langues a,
.site-foot .langues strong {
    color: var(--footer-ink);
    border-color: currentColor;
    background: transparent;
}
.site-foot .langues a { opacity: .72; }
.site-foot .langues a:hover { opacity: 1; }

/* ---------- Accueil ----------

   La page d'accueil est souvent la seule que verra quelqu'un qui hésite.
   Elle porte donc la marque, dit à quoi sert le service, et mène à
   l'agenda — dans cet ordre, et sans rien demander avant. */

.hero {
    background: var(--deep-soft);
    border-bottom: 1px solid var(--line);
    margin: 0 0 40px;
    padding: 56px 0 52px;
}

/* Le bandeau garde sa respiration devant une page ordinaire et la perd
   devant un aplat : deux aplats séparés par du vide se liraient comme
   deux bandes, alors qu'il n'y en a qu'une. */
.masthead:has(+ .hero) { margin-bottom: 0; }

.hero .bande {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

/* Le logo revient ici en grand : le bandeau du haut le montre à hauteur
   de navigation, l'accueil le montre comme une signature. Il ne s'affiche
   que si l'on en a déposé un — sans quoi le titre porte seul la marque,
   plutôt que de répéter un nom déjà écrit deux lignes plus haut. */
.hero-mark { display: block; width: auto; max-width: 100%; height: 88px; }

.hero h1 {
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    max-width: 22ch;
    margin: 0;
}

.hero .lede { font-size: 1.05rem; max-width: 54ch; margin: 0; }
/* Le bandeau d'accueil règle tous ses écarts par « gap » et annule les
   marges de ses enfants : la marge basse des actions y ajouterait un
   vide sous les boutons, à l'intérieur de l'aplat. */
.hero .actions { margin: 6px 0 0; }

/* Trois étapes, numérotées parce qu'elles se suivent réellement : on ne
   vient pas avant d'avoir réservé, on ne réserve pas avant d'avoir
   choisi. Un ordre décoratif n'aurait rien à faire ici. */
.steps {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 0 0 44px;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}

.step {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}

.step h3 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font: var(--display-weight) 1.1rem/1.3 var(--serif);
    letter-spacing: var(--display-tracking);
    margin: 0 0 8px;
}

.step h3::before {
    counter-increment: etape;
    content: counter(etape);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: var(--on-deep);
    background: var(--deep);
    border-radius: 999px;
    min-width: 1.7em;
    padding: .25em 0;
    text-align: center;
    flex: none;
}

.step p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: none; }

/* Catalogue : ce que l'on peut réserver, avec la couleur qui sert de
   repère dans tout l'agenda. */
.offers {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin: 0 0 44px;
    padding: 0;
    list-style: none;
}

.offer {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--teinte, var(--deep));
    border-radius: var(--radius);
    padding: 16px 18px;
}
.offer h3 { font: 600 15px/1.3 var(--sans); margin: 0 0 6px; }
.offer p { margin: 0; font-size: 14px; color: var(--ink-2); max-width: none; }
.offer .muted { display: block; margin-top: 8px; font-size: 13px; }

/* ---------- Agenda ---------- */

/* Pastille de couleur d'un type d'activité.

   Elle vit dans app.css et non dans admin.css : elle s'affiche sur
   l'agenda public et sur les fiches de réservation, où admin.css n'est
   pas chargé — la pastille y était donc un élément sans dimensions,
   invisible même une fois sa couleur rétablie.

   La couleur vient de --teinte, posée par la feuille engendrée
   (ActivityColours). Si elle manque, le repli donne un carré neutre
   plutôt qu'un trou. */
.swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: -1px;
    background: var(--teinte, var(--line));
}

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 28px;
}
.filters .field { margin-bottom: 0; }
/* Dans la barre de filtres, le bouton s'aligne sur le bas des champs :
   toute marge le décalerait de la ligne. */
.filters .actions { margin: 0; }
.filters .check { margin-bottom: 0; align-items: center; }

.filter-types { border: 0; margin: 0; padding: 0; flex: 1 1 20rem; }
.filter-types legend { font-size: 14px; font-weight: 600; padding: 0 0 6px; }

.chip-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px 5px 8px;
    margin: 0 6px 6px 0;
    cursor: pointer;
}
.chip-check:has(input:checked) { border-color: var(--deep); background: var(--deep-soft); }

.day-heading {
    font: var(--display-weight) 1.05rem/1.3 var(--serif);
    letter-spacing: var(--display-tracking);
    margin: 28px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    color: var(--deep);
}

.slot-list { list-style: none; margin: 0; padding: 0; }

.slot {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto auto;
    gap: 14px;
    align-items: baseline;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--card);
    margin-bottom: 8px;
}
@media (max-width: 40rem) {
    .slot { grid-template-columns: 4.5rem 1fr; row-gap: 4px; }
    .slot-price, .slot-seats { grid-column: 2; }
}
.slot--full { opacity: .62; }

.slot-time {
    font: var(--display-weight) 1.05rem/1 var(--serif);
    font-variant-numeric: tabular-nums;
    color: var(--deep);
}
.slot-body { display: flex; flex-direction: column; gap: 2px; }
.slot-name { font-weight: 600; text-decoration: none; color: var(--ink); }
.slot-name:hover { color: var(--deep); }
.slot-body .muted { font-size: 13px; }

/* La reprise du rendez-vous dans un agenda, sur la liste des
   reservations. Plus petite et plus pale que le reste de la ligne : ce
   n'est pas ce qu'on vient y chercher, c'est ce qu'on doit pouvoir
   retrouver le jour ou l'agenda a perdu la date. */
.slot-agenda { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.slot-agenda a { color: var(--ink-3); }
.slot-agenda a:hover { color: var(--deep); }
.slot-price { font-size: 14px; text-align: right; }
.slot-price .muted { display: block; font-size: 12.5px; }
.slot-seats { font-size: 13.5px; color: var(--ink-3); min-width: 5.5rem; text-align: right; }

/* Fiche d'une activité */
.facts { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line);
         border-radius: var(--radius); overflow: hidden; margin: 0 0 18px; }
.facts .fact { flex: 1 1 11rem; padding: 12px 16px; border-right: 1px solid var(--line-2); }
.facts .fact:last-child { border-right: 0; }
.facts dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
            color: var(--ink-3); margin: 0 0 4px; }
.facts dd { margin: 0; font-size: 14px; font-weight: 600; }

/* Lien « Détails » sous la pastille d'état d'une réservation */
.slot-link { display: block; font-size: 12.5px; margin-top: 3px; }

/* Sélecteur de langue.

   Des liens et non un menu déroulant : la politique de sécurité interdit
   le script en ligne qu'un « select » exigerait pour se soumettre seul.
   La langue courante est un « strong » sans lien — cliquer sur la langue
   qu'on lit déjà ne mène nulle part, autant ne pas l'offrir. */
.langues { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
           font-size: 13px; margin: 0 0 14px; }
.langues .muted { font-size: 13px; }
.langues a, .langues strong { padding: 2px 7px; border-radius: var(--radius-field); line-height: 1.4; }
.langues a { color: var(--ink-3); text-decoration: none; border: 1px solid var(--line); }
.langues a:hover { color: var(--deep); border-color: var(--deep); }
.langues strong { background: var(--deep); color: var(--on-deep); font-weight: 600;
                  border: 1px solid var(--deep); }

/* ---------------------------------------------------------------------
   Modes d'emploi (§18)
   ------------------------------------------------------------------ */

/* UNE COLONNE, PAS UNE GRILLE. « .steps » de la page d'accueil range
   trois cartes cote a cote, ce qui convient a trois promesses qu'on
   embrasse d'un regard. Une marche a suivre se lit vers le bas : en
   grille, l'etape 4 se retrouve a droite de l'etape 1, et l'ordre — qui
   est toute l'information d'une procedure — se perd. */
.howto { list-style: none; margin: 0 0 26px; padding: 0; counter-reset: marche; }

.howto-step {
    position: relative;
    padding: 0 0 20px 3.1rem;
    border-left: 1px solid var(--line);
    margin-left: 1.05rem;
}

/* La derniere marche ne prolonge pas le trait : il relie les etapes
   entre elles, il ne pend pas dans le vide apres la derniere. */
.howto-step:last-child { border-left-color: transparent; padding-bottom: 0; }

.howto-step::before {
    counter-increment: marche;
    content: counter(marche);
    position: absolute;
    left: -1.05rem;
    top: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--deep);
    color: var(--on-deep);
    font: 600 .82rem/2.1rem var(--sans);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.howto-step h3 {
    font: var(--display-weight) 1.08rem/1.35 var(--serif);
    letter-spacing: var(--display-tracking);
    margin: .2rem 0 6px;
}

.howto-step p { margin: 0 0 8px; color: var(--ink-2); }
.howto-step ul { margin: 0 0 8px; padding-left: 20px; color: var(--ink-2); }
.howto-step li { margin-bottom: 4px; }

/* Sommaire des guides : le titre porte le lien, le resume reste en
   dessous plutot qu'a cote — sur un telephone, deux colonnes de texte
   dans une liste de six entrees deviennent illisibles. */
.guide-links { list-style: none; margin: 0 0 22px; padding: 0; }

.guide-links li {
    padding: 12px 0;
    border-bottom: 1px solid var(--line-2);
    margin: 0;
}

.guide-links li:last-child { border-bottom: 0; }
.guide-links a { font-weight: 600; text-decoration: none; }
.guide-links a:hover { text-decoration: underline; }
.guide-links .muted { display: block; font-size: 13.5px; margin-top: 2px; }

.guide-links--index li { padding: 15px 0; }
.guide-links--index a { font-size: 1.06rem; }

/* Questions frequentes : la question porte le poids, la reponse se
   retire d'un cran. Pas de repli-deplie — il exigerait du script, que la
   politique de securite interdit, et une reponse cachee derriere un clic
   est une reponse qu'on ne trouve pas avec la recherche du navigateur. */
.qa { margin: 0 0 20px; }
.qa dt { font-weight: 600; margin: 16px 0 4px; }
.qa dt:first-child { margin-top: 0; }
.qa dd { margin: 0; padding: 0 0 0 1px; color: var(--ink-2); }

/* ---------------------------------------------------------------------
   L'ajout a l'agenda, sous la confirmation (§9.10).

   Le bloc est cadre et decale pour une raison : il vient juste apres le
   bandeau vert « reservation confirmee », et sans separation les deux
   boutons se lisent comme une suite de ce bandeau — donc comme une etape
   restante. Ils ne le sont pas : la reservation est faite, ceci est un
   service en plus.
   --------------------------------------------------------------------- */
.agenda-ajout {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 14px 18px 4px;
    margin: 0 0 24px;
    background: var(--paper);
}

.agenda-ajout p { margin: 0; }

/* La marge du bloc porte deja l'espacement : celle des boutons ferait
   double emploi et decalerait le cadre. */
.agenda-ajout .actions { margin: 12px 0 14px; }

/* ---------------------------------------------------------------------
   Les pages qui presentent l'offre (§19).

   Elles vivent dans app.css et non dans admin.css : ce sont des pages
   publiques, ou la feuille de l'administration n'est pas chargee. Une
   carte y aurait ete un bloc sans dimensions.
   --------------------------------------------------------------------- */
.cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--teinte, var(--deep));
    border-radius: var(--radius);
    padding: 18px 20px;
}

.card h2 { font: 600 17px/1.3 var(--sans); margin: 0 0 8px; }
.card p { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); max-width: none; }

/* Les autres noms d'une activite. En retrait de la description, parce
   que ce n'est pas une phrase mais une equivalence : « c'est aussi ce
   que vous cherchiez sous cet autre nom ». */
.alias { font-size: 13px; font-style: italic; }

/* La variante resserree sert dans une carte, ou le cadre de .facts
   ferait un second cadre a l'interieur du premier. */
.facts--tight { border: 0; border-radius: 0; margin: 0 0 12px; }
.facts--tight .fact { flex: 1 1 7rem; padding: 6px 12px 6px 0; border-right: 0; }

/* Une liste qui se lit d'une traite : les communes desservies, les
   activites proposees. Des puces en colonne auraient fait soixante
   lignes la ou il s'agit de parcourir un ensemble du regard. */
.inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.inline-list li { color: var(--ink-2); }
.localites li::after { content: " ·"; color: var(--ink-3); }
.localites li:last-child::after { content: ""; }