/* ------------------------------------------------------------------
   La Fraternelle — styles de base
   Palette issue du logo 2026. La mise en page détaillée viendra ensuite.
   ------------------------------------------------------------------ */
:root {
    --marine: #021945;
    --bleu:   #0189A1;
    --vert:   #4C8220;
    --rouge:  #F73519;
    --jaune:  #F8A602;
    --violet: #5B2F91;
    --texte:  #1d2433;
    --gris:   #6b7280;
    --ligne:  #e5e7eb;
    --fond:   #f7f9fc;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: var(--texte); background: var(--fond); }
img { max-width: 100%; height: auto; }
a { color: var(--bleu); }
h1, h2, h3 { color: var(--marine); line-height: 1.25; }

/* En-tête */
.entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.5rem; background: #fff; border-bottom: 4px solid transparent;
          border-image: linear-gradient(90deg, var(--bleu) 0 20%, var(--vert) 20% 40%, var(--rouge) 40% 60%, var(--jaune) 60% 80%, var(--violet) 80% 100%) 1; }
.logo { display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: 1.2rem; color: var(--marine); text-decoration: none; }
.logo img { display: block; height: 64px; width: auto; }
.logo small { display: block; font-weight: 500; font-size: .8rem; color: var(--bleu); letter-spacing: .03em; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; }
nav a { color: var(--marine); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; font-weight: 500; }
nav a.actif, nav a:hover { color: var(--bleu); border-bottom-color: var(--bleu); }
nav a.bouton-menu { background: var(--rouge); color: #fff; padding: .35rem .9rem; border-radius: 2rem; border: 0; }
nav a.bouton-menu:hover, nav a.bouton-menu.actif { background: var(--marine); color: #fff; }

.contenu { max-width: 64rem; margin: 2rem auto; padding: 0 1.5rem; }

/* Pied de page */
.pied { background: var(--marine); color: #dbe4f3; padding: 2rem 1.5rem; margin-top: 4rem; }
.pied a { color: #fff; }
.pied__colonnes { max-width: 64rem; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
.pied__colonnes img { width: 140px; height: auto; display: block; }
.pied ul { list-style: none; margin: 0; padding: 0; }
@media (max-width: 40rem) { .pied__colonnes { grid-template-columns: 1fr; text-align: center; } .pied__colonnes img { margin: 0 auto; } }

/* Éléments communs */
.intro { font-size: 1.1rem; }
.fil { font-size: .9rem; color: var(--gris); }
.conditions, .lieu, .age { color: var(--gris); }
.lieu, .age { margin: .5rem 0 0; font-size: .9rem; }
.bouton, .bouton--inscription { display: inline-block; background: var(--bleu); color: #fff; padding: .6rem 1.2rem; border-radius: 2rem; text-decoration: none; font-weight: 600; }
.bouton:hover { background: var(--marine); }
.encart { background: #fff; border-left: 4px solid var(--bleu); padding: .75rem 1.25rem; margin: 1.5rem 0; border-radius: 0 .5rem .5rem 0; }
.encart h2 { font-size: 1.1rem; margin: .25rem 0 .5rem; }
.infos { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; }
.infos dt { font-weight: 600; }
.infos dd { margin: 0; }
.inscription { margin: 1.5rem 0; }

/* Cartes */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.carte { background: #fff; border: 1px solid var(--ligne); border-radius: .5rem; padding: 1rem 1.25rem; }
.carte h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.carte h3 a { color: var(--marine); text-decoration: none; }
.carte h3 a:hover { color: var(--bleu); }
.carte--article { padding: 0; overflow: hidden; }
.carte--article img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--ligne); }
.carte--article > div { padding: .75rem 1.25rem 1rem; }
.carte--article .lieu { margin: 0 0 .25rem; }

/* Activités */
.categorie { margin-top: 2.5rem; }
.creneaux { list-style: none; margin: 0; padding: 0; }
.reprise { display: inline-block; background: #e6f6f8; color: var(--bleu); padding: .25rem .75rem; border-radius: 1rem; }
/* État de la saison d'une activité (étape 109) */
.reprise--en-cours { background: #e8f4e2; color: #3d6a19; }
.reprise--terminee { background: #ecedf0; color: #5a6070; }
.reprise--pause { background: #fdf0d9; color: #8a5a06; }
.reprise--annule { background: #fde6e2; color: #a32a12; }
.fermetures--annulations strong { color: #a32a12; }
/* Texte libre saisi en plusieurs lignes dans l'administration (étape 113) */
.texte-liste { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .25rem; }
.texte-liste li { padding-left: 1.6rem; position: relative; }
.texte-liste li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--bleu); }
.conditions > p { margin: 0 0 .5rem; }
.conditions > p:last-child, .conditions > ul:last-child { margin-bottom: 0; }
/* Conditions de location : respirer après la dernière carte de matériel */
.location__conditions { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ligne); }
/* Bloc de texte libre : les paragraphes héritent de la taille et de la couleur du bloc */
.texte-libre > p { margin: 0 0 .5rem; font-size: inherit; color: inherit; }
.texte-libre > p:last-child, .texte-libre > ul:last-child { margin-bottom: 0; }
.annulation-ligne { grid-template-columns: 10rem 10rem 1fr auto; }
.annulation-ligne .an-motif { grid-column: 3; }
.fermetures__titre { font-size: 1rem; margin: 1.25rem 0 .5rem; }
.fermetures { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.fermetures li { display: flex; flex-wrap: wrap; gap: .25rem .6rem; color: var(--gris); font-size: .95rem; }
.fermetures strong { color: var(--marine); font-weight: 600; }
.cases-groupe { border: 1px solid var(--ligne); border-radius: .5rem; padding: .75rem 1rem 1rem; margin: 1rem 0 0; }
.cases-groupe legend { font-weight: 600; padding: 0 .4rem; }
.cases-groupe .droit { display: flex; align-items: baseline; gap: .5rem; padding: .2rem 0; }
.cases-groupe .droit small { color: var(--gris); }
/* Page Vacances scolaires : pas de photo, et la suppression passe sous le formulaire */
.materiel--vacance { grid-template-columns: 1fr; grid-template-areas: "formulaire" "actions"; }
.materiel--vacance .materiel-supprimer { grid-area: actions; margin: 0; text-align: right; }
.materiel-formulaire input[type="date"] { min-width: 9.5rem; }
.materiel-formulaire__dates { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; }

/* Location */
.location { margin-top: 2rem; }
.tarifs { width: 100%; max-width: 36rem; border-collapse: collapse; background: #fff; border: 1px solid var(--ligne); }
.tarifs th, .tarifs td { padding: .75rem 1rem; border-bottom: 1px solid #f1f5f9; text-align: left; }
.tarifs th { font-weight: 500; }
.tarifs th small { display: block; font-weight: 400; color: var(--gris); }
.tarifs td { text-align: right; font-weight: 700; white-space: nowrap; }
.tarifs td span { font-weight: 400; color: var(--gris); font-size: .9rem; }

/* Événements */
.agenda { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.agenda li { display: flex; gap: 1rem; align-items: center; background: #fff; border: 1px solid var(--ligne); border-radius: .5rem; padding: .75rem 1rem; }
.agenda__date { flex: 0 0 4.5rem; text-align: center; background: var(--marine); color: #fff; border-radius: .5rem; padding: .35rem 0; line-height: 1.1; font-size: .85rem; }
.agenda__date strong { display: block; font-size: 1.6rem; }
.agenda__date small { display: block; color: #9fb3d6; }
.agenda li:nth-child(5n+2) .agenda__date { background: var(--bleu); }
.agenda li:nth-child(5n+3) .agenda__date { background: var(--vert); }
.agenda li:nth-child(5n+4) .agenda__date { background: var(--rouge); }
.agenda li:nth-child(5n+5) .agenda__date { background: var(--violet); }
.agenda__texte a { font-weight: 600; font-size: 1.1rem; color: var(--marine); text-decoration: none; }
.agenda__texte small { display: block; color: var(--gris); }


/* Actualités */
.article__contenu img { border-radius: .25rem; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; margin: 1rem 0; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pagination { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0; }
/* Saut direct à une page : utile dès qu'il y a plus d'une dizaine de pages */
.pagination__saut { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin: .5rem 0 0; font-size: .9rem; color: var(--gris); }
/* Sélecteur de la médiathèque : saisie directe du numéro de page */
.selecteur__pages { display: flex; align-items: center; gap: .4rem; }
.selecteur__saut { display: flex; align-items: center; gap: .3rem; font-size: .9rem; color: var(--gris); }
.selecteur__saut input { width: 4rem; padding: .25rem .4rem; text-align: center; }
.selecteur__saut input:disabled { opacity: .5; }
.pagination__saut input[type="number"] { width: 5rem; }
.pagination__saut label { font-weight: 600; }

/* Adhérer */
.tarifs-carte { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.tarifs-carte div { background: #fff; border: 2px solid var(--bleu); border-radius: .75rem; padding: 1rem 2rem; text-align: center; }
.tarifs-carte div + div { border-color: var(--jaune); }
.tarifs-carte strong { display: block; font-size: 2rem; color: var(--marine); }
.etapes li { margin-bottom: .5rem; }

/*
 * Images dans le corps d'un article : centrées plutôt que collées à gauche.
 * Une affiche ou une coupure de presse est souvent plus étroite que la colonne
 * de texte, et alignée à gauche elle donne l'impression d'un article mal monté.
 *
 * L'import WordPress livre plusieurs emballages selon l'éditeur d'origine :
 * image seule, image dans un paragraphe, image dans un lien, ou figure avec
 * légende. Les règles ci-dessous les couvrent toutes sans toucher aux liens
 * ordinaires écrits au fil du texte.
 */
.article__contenu img { display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }
.article__contenu > img, .article__contenu > a { margin-top: 1rem; margin-bottom: 1rem; }
.article__contenu > a { display: block; }
.article__contenu a > img { margin: 0 auto; }

/* Le paragraphe qui ne contient qu'une image : on centre son contenu */
.article__contenu p:has(> img),
.article__contenu p:has(> a > img) { text-align: center; }

/*
 * Le texte est ramené à une largeur de lecture et centré lui aussi : sinon il
 * court d'un bord à l'autre pendant que les images, plus étroites, sont
 * centrées, et les deux semblent se contredire. Les paragraphes qui ne
 * contiennent qu'une image gardent toute la largeur.
 */
/*
 * Une seule colonne pour tout l'article : fil, titre, date, texte et images.
 * Les centrer séparément donnait deux bords gauches différents, et l'article
 * semblait mal monté. 46rem laisse des lignes confortables à lire et reste
 * assez large pour qu'une coupure de presse scannée reste déchiffrable.
 */
.fil--article,
.article > h1, .article__dates,
.article__contenu { max-width: 46rem; margin-left: auto; margin-right: auto; }

/* Manifestation masquée : le nom reste, sans être cliquable */
.suite__centre--inerte { color: var(--gris); cursor: default; }
.fil--article span { color: var(--gris); }

.article__contenu figure { margin: 1rem auto; text-align: center; }
.article__contenu figure img { margin: 0 auto; }
.article__contenu figcaption { color: var(--gris); font-size: .9rem; margin-top: .4rem; }

/* ------------------------------------------------------------------
   Accueil
   ------------------------------------------------------------------ */
.contenu--pleine { max-width: none; margin: 0; padding: 0; }
.pied--colle { margin-top: 0; }
.bouton--rouge { background: var(--rouge); }
.bouton--clair { background: #fff; color: var(--marine); }
.bouton--rouge:hover, .bouton--clair:hover { background: var(--marine); color: #fff; }

.hero { position: relative; color: #fff; background: var(--marine) var(--hero-image, none) center / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,25,69,.55) 0%, rgba(2,25,69,.8) 55%); }
.hero__interieur { position: relative; max-width: 72rem; margin: 0 auto; padding: 4rem 1.5rem; display: grid; grid-template-columns: minmax(12rem, 22rem) 1fr; gap: 3rem; align-items: center; }
.hero__logo img { display: block; width: 100%; height: auto; background: rgba(255,255,255,.94); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.4rem); margin: 0 0 1rem; }
.hero__texte p { font-size: clamp(1.05rem, 1.8vw, 1.35rem); max-width: 40rem; }
.hero__boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@media (max-width: 48rem) {
    .hero__interieur { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; padding: 2.5rem 1.25rem; }
    .hero__logo { max-width: 14rem; margin: 0 auto; }
    .hero__texte p { margin-left: auto; margin-right: auto; }
    .hero__boutons { justify-content: center; }
}

.bande { padding: 3rem 1.5rem; }
.bande--grise { background: #eef2f8; }
.bande--agenda { background: #fff; padding: 2rem 1.5rem; border-bottom: 1px solid var(--ligne); }
.bande__interieur { max-width: 72rem; margin: 0 auto; }
.bande__lien { text-align: right; margin: 1rem 0 0; font-weight: 600; }
.bande--agenda h2 { margin-top: 0; }
.agenda--ligne { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.titre-section { text-align: center; margin-bottom: 2rem; }
.titre-section h2 { font-size: 2.2rem; font-weight: 400; margin: 0; }
.titre-section h2::after { content: ""; display: block; width: 4rem; height: 3px; margin: .9rem auto 0;
    background: linear-gradient(90deg, var(--bleu) 0 20%, var(--vert) 20% 40%, var(--rouge) 40% 60%, var(--jaune) 60% 80%, var(--violet) 80% 100%); }
.titre-section p { color: var(--gris); font-weight: 500; }

.piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }
.pilier { display: block; background: #fff; border-radius: .75rem; overflow: hidden; text-decoration: none; color: var(--texte);
          box-shadow: 0 1px 3px rgba(2,25,69,.08); transition: transform .15s ease, box-shadow .15s ease; text-align: center; }
.pilier:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(2,25,69,.14); }
.pilier img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.pilier h3 { font-weight: 500; margin: 1rem 1.25rem .5rem; }
.pilier p { margin: 0 1.25rem 1.5rem; }
.pilier:nth-child(1) { border-top: 4px solid var(--bleu); }
.pilier:nth-child(2) { border-top: 4px solid var(--rouge); }
.pilier:nth-child(3) { border-top: 4px solid var(--vert); }

.centenaire { padding: 1.5rem; background: #fff; border-top: 1px solid var(--ligne); }
.centenaire__interieur { display: flex; align-items: stretch; gap: 1.5rem; }
/* Le sticker prend la hauteur de la façade vidéo : deux blocs de hauteurs
   différentes côte à côte donnaient une bande bancale. */
.centenaire__interieur img { flex: 0 0 auto; width: auto; height: auto;
    align-self: stretch; object-fit: contain; max-width: 16rem; }
.centenaire__interieur p { align-self: center; }
/* Dans la bande, l'espacement vient du gap : la marge de la façade ferait
   dépasser le sticker de 16 px. */
.centenaire__interieur .video-facade { margin-top: 0; }
.centenaire__interieur p { margin: 0; }

.rejoindre { background: var(--marine); color: #dbe4f3; padding: 3rem 1.5rem; border-top: 4px solid transparent;
             border-image: linear-gradient(90deg, var(--bleu) 0 20%, var(--vert) 20% 40%, var(--rouge) 40% 60%, var(--jaune) 60% 80%, var(--violet) 80% 100%) 1; }
.rejoindre__interieur { display: grid; grid-template-columns: 14rem 1fr; gap: 3rem; align-items: center; }
.rejoindre img { width: 100%; height: auto; display: block; }
.rejoindre h2 { color: #fff; font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin: 0 0 1rem; }
.rejoindre p { font-size: 1.15rem; }
.rejoindre strong { color: #fff; }
@media (max-width: 48rem) {
    .rejoindre__interieur { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
    .rejoindre picture { max-width: 10rem; margin: 0 auto; }
    .centenaire__interieur { flex-direction: column; text-align: center; }
    /* En colonne, plus rien à aligner : le sticker reprend une taille modeste */
    .centenaire__interieur img { align-self: center; height: auto; max-width: 8rem; }
    .centenaire__interieur .video-facade { margin-top: .5rem; }
}

/* Pied de page sans logo (accueil) : séparé du bloc « Rejoignez » */
.pied--colle { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; }
.pied__colonnes--sans-logo { grid-template-columns: 1fr auto; }
@media (max-width: 40rem) { .pied__colonnes--sans-logo { grid-template-columns: 1fr; } }

/* Pied de page toujours en bas, même sur une page courte */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; }
.contenu { width: calc(100% - 3rem); }
.contenu--pleine { width: 100%; }

/* Contact */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.contact__carte { background: #fff; border: 1px solid var(--ligne); border-radius: .75rem; padding: 1.25rem 1.5rem; }
.contact__carte h2 { margin-top: 0; font-size: 1.3rem; }
.bouton--clair-contour { background: #fff; color: var(--bleu); border: 2px solid var(--bleu); }
.bouton--clair-contour:hover { color: #fff; }
.contact__demandes { list-style: none; margin: 0; padding: 0; }
.contact__demandes li { padding: .5rem 0; border-bottom: 1px solid #f1f5f9; }
.contact__demandes li:last-child { border-bottom: 0; }
.contact__demandes a { font-weight: 600; }
.contact__demandes small { display: block; color: var(--gris); }

/* ------------------------------------------------------------------
   Icônes et cartes harmonisées
   ------------------------------------------------------------------ */
.icone { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: -.2em; }
.icone--pastille { width: 2.4rem; height: 2.4rem; padding: .45rem; border-radius: .6rem; color: var(--accent, var(--bleu));
                   background: color-mix(in srgb, var(--accent, var(--bleu)) 14%, #fff); }
h1 .icone--pastille { width: 3rem; height: 3rem; padding: .55rem; }
.icone--grande { width: 4.5rem; height: 4.5rem; stroke-width: 1.4; }
.titre-icone { display: flex; align-items: center; gap: .75rem; }

.carte--activite { border-top: 4px solid var(--accent, var(--bleu)); }

/* Cartes d'articles : visuel toujours en haut, même hauteur */
.carte--article { display: flex; flex-direction: column; }
.carte-article__visuel { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ligne); }
.carte-article__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; aspect-ratio: auto; }
.carte-article__generique { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: #fff;
                            background: linear-gradient(135deg, var(--accent, var(--marine)), color-mix(in srgb, var(--accent, var(--marine)) 65%, #021945)); }
.carte-article__generique small { font-weight: 600; letter-spacing: .02em; }
.carte-article__texte { padding: .9rem 1.25rem 1.1rem; border-top: 4px solid var(--accent, var(--bleu)); flex: 1; }
.carte-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0 0 .5rem; font-size: .85rem; color: var(--gris); }
.pastille { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem; border-radius: 1rem; font-weight: 600; color: var(--accent, var(--bleu));
            background: color-mix(in srgb, var(--accent, var(--bleu)) 12%, #fff); }
.pastille .icone { width: 1em; height: 1em; }
.carte--article h3 { margin: 0 0 .4rem; font-size: 1.08rem; }
.carte-article__extrait { margin: 0; color: #4b5563; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Textes ajoutés au-dessus des affiches et coupures de presse */
.texte-ajoute { font-size: 1.05rem; max-width: 46rem; margin-bottom: 1.5rem; }
.texte-ajoute .source { font-size: .85rem; color: var(--gris); font-style: italic; }

/* ------------------------------------------------------------------
   Visionneuse de photos
   ------------------------------------------------------------------ */
.visionneuse-declencheur { cursor: zoom-in; }
.galerie a, .article__contenu > a.visionneuse-declencheur { display: block; border-radius: .25rem; overflow: hidden; }
.galerie img { transition: transform .2s ease, opacity .2s ease; }
.galerie a:hover img, .galerie a:focus-visible img { transform: scale(1.04); opacity: .92; }
.visionneuse-declencheur:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.galerie figcaption { display: none; }

html.visionneuse-ouverte, html.visionneuse-ouverte body { overflow: hidden; }
.visionneuse { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto 1fr auto; background: rgba(2, 13, 36, .96); color: #fff; }
.visionneuse[hidden] { display: none; }
.visionneuse__barre, .visionneuse__pied { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; }
.visionneuse__barre { justify-content: flex-end; }
.visionneuse__compteur { margin-right: auto; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .03em; }
.visionneuse__pied { flex-wrap: wrap; justify-content: center; }
.visionneuse__legende { flex: 1 1 100%; text-align: center; margin: 0 0 .25rem; color: #dbe4f3; }
.visionneuse__nav { display: flex; gap: .5rem; }
.visionneuse__scene { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 3.5rem; touch-action: pan-y; }
.visionneuse__image { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s ease; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.visionneuse__image.est-chargee { opacity: 1; }
.visionneuse__chargement { position: absolute; color: #9fb3d6; }
.visionneuse__bouton { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0;
    border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; text-decoration: none; }
.visionneuse__bouton .icone { width: 1.4rem; height: 1.4rem; stroke-width: 2.2; }
.visionneuse__bouton:hover:not(:disabled) { background: var(--bleu); }
.visionneuse__bouton:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.visionneuse__bouton:disabled { opacity: .3; cursor: default; }
.visionneuse__bouton--gauche, .visionneuse__bouton--droite { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.visionneuse__bouton--gauche { left: .5rem; }
.visionneuse__bouton--droite { right: .5rem; }
@media (max-width: 40rem) {
    .visionneuse__scene { padding: 0 .25rem; }
    .visionneuse__bouton--gauche, .visionneuse__bouton--droite { display: none; }   /* glisser ou barre du bas */
}

/* Date de publication, quand elle diffère de la date de l'événement */
.carte-article__publication { margin: -.35rem 0 .5rem; font-size: .78rem; color: #9ca3af; }
.article__dates { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

/* ------------------------------------------------------------------
   Navigation : puces, suite précédente/suivante, années
   ------------------------------------------------------------------ */
.puces { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 .5rem; }
.puces--defilantes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; margin-top: 0; scrollbar-width: thin; }
.puce { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; padding: .35rem .8rem; border-radius: 2rem; text-decoration: none; font-weight: 600; font-size: .92rem;
        color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff); }
.puce small { font-weight: 500; opacity: .75; }
.puce:hover, .puce--active { background: var(--accent); color: #fff; border-color: var(--accent); }

.suite { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; max-width: 64rem; margin: 2.5rem auto; padding: 0 1.5rem; }
.contenu .suite { padding: 0; }
.suite__lien { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; background: #fff; border: 1px solid var(--ligne); border-radius: .6rem; text-decoration: none; color: var(--marine); font-weight: 600; }
.suite__lien small { color: var(--gris); font-weight: 500; }
.suite__lien:hover { border-color: var(--bleu); color: var(--bleu); }
.suite__lien--droite { text-align: right; }
.suite__centre { align-self: center; text-align: center; font-size: .9rem; }
@media (max-width: 40rem) { .suite { grid-template-columns: 1fr 1fr; } .suite__centre { grid-column: 1 / -1; order: -1; } }
.liens-bas { text-align: center; }

.editions__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.annees { display: flex; flex-wrap: wrap; gap: .4rem; }
.annees a { padding: .2rem .65rem; border-radius: 1rem; background: #fff; border: 1px solid var(--ligne); text-decoration: none; font-weight: 600; color: var(--marine); }
.annees a small { color: var(--gris); font-weight: 500; }
.annees a:hover { border-color: var(--bleu); color: var(--bleu); }
.editions__annee { scroll-margin-top: 1rem; margin-top: 1.5rem; }
.editions__titre-annee { display: flex; align-items: center; gap: .75rem; font-size: 1.3rem; margin: 0 0 .75rem; }
.editions__titre-annee::after { content: ""; flex: 1; height: 2px; background: color-mix(in srgb, var(--accent) 35%, #fff); }

/* ------------------------------------------------------------------
   Activités avec photos
   ------------------------------------------------------------------ */
.categorie { scroll-margin-top: 1rem; }
.categorie__entete { border-left: 5px solid var(--accent); padding-left: 1rem; margin-bottom: 1.25rem; }
.categorie__entete h2 { margin: 0 0 .25rem; }
.categorie__entete p { margin: 0; color: #4b5563; }
.cartes--activites { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; }
.carte--activite-photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.carte--activite-photo:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(2,25,69,.12); }
.carte-activite__visuel { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ligne); }
.carte-activite__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-activite__icone { position: absolute; left: 1rem; bottom: -1.3rem; width: 2.8rem; height: 2.8rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center;
                         background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(2,25,69,.25); border: 3px solid #fff; }
.carte-activite__icone .icone { width: 1.5rem; height: 1.5rem; }
.carte-activite__texte { padding: 1.7rem 1.25rem 1.1rem; flex: 1; border-top: 4px solid var(--accent); }
.carte-activite__texte h3 { margin: 0 0 .5rem; font-size: 1.12rem; }
.carte-activite__texte h3 a { color: var(--marine); text-decoration: none; }
.creneaux--compacts li { padding: .1rem 0; }
.etiquettes { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0 0; }
.etiquette { font-size: .8rem; padding: .15rem .55rem; border-radius: 1rem; background: #f1f5f9; color: #475569; }
.etiquette--accent { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); font-weight: 600; }
.etiquette--avant { background: #e6f6f8; color: var(--bleu); font-weight: 600; }
.etiquette--terminee { background: #ecedf0; color: #5a6070; }
.cartes--petites { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.cartes--petites .carte-activite__texte { padding-top: 1.6rem; }
.cartes--petites h3 { font-size: 1rem; margin: 0; }

/* Fiche activité */
.bandeau-activite { position: relative; color: #fff; background: var(--marine) var(--bandeau-image, none) center / cover no-repeat; }
.bandeau-activite::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(2,25,69,.92) 0%, rgba(2,25,69,.7) 55%, color-mix(in srgb, var(--accent) 45%, transparent) 100%); }
.bandeau-activite--sans-photo::before { background: linear-gradient(120deg, var(--marine), color-mix(in srgb, var(--accent) 70%, var(--marine))); }
.bandeau-activite__interieur { position: relative; max-width: 64rem; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }
.bandeau-activite h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); margin: .5rem 0; }
.bandeau-activite .icone--pastille { background: #fff; }
.bandeau-activite__texte { font-size: 1.15rem; max-width: 40rem; color: #e5ecf7; }
.fil--clair, .fil--clair a { color: #c7d4ea; }
.fiche { max-width: 64rem; margin: 2rem auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr 20rem; gap: 2rem; align-items: start; }
.fiche h2 { margin-top: 0; }
.fiche__pratique { position: sticky; top: 1rem; background: #fff; border: 1px solid var(--ligne); border-top: 5px solid var(--accent); border-radius: .75rem; padding: 1.1rem 1.25rem; margin-top: -4.5rem; box-shadow: 0 6px 20px rgba(2,25,69,.08); }
.fiche__pratique dl { margin: 0; }
.fiche__pratique dt { font-weight: 700; color: var(--marine); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .75rem; }
.fiche__pratique dd { margin: .15rem 0 0; }
.horaires { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.horaires li { display: flex; gap: 1rem; align-items: baseline; background: #fff; border: 1px solid var(--ligne); border-radius: .5rem; padding: .6rem .9rem; }
.horaires__jour { flex: 0 0 6.5rem; font-weight: 700; color: var(--marine); }
.horaire { font-size: 1.1rem; font-weight: 600; }
@media (max-width: 52rem) {
    .fiche { grid-template-columns: 1fr; }
    .fiche__pratique { position: static; margin-top: 0; order: -1; }
}

/* Page Événements : agenda sur 2 colonnes (1 sur mobile) */
.agenda:not(.agenda--ligne) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agenda:not(.agenda--ligne) li { height: 100%; }
@media (max-width: 48rem) { .agenda:not(.agenda--ligne) { grid-template-columns: 1fr; } }

/* Année dans les blocs de date */
.agenda__date small.agenda__annee { margin-top: .1rem; font-size: .75rem; color: rgba(255,255,255,.8); }

/* Lien Facebook (simple lien : aucun script ni traceur Facebook sur le site) */
.pied__reseau { margin-bottom: .5rem; }
.pied__reseau a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.bouton--facebook { display: inline-flex; align-items: center; gap: .5rem; background: var(--marine); }
.intro--facebook { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: 1rem; color: #4b5563; }
.intro--facebook .icone { color: var(--bleu); }

/* Bas de pied de page : copyright et crédit, discrets */
.pied__bas { max-width: 64rem; margin: 1.5rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1);
             display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; font-size: .78rem; color: #8fa2c4; }
.pied .pied__credit { color: #8fa2c4; text-decoration: none; }
.pied .pied__credit:hover { color: #fff; text-decoration: underline; }
@media (max-width: 40rem) { .pied__bas { justify-content: center; text-align: center; } }

/* ------------------------------------------------------------------
   Pied de page compact (remplace la version en colonnes)
   ------------------------------------------------------------------ */
.pied { padding: 1.25rem 1.5rem .9rem; margin-top: 3rem; }
.pied a { text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__ligne { max-width: 64rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }
.pied__logo img { display: block; height: 56px; width: auto; }
.pied__contact { margin: 0; display: flex; flex-wrap: wrap; gap: .15rem 1.25rem; font-size: .92rem; }
.pied__liens { margin-left: auto; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: .92rem; font-weight: 600; }
.pied__facebook { display: inline-flex; align-items: center; gap: .3rem; }
.pied__bas { margin-top: .9rem; padding-top: .7rem; }
@media (max-width: 48rem) {
    .pied__ligne { justify-content: center; text-align: center; }
    .pied__contact, .pied__liens { justify-content: center; margin-left: 0; }
}

/* Bloc « Rejoignez » de l'accueil un peu plus compact */
.rejoindre { padding: 2.25rem 1.5rem; }
.rejoindre__interieur { grid-template-columns: 10rem 1fr; gap: 2.5rem; }
.rejoindre h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .6rem; }
.rejoindre p { font-size: 1.05rem; margin: .4rem 0; }
@media (max-width: 48rem) { .rejoindre__interieur { grid-template-columns: 1fr; } }

/* Pied de page : une seule ligne (logo à gauche, liens à droite) ; collé au bloc « Rejoignez » sur l'accueil */
.pied.pied--colle { margin-top: 0; }
.pied__ligne { flex-wrap: nowrap; justify-content: space-between; }
.pied__logo img { height: 48px; }
@media (max-width: 48rem) { .pied__ligne { flex-wrap: wrap; justify-content: center; } }

/* Pied de page : identité (logo, devise, Facebook) à gauche, liens à droite */
.pied__identite { display: flex; align-items: center; gap: 1rem; }
.pied__devise { margin: 0; line-height: 1.3; color: #fff; font-weight: 600; font-size: .95rem; }
.pied__devise small { display: block; font-weight: 400; color: #8fa2c4; font-size: .82rem; }
.pied .pied__facebook { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; padding: .3rem .8rem; border-radius: 2rem;
                        border: 1px solid rgba(255,255,255,.3); font-size: .85rem; font-weight: 600; color: #fff; }
.pied .pied__facebook:hover { background: var(--bleu); border-color: var(--bleu); text-decoration: none; }
@media (max-width: 48rem) { .pied__identite { flex-wrap: wrap; justify-content: center; text-align: left; } }

/* Pied de page : identité | logo RGS Tech au centre | liens */
.pied { padding: 1rem 1.5rem; }
.pied__ligne { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem 2rem; }
.pied__liens { justify-self: end; margin-left: 0; }
.pied .pied__facebook { width: 2.2rem; height: 2.2rem; padding: 0; margin-left: .25rem; justify-content: center; border-radius: 50%; }
.pied .pied__facebook .icone { width: 1.15rem; height: 1.15rem; }
.pied__rgstech { display: block; opacity: .85; transition: opacity .15s ease, transform .15s ease; }
.pied__rgstech:hover, .pied__rgstech:focus-visible { opacity: 1; transform: scale(1.08); }
.pied__rgstech img { display: block; height: 52px; width: auto; }
@media (max-width: 56rem) {
    .pied__ligne { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .pied__liens { justify-self: center; justify-content: center; }
    .pied__rgstech { order: 3; }
}

/* Bouton « Adhérer » rouge dans le pied de page */
.pied__liens { align-items: center; }
.pied .pied__adherer { background: var(--rouge); color: #fff; padding: .4rem 1rem; border-radius: 2rem; }
.pied .pied__adherer:hover { background: #fff; color: var(--marine); text-decoration: none; }

/* Logo officiel Facebook (fichier fourni par Meta, non modifié) */
.pied .pied__facebook--officiel { border: 0; width: auto; height: auto; padding: 0; background: none; }
.pied .pied__facebook--officiel:hover { background: none; transform: scale(1.08); }
.pied__facebook--officiel img { display: block; width: 2rem; height: 2rem; }

/* Bloc « Rejoignez » : logo plus petit, chiffres clés à la place du bouton */
.rejoindre__interieur { grid-template-columns: 7.5rem 1fr; gap: 2rem; }
.rejoindre h2 { margin-top: 0; }
.chiffres { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; padding: 0; }
.chiffres li { padding: .3rem .9rem; border-radius: 2rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #dbe4f3; font-size: .95rem; }
.chiffres strong { color: #fff; font-size: 1.05rem; }
.chiffres li:nth-child(1) { border-color: color-mix(in srgb, var(--bleu) 70%, transparent); }
.chiffres li:nth-child(2) { border-color: color-mix(in srgb, var(--jaune) 70%, transparent); }
.chiffres li:nth-child(3) { border-color: color-mix(in srgb, var(--rouge) 70%, transparent); }
@media (max-width: 48rem) { .rejoindre__interieur { grid-template-columns: 1fr; } .rejoindre picture { max-width: 7rem; } .chiffres { justify-content: center; } }

/* Logo Facebook : même traitement discret que le logo RGS Tech */
.pied__facebook--officiel img { width: 1.6rem; height: 1.6rem; }
.pied .pied__facebook--officiel { opacity: .8; transition: opacity .15s ease, transform .15s ease; }
.pied .pied__facebook--officiel:hover, .pied .pied__facebook--officiel:focus-visible { opacity: 1; }

/* Cartes d'activité : hauteur de photo fixe quelle que soit l'orientation de l'image.
   L'image est sortie du flux, le cadre 16:9 impose donc sa hauteur
   (l'icône qui déborde en bas reste visible, pas d'overflow: hidden). */
.carte-activite__visuel { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.carte-activite__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.carte-activite__visuel .carte-article__generique { position: absolute; inset: 0; }
.carte-activite__icone { z-index: 1; }

/* Activités : grille continue, tuiles de catégorie intercalées */
.cartes--flux { margin-top: 1.5rem; }
.tuile-categorie { scroll-margin-top: 1rem; display: flex; flex-direction: column; justify-content: center; gap: .5rem; padding: 1.5rem 1.5rem; border-radius: .5rem; color: #fff;
                   background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--marine))); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent); }
.tuile-categorie h2 { color: #fff; margin: 0; font-size: 1.45rem; line-height: 1.2; }
.tuile-categorie p { margin: 0; color: rgba(255,255,255,.92); }
.tuile-categorie small { margin-top: .25rem; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.85); }
.tuile-categorie__icone { width: 3rem; height: 3rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); }
.tuile-categorie__icone .icone { width: 1.7rem; height: 1.7rem; }
/* Le jaune est trop clair pour du texte blanc : on l'assombrit */
.tuile-categorie#manuelle { background: linear-gradient(145deg, #d98a00, color-mix(in srgb, #d98a00 55%, var(--marine))); }
.tuile-categorie--adherer { --accent: var(--rouge); text-decoration: none; }
.tuile-categorie--adherer .bouton { align-self: flex-start; margin-top: .5rem; }
.tuile-categorie--adherer:hover .bouton { background: var(--marine); color: #fff; }

/* Pagination des actualités */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin: 2.5rem 0 .5rem; }
.pagination__bouton, .pagination__numero { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .6rem;
    border-radius: .6rem; background: #fff; border: 1px solid var(--ligne); color: var(--marine); font-weight: 600; text-decoration: none; }
.pagination__bouton .icone { width: 1.2rem; height: 1.2rem; stroke-width: 2.2; }
a.pagination__bouton:hover, a.pagination__numero:hover { border-color: var(--bleu); color: var(--bleu); }
.pagination__numero.est-courant { background: var(--marine); border-color: var(--marine); color: #fff; }
.pagination__bouton.est-inactif { opacity: .35; }
.pagination__numeros { display: inline-flex; gap: .4rem; margin: 0 .4rem; }
.pagination__ellipse { align-self: center; color: var(--gris); padding: 0 .1rem; }
.pagination__legende { text-align: center; color: var(--gris); font-size: .9rem; margin: 0 0 1rem; }
@media (max-width: 30rem) { .pagination__numero:not(.est-courant) { display: none; } .pagination__ellipse { display: none; } }

/* Location : cartes avec photo et prix en pastille */
.cartes--location { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; }
.carte--location { padding: 0; overflow: hidden; }
.carte-location__visuel { position: relative; aspect-ratio: 4 / 3; background: var(--ligne); }
.carte-location__visuel img, .carte-location__visuel .carte-article__generique { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-location__prix { position: absolute; right: .75rem; bottom: .75rem; background: var(--marine); color: #fff; font-weight: 800; font-size: 1.25rem; padding: .3rem .8rem; border-radius: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.carte-location__prix small { font-weight: 500; font-size: .75rem; margin-left: .25rem; color: #c7d4ea; }
.carte-location__texte { padding: .8rem 1.1rem 1rem; border-top: 4px solid var(--vert); }
.carte-location__texte h3 { margin: 0; font-size: 1.05rem; }
.encart__boutons { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Adhérer : aperçu de la fiche et bloc bénévolat */
.bloc-carte { display: grid; grid-template-columns: 1fr 16rem; gap: 2rem; align-items: start; }
.apercu-document { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1rem; background: #fff; border: 1px solid var(--ligne); border-radius: .75rem; text-decoration: none; box-shadow: 0 6px 18px rgba(2,25,69,.08); }
.apercu-document img { width: 100%; border: 1px solid var(--ligne); border-radius: .25rem; transition: transform .15s ease; }
.apercu-document:hover img { transform: scale(1.02); }
.etapes--numerotees { list-style: none; counter-reset: etape; padding: 0; }
.etapes--numerotees li { counter-increment: etape; position: relative; padding: .2rem 0 .6rem 2.6rem; }
.etapes--numerotees li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.benevolat { display: grid; grid-template-columns: 18rem 1fr; gap: 1.5rem; align-items: center; background: #fff; border: 1px solid var(--ligne); border-radius: .75rem; overflow: hidden; margin: 2rem 0; }
.benevolat img { width: 100%; height: 100%; min-height: 12rem; object-fit: cover; display: block; }
.benevolat > div { padding: 1rem 1.5rem 1rem 0; }
.benevolat h2 { margin-top: 0; }
@media (max-width: 48rem) {
    .bloc-carte, .benevolat { grid-template-columns: 1fr; }
    .apercu-document { max-width: 18rem; margin: 0 auto; }
    .benevolat > div { padding: 0 1.25rem 1.25rem; }
}

/* ------------------------------------------------------------------
   Fiche d'inscription en ligne
   ------------------------------------------------------------------ */
.formulaire-fiche fieldset { border: 1px solid var(--ligne); border-radius: .75rem; background: #fff; padding: 1rem 1.25rem 1.25rem; margin: 0 0 1.25rem; }
.formulaire-fiche legend { font-weight: 700; color: var(--marine); padding: 0 .4rem; font-size: 1.1rem; }
.formulaire-fiche fieldset[hidden] { display: none; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem 1.25rem; }
.champs__large { grid-column: 1 / -1; }
.champs label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .92rem; color: var(--marine); }
.champs input { font: inherit; font-weight: 400; padding: .6rem .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; color: var(--texte); }
.champs input:focus { outline: 3px solid color-mix(in srgb, var(--bleu) 30%, transparent); border-color: var(--bleu); }
.choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.choix__titre { margin: .9rem 0 .4rem; font-weight: 600; color: #4b5563; font-size: .9rem; }
.choix__puce, .choix__carte { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid #cbd5e1; border-radius: 2rem; cursor: pointer; background: #fff; }
.choix__puce:has(input:checked), .choix__carte:has(input:checked) { border-color: var(--bleu); background: #e6f6f8; color: var(--marine); font-weight: 600; }
.choix__carte { border-radius: .75rem; padding: .7rem 1.1rem; }
.choix__carte span strong { display: block; font-size: 1.4rem; color: var(--marine); }
.choix input { accent-color: var(--bleu); width: 1.1rem; height: 1.1rem; }
.formulaire-fiche__erreur { background: #fdecea; color: #9b1c1c; border-radius: .5rem; padding: .6rem .9rem; font-weight: 600; }
.formulaire-fiche__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
button.bouton { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
button.bouton--clair-contour { border: 2px solid var(--bleu); }
.fiche-imprimable { display: none; }

@media print {
    @page { size: A4; margin: 12mm; }
    body { background: #fff; display: block; min-height: 0; }
    body > header, body > footer, .fil, h1, .intro, noscript, .formulaire-fiche { display: none !important; }
    .contenu { margin: 0; padding: 0; max-width: none; width: auto; }
    .fiche-imprimable { display: block; color: #000; font-size: 10.5pt; line-height: 1.35; }
    .fi__entete { display: flex; align-items: center; gap: 5mm; border-bottom: 1.5pt solid #021945; padding-bottom: 3mm; margin-bottom: 4mm; }
    .fi__entete img { width: 24mm; height: auto; }
    .fi__asso { margin: 0; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 10pt; color: #021945; }
    .fi__entete h2 { margin: 1mm 0 0; font-size: 18pt; color: #021945; }
    .fi__cadre { border: 1pt solid #9aa3b2; border-radius: 3mm; padding: 3mm 4mm; margin-bottom: 4mm; break-inside: avoid; }
    .fi__cadre h3 { margin: 0 0 2mm; font-size: 10pt; text-transform: uppercase; letter-spacing: .06em; color: #021945; }
    .fi__infos { display: grid; grid-template-columns: 33mm 1fr 33mm 1fr; gap: 2.5mm 3mm; margin: 0; }
    .fi__infos dt { font-weight: 700; }
    .fi__infos dd { margin: 0; border-bottom: .75pt solid #555; min-height: 5mm; }
    .fi__infos dd.fi__large { grid-column: span 3; }
    .fi__activites { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 6mm; }
    .fi__activites li, .fi__cases li { position: relative; padding-left: 6mm; margin: 0 0 1.6mm; break-inside: avoid; }
    .fi__activites li::before, .fi__cases li::before { content: ""; position: absolute; left: 0; top: .6mm; width: 3.4mm; height: 3.4mm; border: 1pt solid #000; border-radius: 50%; }
    .fi__activites li.est-coche::before, .fi__cases li.est-coche::before { background: radial-gradient(circle, #000 45%, transparent 50%); }
    .fi__activites li.est-coche { font-weight: 700; }
    .fi__cases { list-style: none; padding: 0; margin: 0 0 2mm; }
    .fi__declaration p { margin: 0 0 2mm; text-align: justify; }
    .fi__signature { font-weight: 700; min-height: 14mm; }
    .fi__bas { display: grid; grid-template-columns: 55mm 1fr; gap: 4mm; }
    .fi__enfants p { margin: 0 0 2mm; }
    .fi__ligne { display: inline-block; min-width: 60mm; border-bottom: .75pt dotted #555; font-weight: 700; }
    .fi__pied { text-align: center; font-size: 8.5pt; color: #444; margin: 2mm 0 0; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Liens légaux sous le logo RGS Tech */
.pied__centre { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.pied__legal { margin: 0; font-size: .72rem; color: #8fa2c4; white-space: nowrap; }
.pied .pied__legal a { color: #8fa2c4; font-weight: 400; }
.pied .pied__legal a:hover { color: #fff; }
@media (max-width: 56rem) { .pied__centre { order: 3; } }

/* Pages légales */
.page-legale { max-width: 46rem; }
.page-legale h2 { margin-top: 2rem; font-size: 1.25rem; padding-bottom: .3rem; border-bottom: 2px solid var(--ligne); }
.page-legale ul { padding-left: 1.2rem; }
.liste-claire { list-style: none; padding: 0 !important; }
.liste-claire li { position: relative; padding: .45rem 0 .45rem 2rem; }
.liste-claire li::before { content: "✓"; position: absolute; left: .2rem; top: .4rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--vert); color: #fff; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Pied de page : colonnes latérales à leur largeur naturelle, logo RGS centré ; boutons Contact + Adhérer */
.pied__ligne { grid-template-columns: auto 1fr auto; }
.pied__centre { justify-self: center; }
.pied__liens { flex-wrap: nowrap; white-space: nowrap; gap: .25rem 1rem; }
.pied__boutons { display: inline-flex; align-items: center; gap: .5rem; margin-left: .35rem; }
.pied .pied__contact-bouton { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .9rem; border-radius: 2rem; border: 1px solid rgba(255,255,255,.35); color: #fff; }
.pied .pied__contact-bouton .icone { width: 1.05rem; height: 1.05rem; }
.pied .pied__contact-bouton:hover { background: var(--bleu); border-color: var(--bleu); text-decoration: none; }
@media (max-width: 64rem) {
    .pied__ligne { grid-template-columns: 1fr; justify-items: center; }
    .pied__liens { flex-wrap: wrap; justify-content: center; }
}

/* ------------------------------------------------------------------
   Menu principal : icônes discrètes, Contact et Adhérer en boutons
   ------------------------------------------------------------------ */
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; }
.menu a { display: inline-flex; align-items: center; gap: .4rem; color: var(--marine); text-decoration: none; font-weight: 500; padding: .3rem 0; border-bottom: 2px solid transparent; }
.menu a .icone { width: 1.1rem; height: 1.1rem; color: var(--bleu); opacity: .85; }
.menu a:hover, .menu a.actif { color: var(--bleu); border-bottom-color: var(--bleu); }
.menu a.menu__contact { padding: .3rem .85rem; border: 1px solid #cbd5e1; border-radius: 2rem; }
.menu a.menu__contact:hover, .menu a.menu__contact.actif { border-color: var(--bleu); background: #e6f6f8; }
.menu a.menu__adherer { padding: .35rem .95rem; border: 0; border-radius: 2rem; background: var(--rouge); color: #fff; }
.menu a.menu__adherer .icone { color: #fff; opacity: 1; }
.menu a.menu__adherer:hover, .menu a.menu__adherer.actif { background: var(--marine); color: #fff; }
@media (max-width: 40rem) { .menu { gap: .35rem .8rem; } .menu a { font-size: .95rem; } }

/* ------------------------------------------------------------------
   Page Contact
   ------------------------------------------------------------------ */
.bandeau-contact .bandeau-activite__interieur { padding: 2.5rem 1.5rem; }
.tuiles-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: -3.5rem 0 2.5rem; position: relative; }
.tuile-contact { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: 1.1rem 1.25rem; background: #fff; border-radius: .75rem;
                 border-top: 4px solid var(--accent); box-shadow: 0 8px 24px rgba(2,25,69,.1); text-decoration: none; color: var(--texte); transition: transform .15s ease; }
.tuile-contact:hover { transform: translateY(-3px); }
.tuile-contact__icone { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: .4rem;
                        color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #fff); }
.tuile-contact__icone .icone { width: 1.4rem; height: 1.4rem; }
.tuile-contact strong { color: var(--marine); }
.tuile-contact span { word-break: break-word; }
.tuile-contact small { margin-top: auto; padding-top: .4rem; font-weight: 700; color: var(--accent); }
.demandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; margin-bottom: 2.5rem; }
.demande { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; background: #fff; border: 1px solid var(--ligne); border-radius: .75rem; text-decoration: none; color: var(--texte); }
.demande:hover { border-color: var(--accent); }
.demande strong { display: block; color: var(--marine); }
.demande small { color: var(--gris); }
.lieux { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.lieu-carte { background: #fff; border: 1px solid var(--ligne); border-radius: .75rem; padding: 1rem 1.25rem; --accent: var(--rouge); }
.lieu-carte h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.lieu-carte .icone--pastille { width: 2rem; height: 2rem; padding: .35rem; }
a.etiquette { text-decoration: none; }
a.etiquette:hover { background: #e6f6f8; color: var(--bleu); }

/* Pied de page : page en cours soulignée (comme dans l'en-tête) */
.pied__liens > a { border-bottom: 2px solid transparent; padding-bottom: .1rem; }
.pied .pied__liens > a.actif { border-bottom-color: var(--bleu); text-decoration: none; }
.pied .pied__contact-bouton.actif { background: var(--bleu); border-color: var(--bleu); }
.pied .pied__adherer.actif { box-shadow: 0 0 0 2px var(--marine), 0 0 0 4px #fff; }

/* Pied de page : liens en icônes rondes (libellé en info-bulle et pour les lecteurs d'écran) */
.pied__liens { gap: .5rem; align-items: center; }
.pied .pied__icone { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
                     border: 1px solid rgba(255,255,255,.28); color: #fff; padding: 0; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.pied .pied__icone .icone { width: 1.2rem; height: 1.2rem; }
.pied .pied__icone:hover, .pied .pied__icone:focus-visible { background: var(--bleu); border-color: var(--bleu); transform: translateY(-2px); text-decoration: none; }
.pied .pied__icone.actif { background: var(--bleu); border-color: var(--bleu); }
.pied .pied__adherer { margin-left: .35rem; }

/* Contact : cartes des lieux avec photo */
.lieu-carte { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.lieu-carte__visuel { position: relative; aspect-ratio: 16 / 9; background: var(--ligne); }
.lieu-carte__visuel img, .lieu-carte__visuel .carte-article__generique { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lieu-carte h3 { margin: 1.6rem 1.25rem .5rem; font-size: 1.05rem; }
.lieu-carte .etiquettes { margin: 0 1.25rem 1.1rem; }
.lieu-carte__visuel .carte-activite__icone { z-index: 1; }

/* Contact : citation et bloc « partager votre passion » (repris de l'ancien site) */
.tuile-contact__detail { font-size: .88rem; color: var(--gris); }
.citation { margin: 0 auto 2.5rem; max-width: 46rem; padding: .5rem 0 .5rem 1.5rem; border-left: 4px solid var(--bleu); }
.citation p { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-style: italic; line-height: 1.5; color: var(--marine); }
.citation footer { margin-top: .5rem; color: var(--gris); font-size: .9rem; }
.citation footer::before { content: "— "; }
.passion { position: relative; margin: 0 0 2.5rem; border-radius: .9rem; overflow: hidden; color: #fff;
           background: var(--marine) var(--passion-image, none) center / cover no-repeat; }
.passion::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,25,69,.92) 0%, rgba(2,25,69,.75) 50%, rgba(2,25,69,.25) 100%); }
.passion__texte { position: relative; max-width: 34rem; padding: 2.5rem 2rem; }
.passion h2 { color: #fff; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 400; margin: 0 0 1rem; line-height: 1.2; }
.passion h2::after { content: ""; display: block; width: 4rem; height: 3px; margin-top: .9rem;
    background: linear-gradient(90deg, var(--bleu) 0 20%, var(--vert) 20% 40%, var(--rouge) 40% 60%, var(--jaune) 60% 80%, var(--violet) 80% 100%); }
.passion p { color: #e5ecf7; font-size: 1.05rem; }

/* Lieux : 3 colonnes (6 lieux = 2 rangées complètes) */
.lieux { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 56rem) { .lieux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .lieux { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
   Administration
   ------------------------------------------------------------------ */
.admin-connexion { max-width: 26rem; margin: 2rem auto; }
.admin-barre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--marine); color: #fff; padding: .5rem 1rem; border-radius: .5rem; margin-bottom: 1.5rem; font-size: .9rem; }
.admin-barre form { margin: 0; }
.admin-barre__bouton { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: 2rem; padding: .25rem .8rem; cursor: pointer; font: inherit; }
.admin-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.admin-filtres select, .admin-filtres input { font: inherit; padding: .5rem .7rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; }
.admin-filtres__total { margin-left: auto; color: var(--gris); }
.admin-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; }
.admin-vignette { position: relative; display: block; background: #fff; border: 2px solid transparent; border-radius: .5rem; overflow: hidden; text-decoration: none; color: var(--texte); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.admin-vignette:hover { border-color: var(--bleu); }
.admin-vignette.est-utilisee { border-color: var(--vert); }
.admin-vignette img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--ligne); }
.admin-vignette__nom { display: block; padding: .3rem .45rem; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-vignette__badge { position: absolute; top: .35rem; right: .35rem; background: var(--vert); color: #fff; font-size: .75rem; font-weight: 700; padding: .1rem .45rem; border-radius: 1rem; }
.admin-nav-photo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.admin-nav-photo span { display: inline-flex; align-items: center; gap: .6rem; }
.admin-message { background: #e8f5e1; color: #2f5d14; border-radius: .5rem; padding: .6rem .9rem; font-weight: 600; }
.admin-photo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr); gap: 1.5rem; align-items: start; }
.admin-photo__apercu { margin: 0; background: #fff; border: 1px solid var(--ligne); border-radius: .75rem; padding: .75rem; }
.admin-photo__apercu img { width: 100%; max-height: 70vh; object-fit: contain; display: block; background: #f1f5f9; border-radius: .4rem; }
.admin-photo__apercu figcaption { margin-top: .6rem; font-size: .88rem; color: #4b5563; }
.admin-photo__actions .encart { margin-top: 0; }
.admin-utilisations { list-style: none; margin: 0; padding: 0; }
.admin-utilisations li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid #f1f5f9; }
.admin-utilisations form { margin: 0; }
.admin-lien-bouton { background: none; border: 0; color: var(--rouge); cursor: pointer; font: inherit; font-weight: 600; }
.admin-attribuer { display: flex; align-items: flex-end; gap: .5rem; margin-bottom: .6rem; }
.admin-attribuer label { flex: 1; display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .85rem; color: var(--marine); }
.admin-attribuer select { font: inherit; font-weight: 400; padding: .45rem .6rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; }
.admin-attribuer .bouton { padding: .45rem .9rem; }
@media (max-width: 52rem) { .admin-photo { grid-template-columns: 1fr; } }

/* Attribution : ligne sélection + bouton, et comparaison avec la photo actuelle */
.admin-attribuer { display: block; margin-bottom: 1rem; }
.admin-attribuer__ligne { display: flex; align-items: flex-end; gap: .5rem; }
.admin-attribuer__ligne label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .85rem; color: var(--marine); }
.admin-attribuer__ligne select { width: 100%; min-width: 0; font: inherit; font-weight: 400; padding: .45rem .6rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; }
.admin-attribuer__ligne .bouton { flex: 0 0 auto; padding: .45rem .9rem; }
.admin-comparaison { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .6rem; padding: .6rem; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: .5rem; }
.admin-comparaison[hidden], .admin-comparaison [hidden] { display: none; }
.admin-comparaison figure { margin: 0; flex: 1 1 8rem; text-align: center; }
.admin-comparaison img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .35rem; background: var(--ligne); display: block; }
.admin-comparaison figcaption { font-size: .75rem; color: var(--gris); margin-top: .2rem; }
.admin-comparaison__fleche { font-size: 1.4rem; color: var(--bleu); font-weight: 700; }
.admin-comparaison .conditions { flex-basis: 100%; margin: 0; font-size: .85rem; }

/* Admin : galeries */
.admin-attribuer__ligne .bouton--clair-contour { padding: .4rem .7rem; white-space: nowrap; }
.admin-ordre { display: inline-flex; align-items: center; gap: .2rem; }
.admin-lien-bouton--neutre { color: var(--marine); font-size: 1.05rem; padding: 0 .25rem; }
.admin-lien-bouton:disabled { opacity: .3; cursor: default; }

/* Galeries publiques « En images » */
.galerie-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.galerie-photos a { display: block; border-radius: .4rem; overflow: hidden; background: var(--ligne); }
.galerie-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .2s ease; }
.galerie-photos a:hover img { transform: scale(1.05); }
.photo-galerie { display: none; }
.lieu-carte__plus { position: absolute; right: .6rem; bottom: .6rem; z-index: 1; display: inline-flex; align-items: center; gap: .3rem; background: rgba(2,25,69,.85); color: #fff;
                    font-size: .8rem; font-weight: 700; padding: .25rem .6rem; border-radius: 1rem; text-decoration: none; }
.lieu-carte__plus:hover { background: var(--bleu); }

/* Admin : vignettes avec la liste des emplacements */
.admin-vignette__usages { display: block; padding: 0 .45rem .35rem; font-size: .7rem; font-weight: 600; color: var(--vert); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-vignette { position: relative; }

/* Fiche activité : mini-galerie et photo du lieu */
.mini-galerie { margin-top: 2rem; }
.galerie-photos--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galerie-photos__attente { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: .4rem; border: 2px dashed #d5dbe5; color: #c3cad6; background: #fff; }
.galerie-photos__attente .icone { width: 2rem; height: 2rem; }
.mini-galerie .conditions { margin-top: .5rem; font-size: .88rem; }
.pratique-lieu { display: flex; align-items: flex-start; gap: .75rem; }
.pratique-lieu__photos a:first-child { position: relative; display: block; width: 5.5rem; flex: 0 0 auto; border-radius: .4rem; overflow: hidden; }
.pratique-lieu__photos img { width: 5.5rem; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pratique-lieu__photos a:first-child span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(2,25,69,.75); color: #fff; font-size: .68rem; text-align: center; padding: .1rem 0; }
.lieu-carte { scroll-margin-top: 1rem; }
.lieu-carte:target { outline: 3px solid var(--rouge); outline-offset: 3px; }

/* Admin : vignettes avec corbeille, image cliquable, bouton corbeille */
.admin-vignette { background: #fff; }
.admin-vignette__lien { display: block; text-decoration: none; color: var(--texte); }
.admin-vignette__action { position: absolute; top: .35rem; left: .35rem; margin: 0; opacity: 0; transition: opacity .15s ease; }
.admin-vignette:hover .admin-vignette__action, .admin-vignette:focus-within .admin-vignette__action { opacity: 1; }
.admin-vignette__action button { width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--rouge); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.admin-vignette__action button .icone { width: 1.1rem; height: 1.1rem; }
.admin-vignette__action button[value="restaurer"] { color: var(--vert); }
@media (hover: none) { .admin-vignette__action { opacity: 1; } }
.admin-photo__agrandir { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.admin-photo__loupe { position: absolute; right: .6rem; bottom: .6rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(2,25,69,.75); color: #fff; display: flex; align-items: center; justify-content: center; }
.admin-photo__loupe .icone { width: 1.1rem; height: 1.1rem; }
.admin-photo__corbeille { margin-top: .75rem; }
.bouton--corbeille { background: #fff; color: var(--rouge); border: 2px solid var(--rouge); display: inline-flex; align-items: center; gap: .4rem; }
.bouton--corbeille:hover { background: var(--rouge); color: #fff; }
.bouton .icone { width: 1.1rem; height: 1.1rem; }
.visionneuse__bouton--danger:hover:not(:disabled) { background: var(--rouge); }

/* Retour à la liste : la vignette de la photo quittée est mise en évidence */
.admin-vignette { scroll-margin-top: 30vh; }
.admin-vignette:target { outline: 4px solid var(--jaune); outline-offset: 3px; animation: vignette-retour 1.6s ease-out 1; }
@keyframes vignette-retour { 0% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Fenêtre de confirmation */
.confirmation { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(2, 13, 36, .6); backdrop-filter: blur(2px); }
.confirmation[hidden] { display: none; }
.confirmation__boite { width: min(28rem, 100%); background: #fff; border-radius: 1rem; padding: 1.75rem 1.5rem 1.25rem; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); animation: confirmation-entree .15s ease-out; }
@keyframes confirmation-entree { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirmation__icone { width: 3.5rem; height: 3.5rem; margin: 0 auto .75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--rouge); background: color-mix(in srgb, var(--rouge) 12%, #fff); }
.confirmation__icone .icone { width: 1.7rem; height: 1.7rem; }
.confirmation__boite h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.confirmation__boite p { margin: 0 0 1.25rem; color: #4b5563; word-break: break-word; }
.confirmation__boutons { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.confirmation__boutons .bouton:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.confirmation__aide { margin: .9rem 0 0 !important; font-size: .78rem; color: var(--gris) !important; }
.confirmation kbd { font: inherit; font-size: .75rem; padding: .05rem .35rem; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: .3rem; background: #f8fafc; }

/* ------------------------------------------------------------------
   Animateurs : avatars, page « L'équipe », administration
   ------------------------------------------------------------------ */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; font-weight: 700; letter-spacing: .02em;
          color: #fff; background: linear-gradient(135deg, var(--accent, var(--bleu)), color-mix(in srgb, var(--accent, var(--bleu)) 60%, var(--marine))); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.avatar--petit { width: 2rem; height: 2rem; font-size: .75rem; }
.avatar--moyen { width: 3.2rem; height: 3.2rem; font-size: 1rem; }
.avatar--grand { width: 6.5rem; height: 6.5rem; font-size: 1.8rem; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--accent, var(--bleu)); }
.avatar--sans-accord { outline: 3px dashed var(--rouge); outline-offset: 2px; }

.animateurs-liste { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .35rem; }
.animateurs-liste li { display: flex; align-items: center; gap: .5rem; }
.animateurs-liste__lien { display: inline-block; margin-top: .4rem; font-size: .88rem; font-weight: 600; }

.equipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; }
.membre { background: #fff; border: 1px solid var(--ligne); border-radius: .9rem; padding: 1.5rem 1rem 1.1rem; text-align: center; border-top: 4px solid var(--accent); }
.membre h3 { margin: 1rem 0 .15rem; font-size: 1.08rem; }
.membre__fonction { margin: 0 0 .4rem; color: var(--accent); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.membre .etiquettes { justify-content: center; margin-top: .6rem; }
.membre .etiquette { display: inline-flex; align-items: center; gap: .3rem; }
.membre .etiquette .icone { width: .95rem; height: .95rem; color: var(--accent); }
.equipe--bureau .membre { border-top-color: var(--rouge); --accent: var(--rouge); }
.encart--equipe { border-left-color: var(--violet); }

.admin-barre__liens { display: flex; gap: 1rem; margin-right: auto; margin-left: 1.5rem; }
.admin-barre__liens a { color: #c7d4ea; text-decoration: none; }
.admin-barre__liens a:hover { color: #fff; }
.admin-animateurs { display: grid; gap: .6rem; }
.admin-animateur { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: #fff; border: 1px solid var(--ligne); border-radius: .6rem; padding: .7rem 1rem; scroll-margin-top: 30vh; }
.admin-animateur:target { outline: 3px solid var(--jaune); }
.admin-animateur__infos { display: flex; flex-direction: column; min-width: 12rem; flex: 1; }
.admin-animateur__infos small { color: var(--gris); }
.admin-animateur__alerte { color: var(--rouge) !important; font-weight: 600; }
.admin-animateur__champ { display: flex; flex-direction: column; font-size: .8rem; font-weight: 600; color: var(--marine); }
.admin-animateur__champ input { font: inherit; font-weight: 400; padding: .35rem .5rem; border: 1px solid #cbd5e1; border-radius: .4rem; width: 10rem; }
.admin-animateur__case { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; white-space: nowrap; }
.admin-animateur .bouton { padding: .4rem .9rem; }

/* Coordonnées des animateurs */
.membre__presentation { margin: .4rem 0 .2rem; font-size: .92rem; color: #4b5563; font-style: italic; }
.contact-animateur { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: .5rem; }
.coordonnee-masquee, .coordonnee-revelee { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 2rem; font: inherit; font-size: .85rem; font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--accent, var(--bleu)) 40%, #fff); background: #fff; color: var(--accent, var(--bleu)); cursor: pointer; text-decoration: none; }
.coordonnee-masquee:hover { background: color-mix(in srgb, var(--accent, var(--bleu)) 10%, #fff); }
.coordonnee-masquee .icone, .coordonnee-revelee .icone { width: 1rem; height: 1rem; }
.contact-animateur--compact { margin: 0 0 0 .35rem; gap: .2rem; vertical-align: middle; }
.contact-animateur--compact .coordonnee-masquee { width: 1.7rem; height: 1.7rem; padding: 0; justify-content: center; }
.contact-animateur--compact .coordonnee-revelee { padding: .15rem .5rem; font-size: .8rem; }
.animateurs-liste__nom { display: inline-flex; flex-wrap: wrap; align-items: center; }
.admin-animateur__plus { flex-basis: 100%; }
.admin-animateur__plus summary { cursor: pointer; font-size: .88rem; color: var(--bleu); font-weight: 600; }
.admin-animateur__grille { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin-top: .6rem; }
.admin-animateur__champ--large { flex: 1 1 100%; }
.admin-animateur__champ textarea { font: inherit; font-weight: 400; padding: .35rem .5rem; border: 1px solid #cbd5e1; border-radius: .4rem; width: 100%; }

/* Aperçu de l'équipe (accueil et contact) */
.equipe-apercu { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 2rem 0; padding: 1.1rem 1.4rem; background: #fff; border: 1px solid var(--ligne);
                 border-left: 5px solid var(--violet); border-radius: .9rem; text-decoration: none; color: var(--texte); transition: box-shadow .15s ease, transform .15s ease; }
.equipe-apercu:hover { box-shadow: 0 8px 24px rgba(2,25,69,.1); transform: translateY(-2px); }
.equipe-apercu__avatars { display: flex; padding-left: .6rem; }
.equipe-apercu__avatars .avatar { margin-left: -.6rem; box-shadow: 0 0 0 3px #fff; }
.equipe-apercu__reste { --accent: var(--marine); font-size: .85rem; }
.equipe-apercu__texte { flex: 1 1 18rem; display: flex; flex-direction: column; gap: .15rem; }
.equipe-apercu__texte strong { color: var(--marine); font-size: 1.1rem; }
.equipe-apercu__texte span { color: #4b5563; }
.equipe-apercu__bouton { display: inline-flex; align-items: center; gap: .3rem; background: var(--violet); }
.equipe-apercu:hover .equipe-apercu__bouton { background: var(--marine); }
@media (max-width: 36rem) { .equipe-apercu { justify-content: center; text-align: center; } .equipe-apercu__avatars .avatar:nth-child(n+7) { display: none; } }

/* Menu à 7 entrées : un peu plus serré sur les écrans moyens */
@media (max-width: 75rem) { .menu { gap: .35rem .8rem; } .menu a { font-size: .95rem; } }

/* Équipe : bureau en cartes horizontales + encart « Rejoindre » sur la même rangée */
.equipe--bureau { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.equipe--bureau .membre { width: auto; }
.membre--horizontal { display: flex; align-items: center; gap: 1.5rem; text-align: left; padding: 1.25rem 1.5rem; }
.membre--horizontal h3 { margin-top: 0; }
.membre--horizontal .etiquettes { justify-content: flex-start; }
.membre--horizontal .contact-animateur { justify-content: flex-start; }
.membre__corps { flex: 1; min-width: 0; }
.rejoindre-equipe { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; border-radius: .9rem; color: #fff;
                    background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 55%, var(--marine))); }
.rejoindre-equipe > .icone { width: 3.5rem; height: 3.5rem; flex: 0 0 auto; opacity: .85; }
.rejoindre-equipe h3 { color: #fff; margin: 0 0 .35rem; }
.rejoindre-equipe p { margin: 0 0 .8rem; color: #e9e3f5; }
@media (max-width: 36rem) { .membre--horizontal, .rejoindre-equipe { flex-direction: column; text-align: center; } .membre--horizontal .etiquettes { justify-content: center; } }

/* Admin : découpe de portrait */
.admin-photo__outils { margin: .75rem 0 0; }
.admin-photo__outils .bouton { display: inline-flex; align-items: center; gap: .4rem; }
.decoupe { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(2, 13, 36, .75); }
.decoupe[hidden] { display: none; }
.decoupe__boite { width: min(70rem, 100%); max-height: 100%; overflow: auto; background: #fff; border-radius: 1rem; padding: 1.25rem 1.5rem; }
.decoupe__entete h2 { margin: 0 0 .25rem; }
.decoupe__corps { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-top: .75rem; }
.decoupe__scene { position: relative; flex: 0 1 30rem; width: min(30rem, 100%); max-width: 62vh; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #e8ecf3; border-radius: .5rem; line-height: 0; user-select: none; touch-action: none; }
.decoupe__scene img { max-width: 76%; max-height: 76%; display: block; }
.decoupe__cadre { position: absolute; cursor: move; border: 2px solid #fff; border-radius: .2rem; box-shadow: 0 0 0 9999px rgba(2, 13, 36, .55); touch-action: none; }
.decoupe__cadre::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255,255,255,.8); pointer-events: none; }
.decoupe__cadre:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.decoupe__poignee { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--jaune); border: 2px solid #fff; cursor: nwse-resize; }
.decoupe__cote { flex: 0 1 17rem; display: flex; flex-direction: column; gap: .75rem; }
.decoupe__apercu { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto; background: #e5e7eb no-repeat; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--violet); }
.decoupe__cote label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; color: var(--marine); }
.decoupe__cote select { font: inherit; font-weight: 400; padding: .5rem .6rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.decoupe__cote select.est-requis { border-color: var(--rouge); outline: 3px solid color-mix(in srgb, var(--rouge) 25%, transparent); }
.decoupe__boutons { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Admin : envoi de photos */
.admin-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.admin-entete h1 { margin: 0; }
.admin-entete .bouton { display: inline-flex; align-items: center; gap: .4rem; }
.envoi { margin: 1rem 0 1.5rem; padding: 1rem; background: #fff; border: 1px solid var(--ligne); border-radius: .9rem; }
.envoi[hidden] { display: none; }
.envoi__zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 2rem 1rem; text-align: center; cursor: pointer;
               border: 2px dashed #cbd5e1; border-radius: .75rem; background: #f8fafc; transition: border-color .15s ease, background .15s ease; }
.envoi__zone:hover, .envoi__zone.est-survolee, .envoi__zone:focus-within { border-color: var(--bleu); background: #e6f6f8; }
.envoi__zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.envoi__icone .icone { width: 2.4rem; height: 2.4rem; color: var(--bleu); }
.envoi__zone strong { color: var(--marine); font-size: 1.1rem; }
.envoi__zone small { color: var(--gris); max-width: 36rem; }
.envoi__liste { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.envoi__liste li { font-size: .82rem; padding: .2rem .6rem; border-radius: 1rem; background: #eef2f7; }
.envoi__liste li.est-refuse { background: #fdecea; color: #9b1c1c; }
.envoi__actions { display: flex; justify-content: flex-end; gap: .5rem; margin: .75rem 0 0; }
.envoi__actions .bouton:disabled { opacity: .5; cursor: default; }

/* Admin : galeries */
.admin-galeries { display: grid; gap: 1rem; }
.admin-galerie { background: #fff; border: 1px solid var(--ligne); border-radius: .75rem; padding: 1rem 1.25rem; scroll-margin-top: 20vh; }
.admin-galerie:target { outline: 3px solid var(--jaune); }
.admin-galerie header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.admin-galerie h2 { margin: 0; font-size: 1.15rem; }
.admin-galerie h2 small { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 600; }
.admin-galerie__nombre { color: var(--gris); font-size: .9rem; white-space: nowrap; }
.admin-galerie__vignettes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.admin-galerie__vignettes img { width: 5.5rem; height: 4.2rem; object-fit: cover; border-radius: .3rem; display: block; }
.admin-galerie__copier summary { cursor: pointer; font-weight: 600; color: var(--bleu); }
.admin-galerie__cibles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; margin: .75rem 0; }
.admin-galerie__cibles fieldset { border: 1px solid var(--ligne); border-radius: .5rem; padding: .5rem .75rem; max-height: 16rem; overflow: auto; }
.admin-galerie__cibles legend { font-weight: 700; color: var(--marine); padding: 0 .3rem; }
.admin-galerie__cibles label { display: block; font-size: .9rem; padding: .15rem 0; }
.admin-galerie__cibles small { color: var(--gris); }

/* ------------------------------------------------------------------
   Questionnaire du bureau
   ------------------------------------------------------------------ */
.questionnaire { max-width: 52rem; margin: 0 auto; }
.q-progression { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1rem; margin: 1rem 0 1.5rem;
                 background: #fff; border: 1px solid var(--ligne); border-radius: .75rem; box-shadow: 0 4px 12px rgba(2,25,69,.06); }
.q-progression__barre { flex: 1 1 10rem; height: .5rem; border-radius: 1rem; background: #e5e7eb; overflow: hidden; }
.q-progression__barre span { display: block; height: 100%; background: var(--vert); transition: width .3s ease; }
.q-enregistre { color: var(--vert); font-weight: 700; }
.q-section { margin-bottom: 2.5rem; scroll-margin-top: 5rem; }
.q-section h2 { border-bottom: 3px solid var(--bleu); padding-bottom: .3rem; }
.q-question { border: 1px solid var(--ligne); border-left: 4px solid #cbd5e1; border-radius: .75rem; background: #fff; padding: 1rem 1.25rem; margin: 0 0 1rem; }
.q-question.est-repondue { border-left-color: var(--vert); }
.q-question legend { font-weight: 700; color: var(--marine); font-size: 1.05rem; padding: 0 .3rem; }
.q-numero { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--marine); color: #fff; font-size: .85rem; margin-right: .3rem; }
.q-statut { color: var(--vert); font-weight: 600; margin-left: .4rem; }
.q-contexte { background: #f1f5f9; border-radius: .5rem; padding: .6rem .9rem; margin: .5rem 0 .8rem; font-size: .93rem; display: flex; flex-direction: column; gap: .15rem; }
.q-contexte p { margin: 0; }
.q-contexte a { font-size: .9rem; }
.q-choix-groupe { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.q-choix-groupe--colonne { flex-direction: column; }
.q-choix { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid #cbd5e1; border-radius: .6rem; cursor: pointer; background: #fff; }
.q-choix:has(input:checked) { border-color: var(--bleu); background: #e6f6f8; font-weight: 600; }
.q-choix input { accent-color: var(--bleu); }
.q-texte { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; font-weight: 600; color: #4b5563; }
.q-texte textarea, .q-texte input, .q-select select, .q-select input, .q-ligne input { font: inherit; font-weight: 400; padding: .5rem .65rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; color: var(--texte); }
.q-texte--court input { max-width: 8rem; }
.q-tableau { display: grid; gap: .4rem; }
.q-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid #f1f5f9; }
.q-ligne span { display: flex; flex-direction: column; }
.q-ligne small { color: var(--gris); }
.q-animateurs { display: grid; gap: .6rem; }
.q-animateur { display: grid; grid-template-columns: minmax(10rem, 1.4fr) repeat(3, minmax(7.5rem, 1fr)); gap: .5rem .75rem; align-items: end; padding: .7rem .8rem; background: #f8fafc; border-radius: .6rem; }
.q-animateur__nom { display: flex; flex-direction: column; align-self: center; }
.q-animateur__nom small { color: var(--gris); }
.q-select { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; font-weight: 600; color: #4b5563; min-width: 0; }
.q-select select, .q-select input { width: 100%; font-size: .9rem; padding: .35rem .5rem; }
@media (max-width: 48rem) { .q-animateur { grid-template-columns: 1fr 1fr; } .q-animateur__nom { grid-column: 1 / -1; } }
.q-enregistrer { position: sticky; bottom: .75rem; text-align: right; }
.q-enregistrer .bouton { box-shadow: 0 6px 18px rgba(247,53,25,.35); }
.q-lien { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.q-lien code { background: #f1f5f9; padding: .4rem .6rem; border-radius: .4rem; word-break: break-all; }
.q-admin { margin-top: 2rem; }
.q-admin__question { background: #fff; border: 1px solid var(--ligne); border-left: 4px solid #cbd5e1; border-radius: .6rem; padding: .7rem 1rem; margin-bottom: .5rem; }
.q-admin__question.est-repondue { border-left-color: var(--vert); }
.q-admin__question header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.q-admin__question header span { color: var(--gris); font-size: .85rem; }
.q-admin__reponse { white-space: pre-wrap; font: inherit; font-size: .92rem; background: #f8fafc; padding: .5rem .7rem; border-radius: .4rem; margin: .5rem 0; max-height: 18rem; overflow: auto; }
.q-admin__appliquer { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; }

/* Questionnaire : « non nécessaire » et « laisser ainsi » */
.q-ignorer { float: right; margin: -.1rem 0 .3rem .75rem; font-size: .8rem; color: var(--gris); display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.q-question.est-ignoree { border-left-color: #94a3b8; opacity: .7; }
.q-question:has(.q-ignorer input:checked) > :not(legend):not(.q-ignorer) { display: none; }
.q-question:has(.q-ignorer input:checked) { opacity: .7; }
.q-ligne__saisie { display: inline-flex; align-items: center; gap: .6rem; }
.q-laisser { font-size: .82rem; color: var(--gris); display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.q-ligne:has(.q-laisser input:checked) input[type="date"] { opacity: .35; }
.q-admin__ignoree { margin: .4rem 0 0; color: var(--gris); font-style: italic; }
@media (max-width: 40rem) { .q-ignorer { float: none; display: flex; margin: 0 0 .4rem; } }

/* Fiche personnelle des animateurs */
.profil { max-width: 44rem; margin: 0 auto; }
.profil__accord { display: flex; align-items: flex-start; gap: .55rem; margin: .2rem 0 .8rem; font-weight: 600; color: var(--marine); cursor: pointer; }
.profil__accord input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--vert); flex: 0 0 auto; }
.profil__fichier { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .92rem; color: var(--marine); }
.profil__fichier small { font-weight: 400; color: var(--gris); }
.profil__retirer { padding: .7rem .9rem; border: 1px dashed #cbd5e1; border-radius: .6rem; color: #6b7280; font-weight: 500; }
.profil__retirer input { accent-color: var(--rouge); }
.demandes-profil { margin: 1.5rem 0; }
.demande-profil { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; background: #fff; border: 1px solid var(--ligne); border-left: 4px solid var(--jaune); border-radius: .6rem; padding: .8rem 1rem; margin-bottom: .6rem; }
.demande-profil__photo { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; }
.demande-profil__infos { flex: 1 1 18rem; }
.demande-profil__infos ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.demande-profil__infos small { color: var(--gris); }
.demande-profil__actions { display: flex; align-items: center; gap: .6rem; margin: 0; }
.envoi-liens summary { cursor: pointer; }
.admin-animateur__lien { display: inline-flex; align-items: center; gap: .75rem; font-size: .88rem; }

/* Fiche personnelle : photo actuelle */
.profil__photo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: .4rem; }
.profil__apercu img, .profil__apercu .avatar { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; display: flex; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--violet); }
.profil__photo > div { flex: 1 1 18rem; }
.profil__legende { margin: 0 0 .5rem; font-size: .95rem; }

/* Fiche personnelle : cadrage */
.profil__cadrage-ok { margin: .5rem 0 0; color: var(--vert); font-weight: 700; }
.profil__apercu .profil__apercu-cadre { width: 6.5rem; height: 6.5rem; border-radius: 50%; display: block; background: #e5e7eb no-repeat; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--vert); }

/* Barre d'administration : fiches d'animateurs à valider */
.admin-barre__compteur { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; margin-left: .2rem;
                         border-radius: 1rem; background: var(--rouge); color: #fff; font-size: .75rem; font-weight: 700; animation: compteur-pulse 2s ease-in-out 3; }
@keyframes compteur-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(247,53,25,.6); } 50% { box-shadow: 0 0 0 6px rgba(247,53,25,0); } }

/* Questionnaire : animateur toujours actif ? */
.q-animateur { grid-template-columns: minmax(10rem, 1.4fr) repeat(4, minmax(7rem, 1fr)); }
.q-select--actif select { border-color: var(--bleu); }
.q-animateur:has(.q-select--actif option[value="non"]:checked) { opacity: .6; background: #fdf2f0; }
@media (max-width: 56rem) { .q-animateur { grid-template-columns: 1fr 1fr; } }

/* Questionnaire : correctifs de mise en page (animateurs, « non nécessaire ») */
.q-ignorer { float: none; display: flex; justify-content: flex-end; margin: -.2rem 0 .5rem; }
.q-animateur { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); align-items: start; }
.q-animateur__nom { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; padding-bottom: .2rem; border-bottom: 1px solid #e5e7eb; }
.q-select { white-space: normal; }
.q-actuel { font-weight: 400; color: var(--gris); font-size: .72rem; min-height: 1em; }
@media (max-width: 56rem) { .q-animateur { grid-template-columns: 1fr 1fr; } }

/* Fenêtre à choix : aperçu avant / après */
.confirmation__icone--info { color: var(--bleu); background: color-mix(in srgb, var(--bleu) 12%, #fff); }
.confirmation__images { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: .25rem 0 .9rem; }
.confirmation__images figure { margin: 0; flex: 0 1 9rem; }
.confirmation__images img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; display: block; background: #e5e7eb; }
.confirmation__images figcaption { font-size: .75rem; color: var(--gris); margin-top: .2rem; }
.confirmation__fleche { font-size: 1.5rem; color: var(--bleu); font-weight: 700; }
.confirmation__boutons { flex-direction: column; align-items: stretch; }
.bouton--lien { background: none; color: var(--gris); border: 0; }
.bouton--lien:hover { color: var(--marine); text-decoration: underline; }
@media (min-width: 30rem) { .confirmation__boutons { flex-direction: row; flex-wrap: wrap; justify-content: center; } }

/* ------------------------------------------------------------------
   Admin : galeries (photo principale, vignettes, ajout, sélecteur)
   ------------------------------------------------------------------ */
.gal-recherche { font: inherit; padding: .5rem .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; min-width: 14rem; }
.gal-corps { display: flex; gap: 1rem; align-items: flex-start; margin: .75rem 0 .5rem; }
.gal-principale { margin: 0; flex: 0 0 13rem; text-align: center; }
.gal-principale img, .gal-vide { width: 13rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--jaune); }
.gal-vide { background: #f1f5f9; color: #cbd5e1; box-shadow: 0 0 0 2px #e2e8f0; }
.gal-vide .icone { width: 2.5rem; height: 2.5rem; }
.gal-principale figcaption { font-size: .78rem; font-weight: 700; color: #a16207; margin-top: .35rem; }
.gal-vignettes { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; }
.gal-vignette { position: relative; margin: 0; width: 8rem; }
.gal-vignette img { width: 8rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; display: block; }
.gal-vignette__actions { position: absolute; inset: auto 0 0 0; display: flex; justify-content: center; gap: .15rem; padding: .25rem; background: linear-gradient(transparent, rgba(2,13,36,.8)); border-radius: 0 0 .4rem .4rem; opacity: 0; transition: opacity .15s ease; }
.gal-vignette:hover .gal-vignette__actions, .gal-vignette:focus-within .gal-vignette__actions { opacity: 1; }
@media (hover: none) { .gal-vignette__actions { opacity: 1; } }
.gal-action { margin: 0; }
.gal-action button { width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--marine); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gal-action button .icone { width: .95rem; height: .95rem; }
.gal-action button:hover:not(:disabled) { background: var(--jaune); }
.gal-action button:disabled { opacity: .35; cursor: default; }
.gal-retirer button { color: var(--rouge); }
.gal-retirer button:hover { background: var(--rouge) !important; color: #fff; }
.gal-ajout { display: flex; gap: .5rem; }
.gal-envoi { margin: 0; }
.gal-ajout__bouton { position: relative; width: 8rem; aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-align: center;
                     border: 2px dashed #cbd5e1; border-radius: .4rem; background: #f8fafc; color: var(--bleu); font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.gal-ajout__bouton:hover, .gal-ajout__bouton:focus-within { border-color: var(--bleu); background: #e6f6f8; }
.gal-ajout__bouton .icone { width: 1.4rem; height: 1.4rem; }
.gal-ajout__bouton input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gal-ajout__bouton.est-envoi { opacity: .6; }
@media (max-width: 40rem) { .gal-corps { flex-direction: column; } }
.selecteur { display: flex; flex-direction: column; max-height: 90vh; }
.selecteur__entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.selecteur__entete h2 { margin: 0; font-size: 1.2rem; }
.selecteur__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; overflow: auto; margin: .75rem 0; min-height: 12rem; }
.selecteur__photo { position: relative; padding: 0; border: 3px solid transparent; border-radius: .45rem; background: #f1f5f9; }
.selecteur__choix { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: .25rem; }
.selecteur__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: .25rem; }
/* Loupe : agrandir une photo sans la choisir (étape 103) */
.selecteur__loupe { position: absolute; left: .3rem; bottom: .3rem; width: 1.7rem; height: 1.7rem;
    display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%;
    background: rgba(2, 25, 69, .75); color: #fff; cursor: zoom-in; opacity: 0; transition: opacity .12s ease; }
.selecteur__photo:hover .selecteur__loupe, .selecteur__loupe:focus-visible { opacity: 1; }
.selecteur__loupe:hover { background: var(--marine); }
@media (hover: none) { .selecteur__loupe { opacity: 1; } }
.selecteur__zoom { position: fixed; inset: 0; z-index: 60; background: rgba(2, 25, 69, .88);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem; cursor: zoom-out; }
.selecteur__zoom[hidden] { display: none; }
.selecteur__zoom figure { margin: 0; display: flex; flex-direction: column; gap: .6rem; max-width: min(94vw, 1100px); }
.selecteur__zoom img { display: block; margin: 0 auto; max-width: 100%; max-height: 80vh;
    object-fit: contain; border-radius: .4rem; background: #fff; }
.selecteur__zoom figcaption { color: #C3D4EC; font-size: .85rem; text-align: center; word-break: break-all; }
.selecteur__photo.est-choisie { border-color: var(--vert); }
.selecteur__photo.est-choisie::after { content: "✓"; position: absolute; top: .25rem; right: .25rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--vert); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.selecteur__pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.selecteur__pages { display: inline-flex; align-items: center; gap: .4rem; color: var(--gris); font-size: .9rem; }
.selecteur__pages .bouton { padding: .3rem .7rem; }
.selecteur__actions { display: inline-flex; gap: .5rem; }

/* Avatars d'animateurs agrandissables (loupe) */
a.avatar--zoom { position: relative; overflow: visible; cursor: zoom-in; text-decoration: none; }
a.avatar--zoom img { border-radius: 50%; }
.avatar__loupe { position: absolute; right: -2px; bottom: -2px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
                 background: var(--marine); color: #fff; box-shadow: 0 0 0 2px #fff; transition: transform .15s ease, background .15s ease; }
.avatar--grand .avatar__loupe { width: 2rem; height: 2rem; right: 2px; bottom: 2px; }
.avatar--grand .avatar__loupe .icone { width: 1.1rem; height: 1.1rem; }
.avatar--moyen .avatar__loupe { width: 1.3rem; height: 1.3rem; }
.avatar--moyen .avatar__loupe .icone { width: .8rem; height: .8rem; }
.avatar--petit .avatar__loupe { width: .95rem; height: .95rem; right: -4px; bottom: -4px; }
.avatar--petit .avatar__loupe .icone { width: .6rem; height: .6rem; stroke-width: 3; }
a.avatar--zoom:hover .avatar__loupe, a.avatar--zoom:focus-visible .avatar__loupe { background: var(--bleu); transform: scale(1.15); }
a.avatar--zoom:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }

/* Avatars agrandissables : pas de pastille, seulement le curseur loupe et un léger effet au survol */
.avatar__loupe { display: none; }
a.avatar--zoom img { transition: transform .2s ease, filter .2s ease; }
a.avatar--zoom:hover img, a.avatar--zoom:focus-visible img { transform: scale(1.06); filter: brightness(1.05); }
a.avatar--zoom { overflow: hidden; }

/* Avatars agrandissables : l'effet s'applique au cercle entier (évite l'aperçu carré pendant l'animation) */
a.avatar--zoom { border-radius: 50%; overflow: hidden; isolation: isolate; transition: transform .2s ease, filter .2s ease; }
a.avatar--zoom img { border-radius: 50%; transition: none; }
a.avatar--zoom:hover img, a.avatar--zoom:focus-visible img { transform: none; filter: none; }
a.avatar--zoom:hover, a.avatar--zoom:focus-visible { transform: scale(1.06); filter: brightness(1.05); }
a.avatar--zoom:focus { outline: none; }
a.avatar--zoom:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--jaune); }
.avatar--grand.avatar--zoom:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--jaune); }

/* Visionneuse : portraits d'animateurs affichés en cercle */
.visionneuse__image--ronde { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: min(80vh, 90vw, 32rem); height: auto; max-height: 80vh;
                             box-shadow: 0 0 0 6px #fff, 0 20px 60px rgba(0,0,0,.5); }

/* ------------------------------------------------------------------
   Admin : tableau de bord, comptes, journal
   ------------------------------------------------------------------ */
.admin-barre { flex-wrap: wrap; }
.admin-barre__accueil { color: #fff; font-weight: 700; text-decoration: none; }
.admin-barre__liens { flex-wrap: wrap; }
.admin-barre__compte { color: #c7d4ea; text-decoration: none; font-size: .88rem; }
.admin-barre__compte:hover { color: #fff; text-decoration: underline; }
.tableau-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.module { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--ligne); border-radius: .8rem; text-decoration: none; color: var(--texte); transition: transform .15s ease, box-shadow .15s ease; }
a.module:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(2,25,69,.1); border-color: var(--bleu); }
.module strong { color: var(--marine); font-size: 1.1rem; display: flex; align-items: center; gap: .4rem; }
.module > span:not(.module__icone) { color: #4b5563; font-size: .92rem; }
.module__icone { width: 2.6rem; height: 2.6rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center; background: #e6f6f8; color: var(--bleu); margin-bottom: .2rem; }
.module__icone .icone { width: 1.4rem; height: 1.4rem; }
.module--bientot { opacity: .55; }
.module--bientot small { color: var(--gris); font-style: italic; }
.roles { border: 0; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.roles legend { font-weight: 700; color: var(--marine); margin-bottom: .3rem; }
.role span { display: flex; flex-direction: column; gap: .15rem; }
.role small { font-weight: 400; color: #4b5563; line-height: 1.35; }
.comptes { display: grid; gap: .6rem; margin-top: 1.25rem; }
.compte { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; background: #fff; border: 1px solid var(--ligne); border-radius: .6rem; padding: .75rem 1rem; }
.compte--inactif { opacity: .6; background: #f8fafc; }
.compte__infos { flex: 1 1 16rem; display: flex; flex-direction: column; }
.compte__infos small { color: var(--gris); }
.compte__champ { display: flex; flex-direction: column; font-size: .8rem; font-weight: 600; color: var(--marine); }
.compte__champ input, .compte__champ select { font: inherit; font-weight: 400; padding: .35rem .5rem; border: 1px solid #cbd5e1; border-radius: .4rem; }
.compte__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.lien-invitation { border-left-color: var(--vert); }
.journal { display: grid; gap: .25rem; margin-top: 1rem; }
.journal__ligne { display: grid; grid-template-columns: 8.5rem 10rem 1fr; gap: .2rem 1rem; padding: .45rem .75rem; background: #fff; border-radius: .4rem; font-size: .92rem; }
.journal__ligne time { color: var(--gris); font-variant-numeric: tabular-nums; }
.journal__ligne small { grid-column: 3; color: var(--gris); word-break: break-all; }
@media (max-width: 40rem) { .journal__ligne { grid-template-columns: 1fr; } .journal__ligne small { grid-column: 1; } }

/* ------------------------------------------------------------------
   Admin : actualités
   ------------------------------------------------------------------ */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.actus-recherche { margin-left: auto; }
.actus-recherche input { font: inherit; padding: .4rem .7rem; border: 1px solid #cbd5e1; border-radius: 2rem; min-width: 14rem; }
.actus-liste { display: grid; gap: .5rem; margin-top: 1rem; }
.actu-ligne { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--ligne); border-radius: .6rem; padding: .6rem .8rem; }
.actu-ligne__image { flex: 0 0 6rem; }
.actu-ligne__image img, .actu-ligne__image span { width: 6rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .35rem; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #cbd5e1; }
.actu-ligne__texte { flex: 1; min-width: 0; }
.actu-ligne__texte h2 { margin: .15rem 0; font-size: 1.02rem; }
.actu-ligne__texte h2 a { color: var(--marine); text-decoration: none; }
.actu-ligne__texte small { color: var(--gris); }
.actu-statut { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .05rem .5rem; border-radius: 1rem; color: #fff; background: var(--accent); }
.actu-ligne__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; }
.actu-ligne__actions .bouton { padding: .35rem .9rem; }
@media (max-width: 48rem) { .actu-ligne { flex-wrap: wrap; } .actu-ligne__actions { width: 100%; } }

.article-editeur { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; }
.article-titre input { width: 100%; font: inherit; font-size: 1.6rem; font-weight: 700; color: var(--marine); padding: .5rem .7rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.article-adresse { margin: .35rem 0 1rem; color: var(--gris); font-size: .85rem; }
.article-adresse input { font: inherit; border: 0; border-bottom: 1px dashed #cbd5e1; background: transparent; color: var(--marine); min-width: 18rem; padding: 0 .1rem; }
.article-texte { background: #fff; border-radius: .5rem; }
.article-texte .ql-toolbar.ql-snow { border-radius: .5rem .5rem 0 0; border-color: #cbd5e1; position: sticky; top: 0; z-index: 3; background: #fff; }
.article-texte .ql-container.ql-snow { border-radius: 0 0 .5rem .5rem; border-color: #cbd5e1; font: inherit; font-size: 1.05rem; min-height: 22rem; }
.article-texte .ql-editor { min-height: 22rem; line-height: 1.65; }
.article-texte .ql-editor h2 { font-size: 1.4rem; } .article-texte .ql-editor h3 { font-size: 1.15rem; }
.article-extrait { display: flex; flex-direction: column; gap: .3rem; margin-top: 1rem; font-size: .88rem; font-weight: 600; color: #4b5563; }
.article-extrait textarea { font: inherit; font-weight: 400; padding: .5rem .7rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.article-editeur__cote { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.article-bloc { background: #fff; border: 1px solid var(--ligne); border-radius: .7rem; padding: .9rem 1rem; display: grid; gap: .6rem; }
.article-bloc h2 { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.article-bloc label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 600; color: var(--marine); }
.article-bloc input, .article-bloc select { font: inherit; font-weight: 400; padding: .4rem .55rem; border: 1px solid #cbd5e1; border-radius: .45rem; background: #fff; }
.article-bloc small { font-weight: 400; color: var(--gris); font-size: .78rem; }
.article-bloc__boutons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.article-apercu { font-size: .9rem; font-weight: 600; }
.article-couverture img, .article-couverture span { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .4rem; display: flex; align-items: center; justify-content: center; gap: .4rem; background: #f1f5f9; color: var(--gris); font-size: .85rem; }
.article-galerie { margin-top: 2rem; background: #fff; border: 1px solid var(--ligne); border-radius: .8rem; padding: 1rem 1.25rem; scroll-margin-top: 1rem; }
.article-galerie h2 { margin-top: 0; font-size: 1.15rem; }
.article-galerie h2 small { font-weight: 400; color: var(--gris); font-size: .85rem; }
.article-galerie .gal-vignette__actions { display: flex; }
@media (max-width: 60rem) { .article-editeur { grid-template-columns: 1fr; } .article-editeur__cote { position: static; } }

/* Article : galerie gérée dans l'administration, aperçu d'un brouillon */
.galerie-photos--article { margin: 1.5rem 0; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.apercu-brouillon { background: #fef3c7; border: 1px solid var(--jaune); border-radius: .5rem; padding: .6rem .9rem; }

/* Comptes : droits des bénévoles */
.droits { border: 0; padding: 0; margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.droits[hidden] { display: none; }
.droits legend { font-weight: 700; color: var(--marine); margin-bottom: .3rem; width: 100%; }
.droit { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border: 1px solid #cbd5e1; border-radius: 2rem; background: #fff; cursor: pointer; font-size: .9rem; }
.droit:has(input:checked) { border-color: var(--vert); background: #e8f5e1; font-weight: 600; }
.droit input { accent-color: var(--vert); }
.compte__droits { flex-basis: 100%; }

/* Barre d'administration : nom + icône de déconnexion */
.admin-barre { flex-wrap: nowrap; }
.admin-barre__liens { flex: 1; min-width: 0; }
.admin-barre__utilisateur { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; white-space: nowrap; }
.admin-barre__utilisateur form { margin: 0; }
.admin-barre__deconnexion { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0;
                            border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.admin-barre__deconnexion .icone { width: 1rem; height: 1rem; }
.admin-barre__deconnexion:hover, .admin-barre__deconnexion:focus-visible { background: var(--rouge); border-color: var(--rouge); }
@media (max-width: 56rem) { .admin-barre { flex-wrap: wrap; } }

/* Photos dans les éditeurs (événements, activités) */
.photos-inline__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .4rem; }
.photos-inline__boutons form { margin: 0; }
.photos-inline__fichier { position: relative; cursor: pointer; }
.photos-inline__fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photos-inline .gal-vignette__actions { display: flex; }

/* ------------------------------------------------------------------
   Admin : événements (fiche, éditions, dates)
   ------------------------------------------------------------------ */
.actu-ligne--masquee { opacity: .65; }
.ordre-boutons { display: inline-flex; gap: .1rem; }
.ordre-boutons button { font-size: 1.1rem; padding: 0 .3rem; }
.element-fiche { background: #fff; border: 1px solid var(--ligne); border-radius: .8rem; padding: 1rem 1.25rem; }
.element-fiche__options { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1rem; }
.editions-admin { margin-top: 2rem; }
.editions-admin .admin-entete h2 { margin: 0; }
.edition-ajout { display: flex; gap: .5rem; align-items: center; }
.edition-ajout select { font: inherit; padding: .45rem .6rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.edition-carte { background: #fff; border: 1px solid var(--ligne); border-left: 4px solid var(--bleu); border-radius: .7rem; margin: .75rem 0; scroll-margin-top: 1rem; }
.edition-carte:target { outline: 3px solid var(--jaune); }
.edition-carte summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .8rem 1rem; cursor: pointer; }
.edition-carte summary small { color: var(--gris); }
.edition-formulaire { padding: 0 1rem 1rem; }
.edition-formulaire h3 { margin: 1rem 0 .5rem; font-size: 1rem; }
.edition-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem 1rem; }
.edition-champs__large { grid-column: 1 / -1; }
.edition-champs label, .date-ligne label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; font-weight: 600; color: var(--marine); }
.edition-champs input, .edition-champs select, .date-ligne input, .date-ligne select { font: inherit; font-weight: 400; padding: .4rem .5rem; border: 1px solid #cbd5e1; border-radius: .45rem; background: #fff; min-width: 0; }
.dates-liste { display: grid; gap: .5rem; }
.date-ligne { display: grid; grid-template-columns: 9.5rem 6.5rem 9.5rem 6.5rem minmax(10rem, 1fr) minmax(10rem, 1.3fr) auto; gap: .5rem; align-items: end; padding: .6rem; background: #f8fafc; border-radius: .5rem; }
.date-ligne__supprimer { flex-direction: row !important; align-items: center; gap: .3rem !important; color: var(--rouge) !important; white-space: nowrap; padding-bottom: .5rem; }
.date-ligne.est-supprimee { opacity: .45; text-decoration: line-through; }
.edition-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }
@media (max-width: 70rem) { .date-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); } .date-ligne__texte { grid-column: 1 / -1; } }

/* Barre d'administration : liens sur une seule ligne tant que la place le permet */
.admin-barre__liens { gap: .3rem 1rem; }
.admin-barre__liens a { white-space: nowrap; }
.admin-barre { padding: .6rem 1rem; gap: .75rem; }
.admin-barre__liens { margin-left: .75rem; gap: .3rem .85rem; font-size: .94rem; }

/* Admin : activités */
.activites-categorie { margin-top: 1.5rem; }
.activites-categorie > h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.activites-categorie > h2 small { color: var(--gris); font-weight: 400; }
.creneau-ligne { grid-template-columns: 8rem 6.5rem 6.5rem 10rem minmax(12rem, 1.2fr) minmax(10rem, 1fr) minmax(10rem, 1fr) auto; }
.creneau-periode { display: flex; gap: .3rem; }
.creneau-periode select { flex: 1; min-width: 0; }
.animateurs-choix { display: flex; flex-wrap: wrap; gap: .4rem; }
.droit--discret { opacity: .6; }
.nouvel-animateur { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .9rem; color: #4b5563; }
.nouvel-animateur input { font: inherit; padding: .35rem .55rem; border: 1px solid #cbd5e1; border-radius: .45rem; }
#saison .element-fiche { margin-top: .5rem; }
@media (max-width: 78rem) { .creneau-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Horaires d'activité sur deux lignes : jour, heures, fréquence, période / lieu, précision */
.creneau-ligne { grid-template-columns: 8rem 6.5rem 6.5rem minmax(9rem, 1fr) minmax(14rem, 1.4fr);
                 grid-template-areas: "jour de a freq periode" "lieu lieu note note suppr"; }
.cr-jour { grid-area: jour; } .cr-de { grid-area: de; } .cr-a { grid-area: a; } .cr-freq { grid-area: freq; } .cr-periode { grid-area: periode; }
.cr-lieu { grid-area: lieu; } .cr-note { grid-area: note; } .cr-suppr { grid-area: suppr; }
@media (max-width: 52rem) { .creneau-ligne { grid-template-columns: 1fr 1fr; grid-template-areas: "jour freq" "de a" "periode periode" "lieu lieu" "note note" "suppr suppr"; } }
.edition-champs .droit { flex-direction: row; align-self: end; font-size: .9rem; }
/* Barre d'administration : icône du tableau de bord à la place du mot « Administration » */
.admin-barre__accueil { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; background: rgba(255,255,255,.12); }
.admin-barre__accueil .icone { width: 1.1rem; height: 1.1rem; color: #fff; }
.admin-barre__accueil:hover { background: var(--bleu); }

/* Dates d'édition sur deux lignes : dates et heures / lieu, précision */
.date-edition { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "debut hdebut fin hfin" "lieu texte texte suppr"; }
.dt-debut { grid-area: debut; } .dt-hdebut { grid-area: hdebut; } .dt-fin { grid-area: fin; } .dt-hfin { grid-area: hfin; }
.dt-lieu { grid-area: lieu; } .dt-texte { grid-area: texte; } .dt-suppr { grid-area: suppr; }
@media (max-width: 52rem) { .date-edition { grid-template-columns: 1fr 1fr; grid-template-areas: "debut hdebut" "fin hfin" "lieu lieu" "texte texte" "suppr suppr"; } }

/* Admin : location et paramètres */
.materiels { display: grid; gap: .6rem; }
.materiel { display: grid; grid-template-columns: 9rem 1fr; grid-template-areas: "photo formulaire" "photo actions"; gap: .4rem 1rem; background: #fff; border: 1px solid var(--ligne); border-radius: .7rem; padding: .8rem 1rem; scroll-margin-top: 20vh; }
.materiel:target { outline: 3px solid var(--jaune); }
.materiel__photo { grid-area: photo; text-align: center; }
.materiel__photo img, .materiel__photo > span { width: 9rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #cbd5e1; }
.materiel__photo > span .icone { width: 2rem; height: 2rem; }
.materiel .materiel-formulaire { grid-area: formulaire; }
.materiel__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 0; }
.materiel-formulaire { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(8rem, 1fr) 6rem 7rem; gap: .5rem .75rem; align-items: end; margin: 0; }
.materiel-formulaire label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; font-weight: 600; color: var(--marine); }
.materiel-formulaire input { font: inherit; font-weight: 400; padding: .4rem .5rem; border: 1px solid #cbd5e1; border-radius: .45rem; min-width: 0; }
.materiel-formulaire__description { grid-column: 1 / 3; }
.materiel-formulaire .droit { flex-direction: row; font-size: .9rem; }
.materiel-nouveau, .materiel-nouveau + .element-fiche { margin-top: 1.5rem; }
.materiel-nouveau h2, .parametres h2, #pages-legales h2:first-child { margin-top: 0; }
@media (max-width: 52rem) { .materiel { grid-template-columns: 1fr; grid-template-areas: "photo" "formulaire" "actions"; } .materiel-formulaire { grid-template-columns: 1fr 1fr; } .materiel-formulaire__description, .materiel-formulaire__nom { grid-column: 1 / -1; } }
.parametres__champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem 1.25rem; }
.parametres__champs > label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; color: var(--marine); }
.parametres__champs input, .parametres__champs textarea, .parametres__champs select { font: inherit; font-weight: 400; padding: .45rem .6rem; border: 1px solid #cbd5e1; border-radius: .45rem; background: #fff; }
.parametres__large { grid-column: 1 / -1; }
.parametre-photo { display: grid; grid-template-columns: 7rem 1fr; grid-template-rows: auto auto; gap: .2rem .75rem; align-items: center; }
.parametre-photo__libelle { grid-column: 1 / -1; font-size: .85rem; font-weight: 600; color: var(--marine); }
.parametre-photo__apercu img, .parametre-photo__apercu { width: 7rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #cbd5e1; }
.parametre-pdf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.parametre-pdf .parametre-photo__libelle { flex-basis: 100%; }
.parametre-pdf a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }

/* Barre d'administration : menu « Réglages » */
.admin-barre__menu { position: relative; }
.admin-barre__menu summary { cursor: pointer; color: #c7d4ea; list-style: none; white-space: nowrap; }
.admin-barre__menu summary::-webkit-details-marker { display: none; }
.admin-barre__menu summary::after { content: " ▾"; font-size: .8em; }
.admin-barre__menu summary:hover, .admin-barre__menu[open] summary { color: #fff; }
.admin-barre__sous-menu { position: absolute; top: calc(100% + .6rem); left: -.75rem; z-index: 20; min-width: 13rem; display: flex; flex-direction: column; padding: .4rem;
                          background: var(--marine); border-radius: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.admin-barre__sous-menu a { color: #dbe4f3 !important; padding: .45rem .7rem; border-radius: .35rem; text-decoration: none; }
.admin-barre__sous-menu a:hover { background: rgba(255,255,255,.1); color: #fff !important; }

.materiel-formulaire { grid-template-columns: minmax(10rem, 2fr) minmax(8rem, 1fr) 6.5rem 9rem; }
.materiel-formulaire__fin { grid-column: 3 / 5; display: flex; justify-content: flex-end; align-items: center; gap: .5rem; }
.materiel__photo .admin-lien-bouton { font-size: .85rem; }
@media (max-width: 52rem) { .materiel-formulaire__fin { grid-column: 1 / -1; justify-content: flex-start; } }
.parametre-photo .admin-lien-bouton, .materiel__actions .admin-lien-bouton { font-size: .9rem; justify-self: start; }

/* Carte « Toutes les actualités » en 4e position sur l'accueil */
.carte-toutes { display: flex; flex-direction: column; gap: .4rem; justify-content: center; padding: 1.5rem 1.25rem; background: #fff; border: 2px dashed var(--ligne); border-radius: .9rem;
                text-decoration: none; color: var(--texte); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.carte-toutes:hover { border-color: var(--bleu); border-style: solid; transform: translateY(-3px); box-shadow: 0 10px 26px rgba(2,25,69,.1); }
.carte-toutes strong { color: var(--marine); font-size: 1.15rem; }
.carte-toutes > span:not(.carte-toutes__icone):not(.carte-toutes__fleche) { color: #4b5563; font-size: .93rem; }
.carte-toutes__icone { width: 2.8rem; height: 2.8rem; border-radius: .8rem; display: flex; align-items: center; justify-content: center; background: #e6f6f8; color: var(--bleu); }
.carte-toutes__icone .icone { width: 1.5rem; height: 1.5rem; }
.carte-toutes__fleche { color: var(--bleu); font-weight: 700; font-size: 1.3rem; }
/* Carte « Rejoindre l'équipe » : bouche-trou dans une grille, ou pleine largeur */
.equipe .rejoindre-equipe { flex-direction: column; text-align: center; gap: .6rem; }
.equipe .rejoindre-equipe > .icone { width: 2.6rem; height: 2.6rem; }
.equipe--bureau .rejoindre-equipe { flex-direction: row; text-align: left; }
.equipe--bureau .rejoindre-equipe > .icone { width: 3.5rem; height: 3.5rem; }
.rejoindre-equipe--large { grid-column: 1 / -1; flex-direction: row; text-align: left; margin-bottom: 2.5rem; }

/* ------------------------------------------------------------------
   Cartes : contour plus lisible et légère ombre, pour bien les séparer
   ------------------------------------------------------------------ */
:root { --ligne: #d7dce5; --ombre-carte: 0 1px 2px rgba(2, 25, 69, .06), 0 6px 16px rgba(2, 25, 69, .07); --ombre-carte-survol: 0 4px 10px rgba(2, 25, 69, .1), 0 14px 30px rgba(2, 25, 69, .12); }
.carte, .carte-toutes, .contact__carte, .lieu-carte, .membre, .demande, .equipe-apercu, .suite__lien, .apercu-document, .benevolat,
.module, .actu-ligne, .materiel, .admin-galerie, .compte, .admin-animateur, .article-bloc, .element-fiche, .edition-carte,
.q-question, .q-admin__question, .demande-profil, .envoi, .agenda li, .horaires li, .formulaire-fiche fieldset {
    box-shadow: var(--ombre-carte);
}
/* Les cartes cliquables se soulèvent au survol */
a.carte, a.carte-toutes, a.demande, a.suite__lien, a.module, a.apercu-document, a.equipe-apercu, .cartes--articles .carte, .cartes--activites .carte {
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
a.carte:hover, a.carte-toutes:hover, a.demande:hover, a.suite__lien:hover, a.module:hover, a.apercu-document:hover, a.equipe-apercu:hover,
.cartes--articles .carte:hover, .cartes--activites .carte:hover {
    box-shadow: var(--ombre-carte-survol);
    transform: translateY(-3px);
}

/* La tuile « Une carte, toutes les activités » ne doit pas se confondre avec une catégorie
   (elle suivait le rouge de « Sport en extérieur ») : fond bleu marine, bouton rouge */
.tuile-categorie--adherer { --accent: var(--marine);
    background: linear-gradient(145deg, var(--marine), color-mix(in srgb, var(--marine) 70%, var(--bleu)));
    box-shadow: 0 6px 18px rgba(2, 25, 69, .28); }
.tuile-categorie--adherer .tuile-categorie__icone { background: rgba(255,255,255,.16); }
.tuile-categorie--adherer .bouton { background: var(--rouge); color: #fff; }
.tuile-categorie--adherer:hover .bouton { background: #fff; color: var(--rouge); }

/* Lieux : adresse et lien d'itinéraire */
.lieu-carte__adresse { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .1rem 0 .5rem; color: #4b5563; font-size: .92rem; }
.lieu-carte__adresse .icone { width: .95rem; height: .95rem; color: var(--rouge); }
.lieu-carte__itineraire { font-weight: 600; white-space: nowrap; }
.pratique-lieu__adresse { color: var(--gris); font-weight: 400; }

/* Citation : sur une seule ligne quand la place le permet */
.citation { max-width: min(64rem, 100%); }
.citation p { font-size: clamp(1rem, 1.55vw, 1.35rem); text-wrap: balance; }
@media (min-width: 62rem) { .citation p { white-space: nowrap; font-size: min(1.25rem, 1.85vw); } }

/* Petit bouton « Voir sur Google Maps » (épingle) */
.bouton-carte { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: 0 0 auto;
                background: color-mix(in srgb, var(--rouge) 10%, #fff); color: var(--rouge); border: 1px solid color-mix(in srgb, var(--rouge) 35%, #fff); text-decoration: none; vertical-align: middle; }
.bouton-carte .icone { width: 1rem; height: 1rem; }
.bouton-carte:hover, .bouton-carte:focus-visible { background: var(--rouge); color: #fff; }
.pratique-lieu .bouton-carte { margin-left: .4rem; }

/* Bouton « Voir sur Google Maps » : survol bleu marine (le rouge plein jurait avec les cartes de lieux) */
.bouton-carte:hover, .bouton-carte:focus-visible { background: var(--marine); color: #fff; border-color: var(--marine); }

/* Carte d'un lieu : adresse alignée sur le titre, pastille cliquable vers Google Maps */
.lieu-carte__adresse { margin: 0 1.25rem .6rem; color: #4b5563; font-size: .92rem; }
.lieu-carte__adresse a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.lieu-carte__adresse a:hover { color: var(--marine); }
.carte-activite__icone--lien { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.carte-activite__icone--lien:hover, .carte-activite__icone--lien:focus-visible { transform: scale(1.08); box-shadow: 0 6px 16px rgba(2,25,69,.3); }

/* Agenda avec photo — accueil : carte, image en haut (étape 101) */
.agenda.agenda--carte { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.agenda--carte li { display: block; padding: 0; overflow: hidden; border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(2,25,69,.08); transition: transform .15s ease, box-shadow .15s ease; }
.agenda--carte li:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(2,25,69,.14); }
.agenda--carte .agenda__lien { display: block; text-decoration: none; color: inherit; position: relative; }
.agenda--carte .agenda__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--ligne); }
.agenda--carte .agenda__date { position: absolute; left: .75rem; top: calc(66.6% - 2.6rem);
    flex: none; width: 4rem; box-shadow: 0 4px 12px rgba(2,25,69,.3); }
.agenda--carte .agenda__corps { display: block; padding: .85rem 1rem 1rem 5.6rem; min-height: 3.6rem; }
.agenda--carte .agenda__corps strong { display: block; font-size: 1.05rem; color: var(--marine); line-height: 1.25; }
.agenda--carte .agenda__corps small { display: block; color: var(--gris); margin-top: .2rem; }
.agenda--carte li:nth-child(5n+1) .agenda__date { background: var(--marine); }

/* Agenda avec photo — Manifestations : photo fondue à droite (étape 102)
   La carte reste claire ; la photo n'est qu'une ambiance, jamais un contenu à lire. */
.agenda.agenda--fond { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.agenda--fond li { display: block; padding: 0; border-radius: .75rem; overflow: hidden; }
.agenda--fond .agenda__lien { display: flex; width: 100%; box-sizing: border-box; gap: 1rem;
    align-items: center; min-height: 6.5rem; padding: .9rem 1rem; text-decoration: none;
    position: relative; isolation: isolate; }
.agenda--fond .agenda__lien::before { content: ""; position: absolute; inset: 0 0 0 auto;
    width: var(--part-photo, 46%); z-index: -2;
    background: var(--photo, none) center / cover no-repeat; }
.agenda--fond .agenda__lien::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, #fff 0%, #fff 54%, rgba(255,255,255,.82) 66%,
                rgba(255,255,255,.12) 92%, rgba(255,255,255,0) 100%); }
.agenda--fond .agenda__corps strong { display: block; color: var(--marine); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.agenda--fond .agenda__corps small { display: block; color: var(--gris); margin-top: .15rem; }
@media (max-width: 48rem) {
    .agenda.agenda--fond { grid-template-columns: 1fr; }
    .agenda--fond .agenda__lien { --part-photo: 30%; }
    .agenda--fond .agenda__lien::after { background: linear-gradient(90deg, #fff 0%, #fff 74%,
        rgba(255,255,255,.92) 84%, rgba(255,255,255,.25) 96%, rgba(255,255,255,0) 100%); }
}

/* ---------------------------------------------------------------- */
/*  Fichier des adhérents (étape 117)                                */
/* ---------------------------------------------------------------- */
.bilan { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 1.5rem; }
.bilan__case { padding: .5rem 1rem; border: 1px solid var(--ligne); border-radius: .5rem;
    background: #fff; color: var(--gris); font-size: .92rem; }
.bilan__case strong { display: block; color: var(--marine); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.bilan__case--discret { background: transparent; }

.filtres-adherents { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end;
    padding: 1rem; border: 1px solid var(--ligne); border-radius: .5rem; background: #fff; margin-bottom: 1rem; }
.filtres-adherents label { display: grid; gap: .2rem; font-size: .88rem; font-weight: 600; color: var(--gris); }
/* Assez large pour un nom, assez étroit pour que tout tienne sur une ligne */
.filtres-adherents__recherche { flex: 1 1 11rem; min-width: 9rem; }
.filtres-adherents__fin { display: flex; gap: .5rem; align-items: center; }

/*
 * Bouton réduit à son icône : le libellé reste dans la page pour les
 * lecteurs d'écran, et s'affiche au survol par l'attribut title.
 */
.bouton-icone { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem;
    border: 1px solid transparent; border-radius: .5rem; background: var(--bleu); color: #fff;
    cursor: pointer; padding: 0; text-decoration: none; }
.bouton-icone:hover { background: #016b7e; }
.bouton-icone .icone { width: 1.15rem; height: 1.15rem; }
.bouton-icone--neutre { background: #fff; color: var(--gris); border-color: var(--ligne); }
.bouton-icone--neutre:hover { background: #f1f5f9; color: var(--marine); border-color: var(--bleu); }
.bouton-icone:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }

/* Texte réservé aux lecteurs d'écran */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.tableau-enveloppe { overflow-x: auto; }
.tableau-adherents { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tableau-adherents th { text-align: left; font-size: .82rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--gris); padding: .5rem .8rem .5rem 0; border-bottom: 2px solid var(--marine); }
.tableau-adherents td { padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau-adherents tr:hover td { background: #f7f9fc; }
.tableau-adherents a { text-decoration: none; color: var(--marine); }
.tableau-adherents a:hover { text-decoration: underline; }
.tableau-adherents .petit { font-size: .88rem; color: var(--gris); }

.etat { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .5rem; border-radius: .7rem; }
.etat--oui { background: #e8f4e2; color: #3d6a19; }
.etat--non { background: #fde6e2; color: #a32a12; }
.etat--ancien { background: #ecedf0; color: #5a6070; }

.barres { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .45rem; }
.barres li { display: grid; grid-template-columns: 12rem 1fr 2.5rem; gap: .75rem; align-items: center; font-size: .92rem; }
.barres a { color: var(--marine); text-decoration: none; }
.barres a:hover { text-decoration: underline; }
.barres__piste { height: .55rem; background: #e8eef5; border-radius: .3rem; overflow: hidden; }
.barres__piste span { display: block; height: 100%; background: var(--bleu); }
.barres strong { text-align: right; color: var(--marine); }

.fiche-adherent { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.fiche-prenom { font-weight: 400; color: var(--gris); }
.couples { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.couples dt { font-size: .85rem; font-weight: 600; color: var(--gris); }
.couples dd { margin: 0; }
.etiquettes-liste { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.etiquettes-liste a { text-decoration: none; }
.historique { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .3rem; color: var(--gris); font-size: .93rem; }
.historique strong { color: var(--marine); margin-right: .4rem; }
.vide { color: var(--gris); padding: 1.5rem 0; }

@media (max-width: 40rem) {
    .barres li { grid-template-columns: 1fr 2.5rem; }
    .barres__piste { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- */
/*  Vidéo des 100 ans : façade cliquable (étape 118)                 */
/* ---------------------------------------------------------------- */
.video-facade { position: relative; display: flex; align-items: center; gap: .9rem;
    width: 100%; max-width: 26rem; aspect-ratio: 16 / 9; margin: 1rem 0 0;
    padding: 1rem; border-radius: .6rem; overflow: hidden; text-decoration: none;
    background: var(--marine) var(--affiche, none) center / cover no-repeat;
    align-content: end; align-items: flex-end; isolation: isolate; }
.video-facade::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(2,25,69,.88) 0%, rgba(2,25,69,.25) 55%, rgba(2,25,69,.1) 100%); }
.video-facade__lecture { flex: none; display: grid; place-items: center;
    width: 3.2rem; height: 3.2rem; border-radius: 50%;
    background: var(--rouge); color: #fff; padding-left: .2rem;
    transition: transform .15s ease; }
.video-facade:hover .video-facade__lecture,
.video-facade:focus-visible .video-facade__lecture { transform: scale(1.08); }
.video-facade__texte { color: #fff; font-weight: 600; line-height: 1.3; }
.video-facade__texte small { display: block; font-weight: 400; font-size: .8rem; color: #C3D4EC; margin-top: .15rem; }
.video-facade:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.video-lecteur { width: 100%; max-width: 26rem; aspect-ratio: 16 / 9;
    margin: 1rem 0 0; border: 0; border-radius: .6rem; display: block; }

@media (max-width: 32rem) {
    .video-facade, .video-lecteur { max-width: 100%; }
    .video-facade__texte small { display: none; }
}

/* ---------------------------------------------------------------- */
/*  Fiche adhérent : édition et pictogrammes (étape 122)             */
/* ---------------------------------------------------------------- */
.pictos { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 12rem; }
.picto-activite { display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
    border-radius: .35rem; background: #eef3f9; color: var(--bleu); }
.picto-activite .icone { width: 1rem; height: 1rem; }

.cases-groupe--activites { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .3rem .9rem; }
.case-activite { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; cursor: pointer; }
.case-activite input { flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--vert); }
.case-activite .icone { width: 1.1rem; height: 1.1rem; color: var(--bleu); flex: none; }

.edition-champs .case { display: flex; align-items: center; gap: .5rem; }
.edition-champs .case input { width: 1.1rem; height: 1.1rem; accent-color: var(--vert); }

.suppression-fiche { margin: 2rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--ligne);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.suppression-fiche .conditions { margin: 0; }

/* ---------------------------------------------------------------- */
/*  Journal : onglets, recherche, détail des changements (étape 123) */
/* ---------------------------------------------------------------- */
.journal__onglets { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.journal__onglet { display: inline-flex; align-items: baseline; gap: .4rem;
    padding: .4rem .9rem; border: 1px solid var(--ligne); border-radius: 1.2rem;
    background: #fff; color: var(--marine); text-decoration: none; font-size: .92rem; }
.journal__onglet small { color: var(--gris); font-size: .8rem; }
.journal__onglet:hover { border-color: var(--bleu); }
.journal__onglet.est-actif { background: var(--marine); border-color: var(--marine); color: #fff; }
.journal__onglet.est-actif small { color: #C3D4EC; }

.journal__recherche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
.journal__recherche label { display: grid; gap: .2rem; font-size: .88rem; font-weight: 600; color: var(--gris); }
.journal__recherche input { min-width: 16rem; }

/* Une barre de couleur distingue d'un coup d'œil les écritures sur le fichier */
.journal__ligne--adherents { border-left: 3px solid var(--violet); padding-left: .75rem; }
.journal__ligne--contenu { border-left: 3px solid var(--ligne); padding-left: .75rem; }

/* La ligne est une grille à trois colonnes : le détail occupe la troisième,
   sinon chaque champ retomberait sous la date. */
.journal__details { grid-column: 3; list-style: none; padding: 0; margin: .35rem 0 0; display: grid; gap: .2rem; }
.journal__details li { display: grid; grid-template-columns: 9rem auto auto 1fr; align-items: baseline;
    gap: .4rem; font-size: .88rem; }
.journal__champ { font-weight: 600; color: var(--gris); }
.journal__avant { color: #a32a12; text-decoration: line-through; }
.journal__fleche { color: var(--gris); }
.journal__apres { color: #3d6a19; font-weight: 600; }
.journal__ip { grid-column: 3; margin-top: .25rem; color: var(--gris); font-size: .78rem; }
@media (max-width: 40rem) {
    .journal__details, .journal__ip { grid-column: 1; }
    .journal__details li { grid-template-columns: 1fr; gap: 0; }
    .journal__fleche { display: none; }
}

/* ---------------------------------------------------------------- */
/*  Fiche adhérent : lecture, puis modification sur demande (124)    */
/* ---------------------------------------------------------------- */
.fiche-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem 2rem; padding: 1.25rem; background: #fff; border: 1px solid var(--ligne); border-radius: .6rem; }
.fiche-resume .couples { align-content: start; }
.fiche-resume .etiquettes-liste { margin: 0; }

.fiche-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.25rem 0; }
.fiche-actions .en-ligne { display: inline; margin: 0; }
.fiche-actions .admin-lien-bouton { margin-left: auto; }

.decoupe__boite--formulaire { width: min(52rem, 100%); }
.decoupe__boite--formulaire .fiche-adherent { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.decoupe__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
/* Fiche neuve : le formulaire occupe la page, pas besoin d'assombrir le fond */
.decoupe.sans-fond { position: static; display: block; padding: 0; background: none; }
.decoupe.sans-fond .decoupe__boite { width: 100%; max-height: none; padding: 0; background: none; border-radius: 0; }

/* Confirmer un encaissement ne doit pas ressembler à confirmer une suppression */
.bouton--vert { background: var(--vert); color: #fff; border-color: var(--vert); }
.bouton--vert:hover { background: #3d6a19; border-color: #3d6a19; }

/* ---------------------------------------------------------------- */
/*  Réservations de matériel (étape 127)                             */
/* ---------------------------------------------------------------- */
.tableau-materiel { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: .5rem; }
.tableau-materiel th[scope="col"] { text-align: left; font-size: .8rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--gris); padding: .4rem .8rem .4rem 0; border-bottom: 2px solid var(--marine); }
.tableau-materiel td, .tableau-materiel th[scope="row"] { padding: .5rem .8rem .5rem 0;
    border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: middle; }
.tableau-materiel th[scope="row"] { font-weight: 600; }
.tableau-materiel th[scope="row"] small { display: block; font-weight: 400; color: var(--gris); font-size: .82rem; }
.tableau-materiel input[type="number"] { width: 5rem; }
.tableau-materiel .est-inactif { opacity: .55; }

/* Un écart de montant n'est pas une faute : on informe, on ne bloque pas */
.encart-alerte { border-left: 3px solid var(--jaune); background: #fdf7ea;
    padding: .75rem 1rem; border-radius: .4rem; margin: 1rem 0; }
.encart-alerte p { margin: 0 0 .3rem; }
.encart-alerte p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- */
/*  Ajout d'un lieu sans quitter la fiche (étape 131)                */
/* ---------------------------------------------------------------- */
.lieu-rapide__ouvrir { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem;
    margin-left: .3rem; border: 1px dashed var(--ligne); border-radius: .4rem;
    color: var(--bleu); text-decoration: none; font-weight: 700; line-height: 1;
    vertical-align: middle; }
.lieu-rapide__ouvrir:hover { border-style: solid; border-color: var(--bleu); background: #eef6f8; }
.lieu-rapide__boite { width: min(28rem, 100%); display: grid; gap: .6rem; }
.lieu-rapide__boite h2 { margin: 0; }
.lieu-rapide__boite label { display: grid; gap: .2rem; font-size: .9rem; font-weight: 600; color: var(--gris); }
.lieu-rapide__boite .conditions { margin: 0; }
.lieu-rapide__erreur { margin: 0; padding: .5rem .75rem; border-radius: .4rem;
    background: #fde6e2; color: #a32a12; font-size: .9rem; }
.lieu-rapide__boite .edition-actions { margin: .3rem 0 0; display: flex; gap: .75rem; align-items: center; }

/* ---------------------------------------------------------------- */
/*  Envoi de photos depuis le sélecteur (étape 132)                  */
/* ---------------------------------------------------------------- */
.selecteur__envoi { position: relative; display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem; border: 1px dashed var(--ligne); border-radius: .5rem;
    color: var(--bleu); font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.selecteur__envoi:hover { border-style: solid; border-color: var(--bleu); background: #eef6f8; }
/* Le champ natif est illisible : on garde son comportement, pas son apparence */
.selecteur__envoi input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.selecteur__envoi.est-occupe { opacity: .6; pointer-events: none; }

.creneaux__adresse { color: var(--gris); font-size: .9rem; }

.selecteur__alerte { margin: .5rem 0 0; padding: .5rem .75rem; border-radius: .4rem;
    background: #fde6e2; color: #a32a12; font-size: .9rem; }

@media (max-width: 40rem) {
    .selecteur__entete { flex-wrap: wrap; gap: .5rem; }
    .selecteur__envoi { order: 3; }
}

/* ------------------------------------------------------------------
   Étape 134 — fiche de présentation des animateurs (administration)
   Reprend les trois blocs de la fiche papier pour la saisie case par case.
   ------------------------------------------------------------------ */
.admin-fiche-accords > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.admin-fiche-accords__etat { font-weight: 400; color: var(--gris); font-size: .85rem; }
.admin-fiche-accords__etat--attente { color: var(--rouge); }
.admin-fiche-accords fieldset { border: 0; border-top: 1px solid var(--ligne); margin: .8rem 0 0; padding: .6rem 0 0; }
.admin-fiche-accords legend { font-size: .82rem; font-weight: 700; color: var(--marine); padding-right: .5rem; }
.admin-fiche-accords__cases { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.admin-fiche-accords__cases--a-part { margin-top: .5rem; }
.admin-fiche-accords__alertes { margin: .6rem 0 0; padding: .5rem .8rem .5rem 1.8rem; background: #fff7ed; border-left: 3px solid var(--rouge); border-radius: .3rem; font-size: .86rem; }
.admin-fiche-accords > .admin-animateur__champ { margin-top: .8rem; }
.admin-fiche-accords .admin-animateur__champ small { font-weight: 400; color: var(--gris); }
/* Les libellés longs (réseaux sociaux) passent à la ligne sur mobile */
.admin-fiche-accords .admin-animateur__case { white-space: normal; }

/* Page Location : qui suit les réservations */
.encart__contact { margin: .6rem 0 0; font-size: .92rem; }
.membre__age { font-weight: 400; font-size: .8em; color: var(--gris); white-space: nowrap; }

/* ------------------------------------------------------------------
   Étape 135 — compte des animateurs et fiche alignée sur la fiche papier
   ------------------------------------------------------------------ */
.profil__cases { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.profil__champ { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .6rem; font-weight: 600; font-size: .92rem; color: var(--marine); }
.profil__champ small { font-weight: 400; color: var(--gris); }
.profil__champ input, .profil__champ textarea { font: inherit; font-weight: 400; }
.profil__supprimer { margin-top: .9rem; font-size: .92rem; }
.profil__supprimer summary { cursor: pointer; color: var(--rouge); font-weight: 600; }
.profil__supprimer p { margin: .5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.admin-animateur__compte { color: var(--vert); font-weight: 600; }
.admin-invitation { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .7rem .9rem; background: #ecfdf5; border-radius: .5rem; }
.admin-invitation p { margin: 0; flex: 1 1 20rem; }
/* Case et libellé sur une ligne, même dans la grille .champs qui empile ses labels */
.profil .champs .profil__accord { flex-direction: row; }
/* Retirer la photo d'un animateur depuis l'administration */
.admin-animateur__retirer { font-size: .85rem; margin-top: .2rem; }
.admin-animateur__retirer summary { cursor: pointer; color: var(--rouge); width: fit-content; }
.admin-animateur__retirer button { margin-top: .3rem; }
/* Onglets d'une section de l'administration (Location : réservations / matériel) */
.onglets-admin { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; border-bottom: 2px solid var(--ligne); }
.onglets-admin a { padding: .5rem .9rem; border-radius: .4rem .4rem 0 0; color: var(--bleu); font-weight: 600; text-decoration: none; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.onglets-admin a:hover { background: #f1f5f9; }
.onglets-admin a[aria-current="page"] { color: var(--marine); border-bottom-color: var(--marine); }

/* ------------------------------------------------------------------
   Étape 138 — personnes à contacter pour la location
   ------------------------------------------------------------------ */
.contacts-location { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; }
.contacts-location li { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.contacts-location__nom { font-size: .92rem; color: var(--gris); }
.contacts-admin { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.contacts-admin__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .5rem .7rem; border: 1px solid var(--ligne); border-radius: .5rem; background: #fff; }
.contacts-admin__nom { display: flex; flex-direction: column; min-width: 11rem; }
.contacts-admin__nom small { color: var(--gris); }
.contacts-admin__ligne input { flex: 1 1 12rem; font: inherit; padding: .35rem .5rem; border: 1px solid #cbd5e1; border-radius: .4rem; }
.contacts-admin__alerte { flex-basis: 100%; color: var(--rouge); }
.contacts-admin__ajout { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.contacts-admin__ajout label { display: flex; flex-direction: column; font-size: .85rem; font-weight: 600; color: var(--marine); }
.contacts-admin__ajout select, .contacts-admin__ajout input { font: inherit; font-weight: 400; padding: .35rem .5rem; border: 1px solid #cbd5e1; border-radius: .4rem; }
/* Les noms longs de la liste déroulante ne doivent pas élargir la page sur mobile */
.contacts-admin__ajout label { max-width: 100%; }
.contacts-admin__ajout select { max-width: 100%; }

/* Étape 139 — refus d'être photographié (fichier des adhérents) */
.etiquette--refus-photos { --accent: var(--rouge); }
.refus-photos { color: var(--rouge); font-weight: 600; }
.filtres-adherents__photos { align-self: center; white-space: nowrap; }

/* Étape 140 — espace des animateurs : leurs activités, ajout d'un adhérent */
.mes-activites ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.mes-activites li { margin: .25rem 0; }
.mes-activites small { color: var(--gris); }
.ajout-activite__formulaire { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ajout-activite__formulaire select { font: inherit; padding: .4rem .5rem; border: 1px solid #cbd5e1; border-radius: .4rem; max-width: 100%; }

/* Fiche d'inscription imprimée (2026/2027) : clause photo et données personnelles, en petit pour tenir sur une page */
@media print {
    .fi__clause p { margin: 0 0 1.5mm; font-size: 8.5pt; text-align: justify; }
    .fi__declaration .fi__ligne { min-width: 35mm; }
    .fiche-imprimable { font-size: 10pt; }
    .fi__signature { min-height: 11mm; }
}
@media print {
    @page { margin: 9mm 11mm; }
    .fi__entete { padding-bottom: 2mm; margin-bottom: 3mm; }
    .fi__entete img { width: 18mm; }
    .fi__entete h2 { font-size: 15pt; }
    .fi__cadre { padding: 2.2mm 3.5mm; margin-bottom: 2.5mm; }
    .fi__infos { gap: 1.8mm 3mm; }
    .fi__activites li, .fi__cases li { margin-bottom: 1.1mm; }
    .fi__signature { min-height: 9mm; }
    .fi__enfants p { margin-bottom: 1.4mm; }
    .fi__pied { margin-top: 1mm; }
}

/* ------------------------------------------------------------------
   Étape 144 — fiche d'inscription remplie en ligne : à l'impression,
   même mise en page que la fiche PDF 2026/2027 (cadres arrondis,
   pastilles, ronds). Polices hébergées sur le site (licence OFL).
   ------------------------------------------------------------------ */
@font-face { font-family: "FMPT Poppins"; font-weight: 400; src: url(/assets/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: "FMPT Poppins"; font-weight: 600; src: url(/assets/fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: "FMPT Poppins"; font-weight: 700; src: url(/assets/fonts/poppins-700.woff2) format("woff2"); }
@font-face { font-family: "FMPT DM Sans"; font-weight: 400; src: url(/assets/fonts/dm-sans-400.woff2) format("woff2"); }
@media print {
    @page { size: A4; margin: 9mm 11mm; }
    .fi2 { height: 277mm; display: flex !important; flex-direction: column; gap: 5.5mm; font-family: "FMPT Poppins", Poppins, Arial, sans-serif; font-size: 9.6pt; line-height: 1.35; color: #111; }
    .fi2 * { box-sizing: border-box; }
    .fi2-entete { display: grid; grid-template-columns: 1fr 24mm; align-items: center; }
    .fi2-entete h2 { margin: 0; text-align: center; font-weight: 700; font-size: 22pt; letter-spacing: .14em; line-height: 1.05; color: #111; }
    .fi2-entete img { width: 24mm; height: auto; }
    .fi2-titre { position: relative; text-align: center; margin: -2mm 0 1mm; }
    .fi2-titre::before { content: ""; position: absolute; left: -11mm; right: -11mm; top: 50%; border-top: 1.2pt solid #c9c3bb; }
    .fi2-pilule { position: relative; display: inline-block; background: #fff; border: 1.2pt solid #a59e94; border-radius: 99px; padding: 1.2mm 8mm; font-weight: 600; letter-spacing: .14em; font-size: 12pt; }
    .fi2-cadre { position: relative; border: 1.2pt solid #a59e94; border-radius: 5mm; padding: 6.5mm 5mm 4mm; }
    .fi2-cadre > .fi2-pilule { position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%); font-size: 9.5pt; padding: .8mm 7mm; white-space: nowrap; }
    .fi2-ligne { display: grid; gap: 3mm; align-items: center; margin-bottom: 2.4mm; }
    .fi2-ligne:last-child { margin-bottom: 0; }
    .fi2-l4 { grid-template-columns: auto 1fr auto 1fr; }
    .fi2-l2 { grid-template-columns: auto 1fr; }
    .fi2-cp { grid-template-columns: auto 30mm auto 1fr; }
    /* Les cases remplies gardent leur forme de pastille, le texte saisi dedans */
    .fi2-champ { border: 1pt solid #a59e94; border-radius: 99px; height: 6.6mm; padding: 0 3.5mm; display: flex; align-items: center; font-weight: 600; overflow: hidden; white-space: nowrap; }
    .fi2-milieu { display: grid; grid-template-columns: 1.45fr 1.2fr; gap: 4mm; }
    .fi2-milieu .fi2-cadre { display: flex; flex-direction: column; }
    .fi2-activites { height: 100%; display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr 1fr; align-content: space-evenly; gap: 1.6mm 2.5mm; list-style: none; margin: 0; padding: 0; font-size: 9pt; }
    .fi2-rond { position: relative; padding-left: 7mm; min-height: 5mm; display: flex; align-items: center; line-height: 1.2; }
    .fi2-rond::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5mm; height: 5mm; border: 1pt solid #8a8279; border-radius: 50%; }
    .fi2-rond.est-coche { font-weight: 600; }
    .fi2-rond.est-coche::before { background: radial-gradient(circle, #111 42%, transparent 46%); }
    .fi2-declaration { text-align: justify; font-size: 8.6pt; line-height: 1.3; padding-top: 4mm; }
    .fi2-declaration p { margin: 0 0 2mm; }
    .fi2-pointilles { display: grid; grid-template-columns: auto 1fr; gap: 2mm; align-items: end; }
    .fi2-l { border-bottom: 1pt dotted #666; min-height: 5mm; padding-left: 1.5mm; font-weight: 600; }
    .fi2-declaration .fi2-fait { margin-top: 3.2mm; }
    .fi2-fin { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 4mm; min-height: 13mm; }
    .fi2-gauche { display: flex; flex-direction: column; }
    .fi2-le { margin-top: 2.5mm; }
    .fi2-declaration .fi2-le { margin-top: .6mm; }
    .fi2-sig { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
    .fi2-declaration .fi2-sig { align-items: flex-start; padding-top: 3.5mm; }
    .fi2-clause { font-family: "FMPT DM Sans", "DM Sans", Arial, sans-serif; font-size: 8.6pt; line-height: 1.5; text-align: justify; padding-top: 4mm; }
    .fi2-clause p { margin: 0 0 1.5mm; }
    .fi2-clause p:last-child { margin: 0; }
    .fi2-bas { flex: 1; display: grid; grid-template-columns: 1fr 1.9fr; gap: 5mm; }
    .fi2-bas .fi2-cadre { display: flex; flex-direction: column; justify-content: space-between; }
    .fi2-adhesion h3 { margin: 0; font-size: 9pt; letter-spacing: .06em; color: #111; }
    .fi2-adhesion ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3mm; }
    .fi2-enfants { justify-content: flex-start !important; gap: 2mm; padding-top: 6mm; }
    .fi2-enfants p { margin: 0; }
    .fi2-enfants .fi2-l { min-height: 5.5mm; }
    .fi2-enfants .fi2-fait { margin-top: 2.6mm; }
    .fi2-enfants .fi2-fin { min-height: 19mm; }
}

/* Étape 146 — validations, comptes, PDF des paramètres */
.actu-statut--a-valider { --accent: var(--orange, #f59e0b); }
.a-valider { border-left: 4px solid #f59e0b; }
.compte__temporaire { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; }
.compte__temporaire label { display: flex; flex-direction: column; font-weight: 600; color: var(--marine); }
.compte__valider { flex-basis: 100%; margin-top: .3rem; }
.parametre-pdf__bouton { position: relative; cursor: pointer; align-self: flex-start; }
.parametre-pdf__bouton input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.parametre-pdf__choisi { color: var(--vert); font-weight: 600; font-size: .9rem; }
/* Aperçu de la fiche d'inscription : on clique pour agrandir */
.apercu-document img { cursor: zoom-in; }
.apercu-document__aide { color: var(--gris); font-size: .8rem; margin-top: -.4rem; }
.parametre-photo__apercu a { display: block; cursor: zoom-in; }
.admin-animateur__niveau { font: inherit; font-size: .85rem; padding: .2rem .4rem; border: 1px solid #cbd5e1; border-radius: .4rem; max-width: 100%; }

/* ------------------------------------------------------------------
   Étape 151 — location : tableau de bord, retards, calendrier, aide
   ------------------------------------------------------------------ */
a.bilan__case { text-decoration: none; color: inherit; }
.etat--retard { background: #fff1d6; color: #8a4b00; }
.retard-alerte { border-left: 4px solid #f59e0b; }
.prochaine-sortie h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.prochaine-sortie p { margin: .2rem 0; }
.calendrier-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.calendrier-locations th, .calendrier-locations td { font-size: .85rem; vertical-align: top; white-space: nowrap; }
.calendrier-locations td small { display: block; white-space: normal; color: var(--gris); max-width: 14rem; }
.calendrier-locations .cal-libre { color: #94a3b8; }
.calendrier-locations .cal-pris { background: #fde6e2; }
.calendrier-locations .cal-pris a { color: #a32a12; font-weight: 600; }
.calendrier-locations .cal-fini { background: #ecedf0; }
.calendrier-locations .cal-fini a { color: #5a6070; }
.calendrier-locations .cal-conflit { outline: 2px solid var(--rouge); outline-offset: -2px; }
.calendrier-locations .cal-weekend th[scope="row"] { color: var(--marine); }
.calendrier-locations .cal-weekend { background: #f8fafc; }
.calendrier-locations .cal-aujourdhui th[scope="row"] { box-shadow: inset 4px 0 0 var(--bleu); }
.cal-legende { display: inline-block; padding: .05rem .5rem; border-radius: .3rem; font-size: .85rem; margin-right: .3rem; }
.cal-legende.cal-pris { background: #fde6e2; color: #a32a12; }
.cal-legende.cal-fini { background: #ecedf0; color: #5a6070; }
.cal-legende.cal-libre { border: 1px solid var(--ligne); color: #64748b; }
.aide-location ol, .aide-location ul { padding-left: 1.2rem; }
.aide-location li { margin: .3rem 0; }
.onglets-admin { overflow-x: auto; flex-wrap: nowrap; }
.onglets-admin a { white-space: nowrap; }
/* Les en-têtes de ligne du calendrier ne prennent pas le style des en-têtes de colonne */
.calendrier-locations tbody th[scope="row"] { border-bottom: 1px solid var(--ligne); text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--texte, #111); font-weight: 600; background: transparent; }
.calendrier-locations tbody td.cal-pris { background: #fde6e2 !important; }
.calendrier-locations tbody td.cal-fini { background: #ecedf0 !important; }
/* Étape 152 — location regroupée : grille des tarifs, aides sous les champs, lien vers le mode d'emploi */
.grille-tarifs input { width: 6.5rem; font: inherit; padding: .3rem .4rem; border: 1px solid #cbd5e1; border-radius: .35rem; }
.grille-tarifs th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--marine); border-bottom: 1px solid var(--ligne); }
.aide-champ { display: block; font-weight: 400; font-size: .78rem; color: var(--gris); margin-top: .2rem; line-height: 1.3; }
.onglets-admin__aide { margin-left: auto; font-weight: 500 !important; color: var(--gris) !important; }
/* Fiches du matériel sur téléphone : photo au-dessus, champs les uns sous les autres (débordait depuis le début) */
@media (max-width: 40rem) {
    .materiel { grid-template-columns: 1fr; grid-template-areas: "photo" "formulaire" "actions"; }
    .materiel__photo img, .materiel__photo > span { width: 100%; max-width: 14rem; margin: 0 auto; }
    .materiel-formulaire { grid-template-columns: 1fr 1fr; }
    .materiel-formulaire__nom, .materiel-formulaire__description, .materiel-formulaire__fin { grid-column: 1 / -1; }
    .materiel-formulaire__dates { grid-column: 1 / -1; }
    .photos-inline__boutons { flex-wrap: wrap; }
}
@media (max-width: 40rem) {
    .materiels, .materiel { min-width: 0; }
    .materiel { grid-template-columns: minmax(0, 1fr); }
    .materiel > * { min-width: 0; }
    .materiel-formulaire { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .materiel-formulaire > * { min-width: 0; }
}

/* Étape 153 — adhésions HelloAsso à vérifier */
.helloasso-verif p { margin: .2rem 0; }
.helloasso-verif__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.helloasso-verif__actions select { font: inherit; padding: .35rem .5rem; border: 1px solid #cbd5e1; border-radius: .4rem; max-width: 100%; }

/* Étape 155 — filtre « refusent les photos » réduit à une icône à bascule */
.filtre-icone { position: relative; }
.filtre-icone input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.filtre-icone:has(input:checked) { background: #fde8e4; color: #b42318; border-color: #f4a493; }
.filtre-icone:has(input:focus-visible) { outline: 2px solid var(--marine); outline-offset: 2px; }

/* Étape 157 — comment la cotisation a été réglée, discret à côté de « À jour » */
.etat--mode { background: #e6f3f6; color: #016b7e; }

/* Étape 160 — éditeur photos : les miniatures s'agrandissent au clic */
.gal-principale > a, .gal-vignette > a { display: block; cursor: zoom-in; }
.gal-principale > a { width: 13rem; margin: 0 auto; }

/* Étape 161 — image de la manifestation dans « Prochaines dates » : choix et aperçu */
.gal-agenda { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ligne); }
.gal-agenda h3 { font-size: 1rem; margin: 0 0 .5rem; color: var(--marine); }
.gal-agenda__choix { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.gal-agenda__autre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }
.gal-agenda__autre > a, .gal-agenda__autre > .gal-vide { display: block; width: 13rem; cursor: zoom-in; }
.gal-agenda__autre img { width: 13rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .5rem; display: block; }
.gal-agenda__autre .gal-vide { aspect-ratio: 16 / 9; height: auto; cursor: default; }
.gal-agenda__autre .conditions { flex-basis: 100%; margin: 0; }
.gal-agenda__titre-apercu { font-size: .85rem; color: var(--gris); margin: 1rem 0 .4rem; }
.agenda.gal-agenda__apercu { grid-template-columns: minmax(0, 36rem); margin: 0; padding: 0; list-style: none; }
.gal-agenda__apercu li { box-shadow: 0 1px 3px rgba(2,25,69,.12); }

/* Étape 164 — réservations : nom clairement cliquable, passage rapide Sortie / Rendue */
.location-lien { font-weight: 600; color: var(--bleu); text-decoration: underline; text-decoration-color: rgba(1,137,161,.35); text-underline-offset: .2em; }
.location-lien:hover { text-decoration-color: currentColor; }
.location-avancer { margin: .35rem 0 0; }
.location-avancer .admin-lien-bouton { font-size: .82rem; padding: 0; white-space: nowrap; }

/* Étape 167 — e-mail long dans la tuile Contact : deux morceaux insécables, coupés au « @ » */
.tuile-contact__email { font-size: .92em; }
.tuile-contact__email > span { white-space: nowrap; }

/* Étape 168 — page L'équipe : bouton « Espace bénévoles » à droite du titre */
.equipe-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.equipe-entete h1 { margin-bottom: 0; }
.equipe-entete__acces { white-space: nowrap; }

/* =====================================================================
   Étape 169 — caisse des manifestations
   ===================================================================== */
.caisse-equipe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.caisse-equipe p { margin: 0; flex: 1 1 20rem; }
.caisse-sessions { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.caisse-session { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--ligne); border-left: 4px solid var(--rouge); border-radius: .5rem; }
.caisse-session > div { flex: 1 1 14rem; }
.caisse-session small { display: block; color: var(--gris); }
.caisse-ouvrir__ligne { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.caisse-ouvrir label, .caisse-produit label, .caisse-emporte label, .caisse__reassort label, .caisse-cloture label { display: grid; gap: .2rem; font-size: .88rem; font-weight: 600; color: var(--gris); }
.caisse-ouvrir input, .caisse-ouvrir select, .caisse-produit input, .caisse-emporte input, .caisse__reassort input, .caisse-cloture input, .caisse-produit__entree input {
    font: inherit; padding: .5rem .7rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; color: var(--texte); }
.caisse-emporte { border: 1px dashed var(--ligne); border-radius: .5rem; margin: 1rem 0; padding: .6rem 1rem 1rem; display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.caisse-emporte legend { font-weight: 700; color: var(--marine); padding: 0 .3rem; }
.caisse-emporte input { width: 6rem; }

.caisse-produits { display: grid; gap: .5rem; }
.caisse-produits__item { background: #fff; border: 1px solid var(--ligne); border-radius: .5rem; padding: .6rem .9rem; }
.caisse-produits__resume { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin: 0; }
.caisse-produits__item details > summary { cursor: pointer; color: var(--bleu); font-weight: 600; font-size: .9rem; margin-top: .3rem; }
.caisse-produit { margin-top: .6rem; }
.caisse-produit__champs { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.caisse-produit__nom { flex: 1 1 12rem; }
.caisse-produit__compo { border: 1px dashed var(--ligne); border-radius: .5rem; margin: .7rem 0 0; padding: .5rem .9rem .8rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.caisse-produit__compo[hidden], .caisse-produit__stock[hidden] { display: none; }
.caisse-produit__compo input { width: 4.5rem; }
.caisse-produit__actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: .7rem; }
.caisse-produit__entree { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--ligne); }
.caisse-produit__entree label { display: grid; gap: .2rem; font-size: .85rem; color: var(--gris); font-weight: 600; }
.caisse-produit__entree input { width: 6rem; }
.caisse-produit--inactif { opacity: .7; }
.caisse-bilan__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 1.25rem; }
.caisse-cloture { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }

/* Écran de vente : plein écran, pensé pour le pouce */
body.plein-ecran { background: #eef2f7; }
body.plein-ecran .contenu { max-width: 64rem; padding: 0 0 1rem; margin: 0 auto; }
.caisse { min-height: 100vh; padding-bottom: 15rem; }
.caisse__entete { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; background: var(--marine); color: #fff; }
.caisse__entete a { color: #fff; text-decoration: none; }
.caisse__retour { font-size: 1.4rem; line-height: 1; padding: .2rem .4rem; }
.caisse__titre { flex: 1; min-width: 0; }
.caisse__titre strong, .caisse__titre small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caisse__titre small { color: #9fb3d6; font-size: .8rem; }
.caisse__bilan { border: 1px solid rgba(255,255,255,.5); border-radius: 2rem; padding: .3rem .8rem; font-size: .9rem; font-weight: 600; }
.caisse__message { margin: .6rem .9rem 0; padding: .55rem .8rem; background: #e8f4e2; color: #3d6a19; border-radius: .5rem; font-weight: 600; }
.caisse__produits { padding: .2rem .9rem; }
.caisse__produits h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); margin: 1rem 0 .4rem; }
.caisse__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .55rem; }
.caisse__produit { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .3rem; min-height: 6rem;
    padding: .7rem .8rem; border: 2px solid transparent; border-radius: .8rem; background: #fff; color: var(--marine); font: inherit; text-align: left; cursor: pointer;
    box-shadow: 0 1px 3px rgba(2,25,69,.12); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.caisse__produit:active { transform: scale(.97); border-color: var(--bleu); }
.caisse__nom { font-weight: 700; line-height: 1.2; }
.caisse__prix { font-size: 1.15rem; font-weight: 700; color: var(--bleu); }
.caisse__reste { font-size: .75rem; color: var(--gris); }
.caisse__produit--epuise { background: #fff5f3; }
.caisse__produit--epuise .caisse__reste { color: #b42318; font-weight: 700; }
.caisse__qte { position: absolute; top: .45rem; right: .45rem; min-width: 1.9rem; padding: .15rem .4rem; border-radius: 1rem; background: var(--rouge); color: #fff; font-weight: 700; font-size: .9rem; text-align: center; }
.caisse__qte[hidden] { display: none; }

.caisse__panier { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: #fff; box-shadow: 0 -4px 16px rgba(2,25,69,.15);
    padding: .6rem .9rem calc(.7rem + env(safe-area-inset-bottom)); max-width: 64rem; margin: 0 auto; border-radius: 1rem 1rem 0 0; }
.caisse__lignes { list-style: none; margin: 0; padding: 0; max-height: 28vh; overflow-y: auto; }
.caisse__lignes li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; border-bottom: 1px solid var(--ligne); }
.caisse__lignes button { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--ligne); background: #f8fafc; font-size: 1.2rem; font-weight: 700; color: var(--marine); cursor: pointer; }
.caisse__ligne-nom { flex: 1; min-width: 0; }
.caisse__ligne-prix { font-weight: 600; white-space: nowrap; }
.caisse__ligne--trop .caisse__ligne-nom { color: #b42318; }
.caisse__total-ligne { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin: .35rem 0; }
.caisse__total { font-size: 1.6rem; color: var(--marine); }
.caisse__vider { margin-right: auto; border: 0; background: none; color: var(--rouge); font: inherit; font-weight: 600; cursor: pointer; }
.caisse__vider[hidden], .caisse__rendu[hidden] { display: none; }
.caisse__rendu { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; font-size: .9rem; color: var(--gris); }
.caisse__rendu button { padding: .35rem .7rem; border: 1px solid var(--ligne); border-radius: 2rem; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.caisse__rendu button[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.caisse__rendu strong { margin-left: auto; color: var(--marine); font-size: 1rem; }
.caisse__modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.caisse__mode { padding: .9rem .5rem; border: 0; border-radius: .7rem; font: inherit; font-weight: 700; font-size: 1.05rem; color: #fff; cursor: pointer; touch-action: manipulation; }
.caisse__mode--especes { background: var(--vert); }
.caisse__mode--carte { background: var(--bleu); }
.caisse__mode--cheque { background: var(--violet); }
.caisse__mode:disabled { background: #cbd5e1; cursor: default; }
.caisse__plus { margin: 1.2rem .9rem; background: #fff; border-radius: .7rem; padding: .7rem .9rem; }
.caisse__plus summary { cursor: pointer; font-weight: 700; color: var(--marine); }
.caisse__ventes { list-style: none; margin: .6rem 0 0; padding: 0; }
.caisse__ventes li { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--ligne); }
.caisse__ventes li > span { flex: 1; }
.caisse__ventes small { display: block; color: var(--gris); }
.caisse__vente--annulee { opacity: .5; text-decoration: line-through; }
.caisse__reassort { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.caisse__reassort p { flex-basis: 100%; margin: 0; }
.caisse__reassort input { width: 6rem; }

/* Étape 170 — caisse : photos des produits, alertes de stock */
.caisse-produits__item { display: flex; gap: 1rem; align-items: flex-start; }
.caisse-produits__corps { flex: 1; min-width: 0; }
.caisse-produits__photo { flex: 0 0 6.5rem; text-align: center; }
.caisse-produits__photo img, .caisse-produits__photo > span { display: grid; place-items: center; width: 6.5rem; aspect-ratio: 1; object-fit: cover; border-radius: .5rem; background: #f1f5f9; color: #cbd5e1; }
.caisse-produits__photo .photos-inline__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .5rem; margin-top: .3rem; font-size: .85rem; }
.caisse-produits__item--bas { border-left: 4px solid var(--jaune); }
.caisse-produits__item--epuise { border-left: 4px solid var(--rouge); }
.caisse__alerte { margin: .6rem .9rem 0; padding: .55rem .8rem; background: #fff4e0; color: #8a4b00; border-radius: .5rem; font-weight: 600; font-size: .92rem; }
.caisse__produit--photo { padding-top: .5rem; }
.caisse__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .5rem; margin-bottom: .2rem; }
.caisse__produit--bas { background: #fff8eb; border-color: var(--jaune); }
.caisse__produit--bas .caisse__reste { color: #8a4b00; font-weight: 700; }
@media (max-width: 30rem) { .caisse-produits__item { flex-direction: column; } .caisse-produits__photo { flex-basis: auto; } }
.caisse__img--vide { display: grid; place-items: center; background: linear-gradient(135deg, #e6f3f6, #f1f5f9); color: var(--bleu); font-size: 1.8rem; font-weight: 700; }
.caisse-produits__photo { flex-basis: 4.5rem; }
.caisse-produits__photo img, .caisse-produits__photo > span { width: 4.5rem; }
.caisse-produits__photo .photos-inline__boutons { flex-direction: column; gap: 0; font-size: .8rem; }
.caisse-produits__photo .photos-inline__boutons .admin-lien-bouton { font-size: .8rem; padding: .1rem 0; }

/* Étape 172 — vendeurs sans compte, téléphones de caisse */
.caisse-vendeur-ajout { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.caisse-vendeur-ajout label { display: grid; gap: .2rem; font-size: .88rem; font-weight: 600; color: var(--gris); }
.caisse-vendeur-ajout input, .caisse-vendeurs__code input { font: inherit; padding: .5rem .7rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.caisse-vendeur-ajout--tous { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ligne); }
.caisse-vendeurs { list-style: none; margin: 0; padding: 0; }
.caisse-vendeurs li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--ligne); }
.caisse-vendeurs li > strong { min-width: 9rem; }
.caisse-vendeurs__code { display: flex; gap: .4rem; align-items: center; }
.caisse-vendeurs__code input { width: 9rem; padding: .35rem .6rem; }
.caisse-vendeurs--inactif { opacity: .6; }
.caisse-vendeurs li > strong a { color: inherit; }
.caisse-vendeurs__ventes { font-size: .9rem; color: var(--bleu); white-space: nowrap; }
.vendeur-ventes h2 small { font-weight: 400; }
.vendeur-ventes__resume { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .8rem; }
.vendeur-ventes__resume a { margin-left: auto; }
.vendeur-ventes .droite { text-align: right; white-space: nowrap; }
.vendeur-ventes--barree td { opacity: .55; }
.direct-maj { color: var(--gris, #5b6478); font-size: .9rem; margin: 0 0 .8rem; }
.direct-totaux { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.direct-total { display: flex; flex-direction: column; min-width: 8.5rem; padding: .6rem .9rem; border-radius: .7rem; background: #fff; box-shadow: inset 0 0 0 1px var(--ligne); }
.direct-total span { font-size: .85rem; color: #5b6478; }
.direct-total strong { font-size: 1.35rem; color: var(--marine); }
.direct-total small { font-size: .8rem; color: #5b6478; }
.direct-total--especes { box-shadow: inset 4px 0 0 var(--vert), inset 0 0 0 1px var(--ligne); }
.direct-total--carte, .direct-total--terminal { box-shadow: inset 4px 0 0 var(--bleu), inset 0 0 0 1px var(--ligne); }
.direct-total--cheque { box-shadow: inset 4px 0 0 var(--violet), inset 0 0 0 1px var(--ligne); }
.direct-total--attente { background: #fff4e5; }
.direct-ventes--attente td { background: #fff8ec; }
.direct-vendeurs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.direct-vendeurs span { background: #fff; border: 1px solid var(--ligne); border-radius: 999px; padding: .2rem .7rem; font-size: .9rem; }
.vendeur-ventes--barree td strong { text-decoration: line-through; }
.caisse-qr__corps { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.caisse-qr__code { width: 15rem; max-width: 100%; aspect-ratio: 1; background: #fff; padding: .4rem; border: 1px solid var(--ligne); border-radius: .6rem; }
.caisse-qr__code svg { width: 100%; height: 100%; display: block; }
.caisse-qr ol { margin: 0 0 .8rem; padding-left: 1.2rem; }
.caisse-appareils { margin-top: 1rem; }
#telephones > .caisse-qr { margin: 1rem 0; padding: 1rem; border: 2px solid var(--rouge); border-radius: .8rem; background: #fff; }
#telephones > .caisse-qr h3 { margin: 0 0 .8rem; }
.caisse-appareil-retirer { display: inline; margin-left: .4rem; }
.caisse-appareil-retirer .admin-lien-bouton { padding: 0; font-size: .85rem; }

.caisse-accueil { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem 1rem; }
.caisse-accueil h1 { color: var(--marine); margin: .3rem 0 .6rem; }
.caisse-accueil__logo { font-size: 3rem; margin: 0; }
.caisse-code { justify-content: flex-start; padding-top: 1.5rem; }
.caisse-code__caisse { margin: 0; color: var(--gris); font-weight: 600; }
.caisse-code__message { margin: 0 0 .8rem; width: 100%; max-width: 26rem; box-sizing: border-box; }
.caisse-code__form { width: 100%; max-width: 26rem; }
.caisse-code__noms { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.caisse-code__nom input { position: absolute; opacity: 0; pointer-events: none; }
.caisse-code__nom span { display: block; padding: .9rem .5rem; border: 2px solid var(--ligne); border-radius: .8rem; background: #fff; font-weight: 700; color: var(--marine); cursor: pointer; }
.caisse-code__nom input:checked + span { border-color: var(--bleu); background: #e6f3f6; }
.caisse-code__nom input:focus-visible + span { outline: 2px solid var(--marine); outline-offset: 2px; }
.caisse-code__saisie { margin-top: 1.2rem; }
.caisse-code__saisie[hidden] { display: none; }
.caisse-code__invite { margin: 0 0 .4rem; font-weight: 600; color: var(--gris); }
.caisse-code__champ { width: 100%; box-sizing: border-box; text-align: center; font-size: 2rem; letter-spacing: .6rem; padding: .5rem; border: 2px solid var(--ligne); border-radius: .8rem; background: #fff; }
.caisse-code__clavier { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .7rem; }
.caisse-code__clavier button { padding: 1rem 0; font: inherit; font-size: 1.5rem; font-weight: 700; color: var(--marine); background: #fff; border: 1px solid var(--ligne); border-radius: .8rem; cursor: pointer; touch-action: manipulation; }
.caisse-code__clavier .caisse-code__ok { background: var(--vert); color: #fff; border-color: var(--vert); }
.caisse__entete form { margin: 0; }
.caisse__entete button.caisse__bilan { background: none; color: #fff; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.caisse-code__message--erreur { background: #fde6e2; color: #a32a12; }

/* Étape 175 — code du téléphone de caisse : le pavé apparaît dès qu'un nom est coché, sans JavaScript */
.caisse-code__form .caisse-code__saisie { display: none; }
.caisse-code__form:has(input[name="vendeur"]:checked) .caisse-code__saisie { display: block; }
.caisse-banniere-admin { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.caisse-banniere-admin img, .caisse-banniere-admin__vide { width: 20rem; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .6rem; background: #f1f5f9; display: grid; place-items: center; color: var(--gris); }
.caisse-code__banniere { width: 100%; max-width: 26rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .8rem; margin-bottom: .8rem; box-shadow: 0 2px 8px rgba(2,25,69,.15); }
.caisse__banniere { display: block; width: 100%; height: 5.5rem; object-fit: cover; }
.caisse__banniere { width: calc(100% - 1.8rem); margin: .6rem .9rem 0; border-radius: .6rem; }

/* Étape 176 — inscription propre à chaque édition */
.edition-inscription { border: 1px solid var(--bordure, #ddd); border-radius: 8px; padding: .75rem 1rem 1rem; margin: 1rem 0; }
.edition-inscription legend { font-weight: 700; padding: 0 .3rem; }
.edition-inscription__modes { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .6rem; }
.edition-inscription__modes .choix { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; }
.edition-inscription__modes small { color: var(--gris, #666); }
.edition-inscription__texte { display: block; margin-bottom: .6rem; }
.edition-inscription__texte textarea { width: 100%; }
.edition-inscription:not(:has(input[value="texte"]:checked)) .edition-inscription__texte { display: none; }
.edition-inscription:has(input[value="aucune"]:checked) .edition-inscription__lien { display: none; }
.edition-inscription__texte textarea { font: inherit; }

/* Étape 178 — mode fantôme (master qui voit l'administration comme un autre compte) */
.bandeau-fantome { position: sticky; top: 0; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1rem; padding: .55rem 1rem; background: #4b2a7a; color: #fff; font-size: .95rem; text-align: center; }
.bandeau-fantome strong { color: #fff; }
.bandeau-fantome__bouton { border: 1px solid #fff; background: transparent; color: #fff; border-radius: 999px; padding: .3rem .9rem; font: inherit; font-weight: 600; cursor: pointer; }
.bandeau-fantome__bouton:hover, .bandeau-fantome__bouton:focus-visible { background: #fff; color: #4b2a7a; }

/* Étape 184 — historique du matériel de location */
.historique-choix select { min-width: 16rem; }
.historique-materiel td { vertical-align: top; }
.historique-materiel small { color: var(--gris, #666); }
.historique-materiel--inactif { opacity: .6; }

/* Étape 186 — statistiques des adhérents */
.stats-saison { display: flex; align-items: flex-end; gap: .5rem; }
.stats-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin: 1rem 0; }
.stats-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.stats-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris, #666); padding: .4rem .5rem; border-bottom: 2px solid var(--bleu-nuit, #0b1f4b); }
.stats-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--bordure, #e3e6ee); vertical-align: middle; }
.stats-table small { color: var(--gris, #666); margin-left: .3rem; }
.stats-table--attention td { color: var(--rouge, #c62828); }
.stats-table__barre { width: 35%; }
.stat-barre { display: block; height: .7rem; background: var(--fond-doux, #eef1f6); border-radius: 999px; overflow: hidden; }
.stat-barre > span { display: block; height: 100%; background: var(--bleu, #0a8aa0); border-radius: 999px; }
.stats-activite { display: inline-flex; align-items: center; gap: .4rem; }
.stats-activite svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 640px) { .stats-table__barre { display: none; } }

/* Étape 187 — mode d'emploi de l'Espace équipe */
.admin-barre__aide { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; font-weight: 700; text-decoration: none; margin-right: .4rem; }
.admin-barre__aide:hover, .admin-barre__aide:focus-visible { background: #fff; color: var(--bleu-nuit, #0b1f4b); }
.aide-lien { margin: -.25rem 0 1rem; color: var(--gris, #666); }
.aide-sommaire { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.aide-sommaire a { padding: .35rem .8rem; border: 1px solid var(--bordure, #d9dde6); border-radius: 999px; text-decoration: none; background: #fff; }
.aide-sommaire a:hover { border-color: var(--bleu, #0a8aa0); }
.aide .element-fiche { margin-bottom: 1rem; scroll-margin-top: 1rem; }
.aide ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.aide li { margin: .45rem 0; line-height: 1.55; }

/* Étape 189 — barre admin sur une ligne : un seul menu à droite (compte, aide, réglages, déconnexion) */
.admin-barre__compte-menu { margin-left: auto; flex: none; }
.admin-barre__compte-menu summary::after { content: none; }
.admin-barre__avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
                       background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); color: #fff; font-weight: 700; }
.admin-barre__compte-menu summary:hover .admin-barre__avatar, .admin-barre__compte-menu[open] .admin-barre__avatar,
.admin-barre__compte-menu summary:focus-visible .admin-barre__avatar { background: #fff; color: var(--marine); }
.admin-barre__sous-menu--droite { left: auto; right: 0; min-width: 14rem; }
.admin-barre__qui { padding: .45rem .7rem .55rem; color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.15); margin-bottom: .25rem; }
.admin-barre__groupe { padding: .6rem .7rem .2rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #8fa3c4; border-top: 1px solid rgba(255,255,255,.15); margin-top: .25rem; }
.admin-barre__sortie { border-top: 1px solid rgba(255,255,255,.15); margin-top: .25rem !important; padding-top: .25rem; }
.admin-barre__sortie button { display: flex; align-items: center; gap: .5rem; width: 100%; background: none; border: 0; color: #ffb4a8; font: inherit; padding: .45rem .7rem; border-radius: .35rem; cursor: pointer; text-align: left; }
.admin-barre__sortie button:hover { background: var(--rouge); color: #fff; }
.admin-barre__sortie .icone { width: 1rem; height: 1rem; }

/* Étape 190 — billetterie HelloAsso (manifestation, bilan de caisse) */
.billetterie { margin: 1rem 0; padding: 1rem; border: 1px solid var(--bordure, #e3e6ee); border-radius: .6rem; background: #fff; }
.billetterie__entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.billetterie__entete h3 { margin: 0; }
.billetterie__tarifs { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.billetterie__tarifs small { color: var(--gris, #666); }
.billetterie__liste summary { cursor: pointer; font-weight: 600; margin: .5rem 0; }
.caisse-total-jour { font-size: 1.05rem; }
.caisse-total-jour small { color: var(--gris, #666); }
.caisse-lien-helloasso summary { cursor: pointer; color: var(--bleu, #0a8aa0); margin-top: .5rem; }
.caisse-ouvrir__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; margin-top: .75rem; }

/* Étape 193 — pointage des arrivées (billetterie HelloAsso) */
.billetterie__case input { width: 1.4rem; height: 1.4rem; cursor: pointer; accent-color: var(--vert, #4a8a1f); }
.billetterie__qui { display: block; color: var(--gris, #666); font-size: .75rem; }
.billetterie--arrive td { background: rgba(74, 138, 31, .08); }
.billetterie--arrive td strong { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
/* Téléphone : pointage des arrivées, sans montants */
.arrivees__recherche input { width: 100%; padding: .7rem .9rem; font-size: 1.05rem; border: 1px solid var(--bordure, #d9dde6); border-radius: .6rem; margin: .5rem 0; }
.arrivees__liste { list-style: none; margin: 0; padding: 0; }
.arrivees__liste li { border-bottom: 1px solid var(--bordure, #e3e6ee); }
.arrivees__liste label { display: flex; align-items: center; gap: .9rem; padding: .75rem .25rem; cursor: pointer; }
.arrivees__liste input { width: 1.8rem; height: 1.8rem; flex: none; accent-color: var(--vert, #4a8a1f); }
.arrivees__liste small { color: var(--gris, #666); }
.arrivees__liste li.billetterie--arrive { background: rgba(74, 138, 31, .08); }
.arrivees__lu { color: var(--gris, #666); font-size: .85rem; text-align: center; margin: 1rem 0; }

/* Étape 193 — « Déjà sur HelloAsso » : bouton sur la ligne d'« Ouvrir la caisse », détail en dessous */
.caisse-helloasso-bouton { display: inline-flex; align-items: center; padding: .55rem 1rem; border: 1px solid var(--bleu, #0a8aa0); border-radius: 999px; color: var(--bleu, #0a8aa0); font-weight: 600; cursor: pointer; }
.caisse-helloasso-bouton:hover, .caisse-helloasso-bouton:has(:checked) { background: var(--bleu, #0a8aa0); color: #fff; }
.caisse-helloasso-bascule { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.caisse-helloasso-bouton:has(:focus-visible) { outline: 2px solid var(--bleu, #0a8aa0); outline-offset: 2px; }
.caisse-helloasso-apercu { display: none; }

/* Étape 194 — formulaire « Ouvrir une caisse » : nom extensible, jour et fond compacts, HelloAsso à droite */
.caisse-ouvrir__ligne { flex-wrap: nowrap; }
.caisse-ouvrir__ligne .co-manif { flex: 0 1 auto; min-width: 12rem; }
.caisse-ouvrir__ligne .co-nom { flex: 1 1 12rem; min-width: 10rem; }
.caisse-ouvrir__ligne .co-jour { flex: 0 0 auto; }
.caisse-ouvrir__ligne .co-fond { flex: 0 0 8rem; }
.caisse-ouvrir__ligne label input, .caisse-ouvrir__ligne label select { width: 100%; box-sizing: border-box; }
.caisse-ouvrir__ligne .co-nom small { font-weight: 400; }
.caisse-ouvrir__actions { align-items: center; }
.caisse-ouvrir__actions .caisse-helloasso-bouton:first-of-type { margin-left: auto; }
@media (max-width: 52rem) {
    .caisse-ouvrir__ligne { flex-wrap: wrap; }
    .caisse-ouvrir__ligne .co-manif, .caisse-ouvrir__ligne .co-nom { flex: 1 1 100%; }
    .caisse-ouvrir__ligne .co-jour, .caisse-ouvrir__ligne .co-fond { flex: 1 1 8rem; }
}
.caisse-ouvrir__ligne label input, .caisse-ouvrir__ligne label select { height: 2.6rem; }

/* Étape 195 — téléphone de caisse sans vendeur : bouton visiblement grisé, explication à côté */
.bouton:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.caisse-sans-vendeur { margin-left: .75rem; color: var(--rouge, #c62828); font-weight: 600; }
.caisse-retour-tel { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

/* Animateurs : boutons photo alignés sous le nom, photo cliquable */
.admin-animateur__photo { justify-content: flex-start; margin-top: .3rem; }
.admin-animateur .avatar a { display: block; width: 100%; height: 100%; cursor: zoom-in; }

/* Caisse : paiements par carte envoyés au terminal SumUp */
.caisse__modes { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
.caisse__mode--terminal { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caisse__mode--ouvert { box-shadow: inset 0 0 0 3px rgba(255,255,255,.7); }
.caisse__choix-carte { grid-column: 1 / -1; display: grid; gap: .4rem; padding: .6rem; border-radius: .7rem; background: #eef4fb; box-shadow: inset 0 0 0 2px var(--bleu); }
.caisse__choix-carte[hidden] { display: none; }
.caisse__choix-titre { margin: 0 0 .1rem; font-weight: 700; color: var(--marine); font-size: .95rem; }
.caisse__choix { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; padding: .7rem .8rem; border: 0; border-radius: .6rem; background: var(--bleu); color: #fff; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.caisse__choix strong { font-size: 1.02rem; }
.caisse__choix small { font-size: .82rem; opacity: .85; }
.caisse__choix--manuel { background: #fff; color: var(--bleu); box-shadow: inset 0 0 0 2px var(--bleu); }
.caisse__choix:disabled { background: #cbd5e1; color: #fff; box-shadow: none; cursor: default; }
.caisse__paiements { margin: .6rem .9rem 0; display: grid; gap: .5rem; }
.caisse-paiement { padding: .6rem .8rem; border-radius: .6rem; background: #eef6fb; border-left: 4px solid var(--bleu); }
.caisse-paiement--echoue { background: #fde6e2; border-left-color: #c0391b; }
.caisse-paiement--ok { background: #e8f4e2; border-left-color: var(--vert); }
.caisse-paiement__texte { margin: 0; font-weight: 600; }
.caisse-paiement--attente .caisse-paiement__icone { display: inline-block; animation: caisse-sablier 1.6s linear infinite; }
@keyframes caisse-sablier { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .caisse-paiement--attente .caisse-paiement__icone { animation: none; } }
.caisse-paiement__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .4rem; }
.caisse-paiement__autre summary { cursor: pointer; font-size: .9rem; color: var(--marine); }
.caisse-paiement__autre[open] { flex-basis: 100%; }
.caisse-paiement__autre button { margin: .35rem .35rem 0 0; padding: .5rem .8rem; border: 1px solid var(--ligne); border-radius: .5rem; background: #fff; font: inherit; font-size: .9rem; cursor: pointer; }
.caisse-paiement__autre .caisse-paiement__annuler { color: #a32a12; border-color: #f0b4a8; }
.terminal-ajout { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin-top: 1rem; }
.terminal-ajout label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .9rem; min-width: min(100%, 18rem); }

.terminal-lien__qui { margin: 0 0 .8rem; }
.terminal-lien__code { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.terminal-lien__etiquette { margin: 0; padding: .3rem .8rem; border-radius: .4rem; background: var(--marine); color: #fff; font-weight: 700; font-size: 1.05rem; text-align: center; }
.terminal-nom { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.terminal-nom input[name="nom"] { font: inherit; font-weight: 600; padding: .3rem .5rem; border: 1px solid var(--ligne); border-radius: .4rem; width: min(100%, 14rem); }
.terminal-actions { display: flex; flex-wrap: wrap; gap: .3rem .8rem; justify-content: flex-end; }

/* Adhérents : barre des initiales et suggestions pendant la frappe */
.lettres-adherents { display: flex; flex-wrap: nowrap; gap: .2rem; margin: .8rem 0; overflow-x: auto; scrollbar-width: thin; }
.lettres-adherents a { flex: 1 0 auto; min-width: 1.6rem; padding: .3rem .15rem; border: 1px solid var(--ligne); border-radius: .4rem; background: #fff; text-align: center; text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--marine); }
.lettres-adherents a:first-child { padding: .3rem .5rem; }
.lettres-adherents a[aria-current] { background: var(--marine); border-color: var(--marine); color: #fff; }
.filtres-adherents__recherche { position: relative; }
.suggestions-adherents { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; min-width: 16rem; margin: .2rem 0 0; padding: .3rem 0; list-style: none; background: #fff; border: 1px solid var(--ligne); border-radius: .5rem; box-shadow: 0 8px 24px rgba(2, 25, 69, .15); max-height: 22rem; overflow-y: auto; }
.suggestions-adherents a { display: flex; justify-content: space-between; gap: .8rem; padding: .45rem .8rem; text-decoration: none; color: inherit; font-weight: 400; }
.suggestions-adherents a:hover, .suggestions-adherents a.est-actif { background: #eef4fb; }
.suggestions-adherents small { color: var(--gris, #5b6478); white-space: nowrap; }
.suggestions-adherents .ancien strong { opacity: .6; }

/* Animateurs : rond des initiales cliquable (ajouter une photo) */
.avatar--cliquable { cursor: pointer; transition: box-shadow .15s; }
.avatar--cliquable:hover, .avatar--cliquable:focus-visible { box-shadow: 0 0 0 3px var(--bleu); outline: none; }

/* Étape 216 — Audience du site */
.audience-periodes { display: flex; flex-wrap: wrap; gap: .4rem; }
.audience-periodes a { padding: .35rem .8rem; border: 1px solid var(--ligne); border-radius: 999px; background: #fff; color: var(--marine); text-decoration: none; font-size: .9rem; }
.audience-periodes a.est-actif { background: var(--marine); border-color: var(--marine); color: #fff; }
.audience-evolution { font-size: .8rem; font-weight: 600; margin-left: .3rem; }
.audience-evolution--hausse { color: var(--vert); }
.audience-evolution--baisse { color: var(--rouge); }
.audience-courbe { display: flex; align-items: stretch; gap: 3px; height: 13rem; }
.audience-courbe__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.audience-courbe__zone { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; justify-content: center; padding-top: 1rem; }
.audience-courbe__barre { position: relative; display: block; width: 100%; max-width: 3rem; background: var(--bleu); border-radius: .25rem .25rem 0 0; }
.audience-courbe__col--weekend .audience-courbe__barre { background: color-mix(in srgb, var(--bleu) 65%, #fff); }
.audience-courbe__col:hover .audience-courbe__barre { background: var(--marine); }
.audience-courbe__valeur { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--gris); line-height: 1.4; white-space: nowrap; }
.audience-courbe__date { height: 1.4rem; font-size: .72rem; color: var(--gris); white-space: nowrap; line-height: 1.4rem; border-top: 1px solid var(--ligne); width: 100%; text-align: center; overflow: visible; }
.audience-courbe--30 .audience-courbe__valeur { display: none; }
.audience-courbe--30 .audience-courbe__col:hover .audience-courbe__valeur { display: block; }
.audience-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.audience-sources__ligne { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.audience-sources small { color: var(--gris); }
.audience-sources__ligne > span:first-child small { display: block; font-size: .78rem; line-height: 1.3; }
.audience-sources__ligne > span:last-child { white-space: nowrap; }
.audience-sources__detail { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0 0; }
.audience-sources__detail span { font-size: .8rem; background: var(--fond); border: 1px solid var(--ligne); border-radius: 999px; padding: .05rem .55rem; }
.audience-sous-titre { margin-top: 1.5rem; }
.audience-heures { display: flex; align-items: stretch; gap: 2px; height: 6rem; }
.audience-heures div { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; }
.audience-heures span { display: block; background: var(--violet); border-radius: 2px 2px 0 0; min-height: 1px; }
.audience-heures small { height: 1.2rem; font-size: .68rem; color: var(--gris); border-top: 1px solid var(--ligne); line-height: 1.2rem; white-space: nowrap; }
.audience-vie-privee p { max-width: 50rem; }
@media (max-width: 640px) {
    .audience-courbe { height: 10rem; gap: 2px; }
    .audience-courbe--30 .audience-courbe__date { font-size: .62rem; }
}

/* Étape 218 — Le Duel (ping-pong Razvan / Nico) */
.duel { max-width: 48rem; margin: 0 auto; }
.duel__titre { text-align: center; }
.duel__tableau { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem 1rem; border-radius: 1rem; color: #fff;
    background: linear-gradient(135deg, #002b7f 0 33%, #fcd116 33% 34%, #ce1126 34% 50%, #ce1126 50% 51%, #ffffff 51% 52%, #002395 52% 67%, #fff 67% 68%, #ed2939 68%); box-shadow: var(--ombre-carte); }
.duel__joueur { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .8rem .5rem; border-radius: .8rem; background: rgba(2, 25, 69, .82); }
.duel__joueur--devant { outline: 3px solid var(--jaune); }
.duel__joueur--devant .duel__nom::after { content: " 👑"; }
.duel__drapeau { font-size: 2rem; line-height: 1; }
.duel__nom { font-weight: 700; font-size: 1.1rem; }
.duel__hexa { color: var(--jaune); }
.duel__score { font-size: 3.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.duel__joueur small { color: #c8d3ea; }
.duel__contre { font-size: 2rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.duel__jauge { height: .6rem; margin: .8rem 0 .4rem; border-radius: 999px; background: #002395; overflow: hidden; }
.duel__jauge span { display: block; height: 100%; background: linear-gradient(90deg, #002b7f, #fcd116, #ce1126); }
.duel__phrase { text-align: center; font-weight: 600; color: var(--marine); }
.duel__bilan { justify-content: center; }
.duel__forme span { margin-left: .1rem; }
.duel__formulaire { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1rem; }
.duel__formulaire label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; color: var(--marine); }
.duel__formulaire input, .duel__formulaire select { font: inherit; padding: .5rem .6rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
.duel__formulaire select { font-size: 1.3rem; min-width: 4rem; }
.duel__sets { display: flex; align-items: flex-end; gap: .6rem; }
.duel__sets > span { font-size: 1.5rem; font-weight: 700; padding-bottom: .4rem; }
.duel__commentaire { flex: 1 1 100%; min-width: 0; }
.duel__commentaire input { width: 100%; box-sizing: border-box; }
.duel__nowrap { white-space: nowrap; }
.duel__historique { list-style: none; margin: 0; padding: 0; }
.duel__historique li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; padding: .55rem 0; border-bottom: 1px solid var(--ligne); }
.duel__date { min-width: 4.5rem; color: var(--gris); font-size: .9rem; }
.duel__note { flex: 1 1 100%; color: var(--gris); font-style: italic; font-size: .9rem; padding-left: 5.3rem; }
.duel__annuler { margin-top: .8rem; text-align: right; }
@media (max-width: 640px) {
    .duel__tableau { gap: .4rem; padding: 1rem .5rem; }
    .duel__score { font-size: 2.6rem; }
    .duel__note { padding-left: 0; }
}
/* Drapeaux en CSS (les drapeaux emoji ne s'affichent pas sous Windows) */
.drapeau { display: inline-block; width: 1.5em; height: 1em; vertical-align: -.12em; border-radius: .15em; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.drapeau--ro { background: linear-gradient(90deg, #002b7f 0 33.34%, #fcd116 33.34% 66.67%, #ce1126 66.67%); }
.drapeau--fr { background: linear-gradient(90deg, #002395 0 33.34%, #fff 33.34% 66.67%, #ed2939 66.67%); }
.duel__drapeau .drapeau { width: 3rem; height: 2rem; }
.duel__forme .drapeau { width: 1.2em; height: .8em; }