/* ============================================================
   Pages de contenu (Le Club, Liens, Contact…) — ossature commune
   Hérite de la couleur de section via --opc-sec-accent (body.opc-sec-*)
   ============================================================ */

/* Fond de contenu clair + halo discret de la couleur de section (lie avec la barre) */
body.opc-page-body{
  background:
    radial-gradient(70% 48% at 0% 0%, color-mix(in srgb, var(--opc-sec-accent) 10%, transparent), transparent 72%),
    radial-gradient(55% 40% at 100% 100%, color-mix(in srgb, var(--opc-sec-accent) 7%, transparent), transparent 70%),
    #f7f6f2 !important;
  background-attachment:fixed !important;
}
/* iOS Safari n'honore pas background-attachment:fixed → scroll sur tactile */
@media (max-width:600px), (max-height:500px) and (max-width:950px){
  body.opc-page-body{ background-attachment:scroll !important; }
}

.opc-page{
  --acc:var(--opc-sec-accent);
  max-width:1120px; margin:0 auto;
  padding:64px clamp(22px,5vw,64px) 120px;
  font-family:var(--opc-sans);
  color:var(--opc-ink);
}
.opc-page *{ box-sizing:border-box; }

/* ---------- En-tête de page ---------- */
.opc-page-head{ margin-bottom:clamp(20px,3vw,36px); }
.opc-eyebrow{ display:inline-flex; align-items:center; gap:12px; color:var(--acc);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; margin:0 0 18px; }
.opc-eyebrow::before{ content:""; width:36px; height:2px; background:var(--acc); display:inline-block; }
.opc-page-title{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl);
  font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.0; margin:0; letter-spacing:-.01em; }
.opc-page-lead{ font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.6; color:var(--acc); font-weight:500;
  margin:clamp(28px,4vw,48px) 0 0; max-width:none; }
.opc-page-head + .opc-sec{ margin-top:0; }

/* ---------- Sections ---------- */
.opc-sec{ margin-top:clamp(56px,9vw,120px); }
/* Sous-bloc rattaché à la section précédente (ex. « Les responsables » sous « Le bureau ») : rapproché */
.opc-sec.opc-sec-sub{ margin-top:clamp(22px,3.2vw,40px); }
.opc-sec-eyebrow{ display:inline-flex; align-items:center; gap:10px; color:var(--acc); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; margin:0 0 12px; }
.opc-sec-eyebrow::before{ content:""; width:28px; height:2px; background:currentColor; flex:none; }
.opc-h2{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 900, 'CASL' var(--opc-casl);
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.04; margin:0 0 26px; letter-spacing:-.01em; }
/* Liens : titres de sections plus discrets (sections courtes) + espace entre sections réduit */
.opc-liens .opc-h2{ font-size:clamp(1.4rem,2.4vw,1.95rem); margin-bottom:18px; }
.opc-liens .opc-sec{ margin-top:clamp(30px,4.5vw,52px); }
/* Le Club : espace entre sections réduit (même mesure resserrée que les autres pages) */
.opc-le-club .opc-sec{ margin-top:clamp(40px,6vw,72px); }
.opc-le-club .opc-sec.opc-sec-sub{ margin-top:clamp(22px,3.2vw,40px); }
/* Pages légales : sous-titres discrets (comme Liens) + textes en pavés justifiés pleine largeur */
.opc-legal .opc-h2{ font-size:clamp(1.4rem,2.4vw,1.95rem); margin-bottom:16px; }
.opc-legal .opc-rich p{ max-width:none; text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.opc-legal .opc-rich ul{ margin:0 0 1.15em; padding-left:1.2em; }
.opc-legal .opc-rich li{ font-size:1.06rem; line-height:1.7; color:#3a444b; margin:0 0 .4em; text-align:left; }
.opc-legal .opc-rich li::marker{ color:var(--acc); }
/* Pages légales : espace entre sections réduit (contenu dense) */
.opc-legal .opc-sec{ margin-top:clamp(26px,4vw,44px); }
.opc-rich p{ font-size:1.06rem; line-height:1.78; color:#3a444b; margin:0 0 1.15em; max-width:66ch;
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.opc-rich p:last-child{ margin-bottom:0; }
.opc-rich strong{ color:var(--opc-ink); font-weight:600; }
.opc-rich .lead-first::first-letter{
  font-family:'Recursive',serif; font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl); float:left;
  font-size:3.4em; line-height:.78; padding:6px 12px 0 0; color:var(--acc);
}

/* ---------- Texte + image (2 colonnes) ---------- */
.opc-split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,68px); align-items:center; }
.opc-split.is-rev{ direction:rtl; }
.opc-split.is-rev > *{ direction:ltr; }
.opc-media{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3;
  background:#e7ecef center/cover no-repeat; box-shadow:0 34px 70px rgba(10,25,35,.14); }
.opc-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.opc-media .cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; color:#fff; z-index:2;
  font-size:.82rem; background:linear-gradient(transparent, rgba(8,18,26,.7)); }
