/*
 * La charte de Lab's Care, reprise du site vitrine www.labscare.be.
 *
 * Les valeurs ne sont pas approchées à l'œil : elles sont reprises des
 * variables du gabarit Joomla (ut_barbon / preset1.css). Un visiteur qui
 * passe du site au tunnel de réservation ne doit pas sentir la couture.
 *
 *   accent   #d9842f   l'orange cuivré du logo et des liens
 *   sombre   #333333   l'en-tête et le pied de page du site
 *   texte    #454545   le corps de texte
 *
 * Deux polices, comme sur le site : Oswald pour les titres — étroite,
 * volontiers en capitales — et Roboto pour tout le reste. Elles sont
 * hébergées ici (voir fonts/polices.css).
 *
 * Cette feuille sert au tunnel Vue comme aux pages statiques de suivi et
 * de décision : une seule source pour l'apparence.
 */

@import url("/static/fonts/polices.css");

:root {
  /* Identité */
  --accent:        #d9842f;
  --accent-fonce:  #bf7123;   /* survol des boutons */
  --accent-clair:  #e19e5a;
  --accent-voile:  #fdf3e9;   /* fond des encarts orangés */

  --sombre:        #333333;   /* bandeau d'en-tête, pied de page */
  --sombre-plus:   #23272b;
  --encre:         #121212;   /* titres et liens */
  --texte:         #454545;
  --gris:          #6b7075;   /* mentions secondaires */

  --fond:          #ffffff;
  --fond-doux:     #f5f6f7;   /* bandeaux, champs au repos */
  --trait:         #ececec;

  /* États — repris du reste de l'application (vert / orange / rouge) */
  /*
   * Le bleu dit « c'est fait », là où le vert dit « c'est en ordre ».
   * Joe, le 04/09/2026 : « les rendez-vous terminés et confirmés ont la
   * même couleur ». Ils partageaient la famille « acquis », et une
   * journée en cours ne se lisait pas d'un coup d'œil — ce qui reste à
   * donner ressemblait à ce qui était donné.
   */
  --bleu:          #1565c0;
  --bleu-voile:    #e8f0fb;
  --vert:          #2e7d32;
  --vert-voile:    #e8f4e9;
  --orange:        #ef6c00;
  --orange-voile:  #fff3e0;
  --rouge:         #c62828;
  --rouge-voile:   #fdecea;

  /* Typographie */
  --titre: 'Oswald', 'Segoe UI', sans-serif;
  --corps: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Le site n'arrondit presque rien : les cartes sont franches. */
  --rayon:       4px;
  --rayon-doux:  8px;

  --ombre:       0 1px 3px rgba(18, 18, 18, .08);
  --ombre-haute: 0 6px 24px rgba(18, 18, 18, .12);

  --largeur: 720px;
}

/* ------------------------------------------------------------------ */
/*  Socle                                                              */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--texte);
  background: var(--fond-doux);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 500;
  color: var(--encre);
  line-height: 1.25;
  margin: 0 0 .6rem;
}

/* Les titres du site sont en capitales espacées : c'est sa signature. */
h1 { font-size: 1.9rem; text-transform: uppercase; letter-spacing: .02em; }
h2 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-fonce); text-decoration: underline; }

strong { font-weight: 500; color: var(--encre); }

.discret { color: var(--gris); font-size: .9rem; }
.centre  { text-align: center; }

/* ------------------------------------------------------------------ */
/*  Bandeau d'en-tête                                                  */
/*                                                                     */
/*  Sombre, parce que le logo est blanc et orange : sur fond clair il  */
/*  disparaîtrait. C'est aussi la teinte de l'en-tête du site.         */
/* ------------------------------------------------------------------ */

.bandeau {
  background: var(--sombre);
  padding: 1.1rem 1rem;
  text-align: center;
}

.bandeau img {
  height: 58px;
  width: auto;
  display: inline-block;
}

.bandeau .accroche {
  margin: .5rem 0 0;
  font-family: var(--titre);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .72);
}

/* ------------------------------------------------------------------ */
/*  Mise en page                                                       */
/* ------------------------------------------------------------------ */

main { max-width: var(--largeur); margin: 0 auto; padding: 2rem 1rem 4rem; }

.carte {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-doux);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--ombre);
}

.carte > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/*  Fil des étapes                                                     */
/* ------------------------------------------------------------------ */

.fil {
  display: flex;
  gap: .35rem;
  margin-bottom: 1.5rem;
  font-family: var(--titre);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-wrap: wrap;
}

