/* ==========================================================================
   Girondins de Bordeaux Omnisports · charte sur mesure
   Marine du blason + or, typographie Archivo large (écho au lettrage du logo),
   motif du chevron (le « V » du blason) et traînées de lumière des photos.
   Les couleurs viennent de brand.palette_colors (site.json).
   ========================================================================== */
:root {
  --navy: #202145;
  --navy-deep: #13142E;
  --gold: #C9A24B;
  --gold-ink: #846b31;
  --paper: #F7F5EF;
  --sand: #E9E2CF;
  --ink: #17182e;
  --muted: #565873;
  --line: rgba(32, 33, 69, .14);
  --white: #fff;

  /* tokens attendus par le socle des modules (blog) */
  --c-primary: var(--navy);
  --c-accent: var(--gold);
  --c-accent-ink: var(--gold-ink);
  --c-accent-soft: rgba(201, 162, 75, .14);
  --c-text: var(--ink);
  --c-muted: var(--muted);
  --c-on-primary: #fff;
  --c-on-accent: #1c1c1c;
  --f-head: 'Archivo', system-ui, sans-serif;
  --r: 4px;

  --f: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --sec: clamp(72px, 10vw, 136px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hh: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hh); }
body {
  margin: 0; font-family: var(--f); font-size: 17px; line-height: 1.65; color: var(--ink);
  background: var(--paper); -webkit-font-smoothing: antialiased; font-stretch: 100%;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f); line-height: 1.05; letter-spacing: -.01em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--gold); color: var(--navy-deep);
  padding: 10px 16px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap, .container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: var(--sec) 0; }

/* ---------- typographie ---------- */
.display, .h1 {
  font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.3rem, 6.4vw, 5.6rem); line-height: .96; letter-spacing: -.005em;
}
.h2, .section h2 {
  font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.02;
}
.h3 { font-stretch: 112%; font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.2; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink);
  font-stretch: 112%;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.on-dark .eyebrow, .eyebrow--light { color: var(--gold); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.6; color: var(--muted); max-width: 62ch; }
.on-dark .lead { color: rgba(255,255,255,.78); }
.or { color: var(--gold); }
.on-light .or { color: var(--gold-ink); }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border: 2px solid var(--gold); background: var(--gold); color: var(--navy-deep);
  font-weight: 700; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; font-stretch: 112%;
  text-decoration: none; border-radius: 0; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:hover { background: transparent; color: var(--gold); }
.on-light .btn:hover, .btn--navy:hover { color: var(--navy); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--navy:hover { background: transparent; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn .fl { transition: transform .25s var(--ease); }
.btn:hover .fl { transform: translateX(4px); }
.lien-fl { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--gold-ink); font-stretch: 112%; }
.on-dark .lien-fl, .on-navy .lien-fl { color: var(--gold); }
.lien-fl::after { content: "→"; transition: transform .25s var(--ease); }
.lien-fl:hover::after { transform: translateX(4px); }

/* ---------- en-tête ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hh);
  color: #fff; transition: background .35s, box-shadow .35s, height .35s;
}
.site-header.scrolled, .site-header.is-solid { background: var(--navy-deep); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.brand-mot { height: 34px; width: auto; filter: brightness(0) invert(1); }
.nav { display: flex; align-items: center; gap: 8px; }
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-menu > li { position: relative; }
.nav-menu a:not(.btn), .nav-sous__btn {
  display: block; padding: 10px 12px; background: none; border: 0; color: inherit; cursor: pointer;
  font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; font-stretch: 112%;
  position: relative;
}
.nav-menu a:not(.btn)::after, .nav-sous__btn::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-menu a:not(.btn):hover::after, .nav-menu a[aria-current="page"]::after, .nav-sous__btn:hover::after { transform: scaleX(1); }
.nav-sous__btn i { display: inline-block; margin-left: 6px; width: 6px; height: 6px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.nav-sous__liste { list-style: none; margin: 0; padding: 10px 0; position: absolute; top: 100%; left: 0; min-width: 250px;
  background: var(--navy-deep); border-top: 2px solid var(--gold); box-shadow: 0 18px 40px rgba(0,0,0,.3);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.nav-sous:hover .nav-sous__liste, .nav-sous:focus-within .nav-sous__liste, .nav-sous.is-open .nav-sous__liste { opacity: 1; visibility: visible; transform: none; }
.nav-sous__liste a:not(.btn) { padding: 10px 20px; }
.nav-sous__liste a:not(.btn)::after { left: 20px; right: auto; width: 24px; }
.nav-cta { margin-left: 10px; padding: 12px 18px; font-size: .74rem; }
.nav-toggle { display: none; width: 46px; height: 46px; background: none; border: 0; color: inherit; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; transition: transform .3s, opacity .3s; }
.nav-toggle span:nth-child(1) { top: 17px; } .nav-toggle span:nth-child(2) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: block; z-index: 2; }
  .nav-menu {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch; justify-content: center; gap: 0;
    padding: calc(var(--hh) + 10px) var(--gut) 40px; background: var(--navy-deep); overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .nav-menu.open { opacity: 1; visibility: visible; }
  .nav-menu a:not(.btn), .nav-sous__btn { font-size: 1.05rem; padding: 12px 0; text-align: left; width: 100%; }
  .nav-menu a:not(.btn)::after, .nav-sous__btn::after { left: 0; right: auto; width: 30px; }
  .nav-sous__btn i { display: none; }
  .nav-sous__liste { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    background: none; padding: 0 0 6px 18px; min-width: 0; }
  .nav-sous__liste a:not(.btn) { font-size: .9rem; padding: 8px 0; color: rgba(255,255,255,.75); }
  .nav-cta { margin: 20px 0 0; align-self: flex-start; }
  body.menu-ouvert { overflow: hidden; }
}

/* ---------- chevron (le V du blason) & traînées ---------- */
.chevron {
  position: absolute; pointer-events: none; aspect-ratio: 2 / 1;
  background: currentColor; clip-path: polygon(0 0, 50% 64%, 100% 0, 100% 36%, 50% 100%, 0 36%);
}
.trainee { position: absolute; pointer-events: none; fill: none; stroke: currentColor; }

/* ---------- héros ---------- */
.hero { position: relative; min-height: min(100svh, 940px); display: flex; align-items: flex-end; color: #fff;
  background: var(--navy-deep); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14,15,38,.94) 0%, rgba(14,15,38,.72) 38%, rgba(14,15,38,.1) 72%),
              linear-gradient(0deg, rgba(14,15,38,.85) 0%, rgba(14,15,38,0) 45%); }
.hero__contenu { padding-top: calc(var(--hh) + 60px); padding-bottom: clamp(56px, 9vw, 110px); }
.hero__annee { font-size: .8rem; font-weight: 700; letter-spacing: .3em; color: var(--gold); margin-bottom: 22px; display: block; font-stretch: 125%; }
.hero h1 { max-width: 13ch; }
.hero h1 .or { display: block; }
.hero__texte { margin: 28px 0 36px; max-width: 46ch; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: rgba(255,255,255,.84); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__defile { position: absolute; right: var(--gut); bottom: 40px; writing-mode: vertical-rl; font-size: .7rem; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 14px; }
.hero__defile::after { content: ""; width: 1px; height: 60px; background: linear-gradient(var(--gold), transparent); }
@media (max-width: 820px) {
  .hero::before { background: linear-gradient(0deg, rgba(14,15,38,.96) 0%, rgba(14,15,38,.7) 50%, rgba(14,15,38,.25) 100%); }
  .hero__media img { object-position: 62% 20%; }
  .hero__defile { display: none; }
}

/* héros des pages intérieures */
.page-hero { position: relative; color: #fff; background: var(--navy-deep); overflow: hidden; isolation: isolate;
  padding: calc(var(--hh) + clamp(56px, 8vw, 110px)) 0 clamp(56px, 8vw, 100px); }
.page-hero--photo { min-height: min(78svh, 720px); display: flex; align-items: flex-end; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14,15,38,.95) 0%, rgba(14,15,38,.65) 45%, rgba(14,15,38,.05) 80%); }
.page-hero .chevron { color: var(--navy); width: min(70vw, 900px); right: -12vw; bottom: -14%; z-index: -1; opacity: .9; }
.page-hero .trainee { color: var(--gold); opacity: .35; right: -5%; top: 10%; width: 70%; z-index: -1; }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 24px; }
.fil { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 26px; font-stretch: 112%; }
.fil a { text-decoration: none; } .fil a:hover { color: var(--gold); }
.fil span[aria-hidden] { margin: 0 8px; color: var(--gold); }
@media (max-width: 820px) {
  .page-hero--photo::before { background: linear-gradient(0deg, rgba(14,15,38,.96) 10%, rgba(14,15,38,.4) 100%); }
}

