/* Feuille de style des sites vitrine - commune aux quatre enseignes.
 *
 * La grammaire visuelle est la même pour tout le réseau (§14.7) : fond sombre,
 * mêmes composants, mêmes espacements. Ce qui distingue une enseigne tient
 * dans les variables posées par `site/_brand_style.html`, à partir de
 * `brands.theme` - essentiellement une couleur d'accent.
 *
 * Règle absolue : **aucune couleur, police ou arrondi en dur ici ni dans un
 * gabarit**. Tout passe par une variable. C'est ce qui permet de changer
 * l'habillage d'une enseigne depuis l'administration sans toucher au code.
 *
 * Écrite à la main plutôt que générée : la page d'accueil d'un site vitrine
 * doit s'ouvrir vite sur un mobile (§14.4.2, §15.6), et ce fichier pèse moins
 * qu'un framework dont on utiliserait trois classes.
 */

/* ---------- Réinitialisation ---------- */
/* `[hidden]` doit l'emporter sur TOUTE règle d'auteur. La feuille du
   navigateur le met en `display: none`, mais `.room { display: flex }` gagne
   contre elle : sans cette ligne, masquer une carte en JavaScript ne fait
   rien du tout - le filtre paraît inopérant. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
    font-family: var(--font-title), system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 0.5em;
    text-wrap: balance;
}
/* Les titres suivent la largeur de l'écran plutôt qu'un palier : sur un
   téléphone, un h1 figé à 3rem déborde ou se coupe en quatre lignes. */
h1 { font-size: clamp(2.1rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }
p  { margin: 0 0 1em; }

/* ---------- Structure ---------- */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--attached { padding-top: clamp(1.75rem, 3vw, 2.5rem); }
.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin: 0; }

.eyebrow {
    display: inline-block;
    font-family: var(--font-title), sans-serif;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.75rem;
}
.muted { color: var(--muted); }
.lead { font-size: 1.125rem; color: var(--muted); max-width: 42rem; }

/* ---------- Boutons ----------
   Deux rôles seulement côté public : l'action (réserver, demander un devis) et
   la navigation secondaire. Un site vitrine qui en propose davantage ne dit
   plus où cliquer. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    font-family: var(--font-title), sans-serif;
    font-size: 0.95rem; font-weight: 600; line-height: 1;
    border-radius: var(--radius-sm); border: 1px solid transparent;
    transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn--action { background: var(--accent); color: var(--on-accent); }
.btn--action:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 0.55rem 0.95rem; font-size: 0.85rem; }
.btn--block { width: 100%; }

/* ---------- En-tête ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    display: flex; align-items: center; gap: 1.5rem;
    height: 4.25rem;
}
/* Marque : le logo de la charte ET le nom. Les quatre cubes se ressemblent
   beaucoup à petite taille - seul le nom dit sur quel site on se trouve. Les
   logos sont fournis en version « pour fond sombre », on ne les reteinte pas ;
   la boîte est carrée et fixe, sinon chaque valise de marque imposerait son
   format et les en-têtes ne s'aligneraient plus entre eux. */
.brandmark {
    display: inline-flex; align-items: center; gap: 0.6rem;
    white-space: nowrap; flex: none;
}
.brandmark__logo { width: 2.3rem; height: 2.3rem; object-fit: contain; flex: none; }
.brandmark__name {
    font-family: var(--font-title), sans-serif;
    font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em;
}
.brandmark__dot {
    width: 0.65rem; height: 0.65rem; border-radius: 3px;
    background: var(--accent); flex: none;
}
.brandmark--footer .brandmark__logo { width: 2.6rem; height: 2.6rem; }
.brandmark--footer .brandmark__name { font-size: 1.2rem; }

/* Lien latéral de la navigation : le retour au portail depuis un site
   d'enseigne. Volontairement en retrait - ce n'est pas une rubrique du site. */
.site-nav__aside {
    margin-left: 0.35rem; padding-left: 0.9rem;
    border-left: 1px solid var(--border);
    color: var(--muted) !important; font-size: 0.875rem;
}
.site-nav { display: flex; gap: 0.35rem; margin-left: auto; }
.site-nav a {
    padding: 0.5rem 0.8rem; border-radius: var(--radius-sm);
    font-size: 0.925rem; color: var(--muted);
    /* Sans cela, « Le concept » se coupe en deux lignes dès que la barre est
       à l'étroit, et l'en-tête double de hauteur. Un lien de navigation ne se
       césure pas : s'il ne rentre plus, c'est le menu entier qui doit passer
       en mode replié. */
    white-space: nowrap;
    transition: color .15s, background-color .15s;
}
.site-nav a:hover, .site-nav a.is-active { color: var(--text); background: var(--raised); }
.site-header .btn { flex: none; }