.fil span {
  padding: .3rem .8rem;
  border-radius: 999px;
  background: #e8eaed;
  color: var(--gris);
}

.fil span.faite  { background: var(--accent-voile); color: var(--accent-fonce); }
.fil span.active { background: var(--accent); color: #fff; }

/* ------------------------------------------------------------------ */
/*  Champs                                                             */
/* ------------------------------------------------------------------ */

label {
  display: block;
  font-family: var(--titre);
  font-weight: 400;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--encre);
  margin-bottom: .35rem;
}

label .facultatif {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--corps);
  color: var(--gris);
  font-size: .82rem;
}

.champ { margin-bottom: 1.1rem; }

input[type=text], input[type=tel], input[type=email], input[type=number], textarea, select {
  width: 100%;
  padding: .7rem .9rem;
  font-family: var(--corps);
  font-size: 1rem;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid #d5d8dc;
  border-radius: var(--rayon);
  transition: border-color .15s, box-shadow .15s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 132, 47, .18);
}

/*
 * Un exemple de saisie doit se distinguer d'une valeur déjà remplie.
 *
 * Le gris par défaut des navigateurs est trop soutenu : « 7370 » en
 * exemple se lisait comme un code postal réellement saisi, et le visiteur
 * pouvait passer à la suite sans rien taper.
 */
::placeholder { color: #c4c8cd; opacity: 1; }

input.faux, textarea.faux, select.faux {
  border-color: var(--rouge);
  background: #fffafa;
}

.erreur-champ {
  color: var(--rouge);
  font-size: .86rem;
  margin: .3rem 0 0;
}

.aide { color: var(--gris); font-size: .86rem; margin: .35rem 0 0; }

.duo { display: flex; gap: .9rem; }
.duo > * { flex: 1; }

@media (max-width: 520px) {
  .duo { flex-direction: column; gap: 0; }
}

/* ------------------------------------------------------------------ */
/*  Le champ téléphone : pays + numéro                                 */
/*                                                                     */
/*  Le sélecteur de pays n'est pas là pour lever une ambiguïté — les   */
/*  plages mobiles belges (4xx) et françaises (6xx, 7xx) ne se         */
/*  recouvrent pas, le serveur s'en sort seul. Il est là pour que le   */
/*  visiteur voie tout de suite quel format on attend de lui, et que   */
/*  le Français ne se demande pas s'il doit écrire « +33 ».            */
/*                                                                     */
/*  Les drapeaux sont des SVG et non des emoji : Windows n'affiche pas */
/*  les emoji drapeaux et les remplace par les deux lettres du pays.   */
/* ------------------------------------------------------------------ */

.tel-groupe {
  display: flex;
  align-items: stretch;
  border: 1px solid #d5d8dc;
  border-radius: var(--rayon);
  background: var(--fond);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}

.tel-groupe:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 132, 47, .18);
}

.tel-groupe.faux { border-color: var(--rouge); }

.tel-pays {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 .5rem 0 .8rem;
  background: var(--fond-doux);
  border-right: 1px solid var(--trait);
  position: relative;
}

.tel-pays .drapeau {
  width: 21px;
  height: 14px;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(18, 18, 18, .12);
  flex: none;
  display: block;
}

/* Le select couvre le bloc entier : on clique le drapeau comme l'indicatif. */
.tel-pays select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: .7rem 1.2rem .7rem 0;
  font-family: var(--corps);
  font-size: 1rem;
  color: var(--encre);
  cursor: pointer;
  width: auto;
}

.tel-pays select:focus { outline: none; box-shadow: none; }

.tel-pays::after {
  content: '';
  position: absolute;
  right: .55rem;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--gris);
  pointer-events: none;
}

.tel-groupe input[type=tel] {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}

.tel-groupe input[type=tel]:focus { box-shadow: none; }

/* ------------------------------------------------------------------ */
/*  Le code de confirmation                                            */
/* ------------------------------------------------------------------ */

.code-saisie {
  width: 100%;
  max-width: 12rem;
  margin: 0 auto;
  display: block;
  padding: .8rem 1rem;
  font-family: var(--titre);
  font-size: 2rem;
  letter-spacing: .5em;
  text-indent: .5em;          /* recentre malgré l'espacement de droite */
  text-align: center;
  color: var(--encre);
  border: 1px solid #d5d8dc;
  border-radius: var(--rayon);
}

.code-saisie:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217, 132, 47, .18);
}

.code-saisie.faux { border-color: var(--rouge); }

