/* /Components/CgvModale.razor.rz.scp.css */
/* Les conditions generales, lues sans quitter le parcours.

   🔴 CSS SCOPE, et c'est ICI le bon choix — a rebours de la regle rouge 21. Cette regle
   vise les gardes-fous TRANSVERSAUX (bandeau d'erreur, avertissements), qui doivent vivre
   dans app.css parce qu'ils s'appliquent a plusieurs mises en page. Ces declarations-ci ne
   servent qu'a ce composant, et une seule mise en page les porte : scopees, elles ne
   peuvent pas recolorer autre chose par surprise.

   🔴 Les couleurs viennent des jetons de app-regen.css. Ecrire #2C7368 en dur ici serait la
   meme valeur a deux endroits (regle rouge 22) — et c'est exactement la faute qui vient
   d'etre corrigee sur le bouton de paiement Mollie. */

.voile[b-ez0s1cj2gz] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(31, 42, 46, 0.45);
}

.panneau-cgv[b-ez0s1cj2gz] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 44rem;
    /* Le panneau ne depasse jamais la fenetre : c'est le CORPS qui defile, pas la page
       derriere. Sans borne, un document de douze articles poussait le bouton « Fermer »
       hors de l'ecran sur un telephone. */
    max-height: 88vh;
    background: var(--rg-surface);
    border-radius: var(--rg-radius);
    box-shadow: var(--rg-shadow-lift);
}

.tete[b-ez0s1cj2gz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem 0.85rem;
    border-bottom: 1px solid var(--rg-line);
}

.tete h2[b-ez0s1cj2gz] {
    margin: 0;
    font-size: 1.3rem;
}

.maj[b-ez0s1cj2gz] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--rg-muted);
}

/* 🔴 Cible tactile d'au moins 2,75 rem : un bouton de fermeture qu'on rate au premier
   appui fait taper a cote, donc sur le voile, donc fermer quand meme — mais par accident,
   et souvent en pleine lecture. */
