/* CHAL Five : feuille de styles commune aux 6 pages */
/* ===== Tokens ===== */
:root{
  --acier:#101615;      /* fond : charpente de nuit sous projecteurs */
  --or:#D3AE37;         /* or du logo CHAL : CTA, Ligue, filets */
  --or-fonce:#7E6110;   /* or pour le texte sur fond blanc (5,1:1) */
  --gazon:#16301A;      /* gazon sous projecteurs : section Ligue uniquement */
  --ambre:#D08A45;      /* lumière de la terrasse : réservé au lieu */
  --blanc:#EEF0EA;      /* blanc froid des projecteurs */
  --brume:#A7AFA8;      /* texte secondaire sur fond sombre */
  --encre:#2E3431;      /* texte secondaire sur fond blanc */
  --filet-sombre:rgba(238,240,234,.14);
  --filet-clair:rgba(16,22,21,.16);
  --titre:"Archivo","Arial Narrow",sans-serif;
  --texte:"Jost","Century Gothic",sans-serif;
  --gouttiere:clamp(16px,4vw,48px);
  --entete:64px;
  --section:clamp(64px,10vw,128px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--acier);color:var(--blanc);font-family:var(--texte);font-size:1.0625rem;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em;max-width:62ch}
h1,h2,h3{font-family:var(--titre);font-stretch:62%;font-weight:800;line-height:1;margin:0 0 .45em;letter-spacing:0}
h2{font-size:clamp(2.5rem,6vw,4.5rem);max-width:16ch}
h3,.h3{font-size:clamp(1.5rem,2.4vw,1.75rem);font-weight:700;line-height:1.1;max-width:none}
[id]{scroll-margin-top:calc(var(--entete) + 12px)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.clair :focus-visible{outline-color:var(--or-fonce)}

.conteneur{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gouttiere)}
.section{padding-block:var(--section);position:relative}
.clair{background:var(--blanc);color:var(--acier)}

/* ===== Boutons et liens ===== */
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.65em 1.5em;background:var(--or);color:var(--acier);font-family:var(--titre);font-stretch:75%;font-weight:700;font-size:1.125rem;line-height:1.2;text-decoration:none;border-radius:2px;transition:background-color .15s}
.bouton:hover{background:#E2C25A}
.bouton--contour{background:none;color:inherit;box-shadow:inset 0 0 0 2px var(--or)}
.bouton--contour:hover{background:rgba(211,174,55,.14)}
.lien{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:underline;text-decoration-color:var(--or);text-underline-offset:.35em;text-decoration-thickness:2px}
.lien:hover{text-decoration-color:currentColor}

/* ===== En-tête ===== */
.entete{position:fixed;inset:0 0 auto;z-index:50;background:rgba(16,22,21,.94);border-bottom:1px solid var(--filet-sombre)}
@supports (backdrop-filter:blur(8px)){.entete{background:rgba(16,22,21,.82);backdrop-filter:blur(8px)}}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;height:var(--entete);gap:24px}
.logo{display:inline-flex;align-items:baseline;gap:.4em;min-height:44px;align-items:center;text-decoration:none;color:var(--blanc)}
.logo b{font-family:var(--titre);font-weight:800;font-stretch:100%;font-size:1.625rem;font-style:italic;transform:skewX(-6deg);display:inline-block;letter-spacing:.01em}
.logo span{font-family:var(--titre);font-weight:700;font-size:.8125rem;color:var(--or);letter-spacing:.3em}
.nav{display:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px}
.nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:4px;text-decoration:none;font-weight:500}
.nav a:hover{color:var(--or)}
.entete .bouton{display:none;min-height:44px;padding:.4em 1.2em;font-size:1.0625rem}
.menu-bouton{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid rgba(211,174,55,.7);color:var(--blanc);font:500 1rem var(--texte);padding:8px 16px;min-height:44px;border-radius:2px;cursor:pointer}
.menu-bouton i{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.menu-bouton[aria-expanded="true"] i{box-shadow:none;background:var(--or);transform:rotate(45deg)}
/* Menu mobile : panneau plein écran, actions dans la zone du pouce */
.menu-mobile{position:fixed;inset:var(--entete) 0 0;background:var(--acier);display:flex;flex-direction:column;justify-content:flex-end;padding:24px var(--gouttiere) max(24px,env(safe-area-inset-bottom));overflow-y:auto}
.menu-mobile[hidden]{display:none}
.menu-mobile ul{list-style:none;margin:0 0 24px;padding:0}
.menu-mobile li a{display:flex;align-items:center;min-height:60px;border-bottom:1px solid var(--filet-sombre);text-decoration:none;font-family:var(--titre);font-stretch:62%;font-weight:800;font-size:2.25rem}
.menu-mobile .bouton{width:100%;min-height:56px}
@media (min-width:960px){
  .nav{display:block}
  .entete .bouton{display:inline-flex}
  .menu-bouton,.menu-mobile{display:none!important}
}

/* ===== Hero ===== */
.hero{position:relative;min-height:max(600px,100svh);display:flex;align-items:flex-end;padding:calc(var(--entete) + 32px) 0 clamp(40px,7vw,72px);overflow:hidden}
.hero-photo{position:absolute;inset:0;margin:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(16,22,21,.12) 0%,rgba(16,22,21,.4) 32%,rgba(16,22,21,.92) 52%,var(--acier) 64%)}
.hero .conteneur{position:relative}
.hero h1{font-size:clamp(3.25rem,14vw,6rem);line-height:.94;max-width:none;margin-bottom:.35em}
.hero h1 span{display:block;width:fit-content;transform:skewX(-6deg);transform-origin:0 100%;white-space:nowrap}
.hero .chapo{font-size:clamp(1.125rem,2vw,1.3125rem);line-height:1.5;color:var(--blanc);max-width:34ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:28px}
@media (max-width:599px){.hero .actions .bouton{width:100%}}
@media (min-width:960px){
  .hero{align-items:center;min-height:min(900px,100svh);padding-bottom:var(--entete)}
  .hero-photo{left:auto;width:46vw}
  .hero-photo::after{background:linear-gradient(to right,var(--acier) 0%,rgba(16,22,21,0) 22%)}
  .hero-photo img{object-position:50% 45%}
  .hero .texte{max-width:52%}
  .hero h1{font-size:clamp(5rem,7.6vw,7.5rem)}
}

