/* RegenSuivi - styles applicatifs
   Complete le CSS Bootstrap fourni par le template. */

/* ================================================================ tokens
   Charte REGENERESCENCE, relevee sur regenerescence.be (14/08/2026).

   🔴 POURQUOI DES TOKENS PLUTOT QU'UNE PASSE DE REMPLACEMENT : la cliente
   arrive ici en cliquant « Prendre rendez-vous » depuis le site du cabinet. Si
   /reserver ne lui ressemble pas, elle croit avoir change de site — au moment
   precis ou on lui demande sa carte. La couleur n'est pas une preference ici,
   c'est une continuite de confiance.

   ⚠️ LE BORDEAUX DE LA CHARTE (#8C2F3E) N'EST PAS REPRIS DANS L'INTERFACE.
   Il est decoratif sur le site (sous-titres, numeros), mais il est a un cheveu
   du rouge des actions destructives (--rg-danger). Deux roles a la meme couleur,
   et « Rembourser 25,00 € » aurait l'air d'un titre. Le rouge reste reserve a ce
   qui detruit ou deplace de l'argent. */

:root {
    /* Vert d'eau : l'accent du cabinet. */
    --rg-accent: #7FBFB5;
    --rg-accent-hover: #5FA79C;
    /* 🔴 Le vert d'eau sur blanc ne passe PAS le contraste du texte courant.
       Tout texte en accent utilise la version profonde, jamais --rg-accent. */
    --rg-accent-deep: #2C7368;
    --rg-accent-soft: #E8F4F2;
    --rg-accent-line: #BFDFDA;

    /* Neutres */
    --rg-ink: #1F2A2E;
    --rg-muted: #6B7A7E;
    --rg-line: #E4EAE9;
    --rg-surface: #FFFFFF;
    --rg-bg: #FAFAFA;

    /* Etats. Le rouge ne sert qu'aux actions irreversibles et aux erreurs. */
    --rg-danger: #B02A37;
    --rg-danger-soft: #FDF3F4;
    --rg-danger-line: #F1C9C9;
    --rg-warn: #B5820A;

    /* Attente : ni succes ni danger. Le vert dirait « tout va bien », le rouge
       ferait d'un retard une catastrophe. Une reservation pas encore synchronisee
       n'est ni l'un ni l'autre : elle demande un geste, pas une alarme. */
    --rg-wait: #FDF3E7;
    --rg-wait-ink: #8A5A18;

    /* 🔴 UN SEUL jeton pour le texte pose SUR le vert d'eau. La maquette en
       portait une seconde valeur (#123B35) pour le meme role, ecrite en dur a
       trois endroits : deux valeurs pour un role, c'est la lecon 5 de la S15 qui
       recommence avant meme d'avoir servi. */
    --rg-on-accent: #0F2C28;

    /* Formes : arrondies et ombres douces, comme les cartes du site. */
    --rg-radius: 0.5rem;
    --rg-radius-sm: 0.375rem;
    --rg-shadow: 0 1px 3px rgba(31, 42, 46, 0.06), 0 1px 2px rgba(31, 42, 46, 0.04);

    /* Ombre plus marquee, reservee a ce qui doit flotter au-dessus du reste :
       le guichet, et rien d'autre. Si tout flotte, plus rien ne ressort. */
    --rg-shadow-lift: 0 2px 4px rgba(31, 42, 46, 0.04), 0 10px 24px rgba(44, 115, 104, 0.08);
}

/* ---------------------------------------------------------------- polices
   Karla (texte) et Newsreader (titres), HEBERGEES localement par
   07-polices-locales.ps1. Voir wwwroot/polices.css.

   🔴 Declarees ICI et nulle part ailleurs. app.css portait un
   `html, body { font-family: ... }` du gabarit : deux feuilles nommant la meme
   chose, exactement le defaut qui a fait croire en S15 que la recoloration des
   boutons etait sans effet. La declaration du gabarit a ete retiree. */