/* ---------- surfaces ---------- */
.on-dark { background: var(--navy-deep); color: #fff; }
.on-navy { background: var(--navy); color: #fff; }
.on-light { background: var(--paper); }
.on-sand { background: color-mix(in srgb, var(--sand) 55%, var(--paper)); }
.sec-tete { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-tete .lead { margin: 0; }
@media (max-width: 820px) { .sec-tete { grid-template-columns: 1fr; } }

/* ---------- bandeau des chiffres ---------- */
.chiffres { position: relative; overflow: hidden; isolation: isolate; }
.chiffres__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.chiffres__liste li { padding: clamp(28px, 4vw, 48px) 24px; border-left: 1px solid rgba(255,255,255,.12); }
.chiffres__liste li:first-child { border-left: 0; padding-left: 0; }
.chiffres__n { display: block; white-space: nowrap; font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 800; font-stretch: 125%; color: var(--gold); line-height: 1; }
.chiffres__l { display: block; margin-top: 10px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
@media (max-width: 820px) {
  .chiffres__liste { grid-template-columns: 1fr 1fr; }
  .chiffres__liste li { padding: 24px 16px; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .chiffres__liste li:nth-child(odd) { padding-left: 0; }
}

/* ---------- pôles (accueil) ---------- */
.poles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.pole { position: relative; grid-column: span 2; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px; color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; background: var(--navy); }
.pole--large { grid-column: span 3; min-height: 460px; }
.pole__media { position: absolute; inset: 0; z-index: -2; }
.pole__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pole::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14,15,38,.95) 0%, rgba(14,15,38,.35) 60%, rgba(14,15,38,.1) 100%); }
.pole--graphique { background: var(--navy); }
.pole--graphique::before { background: none; }
.pole--graphique .chevron { color: rgba(255,255,255,.035); width: 130%; left: -15%; top: -6%; z-index: -1; transition: transform .9s var(--ease); }
.pole--or { background: var(--gold); color: var(--navy-deep); }
.pole--or .chevron { color: rgba(32,33,69,.06); }
.pole--or .pole__num, .pole--or .lien-fl { color: var(--navy-deep); }
.pole__num { position: absolute; top: 26px; left: 30px; font-size: .74rem; font-weight: 700; letter-spacing: .24em; color: var(--gold); font-stretch: 125%; }
.pole h3 { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.05; }
.pole p { margin: 12px 0 18px; font-size: .97rem; color: rgba(255,255,255,.8); max-width: 40ch; }
.pole--or p { color: rgba(23,24,46,.8); }
.pole .lien-fl { color: var(--gold); }
.pole:hover .pole__media img { transform: scale(1.05); }
.pole:hover .chevron { transform: translateY(-10px); }
@media (max-width: 1000px) { .pole, .pole--large { grid-column: span 3; } }
@media (max-width: 640px) { .poles { grid-template-columns: 1fr; } .pole, .pole--large { grid-column: auto; min-height: 320px; } }

/* ---------- split texte / visuel ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split--inverse .split__media { order: -1; }
.split__media { position: relative; isolation: isolate; } /* garde le cadre doré (::after, z-index -1) visible une fois l'apparition finie */
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--large img { aspect-ratio: 16 / 11; }
.split__media::after { content: ""; position: absolute; left: -16px; bottom: -16px; width: 42%; height: 42%; border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold); z-index: -1; }
.split__texte .h2 { margin-bottom: 26px; }
.split__texte p { color: var(--muted); }
.on-dark .split__texte p, .on-navy .split__texte p { color: rgba(255,255,255,.78); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--inverse .split__media { order: 0; } }

/* panneau graphique (pages sans photo) */
.panneau { position: relative; aspect-ratio: 4 / 5; background: var(--navy); color: #fff; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 48px); }
.panneau .chevron { color: rgba(255,255,255,.06); width: 140%; left: -20%; top: 4%; z-index: -1; }
.panneau .trainee { color: var(--gold); opacity: .55; left: -10%; top: 6%; width: 120%; z-index: -1; }
.panneau__grand { font-size: clamp(3.4rem, 8vw, 6.8rem); font-weight: 800; font-stretch: 125%; line-height: .9; color: var(--gold); }
.panneau__petit { margin-top: 14px; font-size: .86rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); }

/* ---------- liste de points ---------- */
.points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.points li { position: relative; padding-left: 34px; }
.points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 18px; height: 9px; background: var(--gold);
  clip-path: polygon(0 0, 50% 64%, 100% 0, 100% 36%, 50% 100%, 0 36%); }