.code-aide {
  text-align: center;
  color: var(--gris);
  font-size: .9rem;
  margin: 1rem 0 0;
}

.code-aide button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.code-aide button:disabled { color: var(--gris); text-decoration: none; cursor: default; }

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.8rem;
  font-family: var(--titre);
  font-size: .92rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-decoration: none;
}

.bouton:hover:not(:disabled) {
  background: var(--accent-fonce);
  border-color: var(--accent-fonce);
  color: #fff;
  text-decoration: none;
}

.bouton:disabled { opacity: .45; cursor: not-allowed; }

.bouton.contour {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.bouton.contour:hover:not(:disabled) { background: var(--accent); color: #fff; }

.bouton.sobre {
  background: transparent;
  color: var(--gris);
  border-color: #d5d8dc;
}

.bouton.sobre:hover:not(:disabled) { background: var(--fond-doux); color: var(--encre); }

.bouton.large { width: 100%; }

.actions { display: flex; gap: .8rem; margin-top: 1.4rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ */
/*  Prestations                                                        */
/* ------------------------------------------------------------------ */

.prestation {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1.1rem 1.2rem;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-left: 3px solid transparent;
  border-radius: var(--rayon);
  margin-bottom: .8rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s, background .15s;
}

.prestation:hover:not(.indisponible) {
  border-color: var(--accent-clair);
  border-left-color: var(--accent);
}

.prestation.choisie {
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-voile);
}

/*
 * Pas d'état « indisponible » : une prestation hors zone n'est pas grisée,
 * elle n'est pas affichée du tout. Quand plus aucune n'est possible, c'est
 * l'écran hors zone qui prend la main et l'explique.
 */

/*
 * Le nom et sa précision sont deux lignes, pas deux mots.
 *
 * Sans `display: block`, les deux <span> se suivaient sans séparation :
 * « ROISINBelgique », « Massage harmonisant sur table1h30 ».
 */
.prestation .nom {
  display: block;
  font-family: var(--titre);
  font-size: 1.05rem;
  color: var(--encre);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.3;
}

.prestation .detail {
  display: block;
  font-size: .9rem;
  color: var(--gris);
  margin-top: .15rem;
}

/*
 * Ce que le massage est, et non ce qu'il coûte.
 *
 * Ajouté le 19/08/2026 : jusque-là un client choisissait entre trois noms,
 * une durée et un prix, sans rien savoir de ce qu'il achetait. La
 * description vient après le détail — durée et mode de confirmation —
 * parce qu'elle se lit quand on hésite, pas quand on survole.
 *
 * En corps de texte et non en gris clair comme `.detail` : c'est la seule
 * phrase de cet écran qui mérite d'être lue en entier.
 */
.prestation .description {
  display: block;
  font-size: .92rem;
  color: var(--texte);
  margin-top: .45rem;
  line-height: 1.45;
  /* Le nom et le tarif restent alignés ; la phrase, elle, respire. */
  max-width: 42ch;
}

.prestation .tarif {
  margin-left: auto;
  font-family: var(--titre);
  font-size: 1.3rem;
  color: var(--accent);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/*  Pastilles d'état                                                   */
/* ------------------------------------------------------------------ */

.pastille {
  display: inline-block;
  padding: .18rem .7rem;
  border-radius: 999px;
  font-family: var(--titre);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.pastille.verte  { background: var(--vert-voile);   color: var(--vert); }
.pastille.orange { background: var(--orange-voile); color: #b54708; }
.pastille.rouge  { background: var(--rouge-voile);  color: var(--rouge); }
.pastille.neutre { background: #e8eaed; color: var(--gris); }

/* ------------------------------------------------------------------ */
/*  Calendrier                                                         */
/*                                                                     */
/*  On choisit d'abord une date, puis un horaire. Un mois entier tient */
/*  sous les yeux — on voit d'un coup quand le praticien est libre,    */
/*  ce qu'une liste de créneaux ne montre jamais aussi bien.           */
/* ------------------------------------------------------------------ */

.cal-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}

.cal-entete .mois {
  font-family: var(--titre);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--encre);
}

/*
 * Les flèches de mois, des deux côtés — le tunnel comme l'agenda du
 * praticien partagent cette règle.
 *
 * Joe, le 06/09/2026 : « les flèches gauche et droite sur le planning
 * mensuel ne sont pas très visibles ». Trois causes cumulées, et la
 * dernière n'a rien à voir avec la couleur :
 *
 *   • fond blanc sur fond blanc — rien ne détachait le bouton ;
 *   • bordure à `--trait` (#ececec), presque invisible ;
 *   • **2,4 rem font 38 px**, sous le seuil tactile de 44. Un bouton trop
 *     petit paraît effacé avant même d'être difficile à viser.
 *
 * Le glyphe monte à 1,4 rem : `font-weight` n'a presque aucun effet sur
 * ← et →, qui viennent d'une fonte système. C'est la taille qui les
 * épaissit, pas le gras.
 */
.cal-fleche {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent-fonce);
  background: var(--fond-doux);
  border: 1px solid #d5d8dc;
  border-radius: var(--rayon);
  cursor: pointer;
}

.cal-fleche:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }

/*
 * ⚠ **Un mois qu'on ne peut pas atteindre reste lisible.** À .35, la
 * flèche désactivée disparaît ; on la cherche au lieu de comprendre
 * qu'elle est au bout. À .5 sur fond doux, elle se voit et se lit comme
 * éteinte.
 */
.cal-fleche:disabled { opacity: .5; cursor: not-allowed; }

.cal-jours, .cal-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .35rem;
}

.cal-jours {
  font-family: var(--titre);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris);
  text-align: center;
  margin-bottom: .35rem;
}