html, body {
    font-family: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* 🔴 Les titres sont en serif, en graisse NORMALE. Un serif gras imite le
   document officiel ; un serif normal fait le cabinet de soins. Et c'est ce que
   porte regenerescence.be, d'ou la cliente arrive. */
h1, h2, h3 {
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* ---------------------------------------------------------------- generique */

.toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 1.25rem;
    flex-wrap: wrap;
}

.search-input {
    flex: 1 1 20rem;
    max-width: 28rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius-sm);
    font-size: 1rem;
}

.search-input:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--rg-accent);
    box-shadow: 0 0 0 0.2rem rgba(127, 191, 181, 0.30);
}

.muted { color: var(--rg-muted); font-size: 0.9rem; }

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-head h1 { margin-bottom: 0.25rem; }

/* ---------------------------------------------------------------- boutons */

.btn-primary, .btn-plain, .btn-danger-plain {
    padding: 0.4rem 0.9rem;
    border-radius: var(--rg-radius-sm);
    cursor: pointer;
    font-size: 0.95rem;
    border: 1px solid transparent;
}

/* 🔴 Texte fonce sur le vert d'eau, jamais blanc : le blanc sur #7FBFB5 tombe
   sous le seuil de contraste, et ce bouton porte « Payer l'acompte ». */
.btn-primary { background: var(--rg-accent); color: var(--rg-on-accent); border-color: var(--rg-accent); font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--rg-accent-hover); border-color: var(--rg-accent-hover); }
.btn-plain { background: var(--rg-surface); color: var(--rg-ink); border-color: var(--rg-line); }
.btn-plain:hover { background: var(--rg-accent-soft); border-color: var(--rg-accent-line); }
.btn-danger-plain { background: transparent; color: var(--rg-danger); border-color: transparent; }
.btn-danger-plain:hover { text-decoration: underline; }

/* Le focus clavier est visible partout, et il est de la couleur du cabinet. */
:focus-visible { outline: 2px solid var(--rg-accent-deep); outline-offset: 2px; }

button:disabled { opacity: 0.45; cursor: default; }

/* ---------------------------------------------------------------- tableaux */

table.grid { width: 100%; border-collapse: collapse; }

table.grid th, table.grid td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--rg-line);
}

table.grid th {
    font-weight: 600;
    color: var(--rg-accent-deep);
    border-bottom-width: 2px;
    white-space: nowrap;
}

table.grid tbody tr:hover { background: var(--rg-accent-soft); }
table.grid tbody tr.clickable { cursor: pointer; }

.pager { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }

.pager button {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--rg-line);
    background: var(--rg-surface);
    border-radius: var(--rg-radius-sm);
    cursor: pointer;
}

/* ---------------------------------------------------------------- messages */

.alert-error, .alert-info {
    padding: 1rem 1.25rem;
    border-radius: var(--rg-radius);
    max-width: 48rem;
    margin: 1rem 0;
}