.points strong { display: block; color: var(--ink); font-stretch: 112%; }
.on-dark .points strong, .on-navy .points strong { color: #fff; }

/* ---------- cartes (grille flex, dernière ligne centrée) ---------- */
.cartes { --gap: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.cartes > * { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); }
.cartes--2 > * { flex-basis: calc((100% - var(--gap)) / 2); }
@media (max-width: 960px) { .cartes > * { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 620px) { .cartes > * { flex-basis: 100%; } }
.carte { position: relative; background: #fff; padding: clamp(26px, 3vw, 38px); border-top: 3px solid var(--gold);
  box-shadow: 0 1px 0 var(--line); }
.carte__n { font-size: .74rem; font-weight: 700; letter-spacing: .22em; color: var(--gold-ink); font-stretch: 125%; }
.carte h3 { margin: 14px 0 12px; }
.carte p { color: var(--muted); margin: 0; }
.carte .lien-fl { margin-top: 18px; }
.on-dark .carte, .on-navy .carte { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.on-dark .carte p, .on-navy .carte p { color: rgba(255,255,255,.75); }
.on-dark .carte__n, .on-navy .carte__n { color: var(--gold); }

/* ---------- sports de raquette ---------- */
.sports { display: grid; gap: clamp(64px, 9vw, 120px); }
.sport { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.sport:nth-child(even) .sport__media { order: 2; }
.sport__media { position: relative; overflow: hidden; background: var(--navy-deep); }
.sport__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.sport__badge { position: absolute; top: 18px; left: 18px; background: var(--gold); color: var(--navy-deep); padding: 7px 12px;
  font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-stretch: 112%; }
.sport__nom { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; font-stretch: 125%; text-transform: uppercase; line-height: .95; }
.sport__nom small { display: block; font-size: .8rem; letter-spacing: .24em; color: var(--gold-ink); margin-bottom: 14px; font-weight: 700; }
.sport__texte p { margin-top: 20px; color: var(--muted); }
@media (max-width: 900px) { .sport { grid-template-columns: 1fr; } .sport:nth-child(even) .sport__media { order: 0; } }

/* ---------- sections fédérales ---------- */
.federales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
.federale { padding: clamp(32px, 4vw, 52px) clamp(20px, 3vw, 40px) clamp(32px, 4vw, 52px) 0; border-right: 1px solid rgba(255,255,255,.14); }
.federale + .federale { padding-left: clamp(20px, 3vw, 40px); }
.federale:last-child { border-right: 0; }
.federale h3 { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 16px 0 14px; }
.federale p { color: rgba(255,255,255,.76); }
@media (max-width: 900px) {
  .federales { grid-template-columns: 1fr; }
  .federale, .federale + .federale { padding: 32px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
}

/* ---------- chronologie (histoire) ---------- */
.chrono { list-style: none; margin: 0; padding: 0; position: relative; }
.chrono::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--gold), rgba(201,162,75,.15)); }
.chrono li { position: relative; display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 0 0 clamp(36px, 5vw, 56px) 40px; }
.chrono li::before { content: ""; position: absolute; left: -6px; top: 10px; width: 14px; height: 14px; background: var(--paper); border: 3px solid var(--gold); border-radius: 50%; }
.chrono__date { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 800; font-stretch: 125%; color: var(--navy); line-height: 1; }
.chrono h3 { margin-bottom: 10px; }
.chrono p { color: var(--muted); margin: 0; max-width: 60ch; }
@media (max-width: 700px) { .chrono li { grid-template-columns: 1fr; gap: 10px; padding-left: 32px; } }

/* ---------- équipe ---------- */
.equipe { --gap: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.equipe > li { list-style: none; flex: 0 0 calc((100% - 3 * var(--gap)) / 4); background: #fff; padding: 26px; border-left: 3px solid var(--gold); }
.equipe__role { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); font-weight: 700; }
.equipe__nom { display: block; margin-top: 8px; font-weight: 700; font-size: 1.08rem; font-stretch: 112%; }
@media (max-width: 960px) { .equipe > li { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 560px) { .equipe > li { flex-basis: 100%; } }
.equipe { padding: 0; margin: 0; }

/* ---------- bandeau d'appel ---------- */
.appel { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.appel .chevron { color: rgba(255,255,255,.05); width: min(110vw, 1300px); left: 50%; transform: translateX(-50%); top: -10%; z-index: -1; }
.appel .h2 { max-width: 20ch; margin: 0 auto 22px; }
.appel .lead { margin: 0 auto 34px; }
.appel__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ---------- note « à confirmer » (préversion) ---------- */
.note-prev { margin-top: 18px; font-size: .86rem; color: var(--muted); font-style: italic; }

/* ---------- contact ---------- */
.contact-grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 22px; }
.contact-list strong { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.contact-list a, .contact-list span { color: #fff; text-decoration: none; font-size: 1.08rem; }
.contact-list a:hover { color: var(--gold); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: #fff; padding: clamp(26px, 4vw, 44px); color: var(--ink); }
.contact-form label { display: grid; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.contact-form .plein { grid-column: 1 / -1; }
.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink);
  padding: 13px 14px; border: 1px solid var(--line); border-bottom: 2px solid var(--navy); background: var(--paper); border-radius: 0; width: 100%;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--gold); background: #fff; }
.contact-form .btn { grid-column: 1 / -1; justify-self: start; }
.contact-form .btn:hover { color: var(--navy); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; white-space: pre-line; font-size: .95rem; }
.form-status--ok { color: #1d6b3a; } .form-status--error { color: #a3271c; }
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .contact-form { grid-template-columns: 1fr; } }

/* ---------- pied de page ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.72); padding: clamp(64px, 8vw, 96px) 0 34px; position: relative; overflow: hidden; isolation: isolate; }
.site-footer .chevron { color: rgba(255,255,255,.03); width: 900px; right: -200px; bottom: -160px; z-index: -1; }
.footer-haut { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-marque img { height: 86px; width: auto; margin-bottom: 20px; }
.footer-marque p { max-width: 34ch; font-size: .95rem; }
.footer-col h2 { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-stretch: 112%; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { text-decoration: none; font-size: .95rem; }
.footer-col a:hover { color: var(--gold); }
.footer-col address { font-style: normal; font-size: .95rem; line-height: 1.7; }
.footer-bas { padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .82rem; }
.footer-bas a { text-decoration: none; } .footer-bas a:hover { color: var(--gold); }
.footer-legal a + a::before { content: "·"; margin: 0 10px; color: rgba(255,255,255,.35); }
@media (max-width: 900px) { .footer-haut { grid-template-columns: 1fr 1fr; } .footer-marque { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-haut { grid-template-columns: 1fr; } }

/* ---------- pages légales ---------- */
.legal-page { max-width: 860px; margin: 0 auto; padding: calc(var(--hh) + 60px) var(--gut) var(--sec); }
.legal-back { display: inline-block; margin-bottom: 28px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); text-decoration: none; }
.legal-page h1 { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 36px; }
.legal-page h2 { font-size: 1.15rem; margin: 36px 0 12px; font-stretch: 112%; }
.legal-page p, .legal-page li { color: var(--muted); }

/* ---------- apparition au défilement ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].visible { opacity: 1; transform: none; }
.js [data-reveal="2"] { transition-delay: .12s; } .js [data-reveal="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- bandeau cookies ---------- */
#cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300; max-width: 560px; background: var(--navy-deep); color: #fff;
  padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.35); border-top: 3px solid var(--gold); font-size: .92rem; }
#cookie-banner.hidden { display: none; }
#cookie-banner a { color: var(--gold); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cookie-actions button { font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; cursor: pointer;
  border: 2px solid var(--gold); background: transparent; color: #fff; }
.cookie-actions .cookie-accept { background: var(--gold); color: var(--navy-deep); }

/* ---------- dynamique : traînées qui se dessinent, défilé des disciplines ---------- */
.trainee path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .trainee.visible path { animation: tracer 2.4s var(--ease) forwards; }
.trainee path:nth-child(2) { animation-delay: .15s !important; } .trainee path:nth-child(3) { animation-delay: .3s !important; }
.trainee path:nth-child(4) { animation-delay: .45s !important; } .trainee path:nth-child(5) { animation-delay: .6s !important; }
html:not(.js) .trainee path { stroke-dashoffset: 0; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .trainee path { stroke-dashoffset: 0; } }

.defile { overflow: hidden; border-block: 1px solid var(--line); background: #fff; padding: 22px 0; }
.defile__piste { display: flex; width: max-content; animation: defiler 64s linear infinite; }
.defile__piste span { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; white-space: nowrap;
  font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 800; font-stretch: 125%; text-transform: uppercase; color: var(--navy); }
.defile__piste span::after { content: ""; width: 26px; height: 13px; background: var(--gold);
  clip-path: polygon(0 0, 50% 64%, 100% 0, 100% 36%, 50% 100%, 0 36%); }
.defile__piste span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--navy); }
@keyframes defiler { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .defile__piste { animation: none; } }

.hero__media img, .page-hero__media img { will-change: transform; }
.hero .trainee { color: var(--gold); opacity: .7; right: -4%; top: 12%; width: 62%; z-index: -1; }
@media (max-width: 820px) { .hero .trainee { width: 120%; right: -30%; top: 6%; opacity: .45; } }

.chiffres__n > span + * , .chiffres__suf { font-size: .55em; }

/* ---------- correctifs de rendu ---------- */
.hero__media picture, .page-hero__media picture, .pole__media picture { display: block; width: 100%; height: 100%; }
.page-hero .lead, .on-navy .lead, .appel .lead { color: rgba(255,255,255,.8); }
@media (min-width: 900px) {
  /* le sujet de la photo à droite, le titre sur fond uni à gauche */
  .page-hero--photo .page-hero__media { left: 34%; }
  .page-hero--photo::before { background: linear-gradient(90deg, var(--navy-deep) 0%, var(--navy-deep) 34%, rgba(19,20,46,.55) 52%, rgba(19,20,46,0) 75%); }
}

/* ---------- réseaux sociaux : pictogrammes (convention atelier) ---------- */
.reseaux { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.28); color: #fff; transition: color .25s, border-color .25s, background .25s; }
.reseaux a:hover { color: var(--navy-deep); background: var(--gold); border-color: var(--gold); }
.footer-col .reseaux a { color: #fff; }
.contact-list .reseaux { margin-top: 6px; }
.contact-list .reseaux a:hover { color: var(--navy-deep); }

/* ---------- en-tête : logo écriture seul, voile de lisibilité, CTA compact (14/10/2026) ---------- */
.brand-mot { height: 46px; width: auto; }
.site-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 170%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,15,38,.72) 0%, rgba(14,15,38,.38) 55%, rgba(14,15,38,0) 100%);
  transition: opacity .35s; }
.site-header.scrolled::before, .site-header.is-solid::before { opacity: 0; }
.nav-cta { padding: 9px 14px; font-size: .7rem; letter-spacing: .1em; margin-left: 14px; }
.nav-sous__liste { left: auto; right: 0; }
@media (max-width: 1100px) { .nav-sous__liste { right: auto; } }
@media (max-width: 560px) { .brand-mot { display: block; height: 36px; } }
.brand-mot { height: 60px; }
@media (max-width: 560px) { .brand-mot { height: 44px; } }

/* ---------- pages par raquette ---------- */
.autres-raquettes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 40px; }
.autres-raquettes a { font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 800; font-stretch: 125%; text-transform: uppercase;
  text-decoration: none; color: transparent; -webkit-text-stroke: 1.5px var(--navy); transition: color .3s; }
.autres-raquettes a:hover { color: var(--navy); }
.sport__lien { margin-top: 22px; }
/* sous-menu Raquettes : ouvert vers la droite (seul « Le club », à l'extrême droite, s'aligne à droite) */
#nav-raquettes { left: 0; right: auto; }
.nav-sous__btn.is-actif::after { transform: scaleX(1); }
/* une seule barre dorée : celle du menu, pas de liseré sur le sous-menu */
.nav-sous__liste { border-top: 0; }

/* ---------- slider de l'accueil (14/10/2026) ---------- */
.hero--slider { display: block; min-height: min(100svh, 960px); }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity 1.1s var(--ease); isolation: isolate;
  display: none; align-items: flex-end; }
.slide.is-on { display: flex; }
.slide.is-visible { opacity: 1; z-index: 1; }
html:not(.js) .slide:first-child { display: flex; opacity: 1; }
.slide::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14,15,38,.92) 0%, rgba(14,15,38,.6) 40%, rgba(14,15,38,.05) 75%),
              linear-gradient(0deg, rgba(14,15,38,.85) 0%, rgba(14,15,38,0) 50%); }