.fermer[b-ez0s1cj2gz] {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rg-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.fermer:hover[b-ez0s1cj2gz] {
    background: var(--rg-accent-soft);
    color: var(--rg-accent-deep);
}

.corps[b-ez0s1cj2gz] {
    overflow-y: auto;
    padding: 0.5rem 1.35rem 1rem;
    /* Le defilement tactile reste fluide a l'interieur du panneau. */
    -webkit-overflow-scrolling: touch;
}

.article[b-ez0s1cj2gz] {
    margin-top: 1.25rem;
}

.article h3[b-ez0s1cj2gz] {
    margin: 0 0 0.4rem;
    font-size: 1.02rem;
    color: var(--rg-accent-deep);
}

/* 🔴 Interlignage genereux et largeur bornee par le panneau : c'est un texte qu'on demande
   de LIRE avant d'accepter. Une fenetre qui rend la lecture penible transforme la case a
   cocher en formalite, ce qu'elle ne doit precisement pas etre. */
.article p[b-ez0s1cj2gz] {
    margin: 0 0 0.6rem;
    font-size: 0.93rem;
    line-height: 1.65;
}

.indisponible[b-ez0s1cj2gz] {
    margin: 1.5rem 0;
    padding: 0.9rem 1.1rem;
    border-radius: var(--rg-radius-sm);
    background: var(--rg-wait);
    color: var(--rg-wait-ink);
    font-size: 0.92rem;
    line-height: 1.55;
}

.pied[b-ez0s1cj2gz] {
    display: flex;
    justify-content: flex-end;
    padding: 0.85rem 1.35rem 1.15rem;
    border-top: 1px solid var(--rg-line);
}

/* Sur un telephone, la fenetre prend tout l'ecran : bornee, elle laissait deux bandes de
   voile inutiles et reduisait d'autant la surface de lecture. */
@media (max-width: 34rem) {
    .voile[b-ez0s1cj2gz] { padding: 0; }

    .panneau-cgv[b-ez0s1cj2gz] {
        max-width: none;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .pied button[b-ez0s1cj2gz] { width: 100%; }
}
/* /Components/Layout/EmptyLayout.razor.rz.scp.css */
.page-nue[b-dl4yas2k6i] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #f5f3f1;
}

[b-dl4yas2k6i] .connexion-carte {
    width: 100%;
    max-width: 22rem;
    padding: 2rem;
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}

[b-dl4yas2k6i] .connexion-carte h1 {
    font-size: 1.5rem;
    margin-bottom: .25rem;
}

[b-dl4yas2k6i] .connexion-sous-titre {
    color: #6c757d;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Charpente de l'espace praticienne.

   🔴 Le bloc #blazor-error-ui a ete RETIRE de ce fichier. Il y etait declare en DOUBLE :
   ici, en CSS scope, et dans wwwroot/app.css, en global. La S15 l'avait copie au lieu de
   le deplacer. Sans effet visible aujourd'hui — les deux disaient display:none — et c'est
   precisement ainsi que la lecon 5 se prepare : deux definitions du meme nom finissent
   toujours par diverger, et celle qu'on corrige n'est jamais celle qui s'applique.
   Un garde-fou TRANSVERSAL se declare globalement, jamais dans un CSS scope (regle 21).

   🔴 Les regles de .top-row ont disparu avec la barre superieure elle-meme, qui ne portait
   qu'un lien « About » vers learn.microsoft.com. Du CSS qui survit au balisage qu'il
   habillait est du CSS que plus personne n'ose toucher. */

.page[b-2zup82g37l] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--rg-bg, #FAFAFA);
}

main[b-2zup82g37l] {
    flex: 1;
    /* 🔴 Un element flex refuse par defaut de retrecir sous la largeur intrinseque de son
       contenu (min-width: auto). Sans cette ligne, la grille de six colonnes de /reserver
       depasse la fenetre et la derniere journee sort de l'ecran — samedi devenait
       invisible sans qu'aucune regle de la page ne paraisse fautive. */
    min-width: 0;
}

.sidebar[b-2zup82g37l] {
    /* Colonne flex : c'est ce qui permet au pied du menu (nom de l'utilisatrice,
       deconnexion) de tomber en bas par `margin-top: auto` plutot que de suivre le
       dernier lien. Sans cette ligne, le reglage pose dans NavMenu.razor.css n'a
       aucun effet et rien n'indique pourquoi — le fichier fautif n'est pas celui
       qu'on relit. */
    display: flex;
    flex-direction: column;

    /* Vert profond du cabinet plutot que le degrade bleu/violet du gabarit Blazor.
       🔴 Fonce a dessein : le texte du menu est clair (NavMenu.razor.css). Poser
       ici le vert d'eau clair du site rendrait la navigation illisible sans
       toucher a un second fichier — la meme famille, pas la meme valeur. */
    background-image: linear-gradient(180deg, #2C7368 0%, #17423C 70%);
}

.content[b-2zup82g37l] {
    /* Une seule gouttiere, declaree ici. Les pages portaient « px-4 » de Bootstrap dans
       leur balisage : la marge d'une application ne se decide pas page par page, sinon
       une page oubliee colle au bord et personne ne sait quel fichier corriger. */
    padding: 1.5rem 1.25rem 4rem;
    /* Au-dela, les lignes d'un tableau deviennent trop longues pour que l'oeil retrouve
       le debut de la ligne suivante. */
    max-width: 82rem;
}

@media (min-width: 641px) {
    .page[b-2zup82g37l] {
        flex-direction: row;
    }

    .sidebar[b-2zup82g37l] {
        /* 268px et non 250 : « Rendez-vous et paiements » tient sur une ligne en graisse
           normale a 250, mais PAS en graisse 600, celle de l'etat actif. Le libelle
           debordait donc uniquement sur sa propre page — la seule ou Nathalie le regarde.
           Corrige en largeur plutot qu'en retirant le gras : le gras est ce qui dit ou
           l'on se trouve. */
        width: 268px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .sidebar[b-2zup82g37l]  .nav-scrollable {
        /* La liste des liens absorbe la hauteur restante et defile seule si le menu
           s'allonge, pour que le pied reste visible. */
        flex: 1;
        min-height: 0;
    }

    .content[b-2zup82g37l] {
        padding: 1.75rem 2rem 4.5rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Barre laterale de l'espace praticienne.

   🔴 Les classes sont nommees `enseigne-*` et non `marque-*`, alors que PublicLayout
   porte deja `marque-*` pour la meme idee. Les deux CSS sont scopes, donc rien ne
   casserait — mais deux blocs de meme nom dans deux fichiers voisins, l'un vert sur
   blanc et l'autre clair sur vert profond, est exactement le montage ou l'on corrige
   pendant vingt minutes le fichier qui ne s'applique pas. */

.enseigne[b-327j8bqr5u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.25rem 1.25rem 0;
}

.enseigne-nom[b-327j8bqr5u] {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    color: #FFFFFF;
}

.enseigne-sous[b-327j8bqr5u] {
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #A8CEC7;
}

/* ---------------------------------------------------------------- liens */

.nav-item[b-327j8bqr5u] {
    padding: 0 0.75rem;
}

.nav-item:first-of-type[b-327j8bqr5u] {
    padding-top: 1.25rem;
}

/* 🔴 LA CORRECTION DE LA DETTE 19 EST ICI, pas dans le libelle.
   « Rendez-vous et paiements » debordait sur deux lignes. Le raccourcir aurait reperdu
   ce que la S11 venait de gagner : ce libelle dit ce que la page SERT A FAIRE, et c'est
   pour cela qu'il est long. Le defaut n'etait pas le texte, c'etaient trois reglages du
   gabarit qui supposaient un libelle court — hauteur figee a 3rem, `line-height: 3rem`
   (qui interdit purement et simplement la seconde ligne) et une icone de 0.75rem de
   marge. On rend la place au texte au lieu d'amputer le texte. */
.nav-item[b-327j8bqr5u]  .nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: var(--rg-radius-sm, 0.375rem);
    background: none;
    color: #D6E9E5;
    font-size: 0.9rem;
    line-height: 1.3;
    text-decoration: none;
}

.nav-item[b-327j8bqr5u]  .nav-link svg {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    /* L'icone prend la couleur du texte : un seul reglage au survol et a l'etat actif,
       au lieu de deux jeux d'images de fond a maintenir en parallele. */
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.nav-item[b-327j8bqr5u]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.nav-item[b-327j8bqr5u]  a.active {
    background-color: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    font-weight: 600;
}

.nav-item[b-327j8bqr5u]  a.active svg {
    opacity: 1;
}

/* ---------------------------------------------------------------- pied */

.pied-menu[b-327j8bqr5u] {
    /* Masque par defaut : en mobile, le menu est replie. Rendu visible soit par
       l'ouverture du menu, soit par le palier bureau, plus bas.
       🔴 Une SEULE declaration de .pied-menu dans ce fichier. La premiere version en
       portait deux, a soixante lignes d'ecart — dans le fichier meme dont l'en-tete
       explique pourquoi deux definitions du meme nom sont un defaut. */
    display: none;
    margin-top: auto;
    padding: 0.9rem 1.35rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.qui[b-327j8bqr5u] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #C3DED9;
}

.deconnexion[b-327j8bqr5u] {
    padding: 0;
    border: none;
    background: none;
    color: #A8CEC7;
    font: inherit;
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}

.deconnexion:hover[b-327j8bqr5u] {
    color: #FFFFFF;
}

.pied-menu[b-327j8bqr5u]  .nav-link {
    color: #D6E9E5;
    font-size: 0.9rem;
    text-decoration: none;
}

/* ---------------------------------------------------------------- mobile */

.navbar-toggler[b-327j8bqr5u] {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.5rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--rg-radius-sm, 0.375rem);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.6rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-327j8bqr5u] {
    background-color: rgba(255, 255, 255, 0.25);
}

.nav-scrollable[b-327j8bqr5u] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-327j8bqr5u] {
    display: block;
}

/* En mobile, le pied du menu suit le menu : affiche en permanence, il collerait le nom
   de l'utilisatrice et le bouton de deconnexion sous l'enseigne, au-dessus du contenu. */
.navbar-toggler:checked ~ .pied-menu[b-327j8bqr5u] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-327j8bqr5u] {
        display: none;
    }

    .nav-scrollable[b-327j8bqr5u] {
        display: block;
        overflow-y: auto;
    }

    .pied-menu[b-327j8bqr5u] {
        display: block;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Mise en page publique : en-tete de marque, contenu, pied discret. Aucun menu. */

/* ============================================ elements communs aux pages publiques
   🔴 Ces classes vivent ICI et pas dans chaque page. Le fil des etapes, les cartes et
   les listes recapitulatives apparaissent sur /reserver ET sur /reserver/retour : les
   dupliquer garantirait qu'un jour les deux diverge_nt, et que la carte de confirmation
   ne ressemble plus a celle du formulaire qui la precede de trois secondes.
   `::deep` est necessaire : sans lui, un CSS scope ne toucherait que le balisage du
   layout lui-meme, pas le contenu rendu dans @Body.
   ⚠️ « Partagees » decrit une INTENTION, pas un fait verifie : `.hold` figurait ici comme
   telle et n'etait employee que par une seule page (constate en S26). Avant d'ajouter une
   classe a ce fichier, verifier qu'elle a bien DEUX usages. */

[b-r6wzk6c9sl] .steps {
    display: flex;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    flex-wrap: wrap;
}

[b-r6wzk6c9sl] .steps li {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.1rem;
    padding: .3rem .9rem .3rem .6rem;
    border: 1px solid var(--rg-line, #E4EAE9);
    border-radius: 999px;
    background: #fff;
    font-size: .88rem;
    color: var(--rg-muted, #6B7A7E);
}

[b-r6wzk6c9sl] .steps li span {
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--rg-accent-soft, #E8F4F2);
    color: var(--rg-accent-deep, #2C7368);
    font-size: .75rem;
    font-weight: 700;
}

[b-r6wzk6c9sl] .steps li.is-on {
    background: var(--rg-accent-soft, #E8F4F2);
    border-color: var(--rg-accent-line, #BFDFDA);
    color: var(--rg-ink, #1F2A2E);
}

[b-r6wzk6c9sl] .steps li.is-on span { background: var(--rg-accent, #7FBFB5); color: #0F2C28; }
[b-r6wzk6c9sl] .steps li.is-done span { background: var(--rg-accent-deep, #2C7368); color: #fff; }

[b-r6wzk6c9sl] .card {
    padding: 1.4rem;
    border: 1px solid var(--rg-line, #E4EAE9);
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(31, 42, 46, .06);
}

[b-r6wzk6c9sl] .card.soft {
    background: var(--rg-accent-soft, #E8F4F2);
    border-color: var(--rg-accent-line, #BFDFDA);
    box-shadow: none;
}

[b-r6wzk6c9sl] .card h2 { font-size: 1.1rem; margin: 0 0 .35rem; }
[b-r6wzk6c9sl] .card hr { border: 0; border-top: 1px solid var(--rg-line, #E4EAE9); margin: 1.4rem 0; }

[b-r6wzk6c9sl] .recap { display: flex; flex-direction: column; gap: .6rem; margin: .9rem 0 0; }

[b-r6wzk6c9sl] .recap div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .9rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--rg-line, #E4EAE9);
}

[b-r6wzk6c9sl] .card.soft .recap div { border-bottom-color: var(--rg-accent-line, #BFDFDA); }
[b-r6wzk6c9sl] .recap div:last-child { border-bottom: 0; padding-bottom: 0; }
[b-r6wzk6c9sl] .recap dt { font-size: .85rem; color: var(--rg-muted, #6B7A7E); }
[b-r6wzk6c9sl] .recap dd { margin: 0; text-align: right; font-size: .9rem; font-weight: 600; }
[b-r6wzk6c9sl] .recap dd.highlight { font-size: 1.05rem; font-weight: 700; }

[b-r6wzk6c9sl] .callout {
    margin: 1rem 0 .5rem;
    padding: .8rem 1rem;
    border-radius: .6rem;
    background: var(--rg-accent-soft, #E8F4F2);
    font-size: .88rem;
    color: #1E5A51;
}

/* 🔴 `.hold` A ETE RETIREE EN S26, en meme temps que son unique usage. Elle habillait le
   compte a rebours « Creneau reserve encore N minutes » de /reserver ; le hold ne se pose
   plus a cette etape, donc il n'y a plus rien a compter. L'en-tete de ce fichier la
   presentait comme PARTAGEE avec /reserver/retour — verifie le 19/08, cette page ne l'a
   jamais employee. Une classe qui survit a son dernier usage finit par etre reutilisee
   pour autre chose, et c'est le doublon par REUTILISATION de la regle rouge 22. */

[b-r6wzk6c9sl] .small { font-size: .88rem; }

/* Colonne unique et centree : les ecrans d'issue (confirme, annule, echec) n'ont rien a
   mettre a cote d'eux, et une ligne de texte pleine largeur ne se lit pas. */
[b-r6wzk6c9sl] .outcome { max-width: 40rem; }

[b-r6wzk6c9sl] .glyph {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--rg-accent-soft, #E8F4F2);
    color: var(--rg-accent-deep, #2C7368);
    font-size: 1.5rem;
}

[b-r6wzk6c9sl] .glyph.warn { background: #FDF3E7; color: #8A5A18; }

/* Bouton principal des pages publiques : texte fonce sur vert d'eau (contraste). */
[b-r6wzk6c9sl] .btn-primary-public {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: .75rem 1.4rem;
    border: 1px solid var(--rg-accent, #7FBFB5);
    border-radius: 999px;
    background: var(--rg-accent, #7FBFB5);
    color: #0F2C28;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

[b-r6wzk6c9sl] .btn-primary-public:hover { background: var(--rg-accent-hover, #5FA79C); }

.entete-publique[b-r6wzk6c9sl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.75rem;
    background: #fff;
    border-bottom: 1px solid var(--rg-line, #E4EAE9);
}

.marque[b-r6wzk6c9sl] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.marque-nom[b-r6wzk6c9sl] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--rg-accent-deep, #2C7368);
}

.marque-sous[b-r6wzk6c9sl] {
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rg-muted, #6B7A7E);
}

/* Le nom du cabinet ramene au site vitrine quand l'adresse est configuree.
   🔴 Un SELECTEUR PLUS PRECIS, pas une seconde declaration de `.marque-nom` : la taille,
   la graisse, l'interlettrage et la couleur restent declares UNE SEULE FOIS juste
   au-dessus, et valent pour le `<span>` comme pour le `<a>`. Recopier ces quatre
   proprietes ici ferait diverger les deux rendus au premier ajustement (regle rouge 22).
   ⚠️ `color: inherit` serait un piege : le nom prendrait la couleur du texte courant au
   lieu du vert profond de la marque. On ne touche qu'a ce que le navigateur ajoute de
   lui-meme sur un lien. */
a.marque-nom[b-r6wzk6c9sl] {
    text-decoration: none;
}

a.marque-nom:hover[b-r6wzk6c9sl] {
    text-decoration: underline;
}

/* Cible tactile : c'est la porte de sortie de toute cliente qui ne comprend pas l'ecran. */
.tel[b-r6wzk6c9sl] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 .5rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--rg-accent-deep, #2C7368);
}

.page-publique[b-r6wzk6c9sl] {
    /* min-width: 0 pour la meme raison que dans MainLayout : la grille de six colonnes
       de /reserver ne doit pas pouvoir pousser la page hors de la fenetre. */
    min-width: 0;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.75rem 1.75rem 4rem;
}

.pied-publique[b-r6wzk6c9sl] {
    padding: 1.25rem 1.75rem 2rem;
    border-top: 1px solid var(--rg-line, #E4EAE9);
    font-size: .85rem;
    color: var(--rg-muted, #6B7A7E);
    text-align: center;
}

@media (max-width: 639px) {
    .entete-publique[b-r6wzk6c9sl] { padding: .9rem 1rem; }
    .page-publique[b-r6wzk6c9sl] { padding: 1.25rem 1rem 3rem; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-e8b01eu7d2],
.components-reconnect-repeated-attempt-visible[b-e8b01eu7d2],
.components-reconnect-failed-visible[b-e8b01eu7d2],
.components-pause-visible[b-e8b01eu7d2],
.components-resume-failed-visible[b-e8b01eu7d2],
.components-rejoining-animation[b-e8b01eu7d2] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-e8b01eu7d2],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-e8b01eu7d2],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-e8b01eu7d2],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-e8b01eu7d2],
#components-reconnect-modal.components-reconnect-retrying[b-e8b01eu7d2],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-e8b01eu7d2],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-e8b01eu7d2],
#components-reconnect-modal.components-reconnect-failed[b-e8b01eu7d2],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-e8b01eu7d2] {
    display: block;
}


#components-reconnect-modal[b-e8b01eu7d2] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-e8b01eu7d2 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-e8b01eu7d2 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-e8b01eu7d2 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-e8b01eu7d2]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-e8b01eu7d2 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-e8b01eu7d2 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-e8b01eu7d2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-e8b01eu7d2 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-e8b01eu7d2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-e8b01eu7d2] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-e8b01eu7d2] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-e8b01eu7d2] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-e8b01eu7d2] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-e8b01eu7d2] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-e8b01eu7d2] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-e8b01eu7d2 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-e8b01eu7d2] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-e8b01eu7d2 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/MonRendezVous.razor.rz.scp.css */
/* Page publique d'annulation. CSS isole : le CSS scoped de Blazor s'applique par
   COMPOSANT, pas par dossier — les regles de ReserverRetour.razor.css ne descendent pas ici.

   ⚠️ Les classes PARTAGEES avec les autres pages publiques (outcome, card, recap, callout,
   glyph, small, btn-primary-public) vivent dans PublicLayout.razor.css. Ne pas les
   redefinir ici : deux definitions du meme nom, c'est la garantie qu'un jour l'une des
   deux bougera seule. */

/* Etiquette d'etat, lue AVANT le titre : c'est elle qui dit en un mot ou en est le
   rendez-vous, avant meme la date. */
.state[b-ehnoioyvh8] {
    display: inline-block;
    margin-bottom: .6rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.state.ok[b-ehnoioyvh8] { background: var(--rg-accent-soft, #E8F4F2); color: var(--rg-accent-deep, #2C7368); }
.state.wait[b-ehnoioyvh8] { background: #FDF3E7; color: #8A5A18; }
.state.off[b-ehnoioyvh8] { background: #EDF0F0; color: var(--rg-muted, #6B7A7E); }

/* 🔴 Majuscule sur la PREMIERE LETTRE seulement. `text-transform: capitalize` la met a
   chaque mot et produit « Jeudi 20 Août 2026 À 15:30 » — en francais, ni le mois ni la
   preposition ne prennent de majuscule. */
h1[b-ehnoioyvh8]::first-letter {
    text-transform: uppercase;
}

/* Le second temps du bouton : encadre, pour qu'on voie qu'on a quitte la lecture et
   qu'on est en train de decider.
   🔴 Le cadre est AMBRE, pas rouge : la couleur rouge est reservee au bouton qui detruit,
   et un bloc entier en rouge ferait perdre au bouton sa charge. */
.confirm[b-ehnoioyvh8] {
    margin: 1.25rem 0 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid #F0D9AE;
    border-radius: .75rem;
    background: #FDF9F0;
}

.confirm h2[b-ehnoioyvh8] {
    margin: 0 0 .6rem;
    font-size: 1.05rem;
}

.actions[b-ehnoioyvh8] {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.actions button[b-ehnoioyvh8] {
    min-height: 2.9rem;
    padding: .7rem 1.2rem;
    border: 1px solid var(--rg-line, #E4EAE9);
    border-radius: 999px;
    background: #fff;
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
}

/* Premier temps : discret. Il n'ouvre qu'une question, il ne detruit rien encore. */
.btn-danger-quiet[b-ehnoioyvh8] {
    color: var(--rg-danger, #B02A37);
    border-color: transparent !important;
    background: transparent !important;
}

.btn-danger-quiet:hover[b-ehnoioyvh8] {
    background: #FBEDEC !important;
}

/* Second temps : plein, et c'est le SEUL bouton rouge plein de toute l'application
   publique. Il rend le creneau immediatement et ne se defait pas. */
.btn-danger-solid[b-ehnoioyvh8] {
    background: var(--rg-danger, #B02A37) !important;
    border-color: var(--rg-danger, #B02A37) !important;
    color: #fff;
    font-weight: 600;
}

.btn-danger-solid:disabled[b-ehnoioyvh8] {
    background: #D9A1A7 !important;
    border-color: #D9A1A7 !important;
    cursor: default;
}

.alert-error[b-ehnoioyvh8] {
    margin-top: 1rem;
    padding: .8rem 1rem;
    border: 1px solid var(--rg-danger-line, #F1C9C9);
    border-radius: .6rem;
    background: var(--rg-danger-soft, #FDF3F4);
    color: #842029;
    font-size: .9rem;
}
/* /Components/Pages/Reserver.razor.rz.scp.css */
/* Page publique de reservation. CSS isole (scoped) : ces regles ne fuient pas vers les
   ecrans de la praticienne. */

/* ================================================================== agenda
   🔴 Grille en COLONNES DE JOURS, pas en trame horaire. Les plages de Nathalie sont
   irregulieres ; une trame fixe dessinerait des cases la ou le cabinet est ferme.
   Chaque colonne ne contient que ses creneaux reels, dans l'ordre.

   🔴 Les paliers sont en CSS PUR, sans mesurer la fenetre. Blazor Server ne connait pas
   la largeur du navigateur sans interop JS, et une vue « 1 jour + fleches » pilotee par
   JS ajouterait un aller-retour par redimensionnement. Sous 640 px les colonnes
   s'EMPILENT : la cliente fait defiler verticalement, geste naturel au telephone,
   plutot que de naviguer jour par jour. */

.agenda-top[b-7mdfqnrd4b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 .75rem;
}

.agenda-nav[b-7mdfqnrd4b] {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.agenda-range[b-7mdfqnrd4b] {
    font-size: 1.05rem;
    font-weight: 600;
}

.agenda-range[b-7mdfqnrd4b]::first-letter {
    text-transform: uppercase;
}

.agenda-count[b-7mdfqnrd4b] {
    margin: 0;
}

/* Cible tactile ronde, jamais sous 44 px. */
.icon-btn[b-7mdfqnrd4b] {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--rg-line, #E4EAE9);
    border-radius: 50%;
    background: #fff;
    color: var(--rg-accent-deep, #2C7368);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.icon-btn:hover:not(:disabled)[b-7mdfqnrd4b] {
    background: var(--rg-accent-soft, #E8F4F2);
    border-color: var(--rg-accent-line, #BFDFDA);
}

.icon-btn:disabled[b-7mdfqnrd4b] {
    color: var(--rg-muted, #6B7A7E);
    cursor: default;
}

.days[b-7mdfqnrd4b] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
    align-items: start;
}

.day[b-7mdfqnrd4b] {
    border: 1px solid var(--rg-line, #E4EAE9);
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(31, 42, 46, .06);
    overflow: hidden;
}

.day-head[b-7mdfqnrd4b] {
    padding: .7rem .8rem .55rem;
    border-bottom: 1px solid var(--rg-line, #E4EAE9);
}

.day-name[b-7mdfqnrd4b] {
    display: block;
    font-weight: 600;
    font-size: 1rem;
}

/* `capitalize` mettrait une majuscule a chaque mot (« Lundi 17 Août »). Seul le jour
   de la semaine en prend une. */
.day-name[b-7mdfqnrd4b]::first-letter {
    text-transform: uppercase;
}

.day-date[b-7mdfqnrd4b] {
    display: block;
    font-size: .85rem;
    color: var(--rg-muted, #6B7A7E);
}

.day-body[b-7mdfqnrd4b] {
    padding: .7rem .8rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.win[b-7mdfqnrd4b] {
    margin: .35rem 0 0;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rg-muted, #6B7A7E);
}

.win:first-child[b-7mdfqnrd4b] {
    margin-top: 0;
}

.day.is-closed[b-7mdfqnrd4b] {
    background: #F6F8F7;
    box-shadow: none;
}

.day.is-closed .day-name[b-7mdfqnrd4b],
.day.is-closed .day-date[b-7mdfqnrd4b] {
    color: var(--rg-muted, #6B7A7E);
}

.day-closed[b-7mdfqnrd4b] {
    margin: 0;
    padding: .9rem .8rem 1.1rem;
    font-size: .9rem;
    color: var(--rg-muted, #6B7A7E);
}

.agenda-empty[b-7mdfqnrd4b] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    padding: 1rem;
    border: 1px dashed var(--rg-accent-line, #BFDFDA);
    border-radius: .75rem;
    background: var(--rg-accent-soft, #E8F4F2);
}

@media (max-width: 1023px) {
    .days[b-7mdfqnrd4b] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .days[b-7mdfqnrd4b] { grid-template-columns: 1fr; }
}

/* Cible tactile large : le parcours se fera en grande partie au telephone.
   44 px est le minimum recommande, et il n'y a aucune raison de faire plus petit. */
.slot[b-7mdfqnrd4b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--rg-accent-line, #BFDFDA);
    border-radius: .5rem;
    background: #fff;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.slot:hover:not(:disabled)[b-7mdfqnrd4b] {
    border-color: var(--rg-accent-deep, #2C7368);
    background: var(--rg-accent-soft, #E8F4F2);
}

.slot:disabled[b-7mdfqnrd4b] {
    opacity: .5;
    cursor: default;
}

/* ============================================================ etape 2
   Formulaire a gauche, recapitulatif en aparte a droite. Sous 1023 px l'aparte passe
   SOUS le formulaire : sur telephone, un recapitulatif place avant les champs ferait
   defiler pour rien avant de pouvoir taper.
   ⚠️ Les classes PARTAGEES avec /reserver/retour (steps, card, recap, callout) vivent
   dans PublicLayout.razor.css, pas ici.
   🔴 `hold` figurait dans cette liste jusqu'en S27 : elle avait ete retiree du fichier
   partage en S26 avec son dernier usage, et l'enumeration ci-dessus a survecu a la
   classe qu'elle nommait. Une liste de classes ecrite dans un commentaire est un NOM
   ecrit deux fois (regle rouge 22) : elle diverge sans que rien ne devienne rouge. */

.cols[b-7mdfqnrd4b] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2rem;
    align-items: start;
}

.aside[b-7mdfqnrd4b] { position: sticky; top: 1.25rem; }

.grid-2[b-7mdfqnrd4b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.field[b-7mdfqnrd4b] { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; }
.field.full[b-7mdfqnrd4b] { grid-column: 1 / -1; }

/* 16 px minimum sur les champs : en dessous, iOS ZOOME automatiquement au focus et la
   cliente se retrouve avec une page agrandie qu'elle doit repincer. */
.field input[b-7mdfqnrd4b] {
    min-height: 2.9rem;
    padding: .6rem .8rem;
    border: 1px solid var(--rg-line, #E4EAE9);
    border-radius: .5rem;
    font-size: 1rem;
    font-weight: 400;
    font-family: inherit;
}

.field small[b-7mdfqnrd4b] { font-weight: 400; }

.total[b-7mdfqnrd4b] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: .25rem 0 1rem;
}

.total .amount[b-7mdfqnrd4b] { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) {
    .cols[b-7mdfqnrd4b] { grid-template-columns: minmax(0, 1fr); }
    .aside[b-7mdfqnrd4b] { position: static; }
}

@media (max-width: 639px) {
    .grid-2[b-7mdfqnrd4b] { grid-template-columns: 1fr; }
}

/* 🔴 `.hold-banner` A ETE SUPPRIMEE EN S27 : aucun `.razor` ne la portait, verifie par
   recherche sur tout `src/RegenSuivi.Web`. Elle habillait l'annonce du creneau bloque a
   l'etape 2 ; depuis la S26, le hold ne se pose plus qu'au clic « Confirmer », et la
   phrase qu'elle encadrait a disparu avec lui. Elle etait deja morte AVANT ce chantier.
   ⚠️ Une regle de style qui survit a son dernier usage finit par etre reemployee pour
   autre chose — le doublon par REUTILISATION de la regle 22. */

.form[b-7mdfqnrd4b] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form label[b-7mdfqnrd4b] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-weight: 600;
}

.form input[b-7mdfqnrd4b] {
    padding: .6rem .75rem;
    border: 1px solid #cbd5e1;
    border-radius: .375rem;
    font-size: 1rem;
    font-weight: 400;
}

.form small[b-7mdfqnrd4b] {
    font-weight: 400;
}

.actions[b-7mdfqnrd4b] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.actions button[b-7mdfqnrd4b] {
    padding: .6rem 1.1rem;
    border-radius: .375rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    cursor: pointer;
}

.actions .primary[b-7mdfqnrd4b] {
    background: var(--rg-accent, #7FBFB5);
    border-color: var(--rg-accent, #7FBFB5);
    color: #0F2C28;
    font-weight: 600;
}

.review[b-7mdfqnrd4b] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .5rem 1.5rem;
    max-width: 32rem;
    margin-bottom: 1rem;
}

.review dt[b-7mdfqnrd4b] {
    font-weight: 600;
    color: #475569;
}

.review dd[b-7mdfqnrd4b] {
    margin: 0;
}

/* Le numero de telephone est mis en evidence : c'est le seul garde-fou contre une faute
   de frappe, maintenant que la verification par SMS est ecartee. */
.review dd.highlight[b-7mdfqnrd4b] {
    font-weight: 700;
    font-size: 1.05rem;
}

.alert-info[b-7mdfqnrd4b] {
    padding: 1rem;
    border-left: 4px solid #0369a1;
    background: #f0f9ff;
}

.alert-warning[b-7mdfqnrd4b] {
    padding: .75rem 1rem;
    border-left: 4px solid #d97706;
    background: #fffbeb;
}

/* ================================================================== conditions de vente
   🔴 La case est le dernier geste avant le paiement, et c'est aussi celui qu'on oublie.
   Elle est donc DANS le flux du formulaire, au-dessus du bouton, jamais reléguée en bas
   de page en petits caractères : une acceptation qu'on n'a pas vue n'est pas une
   acceptation.

   🔴 Cible tactile de 1.25rem et libellé cliquable (c'est un <label>) : au téléphone, une
   case de la taille par défaut se manque une fois sur deux, et la cliente conclut que le
   bouton ne marche pas. */

/* 🔴 `.form label` ET NON `.cgv` SEUL, et c'est tout le sujet. Le formulaire declare
   plus haut `.form label { display:flex; flex-direction:column; font-weight:600 }` pour
   empiler une etiquette au-dessus de son champ — ce qui est juste pour Prénom, Nom,
   Téléphone. Sa specificite (0,2,0) l'emporte sur `.cgv` (0,1,0) : la case s'affichait
   AU-DESSUS de son libellé, en gras d'etiquette. Constate a l'oeil, jamais par un test.
   ⚠️ Une case a cocher est le SEUL label de ce formulaire ou le controle se met AVANT le
   texte, et sur la meme ligne. C'est la convention que tout le monde reconnait ; empilee,
   elle se lit comme un champ vide qu'on aurait oublie de remplir. */
.form label.cgv[b-7mdfqnrd4b] {
    flex-direction: row;
    align-items: flex-start;
    gap: .7rem;
    margin: 1rem 0 .25rem;
    font-weight: 400;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1.45;
}

.cgv input[type="checkbox"][b-7mdfqnrd4b] {
    width: 1.25rem;
    height: 1.25rem;
    margin: .1rem 0 0;
    flex: 0 0 auto;
    accent-color: var(--rg-accent-deep, #2C7368);
    cursor: pointer;
}

/* 🔴 Le refus DESIGNE la case, il ne se contente pas d'une phrase plus haut. C'est la
   difference entre « il manque quelque chose » et « il manque CECI » — et c'est ce qui
   evite le second clic identique au premier. */
.cgv.is-missing[b-7mdfqnrd4b] {
    color: #b91c1c;
}

.cgv.is-missing input[type="checkbox"][b-7mdfqnrd4b] {
    outline: 2px solid #b91c1c;
    outline-offset: 2px;
}

.cgv-lien[b-7mdfqnrd4b] {
    margin: 0 0 .5rem 1.95rem;
    font-size: .9rem;
}

/* 🔴 UN BOUTON QUI SE LIT COMME UN LIEN (S32). Le texte des CGV ne vit plus sur le site
   vitrine : il s'ouvre sur place, donc ce n'est plus une navigation mais une commande.
   Un <a href="#"> aurait l'apparence juste et le comportement faux — il se copie, s'ouvre
   dans un onglet où il ne montre rien, et remonte en haut de la page au clic.
   ⚠️ Il faut donc DÉSHABILLER le bouton de tout ce que le navigateur lui donne : fond,
   bordure, remplissage, police. Sans cela, il apparaissait en gris système, en Arial, au
   milieu d'un formulaire en Karla.
   🔴 `font: inherit` et non une taille écrite ici : la taille vit déjà sur `.cgv-lien`
   juste au-dessus, et l'écrire deux fois garantirait qu'un jour les deux diffèrent. */
.lien-cgv[b-7mdfqnrd4b] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--rg-accent-deep, #2C7368);
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

.lien-cgv:hover[b-7mdfqnrd4b] {
    text-decoration-thickness: 2px;
}

/* Le conteneur du widget anti-automate.
   🔴 AUCUNE dimension, aucune couleur : le widget est une iframe servie par Cloudflare et
   son contenu ne se met pas en forme d'ici. Lui imposer une hauteur ferait couper le défi
   interactif le jour où Cloudflare décide d'en présenter un.
   ⚠️ Une marge, et rien d'autre : sans elle, le widget se colle à la case des conditions
   et les deux gestes se lisent comme un seul. */
.turnstile[b-7mdfqnrd4b] {
    margin: 1rem 0;
}
/* /Components/Pages/ReserverRetour.razor.rz.scp.css */
/* Page de retour de paiement. CSS isole : le CSS scoped de Blazor s'applique par
   COMPOSANT, pas par dossier — les regles de Reserver.razor.css ne descendent pas ici. */

.confirmed[b-ifxk5ztspa] {
    padding: 1.25rem;
    border-left: 4px solid #0f766e;
    background: #f0fdfa;
    margin-bottom: 1.25rem;
    max-width: 34rem;
}

.confirmed .slot[b-ifxk5ztspa] {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}

/* 🔴 Majuscule sur la PREMIERE LETTRE seulement. `text-transform: capitalize` la met a
   chaque mot et produit « Jeudi 20 Août 2026 À 15:30 » — en francais, ni le mois ni la
   preposition ne prennent de majuscule. */
.confirmed .slot[b-ifxk5ztspa]::first-letter {
    text-transform: uppercase;
}

.confirmed p[b-ifxk5ztspa] {
    margin: .25rem 0;
}

button[b-ifxk5ztspa] {
    padding: .6rem 1.1rem;
    border-radius: .375rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    cursor: pointer;
}