.alert-error { border: 1px solid var(--rg-danger-line); background: #F8D7DA; color: #842029; }
.alert-info  { border: 1px solid var(--rg-accent-line); background: var(--rg-accent-soft); color: #1E5A51; }

.alert-error p, .alert-info p { margin: 0.5rem 0 0.75rem; }

.alert-error button {
    padding: 0.35rem 0.9rem;
    border: 1px solid #842029;
    background: transparent;
    color: #842029;
    border-radius: var(--rg-radius-sm);
    cursor: pointer;
}

.form-error { color: var(--rg-danger); font-size: 0.9rem; margin: 0.5rem 0; }
.warn { color: var(--rg-warn); font-size: 0.85rem; margin-top: 0.35rem; }

/* ---------------------------------------------------------------- badges */

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-ok    { background: var(--rg-accent-soft); color: var(--rg-accent-deep); }
.badge-draft { background: #FFF3CD; color: #664D03; }
.badge-muted { background: #EDF0F0; color: var(--rg-muted); }

/* ---------------------------------------------------------------- formulaires */

.card-form, .block {
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius);
    padding: 1.25rem;
    margin: 1rem 0;
    background: var(--rg-surface);
    box-shadow: var(--rg-shadow);
}

.card-form label, .question-editor label:not(.check) {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 0.9rem;
    color: var(--rg-ink);
}

.card-form input, .card-form select,
textarea, .question-editor input, .question-editor select {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
}

.form-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; }

.inline-form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.inline-form input, .inline-form select { width: auto; margin-top: 0; }
.inline-form .grow { flex: 1 1 18rem; }
.full { width: 100%; margin-bottom: 0.75rem; }

.check {
    display: flex !important;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    margin: 0 !important;
}

.check input { width: auto; margin: 0; }

/* ---------------------------------------------------------------- questionnaire */

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.section-head h3 { margin: 0 0 0.75rem; }

ol.questions { padding-left: 1.25rem; margin: 0 0 1rem; }
ol.questions > li { margin-bottom: 0.85rem; }

.question-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.type-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    background: var(--rg-accent-soft);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: var(--rg-accent-deep);
}

.required { color: var(--rg-danger); margin-left: 0.2rem; font-weight: 700; }
.help { font-size: 0.85rem; color: var(--rg-muted); margin-top: 0.2rem; }

ul.choices {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    color: var(--rg-muted);
}

.question-editor {
    border-top: 1px dashed var(--rg-line);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.choices-editor { margin-bottom: 0.75rem; }

.hint {
    font-size: 0.85rem;
    color: var(--rg-muted);
    margin: 0.35rem 0 0;
}

.hint-ok   { color: var(--rg-accent-deep); }
.hint-warn { color: var(--rg-warn); }

.form-actions .hint { align-self: center; margin: 0; }

/* ---------------------------------------------------------------- saisie */

.save-bar {
    display: flex;
    align-items: center;
    min-height: 1.6rem;
    margin: 0.5rem 0 1rem;
}

.intro-block {
    background: var(--rg-accent-soft);
    font-style: italic;
    color: #1E5A51;
}

.question-block {
    padding: 0.85rem 1rem;
    border-left: 3px solid transparent;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

.question-block.missing {
    border-left-color: var(--rg-danger);
    background: var(--rg-danger-soft);
}

.question-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.answer-field input[type="text"],
.answer-field input[type="number"],
.answer-field input[type="date"],
.answer-field textarea {
    width: 100%;
    max-width: 32rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius-sm);
    font-size: 1rem;
    font-family: inherit;
}

.answer-field .options {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.answer-field .option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Cible tactile confortable : cet ecran est utilise sur iPad, debout. */
    min-height: 2.5rem;
    cursor: pointer;
}

.answer-field .option input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

.version-tag {
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

/* ---------------------------------------------------------------- signatures */

.signature-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.signature-slot {
    flex: 1 1 20rem;
    min-width: 18rem;
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius);
    padding: 0.9rem;
}

.signature-slot-title {
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.signature-empty {
    padding: 1.75rem 0;
    text-align: center;
    color: var(--rg-muted);
    font-style: italic;
    border: 1px dashed var(--rg-line);
    border-radius: var(--rg-radius-sm);
    margin-bottom: 0.7rem;
}

.signature-image {
    display: block;
    width: 100%;
    max-width: 20rem;
    border-bottom: 1px solid var(--rg-ink);
    margin-bottom: 0.4rem;
}

.signature-caption {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.signature-pad {
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius);
    padding: 0.7rem;
    background: var(--rg-surface);
}

.signature-pad-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.signature-canvas {
    display: block;
    width: 100%;
    height: 180px;
    background: #FDFEFE;
    border: 1px dashed var(--rg-accent-line);
    border-radius: var(--rg-radius-sm);
    /* Indispensable au tactile : sans cette regle, le geste de trace fait defiler
       la page au lieu de dessiner. */
    touch-action: none;
    cursor: crosshair;
}

.signature-pad-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.publish-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 0 2rem;
}

/* --- Zone dangereuse : suppression et effacement -------------------------
   Visuellement mise a l'ecart du reste. Ces actions sont irreversibles et ne
   doivent pas se cliquer par inadvertance en parcourant la page. */

.danger-block {
    border: 1px solid var(--rg-danger-line);
    background: var(--rg-danger-soft);
}

.danger-block h3 {
    color: var(--rg-danger);
}

.danger-block .btn-danger,
.danger-block .btn-danger-plain {
    margin-right: 0.6rem;
}

.btn-danger {
    background: var(--rg-danger);
    color: #fff;
    border: 1px solid var(--rg-danger);
    border-radius: var(--rg-radius-sm);
    padding: 0.45rem 0.9rem;
    cursor: pointer;
}

.btn-danger:disabled {
    background: #D9A1A7;
    border-color: #D9A1A7;
    cursor: not-allowed;
}

.badge-erased {
    background: #EDF0F0;
    color: var(--rg-muted);
}

/* ================================================== espace praticienne (S16)
   Vocabulaire de l'ecran de travail quotidien de Nathalie.

   🔴 TOUS CES NOMS SONT NEUFS, et c'est deliberé. La maquette proposait `.card`,
   `.badge`, `.grid`, `.section-head`, `.btn-danger` — qui existent DEJA ici ou dans
   Bootstrap, avec d'autres valeurs. Les reprendre aurait recolore /questionnaires et
   inverse le sens de `.btn-danger` (rouge plein chez nous, contour blanc dans la
   maquette) sur des boutons qui detruisent des versions de questionnaire.
   Le francais suit la convention deja posee par PublicLayout (`marque`, `entete-publique`,
   `pied-publique`) : un nom francais ne peut pas entrer en collision avec Bootstrap. */

/* ---- l'en-tete de page : la date, le titre, et l'etat du matin ---- */

.jour {
    margin: 0 0 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rg-accent-deep);
}

/* ---- panneau : la carte de l'espace praticienne ---- */

.panneau {
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--rg-line);
    border-radius: 0.9rem;
    background: var(--rg-surface);
    box-shadow: var(--rg-shadow);
}

