/* ═══════════════════════════════════════════════════════════════════════════
   Prise de rendez-vous en ligne — la page vue par le patient.

   Deux emprunts assumés :
   • À Calendly, le parcours : une question à la fois, un fil d'étapes visible,
     beaucoup de blanc, une seule couleur d'accent.
   • À Doctolib, la bande de jours : la semaine s'embrasse d'un coup d'œil et
     les horaires se prennent en un seul geste, sans ouvrir de calendrier.

   Rien d'importé : ni police distante, ni framework. La page se charge sur un
   réseau mobile médiocre, en salle d'attente comme dans le métro.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --vert:      #48801D;
    --vert-fonce:#3a6b16;
    --vert-pale: #f2f7ec;
    --bleu:      #2d435d;
    --gris:      #6b7a8c;
    --gris-pale: #8a99aa;
    --trait:     #e6ebe2;
    --fond:      #f7f9f5;
    --rouge:     #b4342a;
    --rouge-pale:#fdf1f0;
    --ombre:     0 1px 3px rgba(30,50,30,.07), 0 10px 30px rgba(30,50,30,.06);
    --rayon:     14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
    background: var(--fond); color: var(--bleu);
    font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
    padding: 24px 16px 60px;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--vert); }

.enveloppe { width: min(880px, 100%); margin: 0 auto; }

/* ─── En-tête ───────────────────────────────────────────────────────────── */
.entete { text-align: center; margin-bottom: 22px; }
.entete .pastille {
    width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 10px;
    background: var(--vert); color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 1.05rem; letter-spacing: .5px;
}
.entete h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.2px; }
.entete p  { color: var(--gris); font-size: .92rem; margin-top: 3px; }

/* ─── Fil des étapes ────────────────────────────────────────────────────── */
.fil { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 20px; }
.fil .pas { display: flex; align-items: center; gap: 7px; color: var(--gris-pale); font-size: .84rem; }
.fil .pas b {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: #e9eeE4; color: var(--gris); font-size: .76rem; font-weight: 700;
    transition: background .18s, color .18s;
}
.fil .pas.actif      { color: var(--bleu); font-weight: 600; }
.fil .pas.actif b    { background: var(--vert); color: #fff; }
.fil .pas.fait b     { background: var(--vert-pale); color: var(--vert); }
.fil .lien { width: 26px; height: 1px; background: var(--trait); }
@media (max-width: 560px) { .fil .pas span { display: none; } .fil .lien { width: 16px; } }

/* ─── Carte ─────────────────────────────────────────────────────────────── */
.carte {
    background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre);
    padding: 24px 26px; margin-bottom: 16px;
}
.carte > h2 { font-size: 1.02rem; font-weight: 650; margin-bottom: 3px; }
.carte > p.aide { color: var(--gris); font-size: .88rem; margin-bottom: 18px; }
@media (max-width: 560px) { .carte { padding: 20px 16px; } }

/* ─── Étape 1 : les séances ─────────────────────────────────────────────── */
.seances { display: grid; gap: 10px; }
.seance {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    border: 1.5px solid var(--trait); border-radius: 11px; padding: 14px 16px;
    transition: border-color .14s, background .14s, transform .08s;
}
.seance:hover  { border-color: var(--vert); background: var(--vert-pale); }
.seance:active { transform: scale(.995); }
.seance .barre { width: 4px; align-self: stretch; border-radius: 3px; background: var(--vert); flex-shrink: 0; }
.seance .corps { flex: 1; min-width: 0; }
.seance .nom   { font-weight: 640; }
.seance .desc  { color: var(--gris); font-size: .85rem; margin-top: 2px; }
.seance .meta  { display: flex; gap: 12px; color: var(--gris); font-size: .84rem; margin-top: 5px; }
.seance .meta b { color: var(--bleu); font-weight: 640; }
.seance .fleche { color: var(--gris-pale); font-size: 1.2rem; flex-shrink: 0; }