/* Le menu mobile fonctionne sans JavaScript : une case à cocher masquée
   pilote l'ouverture. Un site vitrine ne doit pas dépendre d'un script pour
   que sa navigation existe. */
.nav-toggle, .nav-toggle-label { display: none; }
@media (max-width: 1080px) {
    .site-nav {
        position: fixed; inset: 4.25rem 0 auto; flex-direction: column;
        background: var(--surface); border-bottom: 1px solid var(--border);
        padding: 0.5rem 1.25rem 1rem; gap: 0.1rem;
        max-height: calc(100dvh - 4.25rem); overflow-y: auto;
        /* Replié, le panneau doit être RETIRÉ, pas seulement déplacé : sans
           `visibility`, ses liens restent cliquables hors écran et attrapent
           la tabulation. */
        transform: translateY(-101%); visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }
    .nav-toggle:checked ~ .site-nav {
        transform: translateY(0); visibility: visible;
        transition: transform .22s ease, visibility 0s;
    }
    .site-nav a {
        padding: 0.85rem 0.5rem; font-size: 1.0625rem;
        border-bottom: 1px solid var(--border);
    }
    .site-nav a:last-child { border-bottom: 0; }
    /* Le retour au portail n'est plus « à côté » mais en dessous : dans une
       colonne, un filet vertical ne veut plus rien dire. */
    .site-nav__aside {
        margin-left: 0; padding-left: 0.5rem; border-left: 0;
    }
    .nav-toggle-label {
        display: inline-flex; align-items: center; justify-content: center;
        margin-left: auto; width: 2.5rem; height: 2.5rem; flex: none;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        color: var(--text); font-size: 1.1rem;
    }
    /* Le bouton d'action RESTE : c'est l'objet du site. Il passe simplement
       après le menu replié, et c'est lui qu'on voit en premier à droite. */
    .site-header__inner { gap: 0.75rem; }
    .nav-toggle-label { order: 3; margin-left: 0; }
    .site-header__cta { order: 2; margin-left: auto; }
}

@media (max-width: 345px) {
    /* Seulement sur les écrans les plus étroits, où le nom de la marque et le
       bouton d'action se disputent vraiment la place : c'est le nom qui cède,
       le logo suffit alors à identifier le site. */
    .brandmark__name { display: none; }
}

/* ---------- Couverture ---------- */
.hero { position: relative; overflow: hidden; }
.hero__bg {
    position: absolute; inset: 0;
    background: var(--hero-image),
                radial-gradient(120% 90% at 50% 0%,
                    color-mix(in srgb, var(--accent) 22%, var(--bg)) 0%,
                    var(--bg) 62%);
    background-size: cover; background-position: center;
}
/* Voile sombre : le titre doit rester lisible quelle que soit la photo
   déposée par l'enseigne, sans avoir à la retoucher. */
.hero__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg) calc(var(--hero-overlay) * 70%), transparent) 0%,
        color-mix(in srgb, var(--bg) calc(var(--hero-overlay) * 100%), transparent) 55%,
        var(--bg) 100%);
}
.hero__inner {
    position: relative;
    padding: clamp(4.5rem, 12vw, 8.5rem) 0 clamp(3.5rem, 8vw, 5.5rem);
    max-width: 46rem;
}
/* `.wrap` porte la gouttière et la largeur de la grille ; ces deux blocs
   portent leur propre largeur de lecture. Les cumuler sur un même élément
   décalait la couverture du reste de la page et lui retirait ses marges. */