.panneau + .panneau { margin-top: 1rem; }

/* 🔴 UNE SEULE chose flotte sur cet ecran : le guichet. C'est le seul reglage qui
   decide si des clientes peuvent arriver. Si tout flottait, plus rien ne ressortirait. */
.panneau.leve { box-shadow: var(--rg-shadow-lift); }

.panneau.teinte {
    background: var(--rg-accent-soft);
    border-color: var(--rg-accent-line);
    box-shadow: none;
}

/* ---- bloc : un titre de section, son compteur, sa phrase ---- */

.bloc { margin-top: 2rem; }

.bloc-tete {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.bloc-tete h2 { margin: 0; }
.bloc-tete p { margin: 0; }

/* ---- compteur : combien de choses reclament un geste ---- */

.compteur {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: 0.1rem 0.7rem;
    border-radius: 1rem;
    background: var(--rg-accent);
    color: var(--rg-on-accent);
    font-size: 0.8rem;
    font-weight: 700;
}

/* 🔴 Zero est GRIS, pas vert. Un zero en couleur d'accent attire l'oeil vers une
   section qui n'a rien a dire, et l'habitue a ne rien y trouver. */
.compteur.zero { background: #EDF0F0; color: var(--rg-muted); }

/* ---- etat : la pastille qui qualifie une ligne ---- */

.etat {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    /* L'etat du matin est un LIEN vers la section « A rattraper », mais il se lit comme
       une pastille. Souligne, il ressemblait a un lien de navigation egare en haut de
       page plutot qu'a une reponse. */
    text-decoration: none;
}

.etat.ok      { background: var(--rg-accent-soft); color: var(--rg-accent-deep); }
.etat.attente { background: var(--rg-wait); color: var(--rg-wait-ink); }
.etat.eteint  { background: #F1F3F2; color: var(--rg-muted); }

/* ---- rien a rattraper : ce que le VIDE signifie ---- */

.rien-liste { display: flex; flex-direction: column; gap: 1.1rem; }

.rien { display: flex; gap: 0.9rem; align-items: flex-start; }

.rien h3 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.rien p  { margin: 0; font-size: 0.9rem; color: var(--rg-muted); }

.pastille {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--rg-accent-soft);
    color: var(--rg-accent-deep);
    font-size: 1.1rem;
}

/* ---- tableaux larges : le defilement est PORTE, pas subi ---- */

/* 🔴 Sur `.table-large` seulement, jamais sur `table.grid` en general : la liste des
   clientes et celle des questionnaires tiennent dans la fenetre et n'ont aucune raison
   de defiler. La maquette imposait un min-width a TOUS les tableaux de l'application. */
.table-large { overflow-x: auto; }
.table-large table.grid { min-width: 62rem; }

/* 🔴 Les dates, les heures et les numeros ne se coupent PAS. Sans cette regle,
   « +32 498 22 14 96 » se cassait sur trois lignes et « lun. 17 aout 2026 10:00 » sur
   deux : Nathalie lit ces colonnes au telephone, pendant qu'une cliente attend. Un
   numero sur trois lignes se dicte mal, et une heure coupee se lit deux fois.
   Le tableau defile lateralement plutot que de plier son contenu — c'est a cela que
   sert le conteneur au-dessus. */
.table-large table.grid td { white-space: nowrap; }

/* Les deux seules colonnes qui portent des PHRASES, et qui doivent donc se replier. */
.table-large table.grid td.cellule-erreur,
.table-large table.grid td.cellule-phrase { white-space: normal; }

.cellule-erreur { font-size: 0.85rem; color: #7C1F27; }

/* Le refus du domaine, la ou se trouverait le controle. Borne en largeur : une phrase
   d'explication qui s'etale sur toute une cellule ne se lit pas. */
.refus {
    margin: 0;
    max-width: 34ch;
    font-size: 0.85rem;
    color: var(--rg-wait-ink);
}

/* ---- actions en fin de ligne ---- */

.actions-ligne {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* La reponse d'un bouton s'affiche SOUS le bouton. Vecu en S13 : la confirmation du
   guichet apparaissait deux ecrans plus bas, donc n'etait pas lue, donc on recliquait. */
.reponse { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--rg-accent-deep); }
.reponse.rate { color: var(--rg-danger); }

/* ---- le guichet ferme, vu par la CLIENTE (S22) ----
   🔴 CET ECRAN EST SOUVENT LE SEUL QU'ELLE AURA VU DU CABINET, et le telephone y est la
   seule porte de sortie. Le numero y etait deux fois — en petit dans l'en-tete, et noye
   dans un bandeau beige — donc nulle part. Il devient l'objet de la page.

   ⚠️ Le vert d'eau plutot que l'ambre du bandeau d'avertissement : rien n'est en panne, le
   cabinet est simplement joignable autrement. Une couleur d'alerte ferait croire a un
   incident et n'inviterait pas a appeler. */

.guichet-ferme {
    max-width: 34rem;
    margin: 2rem 0;
    padding: 2rem 1.75rem;
    border: 1px solid var(--rg-accent-line);
    border-radius: var(--rg-radius);
    background: var(--rg-accent-soft);
    text-align: center;
}

.guichet-ferme-titre {
    margin: 0 0 0.35rem;
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--rg-ink);
}

.guichet-ferme-suite { margin: 0; font-size: 0.95rem; color: var(--rg-accent-deep); }

/* 🔴 LA CIBLE TACTILE AVANT L'ESTHETIQUE : au moins 3 rem de haut, doigt compris. Un
   numero de telephone qu'on rate au premier appui se recopie a la main, et c'est la qu'on
   abandonne — sur l'ecran d'ou l'on voulait justement appeler. */
.tel-cabinet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.25rem;
    margin-top: 1.1rem;
    padding: 0.65rem 1.5rem;
    border-radius: 2rem;
    background: var(--rg-accent);
    color: var(--rg-on-accent);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    /* Le numero ne se coupe JAMAIS : coupe, il se dicte mal et se compose faux. */
    white-space: nowrap;
}

.tel-cabinet:hover { background: var(--rg-accent-hover); color: var(--rg-on-accent); }

.tel-cabinet svg {
    width: 1.4rem;
    height: 1.4rem;
    flex: none;
    /* La couleur vient du texte du bouton : un seul endroit la commande. */
    color: inherit;
}

/* En dessous, le bouton prend toute la largeur : sur un telephone, une cible pleine
   largeur ne se rate pas. */
@media (max-width: 30rem) {
    .guichet-ferme { padding: 1.5rem 1.1rem; }
    .tel-cabinet { display: flex; font-size: 1.3rem; }
}

/* ---- les trois voyants du guichet (S22) ----
   🔴 TROIS REGLAGES INDEPENDANTS, chacun avec DEUX etats et un seul geste. Ce qui
   RESULTE des trois vit dans `.consequence`, sous les tuiles. Melanger une cause et un
   effet dans le meme voyant — « bloquee » sur la tuile de la reservation — ferait croire
   que quelque chose a agi sur l'interrupteur, et chercher la cause la ou elle n'est pas.

   🔴 LA COULEUR NE SUIT PAS LE MOT « ACTIF », elle suit le SENS. Un mode essai actif est
   une anomalie ; une reservation active ne l'est pas. Trois verts uniformes ramemeraient
   la pastille verte de la S17 : un vert qui dit « tout va bien » au-dessus d'un probleme. */

.voyants {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    /* 🔴 STRETCH, pas START : les trois voyants forment une LIGNE qu'on balaie d'un regard.
       En `start`, la tuile du milieu — seule a porter un champ de date et deux boutons —
       depassait les deux autres, et l'escalier faisait lire les trois etats l'un apres
       l'autre au lieu d'un seul coup d'oeil. C'est tout ce que ce bloc doit eviter. */
    align-items: stretch;
}

/* En dessous, les trois s'empilent plutot que de se comprimer : un voyant etroit au point
   d'etre illisible ne remplit plus son office. */
@media (max-width: 56rem) {
    .voyants { grid-template-columns: minmax(0, 1fr); }
}

.voyant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.1rem 0.9rem;
    border-radius: 0.9rem;
    text-align: center;
    background: #F5F7F7;
    color: var(--rg-muted);
}