/* Choix du praticien : seulement s'il y en a plusieurs */
.praticiens { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.praticien {
    border: 1.5px solid var(--trait); border-radius: 9px; padding: 8px 14px;
    font-size: .88rem; font-weight: 600; transition: all .14s;
}
.praticien:hover  { border-color: var(--vert); }
.praticien.actif  { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); }

/* ─── Étape 2 : la bande de jours ───────────────────────────────────────── */
.semaine-nav {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    padding-bottom: 14px; border-bottom: 1px solid var(--trait);
}
.semaine-nav .titre { font-weight: 640; font-size: .95rem; text-transform: capitalize; }
.semaine-nav .fleches { display: flex; gap: 4px; margin-left: auto; }
.semaine-nav .fleches button {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--trait);
    color: var(--gris); display: grid; place-items: center; font-size: 1rem;
    transition: all .14s;
}
.semaine-nav .fleches button:hover:not(:disabled) { border-color: var(--vert); color: var(--vert); }
.semaine-nav .fleches button:disabled { opacity: .35; cursor: default; }

.jours { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); gap: 6px; }
@media (max-width: 720px) {
    /* Les sept jours sont volontairement parcourus au doigt. Leur largeur ne
       doit toutefois jamais devenir la largeur minimale de la page entière :
       sinon la carte et l'en-tête débordent du téléphone. */
    .jours {
        display: flex; width: 100%; max-width: 100%; min-width: 0;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        padding-bottom: 8px; -webkit-overflow-scrolling: touch;
    }
    .jours .jour { flex: 0 0 96px; scroll-snap-align: start; }
}
.jour { text-align: center; }
.jour .tete { padding: 6px 0 10px; border-bottom: 1px solid var(--trait); margin-bottom: 8px; }
.jour .tete .sem { font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--gris-pale); }
.jour .tete .num { font-size: 1.02rem; font-weight: 650; margin-top: 1px; }
.jour.aujourdhui .tete .num { color: var(--vert); }
.jour .creneaux { display: grid; gap: 5px; max-height: 260px; overflow-y: auto; padding-right: 2px; }
.jour .vide { color: var(--gris-pale); font-size: .8rem; padding-top: 10px; }

.creneau {
    padding: 7px 4px; border-radius: 7px; border: 1px solid var(--trait);
    font-size: .87rem; font-weight: 600; color: var(--vert-fonce);
    transition: background .12s, border-color .12s, color .12s;
}
.creneau:hover  { background: var(--vert); border-color: var(--vert); color: #fff; }
.creneau.actif  { background: var(--vert); border-color: var(--vert); color: #fff; }

.plus-tot {
    display: block; width: 100%; margin-top: 14px; padding: 10px;
    border-radius: 9px; background: var(--vert-pale); color: var(--vert-fonce);
    font-size: .87rem; font-weight: 600;
}
.aucun-creneau { text-align: center; color: var(--gris); padding: 26px 10px; }

/* ─── Étape 3 : les coordonnées ─────────────────────────────────────────── */
.recap {
    display: flex; align-items: flex-start; gap: 12px; background: var(--vert-pale);
    border-radius: 11px; padding: 14px 16px; margin-bottom: 20px;
}
.recap .quoi { flex: 1; min-width: 0; }
.recap .quoi .t { font-weight: 650; }
.recap .quoi .q { color: var(--vert-fonce); font-weight: 640; margin-top: 2px; }
.recap .quoi .o { color: var(--gris); font-size: .86rem; margin-top: 3px; }
.recap button { color: var(--gris); font-size: .84rem; text-decoration: underline; flex-shrink: 0; }

/* Le mot laissé par le cabinet — « sonnez à l'interphone B », « apportez vos
   dernières analyses ». Détaché du reste par un filet : c'est une consigne à
   lire, pas une ligne d'adresse de plus. */
.note-praticien {
    margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--trait, #e6ebe2);
    font-size: .88rem; color: var(--bleu, #2d435d); white-space: pre-line;
}

.grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grille2 { grid-template-columns: 1fr; } }

.champ { margin-bottom: 12px; }
.champ label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; }
.champ label .opt { color: var(--gris-pale); font-weight: 400; }
.champ input, .champ textarea {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--trait);
    border-radius: 9px; background: #fff; transition: border-color .14s;
}
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--vert); }
.champ textarea { resize: vertical; min-height: 78px; }
.champ .note { font-size: .8rem; color: var(--gris); margin-top: 5px; }
.champ.erreur input, .champ.erreur textarea { border-color: var(--rouge); }
.champ .dit-erreur { color: var(--rouge); font-size: .82rem; margin-top: 4px; }