.hero h1 { margin-bottom: 1rem; }
.hero__sub { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Couverture d'une page intérieure : mêmes règles, moins d'ampleur. Sans les
   chiffres-clés de l'accueil, la hauteur pleine laisse un vide. */
.hero--compact .hero__inner {
    padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(2.25rem, 4vw, 3rem);
}

/* ---------- Accueil du portail ----------
   Ce n'est pas une couverture de magazine mais un CHOIX : une question courte,
   puis les quatre marques en grand. Qui sait déjà ce qu'il cherche part d'ici ;
   qui ne connaît pas le réseau descend vers les villes. Les sites des enseignes
   fonctionnent de la même façon - une accroche, un sélecteur, rien de plus. */
.portal-hero { position: relative; overflow: hidden; text-align: center; padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.portal-hero__bg {
    position: absolute; inset: 0;
    background: radial-gradient(90% 70% at 50% 0%,
        color-mix(in srgb, var(--accent) 18%, var(--bg)) 0%, var(--bg) 70%);
}
.portal-hero .wrap { position: relative; }
.portal-hero h1 {
    font-size: clamp(2rem, 4.6vw, 3.25rem); margin-bottom: 0.5rem;
}
.portal-hero__sub {
    color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.15rem);
    max-width: 34rem; margin: 0 auto;
}
.portal-hero__counts { margin: clamp(1.5rem, 2.5vw, 2rem) 0 0; }
.portal-hero__counts a {
    color: var(--muted); font-size: 0.9rem;
    border-bottom: 1px solid var(--border); padding-bottom: 0.2rem;
}
.portal-hero__counts a:hover { color: var(--accent); border-color: var(--accent); }

/* Tuile de marque : le logo fait le travail, le texte se tait. */
.brand-tiles {
    display: grid; gap: 1rem;
    /* 12,5 rem tient CINQ tuiles sur une ligne à 1180 px - le réseau compte
       cinq marques, et la cinquième seule sur une seconde ligne se lisait
       comme un oubli. La largeur minimale plutôt qu'un nombre de colonnes
       figé : une sixième enseigne passera sans retoucher la feuille. */
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.brand-tile {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 2rem 1.1rem 1.6rem;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    transition: border-color .18s, transform .18s;
}
/* Halo de la marque, révélé au survol : la couleur arrive derrière le logo,
   elle ne le repeint pas - les logos de la charte ne se reteintent pas. */
.brand-tile__glow {
    position: absolute; inset: 0;
    background: radial-gradient(70% 55% at 50% 12%,
        color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 70%);
    opacity: .18; transition: opacity .18s;
}
.brand-tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.brand-tile:hover .brand-tile__glow { opacity: .55; }
.brand-tile > :not(.brand-tile__glow) { position: relative; }
.brand-tile__logo {
    height: 4.5rem; width: auto; max-width: 82%; object-fit: contain;
    margin-bottom: 1.25rem;
}
.brand-tile__name {
    font-family: var(--font-title), sans-serif;
    font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em;
}
.brand-tile__line {
    color: var(--muted); font-size: 0.875rem; margin-top: 0.3rem; line-height: 1.4;
}


.hero__facts {
    display: flex; flex-wrap: wrap; gap: 2rem;
    margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border);
}
.hero__fact strong {
    display: block; font-family: var(--font-title), sans-serif;
    font-size: 1.85rem; font-weight: 700; line-height: 1;
}
.hero__fact span { font-size: 0.85rem; color: var(--muted); }

/* Bande d'introduction : intitulé à gauche, texte à droite. */
.intro-band { display: grid; gap: 1rem 3rem; grid-template-columns: 12rem minmax(0, 1fr); align-items: start; }
.intro-band .eyebrow { margin: 0; padding-top: 0.35rem; }
.intro-band .lead { margin: 0; font-size: 1.25rem; color: var(--text); max-width: 44rem; }
@media (max-width: 760px) { .intro-band { grid-template-columns: 1fr; } }

/* ---------- Choix par région ----------
   Deux niveaux : la région ouvre sur ses villes. Une liste de trente villes à
   plat ne se lit pas, et un menu déroulant cache l'offre au lieu de la montrer. */
/* Colonnes de texte, et non grille : les régions n'ont pas le même nombre de
   villes, et une grille alignerait toutes les lignes sur la plus haute -
   laissant un vide sous celles qui n'en comptent qu'une. Le flux en colonnes
   les tasse. */
.regions { columns: 3; column-gap: 2.5rem; }
.region { break-inside: avoid; margin-bottom: 2.25rem; }
@media (max-width: 980px) { .regions { columns: 2; } }
@media (max-width: 620px) { .regions { columns: 1; } }
.region__name {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.95rem; letter-spacing: 0.02em;
    padding-bottom: 0.75rem; margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.region__count {
    font-family: var(--font-body), sans-serif; font-size: 0.72rem; font-weight: 600;
    padding: 0.1rem 0.45rem; border-radius: var(--radius-pill);
    background: var(--raised); color: var(--muted);
}
.region__cities { list-style: none; margin: 0; padding: 0; }
.region__cities a {
    display: block; padding: 0.6rem 0.5rem; margin: 0 -0.5rem;
    border-radius: var(--radius-sm);
    transition: background-color .15s;
}
.region__cities a:hover { background: var(--surface); }
.region__city {
    display: flex; align-items: baseline; gap: 0.5rem;
    font-family: var(--font-title), sans-serif; font-weight: 600; font-size: 1.02rem;
}
.region__rooms {
    font-family: var(--font-body), sans-serif;
    font-size: 0.75rem; font-weight: 600; color: var(--muted);
    padding: 0.05rem 0.4rem; border-radius: var(--radius-pill);
    background: var(--raised);
}
.region__cities a:hover .region__rooms { color: var(--accent); }
.region__cities a:hover .region__city { color: var(--accent); }
.region__brands { display: block; font-size: 0.8rem; color: var(--muted); }

/* ---------- Filtre par région ---------- */
.region-filters {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 1.75rem;
}
.region-filters .filter-pill span {
    margin-left: 0.4rem; padding: 0.02rem 0.38rem;
    border-radius: var(--radius-pill);
    background: var(--raised); color: var(--muted);
    font-family: var(--font-body), sans-serif; font-size: 0.72rem;
}
.region-filters .filter-pill.is-active span {
    background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent);
}

/* ---------- Carte de ville ----------
   La carte dit en un coup d'œil ce qu'une liste faisait lire ligne à ligne :
   la ville, sa région, les enseignes présentes et le nombre de salles. C'est
   ce dernier chiffre qui décide, bien plus que le nombre d'adresses. */
.city {
    position: relative; display: flex; flex-direction: column;
    padding: 1.35rem 1.5rem 1.15rem;
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%,
            var(--surface) 58%);
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}
/* Filet d'accent au bord haut, révélé au survol : marque la carte visée sans
   déplacer une seule ligne de texte. */