/* 🔴 L'ICONE, LE TITRE ET L'ETAT SONT ALIGNES D'UNE TUILE A L'AUTRE, quoi qu'il y ait
   dessous. Ce sont les trois seules choses qu'on lit en diagonale ; les laisser flotter
   a des hauteurs differentes obligerait a chercher chaque etat, ce qui est exactement le
   defaut que ce bloc remplace. Ce qui suit — champ, boutons, note — s'empile en dessous
   sans les deplacer. */
.voyant-titre { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--rg-muted); }
.voyant-etat  { margin: 0 0 0.2rem; font-size: 1.15rem; font-weight: 700; color: inherit; }

/* La note explique le voyant, et surtout POURQUOI un bouton est grise : un bouton
   inactif sans motif est une impasse (note de methode 4 du 00-BOOT).
   🔴 `margin-top: auto` la pousse au BAS de la tuile : les notes des trois voyants se
   lisent alors sur une meme ligne de base, au lieu de flotter chacune a sa hauteur. */
.voyant-note {
    margin: auto 0 0;
    padding-top: 0.5rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--rg-muted);
}

/* ⚠️ La reponse au clic reste SOUS la note, et bornee : c'est un message de passage, pas
   un etat. Sans la borne, elle etirait la tuile du milieu de trois lignes et cassait
   l'alignement qu'on vient de poser. */