.case {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  font-family: var(--corps);
  font-size: .95rem;
  color: #b8bcc0;               /* un jour sans créneau reste lisible, sans appeler */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rayon);
}

.case.vide { border: 0; }

/* Un jour où il reste de la place : c'est là que l'œil doit aller. */
.case.libre {
  color: var(--encre);
  background: var(--fond);
  border-color: var(--accent-clair);
  cursor: pointer;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
}

.case.libre:hover { background: var(--accent-voile); border-color: var(--accent); }

/*
 * L'heure directement dans la case.
 *
 * Avec un seul rendez-vous par jour, il n'y a qu'un horaire possible : le
 * cacher derrière un clic n'apporterait rien. Le jour où plusieurs
 * créneaux coexisteront, la case affichera leur nombre à la place et les
 * horaires se déplieront en dessous — d'où deux styles plutôt qu'un.
 */
.case .heure {
  font-family: var(--titre);
  font-size: .68rem;
  letter-spacing: .03em;
  color: var(--accent);
  line-height: 1;
}

.case .plusieurs {
  font-family: var(--corps);
  font-size: .6rem;
  color: var(--gris);
  line-height: 1;
}

.case.choisi {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.case.choisi .heure,
.case.choisi .plusieurs { color: rgba(255, 255, 255, .9); }

/* ------------------------------------------------------------------ */
/*  Les horaires du jour retenu                                        */
/* ------------------------------------------------------------------ */

.horaires {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--trait);
}

.horaires .date {
  font-family: var(--titre);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .95rem;
  color: var(--encre);
  margin-bottom: .7rem;
}

.horaires .liste { display: flex; flex-wrap: wrap; gap: .6rem; }