.city::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .2s ease;
}
.city:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-2px); }
.city:hover::before { transform: scaleX(1); }

.city__region {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
}
.city__name {
    font-family: var(--font-title), sans-serif;
    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
    margin: 0.3rem 0 0.9rem;
}
.city:hover .city__name { color: var(--accent); }

.city__brands { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.1rem; }
/* ---------- Espace client et choix de créneau ---------- */

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

.champ { display: block; margin-bottom: 0.9rem; }
.champ > span {
    display: block; margin-bottom: 0.3rem;
    font-size: 0.8125rem; font-weight: 600; color: var(--text);
}
.champ input, .champ textarea, .champ select {
    width: 100%; padding: 0.65rem 0.8rem;
    background: var(--raised); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: inherit;
}
.champ input:focus, .champ textarea:focus {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.champ small { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.75rem; }

/* Une erreur se lit LÀ où l'on vient d'agir, pas dans un bandeau en haut de
   page qu'il faut aller chercher en remontant. */
.form-erreur {
    margin: 0.75rem 0 0; padding: 0.6rem 0.75rem;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
    color: var(--text); font-size: 0.875rem;
}

.lien-sobre { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.reservation__tete {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.5rem;
}
.reservation__date { font-size: 0.8125rem; color: var(--muted); }
.reservation__heure {
    font-family: var(--font-title), sans-serif; font-weight: 700;
    font-size: 1.35rem; color: var(--accent);
}
.reservation__ref { font-size: 0.8125rem; color: var(--muted); margin: 0.5rem 0; }
.reservation__ref b { letter-spacing: 0.08em; color: var(--text); }

.table-simple__ligne {
    display: grid; gap: 0.5rem; align-items: center;
    grid-template-columns: 11rem 1fr 8rem 7rem;
    padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}
.table-simple__ligne.est-annulee { color: var(--muted); text-decoration: line-through; }
@media (max-width: 700px) {
    .table-simple__ligne { grid-template-columns: 1fr 1fr; }
}

/* Choix du jour : une bande qui défile plutôt qu'un calendrier mensuel - on
   réserve à quelques jours, pas à trois mois, et une bande tient sur un
   téléphone là où une grille de trente cases oblige à zoomer. */
.dispos-jours {
    display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.25rem 0 0.75rem;
    margin-top: 1.25rem; scrollbar-width: thin;
}
.dispo-jour {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    gap: 0.1rem; min-width: 4.75rem; padding: 0.55rem 0.7rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--muted); cursor: pointer;
    transition: border-color .15s, color .15s;
}
.dispo-jour:hover { border-color: var(--accent); }
.dispo-jour.est-actif { border-color: var(--accent); color: var(--text); }
.dispo-jour__nom { font-size: 0.75rem; text-transform: capitalize; }
.dispo-jour__date { font-family: var(--font-title), sans-serif; font-weight: 700; }
.dispo-jour__nb {
    font-size: 0.6875rem; padding: 0 0.4rem; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent);
}

.dispos-liste { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dispo {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 5rem; padding: 0.55rem 0.9rem;
    background: var(--raised); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: var(--font-title), sans-serif; font-weight: 600;
    cursor: pointer; transition: background-color .15s, border-color .15s;
}
.dispo:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, var(--raised));
}
/* Départ trop proche pour la réservation en ligne : il reste VISIBLE - le
   masquer donnerait l'impression d'une salle vide - mais mène au téléphone. */
.dispo--telephone { color: var(--muted); border-style: dashed; }
.dispos-note { margin-top: 1rem; font-size: 0.8125rem; }

/* Modale du site public : même grammaire que celle du back-office - opaque,
   détachée, le refus au focus. */