.voyant .reponse {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    line-height: 1.45;
}

/* Le reglage est ACTIF et c'est normal. */
.voyant.vif { background: var(--rg-accent-soft); color: var(--rg-accent-deep); }

/* Le reglage est inactif : gris, sans alarme. */
.voyant.eteint { background: #F5F7F7; color: var(--rg-muted); }

/* 🔴 ARME MAIS ENDORMI : le mode essai actif SOUS une gratuite en cours. Il ne fait rien
   aujourd'hui — Mollie n'est pas appele du tout — et il fera tout le lendemain de
   l'echeance (regle rouge 28). L'ambre est le seul ton juste : le rouge crierait sur un
   present paisible, le gris mentirait sur le matin qui vient. */
.voyant.veille { background: var(--rg-wait); color: var(--rg-wait-ink); }

/* L'argent part dans le vide MAINTENANT. */
.voyant.alarme { background: var(--rg-danger-soft); color: var(--rg-danger); }

.icone-reglage {
    width: 2.1rem;
    height: 2.1rem;
    /* La couleur vient du texte de la tuile : l'etat la commande a un seul endroit. */
    color: inherit;
}

.voyant button { margin-top: 0.5rem; width: 100%; max-width: 12rem; }

.voyant .champ-date {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    max-width: 12rem;
    margin-top: 0.5rem;
}

.voyant .champ-date span { font-size: 0.78rem; color: var(--rg-muted); }
.voyant .champ-date input { width: 100%; }

/* ---- la consequence : ce qui resulte des trois reglages ----
   🔴 La seule chose a lire quand quelque chose cloche, et la seule qui parle du FUTUR.
   Neutre par defaut : une phrase encadree de couleur en permanence perd tout pouvoir
   d'alerte le jour ou elle en a besoin. */

.consequence {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--rg-radius);
    background: #F5F7F7;
}

