/* ============================================================
   REFONTE v3 — feuille partagée des pages accueil, adhésion
   et agenda. Direction : minimum d'informations, avantages
   d'adhésion au premier plan. Palette et typos inchangées.
   ============================================================ */

/* ===== Polices auto-hébergées (mêmes fichiers que le site) ===== */
@font-face { font-family:'Anton'; src:url('assets/fonts/Anton-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Anton'; src:url('assets/fonts/Anton-latin-ext.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'General Sans'; src:url('assets/fonts/GeneralSans-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'General Sans'; src:url('assets/fonts/GeneralSans-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'General Sans'; src:url('assets/fonts/GeneralSans-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'General Sans'; src:url('assets/fonts/GeneralSans-700.woff2') format('woff2'); font-weight:700 900; font-style:normal; font-display:swap; }

/* ===== Jetons ===== */
:root {
  --creme:#FAF5EC; --creme2:#F2E9D8; --encre:#3B0A16;
  --bordeaux:#5E0F1F; --bordeaux2:#300811; --footer:#310811;
  --or:#F1B51D; --bronze:#A67607; --rouge:#AF1E04;
  --encre-60:rgba(59,10,22,0.6); --encre-72:rgba(59,10,22,0.72);
  --creme-txt:#FFF7E6;
  --display:'Anton','General Sans',sans-serif;
  --texte:'General Sans','Switzer',sans-serif;
  --arabe:'Geeza Pro','Noto Naskh Arabic','Amiri',serif;
}
* { box-sizing:border-box; }
html { scroll-padding-top:84px; }
body { margin:0; font-family:var(--texte); color:var(--encre); background:var(--creme); overflow-x:hidden; }
img { max-width:100%; }
a { color:inherit; }
h1,h2,h3,p { margin:0; }
.anton { font-family:var(--display); font-weight:400; text-transform:uppercase; }
.inner { max-width:1180px; margin:0 auto; padding:0 28px; }

/* ===== L'écharpe : séparateur signature ===== */
.echarpe { height:8px; background:repeating-linear-gradient(115deg, var(--rouge) 0 26px, var(--or) 26px 52px); }

/* ===== Boutons ===== */
.btn-or { display:inline-block; background:linear-gradient(135deg,#F1B51D,#d99a06); color:#160505; text-decoration:none; font-weight:800;
  padding:16px 34px; clip-path:polygon(13px 0,100% 0,calc(100% - 13px) 100%,0 100%); white-space:nowrap; transition:filter .2s ease, transform .2s ease; }
.btn-or:hover { filter:brightness(1.07); transform:translateY(-1px); }
.btn-ligne { display:inline-block; color:var(--creme-txt); text-decoration:none; font-weight:700; padding:16px 26px;
  border:1px solid rgba(255,247,230,0.4); background:rgba(11,3,2,0.45); clip-path:polygon(13px 0,100% 0,calc(100% - 13px) 100%,0 100%); white-space:nowrap; }
.kicker { font-size:12px; font-weight:800; letter-spacing:3px; color:var(--bronze); text-transform:uppercase; display:flex; align-items:baseline; gap:14px; }
.kicker .ar { font-family:var(--arabe); font-size:15px; letter-spacing:0; color:rgba(59,10,22,0.4); font-weight:400; }

/* ===== Header ===== */
header.site { position:sticky; top:0; z-index:50; background:rgba(250,245,236,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(166,118,7,0.22); }
.tete { display:flex; align-items:center; gap:20px; padding:12px 28px; max-width:1180px; margin:0 auto; }
.tete .marque { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--encre); }
.tete .marque img { width:44px; height:44px; object-fit:contain; }
.tete .marque .nom { font-weight:900; font-size:17px; letter-spacing:0.5px; }
.tete .marque .sous { font-size:10px; color:rgba(59,10,22,0.5); font-weight:500; letter-spacing:1.5px; }
.tete nav { display:flex; gap:8px 24px; margin-left:auto; align-items:center; font-size:13.5px; font-weight:600; letter-spacing:0.5px; }
.tete nav a { color:rgba(59,10,22,0.75); text-decoration:none; }
.tete nav a:hover, .tete nav a.actif { color:var(--bronze); }
.tete .btn-or { font-size:13.5px; padding:11px 20px; }
.burger { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:4px; }
.burger span { width:22px; height:2px; background:var(--encre); display:block; }
.menu-mobile { display:none; }
.menu-mobile.ouvert { display:flex; flex-direction:column; gap:4px; padding:10px 28px 20px; border-top:1px solid rgba(166,118,7,0.18); }
.menu-mobile a { padding:10px 0; text-decoration:none; color:var(--encre); font-weight:700; font-size:15px; }

/* ===== Héro (accueil) ===== */
#hero { position:relative; min-height:86vh; display:flex; flex-direction:column; overflow:hidden; background:#160505; }
#hero .fond img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; }
#hero .voile { position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,3,2,0.45) 0%, rgba(11,3,2,0.35) 45%, rgba(11,3,2,0.94) 100%); }
#hero .voile::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(11,3,2,0.72) 0%, rgba(11,3,2,0.35) 46%, transparent 70%); }
#hero .contenu { position:relative; margin:auto auto 0; width:100%; max-width:1180px; padding:170px 28px 70px; color:var(--creme-txt); }
#hero .badge { display:inline-block; border:1px solid rgba(241,181,29,0.6); color:var(--or); font-size:11.5px; font-weight:800; padding:7px 16px; letter-spacing:2px;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); background:rgba(11,3,2,0.6); margin-bottom:22px; text-transform:uppercase; }
#hero h1 { font-size:clamp(44px, 6.4vw, 92px); line-height:0.98; letter-spacing:0.5px; text-wrap:balance; text-shadow:0 4px 30px rgba(11,3,2,0.65); }
#hero h1 .or { color:var(--or); text-shadow:0 0 36px rgba(241,181,29,0.45); }
#hero .ar-hero { font-family:var(--arabe); font-size:clamp(18px, 2vw, 24px); color:rgba(255,247,230,0.8); margin-top:18px; }
#hero .ar-hero small { font-family:var(--texte); font-size:12px; letter-spacing:2px; color:rgba(255,247,230,0.45); text-transform:uppercase; margin-left:12px; }
#hero p.pitch { font-size:17.5px; line-height:1.6; max-width:560px; color:rgba(255,247,230,0.85); margin-top:16px; text-wrap:pretty; }
#hero .actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:28px; }
#hero .note { display:block; margin-top:16px; font-size:12.5px; color:rgba(255,247,230,0.5); letter-spacing:0.5px; }

/* ===== Mini-héro (pages intérieures) ===== */
.mini-hero { position:relative; overflow:hidden; background:#160505; color:var(--creme-txt); }
.mini-hero .fond img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.mini-hero .voile { position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,3,2,0.55), rgba(11,3,2,0.9)); }
.mini-hero .contenu { position:relative; max-width:1180px; margin:0 auto; padding:130px 28px 56px; display:flex; flex-direction:column; gap:14px; }
.mini-hero .retour { color:rgba(255,247,230,0.55); text-decoration:none; font-weight:700; font-size:12.5px; letter-spacing:1.5px; }
.mini-hero h1 { font-size:clamp(40px, 5vw, 68px); line-height:1; letter-spacing:0.5px; text-shadow:0 4px 24px rgba(11,3,2,0.6); }
.mini-hero h1 .or { color:var(--or); text-shadow:0 0 30px rgba(241,181,29,0.45); }
.mini-hero p { font-size:16.5px; line-height:1.6; color:rgba(255,247,230,0.82); max-width:600px; text-wrap:pretty; }

/* ===== Ticker ===== */
.ticker { background:linear-gradient(90deg,#7A1A2A,#4A0D18); border-top:1px solid rgba(223,163,43,0.55); border-bottom:1px solid rgba(223,163,43,0.55); overflow:hidden; padding:12px 0; }
.ticker .piste { display:flex; gap:28px; width:max-content; animation:defile 32s linear infinite; }
.ticker span { font-weight:900; font-size:13px; letter-spacing:3px; white-space:nowrap; color:var(--creme-txt); }
.ticker span:nth-child(4n+1) { color:var(--or); }
.ticker span.sep { color:rgba(255,247,230,0.5); }
@keyframes defile { to { transform:translateX(-50%); } }

/* ===== Sections ===== */
section.bloc { padding:96px 0; position:relative; }
.entete-bloc { display:flex; flex-direction:column; gap:14px; margin-bottom:44px; }
.entete-bloc h2 { font-family:var(--display); font-weight:400; font-size:clamp(34px, 4.2vw, 54px); line-height:1.02; letter-spacing:0.5px; text-transform:uppercase; text-wrap:balance; }
.entete-bloc h2 .bronze { color:var(--bronze); }
.entete-bloc h2 .or { color:var(--or); text-shadow:0 0 28px rgba(241,181,29,0.4); }
.entete-bloc .sous-titre { font-size:16.5px; line-height:1.6; color:var(--encre-72); max-width:640px; text-wrap:pretty; }

/* ===== Bento des avantages ===== */
.bento { display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:250px; gap:18px; }
.tuile-b { position:relative; overflow:hidden; border:1px solid rgba(166,118,7,0.25); display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; color:var(--creme-txt); background:#2A0710; transition:transform .25s ease, box-shadow .25s ease; }
.tuile-b:hover { transform:translateY(-5px); box-shadow:0 18px 44px rgba(59,10,22,0.28); }
.tuile-b img.ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.tuile-b:hover img.ph { transform:scale(1.045); }
.tuile-b .ombre { position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,3,2,0.05) 30%, rgba(11,3,2,0.88) 100%); }
.tuile-b .corps { position:relative; padding:22px 24px; display:flex; flex-direction:column; gap:6px; }
.tuile-b .corps .sur { font-size:11px; font-weight:800; letter-spacing:2px; color:var(--or); text-transform:uppercase; }
.tuile-b .corps h3 { font-family:var(--display); font-weight:400; font-size:23px; letter-spacing:0.5px; line-height:1.05; text-transform:uppercase; }
.tuile-b .corps p { font-size:13.5px; line-height:1.5; color:rgba(255,247,230,0.78); }
.tuile-b.large { grid-column:span 2; grid-row:span 2; }
.tuile-b.haute { grid-row:span 2; }
/* Tuiles en aplat charte : grand numéro Anton en filigrane + trait or (piste C) */
.tuile-b .filig { position:absolute; top:-18px; right:-8px; font-family:var(--display); font-size:130px; line-height:1; color:rgba(241,181,29,0.12); pointer-events:none; }
.tuile-b .barre { width:34px; height:4px; background:var(--or); margin-bottom:4px; }

/* La grande tuile « deux cartes » */
.tuile-cartes { background:linear-gradient(160deg,#5E0F1F,#2A0710); justify-content:space-between; }
.tuile-cartes .corps { padding:28px 30px; }
.tuile-cartes .carte-mock { position:relative; margin:28px 30px 0; background:linear-gradient(135deg, rgba(175,30,4,0.9), rgba(45,9,3,0.95));
  border:1px solid rgba(241,181,29,0.55); padding:22px 24px; display:flex; flex-direction:column; gap:20px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%); box-shadow:0 18px 50px rgba(11,3,2,0.5); }
.carte-mock .ligne1 { display:flex; justify-content:space-between; align-items:center; }
.carte-mock .ligne1 .gauche { display:flex; align-items:center; gap:10px; font-weight:900; font-size:13px; letter-spacing:1px; }
.carte-mock .ligne1 img { width:30px; height:30px; object-fit:contain; }
.carte-mock .ligne1 .badge { font-size:10px; font-weight:800; color:var(--or); border:1px solid rgba(241,181,29,0.6); padding:4px 10px; letter-spacing:1.5px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.carte-mock .ligne2 { display:flex; justify-content:space-between; align-items:flex-end; }
.carte-mock .ligne2 .id { display:flex; flex-direction:column; gap:3px; }
.carte-mock .ligne2 .id .lab { font-size:9.5px; color:rgba(255,247,230,0.5); letter-spacing:2px; }
.carte-mock .ligne2 .id .nom { font-size:16px; font-weight:800; color:#fff; }
.carte-mock .ligne2 .id .num { font-size:10.5px; color:rgba(255,247,230,0.5); letter-spacing:1px; }
.carte-mock .qr { width:46px; height:46px; background:var(--creme-txt); border-radius:5px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:2px; padding:5px; }
.carte-mock .qr span { border-radius:1px; }
.carte-mock .qr span.n { background:#160505; }

/* ===== Étapes + prix (section sombre) ===== */
.section-sombre { background:linear-gradient(160deg,#5E0F1F,#300811); color:var(--creme-txt); overflow:hidden; }
.section-sombre .filigrane { position:absolute; right:-40px; bottom:-40px; font-family:var(--display); font-size:min(22vw, 260px); line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(241,181,29,0.13); pointer-events:none; user-select:none; text-transform:uppercase; }
.section-sombre .kicker { color:var(--or); }
.section-sombre .kicker .ar { color:rgba(255,247,230,0.45); }
.section-sombre .entete-bloc .sous-titre { color:rgba(255,247,230,0.78); }
.colonnes-adh { display:grid; grid-template-columns:1.1fr 420px; gap:64px; align-items:start; position:relative; }
.etapes { display:flex; flex-direction:column; border-top:1px solid rgba(241,181,29,0.3); }
.etape { display:flex; gap:24px; padding:24px 0; border-bottom:1px solid rgba(241,181,29,0.3); align-items:flex-start; }
.etape .num { font-family:var(--display); font-size:36px; color:var(--or); line-height:1; min-width:52px; }
.etape h3 { font-size:16.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:5px; }
.etape p { font-size:14.5px; line-height:1.55; color:rgba(255,247,230,0.72); }
.panneau { background:#2A0710; border:1px solid rgba(241,181,29,0.4); clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,26px 100%,0 calc(100% - 26px));
  padding:34px 32px; display:flex; flex-direction:column; gap:18px; box-shadow:0 0 60px rgba(175,30,4,0.35); }
.panneau .haut { display:flex; justify-content:space-between; align-items:center; }
.panneau .haut img { width:40px; height:40px; object-fit:contain; }
.panneau .haut .badge { font-size:10.5px; font-weight:800; color:var(--or); border:1px solid rgba(241,181,29,0.6); padding:4px 12px; letter-spacing:1.5px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.panneau .prix { display:flex; align-items:baseline; gap:10px; }
.panneau .prix .montant { font-family:var(--display); font-size:64px; color:var(--or); line-height:1; text-shadow:0 0 24px rgba(241,181,29,0.4); }
.panneau .prix small { font-size:14px; color:rgba(255,247,230,0.55); }
.panneau .btn-or { text-align:center; font-size:16.5px; }
.panneau .mention { font-size:12px; color:rgba(255,247,230,0.45); text-align:center; line-height:1.5; }
.panneau .vigilance { font-size:12.5px; color:var(--or); border:1px dashed rgba(241,181,29,0.5); padding:10px 14px; line-height:1.55; text-align:center; }
.panneau .faq { color:var(--or); text-decoration:none; font-weight:800; font-size:13px; letter-spacing:1px; text-align:center; }

/* ===== Bande identité (1 phrase + 4 chiffres) ===== */
.identite { background:var(--creme2); border-top:1px solid rgba(166,118,7,0.15); border-bottom:1px solid rgba(166,118,7,0.15); }
.identite .inner { padding-top:64px; padding-bottom:64px; display:flex; flex-direction:column; gap:36px; }
.identite p.def { font-size:18px; line-height:1.6; color:rgba(59,10,22,0.85); max-width:820px; text-wrap:pretty; }
.identite .chiffres { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.identite .chiffre { border-left:2px solid #DFA32B; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.identite .chiffre:nth-child(even) { border-left-color:#7A1A2A; }
.identite .chiffre .v { font-family:var(--display); font-size:34px; color:var(--bronze); line-height:1; }
.identite .chiffre:nth-child(even) .v { color:var(--encre); }
.identite .chiffre .l { font-size:12px; color:var(--encre-60); letter-spacing:1.2px; text-transform:uppercase; font-weight:600; }

/* ===== FAQ (page adhésion) ===== */
.faq-liste { display:flex; flex-direction:column; gap:26px; max-width:860px; }
.faq-item { border-left:2px solid #DFA32B; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.faq-item h3 { font-size:18px; font-weight:800; letter-spacing:0.2px; }
.faq-item p { font-size:15px; line-height:1.65; color:var(--encre-72); }
.faq-item a { color:var(--bronze); font-weight:700; }

/* ===== Cartes agenda ===== */
.affiches { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.affiche { text-decoration:none; color:var(--encre); background:rgba(255,253,248,0.92); border:1px solid rgba(166,118,7,0.25);
  display:flex; flex-direction:column; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; }
.affiche:hover { transform:translateY(-5px); box-shadow:0 18px 44px rgba(59,10,22,0.18); }
.affiche img { width:100%; height:220px; object-fit:cover; display:block; }
.affiche .corps { padding:22px 24px 26px; display:flex; flex-direction:column; gap:9px; flex:1; border-top:6px solid var(--rouge); }
.affiche:nth-child(2) .corps { border-top-color:var(--or); }
.affiche:nth-child(3) .corps { border-top-color:var(--bronze); }
.affiche .quand { color:var(--bronze); font-size:11.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.affiche h3 { font-size:19px; font-weight:800; line-height:1.25; text-transform:uppercase; letter-spacing:0.3px; }
.affiche p { font-size:14px; line-height:1.55; color:rgba(59,10,22,0.65); flex:1; }
.affiche .ou { font-size:12px; font-weight:600; color:rgba(59,10,22,0.45); letter-spacing:0.5px; }

/* ===== CTA final ===== */
#final { background:linear-gradient(160deg,#7A1A2A,#4A0D18); color:var(--creme-txt); text-align:center; position:relative; overflow:hidden; }
#final .halo { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 130%, rgba(241,181,29,0.28), transparent 60%); pointer-events:none; }
#final .inner { position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; padding-top:88px; padding-bottom:88px; }
#final img.blason { width:84px; height:84px; object-fit:contain; filter:drop-shadow(0 0 22px rgba(241,181,29,0.5)); }
#final h2 { font-family:var(--display); font-weight:400; font-size:clamp(36px, 4.6vw, 56px); line-height:1.03; text-transform:uppercase; letter-spacing:0.5px; text-wrap:balance; }
#final h2 .or { color:var(--or); text-shadow:0 0 30px rgba(241,181,29,0.5); }
#final .ar-final { font-family:var(--arabe); font-size:19px; color:rgba(255,247,230,0.85); }
#final .devise { font-size:14px; letter-spacing:2px; font-weight:800; color:rgba(255,247,230,0.7); text-transform:uppercase; }
#final .btn-or { font-size:17px; padding:18px 42px; box-shadow:0 0 50px rgba(241,181,29,0.4); }

/* ===== Footer ===== */
footer.site { background:var(--footer); color:rgba(255,247,230,0.6); border-top:1px solid rgba(241,181,29,0.2); }
footer.site .grille { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; padding:52px 28px 38px; max-width:1180px; margin:0 auto; }
footer.site .colonne { display:flex; flex-direction:column; gap:12px; font-size:13.5px; }
footer.site .colonne .titre { color:var(--or); font-weight:800; font-size:11.5px; letter-spacing:2px; }
footer.site a { color:rgba(255,247,230,0.6); text-decoration:none; }
footer.site a:hover { color:var(--creme-txt); }
footer.site .marque { display:flex; align-items:center; gap:10px; }
footer.site .marque img { width:38px; height:38px; object-fit:contain; }
footer.site .marque span { font-weight:900; font-size:16px; color:var(--creme-txt); }
footer.site .basline { border-top:1px solid rgba(241,181,29,0.12); padding:20px 28px; text-align:center; font-size:12px; color:rgba(255,247,230,0.35); letter-spacing:1px; }

/* Cartes d'événements injectées par data.js dans les grilles .affiches */
.affiches .card-hover { text-decoration:none; color:#3B0A16; }

/* ===== Héro : badges jumeaux + bande de chiffres sous le héro ===== */
#hero .badges { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
#hero .badges .badge { margin-bottom:0; }
.identite.sous-hero .inner { padding-top:44px; padding-bottom:44px; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .colonnes-adh { grid-template-columns:1fr; gap:48px; }
  .panneau { max-width:460px; }
  .bento { grid-template-columns:1fr 1fr; grid-auto-rows:240px; }
}
@media (max-width: 860px) {
  .tete nav { display:none; }
  .burger { display:flex; }
  .affiches { grid-template-columns:1fr; }
  .identite .chiffres { grid-template-columns:1fr 1fr; gap:24px; }
  footer.site .grille { grid-template-columns:1fr 1fr; gap:36px; }
  section.bloc { padding:68px 0; }
  #hero .contenu { padding-top:140px; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns:1fr; grid-auto-rows:230px; }
  .tuile-b.large { grid-column:span 1; }
  footer.site .grille { grid-template-columns:1fr; }
  #hero .actions .btn-or, #hero .actions .btn-ligne { width:100%; text-align:center; }
  .tete .btn-or { display:none; }
}