/* Héroïque Consulting — identité V3 (charte de Carolyn, sept. 2021), en production depuis le 21/10/2026.
   Bleu nuit #263B55 et blanc dominants, or #B9904B en touche, beige #DFCCBB pour respirer ;
   formes biseautées des templates (p. 7-24) ; le H en 10 couleurs (p. 29).
   Polices : ZAG Bold / Avenir Medium dans la charte ; licence web de ZAG non établie, d'où les
   substituts libres (OFL) Saira Semi Condensed (titres) et Nunito Sans (texte).
   Surcouche de style.css : chargée après lui, elle en redéfinit les jetons et les formes. */

:root {
  --nuit:     #263b55;
  --nuit-900: #1a2a3f;
  --abysse:   #02232c;   /* fond très sombre bleu-vert de la charte */
  --or:       #b9904b;
  --or-lit:   #d9b77a;
  --beige:    #dfccbb;

  --navy-900: var(--nuit-900);
  --navy-800: var(--nuit);
  --navy-700: #34506f;
  --blue:     var(--nuit);
  --sage:     var(--or);
  --sage-lit: var(--or-lit);
  --ink:      #16233a;
  --paper:    #ffffff;

  --titre: "Saira Semi Condensed", "Arial Narrow", sans-serif;
  --sans:  "Nunito Sans", Avenir, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --biseau: 2.4rem;
}

body { font-family: var(--sans); }

/* ---- moins de majuscules : la casse normale, la ZAG (ici Saira) fait le caractère ---- */
h1, h2, h3, h4 { font-family: var(--titre); text-transform: none; letter-spacing: -.01em; line-height: 1.02; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
.eyebrow { text-transform: none !important; letter-spacing: .02em !important; font-weight: 700;
           font-size: .95rem !important; color: var(--or) !important; }
.eyebrow::before { background: var(--or) !important; }
.btn, .nav a, .sub-toggle, .pmore, .pmeta, .tl-label, .part-num, .num, .ptitle, .team li,
.feds li span, .sport-tag, .prog-kicker, .crumbs, .faq-item summary, .langs a, .stats dd, .meta dt {
  text-transform: none !important; letter-spacing: .01em !important; }
.btn { font-family: var(--titre); font-weight: 700; font-size: 1.02rem; }
.btn:not(.btn--ghost):not(.btn--dark) { --bg: var(--or); --fg: var(--nuit-900); }
.nav a { font-family: var(--titre); font-size: 1.02rem !important; font-weight: 600; }

/* ---- logo vectoriel (extrait de la charte p. 1), coloré par masque ---- */
.brand-logo { display: block; width: 7.4rem; aspect-ratio: 411 / 231; background: var(--white);
              -webkit-mask: url(/assets/img/logo-heroique.svg) no-repeat center / contain;
                      mask: url(/assets/img/logo-heroique.svg) no-repeat center / contain; }
.site-header.is-stuck, .page-programme .site-header { background: rgba(26, 42, 63, .97); }
.sub { background: var(--nuit-900) !important; }
.sub li a b { color: var(--or); }

/* ---- hero : vraie photo, voile bleu nuit, grand chevron arrondi bordé d'or (templates p. 9-10) ---- */
.hero { background: var(--nuit-900); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
              filter: saturate(.9) contrast(1.05); }
.hero::after { z-index: 0; background: linear-gradient(100deg, rgba(26,42,63,.94) 0%, rgba(38,59,85,.82) 45%, rgba(38,59,85,.25) 100%) !important; }
.hero-chevron { position: absolute; left: 0; top: 0; height: 100%; width: min(62vw, 54rem); z-index: 1;
                fill: rgba(38,59,85,.55); stroke: var(--or); stroke-width: 3; vector-effect: non-scaling-stroke; }
.hero h1 { max-width: 17ch; font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.4rem); }
.hero h1 em { color: var(--or-lit); }

/* ---- bandeau : or sur bleu nuit ---- */
.ticker { background: var(--or); color: var(--nuit-900); }
.ticker span { text-transform: none; font-family: var(--titre); font-weight: 700; }

/* ---- sections : bords coupés en biais au lieu des blocs droits ---- */
.on-dark, .on-deep { background: var(--nuit); clip-path: polygon(0 var(--biseau), 100% 0, 100% calc(100% - var(--biseau)), 0 100%);
                     margin-block: calc(var(--biseau) * -1); padding-block: calc(var(--pad-y) + var(--biseau)); position: relative; }