/* Le rappel qui évite qu'on écrive du médical dans un champ libre. */
.garde-fou {
    display: flex; gap: 9px; align-items: flex-start;
    background: #fffaf0; border: 1px solid #f0e2c4; border-radius: 9px;
    padding: 10px 12px; font-size: .82rem; color: #7a6535; margin-top: 6px;
}
.garde-fou .ico { flex-shrink: 0; }

/* ─── Boutons ───────────────────────────────────────────────────────────── */
.btn {
    padding: 11px 20px; border-radius: 9px; font-weight: 650; font-size: .92rem;
    transition: filter .14s, background .14s, border-color .14s;
}
.btn-vert { background: var(--vert); color: #fff; }
.btn-vert:hover:not(:disabled) { filter: brightness(1.07); }
.btn-vert:disabled { opacity: .55; cursor: default; }
.btn-clair { border: 1.5px solid var(--trait); color: var(--gris); }
.btn-clair:hover { border-color: var(--gris-pale); color: var(--bleu); }
.btn-rouge { border: 1.5px solid #eccfcc; color: var(--rouge); }
.btn-rouge:hover { background: var(--rouge-pale); }
.barre-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.barre-actions .droite { margin-left: auto; }

/* ─── Messages ──────────────────────────────────────────────────────────── */
.alerte {
    border-radius: 9px; padding: 11px 14px; font-size: .88rem; margin-bottom: 16px;
    background: var(--rouge-pale); color: var(--rouge); border: 1px solid #eccfcc;
}
.alerte.info { background: var(--vert-pale); color: var(--vert-fonce); border-color: #d8e6c8; }

.chargement { text-align: center; color: var(--gris); padding: 30px 10px; font-size: .9rem; }
.chargement::before {
    content: ''; display: block; width: 22px; height: 22px; margin: 0 auto 10px;
    border: 2.5px solid var(--trait); border-top-color: var(--vert);
    border-radius: 50%; animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chargement::before { animation-duration: 2.4s; } }

/* ─── Confirmation ──────────────────────────────────────────────────────── */
.fini { text-align: center; padding: 8px 0 4px; }
.fini .coche {
    width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 14px;
    background: var(--vert-pale); color: var(--vert); display: grid; place-items: center;
    font-size: 1.7rem;
}
.fini h2 { font-size: 1.15rem; margin-bottom: 6px; }
.fini p  { color: var(--gris); font-size: .9rem; }
.fini .bloc {
    background: var(--vert-pale); border-radius: 11px; padding: 16px; margin: 18px 0;
    text-align: left;
}
.fini .bloc .t { font-weight: 650; }
.fini .bloc .q { color: var(--vert-fonce); font-weight: 640; margin-top: 2px; }
.fini .bloc .o { color: var(--gris); font-size: .86rem; margin-top: 4px; }

/* ─── Pied ──────────────────────────────────────────────────────────────── */
.pied { text-align: center; color: var(--gris-pale); font-size: .8rem; margin-top: 22px; }
.pied a { color: var(--gris); }

.masque { display: none !important; }

/* ═══ Fiche du praticien, à gauche du calendrier ═════════════════════════════
   Doctolib et Médoucine placent tous deux le praticien à gauche et la prise de
   rendez-vous à droite : on sait à qui l'on a affaire avant de choisir une
   heure. Sur mobile la fiche passe au-dessus, mais raccourcie — la présentation
   longue se déplie à la demande, pour ne pas repousser le calendrier hors de
   l'écran. */

.enveloppe { width: min(1120px, 100%); }

.deux-colonnes { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr); } }

/* Une piste de grille a par défaut une largeur minimale égale à son contenu.
   Ici ce contenu est la bande de jours (volontairement plus large sur mobile) :
   sans cette règle, elle élargit toute la page au lieu de défiler seule. */
.colonne-rdv { min-width: 0; }

/* Le collant porte sur la colonne entière, en-tête comprise, et non plus sur la
   seule fiche : les deux ne font plus qu'un bloc. Il ne s'engage que là où cette
   colonne est la plus courte des deux — fiche brève, longue liste de créneaux ;
   ailleurs elle défile normalement, faute de place pour glisser. */
.colonne-gauche { position: sticky; top: 20px; }
@media (max-width: 900px) { .colonne-gauche { position: static; } }

.fiche {
    background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre);
    padding: 22px 22px 20px;
}