.modale-fond {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center; padding: 1.25rem;
    background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px);
}
.modale {
    width: 100%; max-width: 26rem; padding: 1.5rem;
    background: var(--raised);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0,0,0,.65);
}
.modale__message { margin: 0 0 1.25rem; color: var(--text); }
.modale__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

/* ---------- Panier et confirmation ---------- */

/* Le panier se reconnaît à son icône : écrire « Panier » à côté dit deux fois
   la même chose et allonge un en-tête déjà chargé. Le mot reste dans le flux
   pour les lecteurs d'écran (`.u-lecteur`). */
.site-header__panier { display: inline-flex; align-items: center; gap: 0; }
.site-header__panier .btn__icone { margin-right: 0; }
.site-header__pastille {
    margin-left: 0.35rem; padding: 0 0.4rem; border-radius: var(--radius-pill);
    background: var(--accent); color: var(--on-accent);
    font-size: 0.75rem; font-weight: 700;
}

.panier-minuteur {
    margin-top: 1.25rem; padding: 0.7rem 0.9rem;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.panier-lignes { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.panier-ligne {
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.panier-ligne__quand {
    display: flex; flex-direction: column; min-width: 8.5rem;
    padding-right: 1rem; border-right: 1px solid var(--border);
}
.panier-ligne__date { font-size: 0.8125rem; color: var(--muted); }
.panier-ligne__heure {
    font-family: var(--font-title), sans-serif; font-weight: 700;
    font-size: 1.35rem; color: var(--accent);
}
.panier-ligne__quoi { flex: 1 1 14rem; }
.panier-ligne__quoi h3 { margin: 0 0 0.15rem; }
.panier-ligne__quoi p { margin: 0; }
.panier-ligne__ref {
    font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--muted);
}
@media (max-width: 640px) {
    .panier-ligne__quand { border-right: none; border-bottom: 1px solid var(--border);
                           padding: 0 0 0.5rem; width: 100%; }
}

.champ--case { display: flex; align-items: flex-start; gap: 0.6rem; }
.champ--case input { width: auto; margin-top: 0.15rem; }
.champ--case span { font-weight: 400; font-size: 0.9rem; }

.confirmation-tete { display: flex; align-items: center; gap: 1.25rem; }
.confirmation-coche {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.confirmation-coche svg { width: 1.75rem; height: 1.75rem; fill: var(--accent); }

.confirmation-ref {
    display: flex; flex-direction: column; gap: 0.2rem; margin-top: 1.75rem;
    text-align: center;
}
.confirmation-ref strong {
    font-family: var(--font-title), sans-serif; font-size: 1.85rem;
    letter-spacing: 0.14em; color: var(--accent);
}
.confirmation-suite { margin: 0.5rem 0 0; padding-left: 1.1rem; line-height: 1.7; }

/* Icône en ligne d'un bouton. Le site public ne charge PAS de bibliothèque
   d'icônes : 400 Ko pour deux glyphes sur une page qui doit s'ouvrir vite en
   mobile, c'est un mauvais marché. `currentColor` la fait suivre le bouton. */
.btn__icone {
    width: 1em; height: 1em; fill: currentColor;
    vertical-align: -0.125em; margin-right: 0.35em;
}

.brand-chip {
    padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}

/* Pastille de logo. Une marque se reconnaît à son logo ; l'écrire en toutes
   lettres à côté dit deux fois la même chose et encombre la carte. Le fond
   reste neutre : les logos sont déjà colorés, les teinter d'un accent en
   fausserait la charte. Repli sur `.brand-chip` quand aucun logo n'est
   disponible - le nom vaut mieux que le vide. */
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.3rem 0.55rem;
    background: var(--raised); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
/* Hauteur posée sur l'IMAGE, pas sur la pastille : les cinq logos n'ont pas
   le même rapport - le téléviseur de Cube TV est haut, Green Cube est large.
   Contraindre la boîte les réduisait tous au plus petit dénominateur, et on
   n'y lisait plus rien. La pastille suit la largeur du logo. */
.brand-mark img { height: 2rem; width: auto; object-fit: contain; }
.brand-mark--lg img { height: 2.75rem; }
.brand-marks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }

/* Lu par les lecteurs d'écran, invisible à l'œil. Sert aux noms que le logo
   porte déjà visuellement : l'information ne doit pas disparaître pour qui
   n'a pas l'image. */
.u-lecteur {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.city__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-top: auto; padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    font-size: 0.875rem; color: var(--muted);
}
.city__count b {
    font-family: var(--font-title), sans-serif;
    color: var(--text); font-weight: 700; font-size: 1.05rem;
}
.city__go { color: var(--accent); font-size: 1.05rem; transition: transform .15s; }
.city:hover .city__go { transform: translateX(3px); }

.city-empty { color: var(--muted); padding: 2rem 0; }

/* ---------- Bandeau d'appel ---------- */
.cta-band {
    display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
    background:
        linear-gradient(120deg,
            color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%,
            var(--surface) 55%);
}
.cta-band > div:first-child { flex: 1 1 22rem; }
.cta-band h2 { margin-bottom: 0.35rem; }
.cta-band p { margin: 0; }
.cta-band__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- Carte de concept (portail) ---------- */
.concept-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem;
    transition: border-color .15s, transform .15s;
}
.concept-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.concept-card__mark {
    display: flex; align-items: center; justify-content: flex-start;
    height: 3.5rem; margin-bottom: 1.1rem;
}
.concept-card__mark img { max-height: 3.5rem; width: auto; max-width: 100%; }
.concept-card__mark span {
    font-family: var(--font-title), sans-serif; font-weight: 700; font-size: 1.2rem;
}
.concept-card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.concept-card p { color: var(--muted); font-size: 0.925rem; margin: 0; flex: 1; }
.concept-card__go {
    margin-top: 1.1rem; color: var(--accent);
    font-family: var(--font-title), sans-serif; font-weight: 600; font-size: 0.9rem;
}
.concept-card--wide { padding: 2rem; }
.concept-card--wide .concept-card__mark { height: 4.5rem; }
.concept-card--wide .concept-card__mark img { max-height: 4.5rem; }

/* ---------- Grilles et cartes ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color .15s, background-color .15s;
}
a.card:hover { border-color: var(--accent); }
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--muted); margin: 0; font-size: 0.95rem; }

/* Carte de salle : visuel, nom, accroche, puis les trois informations que le
   visiteur cherche réellement - durée, nombre de joueurs, âge minimum. */
.room {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    transition: border-color .15s, transform .15s;
}
.room:hover { border-color: var(--accent); transform: translateY(-2px); }
.room__media {
    aspect-ratio: 16 / 10; position: relative;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 26%, var(--raised)) 0%,
            var(--raised) 70%);
    display: flex; align-items: flex-end; padding: 0.85rem;
}
.room__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.room__body h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.room__tagline { color: var(--muted); font-size: 0.925rem; margin: 0 0 1rem; flex: 1; }
.room__meta {
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem;
    font-size: 0.82rem; color: var(--muted);
    padding-top: 0.85rem; border-top: 1px solid var(--border);
}
.room__meta b { color: var(--text); font-weight: 600; }
.room__price {
    margin-left: auto; color: var(--accent);
    font-family: var(--font-title), sans-serif; font-weight: 600;
}

