/* ==========================================================================
   ARC — Association des Rolistes Céretans
   Feuille de style principale
   Révision A — 2026-10-17
   --------------------------------------------------------------------------
   SOMMAIRE
   1.  Variables (couleurs, typographie, espacements)
   2.  Base et remise à zéro
   3.  Utilitaires et mise en page
   4.  En-tête et navigation
   5.  Pied de page
   6.  Composants (boutons, cartes, badges, formulaires)
   7.  Bannière d'accueil (hero) et dé 20
   8.  Agenda, séances et présences
   9.  Événements, tables, chroniques, galerie
   10. Panneau d'administration
   11. Responsive (mobile et tablette)
   ========================================================================== */

/* ===== 1. VARIABLES ====================================================== */
:root {
  /* Couleurs extraites du logo */
  --noir:        #0B0D11;
  --noir-profond:#07080B;
  --surface:     #13161D;
  --surface-2:   #1A1E27;
  --surface-3:   #232834;
  --bordure:     #2C3240;

  --or:          #C9A96E;   /* or clair du lettrage ARC */
  --or-vif:      #E3C68C;
  --or-sombre:   #8A6A42;
  --bronze:      #594839;
  --parchemin:   #E8DCC8;

  --texte:       #DCDFE6;
  --texte-doux:  #959BA8;
  --texte-faible:#6B7280;

  --succes:      #4F9D69;
  --attente:     #C9A227;
  --absent:      #9B4A4A;
  --info:        #5B8DB8;

  /* Typographie */
  --police-titre: 'Cinzel', Georgia, 'Times New Roman', serif;
  --police-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Mesures */
  --largeur-max: 1180px;
  --rayon:   10px;
  --rayon-s: 6px;
  --ombre:   0 10px 30px rgba(0, 0, 0, .45);
  --ombre-s: 0 4px 14px rgba(0, 0, 0, .3);
  --transition: 180ms ease;
}

/* ===== 2. BASE =========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--noir);
  background-image:
    radial-gradient(1100px 620px at 50% -10%, rgba(201, 169, 110, .10), transparent 65%),
    radial-gradient(760px 520px at 100% 100%, rgba(89, 72, 57, .14), transparent 70%);
  background-attachment: fixed;
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.22;
  color: var(--parchemin);
  margin: 0 0 .6em;
  letter-spacing: .01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--or); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--or-vif); }

img { max-width: 100%; display: block; }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bordure), transparent);
  margin: 2.5rem 0;
}

:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ===== 3. UTILITAIRES ==================================================== */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 72px 0; }
.section--serre { padding: 44px 0; }

.section-titre { text-align: center; margin-bottom: 2.6rem; }
.section-titre h2 { margin-bottom: .35rem; }
.section-titre p { color: var(--texte-doux); max-width: 640px; margin: 0 auto; }

/* Filet décoratif sous les titres de section */
.filet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 1.6rem;
  max-width: 260px;
  color: var(--or-sombre);
}
.filet::before, .filet::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--or-sombre));
}
.filet::after { background: linear-gradient(90deg, var(--or-sombre), transparent); }
.filet span { font-size: .8rem; letter-spacing: .3em; }

.grille { display: grid; gap: 22px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
.grille--auto { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.centre { text-align: center; }
.sourdine { color: var(--texte-doux); }
.petit { font-size: .875rem; }
.tres-petit { font-size: .8rem; }
.gras { font-weight: 600; }
.majuscules { text-transform: uppercase; letter-spacing: .12em; }
.cache { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .6rem; }
.mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0 !important; }
.pile { display: flex; flex-wrap: wrap; gap: 12px; }
.pile--centre { justify-content: center; }
.pile--entre { justify-content: space-between; align-items: center; }

/* ===== 4. EN-TÊTE ======================================================== */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 13, 17, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordure);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
}