.consequence p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.consequence p + p { margin-top: 0.4rem; }

/* 🔴 Le lien qui ouvre l'ecran de la CLIENTE. Discret — il ne doit pas concurrencer la
   phrase — mais toujours present, y compris quand la consequence est en alarme : c'est
   precisement le jour ou l'on veut aller verifier de ses yeux.
   ⚠️ `currentColor` : dans une consequence rouge ou ambre, un lien vert d'eau se lirait
   comme un element etranger colle sur le bandeau. */
.lien-reserver {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: inherit;
    /* ⚠️ Le soulignement porte sur le TEXTE seul (voir la regle sur le span ci-dessous) :
       souligner la fleche la ferait lire comme un caractere et brouillerait le pictogramme. */
    text-decoration: none;
}

.lien-reserver span { text-decoration: underline; text-underline-offset: 0.2em; }

.lien-reserver svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
    color: inherit;
}

.lien-reserver:hover span { text-decoration-thickness: 2px; }

/* Personne ne peut reserver alors que personne n'a rien ferme. Ambre : c'est une anomalie
   de configuration, pas une perte d'argent. */
.consequence.attention { background: var(--rg-wait); color: var(--rg-wait-ink); }

/* L'argent part sur le compte de TEST — maintenant, ou le matin de l'echeance. */
.consequence.alarme {
    background: var(--rg-danger-soft);
    color: #7C1F27;
    border: 1px solid var(--rg-danger-line);
}

/* ---- le guichet : l'etat a gauche, ce que la cliente paie a droite ---- */

.guichet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: 1.5rem;
    align-items: start;
}

/* En dessous, les deux colonnes s'empilent : le rappel des tarifs passe sous l'etat,
   qui est ce qu'on vient lire. */
@media (max-width: 60rem) {
    .guichet { grid-template-columns: minmax(0, 1fr); }
}

.depuis { margin: 0.4rem 0 0.8rem; }

.recap-admin { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.recap-admin > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--rg-accent-line);
}

.recap-admin > div:last-child { border-bottom: 0; padding-bottom: 0; }
.recap-admin dt { font-size: 0.85rem; color: var(--rg-accent-deep); }
.recap-admin dd { margin: 0; font-size: 0.9rem; font-weight: 600; text-align: right; }

/* ---- le choix d'un creneau de report, sur une ligne de tableau ---- */

.deplacer { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.deplacer select { max-width: 14rem; }

.motif { display: flex; flex-direction: column; gap: 0.3rem; }
.motif span { font-size: 0.85rem; font-weight: 600; color: var(--rg-accent-deep); }

/* 🔴 REGLE 22, dans sa variante la plus sournoise : un nom reutilise dans un AXE
   different. `.search-input` porte `flex: 1 1 20rem`, ecrit pour `.toolbar` qui est en
   LIGNE — la, 20rem est une largeur. Dans `.motif`, qui est en COLONNE, la meme
   declaration devient une HAUTEUR : le champ du motif s'affichait sur 320 px de haut.
   Rien n'etait faux, la propriete a simplement change de sens en changeant de parent.
   ⚠️ Constate a l'oeil le 17/08 (S18), sur un ecran refondu en S16 et jamais regarde
   avec une liste NON VIDE : le champ n'apparait que s'il y a des rendez-vous a venir. */
.motif .search-input { flex: 0 0 auto; max-width: 24rem; }

/* 🔴 En ambre, pas en rouge. Une cliente non prevenue n'est pas une erreur du systeme :
   c'est un geste qui reste a faire. Le rouge est reserve a ce qui detruit ou deplace de
   l'argent, et l'user ailleurs le rendrait invisible la ou il compte. */
.non-prevenue { color: var(--rg-wait-ink); }