.hero--slider::before { display: none; }
.slide .hero__media { z-index: -2; }
.slide__contenu { width: 100%; padding-top: calc(var(--hh) + 80px); padding-bottom: 150px; }
.slide__contenu .display { max-width: 13ch; }
.slide__contenu .or { display: block; }
.slide__contenu > * { transform: translateY(24px); opacity: 0; transition: transform .9s var(--ease), opacity .9s var(--ease); }
.slide.is-visible .slide__contenu > * { transform: none; opacity: 1; }
.slide.is-visible .slide__contenu > :nth-child(2) { transition-delay: .15s; }
.slide.is-visible .slide__contenu > :nth-child(3) { transition-delay: .3s; }
html:not(.js) .slide__contenu > * { transform: none; opacity: 1; }
.slide .hero__media img { transform: scale(1.06); transition: transform 7s linear; }
.slide.is-visible .hero__media img { transform: scale(1); }
.hero__haut { position: absolute; left: 0; right: 0; top: calc(var(--hh) + 40px); z-index: 3; pointer-events: none; }
.hero__haut .hero__annee { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); line-height: 1.6; }
.hero--slider .trainee { z-index: 2; }

.slider-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: 1px solid rgba(255,255,255,.12); }
.slider-nav__in { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; }
.slider-onglets { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: 1; max-width: 900px; }
.slider-onglet { width: 100%; background: none; border: 0; color: rgba(255,255,255,.55); cursor: pointer; text-align: left;
  padding: 20px 16px 22px 0; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-stretch: 112%; transition: color .3s; }
.slider-onglet:hover, .slider-onglet[aria-current="true"] { color: #fff; }
.slider-onglet__barre { display: block; height: 2px; margin-top: 12px; background: rgba(255,255,255,.18); overflow: hidden; }
.slider-onglet__barre i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.slider-onglet[aria-current="true"] .slider-onglet__barre i { animation: progression var(--duree, 6.5s) linear forwards; }
.hero--slider.en-pause .slider-onglet[aria-current="true"] .slider-onglet__barre i { animation-play-state: paused; }
.hero--slider.sans-auto .slider-onglet[aria-current="true"] .slider-onglet__barre i { animation: none; transform: scaleX(1); }
@keyframes progression { to { transform: scaleX(1); } }
.slider-fleches { display: flex; align-items: center; gap: 8px; }
.slider-fleche { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; cursor: pointer; font-size: 1.1rem; transition: background .25s, color .25s, border-color .25s; }
.slider-fleche:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
html:not(.js) .slider-nav { display: none; }
@media (max-width: 820px) {
  .slide::before { background: linear-gradient(0deg, rgba(14,15,38,.96) 0%, rgba(14,15,38,.7) 45%, rgba(14,15,38,.15) 100%); }
  .slide__contenu { padding-bottom: 120px; }
  .slider-onglet__nom { display: none; }
  .slider-onglet { padding: 22px 6px 26px 0; }
  .slider-onglet__barre { margin-top: 0; }
  .slider-fleches { display: none; }
}
@media (prefers-reduced-motion: reduce) { .slide .hero__media img { transform: none; } }
.hero .hero__haut h1.hero__annee { max-width: none; }
@media (max-width: 820px) { .hero__haut .hero__annee { font-size: .68rem; letter-spacing: .2em; } }
@media (min-width: 1101px) { .nav-sous__liste a:not(.btn) { white-space: nowrap; } }

/* ---------- pied de page : logo écriture + blason en filigrane (14/10/2026) ---------- */
.footer-marque img.footer-logo { height: 68px; width: auto; margin-bottom: 24px; }
.footer-filigrane { position: absolute; z-index: -1; right: -60px; top: 50%; transform: translateY(-50%);
  height: 125%; width: auto; max-width: none; opacity: .05; filter: brightness(0) invert(1); pointer-events: none; }
@media (max-width: 900px) { .footer-filigrane { height: 70%; right: -80px; top: auto; bottom: -40px; transform: none; } }
.footer-marque img.footer-logo { filter: brightness(0) invert(1); }
.footer-filigrane { filter: none; opacity: .07; height: 150%; right: -40px; }
.footer-filigrane { height: 78%; right: clamp(20px, 4vw, 64px); }
@media (max-width: 900px) { .footer-filigrane { height: 55%; right: 20px; bottom: 24px; } }
.footer-filigrane { height: 94%; }
.page-raquettes .page-hero__media img { object-position: 50% 20%; }

/* ---------- logo : l'écriture pivote en 3D vers le blason toutes les ~6 s ---------- */
.brand { perspective: 700px; }
.brand-flip { position: relative; display: block; transform-style: preserve-3d; animation: logo-pivot 9s cubic-bezier(.6,0,.3,1) infinite; }
.brand-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.brand-face--dos { position: absolute; left: 50%; top: 50%; height: 56px; width: 56px; margin: -28px 0 0 -28px; transform: rotateY(180deg); }
@keyframes logo-pivot {
  0%, 70% { transform: rotateY(0); }
  76%, 92% { transform: rotateY(180deg); }
  98%, 100% { transform: rotateY(360deg); }
}
@media (max-width: 560px) { .brand-face--dos { height: 46px; width: 46px; margin: -23px 0 0 -23px; } }
@media (prefers-reduced-motion: reduce) { .brand-flip { animation: none; } }

/* ---------- blason en filigrane, en bas à droite de chaque haut de page ---------- */
.page-hero::after, .hero--slider::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  right: clamp(20px, 4vw, 64px); bottom: clamp(24px, 4vw, 48px);
  width: clamp(165px, 19.5vw, 285px); aspect-ratio: 1;
  background: url(../images/brand/logo-blason-girondins-omnisports-carre.svg) center / contain no-repeat;
  opacity: .14;
}
.hero--slider::after { bottom: 104px; }
@media (max-width: 820px) {
  .page-hero::after { width: 102px; bottom: 14px; right: 14px; }
  .hero--slider::after { width: 120px; bottom: 90px; right: 16px; }
}

/* ---------- blog : en-tête plein, titres à la charte ---------- */
.site-header.is-solid::before { opacity: 0; }
.blog-list, .blog-article { padding-top: calc(var(--hh) + 56px); }
.blog-list h1 { font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; margin-bottom: 18px; }
.blog-article h1 { font-stretch: 112%; font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.1; }