/* ===== Pied de page ===== */
.pied{border-top:1px solid var(--filet-sombre);padding-block:28px;font-size:.9375rem;color:var(--brume)}
.pied p{margin:0;max-width:none}

/* ===== Mode notes de présentation (?notes=1) ===== */
.note{position:absolute;top:12px;right:var(--gouttiere);z-index:5;display:flex;flex-direction:column;align-items:flex-end;max-width:min(320px,calc(100% - 32px))}
.note[hidden]{display:none}
.note-pin{width:44px;height:44px;border-radius:50%;border:2px solid var(--acier);background:var(--or);color:var(--acier);font:800 1.125rem var(--titre);cursor:pointer;box-shadow:0 0 0 2px var(--or)}
.note-txt{margin:8px 0 0;background:var(--acier);color:var(--blanc);border:1px solid var(--or);padding:12px 14px;font-size:.9375rem;line-height:1.5}
.hero .note{top:calc(var(--entete) + 12px)}
/* ===== Offre entreprises ===== */
.entreprises .tete{display:grid;gap:40px}
.entreprises h2{color:var(--acier)}
.entreprises .chapo{font-size:clamp(1.125rem,1.8vw,1.25rem);line-height:1.55}
.entreprises .cible{color:var(--encre)}
.formats{list-style:none;margin:0;padding:0;border-top:2px solid var(--acier)}
.formats li{padding:20px 0 22px;border-bottom:1px solid var(--filet-clair)}
.formats h3{margin-bottom:.25em}
.formats p{margin:0;color:var(--encre)}
@media (min-width:960px){.entreprises .tete{grid-template-columns:1.1fr 1fr;gap:72px;align-items:start}.formats{margin-top:12px}}
.souscription{display:grid;gap:40px;margin-top:clamp(56px,8vw,96px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--filet-clair)}
@media (min-width:960px){.souscription{grid-template-columns:1.1fr 1fr;gap:72px}}
.souscription h3{font-size:clamp(1.75rem,3vw,2.25rem)}
.inclus{list-style:none;margin:0;padding:0}
.inclus li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--filet-clair);font-size:1.125rem}
.inclus li::before{content:"";position:absolute;left:0;top:1.35em;width:14px;height:2px;background:var(--or-fonce)}
.lancement{background:var(--acier);color:var(--blanc);padding:clamp(28px,4vw,44px);border-left:4px solid var(--or)}
.lancement .offert{font-family:var(--titre);font-stretch:62%;font-weight:800;font-size:clamp(3rem,6vw,4.5rem);line-height:.95;color:var(--or);margin:0 0 .3em}
.lancement .tarif{font-size:1.1875rem;margin-bottom:1.4em}
.lancement .mention{font-size:.875rem;color:var(--brume);margin:1.6em 0 0}