/* Variante « photo portrait » (page Le Club) : le chapô est dans la colonne texte,
   donc la photo démarre au niveau du titre. La hauteur de la section est pilotée par
   le TEXTE : l'image s'étire jusqu'à cette hauteur (stretch) sans jamais la dépasser
   → pas de vide avant la section suivante. object-fit:cover = ni déformation ni bande. */
.opc-split--tall{ align-items:stretch; grid-template-columns:1.25fr .75fr; }
.opc-split--tall .opc-media{ aspect-ratio:auto; height:auto; min-height:340px; }
/* Chapô en tête d'une colonne de texte (présentation, intro « Le bureau »…) :
   garde le style « lead » (accent, plus grand, non justifié) malgré .opc-rich p. */
.opc-rich .opc-page-lead{
  font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.6; color:var(--acc);
  font-weight:500; text-align:left; max-width:none; margin:0 0 clamp(20px,2.4vw,30px); }

/* ---------- Chiffres-clés ---------- */
.opc-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:26px;
  margin:clamp(36px,6vw,64px) 0 0; padding:clamp(28px,4vw,44px); border-radius:20px;
  background:color-mix(in srgb, var(--acc) 8%, #fff); border:1px solid color-mix(in srgb, var(--acc) 18%, transparent); }
.opc-stat{ text-align:center; }
.opc-stat b{ display:block; font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl);
  font-size:clamp(2.4rem,5vw,3.6rem); color:var(--acc); line-height:1; letter-spacing:-.02em; }
.opc-stat span{ display:block; color:var(--opc-muted); font-size:.95rem; letter-spacing:.02em; margin-top:8px; }

/* ---------- Timeline (histoire) ---------- */
.opc-timeline{ position:relative; margin-top:28px; padding-left:6px; }
.opc-tl{ position:relative; display:grid; grid-template-columns:96px 26px 1fr; align-items:start; }
.opc-tl-year{ text-align:right; padding-right:16px; padding-top:2px;
  font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl); font-size:1.5rem; color:var(--acc); line-height:1; }
.opc-tl-rail{ position:relative; align-self:stretch; }
.opc-tl-rail::before{ content:""; position:absolute; left:50%; top:6px; bottom:-14px; width:2px; transform:translateX(-50%);
  background:linear-gradient(var(--acc), color-mix(in srgb, var(--acc) 25%, transparent)); }