.on-deep { background: var(--abysse); }
.on-dark::before, .on-deep::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--biseau);
                                     background: linear-gradient(to top right, transparent calc(50% - 2px), var(--or) 50%, transparent calc(50% + 2px)); }
.on-sage { background: var(--beige); }
.on-sage .eyebrow { color: var(--nuit) !important; }
.form-section { background: var(--beige) !important;
                background-image: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.35) 22px 26px) !important; }

/* ---- cadres photo taillés, filet or (templates p. 11, 17, 19) ---- */
.split { display: grid; gap: 2.5rem; align-items: center; margin-top: 2rem; }
@media (min-width: 60rem) { .split { grid-template-columns: 1.1fr .9fr; gap: 4rem; } }
.frame { margin: 0; padding: 4px; background: var(--nuit);
         clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, var(--biseau) 100%, 0 calc(100% - var(--biseau))); }
.frame--gold { background: linear-gradient(135deg, var(--or-lit), var(--or) 45%, #8d6a32); }
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
             clip-path: polygon(0 0, calc(100% - var(--biseau) + 2px) 0, 100% calc(var(--biseau) - 2px), 100% 100%, calc(var(--biseau) - 2px) 100%, 0 calc(100% - var(--biseau) + 2px)); }
.split--proof .frame img { aspect-ratio: 3 / 2; }

.team-photos { display: grid; gap: 1rem; margin: 2.2rem 0 1rem; }
@media (min-width: 48rem) { .team-photos { grid-template-columns: 1.3fr 1fr 1fr; align-items: center; } }

/* ---- preuves ---- */
.stats dt { font-family: var(--titre); color: var(--or-lit); }
.quote { border-left-color: var(--or) !important; }
.feds img { background: var(--white); box-shadow: 0 0 0 3px var(--or); }

/* ---- programmes : le H de la charte en 10 couleurs (p. 29) ---- */
.pcard { border-radius: 0; clip-path: polygon(0 0, calc(100% - 1.6rem) 0, 100% 1.6rem, 100% 100%, 0 100%); }
.pcard .pnum { font-family: var(--titre); }
.pcard::after { display: none; }
.pcard:not(.pcard--premium) .pnum::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-right: .3em;
             vertical-align: -.12em; border-radius: 50%; background: var(--acc);
             -webkit-mask: url(/assets/img/logo-h.svg) no-repeat center / 62%, linear-gradient(#000 0 0);
             -webkit-mask-composite: xor; mask: url(/assets/img/logo-h.svg) no-repeat center / 62% exclude, linear-gradient(#000 0 0); }
.pcard--premium { background: var(--abysse); border-color: var(--or); }
.h-badge { display: inline-block; width: 2.6rem; height: 2.6rem; margin-right: .6rem; vertical-align: middle; border-radius: 50%;
           background: var(--acc);
           -webkit-mask: url(/assets/img/logo-h.svg) no-repeat center / 60%, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
           mask: url(/assets/img/logo-h.svg) no-repeat center / 60% exclude, linear-gradient(#000 0 0); }
.prog-kicker .badge { display: none; }
.prog-hero { background: linear-gradient(115deg, var(--nuit-900) 0%, var(--nuit) 60%, color-mix(in srgb, var(--acc) 35%, var(--nuit)) 100%); }
.prog-hero h1 { font-size: clamp(2.2rem, 1.2rem + 3.8vw, 4.6rem); }

/* ---- mobile : accueil resserré (promesse, approche, preuves, programmes, contact) ;
   activités, publics et engagement restent sur grand écran en attendant leurs pages du menu ---- */
@media (max-width: 48rem) {
  [data-mobile="page"] { display: none; }
  .quotes > .quote:nth-child(n+3) { display: none; }
  .pgrid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .pgrid .pcard { min-height: 0; padding: .9rem .8rem 1rem; gap: .35rem; }
  .pgrid .ptag, .pgrid .pmeta, .pgrid .pmore { display: none; }
  .pgrid .ptitle { font-size: 1rem; }
  .team-photos .frame:nth-child(n+2) { display: none; }
  .venues, #terrains h3 { display: none; }
  .hero .wrap { padding-block: 7.5rem 3.5rem; }
}