/* ============================================================
   HALLES 610 · SHELL — composants partagés
   ------------------------------------------------------------
   Refactor du `halles610-shell.css` hérité (Chantier 1, avril 2026),
   conformément à D071 : le shell ne contient AUCUNE valeur de
   couleur ni de police en dur. Tout passe par les variables
   définies dans assets/css/theme-h610.css.

   Conséquence : pour habiller une autre halle, on remplace le
   fichier de thème — jamais celui-ci.

   Les noms de variables `--c-*` / `--f-*` sont ceux du legacy et
   sont conservés tels quels : les 23 pages héritées les utilisent.
   Le thème expose en plus les noms canoniques `--color-*` / `--font-*`
   (sites_publics.md §11.2) pour qui préfère ceux-là.
   ============================================================ */

/* ============================================================
   HALLES 610 · SHELL PARTAGÉ
   Variables DA + composants communs à toutes les pages intérieures
   v1.0 · hérité de la home V3.7 (cf. doc de spec)
   ============================================================ */

/* ===== RESET & VARIABLES ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-primary);
  background: var(--c-paper);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ===== HEADER SITE ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-orange);
  color: var(--c-paper);
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--c-ink);
}
.site-header .logo-mini {
  flex-shrink: 0;
  height: 48px;
  display: flex;
  align-items: center;
}
.site-header .logo-mini img {
  height: 48px;
  width: auto;
  display: block;
}
.site-header .desktop-nav {
  display: flex;
  gap: 22px;
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.site-header .desktop-nav a {
  text-decoration: none;
  transition: color 0.2s;
}
.site-header .desktop-nav a:hover { color: var(--c-yellow); }
.site-header .desktop-nav a.active { color: var(--c-yellow); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 9px 16px;
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  flex-shrink: 0;
}
.status-pill .dot {
  width: 8px; height: 8px;
  background: var(--c-mint);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.burger svg { width: 28px; height: 28px; }

@media (max-width: 960px) {
  .site-header .desktop-nav { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 520px) {
  .site-header { padding: 12px 18px; }
  .site-header .logo-mini, .site-header .logo-mini img { height: 40px; }
  .status-pill { font-size: 10px; padding: 7px 12px; }
}
@media (max-width: 400px) {
  .status-pill { display: none; }
}

/* ===== MARQUEE (ruban noir défilant) ===== */
.marquee-bar {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 16px 20px;
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee-bar .marq {
  display: inline-flex;
  gap: 40px;
  animation: marquee 35s linear infinite;
}
.marquee-bar .marq span { display: inline-flex; align-items: center; gap: 10px; }
.marquee-bar .dot { color: var(--c-yellow); font-size: 8px; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== BOUTONS ===== */
.btn {
  padding: 15px 26px;
  border-radius: 100px;
  font-family: var(--f-primary);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: transform 0.15s;
  border: none;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }

.btn.ink { background: var(--c-ink); color: var(--c-paper); }
.btn.yellow { background: var(--c-yellow); color: var(--c-ink); }
.btn.outline-paper {
  background: transparent;
  color: var(--c-paper);
  border: 2px solid var(--c-paper);
  padding: 13px 24px;
}
.btn.outline-paper:hover { background: var(--c-paper); color: var(--c-orange); }
.btn.outline-ink {
  background: transparent;
  color: var(--c-ink);
  border: 2px solid var(--c-ink);
  padding: 13px 24px;
}
.btn.outline-ink:hover { background: var(--c-ink); color: var(--c-paper); }
.btn.orange { background: var(--c-orange); color: var(--c-paper); }

/* ===== SECTIONS ===== */
.section {
  padding: 72px 24px;
  position: relative;
}
@media (max-width: 640px) {
  .section { padding: 56px 20px; }
}
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--c-orange);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--c-orange);
}
.section h2 {
  font-family: var(--f-affiche);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.section h2 em {
  font-style: italic;
  color: var(--c-orange);
  display: inline-block;
  transform: rotate(-2deg);
}
.section-lead {
  font-size: 17px;
  line-height: 1.55;
  max-width: 620px;
  color: #333;
  margin-bottom: 40px;
}

.admin-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9px;
  padding: 3px 8px;
  background: rgba(255,213,0,0.4);
  color: #8a6d00;
  border-radius: 100px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
  font-weight: 700;
}

/* ===== STICKERS DÉCOR (flottants, animation float) ===== */
.sticker-img {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.12));
  animation: float 6s ease-in-out infinite;
}
.sticker-img img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-6px) rotate(calc(var(--rot, 0deg) + 2deg)); }
}

/* ===== PAGE HEADER (bandeau de titre pour pages intérieures) ===== */
.page-hero {
  background: var(--c-orange);
  color: var(--c-paper);
  padding: 72px 24px 88px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-hero .page-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.page-hero .page-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-bottom: 18px;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-hero .page-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--c-yellow);
}
.page-hero h1 {
  font-family: var(--f-affiche);
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.page-hero h1 em {
  font-style: italic;
  color: var(--c-yellow);
  display: inline-block;
  transform: rotate(-2deg);
}
.page-hero .page-lead {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto 28px;
  opacity: 0.95;
}
.page-hero .page-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 8px;
  justify-content: center;
}
.page-hero .page-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.15);
  padding: 7px 14px;
  border-radius: 100px;
}
@media (max-width: 640px) {
  .page-hero { padding: 48px 20px 56px; }
  .page-hero h1 { font-size: clamp(40px, 11vw, 56px); }
}

/* ===== CARTES ÉTALIERS (réutilisables dans pages hub) ===== */
.etaliers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.etalier-card {
  background: var(--c-stone);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--c-ink);
  transition: transform 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
}
/*  Le cadre de survol est une ombre INTÉRIEURE, pas une bordure.
    Une bordure de 2px, même transparente, décale le contenu de 2px et
    laisse apparaître un liseré autour de la photo. L'ombre intérieure
    se dessine par-dessus, sans rien décaler.                          */
.etalier-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 2px var(--c-ink);
}
.etalier-visual {
  aspect-ratio: 16 / 9;
  height: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-sticker);
  color: var(--c-ink);
  font-size: 42px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-align: center;
  /*  Aucun rembourrage ici : la photo doit toucher les bords de la
      carte. C'est l'emplacement réservé — l'aplat coloré et son emoji —
      qui prend sa marge, plus bas.                                    */
}
/*  L'image occupe tout le cadre, jusqu'aux angles arrondis que
    `overflow:hidden` de la carte découpe pour elle.                   */
.etalier-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
}
/*  L'emplacement réservé, lui, respire : sans marge, une initiale ou un
    emoji collerait au bord.                                           */
.etalier-visual .ph-emoji,
.etalier-visual .photo-vide {
  padding: 12px;
}
.etalier-visual .ph-emoji {
  font-size: 54px;
  display: block;
}
.etalier-visual::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='10' cy='10' r='2' fill='rgba(0,0,0,0.08)'/%3E%3Ccircle cx='50' cy='30' r='1.5' fill='rgba(0,0,0,0.08)'/%3E%3Ccircle cx='30' cy='50' r='2.5' fill='rgba(0,0,0,0.08)'/%3E%3C/svg%3E");
  opacity: 0.6;
}
.etalier-visual > * { position: relative; z-index: 2; }
.etalier-card:nth-child(7n+1) .etalier-visual { background: var(--c-yellow); }
.etalier-card:nth-child(7n+2) .etalier-visual { background: var(--c-mint); }
.etalier-card:nth-child(7n+3) .etalier-visual { background: var(--c-lavender); }
.etalier-card:nth-child(7n+4) .etalier-visual { background: var(--c-magenta); color: var(--c-paper); }
.etalier-card:nth-child(7n+5) .etalier-visual { background: var(--c-cream); }
.etalier-card:nth-child(7n+6) .etalier-visual { background: var(--c-orange); color: var(--c-paper); }
.etalier-card:nth-child(7n+7) .etalier-visual { background: var(--c-blue); color: var(--c-paper); }