.opc-tl:last-child .opc-tl-rail::before{ bottom:auto; height:14px; }
.opc-tl-dot{ position:absolute; left:50%; top:6px; width:13px; height:13px; border-radius:50%; transform:translateX(-50%);
  background:#fff; border:3px solid var(--acc); z-index:1; }
.opc-tl-body{ padding:0 0 34px 22px; }
/* Dernier item de la frise : pas de padding sous le texte (sinon vide avant la section suivante) */
.opc-tl:last-child .opc-tl-body{ padding-bottom:0; }
.opc-tl-body h3{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 800, 'CASL' var(--opc-casl); font-size:1.16rem; margin:0 0 6px; }
.opc-tl-body p{ margin:0; color:#4a555c; line-height:1.65; max-width:60ch; }

/* ---------- Cartes (bureau, activités, liens) ---------- */
/* Tuiles à taille plafonnée (≈250px) et centrées : elles gardent la même dimension
   quel que soit leur nombre, sans s'étirer sur toute la largeur (plus de 1fr). */
.opc-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,250px)); gap:22px; margin-top:30px; justify-content:start; }
.opc-card{ background:#fff; border:1px solid var(--opc-line); border-radius:18px; padding:26px 24px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.opc-card:hover{ transform:translateY(-5px); box-shadow:0 24px 50px rgba(10,25,35,.12); }
.opc-card .role{ display:inline-flex; align-items:center; gap:9px; color:var(--acc); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin:0 0 10px; }
.opc-card .role::before{ content:""; width:22px; height:2px; background:currentColor; flex:none; }
.opc-card h3{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 800, 'CASL' var(--opc-casl); font-size:1.2rem; margin:0 0 6px; }
.opc-card p{ margin:0; color:var(--opc-muted); line-height:1.6; font-size:.95rem; }
/* En-tête de carte : le rond (photo ou initiales) du membre */
.opc-card-top{ display:flex; align-items:center; margin-bottom:16px; }
/* avatar à initiales */
.opc-avatar{ width:88px; height:88px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 900, 'CASL' var(--opc-casl); font-size:2rem; color:#fff;
  background:linear-gradient(140deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #000)); }
/* Avatar avec vraie photo : l'image remplit le rond (le dégradé sert de fond en attendant le chargement) */
.opc-avatar.has-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Avatar générique (pas de portrait) : silhouette neutre dans le rond dégradé. */
.opc-avatar.is-silhouette svg{ width:52px; height:52px; fill:none; stroke:#fff; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; opacity:.92; }

/* ---------- Liste illustrée (activités) ---------- */
.opc-feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:8px; }
.opc-feat{ display:flex; gap:16px; align-items:flex-start; }
.opc-feat .ic{ flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--acc) 14%, #fff); color:var(--acc); }
.opc-feat .ic svg{ width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.8; }
.opc-feat h3{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 800, 'CASL' var(--opc-casl); font-size:1.08rem; margin:2px 0 5px; }
.opc-feat p{ margin:0; color:#4a555c; line-height:1.6; font-size:.96rem; }

/* ---------- Cartes-liens (page Liens) ---------- */
.opc-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:8px; }
.opc-linkcard{ position:relative; display:flex; gap:16px; align-items:flex-start; background:#fff;
  border:1px solid var(--opc-line); border-radius:16px; padding:22px 46px 22px 22px; text-decoration:none; color:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.opc-linkcard:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(10,25,35,.1);
  border-color:color-mix(in srgb, var(--acc) 45%, transparent); }
.opc-linkcard .ic{ flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--acc) 14%, #fff); color:var(--acc); }
.opc-linkcard .ic svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; }
.opc-linkcard h3{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 800, 'CASL' var(--opc-casl); font-size:1.08rem; margin:2px 0 5px; }
.opc-linkcard p{ margin:0; color:var(--opc-muted); line-height:1.55; font-size:.94rem; }
.opc-linkcard .arw{ position:absolute; top:22px; right:20px; color:var(--acc); opacity:0; transform:translateX(-5px); transition:.3s; }
.opc-linkcard .arw svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
.opc-linkcard:hover .arw{ opacity:1; transform:none; }

/* ---------- Encadré / bloc d'appel ---------- */
.opc-callout{ margin-top:clamp(40px,6vw,72px); padding:clamp(28px,4vw,48px); border-radius:22px; color:#fff;
  background:linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #000)); position:relative; overflow:hidden; }
.opc-callout h2{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 900, 'CASL' var(--opc-casl); font-size:clamp(1.5rem,3vw,2.2rem); margin:0 0 12px; color:#fff; }
.opc-callout p{ margin:0 0 22px; max-width:none; line-height:1.65; color:rgba(255,255,255,.92); }
.opc-btn{ display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--acc);
  padding:13px 22px; border-radius:999px; font-weight:700; text-decoration:none; transition:.25s; }
.opc-btn:hover{ transform:translateX(3px); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.opc-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }

/* ---------- Contact ---------- */
.opc-contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,56px); align-items:stretch; margin-top:8px; }
.opc-form{ display:grid; gap:18px; }
.opc-field{ display:flex; flex-direction:column; gap:7px; scroll-margin-top:calc(var(--opc-topbar-h,116px) + 16px); }
.opc-field label{ font-size:.82rem; font-weight:600; color:var(--opc-ink); letter-spacing:.01em; }
.opc-field input, .opc-field textarea, .opc-field select{ font:inherit; font-size:1rem; line-height:1.5; color:var(--opc-ink);
  background:#fff; border:1px solid var(--opc-line); border-radius:12px; padding:13px 15px; transition:border-color .2s, box-shadow .2s; }
/* select : le rendu NATIF (macOS/navigateur) rogne le texte quand on lui applique un padding
   vertical → on neutralise l'apparence native et on pose notre propre flèche. Le texte n'est
   plus coupé et la taille reste lisible (1rem, comme les autres champs). */
.opc-field select{ -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:44px; height:auto; line-height:1.2; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:18px; }
.opc-field textarea{ min-height:150px; resize:vertical; }
.opc-field input:focus, .opc-field textarea:focus, .opc-field select:focus{ outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
.opc-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Widget Cloudflare Turnstile : léger espacement (n'apparaît que si les clés sont configurées) */
.opc-turnstile{ margin:2px 0 4px; }
.opc-form .opc-btn{ align-self:start; border:0; cursor:pointer; background:var(--acc); color:#fff; }
.opc-form .opc-btn:hover{ transform:translateX(3px); box-shadow:0 12px 30px color-mix(in srgb, var(--acc) 40%, transparent); }
.opc-form-note{ font-size:.82rem; color:var(--opc-muted); margin:2px 0 0; }

.opc-coords{ background:#fff; border:1px solid var(--opc-line); border-radius:18px; padding:26px;
  display:flex; flex-direction:column; }
.opc-coords h3{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 800, 'CASL' var(--opc-casl); font-size:1.15rem; margin:0 0 18px; }
.opc-coord{ display:flex; gap:13px; align-items:flex-start; margin-bottom:16px; }
.opc-coord .ic{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--acc) 14%, #fff); color:var(--acc); }
.opc-coord .ic svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; }
.opc-coord b{ display:block; font-size:.92rem; margin-bottom:2px; }
.opc-coord span, .opc-coord a{ color:var(--opc-muted); font-size:.92rem; text-decoration:none; line-height:1.5; }
.opc-coord a:hover{ color:var(--acc); }
.opc-map{ margin-top:16px; border-radius:14px; overflow:hidden; border:1px solid var(--opc-line); position:relative;
  flex:1 1 auto; min-height:260px; display:flex; }
.opc-map img{ width:100%; height:auto; aspect-ratio:900/380; display:block; filter:saturate(.96); transition:transform .5s ease; }
.opc-map iframe{ width:100%; aspect-ratio:900/380; display:block; border:0; }
#opc-leaflet-map{ width:100%; flex:1 1 auto; min-height:260px; display:block; background:#e7ecef; }
.opc-pin-icon{ background:none; border:0; }
.opc-pin{ display:block; filter:drop-shadow(0 4px 5px rgba(0,0,0,.3)); }
.leaflet-container{ font:inherit; }
.opc-map-hint{ position:absolute; right:10px; bottom:10px; background:rgba(255,255,255,.92); color:var(--opc-ink);
  font-size:.72rem; font-weight:600; padding:5px 11px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.14);
  text-decoration:none; z-index:2; }
.opc-map-hint:hover{ background:#fff; }

.opc-notice{ border-radius:14px; padding:15px 20px; margin-bottom:28px; font-size:.96rem; display:flex; gap:12px; align-items:center; }
.opc-notice svg{ width:22px; height:22px; flex:none; stroke:currentColor; fill:none; stroke-width:2; }
.opc-notice.ok{ background:#e7f6ec; color:#1f7a44; border:1px solid #bfe6cc; }
.opc-notice.err{ background:#fdeceb; color:#b23b31; border:1px solid #f3c8c4; }

@media (max-width:820px){ .opc-contact-grid{ grid-template-columns:1fr; } }

/* ---------- Page 404 ---------- */
.opc-404{ min-height:72vh; display:grid; place-items:center; text-align:center; }
@media (max-width:600px), (max-height:500px) and (max-width:950px){
  .opc-404{ min-height:calc(100dvh - var(--opc-topbar-h) - 80px); }
}
.opc-404-in{ max-width:640px; }
.opc-404 .opc-eyebrow{ justify-content:center; }
.opc-404-num{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 1000, 'CASL' var(--opc-casl); font-size:clamp(6rem,22vw,13rem); line-height:.9;
  background:linear-gradient(160deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #000)); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; margin:4px 0 8px; }
.opc-404-title{ font-family:'Recursive',system-ui,sans-serif; font-variation-settings:'wght' 900, 'CASL' var(--opc-casl); font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.06; margin:0 0 14px; }
.opc-404-lead{ color:var(--opc-muted); font-size:1.08rem; line-height:1.6; margin:0 auto 28px; max-width:46ch; }
.opc-404-btn{ background:var(--acc); color:#fff; border:0; }
.opc-404-nav{ margin-top:36px; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; }
.opc-404-nav a{ color:var(--opc-muted); text-decoration:none; font-weight:600; font-size:.95rem; }
.opc-404-nav a:hover{ color:var(--acc); }

/* ---------- Révélations au scroll ---------- */
/* .opc-reveal : défini globalement dans style.css (ralenti + partagé Galeries/Infos) */

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .opc-split{ grid-template-columns:1fr; }
  .opc-split.is-rev{ direction:ltr; }
  .opc-media{ aspect-ratio:16/10; }
  .opc-tl{ grid-template-columns:64px 22px 1fr; }
  .opc-tl-year{ font-size:1.2rem; }
}
/* (réduction de mouvement pour .opc-reveal : gérée globalement dans style.css) */