.fiche .portrait {
    width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px;
    object-fit: cover; display: block; background: var(--vert-pale);
}
.fiche .portrait-vide {
    width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px;
    background: var(--vert); color: #fff; display: grid; place-items: center;
    font-size: 1.9rem; font-weight: 700; letter-spacing: .5px;
}

.fiche h2 { font-size: 1.08rem; font-weight: 700; text-align: center; line-height: 1.3; }
.fiche .accroche {
    text-align: center; color: var(--gris); font-size: .87rem; font-style: italic;
    margin-top: 6px; line-height: 1.45;
}

/* ─── Avis ────────────────────────────────────────────────────────────────
   Trois pastilles alignées — « Médoucine », « 4,95/5 », « (2785 avis) » —
   donnaient trois informations de même poids, dont aucune ne ressortait. La
   note est ce qu'on vient chercher : elle prend la place, la plateforme et le
   nombre d'avis la qualifient en dessous. */
.fiche .avis {
    display: grid; gap: 1px; margin: 16px 0 4px;
    background: var(--trait); border: 1px solid var(--trait); border-radius: 11px;
    overflow: hidden;   /* le filet entre deux lignes vient du fond */
}
.fiche .avis-ligne {
    position: relative; display: block; text-decoration: none;
    background: #fff; padding: 11px 14px; color: var(--bleu);
    transition: background .12s;
}
.fiche a.avis-ligne:hover { background: var(--vert-pale); }

.fiche .avis-haut { display: flex; align-items: baseline; gap: 8px; }
.fiche .avis .note { font-size: 1.32rem; font-weight: 700; line-height: 1.1;
                     color: var(--vert-fonce); font-variant-numeric: tabular-nums; }
.fiche .avis .sur  { font-size: .82rem; color: var(--gris-pale); }
.fiche .avis-bas   { margin-top: 3px; font-size: .78rem; color: var(--gris);
                     text-transform: uppercase; letter-spacing: .03em; }

/* La bande dorée est aussi large que la note : « 4,95 » se voit avant de se
   lire. Décoratif — le chiffre est juste à côté. */
.fiche .etoiles {
    position: relative; display: inline-block; flex-shrink: 0;
    color: #dfe4ea; font-size: .95rem; letter-spacing: 1px; line-height: 1;
}
.fiche .etoiles i {
    position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
    font-style: normal; color: #e8a917;
}
.fiche .avis-ligne .hors-site {
    position: absolute; top: 10px; right: 12px;
    font-size: .78rem; color: var(--gris-pale);
}

/* Un numéro par ligne : deux collés par une barre oblique font un lien
   d'appel inutilisable. */
.fiche .appels { display: grid; gap: 6px; margin-top: 14px; }

.fiche .etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.fiche .etiquettes span {
    border: 1px solid var(--trait); border-radius: 7px; padding: 4px 9px;
    font-size: .79rem; color: var(--gris);
}