/* ===== Ligue CHAL Business : tableau d'affichage ===== */
.ligue{background:var(--gazon);color:var(--blanc)}
.tableau{position:relative;margin:0;background-color:#0A100E;background-image:radial-gradient(circle,rgba(211,174,55,.13) 1px,transparent 1.7px);background-size:9px 9px;border:2px solid rgba(211,174,55,.55);box-shadow:inset 0 0 0 8px #0A100E,inset 0 0 0 9px rgba(211,174,55,.25);padding:clamp(28px,5vw,64px) clamp(20px,5vw,64px);font-family:var(--titre);font-stretch:62%;line-height:1;max-width:none}
.tableau span{display:block}
.tableau .l1{font-weight:700;font-size:clamp(1.25rem,2.6vw,2rem);color:var(--blanc)}
.tableau .l2{font-weight:800;font-size:clamp(6.5rem,21vw,19rem);line-height:.9;color:var(--or);margin:.08em 0 .1em;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 72%,transparent 78%);mask-image:radial-gradient(circle closest-side,#000 72%,transparent 78%);
  -webkit-mask-size:.042em .042em;mask-size:.042em .042em}
.tableau .l3{font-weight:700;font-size:clamp(1.75rem,4vw,3rem);color:var(--blanc)}
/* Seul moment animé du site : le tableau s'allume ligne par ligne à son entrée à l'écran */
.js .tableau span{opacity:.12}
.js .tableau.allume span{animation:allumage .45s linear forwards}
.js .tableau.allume .l2{animation-delay:.2s}
.js .tableau.allume .l3{animation-delay:.45s}
@keyframes allumage{0%{opacity:.12}25%{opacity:.95}35%{opacity:.3}60%{opacity:1}70%{opacity:.65}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.js .tableau span,.js .tableau.allume span{opacity:1;animation:none}}
.ligue .suite{display:grid;gap:24px;margin-top:40px;align-items:center}
.ligue .suite p{margin:0;font-size:1.1875rem;color:var(--blanc)}
@media (min-width:960px){.ligue .suite{grid-template-columns:1fr auto;gap:48px}}

/* ===== Le lieu ===== */
.lieu .intro{color:var(--brume);font-size:1.125rem}
.espaces{display:grid;gap:28px;margin-top:40px}
.espace{margin:0;display:flex;flex-direction:column;gap:14px}
.espace img{width:100%;aspect-ratio:16/9;object-fit:cover}
.espace figcaption{border-top:2px solid var(--ambre);padding-top:12px}
.espace h3,.espace .h3{margin-bottom:.2em}
.espace p{margin:0;color:var(--brume);font-size:1rem}
.espace--grand img{aspect-ratio:5/4}
@media (min-width:600px){.espace--grand img{aspect-ratio:16/10}}
@media (min-width:960px){
  .espaces{grid-template-columns:1.55fr 1fr;grid-template-rows:auto auto;gap:32px 40px}
  .espace--grand{grid-row:1/3}
  .espace--grand img{aspect-ratio:auto;flex:1;min-height:0;height:100%}
}
.lieu-bas{display:grid;gap:32px;margin-top:clamp(48px,6vw,72px)}
.evenements h3,.evenements .h3{margin-bottom:.3em}
.evenements p{color:var(--brume);margin:0}
.reassurance{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--filet-sombre)}
.reassurance li{padding:16px 16px 16px 0;font-weight:500}
.reassurance li:nth-child(2n){padding-left:16px;border-left:1px solid var(--filet-sombre)}
.reassurance li:nth-child(n+3){border-top:1px solid var(--filet-sombre)}
@media (min-width:960px){
  .reassurance{grid-template-columns:repeat(4,1fr)}
  .reassurance li:nth-child(n){padding:18px 20px;border-left:1px solid var(--filet-sombre);border-top:0}
  .reassurance li:first-child{padding-left:0;border-left:0}
}
.lieu .actions{margin-top:40px}