.etalier-info {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.etalier-card .tag {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-orange);
  margin-bottom: 6px;
  display: inline-block;
}
.etalier-card h3 {
  font-family: var(--f-etiq);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.etalier-card p {
  font-size: 13px;
  color: #555;
  line-height: 1.4;
  flex: 1;
}
.etalier-card .sig {
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 64px 24px 32px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* Cinq colonnes depuis le lot 4 : la colonne « Découvrir » s'est
     ajoutée entre « Venir » et « Nous suivre ». */
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 520px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}
.footer-col h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--c-yellow);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: var(--c-paper);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.footer-col a:hover { opacity: 1; color: var(--c-yellow); }
.footer-col p {
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.6;
}
.footer-brand img {
  height: 72px;
  width: auto;
  margin-bottom: 16px;
  display: block;
}
.footer-brand .baseline {
  font-family: var(--f-affiche);
  font-size: 22px;
  color: var(--c-paper);
  margin-bottom: 14px;
  line-height: 1.1;
}
.footer-brand .baseline em {
  font-style: italic;
  color: var(--c-orange);
}
.footer-bottom {
  max-width: 1200px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.footer-bottom a {
  color: var(--c-paper);
  text-decoration: none;
}
.footer-bottom a:hover { color: var(--c-yellow); }
.footer-group-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* ===== DEV NOTE (pour maquette) ===== */
.dev-note {
  background: var(--c-yellow);
  color: var(--c-ink);
  padding: 14px 24px;
  font-size: 13px;
  text-align: center;
  border-bottom: 2px solid var(--c-ink);
}
.dev-note strong { font-weight: 700; }


/* ============================================================
   AGENDA — lignes d'événement
   ------------------------------------------------------------
   Repris à l'identique de la maquette home V3.7 : une LIGNE
   horizontale [date | titre | badge] sur fond sombre, et non
   une vignette verticale. Ce format tient plus d'événements
   dans moins de hauteur, ce qui est le bon compromis pour une
   liste qu'on parcourt du regard.
   ============================================================ */

/* Le bloc agenda est toujours sur fond encre : c'est lui qui donne
   leur contraste aux lignes translucides. */
.events-block{ background:var(--c-ink); color:var(--c-paper); }
.events-block h2,
.events-block .titre-section{ color:var(--c-paper); }
.events-block .section-lead{ color:rgba(250,247,240,.7); }
.events-block .eyebrow{ color:var(--c-yellow); }

.events-liste{ margin-top:26px; }

.event-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:18px 20px;
  margin-bottom:12px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  text-decoration:none;
  color:inherit;
  transition:background .2s, border-color .2s, transform .2s;
}
.event-card:hover{
  background:rgba(255,213,0,0.08);
  border-color:var(--c-yellow);
  transform:translateX(4px);
}
.event-card:focus-visible{ outline:2px solid var(--c-yellow); outline-offset:3px; }