/* ---------- FAQ (une par page, convention Rhiino) ---------- */
.faq__grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__liste { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font-weight: 700; font-size: 1.05rem; font-stretch: 105%; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: 0 0 18px; height: 9px; background: var(--gold);
  clip-path: polygon(0 0, 50% 64%, 100% 0, 100% 36%, 50% 100%, 0 36%); transition: transform .3s var(--ease); }
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__item summary:hover { color: var(--navy); }
.faq__reponse { padding: 0 0 22px; color: var(--muted); max-width: 64ch; }
.faq__reponse p { margin: 0; }
@media (max-width: 900px) { .faq__grille { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mobile (14/10/2026) : hauts de page compacts, menu en accordéon
   ========================================================================== */
.nav-mobile { display: none; }
@media (max-width: 1100px) {
  :root { --hh: 66px; }
  .brand-mot { height: 48px; }
  .brand-face--dos { height: 42px; width: 42px; margin: -21px 0 0 -21px; }
  .nav-menu { justify-content: flex-start; padding: calc(var(--hh) + 18px) var(--gut) 32px; }
  .nav-menu > li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav-menu > li:last-of-type, .nav-menu > li:nth-last-child(2) { border-bottom: 0; }
  .nav-menu > li > a:not(.btn), .nav-sous__btn { font-size: 1.12rem; padding: 17px 0; display: flex; justify-content: space-between; align-items: center; }
  .nav-menu a:not(.btn)::after, .nav-sous__btn::after { display: none; }
  .nav-menu a[aria-current="page"], .nav-sous__btn.is-actif { color: var(--gold); }
  .nav-sous__btn i { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 0; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
  .nav-sous.is-open .nav-sous__btn i { transform: translateY(2px) rotate(-135deg); }
  .nav-sous__liste { display: none; padding: 0 0 12px 14px; border-left: 2px solid var(--gold); margin: 0 0 14px; }
  .nav-sous.is-open .nav-sous__liste { display: block; }
  .nav-sous__liste a:not(.btn) { font-size: .95rem; padding: 9px 0; color: rgba(255,255,255,.8); }
  .nav-cta { display: flex; width: 100%; margin: 26px 0 0; padding: 16px; font-size: .82rem; }
  .nav-mobile { display: block; margin-top: 22px; text-align: center; }
  .nav-mobile__tel { display: block; font-size: 1.1rem; font-weight: 700; letter-spacing: .06em; color: #fff; text-decoration: none; }
  .nav-mobile__adresse { display: block; margin-top: 6px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
}
@media (max-width: 820px) {
  /* titres plus compacts */
  .display, .h1 { font-size: clamp(1.75rem, 8.6vw, 2.4rem); line-height: 1; }
  .h2, .section h2 { font-size: clamp(1.45rem, 7vw, 1.9rem); }
  .lead { font-size: 1rem; }
  .eyebrow { font-size: .7rem; margin-bottom: 12px; letter-spacing: .18em; }
  .section { padding: 56px 0; }
  /* slider de l'accueil */
  .hero--slider { min-height: 78svh; }
  .hero__haut { top: calc(var(--hh) + 14px); }
  .hero__haut .hero__annee { font-size: .6rem; letter-spacing: .14em; }
  .slide__contenu { padding-top: calc(var(--hh) + 60px); padding-bottom: 76px; }
  .slide__contenu .display { max-width: 15ch; }
  .hero__texte { margin: 14px 0 20px; font-size: .96rem; line-height: 1.5; }
  .hero__cta .btn { padding: 13px 18px; font-size: .74rem; }
  .hero--slider::after { display: none; }
  .slider-onglet { padding: 16px 6px 18px 0; }
  /* hauts des pages intérieures */
  .page-hero { padding: calc(var(--hh) + 26px) 0 30px; }
  .page-hero--photo { min-height: 58svh; }
  .page-hero .lead { margin-top: 14px; }
  .fil { font-size: .62rem; margin-bottom: 14px; }
  .page-hero::after { width: 56px; bottom: 12px; right: 12px; }
  .page-hero .chevron { width: 120vw; right: -40vw; }
  /* sports, pôles, chiffres */
  .pole, .pole--large { min-height: 260px; padding: 22px; }
  .sport__nom { font-size: 2rem; }
}
/* blason de l'animation du logo, un peu plus grand */
.brand-face--dos { height: 70px; width: 70px; margin: -35px 0 0 -35px; }
@media (max-width: 1100px) { .brand-face--dos { height: 52px; width: 52px; margin: -26px 0 0 -26px; } }
/* Stages multisports (École 1881) : contact et liste des dates. */
.stages-contact { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.stages-contact strong { flex-basis: 100%; }
.stages-contact a { color: var(--gold-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.stages-dates { background: #fff; padding: clamp(26px, 3vw, 38px); border-top: 3px solid var(--gold); box-shadow: 0 1px 0 var(--line); }
.stages-dates ul { list-style: none; margin: 14px 0 0; padding: 0; }
.stages-dates li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stages-dates li:last-child { border-bottom: 0; }
.stages-dates li span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stages-dates li strong { text-align: right; }
@media (max-width: 620px) { .stages-dates li { flex-direction: column; gap: 2px; } .stages-dates li strong { text-align: left; } }
/* Photos réelles des terrains (pages sports) */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 22px; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.galerie figcaption { margin-top: 8px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 620px) { .galerie { grid-template-columns: 1fr 1fr; } }
.galerie:has(> figure:only-child) { max-width: 640px; }

/* ---------- hero de l'accueil : suit la hauteur de l'écran (19/10/2026, comme Rocquevielle) ----------
   Les diapositives étaient posées en absolu : sur un écran large mais peu haut,
   le texte débordait vers le haut, sous le surtitre et la barre de menu. Elles
   sont maintenant empilées dans une grille, donc le hero grandit avec son
   contenu, et le titre se règle aussi sur la hauteur (svh), pas seulement la largeur. */
.slides { position: relative; inset: auto; display: grid; }
.slide { position: relative; inset: auto; grid-area: 1 / 1; min-height: min(100svh, 960px); }
@media (max-width: 820px) { .slide { min-height: 78svh; } }
@media (min-width: 821px) {
  .slide__contenu { padding-top: calc(var(--hh) + 110px); padding-bottom: clamp(110px, 17svh, 150px); }
  .slide__contenu .display { font-size: clamp(2.3rem, min(6.4vw, 10.5svh), 5.6rem); }
  .hero__texte { margin: clamp(16px, 3svh, 28px) 0 clamp(20px, 4.4svh, 36px); }
  .slide::before {
    background: linear-gradient(180deg, rgba(14,15,38,.6) 0%, rgba(14,15,38,0) 32%),
                linear-gradient(90deg, rgba(14,15,38,.92) 0%, rgba(14,15,38,.6) 40%, rgba(14,15,38,.05) 75%),
                linear-gradient(0deg, rgba(14,15,38,.85) 0%, rgba(14,15,38,0) 50%); }
}
/* Surtitre « Club omnisports à Mérignac depuis 1881 » : en blanc sur la photo, l'or reste en filet. */
.hero__haut .hero__annee { color: #fff; text-shadow: 0 1px 14px rgba(14,15,38,.75); }
.hero__haut .hero__annee::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 14px; vertical-align: middle; background: var(--gold); }
@media (max-width: 820px) { .hero__haut .hero__annee::before { display: none; } }
/* Histoire : logo du Domaine de Rocquevielle sous le texte (28/10/2026). */
.logo-domaine { display: inline-block; margin-top: 30px; opacity: .9; transition: opacity .25s; }
.logo-domaine:hover { opacity: 1; }
.logo-domaine img { display: block; height: 40px; width: auto; }
/* Histoire : blason du haut de page en plein, plus grand (28/10/2026). */
.page-histoire .page-hero::after { opacity: 1; width: clamp(200px, 26vw, 380px); top: 50%; bottom: auto; transform: translateY(-35%); }
@media (max-width: 820px) { .page-histoire .page-hero::after { opacity: .14; width: 102px; top: auto; bottom: 14px; transform: none; } }
/* Accueil : blason en plein dans l'encart « 1881 » (28/10/2026). */
.split__media .panneau img.panneau__blason { position: absolute; inset: auto; aspect-ratio: 1; object-fit: contain; z-index: 1; top: clamp(22px, 3vw, 40px); right: clamp(22px, 3vw, 40px); width: 34%; height: auto; }
/* Séminaires : photo de la salle à la place du fond bleu, liens vers les salles du Domaine (28/10/2026). */
.panneau--photo { background: var(--navy-deep); }
.split__media .panneau--photo .panneau__photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }
.panneau--photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(14,15,38,.9) 0%, rgba(14,15,38,.55) 32%, rgba(14,15,38,0) 60%); }
.liens-salles { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 30px; }
/* Traversée de Bordeaux (28/10/2026) : photo d'archive 1927 en paysage, boutons sous les engagements. */
.split__media.traversee-archive img { aspect-ratio: 1239 / 470; object-fit: cover; }
.traversee-liens { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
/* Partenariat : logo historique au centre de l'encart « 60 % » (28/10/2026). */
/* Ancien logo du club et nouveau blason : ils pivotent l'un vers l'autre, puis reviennent (même rythme que le logo de l'en-tête). */
.panneau__logo { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 56%; aspect-ratio: 453 / 595; z-index: 0; perspective: 900px; }
.panneau__logo-pivot { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: logo-pivot 9s cubic-bezier(.6,0,.3,1) infinite; }
.split__media .panneau img.panneau__logo-face { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.split__media .panneau img.panneau__logo-face--dos { transform: rotateY(180deg); inset: 8%; width: 84%; height: 84%; }
@media (prefers-reduced-motion: reduce) { .panneau__logo-pivot { animation: none; } }
/* Formulaire en modale (« Devenir partenaire »). */
.modale { width: min(720px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; background: #fff; color: var(--ink); overflow: auto; }
.modale::backdrop { background: rgba(14,15,38,.72); }
.modale__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: clamp(26px, 4vw, 44px) clamp(26px, 4vw, 44px) 0; }
.modale__tete .eyebrow { margin: 0 0 10px; }
.modale__tete .h3 { margin: 0; }
.modale__fermer { flex: none; width: 44px; height: 44px; border: 1px solid var(--line); background: none; color: var(--navy); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .25s, color .25s; }
.modale__fermer:hover { background: var(--navy); color: #fff; }
.modale .contact-form { padding-top: 24px; }
/* Listes déroulantes aux couleurs du site (convention de l'atelier : aucun composant natif non stylisé). */
.liste__natif { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.liste { position: relative; }
.contact-form .liste__bouton { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 400; line-height: 1.5; color: var(--ink); text-align: left; cursor: pointer;
  padding: 13px 14px; border: 1px solid var(--line); border-bottom: 2px solid var(--navy); background: var(--paper); border-radius: 0; transition: border-color .2s, background .2s; }
.contact-form .liste__bouton:hover, .contact-form .liste__bouton[aria-expanded="true"] { border-bottom-color: var(--gold); background: #fff; }
.contact-form .liste__bouton:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.liste__valeur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste__bouton svg { flex: none; color: var(--navy); transition: transform .2s; }
.liste__bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
.liste__options { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 18rem; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none;
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--gold); box-shadow: 0 18px 40px rgba(14,15,38,.18); outline: none; }
.liste__options li { position: relative; padding: 10px 16px 10px 32px; font-size: .98rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.35; color: var(--ink); cursor: pointer; white-space: nowrap; }
.liste__options li.is-survol { background: var(--sand); color: var(--navy); }
.liste__options li[aria-selected="true"] { font-weight: 700; color: var(--navy); }
.liste__options li[aria-selected="true"]::before { content: ""; position: absolute; left: 14px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--gold); }
.liste__options li[aria-disabled="true"] { color: var(--muted); cursor: default; }
/* Galerie photo (Fitness, 28/10/2026) : grille de vignettes, visionneuse en <dialog>. */
.photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.photos a { display: block; overflow: hidden; background: var(--navy); }
.photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.photos a:hover img { transform: scale(1.05); opacity: .9; }
.photos a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1000px) { .photos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .photos { grid-template-columns: 1fr 1fr; gap: 6px; } }
.visionneuse { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14,15,38,.96); color: #fff; }
.visionneuse[open] { display: flex; align-items: center; justify-content: center; }
.visionneuse::backdrop { background: rgba(14,15,38,.9); }
.visionneuse img { max-width: calc(100vw - 160px); max-height: calc(100svh - 150px); object-fit: contain; }
.visionneuse__compteur { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; text-align: center; font-size: .78rem; letter-spacing: .18em; color: rgba(255,255,255,.75); }
.visionneuse__btn, .visionneuse__fermer { position: absolute; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.3); background: rgba(14,15,38,.5); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.visionneuse__btn:hover, .visionneuse__fermer:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.visionneuse__prec { left: 24px; top: 50%; transform: translateY(-50%); }
.visionneuse__suiv { right: 24px; top: 50%; transform: translateY(-50%); }
.visionneuse__fermer { top: 20px; right: 24px; font-size: 1.7rem; }
@media (max-width: 700px) {
  .visionneuse img { max-width: 100vw; max-height: calc(100svh - 200px); }
  .visionneuse__prec, .visionneuse__suiv { top: auto; bottom: 56px; transform: none; width: 46px; height: 46px; }
  .visionneuse__prec { left: 16px; } .visionneuse__suiv { right: 16px; } .visionneuse__fermer { right: 16px; top: 16px; }
}
.panneau--photo .chevron, .panneau--photo .trainee { display: none; }
/* Sections fédérales : une section par sport (28/10/2026). */
.section-federale__liens { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 28px; }
.on-dark .section-federale__liens .lien-fl, .on-dark .split__texte .lien-fl { color: var(--gold); }
.panneau--large { aspect-ratio: 16 / 11; }
.split__media .panneau--large img.panneau__blason { top: 50%; left: 50%; right: auto; transform: translate(-50%, -62%); width: 30%; }
.panneau--large .panneau__petit { position: absolute; left: 0; right: 0; bottom: clamp(24px, 4vw, 44px); text-align: center; margin: 0; }
.on-light + .section-federale.on-light { padding-top: 0; }
/* Crédit photographe sous une photo (Sections fédérales). */
.photo-credit { margin: 10px 0 0; font-size: .72rem; letter-spacing: .06em; color: var(--muted); text-align: right; }
.photo-credit a { color: inherit; text-decoration: none; }
.photo-credit a:hover { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.on-dark .photo-credit { color: rgba(255,255,255,.6); }
/* Sommaire des actualités : le chevron doré des listes du site à la place de la puce ronde du moteur (28/10/2026). */
.blog-sommaire li { padding-left: 24px; }
.blog-sommaire li::before { top: .55em; width: 12px; height: 6px; border-radius: 0; background: var(--gold); clip-path: polygon(0 0, 50% 70%, 100% 0, 100% 30%, 50% 100%, 0 30%); }
.blog-sommaire a { color: var(--navy); font-weight: 600; }
.blog-sommaire a:hover, .blog-sommaire a:focus-visible { color: var(--gold-ink); }
/* Barre de partage fixée en bas (mobile) : aux couleurs du club. */
@media (max-width: 1079px) {
  .blog-partage--article { background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.12); box-shadow: none; }
  .blog-partage--article .blog-partage__titre { color: var(--gold); }
  .blog-partage--article .blog-partage__liens > * { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; border-radius: 0; }
}
/* Séminaires : l'encart alterne les deux salles, photo et chiffres ensemble (28/10/2026). */
.panneau--salles { padding: 0; }
.panneau--salles .salle { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 4vw, 48px); opacity: 0; transition: opacity 1.1s ease; }
.panneau--salles .salle:first-child, .panneau--salles .salle.is-on { opacity: 1; }
.panneau--salles.est-pret .salle:not(.is-on) { opacity: 0; }
.panneau--salles .salle::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(14,15,38,.9) 0%, rgba(14,15,38,.55) 32%, rgba(14,15,38,0) 60%); }
.panneau--salles::before { display: none; }
.panneau--salles .salle .panneau__photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.split__media .panneau--salles .salle .panneau__photo img { aspect-ratio: auto; }
.panneau--salles .salle { isolation: isolate; }
.salle__infos { display: flex; flex-direction: column; }
.salle__nom { margin-bottom: 14px; font-size: .92rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.salles__points { position: absolute; right: clamp(22px, 3vw, 36px); top: clamp(22px, 3vw, 36px); z-index: 2; display: flex; gap: 8px; }
.salles__points button { width: 28px; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.55); box-shadow: 0 0 6px rgba(14,15,38,.35); cursor: pointer; transition: background .3s; }
.salles__points button[aria-current="true"] { background: var(--gold); }
.points li .point__lien { margin-top: 10px; }
.points li .point__lien { display: flex; width: fit-content; }

/* Galeries de configurations : chaque photo s'ouvre en grand (28/10/2026). */
.galerie[data-visionneuse] a { display: block; cursor: zoom-in; overflow: hidden; }
.galerie[data-visionneuse] a img { transition: transform .5s ease; }
.galerie[data-visionneuse] a:hover img { transform: scale(1.04); }
/* Crédit de la photo dans la visionneuse (28/10/2026) : au-dessus du compteur, lien dans un nouvel onglet. */
.visionneuse__credit { position: absolute; left: 0; right: 0; bottom: 44px; margin: 0; text-align: center; font-size: .74rem; letter-spacing: .04em; color: rgba(255,255,255,.62); }
.visionneuse__credit[hidden] { display: none; }
.visionneuse__credit a { color: inherit; text-decoration: none; }
.visionneuse__credit a:hover { text-decoration: underline; text-underline-offset: 3px; color: #fff; }
@media (max-width: 820px) { .visionneuse__credit { bottom: 108px; } }
/* Pied de page : pictos réseaux côte à côte (la grille des listes du pied les empilait), 28/10/2026. */
.footer-col ul.reseaux { display: flex; flex-wrap: wrap; gap: 10px; }


/* ==========================================================================
   Socle des modules Blog et Réalisations.
   --------------------------------------------------------------------------
   CE FICHIER N'EST PAS COPIÉ TEL QUEL : gen-site.js l'AJOUTE à la feuille finale,
   APRÈS l'éventuelle feuille propre au client.

   Pourquoi : un site à charte sur mesure remplace css/style.css par la sienne.
   Tant que ce socle vivait dedans, il disparaissait avec — les pages des modules
   se retrouvaient sans mise en page, et seules subsistaient les retouches du
   client, qui ajustaient des règles absentes. Le sortir d'ici garantit que le
   fonctionnement visuel des modules survit à n'importe quelle charte.

   Ordre d'assemblage : style.css du client · CE SOCLE · template/css/modules.css
   ========================================================================== */

/* ============================ BLOG ============================ */
.blog-list h1, .blog-article h1 { margin-bottom: .5rem; }
.blog-list__intro { color: var(--c-muted); margin-bottom: 2rem; }
.blog-fil { font-size: .85rem; color: var(--c-muted); margin-bottom: 1.2rem; }

.blog-themes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.blog-theme {
  padding: .38rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  border: 1px solid rgba(0,0,0,.12); color: var(--c-muted); text-decoration: none; transition: .18s ease;
}
.blog-theme:hover { border-color: var(--c-accent); color: var(--c-text); }
.blog-theme.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.blog-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.blog-card { flex: 0 0 calc((100% - 3rem) / 3); min-width: 260px; }
.blog-card__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card__link:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.09); border-color: var(--c-accent); }
.blog-card__cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(0,0,0,.04); }
/* <picture> est en ligne par défaut : sans ce display:block, il ne remplit pas le
   cadre, l'image garde ses proportions naturelles et laisse une bande grise. */
.blog-card__cover picture { display: block; width: 100%; height: 100%; }
.blog-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; flex: 1; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .82rem; color: var(--c-muted); }
.blog-card__cat {
  padding: .18rem .6rem; border-radius: 999px; font-weight: 600; font-size: .74rem;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  background: var(--c-accent-soft, rgba(0,0,0,.05)); color: var(--c-accent-ink, inherit);
}
.blog-card__title { font-family: var(--f-head, inherit); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.blog-card__chapo { color: var(--c-muted); font-size: .95rem; flex: 1; }
.blog-card__more { font-weight: 600; font-size: .9rem; color: var(--c-accent-ink, var(--c-primary)); }

/* Article */
.blog-article .container { max-width: 46rem; }
.blog-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; color: var(--c-muted); margin-bottom: .7rem; }
/* « Mis à jour le » : la correction se dit, elle ne se crie pas. Elle passe
   après la date de parution et en retrait, pour informer sans laisser croire
   que l'article a été refait. */
.blog-article__maj { font-style: italic; opacity: .8; }
.blog-article__chapo { font-size: 1.12rem; line-height: 1.6; color: var(--c-muted); margin-bottom: 2rem; }
.blog-article__cover { display: block; margin: 0 0 2.2rem; }
.blog-article__cover img { width: 100%; height: auto; border-radius: 12px; }
.blog-article__cover-credit { margin: -1.8rem 0 2.2rem; }

.blog-sommaire { margin: 0 0 1.6rem; padding: 1.1rem 1.4rem; background: rgba(0,0,0,.03); border-radius: 10px; }
.blog-sommaire p { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); margin-bottom: .5rem; }
.blog-sommaire ul { list-style: none; padding: 0; margin: 0; }
.blog-sommaire li + li { margin-top: .3rem; }
/* Titres du sommaire : une puce devant, jamais soulignés (un site restyle la puce dans sa feuille). */
.blog-sommaire li { position: relative; padding-left: 1.1rem; }
.blog-sommaire li::before { content: ""; position: absolute; left: 0; top: .62em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--c-accent); }
.blog-sommaire a { text-decoration: none; color: inherit; }
.blog-sommaire a:hover, .blog-sommaire a:focus-visible { color: var(--c-primary); }

.blog-article__corps > * + * { margin-top: 1.15rem; }
.blog-article__corps h2 { font-size: 1.4rem; margin-top: 2.4rem; scroll-margin-top: 5rem; }
.blog-article__corps h3 { font-size: 1.12rem; margin-top: 1.8rem; }
.blog-article__corps ul { padding-left: 1.2rem; }
.blog-article__corps li + li { margin-top: .4rem; }
.blog-article__corps blockquote {
  margin: 2rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--c-accent);
  background: rgba(0,0,0,.03); border-radius: 0 8px 8px 0;
}
.blog-article__corps blockquote p { margin: 0; font-style: italic; }
.blog-article__corps blockquote cite { display: block; margin-top: .6rem; font-size: .88rem; font-style: normal; color: var(--c-muted); }
.blog-figure { margin: 2rem 0; }
.blog-figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
.blog-figure figcaption { margin-top: .5rem; font-size: .86rem; color: var(--c-muted); }
.blog-cta { margin: 2.4rem 0; padding: 1.6rem; background: var(--c-primary); color: #fff; border-radius: 12px; text-align: center; }
.blog-cta p { margin-bottom: 1rem; font-size: 1.05rem; }

.blog-faq { margin-top: 3rem; }
.blog-faq h2 { scroll-margin-top: 5rem; }
.blog-faq__item { border-bottom: 1px solid rgba(0,0,0,.08); padding: 1rem 0; }
.blog-faq__item summary { cursor: pointer; font-weight: 600; list-style: none; }
.blog-faq__item summary::-webkit-details-marker { display: none; }
.blog-faq__item summary::after { content: "+"; float: right; color: var(--c-muted); }
.blog-faq__item[open] summary::after { content: "–"; }
.blog-faq__item > div { margin-top: .7rem; color: var(--c-muted); }

.blog-article__retour { display: inline-block; margin-top: 3rem; font-weight: 600; }

@media (max-width: 980px) { .blog-card { flex: 0 0 calc((100% - 1.5rem) / 2); } }
@media (max-width: 620px) { .blog-card { flex: 0 0 100%; } }
.blog-home__tous { margin-top: 2.2rem; text-align: center; }

/* Article : colonne de lecture + colonne latérale (sommaire puis partage) */
.blog-article .container { max-width: 68rem; }
.blog-article__grille { display: block; }
.blog-article__lecture { max-width: 46rem; margin: 0 auto; }
/* L'en-tête vit DANS la colonne de lecture : hors d'elle, il resterait centré
   sur la page pendant que le texte est décalé par le sommaire, et les deux ne
   s'aligneraient pas. */

.blog-partage { padding: 1.1rem 1.4rem; background: rgba(0,0,0,.03); border-radius: 10px; }
.blog-partage__titre { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin-bottom: .7rem; }
.blog-partage__liens { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-partage__liens > * {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; cursor: pointer;
  color: var(--c-muted); transition: .18s ease; padding: 0;
}
.blog-partage__liens > *:hover { border-color: var(--c-accent); color: var(--c-primary); transform: translateY(-2px); }
.blog-partage__liens svg { width: 17px; height: 17px; fill: currentColor; }
.blog-partage__copie.copie { border-color: var(--c-accent); color: var(--c-primary); }
.blog-partage__copie.copie::after {
  content: "Lien copié"; position: absolute; margin-top: -3.2rem; padding: .3rem .6rem;
  font-size: .78rem; white-space: nowrap; background: var(--c-primary); color: #fff; border-radius: 6px;
}

/* Mobile et tablette : le sommaire est sous la photo à la une (déplacé par le script de l'article),
   le partage est une barre fixée en bas de l'écran ; le bas de page lui laisse la place. */
@media (max-width: 1079px) {
  .blog-article__lecture > .blog-sommaire { margin: 0 0 2rem; }
  .blog-partage--article { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; margin: 0;
    display: flex; align-items: center; justify-content: center; gap: .9rem;
    padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    background: var(--c-bg, #fff); border-radius: 0; border-top: 1px solid rgba(0,0,0,.1); box-shadow: 0 -6px 18px rgba(0,0,0,.08); }
  .blog-partage--article .blog-partage__titre { margin: 0; }
  .blog-partage--article .blog-partage__liens { flex-wrap: nowrap; }
  .a-partage-fixe body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 1080px) {
  .blog-article__grille { display: grid; grid-template-columns: 15rem minmax(0, 46rem); gap: 3rem; justify-content: center; align-items: start; }
  .blog-article__lecture { margin: 0; max-width: none; }
  .blog-cote { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1rem; }
  .blog-cote .blog-sommaire { margin: 0; background: transparent; border-left: 2px solid rgba(0,0,0,.12); border-radius: 0; padding: .2rem 0 .2rem 1.1rem; }
  .blog-cote .blog-partage { background: transparent; padding: .2rem 0 .2rem 1.1rem; border-left: 2px solid rgba(0,0,0,.12); }
  /* Sans sommaire, la colonne n'a qu'un bloc : on la garde alignée en haut. */
  .blog-cote[data-sans-sommaire] { padding-top: .2rem; }
}

/* ============================ PORTFOLIO ============================ */
/* Grille et non flex : avec des bases en calc((100% - 2 × écart) / 3), changer
   l'écart depuis la feuille d'un client faisait retomber la grille à deux
   colonnes sans que rien ne le signale. */
.projets-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.projets-grille--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Texte SEO des pages d'accueil blog / portfolio / guide (réglé dans le manager). */
/* Texte de présentation sous la liste (blog, rubrique) : séparé des cartes par un filet, en deux colonnes
   sur grand écran pour occuper la largeur au lieu d'un bloc étroit collé à gauche, plus discret que le
   contenu (c'est un texte d'appoint, écrit pour Google autant que pour le lecteur). 28/10/2026. */
.hub-texte-seo { margin: clamp(3rem, 6vw, 5rem) 0 0; padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid rgba(0,0,0,.1);
  columns: 2 22rem; column-gap: clamp(2rem, 5vw, 4rem); font-size: .95rem; line-height: 1.75; color: var(--c-muted); }
.hub-texte-seo p { margin: 0 0 1rem; break-inside: avoid; }
.hub-texte-seo > p:first-child { color: var(--c-text); font-size: 1.05rem; }
.hub-texte-seo h2, .hub-texte-seo h3 { column-span: all; margin: 0 0 1rem; color: var(--c-text); }
.hub-texte-seo ul, .hub-texte-seo ol { margin: 0 0 1rem 1.2rem; break-inside: avoid; }
.hub-texte-seo a { color: var(--c-accent-ink, var(--c-accent)); }
/* Page d'une catégorie : accroche sous le titre, texte SEO sous la grille (réglés dans le manager). */
.projets-categorie__accroche { max-width: 70ch; margin: -.4rem 0 1.8rem; color: var(--c-muted); font-size: 1.05rem; line-height: 1.6; }
.projets-categorie__texte { max-width: 70ch; margin: 3rem 0 0; line-height: 1.7; }
.projets-categorie__texte p { margin: 0 0 1rem; }
.projets-categorie__texte ul, .projets-categorie__texte ol { margin: 0 0 1rem 1.2rem; }
.projet-carte { min-width: 0; }
.projet-carte__lien {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 12px; color: inherit; text-decoration: none; transition: .2s ease;
}
.projet-carte__lien:hover { transform: translateY(-3px); }
.projet-carte__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(0,0,0,.05); border-radius: 12px; }
.projet-carte__image picture { display: block; width: 100%; height: 100%; }
.projet-carte__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.projet-carte__lien:hover .projet-carte__image img { transform: scale(1.04); }
.projet-carte__corps { display: flex; flex-direction: column; gap: .35rem; padding: 1rem .2rem 0; }
.projet-carte__cat {
  align-self: flex-start; padding: .18rem .6rem; border-radius: 999px; text-decoration: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  background: var(--c-accent-soft, rgba(0,0,0,.05)); color: var(--c-accent-ink, inherit);
}
.projet-carte__titre { font-family: var(--f-head, inherit); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.projet-carte__chapo { color: var(--c-muted); font-size: .95rem; }

/* Fiche projet */
.projet .container { max-width: 68rem; }
.projet__hero { display: block; margin-bottom: 2.4rem; }
.projet__hero img { width: 100%; height: auto; border-radius: 12px; }
.projet__grille { display: block; }
.projet__chapo { font-size: 1.12rem; line-height: 1.6; color: var(--c-muted); margin-bottom: 1.6rem; }
.projet__descriptif > * + * { margin-top: 1.15rem; }
.projet__descriptif h2 { font-size: 1.35rem; margin-top: 2rem; }
.projet__descriptif ul, .projet__descriptif ol { padding-left: 1.2rem; }

.projet-fiche { margin: 0 0 1.6rem; }
.projet-fiche__ligne { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .7rem 0; border-top: 1px solid rgba(0,0,0,.08); }
.projet-fiche__ligne:first-child { border-top: none; }
.projet-fiche dt { flex: 0 0 100%; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.projet-fiche dd { font-size: .98rem; }

.projet-galerie { display: flex; flex-wrap: wrap; gap: 1rem; margin: 3rem 0 0; }
.projet-galerie__item { flex: 0 0 calc((100% - 2rem) / 3); min-width: 240px; margin: 0; }
/* Toutes les vignettes au même format : une grille de photos aux hauteurs
   différentes se lit comme un désordre, alors que le travail montré ne l'est pas.
   La photo entière, non recadrée, est servie à l'agrandissement. */
.projet-galerie__voir {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 10px; overflow: hidden;
}
.projet-galerie__voir picture { display: block; width: 100%; }
.projet-galerie__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; }
.projet-galerie__voir:hover img { transform: scale(1.04); }
.projet-galerie__item figcaption { margin-top: .4rem; font-size: .84rem; color: var(--c-muted); }

@media (min-width: 1080px) {
  .projet__grille { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; }
  .projet__cote { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.2rem; }
}
@media (max-width: 980px) {
  .projets-grille, .projets-grille--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projet-galerie__item { flex: 0 0 calc((100% - 1rem) / 2); }
}
@media (max-width: 620px) {
  .projets-grille, .projets-grille--home { grid-template-columns: 1fr; }
  .projet-galerie__item { flex: 0 0 100%; }
}

/* Agrandissement d'une photo de galerie */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.5rem; background: rgba(15,15,15,.94);
}
.lightbox[hidden] { display: none; }
.lightbox__cadre { margin: 0; max-width: min(92vw, 1400px); max-height: 88vh; display: flex; flex-direction: column; gap: .8rem; }
.lightbox__cadre img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; display: block; margin: 0 auto; }
.lightbox__cadre figcaption { color: rgba(255,255,255,.8); font-size: .9rem; text-align: center; }
.lightbox__cadre figcaption[hidden] { display: none; }
.lightbox__cadre .lightbox__credit { margin: -.4rem 0 0; text-align: center; color: rgba(255,255,255,.6); }
.lightbox__cadre .lightbox__credit[hidden] { display: none; }
.lightbox__nav, .lightbox__fermer {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer; transition: background .18s ease;
}
.lightbox__nav { width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; }
.lightbox__nav:hover, .lightbox__fermer:hover { background: rgba(255,255,255,.22); }
.lightbox__fermer { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border-radius: 50%; font-size: 1.7rem; line-height: 1; }
.lightbox__compteur { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.65); font-size: .85rem; }
@media (max-width: 720px) {
  .lightbox { padding: .8rem; gap: .4rem; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox__cadre img { max-height: 70vh; }
}

/* Lien de carte projet : présent dans le flux, pas seulement au survol. */
.projet-carte__more { font-weight: 600; font-size: .9rem; color: var(--c-accent-ink, var(--c-primary)); }

/* Message affiché quand un filtre ne laisse rien. */
.filtre-vide { margin-top: 2rem; text-align: center; color: var(--c-muted); }

/* ===================== MODULE GUIDE (partenaires par rubrique) ===================== */
/* Socle neutre : structure et rythme. La charte du site (couleurs, polices)
   s'applique par les variables et par template/css/modules.css du client. */
.guide-hub__intro{max-width:70ch;margin:0 auto 2.5rem;text-align:center;}
.guide-hub__surtitre{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:0 0 .5rem;}
.guide-hub__texte{opacity:.85;margin:.75rem 0 0;}
.guide-section__titre{text-align:center;margin:0 0 1.75rem;}
.guide-rubriques{display:grid;gap:2rem 2.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.guide-rubrique{display:flex;flex-direction:column;gap:.9rem;}
.guide-rubrique__photo{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r,8px);background:rgba(0,0,0,.05);}
.guide-rubrique__photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.guide-rubrique:hover .guide-rubrique__photo img{transform:scale(1.05);}
.guide-rubrique__titre{margin:0;font-size:1.3rem;}
.guide-rubrique__titre a{text-decoration:none;color:inherit;}
.guide-rubrique__texte{margin:0;opacity:.85;}
.guide-rubrique__plus{margin-top:auto;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.guide-rubrique-page__intro{max-width:70ch;margin:0 auto;}
.grille-partenaires{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));}
/* Page unique du guide (content.guide_page_unique) : pastilles de filtre par rubrique */
.guide-filtres{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 0 2rem;}
.guide-filtres[hidden],.guide-liste__item[hidden]{display:none;}
.guide-filtre{font:inherit;font-size:.92rem;padding:.55rem 1.1rem;border:1px solid rgba(0,0,0,.18);border-radius:999px;background:transparent;color:inherit;cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
.guide-filtre:hover{border-color:var(--c-accent);}
.guide-filtre[aria-pressed="true"]{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary,#fff);}
.guide-liste__item{display:flex;}
.guide-liste__item>.partenaire{flex:1;}
.partenaire{display:flex;flex-direction:column;gap:.45rem;padding:1.5rem;border-radius:var(--r,8px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);background:#fff;}
.partenaire__photo{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:calc(var(--r,8px) - 2px);margin:-.5rem -.5rem .5rem;}
.partenaire__photo img{width:100%;height:100%;object-fit:cover;}
.partenaire__nom{font-size:1.15rem;margin:0;}
.partenaire__activite{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin:0;}
.partenaire__texte{font-size:.92rem;margin:.2rem 0 0;}
.partenaire__ligne{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;line-height:1.55;opacity:.85;margin:0;}
.partenaire__ligne svg{width:15px;height:15px;flex:none;margin-top:.32em;}
.partenaire__liens{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.7rem;padding-top:.9rem;border-top:1px solid rgba(0,0,0,.08);}
.partenaire__liens a{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.guide-carte{height:clamp(330px,50vh,500px);border-radius:var(--r,8px);overflow:hidden;z-index:0;margin:0 0 2rem;background:rgba(0,0,0,.05);}
.guide-carte .leaflet-container{font-family:inherit;}
.guide-carte__activite{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;opacity:.75;}
@media (max-width:720px){.guide-carte{height:300px;}}
/* Crédit d'une photo de contenu (credit-photo.js) : sous la photo, discret ; le lien s'ouvre dans un nouvel onglet. */
.credit-photo { display: block; margin-top: .25rem; font-size: .78rem; letter-spacing: .02em; color: var(--c-muted); }
.credit-photo a { color: inherit; text-decoration: none; }
.credit-photo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-figure figcaption .credit-photo:first-child { margin-top: 0; }