.marque { display: flex; align-items: center; gap: 13px; }
.marque img { width: 48px; height: 48px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.marque__texte { display: flex; flex-direction: column; line-height: 1.12; }
.marque__sigle {
  font-family: var(--police-titre);
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--or);
  letter-spacing: .06em;
}
.marque__nom {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--texte-doux);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 13px;
  border-radius: var(--rayon-s);
  color: var(--texte-doux);
  font-size: .9rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.nav a:hover { color: var(--parchemin); background: rgba(201,169,110,.09); }
.nav a.actif { color: var(--or); background: rgba(201,169,110,.13); }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  color: var(--parchemin);
  width: 44px; height: 44px;
  cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.burger:hover { border-color: var(--or-sombre); }

/* ===== 5. PIED DE PAGE =================================================== */
.pied {
  flex-shrink: 0;
  margin-top: 56px;
  background: var(--noir-profond);
  border-top: 1px solid var(--bordure);
  /* 64 px en bas : marge de sécurité pour les éléments flottants
     que certains navigateurs ou hébergeurs posent dans les coins. */
  padding: 50px 0 64px;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 34px;
  margin-bottom: 34px;
}
.pied h4 {
  font-family: var(--police-texte);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--or);
  margin-bottom: 1rem;
}
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .5rem; }
.pied a { color: var(--texte-doux); font-size: .9rem; }
.pied a:hover { color: var(--or); }

/* Réseaux sociaux du pied de page : icône dorée + nom */
.reseau { display: inline-flex; align-items: center; gap: 10px; }
.reseau__icone {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--or-sombre);
  transition: color var(--transition), transform var(--transition);
}
.reseau:hover .reseau__icone,
.reseau:focus-visible .reseau__icone { color: var(--or-vif); transform: scale(1.12); }
.pied__bas {
  border-top: 1px solid var(--bordure);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .82rem;
  color: var(--texte-faible);
}