.fiche .lieu {
    display: flex; gap: 8px; align-items: flex-start; margin-top: 16px;
    padding-top: 16px; border-top: 1px solid var(--trait);
    font-size: .85rem; color: var(--gris); line-height: 1.5;
}
.fiche .lieu .ico { flex-shrink: 0; }

.fiche .appel {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; border-radius: 9px; text-decoration: none;
    border: 1.5px solid var(--vert); color: var(--vert-fonce); font-weight: 640;
    font-size: .87rem; font-variant-numeric: tabular-nums;
}
.fiche .appel:hover { background: var(--vert-pale); }

/* Appeler occupe la largeur, écrire tient dans deux carrés à sa droite : les
   trois actions portent sur le même numéro et doivent se lire comme un bloc,
   sans que l'une prenne le pas sur les deux autres à surface égale. */
.fiche .appel-groupe { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.fiche .appel-canal {
    display: grid; place-items: center; width: 44px; border-radius: 9px;
    border: 1.5px solid var(--trait);
    text-decoration: none; transition: border-color .12s, background .12s;
}
/* Le glyphe porte sa couleur AU REPOS, et non au survol : ces deux boutons
   servent d'abord sur un téléphone, où le survol n'existe pas — ils y seraient
   restés gris pour toujours. Le vert de WhatsApp et le bleu du message sont ce
   que l'œil reconnaît avant de lire quoi que ce soit. La bordure reste neutre :
   trois boutons colorés côte à côte se disputeraient l'attention. */
.fiche .appel-canal.whatsapp { color: #128c47; }
.fiche .appel-canal.sms      { color: #2a5fa8; }
/* L'appel en second, quand le cabinet accepte les deux : même traitement que
   les autres canaux, et la couleur du vert du cabinet plutôt qu'une teinte de
   plus. */
.fiche .appel-canal.appel    { color: var(--vert); }
.fiche .appel-canal.whatsapp:hover { border-color: #25d366; background: #eefaf1; }
.fiche .appel-canal.sms:hover      { border-color: #3b7dd8; background: #eef4fd; }
.fiche .appel-canal.appel:hover    { border-color: var(--vert); background: var(--vert-pale); }
.fiche .appel-canal:focus-visible {
    outline: 2px solid var(--vert); outline-offset: 2px;
}

/* Doigt plutôt que souris : la cible reste au-dessus des 44 px recommandés,
   et la ligne ne se réduit pas au point de coller les trois actions. */
@media (max-width: 900px) {
    .fiche .appel-canal { width: 46px; height: 46px; }
}

.fiche .presentation {
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--trait);
    font-size: .86rem; line-height: 1.6; color: var(--bleu);
}
.fiche .presentation p { margin-bottom: 9px; }
/* Souligné, pas seulement coloré : dans un paragraphe, la couleur seule ne
   suffit pas à annoncer un lien — et pas du tout pour qui distingue mal les
   teintes. */
.fiche .presentation a.lien-presentation {
    color: var(--vert-fonce); font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
}
.fiche .presentation a.lien-presentation:hover { background: var(--vert-pale); }
.fiche .presentation p:last-child { margin-bottom: 0; }
.fiche .presentation.repliee { max-height: 7.2em; overflow: hidden; position: relative; }
.fiche .presentation.repliee::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3em;
    background: linear-gradient(to bottom, transparent, #fff);
}
.fiche .deplier {
    margin-top: 8px; font-size: .84rem; font-weight: 640; color: var(--vert-fonce);
    text-decoration: underline;
}

/* Aucune fiche renseignée : la réservation reprend toute la largeur, et
   l'en-tête redevient la bannière centrée qu'elle était — plus rien à coller. */
.deux-colonnes.sans-fiche { grid-template-columns: minmax(0, 1fr); max-width: 880px; margin: 0 auto; }
.deux-colonnes.sans-fiche .colonne-gauche { position: static; }

/* ─── Fiche compacte sur mobile ──────────────────────────────────────────── */
.fiche-bascule { display: none; }

@media (max-width: 900px) {
    .fiche { padding: 16px 18px; }

    /* Portrait et identité côte à côte : deux lignes au lieu de six. */
    .fiche-tete { display: flex; align-items: center; gap: 14px; text-align: left; }
    .fiche .portrait, .fiche .portrait-vide {
        width: 58px; height: 58px; margin: 0; font-size: 1.15rem; flex-shrink: 0;
    }
    .fiche h2 { text-align: left; font-size: 1rem; }
    .fiche .accroche { text-align: left; margin-top: 3px; font-size: .82rem; }

    .fiche .fiche-plus { display: none; }
    .fiche.deployee .fiche-plus { display: block; margin-top: 14px; }

    .fiche-bascule {
        display: block; width: 100%; margin-top: 14px; padding: 9px;
        border-radius: 9px; background: var(--vert-pale); color: var(--vert-fonce);
        font-size: .85rem; font-weight: 640;
    }
    /* La bordure du bloc « lieu » n'a plus de sens en tête de section dépliée. */
    .fiche.deployee .fiche-plus > .avis { margin-top: 0; }
}

/* ─── Choix du lieu de consultation ──────────────────────────────────────────
   Placé avant les séances : le cabinet où l'on est reçu détermine les horaires
   proposés, et c'est souvent le premier critère du patient — celui qui est près
   de chez lui. */
.lieux { display: grid; gap: 9px; margin-bottom: 20px; }
.lieux .intitule { font-size: .85rem; font-weight: 640; color: var(--gris); margin-bottom: -2px; }

.lieu-choix {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    border: 1.5px solid var(--trait); border-radius: 11px; padding: 12px 14px;
    transition: border-color .14s, background .14s;
}
.lieu-choix:hover { border-color: var(--vert); }
.lieu-choix.actif { border-color: var(--vert); background: var(--vert-pale); }
.lieu-choix .marque {
    width: 10px; height: 34px; border-radius: 3px; flex-shrink: 0; background: var(--vert);
}
.lieu-choix .quoi { flex: 1; min-width: 0; }
.lieu-choix .nom { font-weight: 640; }
.lieu-choix .adr { color: var(--gris); font-size: .84rem; margin-top: 2px; }
.lieu-choix .coche { color: var(--vert); font-weight: 700; opacity: 0; transition: opacity .14s; }
.lieu-choix.actif .coche { opacity: 1; }
.fiche .lieu .mini { font-size: .78rem; color: var(--gris-pale); margin-top: 3px; }

/* ── Poser une question ───────────────────────────────────────────────────
   Le bouton se tient sous l'appel, en contour : appeler reste l'action
   principale, écrire est l'alternative. */
.fiche .question-ouvrir {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 8px; padding: 10px 14px; border-radius: 10px;
    border: 1.5px solid var(--vert); background: #fff; color: var(--vert-fonce);
    font: inherit; font-weight: 600; cursor: pointer;
    transition: background .12s;
}
.fiche .question-ouvrir:hover { background: var(--vert-pale); }
.fiche .question-ouvrir .ico svg { display: block; }
.fiche .question-ouvrir:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }

dialog.question {
    /* `margin: auto` rétabli à la main : la remise à zéro générale des marges
       en tête de feuille annule celle du navigateur, et c'est elle qui centre
       une fenêtre <dialog>. Sans cette ligne, la boîte s'ouvrait collée en haut
       à gauche de l'écran. */
    margin: auto;
    width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
    padding: 0; border: none; border-radius: var(--rayon);
    box-shadow: 0 20px 60px rgba(20, 35, 20, .25); color: inherit;
}
dialog.question::backdrop { background: rgba(25, 35, 25, .45); }
.question-corps { padding: 22px 24px 18px; }
.question-tete { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.question-tete h2 { flex: 1; margin: 0; font-size: 1.14rem; line-height: 1.35; color: var(--vert-fonce); }
.question-fermer {
    border: none; background: none; font-size: 1.7rem; line-height: 1;
    color: var(--gris); cursor: pointer; padding: 0 4px;
}
.question-fermer:hover { color: var(--bleu); }
.question .aide { margin: 0 0 14px; }

/* Hors de l'écran plutôt que masqué : certains robots ignorent les champs
   `display: none`, et c'est justement eux qu'on veut voir le remplir. */
.question-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.question-compte { font-size: .78rem; color: var(--gris); margin-top: 4px; text-align: right; }

/* La case suit son texte. `.champ input` étire toute saisie sur la largeur :
   sans ce contre-pied, la case se retrouvait seule, centrée, loin de sa phrase. */
.champ .question-accord {
    display: flex; align-items: flex-start; gap: 9px;
    font-weight: 400; font-size: .88rem; line-height: 1.45; cursor: pointer;
}
.champ .question-accord input {
    width: 17px; height: 17px; margin-top: 2px; padding: 0; flex-shrink: 0;
    accent-color: var(--vert);
}
.question .champ[data-champ="consent"] .note { margin-top: 4px; }
.question-erreur { color: var(--rouge); font-size: .86rem; margin: 2px 0 10px; }

.question-merci { text-align: center; padding: 6px 0 2px; }
.question-merci-ico {
    width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.3rem;
    background: var(--vert-pale); color: var(--vert);
}
.question-merci h2 { margin: 0 0 6px; }
.question-merci-actions { justify-content: center; margin-top: 14px; }

/* ── Politique de confidentialité ─────────────────────────────────────────
   Une page qu'on lit, pas un formulaire : colonne étroite, interlignage aéré,
   titres qui se repèrent en parcourant. Mêmes en-tête et carte que la prise
   de rendez-vous, pour qu'on sache être au même endroit. */
.confidentialite { width: min(760px, 100%); }
.confidentialite .carte { padding: 26px 30px 28px; line-height: 1.62; font-size: .94rem; }
.confidentialite .conf-intro { font-size: 1rem; }
.confidentialite .conf-maj { color: var(--gris); font-size: .82rem; margin-top: 6px; }
.confidentialite h2 {
    font-size: 1.02rem; font-weight: 680; color: var(--vert-fonce);
    margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--trait);
}
.confidentialite p + p { margin-top: 8px; }
.confidentialite .conf-liste { margin: 8px 0 8px 20px; }
.confidentialite .conf-liste li + li { margin-top: 4px; }
.confidentialite .conf-note {
    background: #fffaf0; border: 1px solid #f1e2bd; border-radius: 10px;
    padding: 9px 13px; color: #7a5a12; font-size: .88rem;
}
.confidentialite .conf-table-cadre { overflow-x: auto; margin-top: 8px; }
.confidentialite .conf-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.confidentialite .conf-table th,
.confidentialite .conf-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--trait); }
.confidentialite .conf-table th { font-weight: 600; width: 55%; }
.confidentialite .conf-table td { color: var(--gris); }
@media (max-width: 600px) {
    .confidentialite .carte { padding: 20px 18px 22px; }
    .confidentialite .conf-table th { width: auto; }
}

/* ── Lecture d'une question reçue ─────────────────────────────────────────
   La page ouverte depuis le SMS, souvent sur un téléphone : le nom, les deux
   moyens de répondre en évidence, et le message tel qu'il a été écrit. */
.lecture-question { width: min(700px, 100%); }
.lecture-question .q-qui { font-size: 1.18rem; font-weight: 700; }
.lecture-question .q-meta { color: var(--gris); font-size: .86rem; margin-top: 3px; }
.lecture-question .q-coord { display: grid; gap: 6px; margin: 16px 0; font-size: .95rem; }
.lecture-question .q-coord a { color: var(--vert-fonce); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.lecture-question .q-message {
    white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6;
    background: var(--vert-pale); border-radius: 12px; padding: 14px 16px;
}
.lecture-question .barre-actions { flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lecture-question .barre-actions .btn { text-decoration: none; }
.lecture-question .q-conservation { color: var(--gris); font-size: .8rem; margin-top: 14px; }