.tag {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.28rem 0.7rem; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
.tag--neutral { background: var(--raised); color: var(--muted); }

/* ---------- Étapes numérotées ---------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 3.25rem; }
.step::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: 0;
    width: 2.35rem; height: 2.35rem; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-family: var(--font-title), sans-serif; font-weight: 700;
}

/* ---------- Implantations ---------- */
.place {
    display: flex; flex-direction: column; gap: 0.75rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.35rem 1.5rem;
    transition: border-color .15s;
}
.place:hover { border-color: var(--accent); }
.place__city { font-family: var(--font-title), sans-serif; font-weight: 700; font-size: 1.2rem; }
.place__addr { color: var(--muted); font-size: 0.9rem; }
.place__foot {
    display: flex; align-items: center; gap: 0.75rem;
    margin-top: auto; padding-top: 0.5rem;
    color: var(--accent); font-weight: 600; font-size: 0.9rem;
}

/* ---------- Détail d'une salle ---------- */
.detail { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr; } }
.detail__media {
    aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 28%, var(--raised)) 0%, var(--raised) 70%);
    margin-bottom: 2rem;
}
.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 0; border-bottom: 1px solid var(--border);
    font-size: 0.925rem;
}
.facts li:last-child { border-bottom: 0; }
.facts span { color: var(--muted); }
.facts b { font-weight: 600; }

.aside-card {
    position: sticky; top: 5.5rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem;
}
.aside-card .price {
    font-family: var(--font-title), sans-serif;
    font-size: 1.75rem; font-weight: 700; line-height: 1;
}

/* ---------- Questions fréquentes ---------- */
.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 0; cursor: pointer; list-style: none;
    font-family: var(--font-title), sans-serif; font-weight: 600; font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; color: var(--accent); font-size: 1.4rem; line-height: 1; flex: none;
}
.faq-item[open] summary::after { content: '\2013'; }
.faq-item p { color: var(--muted); margin: 0 0 1.15rem; max-width: 52rem; }