/* ===== Particuliers ===== */
.particuliers{padding-block:clamp(40px,6vw,64px);border-top:1px solid var(--filet-sombre)}
.particuliers h2{font-size:clamp(1.75rem,3vw,2.25rem);max-width:none;color:var(--blanc);margin-bottom:.3em}
.particuliers p{margin:0;color:var(--brume)}
.particuliers p strong{color:var(--blanc);font-weight:500}

/* ===== FAQ et transmission ===== */
.faq .conteneur{display:grid;gap:32px}
@media (min-width:960px){.faq .conteneur{grid-template-columns:1fr 1.6fr;gap:72px}}
.faq h2{color:var(--acier);max-width:11ch}
.faq details{border-top:1px solid var(--filet-clair)}
.faq details:last-of-type{border-bottom:1px solid var(--filet-clair)}
.faq summary{cursor:pointer;list-style:none;min-height:44px;padding:20px 40px 20px 0;position:relative;font-family:var(--titre);font-stretch:75%;font-weight:700;font-size:1.3125rem;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border-right:2px solid var(--or-fonce);border-bottom:2px solid var(--or-fonce);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 22px;color:var(--encre)}
.transmettre{margin-top:48px;background:var(--acier);color:var(--blanc);padding:clamp(24px,4vw,36px);border-left:4px solid var(--or)}
.transmettre h3{color:var(--or)}
.transmettre p{color:var(--blanc)}
.transmettre :focus-visible{outline-color:var(--or)}

/* ===== Contact ===== */
.contact h2{color:var(--blanc);max-width:14ch}
.contact .grille{display:grid;gap:28px;margin-top:24px}
@media (min-width:600px){.contact .grille{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.contact .grille{grid-template-columns:1.4fr 1fr 1fr}}
.contact h3,.contact .h3{font-family:var(--texte);font-stretch:100%;font-weight:500;font-size:.9375rem;color:var(--or);margin-bottom:.5em}
.contact p{margin:0 0 .3em}
.contact .discret{color:var(--brume);font-size:.9375rem}
.contact .grille a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid rgba(211,174,55,.6)}
.contact .grille a:hover{border-color:var(--blanc)}
.ecrire{margin-top:clamp(40px,6vw,64px);padding-top:clamp(32px,4vw,40px);border-top:1px solid var(--filet-sombre)}
.ecrire p{color:var(--brume);max-width:52ch}

/* ===== Navigation : page courante ===== */
.nav a[aria-current="page"]{color:var(--or);box-shadow:inset 0 -2px 0 var(--or)}
.menu-mobile a[aria-current="page"]{color:var(--or)}

/* ===== En-tête des pages intérieures ===== */
.page-tete{padding:calc(var(--entete) + clamp(48px,8vw,104px)) 0 clamp(40px,6vw,72px);position:relative}
.page-tete h1{font-size:clamp(3rem,10vw,6.5rem);line-height:.95;max-width:14ch;margin-bottom:.35em}
.page-tete .chapo{font-size:clamp(1.125rem,2vw,1.3125rem);line-height:1.5;max-width:46ch;color:var(--blanc)}
.page-tete .note{top:calc(var(--entete) + 12px)}
.bandeau{margin:0}
.bandeau img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (min-width:960px){.bandeau img{aspect-ratio:21/8}}