/* Page Contact : solutions de secours si l'envoi direct échoue */
.repli-contact {
  margin-top: 20px; padding: 16px 18px;
  border: 1px dashed var(--or-sombre); border-radius: 8px;
  background: rgba(201, 169, 110, .05);
}
.repli-contact__boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* ===== 6. COMPOSANTS ===================================================== */

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--rayon-s);
  font-family: var(--police-texte);
  font-size: .93rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  line-height: 1.3;
}
.btn--or {
  background: linear-gradient(180deg, var(--or-vif), var(--or));
  color: #22190C;
  border-color: var(--or-sombre);
  box-shadow: 0 2px 12px rgba(201,169,110,.2);
}
.btn--or:hover {
  background: linear-gradient(180deg, #F0D7A3, var(--or-vif));
  color: #22190C;
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(201,169,110,.3);
}
.btn--fantome {
  background: transparent;
  color: var(--or);
  border-color: var(--or-sombre);
}
.btn--fantome:hover { background: rgba(201,169,110,.1); color: var(--or-vif); border-color: var(--or); }
.btn--sombre {
  background: var(--surface-2);
  color: var(--texte);
  border-color: var(--bordure);
}
.btn--sombre:hover { background: var(--surface-3); color: var(--parchemin); }
.btn--danger { background: transparent; color: #D98080; border-color: #6B3434; }
.btn--danger:hover { background: rgba(155,74,74,.15); color: #F0A0A0; }
.btn--petit { padding: 7px 14px; font-size: .82rem; }
.btn--large { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

/* --- Cartes --- */
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 24px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}
.carte--lien:hover {
  border-color: var(--or-sombre);
  transform: translateY(-3px);
  box-shadow: var(--ombre);
}
.carte__media {
  margin: -24px -24px 18px;
  aspect-ratio: 1 / 1;
  overflow: contain;
  background: var(--surface-2);
}
.carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.carte--lien:hover .carte__media img { transform: scale(1.05); }
.carte__titre { margin-bottom: .45rem; }
.carte__meta { font-size: .84rem; color: var(--texte-doux); margin-bottom: .8rem; }

/* Liseré doré en haut de carte */
.carte--ornee::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--or-sombre) 35%, var(--or) 50%, var(--or-sombre) 65%, transparent);
  opacity: .75;
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid;
  white-space: nowrap;
}
.badge--or      { background: rgba(201,169,110,.12); color: var(--or);     border-color: rgba(201,169,110,.35); }
.badge--succes  { background: rgba(79,157,105,.13);  color: #7BC994;       border-color: rgba(79,157,105,.35); }
.badge--attente { background: rgba(201,162,39,.12);  color: #DDBE57;       border-color: rgba(201,162,39,.35); }
.badge--absent  { background: rgba(155,74,74,.13);   color: #D98080;       border-color: rgba(155,74,74,.35); }
.badge--info    { background: rgba(91,141,184,.12);  color: #86B4D8;       border-color: rgba(91,141,184,.35); }
.badge--neutre  { background: var(--surface-2);      color: var(--texte-doux); border-color: var(--bordure); }

/* --- Formulaires --- */
.champ { margin-bottom: 18px; }
.champ label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--texte-doux);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.champ__aide { font-size: .78rem; color: var(--texte-faible); margin-top: 5px; }

input[type=text], input[type=email], input[type=date], input[type=time],
input[type=number], input[type=password], input[type=url], select, textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--noir-profond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: .94rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--or-sombre);
  box-shadow: 0 0 0 3px rgba(201,169,110,.12);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
select { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--texte-faible); }

/* --- Alertes --- */
.alerte {
  padding: 14px 18px;
  border-radius: var(--rayon-s);
  border-left: 3px solid;
  margin-bottom: 18px;
  font-size: .9rem;
}
.alerte--info    { background: rgba(91,141,184,.1);  border-color: var(--info); }
.alerte--succes  { background: rgba(79,157,105,.1);  border-color: var(--succes); }
.alerte--attention { background: rgba(201,162,39,.1); border-color: var(--attente); }
.alerte--erreur  { background: rgba(155,74,74,.1);   border-color: var(--absent); }

/* --- Vide (aucune donnée) --- */
.vide {
  text-align: center;
  padding: 50px 24px;
  color: var(--texte-faible);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  background: rgba(19,22,29,.4);
}
.vide__icone { font-size: 2.4rem; opacity: .35; margin-bottom: .6rem; }

/* --- Fenêtre modale --- */
.modale {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(5,6,9,.82);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.modale__boite {
  background: var(--surface);
  border: 1px solid var(--or-sombre);
  border-radius: var(--rayon);
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--ombre);
}
.modale__entete {
  padding: 20px 24px;
  border-bottom: 1px solid var(--bordure);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.modale__entete h3 { margin: 0; }
.modale__corps { padding: 24px; }
.modale__pied {
  padding: 16px 24px;
  border-top: 1px solid var(--bordure);
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.modale__fermer {
  background: none; border: none; color: var(--texte-doux);
  font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 0 4px;
}
.modale__fermer:hover { color: var(--parchemin); }

/* ===== 7. BANNIÈRE D'ACCUEIL ============================================= */
.hero {
  position: relative;
  padding: 80px 0 64px;
  overflow: hidden;
  text-align: center;
}
.hero::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(620px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or-sombre), transparent);
}
.hero__logo {
  width: clamp(170px, 26vw, 250px);
  margin: 0 auto 26px;
  filter: drop-shadow(0 12px 36px rgba(0,0,0,.7));
  animation: apparition 900ms ease both;
}
@keyframes apparition {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.hero h1 {
  margin-bottom: .3rem;
  background: linear-gradient(180deg, var(--parchemin), var(--or));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__accroche {
  font-size: clamp(1rem, 2vw, 1.17rem);
  color: var(--texte-doux);
  max-width: 660px;
  margin: 0 auto 32px;
}
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* --- Dé 20 interactif --- */
.de20 {
  --taille: 78px;
  width: var(--taille); height: var(--taille);
  margin: 34px auto 0;
  position: relative;
  cursor: pointer;
  background: none; border: none; padding: 0;
  transition: transform var(--transition);
}
.de20:hover { transform: scale(1.07); }
.de20:active { transform: scale(.95); }
.de20 svg { width: 100%; height: 100%; overflow: visible; }
.de20__forme {
  fill: var(--surface-2);
  stroke: var(--or-sombre);
  stroke-width: 2;
  transition: fill var(--transition), stroke var(--transition);
}
.de20:hover .de20__forme { fill: var(--surface-3); stroke: var(--or); }
.de20__arete { stroke: var(--bronze); stroke-width: 1; fill: none; opacity: .75; }
.de20__valeur {
  fill: var(--or);
  font-family: var(--police-titre);
  font-size: 30px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
.de20.lance { animation: roulis 700ms cubic-bezier(.3,.9,.3,1); }
@keyframes roulis {
  0%   { transform: rotate(0)      scale(1); }
  35%  { transform: rotate(220deg) scale(1.14); }
  70%  { transform: rotate(390deg) scale(.95); }
  100% { transform: rotate(360deg) scale(1); }
}
.de20__legende {
  text-align: center;
  font-size: .78rem;
  color: var(--texte-faible);
  margin-top: 10px;
  min-height: 1.3em;
}
.de20.critique .de20__forme { stroke: var(--succes); fill: rgba(79,157,105,.14); }
.de20.critique .de20__valeur { fill: #7BC994; }
.de20.echec .de20__forme { stroke: var(--absent); fill: rgba(155,74,74,.14); }
.de20.echec .de20__valeur { fill: #D98080; }

/* --- Compte à rebours --- */
.rebours { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 20px 0 6px; }
.rebours__bloc {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  padding: 11px 16px;
  min-width: 74px;
  text-align: center;
}
.rebours__nombre {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--or);
  line-height: 1.1;
}
.rebours__unite {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--texte-faible);
}

/* --- Chiffres clés --- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.chiffre { text-align: center; padding: 22px 14px; }
.chiffre__nombre {
  display: block;
  font-family: var(--police-titre);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--or);
  line-height: 1;
}
.chiffre__libelle {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--texte-doux);
  margin-top: 7px;
}

/* ===== 8. AGENDA ET PRÉSENCES ============================================ */
.seance {
  display: grid;
  grid-template-columns: 94px 1fr auto;
  gap: 22px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 20px 22px;
  margin-bottom: 14px;
  transition: border-color var(--transition);
}
.seance:hover { border-color: var(--or-sombre); }
.seance--passee { opacity: .52; }
.seance--complete { border-color: rgba(201,162,39,.35); }
.seance--annulee { opacity: .6; border-color: rgba(155,74,74,.4); }
.seance--annulee .seance__titre { text-decoration: line-through; }

.seance__date {
  text-align: center;
  background: var(--noir-profond);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  padding: 10px 6px;
}
.seance__jour-sem {
  display: block; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--texte-faible);
}
.seance__jour {
  display: block; font-family: var(--police-titre);
  font-size: 1.85rem; font-weight: 700; color: var(--or); line-height: 1.12;
}
.seance__mois {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texte-doux);
}

.seance__corps { min-width: 0; }
.seance__titre { font-family: var(--police-titre); font-size: 1.12rem; color: var(--parchemin); margin: 0 0 .3rem; }
.seance__infos {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: .85rem; color: var(--texte-doux); margin-bottom: .6rem;
}
.seance__infos span { display: inline-flex; align-items: center; gap: 5px; }
.seance__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 206px; }

/* Jauge de places */
.jauge { margin-top: 10px; max-width: 320px; }
.jauge__barre {
  height: 6px; background: var(--noir-profond);
  border-radius: 999px; overflow: hidden; border: 1px solid var(--bordure);
}
.jauge__remplissage {
  height: 100%;
  background: linear-gradient(90deg, var(--or-sombre), var(--or));
  border-radius: 999px;
  transition: width 400ms ease;
}
.jauge--pleine .jauge__remplissage { background: linear-gradient(90deg, #7E6A2A, var(--attente)); }
.jauge__texte {
  display: flex; justify-content: space-between;
  font-size: .76rem; color: var(--texte-faible); margin-top: 5px;
}

/* Liste des participants */
.participants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 3px 11px 3px 4px;
  font-size: .8rem;
  color: var(--texte-doux);
}
.pastille__init {
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--bronze); color: var(--parchemin);
  display: grid; place-items: center;
  font-size: .66rem; font-weight: 700;
  flex-shrink: 0;
}
.pastille--present .pastille__init { background: var(--succes); color: #07140C; }
.pastille--peutetre .pastille__init { background: var(--attente); color: #1C1704; }
.pastille--absent  .pastille__init { background: var(--absent);  color: #1C0808; }
/* Liste d'attente (séance complète) */
.pastille--attente { border-style: dashed; }
.pastille--attente .pastille__init { background: var(--info); color: #06121C; }
.participants--attente { align-items: center; margin-top: 8px; }
.participants__titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-faible); margin-right: 4px; }
.attente-info { font-size: .8rem; color: var(--texte-doux); margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--info); background: var(--surface-2); border-radius: 0 6px 6px 0; }

/* Boutons de réponse de présence */
.reponses { display: flex; gap: 6px; }
.reponses .btn { flex: 1; padding: 8px 5px; font-size: .76rem; white-space: nowrap; }
.reponses .btn.choisi[data-reponse=present]  { background: rgba(79,157,105,.2);  border-color: var(--succes);  color: #7BC994; }
.reponses .btn.choisi[data-reponse=peutetre] { background: rgba(201,162,39,.2);  border-color: var(--attente); color: #DDBE57; }
.reponses .btn.choisi[data-reponse=absent]   { background: rgba(155,74,74,.2);   border-color: var(--absent);  color: #D98080; }
.reponses .btn.choisi.en-attente[data-reponse=present] { background: rgba(91,141,184,.18); border-color: var(--info); color: #8DB6DA; }

/* Filtres */
.filtres {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 26px; justify-content: center;
}
.filtre {
  padding: 7px 16px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  color: var(--texte-doux);
  font-size: .85rem;
  cursor: pointer;
  transition: all var(--transition);
}
.filtre:hover { border-color: var(--or-sombre); color: var(--parchemin); }
.filtre.actif { background: rgba(201,169,110,.14); border-color: var(--or); color: var(--or); }

/* Identification du joueur */
.identite {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 18px 22px;
  margin-bottom: 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.identite__qui { display: flex; align-items: center; gap: 12px; }
.identite__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(145deg, var(--or), var(--or-sombre));
  color: #22190C; display: grid; place-items: center;
  font-weight: 700; font-size: .95rem;
}

/* ===== 9. ÉVÉNEMENTS, TABLES, CHRONIQUES, GALERIE ======================== */

/* Table de jeu */
.table-jeu__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: .7rem; }
.table-jeu__systeme {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--or-sombre); margin-bottom: .2rem;
}
.table-jeu__liste { list-style: none; padding: 0; margin: 14px 0 0; font-size: .86rem; }
.table-jeu__liste li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-top: 1px solid var(--bordure);
  color: var(--texte-doux);
}
.table-jeu__liste li span:last-child { color: var(--texte); text-align: right; }

/* Chronique */
.chronique { border-left: 2px solid var(--bordure); padding-left: 26px; margin-bottom: 34px; position: relative; }
.chronique::before {
  content: ''; position: absolute; left: -6px; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--or); border: 2px solid var(--noir);
}
.chronique__date { font-size: .8rem; color: var(--or-sombre); text-transform: uppercase; letter-spacing: .1em; }
.chronique__titre { font-family: var(--police-titre); font-size: 1.22rem; color: var(--parchemin); margin: .25rem 0 .6rem; }
.chronique__texte { color: var(--texte-doux); }
.chronique__texte p { margin-bottom: .8em; }

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.galerie__item {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--rayon-s); border: 1px solid var(--bordure);
  cursor: pointer; background: var(--surface-2);
}
.galerie__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.galerie__item:hover img { transform: scale(1.07); }
.galerie__item:hover { border-color: var(--or-sombre); }
.galerie__legende {
  position: absolute; inset: auto 0 0;
  background: linear-gradient(transparent, rgba(5,6,9,.92));
  padding: 26px 13px 11px;
  font-size: .82rem; color: var(--parchemin);
  opacity: 0; transition: opacity var(--transition);
}
.galerie__item:hover .galerie__legende { opacity: 1; }

.visionneuse {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(4,5,7,.95);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px; padding: 30px;
}
.visionneuse img { max-width: 92vw; max-height: 78vh; object-fit: contain; border-radius: var(--rayon-s); }
.visionneuse__barre { display: flex; align-items: center; gap: 22px; color: var(--texte-doux); }
.visionneuse__nav {
  background: var(--surface); border: 1px solid var(--bordure);
  color: var(--parchemin); width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.2rem; cursor: pointer;
}
.visionneuse__nav:hover { border-color: var(--or); color: var(--or); }

/* Membre du bureau */
.membre { text-align: center; }
.membre__photo {
  width: 104px; height: 104px; border-radius: 50%;
  margin: 0 auto 14px; object-fit: cover;
  border: 2px solid var(--or-sombre);
  background: var(--surface-2);
}
.membre__initiales {
  width: 104px; height: 104px; border-radius: 50%;
  margin: 0 auto 14px;
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  border: 2px solid var(--or-sombre);
  display: grid; place-items: center;
  font-family: var(--police-titre); font-size: 1.9rem; color: var(--or);
}
.membre__role { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--or-sombre); }

