/* ════════════════════════════════════════════════════════════════════
   css/composants.css — briques communes des pages de service
   ════════════════════════════════════════════════════════════════════
   Formulaires, alertes, pastilles, tableaux, grilles et blocs, pour les
   pages qui ne sont pas des vitrines : espace client, pages légales,
   confirmations, réservation. Tout repose sur les variables de base.css
   (couleurs, tailles, arrondis, ombres) : aucune couleur n'est inventée
   ici. Chargement : $page_css = ['composants'] avant inclus/gabarits/entete.php.
   ════════════════════════════════════════════════════════════════════ */

/* ── Mise en page ─────────────────────────────────────────────────── */

/* Colonne de lecture centrée : formulaires, textes, confirmations. */
.page-etroite  { width: min(100% - 2 * var(--gouttiere), 46rem); margin-inline: auto; }
.page-moyenne  { width: min(100% - 2 * var(--gouttiere), 64rem); margin-inline: auto; }

/* Empilement vertical régulier des éléments d'un bloc. */
.pile          { display: grid; gap: 1rem; }
.pile--serree  { gap: .5rem; }
.pile--aeree   { gap: 1.75rem; }

/* Grilles qui passent sur une colonne d'elles-mêmes sur téléphone. */
.grille        { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grille--2     { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* Rangée de boutons ou d'éléments alignés, qui passe à la ligne. */
.rangee        { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.rangee--fin   { justify-content: flex-end; }
.rangee--centre{ justify-content: center; }

/* ── Bloc : un panneau avec ses marges intérieures ────────────────── */

.bloc          { background: var(--blanc); border: 1px solid var(--nuage-200); border-radius: var(--r-lg);
                 box-shadow: var(--ombre-douce); padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.bloc__titre   { font-family: var(--titre); font-size: var(--t-xl); font-weight: 600; color: var(--encre-900);
                 margin: 0 0 .75rem; line-height: 1.2; }
.bloc__sous-titre { font-family: var(--titre); font-size: var(--t-lg); font-weight: 600; color: var(--encre-900); margin: 0 0 .5rem; }
.bloc--centre  { text-align: center; }

/* Grande icône ronde en tête d'un bloc (succès, erreur, information). */
.medaillon     { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center;
                 margin: 0 auto 1rem; font-size: 2rem; background: var(--nuage-100); color: var(--encre-700); }
.medaillon--succes    { background: color-mix(in oklab, var(--dragon-500) 14%, white); color: var(--dragon-700); }
.medaillon--erreur    { background: color-mix(in oklab, var(--rouge) 14%, white);      color: #B42318; }
.medaillon--attention { background: color-mix(in oklab, var(--citron) 30%, white);     color: #8A5A00; }
.medaillon--info      { background: color-mix(in oklab, var(--azur) 14%, white);       color: #0B5C99; }

/* ── Texte ────────────────────────────────────────────────────────── */

.texte-doux    { color: var(--encre-500); }
.texte-petit   { font-size: var(--t-sm); }
.centre        { text-align: center; }
.lien-retour   { display: inline-flex; align-items: center; gap: .4rem; color: var(--encre-700); font-weight: 600; text-decoration: none; }
.lien-retour:hover { color: var(--dragon-700); }

/* Contenu rédigé (pages légales, textes libres saisis en administration). */
.redaction     { color: var(--encre-700); line-height: 1.7; }
.redaction h2, .redaction h3 { font-family: var(--titre); color: var(--encre-900); line-height: 1.25; margin: 1.75rem 0 .6rem; }
.redaction h2  { font-size: var(--t-xl); }
.redaction h3  { font-size: var(--t-lg); }
.redaction p, .redaction ul, .redaction ol { margin: 0 0 1rem; }
.redaction a   { color: var(--dragon-700); }
.redaction > :first-child { margin-top: 0; }

/* ── Alertes ──────────────────────────────────────────────────────── */

.alerte        { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: var(--r-md);
                 border: 1px solid transparent; font-size: var(--t-sm); line-height: 1.5; }
.alerte > i    { font-size: 1.2rem; line-height: 1.2; flex: none; }
.alerte--succes    { background: color-mix(in oklab, var(--dragon-500) 10%, white); border-color: color-mix(in oklab, var(--dragon-500) 30%, white); color: var(--dragon-900); }
.alerte--erreur    { background: color-mix(in oklab, var(--rouge) 9%, white);       border-color: color-mix(in oklab, var(--rouge) 30%, white);      color: #7A1C14; }
.alerte--attention { background: color-mix(in oklab, var(--citron) 22%, white);     border-color: color-mix(in oklab, var(--citron) 55%, white);     color: #6B4500; }
.alerte--info      { background: color-mix(in oklab, var(--azur) 9%, white);       border-color: color-mix(in oklab, var(--azur) 30%, white);       color: #0B4A7A; }

/* ── Pastilles (statuts, petites étiquettes) ──────────────────────── */

.pastille      { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: var(--r-pill);
                 font-size: var(--t-xs); font-weight: 700; line-height: 1.6; background: var(--nuage-100); color: var(--encre-700); white-space: nowrap; }
.pastille--vert   { background: color-mix(in oklab, var(--dragon-500) 15%, white); color: var(--dragon-700); }
.pastille--orange { background: color-mix(in oklab, var(--orange) 18%, white);     color: #9A4A0B; }
.pastille--rouge  { background: color-mix(in oklab, var(--rouge) 14%, white);      color: #B42318; }
.pastille--azur   { background: color-mix(in oklab, var(--azur) 14%, white);       color: #0B5C99; }
.pastille--violet { background: color-mix(in oklab, var(--violet) 14%, white);     color: #5B2A9E; }

/* ── Formulaires ──────────────────────────────────────────────────── */

.formulaire    { display: grid; gap: 1.1rem; }
.rangee-champs { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.champ         { display: grid; gap: .4rem; }
.champ__etiquette { font-weight: 700; font-size: var(--t-sm); color: var(--encre-900); }
.champ__etiquette .facultatif { font-weight: 400; color: var(--encre-500); }
.champ__saisie { width: 100%; font: inherit; font-size: var(--t-md); color: var(--encre-900); background: var(--blanc);
                 border: 1.5px solid var(--nuage-300); border-radius: var(--r-sm); padding: .7rem .9rem; min-height: 2.9rem;
                 transition: border-color var(--transition), box-shadow var(--transition); }
.champ__saisie:hover  { border-color: var(--encre-300); }
.champ__saisie:focus  { outline: none; border-color: var(--dragon-500); box-shadow: 0 0 0 4px color-mix(in oklab, var(--dragon-500) 18%, transparent); }
.champ__saisie:disabled, .champ__saisie[readonly] { background: var(--nuage-050); color: var(--encre-500); }
textarea.champ__saisie { min-height: 7rem; resize: vertical; }
.champ__aide   { font-size: var(--t-xs); color: var(--encre-500); }
.champ--erreur .champ__saisie { border-color: var(--rouge); }
.champ--erreur .champ__aide   { color: #B42318; }

/* Champ et bouton accolés (ex. mot de passe + œil). */
.champ__groupe { display: flex; }
.champ__groupe .champ__saisie { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.champ__groupe > button { flex: none; border: 1.5px solid var(--nuage-300); border-left: 0; background: var(--nuage-050);
                          border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 0 .9rem; color: var(--encre-700); cursor: pointer; }

/* Case à cocher avec son libellé. */
.case          { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-sm); color: var(--encre-700); cursor: pointer; }
.case input    { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--dragon-500); flex: none; }

/* ── Onglets (connexion / inscription / mot de passe oublié) ──────── */

.onglets       { display: flex; gap: .35rem; padding: .3rem; background: var(--nuage-100); border-radius: var(--r-pill); margin-bottom: 1.5rem; }
.onglets button{ flex: 1; border: 0; background: none; font: inherit; font-weight: 700; font-size: var(--t-sm); color: var(--encre-700);
                 padding: .6rem .9rem; border-radius: var(--r-pill); cursor: pointer; transition: background var(--transition), color var(--transition); }
.onglets button[aria-selected="true"] { background: var(--blanc); color: var(--dragon-700); box-shadow: var(--ombre-douce); }
.onglet-panneau[hidden] { display: none; }

/* ── Tableaux et listes de valeurs ────────────────────────────────── */

.tableau-cadre { overflow-x: auto; border: 1px solid var(--nuage-200); border-radius: var(--r-md); }
.tableau       { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tableau th, .tableau td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--nuage-200); vertical-align: top; }
.tableau th    { background: var(--nuage-050); font-weight: 700; color: var(--encre-900); }
.tableau tr:last-child td { border-bottom: 0; }

/* Paires « libellé : valeur » (récapitulatifs). */
.valeurs       { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.25rem; margin: 0; }
.valeurs dt    { color: var(--encre-500); font-size: var(--t-sm); }
.valeurs dd    { margin: 0; color: var(--encre-900); font-weight: 600; text-align: right; }
.valeurs .total { border-top: 1px solid var(--nuage-200); padding-top: .55rem; font-size: var(--t-lg); }

/* ── Bouton pleine largeur (formulaires sur téléphone) ────────────── */

.bouton--bloc  { width: 100%; }

/* ── Page avec sommaire latéral (pages légales) ───────────────────── */

.avec-sommaire { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .avec-sommaire { grid-template-columns: 15rem 1fr; align-items: start; } }
.sommaire      { display: grid; gap: .25rem; }
.sommaire a    { display: block; padding: .6rem .9rem; border-radius: var(--r-sm); color: var(--encre-700);
                 text-decoration: none; font-weight: 600; font-size: var(--t-sm); transition: background var(--transition); }
.sommaire a:hover { background: var(--nuage-100); }
.sommaire a[aria-current="page"] { background: var(--dragon-500); color: var(--blanc); }
.redaction h4  { font-family: var(--titre); font-size: var(--t-lg); color: var(--encre-900); margin: 1.5rem 0 .5rem; line-height: 1.3; }
.mise-a-jour   { border-top: 1px solid var(--nuage-200); padding-top: .8rem; margin: 2rem 0 0; }

/* ── Page introuvable (404.php) ───────────────────────────────────── */

/* La page est courte : le contenu occupe la hauteur, le pied reste en bas. */
.e404          { min-height: 58vh; display: grid; align-items: center; }
.e404__code    { font-family: var(--titre); font-size: clamp(4rem, 14vw, 7rem); font-weight: 700; line-height: 1;
                 color: var(--dragon-500); letter-spacing: -.03em; margin: 0 0 .5rem; }


/* ── Liens dans le texte des blocs ────────────────────────────────── */

/* Sans cette règle, le navigateur les afficherait en bleu par défaut. */
.bloc a:not(.bouton), .e404 a:not(.bouton), .redaction a:not(.bouton) {
    color: var(--dragon-700); font-weight: 600; text-underline-offset: 3px;
}
.bloc a:not(.bouton):hover, .e404 a:not(.bouton):hover { color: var(--dragon-900); }

/* ── Notation par étoiles (avis.php) ──────────────────────────────── */

/* Les étoiles sont écrites de 5 à 1 et affichées à l'envers : le survol
   d'une étoile colore aussi celles qui la précèdent, en CSS seul. */
.etoiles       { --etoile: color-mix(in oklab, var(--citron) 70%, var(--orange)); display: flex; justify-content: center; gap: .4rem; direction: rtl; }
.etoiles input { position: absolute; opacity: 0; pointer-events: none; }
.etoiles label { font-size: 2.7rem; line-height: 1; color: var(--nuage-300); cursor: pointer; transition: color .12s, transform .12s; }
.etoiles label:hover, .etoiles label:hover ~ label, .etoiles input:checked ~ label { color: var(--etoile); }
.etoiles label:hover { transform: scale(1.12); }
.etoiles input:focus-visible + label { outline: 3px solid color-mix(in oklab, var(--dragon-500) 40%, transparent); border-radius: 6px; }
.note-lue      { font-size: 2.2rem; letter-spacing: .25rem; color: color-mix(in oklab, var(--citron) 70%, var(--orange)); margin: .5rem 0; }

/* ── Carte de réservation (Mes réservations) ──────────────────────── */

.resa          { background: var(--blanc); border: 1px solid var(--nuage-200); border-radius: var(--r-lg); box-shadow: var(--ombre-douce); overflow: hidden; }
.resa + .resa  { margin-top: 1rem; }
.resa__barre   { height: 5px; background: linear-gradient(90deg, var(--dragon-500), var(--turquoise)); }
.resa__barre--anniv   { background: linear-gradient(90deg, var(--violet), var(--azur)); }
.resa__barre--annulee { background: var(--nuage-300); }
.resa__corps   { padding: 1.1rem 1.35rem; display: grid; gap: .65rem; }
.resa__tete    { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .6rem; }
.resa__date    { font-family: var(--titre); font-size: var(--t-lg); font-weight: 600; color: var(--encre-900); line-height: 1.2; }
.resa__infos   { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: var(--t-sm); color: var(--encre-700); }
.resa__infos > span { display: inline-flex; align-items: center; gap: .4rem; }
.resa__pied    { border-top: 1px solid var(--nuage-200); padding-top: .85rem; display: flex; justify-content: space-between;
                 align-items: flex-end; flex-wrap: wrap; gap: .8rem; }
.resa__paiement{ display: grid; gap: .2rem; font-size: var(--t-sm); }
.resa__total   { font-family: var(--titre); font-size: var(--t-xl); font-weight: 700; color: var(--encre-900); }
.resa__actions { display: grid; gap: .45rem; justify-items: end; }

/* État vide d'une liste. */
.vide          { text-align: center; padding: 3rem 1rem; color: var(--encre-500); }
.vide > i      { font-size: 2.5rem; display: block; margin-bottom: .75rem; }

/* Textes d'état. */
.texte-succes  { color: var(--dragon-700); }
.texte-attention { color: #9A4A0B; }

/* Texte accolé à la fin d'un champ (« 7 » + « ans »). */
.champ__suffixe { display: inline-flex; align-items: center; padding: 0 .9rem; border: 1.5px solid var(--nuage-300); border-left: 0;
                  border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--nuage-050); color: var(--encre-700); font-weight: 600;
                  white-space: nowrap; flex: none; }
.champ__groupe .champ__saisie { flex: 1; min-width: 0; }