.creneau {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .55rem 1.3rem;
  font-family: var(--titre);
  font-size: 1.1rem;
  letter-spacing: .04em;
  color: var(--accent);
  background: var(--fond);
  border: 1px solid var(--accent-clair);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.creneau small {
  font-family: var(--corps);
  font-size: .72rem;
  letter-spacing: 0;
  color: var(--gris);
}

.creneau:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.creneau:hover small { color: rgba(255, 255, 255, .85); }

/* ------------------------------------------------------------------ */
/*  Avis                                                               */
/* ------------------------------------------------------------------ */

.avis {
  padding: .9rem 1.1rem;
  border-radius: var(--rayon);
  border-left: 3px solid;
  margin-bottom: 1.1rem;
  font-size: .95rem;
}

.avis.info    { background: var(--accent-voile); border-color: var(--accent); color: #7a4a17; }

/*
 * Le bandeau d'essai : volontairement en dehors de la charte.
 *
 * Il ne doit pas passer pour un élément du site. Le jaune d'atelier dit
 * « ceci n'est pas la vraie application » d'un coup d'œil, et se remarque
 * même quand on ne le cherche pas.
 */
.avis.essai {
  background: #fff8dc;
  border-color: #d9a800;
  color: #6b5200;
}
.avis.succes  { background: var(--vert-voile);   border-color: var(--vert);   color: #1b5e20; }
.avis.souci   { background: var(--rouge-voile);  border-color: var(--rouge);  color: #8c1d18; }
.avis.attente { background: var(--orange-voile); border-color: var(--orange); color: #b54708; }

.avis > :last-child { margin-bottom: 0; }

/*
 * Un lien dans un encart prend la couleur de l'encart, pas celle des
 * liens ordinaires.
 *
 * L'orange des liens (#d9842f) sur le fond orange pâle d'un avis
 * « attente » ne se détache presque pas. Hériter de la couleur du texte
 * et souligner suffit : le soulignement dit « c'est cliquable » sans
 * avoir besoin d'une teinte qui jure.
 */
.avis a {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}

/* Le compte à rebours du verrou : lisible sans être inquiétant. */
.compteur {
  font-family: var(--titre);
  font-size: 1.05rem;
  color: var(--accent-fonce);
  letter-spacing: .05em;
}

/* ------------------------------------------------------------------ */
/*  Récapitulatif                                                      */
/* ------------------------------------------------------------------ */

.recap { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.2rem; }
.recap dt { color: var(--gris); font-size: .9rem; }
.recap dd { margin: 0; color: var(--encre); font-weight: 500; }

/* ------------------------------------------------------------------ */
/*  Le texte d'accompagnement (content/*.md)                           */
/*                                                                     */
/*  Écrit par Joe, mis en forme ici. Volontairement discret : il vient  */
/*  après le récapitulatif, qui porte l'information essentielle.       */
/* ------------------------------------------------------------------ */

.preparation {
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--trait);
  font-size: .94rem;
}

.preparation h3 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris);
  margin-bottom: .7rem;
}

.preparation p { margin-bottom: .7rem; }
.preparation ul { margin: 0 0 .7rem; padding-left: 1.1rem; }
.preparation li { margin-bottom: .3rem; }
.preparation > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/*  Rues proposées au fil de la frappe                                 */
/*                                                                     */
/*  Elles évitent la faute de frappe en amont, plutôt que d'avoir à la */
/*  rattraper après coup — le géocodeur « corrige » volontiers une rue */
/*  inconnue en une autre qui lui ressemble.                           */
/* ------------------------------------------------------------------ */

.suggestions {
  margin-top: .5rem;
  padding: .7rem .8rem;
  background: var(--fond-doux);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.suggestions .titre {
  margin: 0 0 .5rem;
  font-family: var(--titre);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gris);
}

.suggestions .bouton {
  display: block;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  padding: .45rem .7rem;
  margin-bottom: .35rem;
  font-family: var(--corps);
  font-size: .93rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  background: var(--fond);
}

.suggestions .bouton:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/*  Case à cocher et lien dans le texte                                */
/* ------------------------------------------------------------------ */

.case-a-cocher {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-family: var(--corps);
  font-size: .93rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texte);
  cursor: pointer;
}

.case-a-cocher input[type=checkbox] {
  width: auto;
  margin: .2rem 0 0;
  accent-color: var(--accent);
  flex: none;
}

.case-a-cocher.champ-faux {
  color: var(--rouge);
  font-weight: 500;
}

/* Un lien qui ouvre une fenêtre, et non une page : c'est un bouton. */
.lien-texte {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.lien-texte:hover { color: var(--accent-fonce); }

/* ------------------------------------------------------------------ */
/*  Fenêtre de lecture                                                 */
/*                                                                     */
/*  Les conditions se lisent sans quitter le tunnel : le créneau est   */
/*  retenu pour quinze minutes, et le compte à rebours tourne derrière.*/
/* ------------------------------------------------------------------ */

.voile {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 18, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}

.fenetre {
  background: var(--fond);
  border-radius: var(--rayon-doux);
  padding: 1.5rem;
  max-width: 32rem;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--ombre-haute);
}

.fenetre h2 { margin-bottom: 1rem; }

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

.pied {
  background: var(--sombre);
  color: rgba(255, 255, 255, .6);
  text-align: center;
  padding: 1.6rem 1rem;
  font-size: .85rem;
}

.pied a { color: rgba(255, 255, 255, .85); }
.pied a:hover { color: var(--accent-clair); }

/*
 * « Informations légales » ouvre une fenêtre et non une page : c'est donc
 * un bouton, pas un lien. Il doit néanmoins se lire comme les liens qui
 * l'entourent — sur ce fond sombre, l'orange de `.lien-texte` jurerait.
 */
.pied .lien-texte { color: rgba(255, 255, 255, .85); }
.pied .lien-texte:hover { color: var(--accent-clair); }

/* ------------------------------------------------------------------ */
/*  Accessibilité                                                      */
/* ------------------------------------------------------------------ */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}