/* Actualité */
.actu { display: grid; grid-template-columns: 90px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--bordure); }
.actu:last-child { border-bottom: none; }
.actu__date { font-size: .8rem; color: var(--or-sombre); text-transform: uppercase; letter-spacing: .08em; padding-top: 3px; }
.actu__titre { font-family: var(--police-titre); font-size: 1.05rem; color: var(--parchemin); margin: 0 0 .35rem; }

/* FAQ */
.faq details {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq summary {
  padding: 15px 20px; cursor: pointer; font-weight: 600;
  color: var(--parchemin); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--or); font-size: 1.3rem; flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { background: var(--surface-2); }
.faq__reponse { padding: 0 20px 18px; color: var(--texte-doux); font-size: .92rem; }

/* ===== 10. PANNEAU D'ADMINISTRATION ====================================== */
.admin-entree {
  max-width: 420px; margin: 90px auto;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 36px; text-align: center;
}
.admin-entree img { width: 72px; margin: 0 auto 18px; }

.admin-dispo { display: grid; grid-template-columns: 218px 1fr; gap: 26px; align-items: start; }
.admin-menu {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 10px; position: sticky; top: 92px;
}
.admin-menu button {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; background: none; border: none;
  border-radius: var(--rayon-s); color: var(--texte-doux);
  font-family: var(--police-texte); font-size: .9rem; cursor: pointer;
  transition: all var(--transition);
}
.admin-menu button:hover { background: var(--surface-2); color: var(--parchemin); }
.admin-menu button.actif { background: rgba(201,169,110,.13); color: var(--or); font-weight: 600; }
.admin-menu hr { margin: 10px 6px; }

.admin-panneau { min-width: 0; }
.admin-panneau[hidden] { display: none; }

.admin-ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 13px 16px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon-s); margin-bottom: 9px;
}
.admin-ligne__info { min-width: 0; flex: 1; }
.admin-ligne__titre { font-weight: 600; color: var(--parchemin); font-size: .94rem; }
.admin-ligne__meta { font-size: .8rem; color: var(--texte-faible); }
.admin-ligne__actions { display: flex; gap: 6px; flex-shrink: 0; }