.event-date{
  display:flex; flex-direction:column; align-items:center;
  min-width:48px; line-height:1;
}
.event-date .day{ font-family:var(--f-affiche); font-size:30px; color:var(--c-yellow); }
.event-date .month{
  font-family:var(--f-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; opacity:.6; margin-top:2px;
}

.event-info{ min-width:0; display:block; }
.event-title{
  display:block; font-family:var(--f-primary); font-weight:700;
  font-size:16px; margin-bottom:2px;
}
.event-meta{
  display:block; font-size:12px; opacity:.6; font-family:var(--f-mono);
  text-transform:uppercase; letter-spacing:.05em;
}
.event-sur{
  display:block; font-size:13px; opacity:.75; margin-top:5px; line-height:1.45;
  /*  En majuscules, comme tout le reste de l'agenda. La donnée l'est déjà en
      base, mais le sur-titre d'une retransmission est RECOMPOSÉ à l'affichage
      — « TOP 14 · Rugby » — et le libellé du sport vient d'une constante PHP
      qui, elle, est en minuscules. Sans cette règle, la ligne serait
      panachée.                                                              */
  text-transform:uppercase; letter-spacing:.03em;
}

.event-badge{
  font-family:var(--f-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; padding:5px 10px; border-radius:100px;
  white-space:nowrap; font-weight:700;
}
.event-badge.free{ background:var(--c-mint); color:#003d2e; }
.event-badge.reporte{ background:var(--c-yellow); color:var(--c-ink); }

.vide{
  text-align:center; padding:48px 20px;
  border:1px dashed rgba(255,255,255,.25); border-radius:12px;
  font-size:16px; opacity:.8;
}
.vide a{ color:var(--c-yellow); }

/* Sur mobile, le badge passe sous le titre plutôt que d'écraser la colonne. */
@media(max-width:560px){
  .event-card{ grid-template-columns:auto 1fr; gap:14px; }
  .event-badge{ grid-column:2; justify-self:start; margin-top:4px; }
}

/* ============================================================
   AJOUTS LOT 2 — accueil et pages d'information
   ============================================================ */

/* ---- Hero de l'accueil ----
   Repris à l'identique de la maquette home V3.7 : une « scène » centrée
   qui porte le grand logo, le chapeau en deux couleurs et les trois
   pastilles flottantes. Les classes .sticker-img, @keyframes float et les
   variantes de .btn existent déjà plus haut dans ce fichier : on ne les
   redéfinit pas, on s'en sert. */
.hero{
  background:var(--c-orange); color:var(--c-paper);
  position:relative; overflow:hidden;
  padding:48px 24px 72px; text-align:center;
}
.hero .stage{
  position:relative; z-index:2; min-height:440px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}

.big-logo{ width:clamp(280px,50vw,460px); margin-bottom:18px; position:relative; z-index:3; }
.big-logo img{ width:100%; height:auto; display:block; }

/* Le chapeau : deux couleurs, la seconde moitié en jaune, italique et
   légèrement penchée. C'est la signature typographique de la marque. */
.tagline{
  font-family:var(--f-affiche); font-size:clamp(44px,6.8vw,84px);
  color:var(--c-paper); font-weight:400; letter-spacing:-.005em; line-height:1;
  position:relative; z-index:3; margin-top:4px;
}
.tagline .em{
  color:var(--c-yellow); font-style:italic; display:inline-block;
  transform:rotate(-2deg) translateY(2px);
}

.hero .sub{
  font-family:var(--f-primary); font-weight:500;
  font-size:clamp(15px,1.8vw,19px); max-width:560px; margin:22px auto 0;
  line-height:1.5; opacity:.95; position:relative; z-index:3;
}

.ctas{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:32px; position:relative; z-index:4;
}

/* Les trois pastilles et leurs positions d'origine. L'angle passe par la
   variable --rot, que l'animation `float` reprend pour ne pas écraser la
   rotation en animant la translation. */
.s-just   { top:10%;    right:5%;  width:clamp(90px,12vw,150px);  --rot:-12deg; }
.s-famille{ top:18%;    left:4%;   width:clamp(100px,13vw,160px); --rot:10deg;  animation-delay:-2s; }
.s-pret   { bottom:12%; right:8%;  width:clamp(95px,12vw,150px);  --rot:-8deg;  animation-delay:-4s; }

/*  ⚠️ LES PASTILLES PASSENT DEVANT — corrigé le 01/09/2026.

    Elles étaient en `z-index:auto`, donc au niveau 0 du contexte du hero,
    pendant que `.hero .stage` est à 2 et `.ctas` à 4. Sur mobile, où tout se
    resserre, la conséquence était visible : « JUST 610 » passait DERRIÈRE le
    logo et n'en dépassait qu'un croissant vert, et « LA FAMILLE 610 » se
    faisait recouvrir par le bouton jaune. Une pastille à moitié cachée ne
    ressemble pas à un parti pris : elle ressemble à un bug.

    Elles sont décoratives et `pointer-events:none` — passer devant ne bloque
    donc aucun clic.                                                        */
.sticker-img{ z-index:5; }

@media(max-width:700px){
  .hero .stage{ min-height:360px; }

  /*  Et puisqu'elles passent devant, elles doivent se tenir DANS LES ANGLES,
      là où le contenu centré ne va jamais. Les positions d'avant les posaient
      en plein sur le logo et sur les boutons ; devant, elles les auraient
      masqués au lieu d'être masquées.                                      */
  /*  Mesuré à 375 px : le logo commence à 43 px du haut du bloc et occupe
      presque toute la largeur. Une pastille de 72 px posée à 2 px lui mordait
      dessus sur une trentaine de pixels. À 60 px et collée à l'angle, elle
      n'en effleure plus que le bord — assez pour se lire « collée sur le
      logo », pas assez pour le masquer.                                    */
  /*  ⚠️ « LA FAMILLE 610 » EST REMONTÉE EN HAUT À GAUCHE — 01/09/2026.
      En bas à gauche elle se posait sur le bouton « Infos & contact » et en
      masquait le début du libellé. Passée devant au même moment, elle ne se
      contentait plus d'être cachée : elle cachait. Le bas du bandeau est
      occupé par deux rangs de boutons centrés, il n'y a rien à y gagner.
      En haut, les deux pastilles se répondent dans les angles, et le logo
      n'y perd qu'un bord.                                                  */
  .s-just   { top:0; right:0; width:60px; }
  .s-famille{ top:0; left:0;  width:64px; bottom:auto; }
  .s-pret   { display:none; }   /* trois pastilles encombrent un écran étroit */
}
@media(prefers-reduced-motion:reduce){
  .sticker-img{ animation:none; }
}

/* ---- Bandeau photo pleine largeur ---- */
.bandeau-photo{
  display:block; width:100%; margin:0; background:var(--c-stone); line-height:0;
  border-top:3px solid var(--c-ink); border-bottom:3px solid var(--c-ink);
}
.bandeau-photo img{
  display:block; width:100%; height:clamp(160px,26vw,340px);
  object-fit:cover; object-position:center 68%;
}

/* ---- Titres de section ---- */
.titre-section{
  font-family:var(--f-affiche); font-size:clamp(36px,5vw,64px);
  line-height:1; font-weight:400; letter-spacing:-.01em; margin-bottom:18px;
}
.section--creme{ background:var(--c-cream); }

/* ---- Cartes d'information ---- */
.cartes-infos{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
/* Reprise exacte de .priv-card de la maquette : carte pleine en `stone`,
   coins à 16 px, bordure transparente qui se révèle au survol. Aucune
   ombre portée — ce n'est pas le vocabulaire de la charte. */
.cartes-infos .carte{
  background:var(--c-stone); border:2px solid transparent; border-radius:16px;
  padding:28px 24px; color:var(--c-ink); transition:all .2s;
  display:flex; flex-direction:column;
}
.cartes-infos .carte:hover{ border-color:var(--c-ink); transform:translateY(-3px); }
.cartes-infos .carte h3{
  font-family:var(--f-etiq); font-size:22px; text-transform:uppercase;
  letter-spacing:.02em; line-height:1; margin-bottom:14px;
}
.cartes-infos .ligne{
  display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-size:15px;
}
.cartes-infos .ligne + .ligne{ border-top:1px solid rgba(26,26,26,.12); }
.cartes-infos .ligne span:first-child{ opacity:.7; }
.cartes-infos .ligne span:last-child{ font-weight:700; text-align:right; white-space:nowrap; }
.cartes-infos address{ font-style:normal; font-size:16px; line-height:1.7; }
.cartes-infos address strong{ display:block; font-size:17px; margin-bottom:2px; }
.cartes-infos .discret{ color:#555; font-size:13px; margin-top:8px; line-height:1.5; }
.cartes-infos .actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }

/* ---- Corps de texte des pages d'information ---- */
.texte{ max-width:44em; }
.texte h2{ font-family:var(--f-etiq); font-size:19px; letter-spacing:.06em;
           text-transform:uppercase; margin:34px 0 12px; }
.texte h2:first-child{ margin-top:0; }
.texte p, .texte li{ font-size:16px; line-height:1.75; margin-bottom:12px; }
.texte ul{ padding-left:1.1em; }
.texte a{ color:var(--c-blue); }
.texte dl{ display:grid; grid-template-columns:minmax(140px,auto) 1fr; gap:8px 20px; margin:8px 0 18px; }
.texte dt{ font-family:var(--f-mono); font-size:12px; text-transform:uppercase;
           letter-spacing:.08em; opacity:.65; padding-top:3px; }
.texte dd{ margin:0; font-size:16px; line-height:1.6; }
@media(max-width:560px){ .texte dl{ grid-template-columns:1fr; gap:2px 0; }
                         .texte dd{ margin-bottom:12px; } }

/* ============================================================
   AGENDA ET SPORT — deux colonnes
   ------------------------------------------------------------
   Repris de la maquette home V3.7 : les soirées et les
   retransmissions ne sont pas mélangées, elles occupent deux
   colonnes du même bloc. Le bandeau « à la demande » se place
   sous la colonne sport.
   ============================================================ */

.events-split{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:32px;
}
.events-col h3{
  font-family:var(--f-affiche); font-size:28px; font-weight:400;
  margin-bottom:8px; display:flex; align-items:center; gap:10px;
}
.col-lead{ font-size:14px; opacity:.7; margin-bottom:24px; }

/* Le titre de section porte une moitié en italique orange, penchée :
   « Agenda et sport ». C'est la même signature que le chapeau du hero. */
.section h2 em,
.titre-section em{
  font-style:italic; color:var(--c-orange); display:inline-block;
  transform:rotate(-2deg);
}

/* Badge des retransmissions : bleu, pour trancher avec le mint des
   soirées à entrée libre. */
.event-badge.sport{ background:var(--c-blue); color:#fff; }

/* ---- Bandeau « Tous les matchs à la demande » ---- */
.sport-demand{
  background:linear-gradient(135deg, rgba(255,213,0,.15) 0%, rgba(255,74,28,.15) 100%);
  border:2px solid var(--c-yellow); border-radius:16px;
  padding:26px 22px; margin-top:14px; text-align:center;
  position:relative; overflow:hidden;
}
.sport-demand .demand-head{
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.2em; color:var(--c-yellow); margin-bottom:10px;
}
.sport-demand strong{
  font-family:var(--f-affiche); font-size:clamp(24px,3vw,32px);
  display:block; color:var(--c-paper); margin-bottom:12px;
  font-weight:400; line-height:1.05; letter-spacing:.01em;
}
.sport-demand .accent{
  color:var(--c-yellow); font-style:italic; display:inline-block;
  transform:rotate(-2deg);
}
.sport-demand p{
  font-size:14px; opacity:.85; line-height:1.5; max-width:380px; margin:0 auto;
}
.sport-demand .bar-name{ color:var(--c-yellow); font-weight:700; white-space:nowrap; }

@media(max-width:800px){
  .events-split{ grid-template-columns:1fr; gap:40px; }
}

/* ============================================================
   ÉTALIERS — filtres et fiche
   ============================================================ */

/* ---- Barre de filtres ---- */
.filtres{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filter-pill{
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; padding:8px 14px; border-radius:100px;
  border:1.5px solid var(--c-ink); background:transparent; color:var(--c-ink);
  cursor:pointer; transition:background .15s, color .15s, transform .15s;
}
.filter-pill:hover{ transform:translateY(-1px); }
.filter-pill.is-active{ background:var(--c-ink); color:var(--c-paper); }
.filter-pill:focus-visible{ outline:3px solid var(--c-blue); outline-offset:2px; }

/* ---- Fiche étalier — remaniée en bandeaux le 31/08/2026 ----

   La fiche était une grille à deux colonnes : grande photo à gauche, tout
   le reste à droite. Elle est devenue une suite de bandeaux pleine largeur,
   dans l'ordre fixé par Gabriel :

     nom · description · photos · contacts · horaires · étaliers · plan

   `.fiche-etalier`, `.fiche-visuel` et `.fiche-actions` ont disparu avec
   l'ancienne mise en page — plus aucun gabarit ne les appelle.             */

.fiche-texte{ font-size:18px; line-height:1.7; margin-bottom:26px; }

/*  Le bandeau de description. La longueur de ligne est bornée : ces textes
    viennent de l'ancien site et montent à plus de 2 000 signes pour Slowly.
    Étalés sur 1200 px, ils seraient illisibles — l'œil perd sa ligne au
    retour à la ligne suivante.                                            */
.fiche-description .fiche-texte{ max-width:68ch; }
.fiche-description .fiche-texte:last-child{ margin-bottom:0; }

/*  Le bandeau des horaires. Il tenait une colonne sur deux tant que le plat
    signature occupait l'autre ; seul, il n'a plus de raison d'être coupé en
    deux.

    ⚠️ MAIS SA LARGEUR RESTE BORNÉE. Une ligne d'horaire pose le jour à
    gauche et l'heure à droite, en `space-between` : étalée sur les 1200 px
    de `.section-inner`, elle laisserait un couloir vide au milieu et l'œil
    ne relierait plus « Mardi » à « 12h — 14h ».                           */
.fiche-detail .fiche-horaires{ max-width:520px; margin-bottom:26px; }
.fiche-detail .fiche-tags{ margin-bottom:0; }

/*  `.plat-signature` a été retiré le 31/08/2026 : le plat signature ne
    figure plus sur la fiche. Il n'a pas disparu du site pour autant — la
    CARTE l'affiche toujours en une ligne, via `.sig`, et l'admin le saisit
    toujours.                                                              */

.fiche-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.fiche-tags .filter-pill{ cursor:default; }

.fiche-horaires{ margin-bottom:26px; }
.fiche-horaires .ligne{
  display:flex; justify-content:space-between; gap:14px;
  padding:8px 0; font-size:15px;
}
.fiche-horaires .ligne + .ligne{ border-top:1px solid var(--c-stone); }
.fiche-horaires .ligne span:first-child{ opacity:.7; }
.fiche-horaires .ligne span:last-child{ font-weight:700; text-align:right; }

/* ============================================================
   ÉTALIERS SUR L'ACCUEIL — défilement horizontal
   ------------------------------------------------------------
   Repris de `.etaliers-block` de la maquette home V3.7 : un
   aperçu qui défile, terminé par une carte « voir tous ».
   Le format évite d'empiler quatorze cartes sur la page
   d'accueil, tout en montrant qu'il y en a beaucoup.
   ============================================================ */

.etaliers-block{ background:var(--c-paper); }

.etaliers-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:32px; flex-wrap:wrap;
}
.etaliers-head .left{ flex:1; min-width:280px; }
.etaliers-head .right{ display:flex; gap:8px; align-items:center; flex-shrink:0; }

.scroll-btn{
  width:44px; height:44px; border-radius:50%;
  border:2px solid var(--c-ink); background:var(--c-paper); color:var(--c-ink);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  padding:0; transition:background .2s, color .2s;
}
.scroll-btn svg{ width:20px; height:20px; }
.scroll-btn:hover{ background:var(--c-ink); color:var(--c-paper); }
.scroll-btn:focus-visible{ outline:3px solid var(--c-blue); outline-offset:2px; }

.etaliers-scroller{
  display:flex; gap:16px; overflow-x:auto;
  scroll-snap-type:x mandatory; padding:10px 4px 30px;
  scrollbar-width:thin; scrollbar-color:var(--c-ink) transparent;
  /* Sur mobile le défilement se fait au doigt : les flèches sont un confort
     souris, pas le seul moyen d'accès. */
  -webkit-overflow-scrolling:touch;
}
.etaliers-scroller::-webkit-scrollbar{ height:8px; }
.etaliers-scroller::-webkit-scrollbar-thumb{ background:var(--c-ink); border-radius:100px; }
.etaliers-scroller::-webkit-scrollbar-track{ background:transparent; }

.etaliers-scroller .etalier-card,
.etaliers-scroller .photo-card{ flex:0 0 260px; scroll-snap-align:start; }

/* ---- La carte de fin, qui mène à la page complète ---- */
.etalier-card-more{
  flex:0 0 260px; scroll-snap-align:start;
  background:var(--c-ink); color:var(--c-paper); border-radius:16px;
  text-decoration:none; padding:26px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border:2px solid var(--c-ink); transition:transform .2s, background .2s;
}
.etalier-card-more:hover{ transform:translateY(-3px); background:var(--c-orange); }
.etalier-card-more:focus-visible{ outline:3px solid var(--c-yellow); outline-offset:3px; }
.more-num{ font-family:var(--f-affiche); font-size:72px; line-height:1; color:var(--c-yellow); }
.more-label{
  font-family:var(--f-etiq); text-transform:uppercase; font-size:18px;
  letter-spacing:.02em; line-height:1.1;
}
.more-sub{
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; opacity:.7;
}

@media(max-width:640px){
  .etaliers-scroller .etalier-card,
  .etalier-card-more{ flex-basis:230px; }
  .etaliers-head .right{ display:none; }  /* au doigt, les flèches n'ont pas d'usage */
}

/* ============================================================
   LOT 4 · ÉDITORIAL — équipe, partenaires, clubs, presse,
   journal, avis.
   28/08/2026

   Trois principes tenus dans tout ce bloc :

   1. Aucun cadre photo vide ne dégrade la mise en page. La
      photothèque est perdue ; tant qu'une vraie photo n'est pas
      téléversée, `.photo-vide` occupe la place avec un aplat de
      la charte et une initiale. C'est le critère de fini de la
      spec, §11.
   2. Les cadres sont tous en 16/9, comme le reste du site.
   3. Les grilles se replient d'elles-mêmes (auto-fit), sans
      point de rupture à maintenir.
   ============================================================ */

/* ---- L'emplacement réservé, commun à tout le lot ---------- */
/*  Produit par la fonction photo() de _inc/helpers.php quand la
    colonne d'image est vide en base.                          */
.photo-vide{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  font-family:var(--f-affiche); font-size:44px; line-height:1;
  color:var(--c-ink); opacity:.28; user-select:none;
}

/* ============================================================
   /l-histoire — le récit
   ============================================================ */
.texte blockquote{
  margin:28px 0; padding:20px 24px;
  border-left:4px solid var(--c-orange);
  background:var(--c-cream);
  font-family:var(--f-affiche); font-size:21px; line-height:1.45;
}
.texte blockquote cite{
  display:block; margin-top:10px;
  font-family:var(--f-mono); font-size:12px; font-style:normal;
  text-transform:uppercase; letter-spacing:.1em; opacity:.7;
}

/* ---- L'équipe --------------------------------------------- */
.equipe-grid{
  display:grid; gap:22px; margin-top:28px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}
.membre{
  background:var(--c-paper); border:2px solid var(--c-ink);
  border-radius:14px; overflow:hidden; padding-bottom:18px;
}
.membre-photo{
  aspect-ratio:16/9; background:var(--c-stone);
  border-bottom:2px solid var(--c-ink); overflow:hidden;
}
.membre-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.membre h3{
  font-family:var(--f-etiq); font-size:19px; letter-spacing:.02em;
  margin:16px 18px 2px;
}
.membre-fonction{
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--c-orange); margin:0 18px 10px;
}
.membre-bio{ font-size:14px; line-height:1.6; margin:0 18px; opacity:.85; }

/* ---- Les partenaires -------------------------------------- */
.partenaires-grid{
  display:grid; gap:18px; margin-top:28px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.partenaire{
  display:block; text-decoration:none; color:inherit;
  background:var(--c-paper); border:2px solid var(--c-ink);
  border-radius:14px; overflow:hidden; padding-bottom:16px;
  transition:transform .15s ease, box-shadow .15s ease;
}
a.partenaire:hover{ transform:translateY(-3px); box-shadow:6px 6px 0 var(--c-ink); }
.partenaire-logo{
  aspect-ratio:16/9; background:var(--c-paper);
  border-bottom:2px solid var(--c-ink); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/*  Un logo se pose dans son cadre, il ne se recadre pas : `contain`
    et non `cover`, sinon on rogne la marque.                  */
.partenaire-logo img{ max-width:78%; max-height:78%; object-fit:contain; display:block; }
.partenaire h3{
  font-family:var(--f-etiq); font-size:17px; letter-spacing:.02em;
  margin:16px 18px 6px;
}
.partenaire p{ font-size:14px; line-height:1.6; margin:0 18px; opacity:.85; }

/* ============================================================
   /sport-clubs — refonte du 28/08/2026
   ------------------------------------------------------------
   La première version alignait des cartes plates et des lignes
   de tableau. L'information y était, la page ne se lisait pas.

   Elle reprend maintenant la forme de la fiche événement, qui
   est la plus lisible du site : cadre net, ombre portée franche
   plutôt que diffuse, filet de couleur en tête, grande photo.

   Le filet change de couleur selon la discipline (rugby, hand,
   foot, MMA…). C'est ce qui permet de parcourir la grille à
   l'œil avant de la lire.
   ============================================================ */

.clubs-grid{
  display:grid; gap:28px; margin-top:32px;
  grid-template-columns:repeat(auto-fit, minmax(330px, 1fr));
}

.club-card{
  display:flex; flex-direction:column;
  background:var(--c-paper);
  border:2px solid var(--c-ink); border-radius:20px;
  overflow:hidden;
  box-shadow:6px 6px 0 var(--c-ink);
  transition:transform .18s ease, box-shadow .18s ease;
}
.club-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--c-ink);
}

/* Le filet de couleur : 8px, comme sur la fiche événement. */
.club-filet{ display:block; height:8px; }

.club-visuel{
  position:relative; aspect-ratio:16/9;
  background:var(--c-stone);
  border-bottom:2px solid var(--c-ink);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/*  La photo remplit le cadre — même règle que les cartes étalier :
    absolue et calée sur les quatre bords, pour qu'aucun rembourrage
    ne vienne l'encadrer.                                            */
.club-visuel img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block; z-index:2;
}
.club-visuel .photo-vide{ padding:12px; }

.club-sport{
  position:absolute; left:14px; bottom:14px; z-index:3;
  color:var(--c-ink);
  font-family:var(--f-etiq); font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; padding:6px 12px; border-radius:999px;
  border:2px solid var(--c-ink);
}

.club-info{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }

.club-info h3{
  font-family:var(--f-affiche); font-size:27px; line-height:1.05;
  margin:0; letter-spacing:-.01em;
}
.club-nom-complet{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.04em;
  opacity:.6; margin:6px 0 0;
}
.club-texte{ font-size:15px; line-height:1.65; margin:14px 0 0; }

/*  Le palmarès : c'est ce dont un club est le plus fier, et ce qu'on
    retient de lui. Il ne peut pas être une ligne de tableau parmi
    d'autres.                                                         */
.club-palmares{
  margin:16px 0 0; padding:12px 14px;
  background:var(--c-cream); border-radius:10px;
  font-size:14px; line-height:1.5; font-weight:600;
}

/*  Les repères en pastilles plutôt qu'en lignes : plus court à
    parcourir, et ça se replie tout seul sur un téléphone.            */
.club-reperes{
  list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:7px;
}
.club-reperes li{
  font-family:var(--f-mono); font-size:11px; line-height:1.3;
  padding:6px 11px; border-radius:999px;
  background:var(--c-stone); color:var(--c-ink);
}

.club-liens{
  margin:18px 0 0; padding-top:14px;
  border-top:1px solid var(--c-stone);
  display:flex; flex-wrap:wrap; gap:16px;
}
.club-liens a{
  font-family:var(--f-mono); font-size:12px; color:var(--c-blue);
  text-decoration:underline; text-underline-offset:3px;
}

@media(max-width:560px){
  .clubs-grid{ grid-template-columns:1fr; gap:22px; }
  .club-card{ box-shadow:4px 4px 0 var(--c-ink); }
  .club-info h3{ font-size:24px; }
}

/* ============================================================
   /presse — les parutions
   ============================================================ */
.presse-une{ display:grid; gap:20px; margin-bottom:28px; }
.presse-liste{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.parution{
  display:block; text-decoration:none; color:inherit;
  background:var(--c-paper); border:2px solid var(--c-ink);
  border-radius:14px; padding:22px 24px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.parution:hover{ transform:translateY(-3px); box-shadow:6px 6px 0 var(--c-ink); }
.parution--une{ background:var(--c-cream); }
.parution-source{
  display:inline-block; margin-bottom:10px;
  background:var(--c-ink); color:var(--c-paper);
  font-family:var(--f-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; padding:5px 10px; border-radius:999px;
}
.parution h2{ font-family:var(--f-affiche); font-size:26px; line-height:1.2; margin:0; }
.parution h3{ font-family:var(--f-etiq); font-size:18px; line-height:1.3; margin:0; }
.parution p{ font-size:15px; line-height:1.6; margin:10px 0 0; opacity:.85; }
.parution-pied{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--c-stone);
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; opacity:.7;
}
.parution-type{ color:var(--c-blue); }

/* ============================================================
   /journal — la liste et l'article
   ============================================================ */
.journal-grid{
  display:grid; gap:22px; margin-top:28px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.article-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--c-paper); border:2px solid var(--c-ink);
  border-radius:16px; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.article-card:hover{ transform:translateY(-3px); box-shadow:6px 6px 0 var(--c-ink); }
.article-visuel{
  position:relative; aspect-ratio:16/9;
  border-bottom:2px solid var(--c-ink); overflow:hidden;
}
.article-visuel img{ width:100%; height:100%; object-fit:cover; display:block; }
/*  Les quatre couleurs de catégorie sont figées par le canonique.
    Elles servent de fond au cadre tant qu'il n'y a pas de photo. */
.article-visuel.cat-jaune  { background:var(--c-yellow); }
.article-visuel.cat-menthe { background:var(--c-mint); }
.article-visuel.cat-magenta{ background:var(--c-magenta); }
.article-visuel.cat-lavande{ background:var(--c-lavender); }
.article-cat{
  position:absolute; left:12px; top:12px;
  background:var(--c-ink); color:var(--c-paper);
  font-family:var(--f-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; padding:5px 10px; border-radius:999px;
}
.article-info{ padding:18px 20px 20px; }
.article-info h2{ font-family:var(--f-etiq); font-size:20px; line-height:1.25; margin:0; }
.article-info p{ font-size:15px; line-height:1.6; margin:10px 0 0; opacity:.85; }
.article-date{
  display:block; margin-top:12px;
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; opacity:.6;
}
/*  Le corps d'un article reprend .texte, avec un peu plus d'air :
    on y lit plusieurs minutes, pas trois lignes.               */
.article-corps h2{ margin-top:34px; }
.article-corps h3{
  font-family:var(--f-etiq); font-size:16px; letter-spacing:.05em;
  text-transform:uppercase; margin:26px 0 8px;
}

/* ============================================================
   /avis — les témoignages
   ============================================================ */
.temoignages{
  display:grid; gap:20px; margin-top:28px;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
}
.temoignage{
  margin:0; padding:24px;
  background:var(--c-paper); border:2px solid var(--c-ink); border-radius:16px;
}
.temoignage blockquote{
  margin:0; font-family:var(--f-affiche); font-size:18px; line-height:1.5;
}
.temoignage blockquote::before{ content:'« '; color:var(--c-orange); }
.temoignage blockquote::after { content:' »'; color:var(--c-orange); }
.temoignage figcaption{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--c-stone);
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em;
}
.temoignage figcaption strong{ color:var(--c-orange); }
.temoignage figcaption span{ display:block; margin-top:4px; opacity:.65; }

/* ---- Repli mobile ----------------------------------------- */
@media(max-width:560px){
  .equipe-grid,
  .partenaires-grid,
  .clubs-grid,
  .presse-liste,
  .journal-grid,
  .temoignages{ grid-template-columns:1fr; }
  .parution h2{ font-size:22px; }
}

/* ============================================================
   ACCUEIL · les trois blocs repris de la maquette v3.7
   Lot 4 · 28/08/2026

   Portés depuis `docs 3/halles610-home-v3-7.html`. Une seule
   correction au passage : la maquette posait `transform:rotate()`
   sur les pastilles de l'esprit, alors que l'animation `float`
   pilote déjà `transform` et l'écrasait — les pastilles restaient
   droites. Ici la rotation passe par `--rot`, que `float` respecte.
   ============================================================ */

/* ---- 2. En ce moment ---------------------------------------
   Bandeau noir sous le hero : la prochaine soirée ou le prochain
   match, alimenté par l'agenda. Il n'est pas rendu du tout quand
   il n'y a rien à annoncer (voir index.php).                    */
.now-block{
  background:var(--c-ink); color:var(--c-paper);
  padding:40px 24px; position:relative;
  border-top:2px solid var(--c-orange);
}
.now-inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:auto 1fr auto;
  gap:32px; align-items:center;
}
.now-label{
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.2em; color:var(--c-yellow);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.now-label .pulse-dot{
  width:10px; height:10px; background:var(--c-mint);
  border-radius:50%; animation:pulse 1.5s infinite;
}
.now-main{ min-width:0; }
.now-title{
  font-family:var(--f-affiche); font-size:clamp(24px, 3vw, 34px);
  line-height:1.1; font-weight:400; margin-bottom:4px;
}
.now-sub{ font-size:14px; opacity:.8; }
.now-cta{ white-space:nowrap; }

@media(max-width:860px){
  .now-inner{ grid-template-columns:1fr; gap:20px; text-align:center; }
  .now-inner > *{ justify-self:center; }
}

/* ---- 3. Je viens pour… -------------------------------------
   Les cinq pastilles d'intention. C'est le dispositif de
   navigation de la maquette : sur l'accueil, on choisit par
   envie, pas par rubrique.                                     */
.intent-block{ background:var(--c-stone); padding:64px 24px; }
.intent-inner{ max-width:1100px; margin:0 auto; text-align:center; }
.intent-head{
  font-family:var(--f-affiche); font-size:clamp(36px, 5vw, 56px);
  line-height:1; font-weight:400; margin:0 0 48px; letter-spacing:-.01em;
}
.intent-head em{ font-style:italic; color:var(--c-orange); }
.intent-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:24px; max-width:820px; margin:0 auto;
}
.intent-sticker{
  aspect-ratio:1; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; padding:12px; text-align:center;
  font-family:var(--f-etiq); text-transform:uppercase; letter-spacing:.05em;
  border:3px solid rgba(0,0,0,.08);
  box-shadow:4px 4px 0 rgba(0,0,0,.2);
  transform:rotate(var(--rot, 0deg));
  transition:transform .2s ease, box-shadow .2s ease;
}
.intent-sticker:hover,
.intent-sticker:focus-visible{
  transform:rotate(var(--rot, 0deg)) translate(-2px,-2px) scale(1.03);
  box-shadow:6px 6px 0 rgba(0,0,0,.25);
}
.intent-sticker .emoji{ font-size:34px; line-height:1; margin-bottom:6px; display:block; }
.intent-sticker .label{ font-size:16px; line-height:1; }
.intent-sticker .sub{
  font-family:var(--f-mono); font-size:10px; font-weight:400;
  letter-spacing:.05em; margin-top:4px; text-transform:uppercase; opacity:.75;
}
/*  Chaque pastille a sa couleur et son inclinaison : c'est ce qui leur
    donne l'air d'avoir été collées à la main plutôt qu'alignées.        */
.intent-sticker.s-dej    { background:var(--c-yellow);  color:var(--c-ink);   --rot:-4deg; }
.intent-sticker.s-sortir { background:var(--c-magenta); color:var(--c-paper); --rot: 3deg; }
.intent-sticker.s-famille{ background:var(--c-mint);    color:var(--c-ink);   --rot:-2deg; }
.intent-sticker.s-sport  { background:var(--c-blue);    color:var(--c-paper); --rot: 5deg; }
.intent-sticker.s-courses{ background:var(--c-orange);  color:var(--c-paper); --rot:-3deg; }

@media(max-width:640px){
  .intent-grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }
}

/* ---- 6. L'esprit -------------------------------------------
   Le récit court, et la seule porte d'entrée vers /l-histoire
   depuis l'accueil.                                            */
.esprit-block{
  background:var(--c-cream); position:relative; overflow:hidden;
  padding:88px 24px;
}
.esprit-inner{
  max-width:760px; margin:0 auto; text-align:center;
  position:relative; z-index:2;
}
.esprit-inner .eyebrow{ justify-content:center; color:var(--c-orange); }
.esprit-inner h2{ color:var(--c-ink); margin-bottom:24px; }
.esprit-inner h2 em{
  font-style:italic; color:var(--c-orange);
  display:inline-block; transform:rotate(-2deg);
}
/*  ⚠️ `:not(.eyebrow)` — ET C'EST LE CORRECTIF, pas une coquetterie.
    L'œilleton est un `<p class="eyebrow">`. Une règle qui vise `p` tout court
    dans ce bloc l'emporte donc sur `.eyebrow` (0,1,1 contre 0,1,0), et
    l'œilleton héritait des 17 px du paragraphe au lieu de ses 11 px. Comme
    son interlettrage vaut 0,2 em, il grossissait dans la foulée : 3,4 px au
    lieu de 2,2. « Depuis 2022 · famille Romagnoli » ne ressemblait donc à
    aucun autre œilleton du site.                                          */
.esprit-inner p:not(.eyebrow){ font-size:17px; line-height:1.65; color:#333; margin-bottom:20px; }
.esprit-inner .btn{ margin-top:8px; }

/*  `.esprit-sticker-left` a été RETIRÉE le 01/09/2026, gabarit compris : à
    8 % du haut elle tombait sur l'œilleton « Depuis 2022 · famille
    Romagnoli » et en mangeait la première lettre. Le bloc est centré et son
    texte prend toute la largeur — il n'y a aucune zone libre à gauche à
    cette hauteur. Il n'en reste qu'une, en bas à droite.                  */
.esprit-sticker-right{
  position:absolute; width:110px; z-index:1; pointer-events:none;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.12));
  animation:float 6s ease-in-out infinite;
  bottom:18%; right:6%; --rot:12deg; animation-delay:-3s;
}
.esprit-sticker-right img{ width:100%; height:auto; display:block; }

@media(max-width:860px){
  .esprit-block{ padding:64px 20px; }
  .esprit-sticker-right{ width:80px; bottom:10%; right:3%; }
}

/* ============================================================
   L'ATTRIBUT hidden GAGNE TOUJOURS
   ------------------------------------------------------------
   Le navigateur applique `[hidden] { display:none }` dans sa
   feuille par défaut — c'est-à-dire avec la priorité la plus
   faible qui soit. La moindre règle de classe la bat.

   Concrètement : `.etalier-card { display:flex }` l'écrasait, et
   les filtres de la page Étaliers ne cachaient rien du tout. Le
   JavaScript posait bien `hidden = true`, les cartes restaient
   affichées. Même piège latent sur la barre de filtres, sur le
   message « aucun résultat » et sur le menu du téléphone.

   Cette règle referme le problème une fois pour toutes. C'est
   l'un des rares endroits où `!important` est la bonne réponse :
   masquer, c'est masquer.
   ============================================================ */
[hidden]{ display:none !important; }

/* ============================================================
   LES ÉTATS D'OUVERTURE — lot 4, 28/08/2026
   ------------------------------------------------------------
   Le vert qui clignote veut dire « c'est en train de se passer ».
   Il ne doit donc apparaître QUE dans ce cas. Une pastille verte
   pulsante à trois heures du matin, ou sur une soirée prévue dans
   trois semaines, rend toutes les autres illisibles.

   Trois couleurs, une seule règle : vert = maintenant,
   ambre = bientôt, gris = plus tard.
   ============================================================ */

/* ---- La pastille de l'en-tête ---- */
.status-pill.etat-ouvert  .dot{ background:var(--c-mint);   animation:pulse 2s infinite; }
.status-pill.etat-bientot .dot{ background:var(--c-yellow); animation:none; }
.status-pill.etat-ferme   .dot{ background:var(--c-stone);  animation:none; }
.status-pill.etat-ferme        { opacity:.75; }
/*  'inconnu' = les horaires saisis ne sont pas lisibles, on retombe sur le
    texte libre de l'admin. Il garde l'apparence d'origine.               */

/* ---- Le bandeau de l'accueil ----
    Ici la pastille verte clignote TOUJOURS — c'est la respiration du
    bandeau, décidée par Gabriel, pas un voyant d'alerte. Elle reprend le
    comportement de la maquette v3.7, qui est déjà défini plus haut avec le
    bloc `.now-label .pulse-dot`. Rien à surcharger, donc.

    Seul écart : quand la soirée est réellement en cours, l'étiquette passe
    au vert elle aussi, pour que « Actuellement » se distingue d'un coup
    d'œil de « Prochainement ».                                          */
.now-block.est-en-cours .now-label{ color:var(--c-mint); }

/* ============================================================
   LES FORMULAIRES PUBLICS — lot 5, 28/08/2026
   ------------------------------------------------------------
   Trois pages en portent un : /contact, /devenir-etalier et
   /newsletter. Ils partagent tout, jusqu'aux messages d'erreur.

   Deux règles tenues dans ce bloc :

   1. Le champ leurre est invisible pour l'œil ET pour le lecteur
      d'écran, mais il reste dans le document — un robot le
      remplit, un humain ne le voit jamais. `display:none` ne
      suffirait pas : certains robots l'ignorent justement parce
      qu'il est trop reconnaissable.

   2. Une erreur ne se signale jamais par la seule couleur. Le
      cadre rouge est doublé d'une phrase écrite sous le champ,
      sinon l'information n'existe pas pour qui ne distingue pas
      le rouge.
   ============================================================ */

.form-bloc{ max-width:760px; margin:0 auto; }
.form-bloc--etroit{ max-width:560px; }
.form-bloc .titre-section{ margin-bottom:24px; }

/* ---- Le champ leurre ---- */
/*  Hors de l'écran plutôt que masqué : il reste rempli par les robots,
    et `aria-hidden` plus `tabindex="-1"` le retirent du parcours clavier
    et de la synthèse vocale.                                          */
.champ-leurre{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ---- Le bandeau de réponse ---- */
.form-bandeau{
  margin:0 0 24px; padding:16px 20px;
  border:2px solid var(--c-ink); border-radius:12px;
  font-size:15px; line-height:1.55;
}
.form-bandeau strong{ display:block; font-family:var(--f-etiq);
  font-size:17px; letter-spacing:.02em; margin-bottom:4px; }
.form-bandeau.ok{ background:var(--c-mint); }
.form-bandeau.ko{ background:var(--c-yellow); }

/* ---- Les champs ---- */
.form{ display:grid; gap:18px; }
.form .form-row{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
.form label{
  display:block;
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--c-ink);
}
.form label small{ text-transform:none; letter-spacing:0; opacity:.6; }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea{
  display:block; width:100%; margin-top:7px; padding:12px 14px;
  font-family:var(--f-primary); font-size:16px;  /* 16px : en dessous, iOS zoome */
  color:var(--c-ink); background:var(--c-paper);
  border:2px solid var(--c-ink); border-radius:10px;
  text-transform:none; letter-spacing:0;
}
.form textarea{ resize:vertical; min-height:110px; line-height:1.6; }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible{
  outline:3px solid var(--c-orange); outline-offset:1px;
}
.form input.erreur,
.form select.erreur,
.form textarea.erreur{ border-color:var(--c-orange); background:#FFF6F3; }

/*  L'erreur écrite sous le champ. Le triangle la rend repérable même
    quand la couleur ne passe pas.                                     */
.form-erreur{
  display:block; margin-top:6px;
  font-family:var(--f-primary); font-size:14px; text-transform:none;
  letter-spacing:0; color:var(--c-orange-deep); font-weight:600;
}
.form-erreur::before{ content:'▲ '; font-size:11px; }

/* ---- La case de consentement ---- */
/*  Elle est volontairement plus visible qu'un champ ordinaire : c'est
    un choix que le visiteur doit voir avant de le faire.              */
.form-case{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 18px; background:var(--c-paper);
  border:2px solid var(--c-ink); border-radius:12px;
  font-family:var(--f-primary); font-size:15px; line-height:1.5;
  text-transform:none; letter-spacing:0; cursor:pointer;
}
.form-case input{ width:20px; height:20px; margin-top:2px; flex:0 0 auto; accent-color:var(--c-orange); }
.form-case small{ display:block; margin-top:4px; font-size:13px; opacity:.7; }

/* ---- La mention RGPD ---- */
.form-mention{
  margin:0; font-size:13px; line-height:1.55; opacity:.75;
}
.form-mention a{ color:var(--c-blue); }

.form-apres{ margin-top:28px; font-size:15px; line-height:1.6; text-align:center; }
.form-apres a{ color:var(--c-blue); }

@media(max-width:640px){
  .form .form-row{ grid-template-columns:1fr; }
}

/* ============================================================
   LES PAGES VENIR — lot 6, 29/08/2026
   ------------------------------------------------------------
   /dejeuner, /soirees et /en-famille assemblent des blocs qui
   existent déjà : la grille d'étaliers, les lignes d'agenda.
   Il ne leur manquait qu'un bloc d'infos utiles, pour qu'un
   visiteur arrivé par une recherche n'ait pas à repartir vers
   une autre page pour savoir à quelle heure venir.
   ============================================================ */

.infos-rapides{
  display:grid; gap:2px; margin-top:26px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  background:var(--c-ink);           /* les 2px de gap font les filets */
  border:2px solid var(--c-ink); border-radius:16px; overflow:hidden;
}
.infos-rapides > div{
  background:var(--c-paper); padding:20px 22px;
}
.ir-label{
  display:block; margin-bottom:6px;
  font-family:var(--f-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--c-orange);
}
.infos-rapides strong{
  font-family:var(--f-etiq); font-size:17px; letter-spacing:.02em;
  line-height:1.25; font-weight:400; display:block;
}

@media(max-width:560px){
  .infos-rapides{ grid-template-columns:1fr; }
}

/* ---- Les pastilles des pages intérieures (audit du 29/08/2026) ----
   La DA héritée est sticker-driven : l'accueil en portait trois depuis
   le lot 2, les pages intérieures n'en avaient aucune. L'attribution
   page par page vient du document d'héritage.

   Elles flottent en décor derrière le titre, jamais devant : le hero
   garde `overflow:hidden` pour qu'elles ne débordent pas de la bande
   orange, et `z-index` les place sous le texte.                       */
.page-hero{ position:relative; overflow:hidden; }
.page-hero .page-hero-inner{ position:relative; z-index:2; }
.hero-sticker{
  position:absolute; z-index:1; width:130px; pointer-events:none;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.14));
  animation:float 6s ease-in-out infinite;
  opacity:.9;
}
.hero-sticker img{ width:100%; height:auto; display:block; }
.hs-gauche{ top:8%;    left:3%;   --rot:-11deg; }
.hs-droite{ bottom:8%; right:3.5%; --rot:9deg; animation-delay:-3s; }

@media(max-width:900px){
  .hero-sticker{ width:88px; opacity:.55; }
  .hs-gauche{ top:4%; left:-2%; }
  .hs-droite{ bottom:4%; right:-2%; }
}

/* ============================================================
   BLOCS RETROUVÉS À L'AUDIT DU 29/08/2026
   ------------------------------------------------------------
   Comparaison page à page avec les maquettes des Chantiers 1
   et 2. Ces blocs y figuraient et manquaient au site :
   le kit presse, La Kitch, les plateformes d'avis, le bloc de
   réclamation, et la lettre d'information.
   ============================================================ */

/* ---- Le kit presse ---- */
.kit-liste{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:2px;
  background:var(--c-ink); border:2px solid var(--c-ink); border-radius:16px; overflow:hidden; }
.kit-liste li{ background:var(--c-paper); padding:18px 22px; }
.kit-quoi{
  display:block; font-family:var(--f-etiq); font-size:17px;
  letter-spacing:.02em; margin-bottom:5px;
}
.kit-detail{ display:block; font-size:14.5px; line-height:1.55; opacity:.8; }

/* ---- La Kitch : la seule page où l'on force le ton ---- */
.kitch-block{ background:var(--c-ink); color:var(--c-paper); }
.kitch-inner{ max-width:720px; }
.kitch-block .eyebrow{ color:var(--c-yellow); }
.kitch-block .titre-section{ color:var(--c-paper); }
.kitch-block .titre-section em{ color:var(--c-yellow); }
/*  Troisième et dernier cas, trouvé en balayant les quinze pages du site :
    « Le rendez-vous du mois » sortait lui aussi en 17 px.                 */
.kitch-block p:not(.eyebrow){ font-size:17px; line-height:1.7; }

/* ---- Les plateformes d'avis ---- */
.plateformes{
  display:grid; gap:16px; margin-top:28px;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
.plateforme{
  display:block; text-decoration:none; color:inherit; text-align:center;
  background:var(--c-paper); border:2px solid var(--c-ink); border-radius:14px;
  padding:22px 18px; box-shadow:4px 4px 0 var(--c-ink);
  transition:transform .16s ease, box-shadow .16s ease;
}
.plateforme:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--c-ink); }
.pf-nom{ display:block; font-family:var(--f-affiche); font-size:22px; line-height:1.1; }
.pf-quoi{
  display:block; margin-top:7px;
  font-family:var(--f-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; opacity:.65;
}

/* ---- Le bloc de réclamation ---- */
/*  Fond crème et non orange : ce n'est pas une alerte, c'est une porte
    ouverte. L'orange le ferait lire comme un avertissement.           */
.reclam-block{ background:var(--c-cream); }

/* ---- La lettre d'information ---- */
.news-block{ background:var(--c-orange); color:var(--c-paper); }
.news-inner{ max-width:640px; }
.news-block .eyebrow{ color:var(--c-paper); }
.news-block .eyebrow::before{ background:var(--c-yellow); }
.news-block .titre-section{ color:var(--c-paper); }
.news-block .titre-section em{ color:var(--c-yellow); }
/*  Même correctif, même cause : « Ne rien rater » sortait en 17 px.        */
.news-block p:not(.eyebrow){ font-size:17px; line-height:1.65; }

/* ============================================================
   TROIS CORRECTIONS MOBILE — 29/08/2026
   Relevées par Gabriel sur iPhone.
   ============================================================ */

/* ------------------------------------------------------------
   1. LE MENU DU TÉLÉPHONE
   ------------------------------------------------------------
   Il n'avait AUCUNE règle : des liens bruts, soulignés, qui se
   suivaient en ligne comme un paragraphe. Le HTML était là
   depuis le lot 2, la CSS n'a jamais suivi.

   Panneau plein écran sous l'en-tête, un lien par ligne, cibles
   de 52 px de haut — la taille minimale pour un pouce.
   ------------------------------------------------------------ */
#menu-mobile{
  position:fixed; inset:0; z-index:80;
  padding:96px 0 32px;
  background:var(--c-ink); color:var(--c-paper);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#menu-mobile a{
  display:flex; align-items:center; min-height:52px;
  padding:0 26px;
  color:var(--c-paper); text-decoration:none;
  font-family:var(--f-etiq); font-size:21px;
  letter-spacing:.02em; text-transform:uppercase;
  border-bottom:1px solid rgba(250,247,240,.12);
}
#menu-mobile a:first-child{ border-top:1px solid rgba(250,247,240,.12); }
#menu-mobile a:active,
#menu-mobile a:focus-visible{ background:var(--c-orange); outline:none; }

/*  Le bouton ☰ doit rester cliquable AU-DESSUS du panneau, pour
    refermer. Sans ça, le menu ouvert se referme à l'aveugle.   */
.site-header{ position:relative; z-index:90; }

/* ------------------------------------------------------------
   2. « JE VIENS POUR… » SUR TÉLÉPHONE
   ------------------------------------------------------------
   Cinq cercles de 180 px sur deux colonnes : trois rangées, plus
   d'un écran entier avant d'atteindre le contenu. Et « EN
   FAMILLE », sur deux lignes, forçait sa pastille en ovale —
   `aspect-ratio:1` cède quand le contenu est plus haut que large.

   Ils passent en rangée qui défile : la même forme, le même
   esprit collé-main, mais une seule rangée au lieu de trois.
   ------------------------------------------------------------ */
@media(max-width:640px){
  .intent-block{ padding:44px 0; }
  .intent-inner{ text-align:left; }
  .intent-head{ margin:0 20px 24px; }

  .intent-grid{
    display:flex; gap:14px;
    grid-template-columns:none;      /* on sort de la grille */
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding:14px 20px 18px;          /* l'ombre portée a besoin de place */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .intent-grid::-webkit-scrollbar{ display:none; }

  /*  Taille FIXE, pas un ratio : c'est ce qui empêche l'ovale
      quand le libellé passe sur deux lignes.                   */
  .intent-sticker{
    flex:0 0 132px; width:132px; height:132px; aspect-ratio:auto;
    scroll-snap-align:center; padding:10px;
  }
  .intent-sticker .emoji{ font-size:27px; margin-bottom:4px; }
  .intent-sticker .label{ font-size:14px; }
  .intent-sticker .sub{ font-size:9px; margin-top:3px; }
}

/* ------------------------------------------------------------
   3. LES PASTILLES DE LA CHARTE DANS LES EN-TÊTES
   ------------------------------------------------------------
   Elles passaient SOUS le contenu : au bas d'un en-tête, la
   pastille disparaissait derrière les puces d'information, à
   moitié mangée. Elles passent au-dessus.

   Et sur téléphone, une seule : deux, dans une bande deux fois
   plus étroite, se retrouvent forcément sur le texte.
   ------------------------------------------------------------ */
.hero-sticker{ z-index:3; }

@media(max-width:900px){
  /*  Celle du bas est celle qui gênait — c'est elle qui tombait
      sur les puces. On garde celle du haut, dans l'angle, où il
      n'y a jamais rien.                                        */
  .hs-droite{ display:none; }
  .hero-sticker{ width:74px; opacity:.85; }
  .hs-gauche{ top:10px; left:8px; --rot:-11deg; }
}


/* =========================================================================
   LE PLAN DES HALLES — 29/08/2026
   ========================================================================= */

/*  Le fond du bloc reprend celui du dessin, qui est opaque : sans ça, on
    verrait un rectangle sombre posé sur la page au lieu d'un plan qui s'y
    fond.                                                                  */
.plan-block{ background:var(--c-ink); color:var(--c-paper); }
.plan-block .titre-section{ color:var(--c-paper); }

/*  ⚠️ LA LARGEUR EST BORNÉE, et ce n'est pas un détail esthétique.
    Le dessin a été recadré le 31/08/2026 : il est passé d'une image 16/9
    pleine de vide sombre à un fichier de 985 x 1008, donc PRESQUE CARRÉ.
    Étalé sur les 1200 px de `.section-inner`, il serait à la fois agrandi
    au-delà de sa définition — donc flou — et haut de plus de 1200 px, soit
    un écran entier de plan. On le pose donc à sa taille utile, centré.     */
.plan-halle{ margin:28px auto 0; line-height:0; max-width:760px; }
.plan-halle img{ display:block; width:100%; height:auto; }

/*  Le bandeau de /etaliers. Il vient après quatorze cartes : il doit se
    lire au passage, pas se contempler.

    D'où DEUX COLONNES sur grand écran — titre à gauche, plan à droite. Une
    première version le posait comme l'accueil, en pleine largeur : elle
    faisait 779 px de haut, soit un écran entier de plan pour ce qui devait
    être une bande. Le dessin est presque carré, il ne se raccourcit qu'en
    se rétrécissant, et il ne se rétrécit qu'en cédant de la place à côté.  */
.plan-block--bandeau{ padding-top:44px; padding-bottom:44px; }
.plan-block--bandeau .plan-halle{ max-width:400px; margin:0; }

@media(min-width:860px){
  .plan-block--bandeau .section-inner{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:40px;
  }
  /*  L'œilleton et le titre occupent la colonne de gauche, l'un sous
      l'autre ; le plan tient la colonne de droite sur les deux rangs.     */
  .plan-block--bandeau .eyebrow{ grid-column:1; grid-row:1; align-self:end; }
  .plan-block--bandeau .titre-section{ grid-column:1; grid-row:2; align-self:start; margin:0; }
  .plan-block--bandeau .plan-halle{ grid-column:2; grid-row:1 / span 2; }
}

/*  Sous 860 px, la grille ne s'applique pas : le plan repasse sous le
    titre, centré, et reprend un peu de largeur puisqu'il l'a pour lui.    */
@media(max-width:859px){
  .plan-block--bandeau .plan-halle{ margin:24px auto 0; max-width:460px; }
}

/* =========================================================================
   LA FICHE ÉTALIER : BANDEAU ET CONTACTS — 31/08/2026
   ========================================================================= */

/*  La bande crème qui suit le titre de la fiche : la description, puis les
    moyens de joindre l'étalier. Elle sépare l'identité (bloc orange) du
    détail (horaires, plat signature), et donne au passage le fond clair qui
    manquait entre deux blocs.                                             */
.fiche-contacts{ margin-top:26px; }
.fiche-contacts .eyebrow{ margin-bottom:12px; }

/*  Les contacts sont TOUS FACULTATIFS : selon la fiche, ce rang contient un
    bouton ou six. `flex-wrap` est donc obligatoire, et non une précaution —
    six boutons ne tiennent pas sur une ligne de téléphone.                */
.fiche-contacts .ctas{ flex-wrap:wrap; gap:12px; }

/*  La mention « À emporter » quand aucun numéro ne permet d'en faire une
    action. Elle ne doit pas ressembler à un bouton : ce serait promettre un
    clic qui n'existe pas.                                                 */
.fiche-contacts .filter-pill{ cursor:default; align-self:center; }

/* ---------- La bande de photos — 29/08/2026 ----------

   Elle réutilise `.etaliers-scroller` : même largeur de carte, même rapport
   16/9, même accroche au défilement. C'est voulu — l'accueil a déjà son
   rythme, on ne lui en donne pas un second pour trois photos.

   Elle s'intercale entre l'agenda et le plan, deux blocs sombres. Son fond
   est donc CLAIR : c'est ce qui lui donne sa raison d'être, respirer entre
   les deux.                                                              */
.photos-block{ background:var(--c-cream); }

/*  LE FORMAT EST CELUI DE LA CARTE ÉTALIER, PAS DE SON IMAGE.

    ⚠️ ET LA CARTE ÉTALIER N'A PAS DE RAPPORT FIXE. Elle fait 260 px de large,
    et sa hauteur est celle que lui impose la PLUS LONGUE des descriptions :
    `.etalier-card p` porte `flex:1`, le texte n'est ni tronqué ni borné, et
    toutes les cartes de la rangée s'étirent à la même hauteur. Un étalier qui
    gagne une phrase les allonge toutes.

    Mesures réelles, avec les descriptions du projet : 260 x 328, soit 0,79.
    (Une première mesure donnait 0,84 : elle avait été faite avec un texte
    d'essai trop court. Gabriel a eu raison d'en douter.)

    On retient donc **3/4**, la fraction simple la plus proche de 0,79 — et
    surtout le format des photos de téléphone, qui seront ainsi montrées
    presque sans recadrage.

    Une seule ligne à changer pour en décider autrement.                   */
.photos-block{ --photo-format: 3 / 4; }

.photo-card{
  margin:0; border-radius:16px; overflow:hidden;
  background:var(--c-stone);
  aspect-ratio:var(--photo-format);
}
.photo-card img{
  display:block; width:100%; height:100%;
  object-fit:cover;
}


/* =========================================================================
   LE DOSSIER DE PRESSE — 01/09/2026
   ========================================================================= */

.dossier-presse{ background:var(--c-cream); }

/*  Deux colonnes : la couverture à gauche, le texte à droite. Le visuel est
    un rendu carré du document — il n'a pas à occuper la moitié de l'écran,
    d'où une colonne bornée plutôt qu'un `1fr` qui le laisserait grandir.   */
.dossier-grid{
  display:grid; grid-template-columns:minmax(220px,320px) 1fr;
  gap:44px; align-items:center;
}
@media(max-width:820px){
  .dossier-grid{ grid-template-columns:1fr; gap:28px; }
  /*  Sur mobile la couverture passe au-dessus, et se borne : à pleine
      largeur, une image carrée mange un écran entier avant le texte.      */
  .dossier-visuel{ max-width:260px; margin:0 auto; }
}

.dossier-visuel{ margin:0; line-height:0; }
.dossier-visuel img{
  width:100%; height:auto; display:block;
  border-radius:16px; border:2px solid var(--c-ink);
  box-shadow:6px 6px 0 var(--c-ink);
}

.dossier-texte .titre-section{ margin-bottom:14px; }

/*  L'accroche du document, citée telle quelle. En italique et en orange :
    c'est une citation, pas une phrase du site.                            */
.dossier-accroche{
  font-family:var(--f-affiche); font-style:italic;
  font-size:clamp(19px,2.4vw,24px); line-height:1.25;
  color:var(--c-orange); margin:0 0 16px;
}

/*  Le lien discret des bas de page — /l-histoire et /sport-clubs.
    DISCRET veut dire : une ligne de texte, pas un bouton. Il ne doit pas
    entrer en concurrence avec les actions de la page.                     */
.lien-dossier{
  margin:26px 0 0; font-size:14px; line-height:1.6; opacity:.75;
  text-align:center;
}
.lien-dossier a{ color:inherit; text-underline-offset:3px; }
.lien-dossier a:hover{ color:var(--c-orange); }
.lien-dossier-meta{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; opacity:.7; display:block; margin-top:4px;
}

/* =========================================================================
   LES ÉTIQUETTES-MOTS — 01/09/2026
   -------------------------------------------------------------------------
   Trois nouvelles pièces de la charte : « Soleil sur la vie », « Ça sent
   bon », « Cheeeese ». Ce ne sont pas des pastilles rondes comme les trois
   autres : ce sont des bandeaux de mots, larges et plats.

   ⚠️ UNE PAR SECTION, JAMAIS DEUX. Elles sont là pour donner un accent, pas
      pour meubler. Trois sur le site entier.

   ⚠️ ET ELLES RESTENT PETITES. Leur largeur est bornée en `clamp` autour de
      160 px : à 964 px de large dans le fichier d'origine, laissées libres
      elles occuperaient le tiers d'une section.
   ========================================================================= */
.etiquette{
  position:absolute; pointer-events:none; z-index:4;
  width:clamp(120px,15vw,190px);
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.10));
  transform:rotate(var(--rot,-6deg));
}
.etiquette img{ width:100%; height:auto; display:block; }

/*  Les sections qui en portent une doivent être un repère de position,
    sinon l'étiquette se placerait par rapport à la page entière.          */
.a-etiquette{ position:relative; }

.etiq-haut-droite{ top:18px;  right:3%;  --rot:-7deg; }
.etiq-bas-gauche { bottom:18px; left:3%;  --rot:6deg;  }

/*  Sous 900 px, les sections se resserrent et il n'y a plus de marge libre :
    l'étiquette tomberait sur le texte. On la retire plutôt que de la
    rapetisser jusqu'à l'illisible.                                        */
@media(max-width:900px){
  .etiquette{ display:none; }
}


/*  L'accroche du bandeau d'une fiche étalier — 01/09/2026.

    `phrase_cle` est vide sur les quatorze fiches aujourd'hui : ce style ne
    sert donc à rien pour l'instant. Il existe pour que le jour où une
    accroche est saisie, elle ne ressemble pas à un second chapeau posé
    au-dessus du premier. Plus petite, en majuscules espacées, elle se lit
    comme une signature.                                                    */
.page-hero .page-accroche{
  font-family:var(--f-affiche); font-style:italic;
  font-size:clamp(17px,2vw,21px); line-height:1.3;
  color:var(--c-yellow); margin:0 auto 6px; max-width:640px;
}

/*  La règle `.page-meta + .page-lead` posée le 01/09 a été RETIRÉE le même
    jour : la fiche suit désormais l'ordre commun — chapeau puis pastilles —
    et cet enchaînement n'existe plus nulle part.                          */

/*  L'icône dessinée dans le titre d'une fiche étalier — 02/09/2026.

    ⚠️ SA HAUTEUR SUIT CELLE DU TITRE, en `em`. Le titre est en
    `clamp(48px, 7vw, 92px)` : une taille fixe en pixels serait juste sur un
    écran et fausse sur tous les autres.

    Elle vaut 1,15 em, un peu PLUS qu'un emoji. Le dessin est un paysage à
    deux personnages : à la hauteur exacte d'un emoji, les visages
    deviendraient illisibles.                                              */
.page-hero h1 .titre-icone{
  height:1.15em; width:auto; display:inline-block;
  vertical-align:-0.22em;      /* aligné sur la ligne de base du texte */
  margin-right:.12em;
}