/* ---------- Formulaires ---------- */
.field { display: block; margin-bottom: 1.1rem; }
.field > span {
    display: block; margin-bottom: 0.4rem;
    font-size: 0.85rem; font-weight: 600; color: var(--muted);
}
.field input, .field select, .field textarea {
    width: 100%; padding: 0.75rem 0.9rem;
    background: var(--raised); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    /* 16 px minimum : en dessous, iOS zoome la page au focus d'un champ. */
    font-size: 16px; font-family: inherit;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--accent);
}

/* ---------- Bandeau ---------- */
.banner {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.1rem; font-size: 0.95rem;
}

/* ---------- Pied de page ---------- */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 3.5rem 0 2rem; margin-top: 2rem;
}
.site-footer__cols {
    display: grid; gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.site-footer h4 {
    font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 0.9rem; font-weight: 600;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--muted); font-size: 0.925rem; }
.site-footer a:hover { color: var(--accent); }
.site-footer__legal {
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center;
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 0.85rem;
}
/* Accès de l'équipe : discret, et en dernier. Une vitrine ne met pas un bouton
   de connexion à côté de son bouton de réservation. */
.site-footer__staff { margin-left: auto; opacity: .7; }
.site-footer__staff:hover { opacity: 1; color: var(--accent); }

/* ---------- Prose (pages légales) ---------- */
.prose { max-width: 48rem; }
.prose h2 { margin-top: 2.5rem; }
.prose p { color: var(--muted); }

/* ---------- Accessibilité ----------
   Pas de démarche de conformité RGAA (§14.11), mais les bonnes pratiques
   usuelles : focus visible, et respect d'une préférence de mouvement réduit. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Filtre d'enseigne (portail) ----------
   Pastilles de filtrage de la liste des activités, quand elle mélange les
   quatre enseignes. */
.filter-pill {
    padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
    background: transparent; color: var(--muted);
    border: 1px solid var(--border);
    font-family: var(--font-title), sans-serif; font-size: 0.85rem; font-weight: 600;
    transition: background-color .15s, color .15s, border-color .15s;
}
.filter-pill:hover { color: var(--text); }
.filter-pill.is-active {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent); border-color: var(--accent);
}

/* Les quatre valises de marque ne fournissent pas des logos au même format :
   carré pour Cube, large pour Cube In The Dark. On fixe la boîte et on y
   contient la marque, plutôt que de laisser chacune imposer sa taille. */
.concept-card__mark img { max-height: 3.25rem; max-width: 9rem; object-fit: contain; }
.concept-card--wide .concept-card__mark img { max-height: 4rem; max-width: 12rem; }

/* ---------- Barres de filtres ---------- */
.filters { margin-bottom: clamp(2rem, 4vw, 3rem); }
.filters__row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    padding: 0.85rem 0; border-bottom: 1px solid var(--border);
}
.filters__row:last-child { border-bottom: 0; }
.filters__label {
    width: 5.5rem; flex: none;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
}
@media (max-width: 620px) {
    .filters__label { width: 100%; margin-bottom: 0.15rem; }
}

/* En-tête d'un lieu dans la liste des activités. */
.lieu-head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem;
    margin-bottom: 1.25rem;
}
.lieu-head h2 { margin: 0; }
.lieu-head a { font-size: 0.9rem; }
.lieu-head a:hover { color: var(--accent); }

/* Pastille de filtre portant une marque plutôt qu'un intitulé : cinq noms qui
   commencent tous par « Cube » se distinguent mal ; les logos, eux, se
   reconnaissent d'un coup d'œil. Le nom reste porté par `aria-label` et par
   l'infobulle - un filtre doit rester utilisable sans voir les images. */
.filter-pill--marque { padding: 0.45rem 0.9rem; }
.filter-pill--marque img {
    height: 1.75rem; width: auto; max-width: 5.5rem; object-fit: contain;
    /* Les logos sont livrés en version « pour fond sombre » : hors sélection
       on les atténue, plutôt que de les reteinter. */
    opacity: .6; transition: opacity .15s;
}
.filter-pill--marque:hover img,
.filter-pill--marque.is-active img { opacity: 1; }

/* ---------- Carte de France ----------
   Le fond est un chemin figé (app/map_fr.py) ; les pastilles sont posées par
   le serveur, avec la même projection. Pas de bibliothèque de cartographie :
   une carte statique de treize points n'en demande pas, et un visiteur ne
   devrait pas télécharger deux cents kilo-octets pour voir où l'on joue. */
.map-block {
    display: grid; gap: 2rem 2.5rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(12rem, 0.75fr);
    align-items: center;
}
@media (max-width: 860px) { .map-block { grid-template-columns: 1fr; } }