.admin-barre {
  position: sticky; bottom: 0; z-index: 50;
  background: rgba(11,13,17,.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--or-sombre);
  padding: 14px 0; margin-top: 34px;
}
.admin-barre__interieur { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ===== 10 bis. LE SCEAU DE L'ARC (jeu de piste) ========================== */

/* Indicateur du pied de page — n'existe qu'une fois un fragment trouvé */
.sceau-indicateur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(201, 169, 110, .08);
  border: 1px solid var(--or-sombre);
  border-radius: 999px;
  padding: 4px 13px 4px 10px;
  color: var(--or);
  font-family: var(--police-texte);
  font-size: .76rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: all var(--transition);
}
.sceau-indicateur:hover {
  background: rgba(201, 169, 110, .18);
  border-color: var(--or);
  color: var(--or-vif);
}
.sceau-indicateur { align-self: center; }  /* ne s'étire pas sur mobile */
.sceau-indicateur__marque { font-size: .95rem; line-height: 1; }
.sceau-indicateur--complet {
  border-color: var(--or);
  background: rgba(201, 169, 110, .16);
  box-shadow: 0 0 14px rgba(201, 169, 110, .25);
}
.sceau-indicateur--complet .sceau-indicateur__marque { animation: pulsation 2.6s ease-in-out infinite; }
@keyframes pulsation { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Mot dissimulé dans un récit : repérable sans être criard */
.sceau-mot {
  color: var(--or-sombre);
  cursor: help;
  border-bottom: 1px dotted rgba(201, 169, 110, .4);
  transition: color var(--transition), text-shadow var(--transition);
}
.sceau-mot:hover, .sceau-mot:focus-visible {
  color: var(--or-vif);
  text-shadow: 0 0 10px rgba(201, 169, 110, .5);
}

/* Ligne d'ombre : invisible, sauf si l'on sélectionne le texte de la page */
.sceau-ombre {
  color: var(--noir);
  font-size: .8rem;
  margin-top: 48px;
  user-select: text;
}
.sceau-ombre__prise {
  cursor: pointer;
  padding: 0 4px;
}
.sceau-ombre::selection, .sceau-ombre *::selection {
  background: var(--or-sombre);
  color: var(--parchemin);
}
.sceau-ombre__prise:focus-visible { color: var(--or); outline: 2px solid var(--or); }

/* ===== 11. RESPONSIVE ==================================================== */
@media (max-width: 980px) {
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .admin-dispo { grid-template-columns: 1fr; }
  .admin-menu { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .admin-menu button { width: auto; }
  .admin-menu hr { display: none; }
}

@media (max-width: 768px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    background: var(--noir-profond);
    border-bottom: 1px solid var(--bordure);
    padding: 14px 24px 22px;
    gap: 2px;
    transform: translateY(-120%);
    transition: transform 260ms ease;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav.ouvert { transform: translateY(0); }
  .nav a { padding: 13px 14px; font-size: .97rem; }

  .section { padding: 48px 0; }
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
  .duo, .trio { grid-template-columns: 1fr; }

  .seance { grid-template-columns: 72px 1fr; gap: 16px; padding: 16px; }
  .seance__actions { grid-column: 1 / -1; min-width: 0; }
  .seance__jour { font-size: 1.5rem; }

  .pied__grille { grid-template-columns: 1fr; gap: 26px; }
  .pied__bas { flex-direction: column; text-align: center; }

  .hero { padding: 48px 0 44px; }
  .actu { grid-template-columns: 1fr; gap: 6px; }
  .identite { flex-direction: column; align-items: stretch; }
  .galerie { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .modale__boite { max-height: 94vh; }
}

@media (max-width: 420px) {
  .conteneur { padding: 0 16px; }
  .marque__nom { display: none; }
  .reponses { flex-direction: column; }
  .chiffres { grid-template-columns: 1fr 1fr; }
}

/* Impression */
@media print {
  .entete, .pied, .hero__actions, .seance__actions, .de20, .filtres, .admin-barre { display: none !important; }
  body { background: #fff; color: #000; }
  .carte, .seance { border: 1px solid #ccc; break-inside: avoid; }
  h1, h2, h3, .seance__titre { color: #000; }
}

/* Respect des préférences d'animation réduite */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 12. TARIFS, JEUX DE SOCIÉTÉ, VIDÉOS ================================ */
.tarifs__rubrique { margin: 34px 0 18px; font-size: 1.35rem; }
.tarifs__rubrique:first-child { margin-top: 0; }
.tarif { display: flex; flex-direction: column; }
.tarif .badge { align-self: flex-start; margin-bottom: 12px; }
.tarif__nom { margin-bottom: .35rem; }
.tarif__prix {
  font-family: var(--police-titre);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--or);
  margin: .1rem 0 0;
}
.tarif__unite { font-size: .84rem; color: var(--texte-doux); margin: .2rem 0 .9rem; }
.tarif__detail p { margin: 0 0 .5rem; }
.tarif--avant { border-color: var(--or-sombre); }

.jeux-reglages { align-items: center; margin-bottom: 14px; }
.jeux-reglages label { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--texte-doux); white-space: nowrap; }
.jeux-reglages select {
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-s);
  padding: 7px 10px;
  font: inherit;
  font-size: .88rem;
}
.jeux-reglages select:focus { outline: none; border-color: var(--or); }
.jeu--tire {
  border-color: var(--or);
  box-shadow: 0 0 0 2px rgba(201,169,110,.35), var(--ombre);
}

.galerie__rubrique { font-size: 1.35rem; margin: 0 0 18px; }
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
  margin-bottom: 44px;
}
.video { margin: 0; }
.video__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--surface-2);
}
.video__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__lancer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 20px;
  border: 0;
  cursor: pointer;
  color: var(--parchemin);
  font: inherit;
  background-color: var(--noir-profond);
  background-image: radial-gradient(circle at 50% 38%, var(--surface-3), var(--noir-profond) 75%);
  background-size: cover;
  background-position: center;
}
.video__lancer::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,8,11,.88), rgba(7,8,11,.15));
}
.video__icone {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px;
  padding-left: 5px;
  border: 2px solid var(--or);
  border-radius: 50%;
  background: rgba(7,8,11,.55);
  color: var(--or);
  font-size: 1.5rem;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.video__lancer:hover .video__icone,
.video__lancer:focus-visible .video__icone { transform: scale(1.08); background: var(--or); color: var(--noir); }
.video__lancer:focus-visible { outline: 2px solid var(--or); outline-offset: -2px; }
.video__titre {
  position: relative;
  max-width: 90%;
  font-family: var(--police-titre);
  font-size: 1.05rem;
  text-align: center;
}
.video__legende { margin-top: 10px; }
.video__legende p { margin: .25rem 0; }

@media (min-width: 1061px) {
  .entete__interieur { gap: 12px; }
  .marque__nom { white-space: nowrap; }
  .nav { gap: 0; }
  .nav a { padding: 8px 8px; font-size: .85rem; }
}
@media (min-width: 1061px) and (max-width: 1260px) {
  .marque__nom { display: none; }
}
@media (min-width: 769px) and (max-width: 1060px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: 74px 0 auto;
    flex-direction: column;
    align-items: stretch;
    background: var(--noir-profond);
    border-bottom: 1px solid var(--bordure);
    padding: 14px 24px 22px;
    gap: 2px;
    transform: translateY(-120%);
    transition: transform 260ms ease;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav.ouvert { transform: translateY(0); }
  .nav a { padding: 13px 14px; font-size: .97rem; }
}
@media (max-width: 420px) {
  .videos { grid-template-columns: 1fr; }
  .jeux-reglages label { width: 100%; justify-content: space-between; }
}

/* Rév. B — badge de places : ne déborde plus de la carte quand le nom du système est long */
.table-jeu__entete .badge { flex-shrink: 0; max-width: 48%; white-space: normal; text-align: center; line-height: 1.3; }
/* Jeux de société : on montre la boîte entière (images carrées 800x800) */
.jeu .carte_media  { aspect-ratio: 1 / 1; }
.jeu .carte_media img { object-fit: contain; }