/* ===== Accueil : aperçus ===== */
.manifeste{padding-block:var(--section)}
.manifeste blockquote{margin:0;font-family:var(--titre);font-stretch:62%;font-weight:800;font-size:clamp(2.25rem,5.6vw,4.25rem);line-height:1.02;max-width:20ch}
.manifeste blockquote p{max-width:none;margin:0}
.manifeste .actions{margin-top:32px}
.apercu-entreprises .conteneur{display:grid;gap:40px}
@media (min-width:960px){.apercu-entreprises .conteneur{grid-template-columns:1.1fr 1fr;gap:72px;align-items:start}}
.apercu-entreprises h2{color:var(--acier)}
.apercu-entreprises .offert{font-family:var(--titre);font-stretch:62%;font-weight:800;font-size:clamp(2.25rem,4vw,3rem);color:var(--or-fonce);margin:0 0 .4em}
.apercu-ligue .conteneur{display:grid;gap:32px;align-items:center}
@media (min-width:960px){.apercu-ligue .conteneur{grid-template-columns:1.2fr 1fr;gap:72px}}
.apercu-ligue p{color:var(--blanc);font-size:1.1875rem}
.tableau--mini{padding:clamp(24px,4vw,40px)}
.tableau--mini .l2{font-size:clamp(5rem,13vw,10rem)}
.tableau--mini .l3{font-size:clamp(1.5rem,3vw,2.25rem)}
.js .tableau--mini span{opacity:1}
.apercu-lieu .vignettes{display:grid;gap:16px;margin:32px 0 0}
.apercu-lieu .vignettes img{width:100%;aspect-ratio:4/3;object-fit:cover}
.apercu-lieu .vignettes figure{margin:0}
.apercu-lieu .vignettes figcaption{border-top:2px solid var(--ambre);padding-top:10px;margin-top:12px;font-family:var(--titre);font-stretch:75%;font-weight:700;font-size:1.25rem}
@media (min-width:600px){.apercu-lieu .vignettes{grid-template-columns:repeat(3,1fr);gap:24px}}
.apercu-lieu .actions{margin-top:32px}

/* ===== Page CHAL ===== */
.recit .conteneur{display:grid;gap:32px}
@media (min-width:960px){.recit .conteneur{grid-template-columns:1fr 1.5fr;gap:72px}}
.recit h2{color:var(--acier);max-width:12ch}
.recit p{font-size:1.125rem}
.piliers{display:grid;gap:0;margin-top:40px;border-top:2px solid var(--blanc)}
.pilier{display:grid;gap:8px;padding:24px 0;border-bottom:1px solid var(--filet-sombre)}
.pilier h3{margin:0;color:var(--or)}
.pilier ul{list-style:none;margin:0;padding:0}
.pilier li{padding:4px 0;color:var(--blanc)}
@media (min-width:960px){.pilier{grid-template-columns:1fr 2fr;gap:40px;padding:28px 0}.pilier ul{columns:2;column-gap:40px}}
.valeurs{padding-block:clamp(56px,8vw,96px);background:var(--gazon)}
.valeurs p{font-family:var(--titre);font-stretch:62%;font-weight:800;font-size:clamp(2.25rem,6.4vw,5rem);line-height:1.02;max-width:18ch;margin:0}
.chemins{display:grid;gap:20px;margin-top:40px}
@media (min-width:960px){.chemins{grid-template-columns:1fr 1fr;gap:32px}}
.chemin{padding:clamp(24px,4vw,36px);border-top:4px solid var(--or);background:#18201E}
.chemin h3{margin-bottom:.3em}
.chemin p{color:var(--brume)}
.societe{margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid var(--filet-sombre);color:var(--brume);font-size:.9375rem}
.societe p{margin:0}

/* ===== Ligue : page dédiée ===== */
.ligue--page{padding-top:calc(var(--entete) + clamp(40px,6vw,80px))}
.ligue .pourquoi{margin-top:clamp(48px,6vw,72px);padding-top:32px;border-top:1px solid rgba(238,240,234,.18);display:grid;gap:16px}
@media (min-width:960px){.ligue .pourquoi{grid-template-columns:1fr 1.5fr;gap:72px}}
.ligue .pourquoi h2{font-size:clamp(1.75rem,3vw,2.25rem);color:var(--or)}
.ligue .pourquoi p{color:var(--blanc)}

/* ===== Pied de page commun ===== */
.pied{padding-block:clamp(40px,6vw,64px) 28px}
.pied .colonnes{display:grid;gap:28px;margin-bottom:32px}
@media (min-width:600px){.pied .colonnes{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.pied .colonnes{grid-template-columns:1.4fr 1fr 1fr}}
.pied h2{font-family:var(--texte);font-stretch:100%;font-weight:500;font-size:.9375rem;color:var(--or);margin:0 0 .6em;max-width:none}
.pied ul{list-style:none;margin:0;padding:0}
.pied a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;text-decoration:none;color:var(--blanc)}
.pied a:hover{color:var(--or)}
.pied .logo{min-height:44px}
.pied .mentions{border-top:1px solid var(--filet-sombre);padding-top:20px}