.map-block__map svg { width: 100%; height: auto; overflow: visible; }
.map__land {
    /* Une teinte d'accent très diluée : le contour doit se détacher du fond
       sans devenir un aplat qui concurrencerait les pastilles. */
    fill: color-mix(in srgb, var(--accent) 7%, var(--surface));
    stroke: color-mix(in srgb, var(--accent) 32%, var(--border));
    stroke-width: 2.5; stroke-linejoin: round;
}
.map__pin { cursor: pointer; }
.map__halo { fill: var(--accent); opacity: .16; transition: opacity .15s, r .15s; }
.map__dot { fill: var(--accent); }
.map__pin text {
    fill: var(--muted); font-family: var(--font-title), sans-serif;
    font-size: 26px; font-weight: 600;
    /* Le texte d'un SVG ne se met pas à l'échelle comme le reste : sans
       `paint-order`, un liseré le rendrait illisible sur le tracé. */
    paint-order: stroke; stroke: var(--bg); stroke-width: 6; stroke-linejoin: round;
    transition: fill .15s;
}
.map__pin:hover .map__halo { opacity: .38; }
.map__pin:hover text { fill: var(--text); }

.map-block__list { list-style: none; margin: 0; padding: 0; }
.map-block__list a {
    display: block; padding: 0.6rem 0.75rem; margin: 0 -0.75rem;
    border-radius: var(--radius-sm); transition: background-color .15s;
}
.map-block__list a:hover { background: var(--surface); }
.map-block__city {
    display: block;
    font-family: var(--font-title), sans-serif; font-weight: 600; font-size: 1.05rem;
}
.map-block__list a:hover .map-block__city { color: var(--accent); }
.map-block__addr { display: block; font-size: 0.82rem; color: var(--muted); }

/* Signature de l'atelier, en pied de page. Discrète : elle a sa place, pas la
   première. Le lien reprend l'accent de l'enseigne au survol, comme les
   autres liens du pied. */
.site-footer__credit a { color: var(--muted); border-bottom: 1px solid var(--border); }
.site-footer__credit a:hover { color: var(--accent); border-color: var(--accent); }

/* Galerie d'une salle : les fichiers déposés depuis l'administration, après la
   couverture. Une colonne de plus sur grand écran, une seule sur téléphone. */
/* Planche de contact : de petites vignettes qu'on parcourt d'un coup d'oeil.
   `auto-fill` et non `auto-fit` : sur une large colonne, `auto-fit` étirerait
   trois photos sur toute la largeur - on veut des vignettes, pas des pavés. */
.gallery {
    display: grid; gap: 0.5rem; margin-top: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
.gallery__vignette {
    position: relative; display: block; padding: 0; border: 0;
    background: var(--raised); border-radius: var(--radius-sm);
    overflow: hidden; cursor: zoom-in; line-height: 0;
}
.gallery__vignette img, .gallery__vignette video {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
    transition: transform .2s, opacity .2s;
}
.gallery__vignette:hover img, .gallery__vignette:hover video {
    transform: scale(1.04); opacity: .85;
}
.gallery__film {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center; pointer-events: none;
}
.gallery__film svg {
    width: 2rem; height: 2rem; fill: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}

/* ---------- Visionneuse ----------
   Écrite à la main, comme le reste du site public : une bibliothèque de
   quarante kilo-octets pour agrandir une photo serait un mauvais marché. */
.visionneuse {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .92);
    animation: visionneuse-entree .15s ease-out;
}
@keyframes visionneuse-entree { from { opacity: 0 } }

.visionneuse__cadre {
    max-width: min(100vw - 2rem, 1400px); max-height: calc(100vh - 7rem);
    display: flex; align-items: center; justify-content: center;
}
.visionneuse__cadre img, .visionneuse__cadre video {
    max-width: 100%; max-height: calc(100vh - 7rem);
    width: auto; height: auto; object-fit: contain;
    border-radius: var(--radius-sm);
}

.visionneuse__bouton {
    position: absolute; display: inline-flex;
    align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    cursor: pointer; transition: background-color .15s;
}
.visionneuse__bouton:hover { background: rgba(255, 255, 255, .26); }
.visionneuse__bouton svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.visionneuse__fermer { top: 1rem; right: 1rem; }
.visionneuse__prec { left: 1rem; }
.visionneuse__suiv { right: 1rem; }

.visionneuse__compte {
    position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
    padding: 0.3rem 0.8rem; border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12); color: #fff;
    font-size: 0.8125rem; font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    /* Sur un téléphone, les flèches latérales mangent l'image : on les
       descend en bas, à portée de pouce, et on garde le balayage. */
    .visionneuse__prec, .visionneuse__suiv { top: auto; bottom: 1rem; }
    .visionneuse__prec { left: 1.5rem; }
    .visionneuse__suiv { right: 1.5rem; }
    .visionneuse__compte { bottom: 1.6rem; }
    .visionneuse__cadre img, .visionneuse__cadre video { max-height: calc(100vh - 9rem); }
}