/* ==========================================================================
   CBVG GROUP — Consulting Business Vision Group
   Feuille de style principale
   ========================================================================== */

:root {
  /* Palette CBVG — version moderne */
  --color-black: #090909;
  --color-anthracite: #171717;
  --color-gold: #B68A35;
  --color-gold-light: #D7B86A;
  --color-cream: #F6F3EC;
  --color-soft: #EEE9DE;
  --color-white: #FFFFFF;
  --color-text: #222222;
  --color-muted: #6C6A65;
  --color-border: rgba(18, 18, 18, 0.12);

  /* Alias conservés pour compatibilité interne */
  --noir: var(--color-black);
  --blanc-casse: var(--color-cream);
  --dore: var(--color-gold);
  --dore-clair: var(--color-gold-light);
  --anthracite: var(--color-anthracite);
  --gris-clair: var(--color-soft);
  --blanc: var(--color-white);

  --font-display: 'Manrope', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-sans: 'Manrope', 'Plus Jakarta Sans', -apple-system, sans-serif;
  /* Pairing éditorial : serif sur les grands titres (.hero-title, .section-title) uniquement */
  --font-serif: 'Fraunces', 'Georgia', serif;

  --container-max: 1280px;
  --gutter: clamp(20px, 4vw, 48px);

  --radius-s: 9px;
  --radius-m: 22px;
  --radius-l: 32px;

  --shadow-card: 0 14px 32px -22px rgba(9, 9, 9, 0.18);
  --shadow-card-hover: 0 20px 44px -22px rgba(9, 9, 9, 0.24);
  --shadow-header: 0 8px 24px -18px rgba(9, 9, 9, 0.28);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-s: 0.2s;
  --dur-m: 0.45s;
  --dur-l: 0.65s;

  /* Échelle typographique unifiée — mêmes proportions sur CBVG et ABCD,
     seules les couleurs changent selon la marque. Valeurs mobiles ci-dessous
     (par défaut, "mobile-first"), remplacées par les valeurs desktop dans le
     bloc @media (min-width: 1024px) plus bas dans ce fichier. clamp() est
     utilisé pour un léger ajustement fluide à l'intérieur de chaque
     fourchette, jamais en dehors : le plancher/plafond de chaque clamp()
     EST la fourchette demandée, ce n'est donc pas une valeur approximative. */
  --fs-hero: clamp(2.125rem, 5vw, 2.375rem);   /* Hero H1 mobile : 34–38px */
  --fs-h2: clamp(1.75rem, 4vw, 2rem);          /* H2 mobile : 28–32px */
  --fs-h3: clamp(1.3125rem, 3vw, 1.5rem);      /* H3 mobile : 21–24px */
  --fs-body: 1rem;                             /* Texte mobile : 16px */
  --fs-button: 0.9375rem;                      /* Boutons mobile : 15px */
}

@media (min-width: 1024px) {
  :root {
    --fs-hero: clamp(1.8rem, 2.6vw, 2.5rem);     /* Hero H1 desktop : 29–40px (échelle de la maquette validée) */
    --fs-h2: clamp(2.5rem, 3vw, 2.875rem);       /* H2 desktop : 40–46px */
    --fs-h3: clamp(1.5rem, 1.6vw, 1.75rem);      /* H3 desktop : 24–28px */
    --fs-body: clamp(1.0625rem, 1vw, 1.125rem);  /* Texte desktop : 17–18px */
    --fs-button: clamp(0.9375rem, 0.9vw, 1rem);  /* Boutons desktop : 15–16px */
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-cream);
  line-height: 1.7;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* h3 : taille de base héritée de l'échelle unifiée (--fs-h3, 21–24 / 24–28px).
   Les titres de cartes denses (domaines d'intervention, valeurs, org-cards)
   gardent volontairement leur propre taille, plus petite, définie par des
   sélecteurs plus spécifiques plus bas dans ce fichier — ce sont des
   libellés de carte, pas des titres de section au sens de l'échelle H1-H3. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
  color: var(--color-black);
  letter-spacing: -0.01em;
}
h3 { font-size: var(--fs-h3); }
p { margin: 0; }
input, textarea, select { font-family: inherit; font-size: 16px; }

:focus-visible { outline: 2px solid var(--dore); outline-offset: 3px; }

/* Verrou de défilement lorsque le menu mobile est ouvert */
body.nav-locked { overflow: hidden; height: 100%; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  top: 10px; left: 10px;
  width: auto; height: auto;
  clip: auto;
  z-index: 9999;
  background: var(--noir);
  color: var(--blanc-casse);
  padding: 12px 20px;
  border-radius: var(--radius-s);
  font-size: 0.85rem;
  font-weight: 700;
}

/* ---------- Utilitaires ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--color-gold);
  font-weight: 600;
  margin-bottom: 18px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(182, 138, 53, 0.1);
}
.section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.14;
  letter-spacing: -0.008em;
  margin-bottom: 20px;
  color: var(--color-black);
  max-width: 22ch;
  text-wrap: balance;
}
.section-title .gold { color: var(--color-gold); }
.section-lead {
  max-width: 620px;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}
.section-head {
  max-width: 760px;
  margin-bottom: 56px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .section-title { margin-left: auto; margin-right: auto; }

.btn {
  min-height: 50px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-button);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 160ms var(--ease);
}
.btn::after {
  content: "→";
  display: inline-block;
  transition: transform 300ms ease;
  font-size: 0.95em;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.btn-primary::after { color: var(--color-gold-light); }
.btn-primary:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-black); }
.btn-primary:hover::after { transform: translateX(4px); color: var(--color-black); }

.btn-gold {
  background: var(--color-gold);
  color: var(--color-black);
  border-color: var(--color-gold);
}
.btn-gold::after { color: var(--color-black); }
.btn-gold:hover { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.btn-gold:hover::after { transform: translateX(4px); color: var(--color-gold-light); }

.btn-outline {
  background: transparent;
  color: var(--color-anthracite);
  border-color: rgba(23,23,23,0.28);
}
.btn-outline::after { color: var(--color-gold); }
.btn-outline:hover { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.btn-outline:hover::after { transform: translateX(4px); color: var(--color-gold-light); }

.btn-outline-light {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.35);
}
.btn-outline-light::after { color: var(--color-gold-light); }
.btn-outline-light:hover { background: var(--color-white); color: var(--color-black); border-color: var(--color-white); }
.btn-outline-light:hover::after { transform: translateX(4px); color: var(--color-gold); }

.btn-text {
  background: none; border: none; padding: 0; min-height: 0;
  color: var(--color-anthracite);
  font-weight: 600; font-size: 0.86rem;
  border-bottom: 1px solid var(--color-gold); padding-bottom: 3px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-text::after { content: "→"; font-size: 0.9em; transition: transform 300ms ease; color: var(--color-gold); }
.btn-text:hover { color: var(--color-gold); }
.btn-text:hover::after { transform: translateX(3px); }

/* Petit lien complémentaire (sans flèche, souligné fin) */
.link-soft {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.88rem; font-weight: 500; color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
  transition: color 250ms ease, border-color 250ms ease;
}
.link-soft:hover { color: var(--color-gold); border-color: var(--color-gold); }

.badge {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-s);
  background: var(--gris-clair);
  color: var(--anthracite);
}
.badge-demo { background: #fbe9c6; color: #6b4d10; }
.badge-gold { background: var(--dore); color: var(--noir); }

/* Composition visuelle premium en l'absence de photographie réelle :
   halo doré, grain fin, médaillon central — jamais un bloc gris hachuré. */
/* Photo envoyée depuis l'espace admin : remplace visuellement un .placeholder-box
   dans le même conteneur (le conteneur définit déjà aspect-ratio + overflow:hidden). */
.cms-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}
.placeholder-box {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  background:
    radial-gradient(circle at 16% 14%, rgba(182,138,53,0.20), transparent 44%),
    radial-gradient(circle at 88% 86%, rgba(182,138,53,0.13), transparent 48%),
    linear-gradient(155deg, #EDE7D8 0%, #E3DAC4 100%);
  color: var(--color-muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
  line-height: 1.55;
  padding: 30px;
  min-height: 100%;
  overflow: hidden;
}
.placeholder-box::before {
  content: "";
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(182,138,53,0.55);
  background: radial-gradient(circle, rgba(182,138,53,0.24) 0%, transparent 72%);
  margin-bottom: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.placeholder-box::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(9,9,9,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9,9,9,0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 76%);
}
/* Variante sombre (héros nuit, HSK à la une, mosaïque écosystème) */
.placeholder-box.dark, .hsk-feature .placeholder-box, .eco-card .placeholder-box {
  background:
    radial-gradient(circle at 20% 15%, rgba(215,184,106,0.22), transparent 46%),
    radial-gradient(circle at 85% 85%, rgba(215,184,106,0.14), transparent 50%),
    linear-gradient(155deg, #171717 0%, #090909 100%);
  color: rgba(247,245,240,0.55);
}
.placeholder-box.dark::before, .hsk-feature .placeholder-box::before, .eco-card .placeholder-box::before {
  border-color: rgba(215,184,106,0.5);
  background: radial-gradient(circle, rgba(215,184,106,0.28) 0%, transparent 72%);
}
.placeholder-box.dark::after, .hsk-feature .placeholder-box::after, .eco-card .placeholder-box::after {
  background-image:
    linear-gradient(rgba(247,245,240,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,245,240,0.05) 1px, transparent 1px);
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* Variantes directionnelles (arrivée latérale, sobre) */
.reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal-left { transform: translateX(-24px); }
.reveal-right { transform: translateX(24px); }
.reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translateX(0); }

.gold-underline {
  position: relative;
  display: inline-block;
}
.gold-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px;
  width: 0;
  background: var(--dore);
  transition: width 0.8s var(--ease);
}
.gold-underline.is-visible::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
  .gold-underline::after { width: 100%; }
}

/* ==========================================================================
   HEADER — TOPBAR (niveau 1)
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 500; }

.topbar {
  background: #111111;
  color: rgba(246,243,236,0.88);
  font-size: 0.82rem;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow: hidden;
  max-height: 46px;
  transition: max-height 380ms var(--ease), opacity 380ms var(--ease), padding 380ms var(--ease);
}
.site-header.is-scrolled .topbar { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.topbar a, .topbar span.sep { display: inline-flex; align-items: center; gap: 6px; }
.topbar a { opacity: 0.92; transition: color 250ms ease, opacity 250ms ease; }
.topbar a:hover { color: var(--color-gold-light); opacity: 1; }
.topbar .ic { color: var(--color-gold-light); font-size: 0.9em; }
.topbar .ic svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; }
.topbar span.sep { width: 1px; height: 12px; background: rgba(246,243,236,0.2); flex-shrink: 0; }
.topbar-cta { font-weight: 600; color: var(--color-gold-light); }

/* Bandeau d'informations défilant — actif sur desktop ET mobile, boucle
   continue via deux groupes identiques translatés de -50% (aucun saut). */
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 11px;
}
.topbar-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.topbar-marquee-track {
  display: flex;
  width: max-content;
  flex-shrink: 0;
  animation: topbarInfiniteScroll 38s linear infinite;
  will-change: transform;
}
/* Pause au survol (souris) et au focus clavier (accessibilité) */
.topbar-marquee:hover .topbar-marquee-track,
.topbar-marquee:focus-within .topbar-marquee-track {
  animation-play-state: paused;
}
.topbar-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 28px;
  padding-right: 28px;
  white-space: nowrap;
}
@keyframes topbarInfiniteScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.topbar-marquee a { color: rgba(246,243,236,0.88); }
.topbar-marquee a:focus-visible { outline: 1px solid var(--color-gold-light); outline-offset: 3px; }
.topbar-marquee .ic { color: var(--color-gold-light); font-size: 0.9em; margin-right: 5px; }
.topbar-marquee .sep { opacity: 0.35; margin: 0 22px; }
.topbar-marquee-item { display: inline-flex; align-items: center; color: rgba(246,243,236,0.88); }
.topbar-marquee-tagline { color: rgba(246,243,236,0.62); font-style: italic; }
@media (max-width: 768px) {
  .topbar-marquee-track { animation-duration: 26s; }
  .topbar-marquee-group { gap: 22px; padding-right: 22px; }
  .topbar-marquee .sep { margin: 0 18px; }
}

.lang-switch { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
@media (max-width: 480px) { .lang-switch { display: none; } }
.lang-switch button {
  background: none; border: none; color: rgba(246,243,236,0.6); font-size: 0.8rem; padding: 4px 2px;
  transition: color 250ms ease;
}
.lang-switch button.active { color: var(--color-gold-light); font-weight: 700; }
.lang-switch button:hover { color: var(--color-gold-light); }
.lang-switch .sep-slash { opacity: 0.35; }

/* ==========================================================================
   HEADER — NAVBAR (niveau 2)
   ========================================================================== */
.navbar {
  background-color: #F7F3EA;
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 350ms var(--ease);
}
.site-header.is-scrolled .navbar { box-shadow: var(--shadow-header); }
.navbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 92px;
  transition: min-height 350ms var(--ease);
}
.site-header.is-scrolled .navbar-inner { min-height: 74px; }

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark {
  width: 52px; height: 52px;
  border: 1.5px solid var(--color-black);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--color-black);
  flex-shrink: 0;
  position: relative;
  transition: width 350ms var(--ease), height 350ms var(--ease);
}
.site-header.is-scrolled .brand-mark { width: 42px; height: 42px; font-size: 0.92rem; }
.brand-mark--img { object-fit: contain; padding: 2px; background: #fff; }
.brand-mark::after {
  content: "";
  position: absolute; inset: -5px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
}
/* Logo seul (sans nom/sous-titre texte à côté) : affiché dans son format
   d'origine, sans cadre circulaire ni fond ni recadrage — le logo envoyé
   par le client garde exactement son apparence normale. */
.brand-mark--solo {
  width: auto;
  height: 72px;
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  object-fit: contain;
  transition: height 350ms var(--ease);
}
.brand-mark--solo::after { content: none; }
.site-header.is-scrolled .brand-mark--solo { width: auto; height: 54px; }
.brand-text { line-height: 1.15; }
.brand-text .name { font-family: var(--font-display); font-size: 1.22rem; font-weight: 800; letter-spacing: -0.01em; color: var(--color-black); }
.brand-text .sub { font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-gold); font-weight: 700; }

.main-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.main-nav > ul { display: flex; align-items: center; gap: 2px; }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a, .main-nav > ul > li > button {
  position: relative;
  display: flex; align-items: center; gap: 5px;
  background: none; border: none;
  padding: 12px 11px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  color: #272727;
  white-space: nowrap;
  transition: color 280ms ease;
}
.main-nav > ul > li > a::after,
.main-nav > ul > li > button::after {
  content: "";
  position: absolute; left: 11px; right: 11px; bottom: 6px;
  height: 2px;
  background: #A87924;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease);
}
.main-nav > ul > li > a:hover, .main-nav > ul > li > button:hover,
.main-nav > ul > li.open > button { color: #A87924; }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li > button:hover::after,
.main-nav > ul > li.open > button::after,
.main-nav > ul > li > a.is-active::after { transform: scaleX(1); }
.caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-s); margin-top: -3px; opacity: 0.7; }
.main-nav > ul > li.open .caret { transform: rotate(-135deg); margin-top: 3px; }

.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Dropdown simple (Le Groupe / Nos marques) */
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 264px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-card-hover);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 300ms;
  z-index: 400;
}
li.open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.dropdown-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 0.88rem; font-weight: 600; color: var(--color-anthracite);
  transition: background 220ms ease, color 220ms ease;
}
.dropdown-item:hover { background: var(--color-cream); color: var(--color-gold); }
.dropdown-item .tag { font-size: 0.68rem; font-weight: 600; color: var(--color-muted); text-transform: none; }
.dropdown-item .arrow-thin { font-size: 0.85em; color: var(--color-gold); opacity: 0; transform: translateX(-3px); transition: opacity 220ms ease, transform 220ms ease; }
.dropdown-item:hover .arrow-thin { opacity: 1; transform: translateX(0); }

/* Méga-menu épuré (Nos activités) */
.mega-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(760px, 90vw);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-card-hover);
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 300ms;
  z-index: 400;
}
li.open .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.mega-menu-grid.two-col { grid-template-columns: repeat(2, 1fr); }
.mega-item {
  display: flex; gap: 14px; align-items: baseline;
  padding: 13px 12px; border-radius: 10px;
  transition: background 220ms ease;
}
.mega-item:hover { background: var(--color-cream); }
.mega-item-icon {
  flex-shrink: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 0.78rem;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  width: 24px;
}
.mega-item-icon--img { width: 26px; height: 26px; border-radius: 7px; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-border); }
.mega-item-icon--img img { width: 100%; height: 100%; object-fit: contain; }
.mega-item-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; color: var(--color-black); margin-bottom: 2px; }
.mega-item-title .arrow-thin { font-size: 0.85em; color: var(--color-gold); opacity: 0; transform: translateX(-3px); transition: opacity 220ms ease, transform 220ms ease; }
.mega-item:hover .arrow-thin { opacity: 1; transform: translateX(0); }
.mega-item-desc { font-size: 0.78rem; color: var(--color-muted); line-height: 1.5; }
.mega-menu-footer {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-border);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.mega-menu-footer p { font-size: 0.8rem; color: var(--color-muted); max-width: 420px; }

/* Hamburger */
.hamburger {
  display: none;
  background: none; border: none;
  width: 44px; height: 44px;
  position: relative;
  flex-shrink: 0;
}
.hamburger span {
  position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--color-black);
  transition: transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 22px; }
.hamburger span:nth-child(3) { top: 28px; }
.hamburger.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   MOBILE NAV
   ========================================================================== */
.mobile-nav {
  position: fixed; inset: 0; z-index: 600;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform var(--dur-m) var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(20px, env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
  width: 92%;
  max-width: 420px;
  margin-left: auto;
  box-shadow: -20px 0 50px -20px rgba(9,9,9,0.25);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.mobile-nav-close {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav > .container > ul > li { border-bottom: 1px solid var(--color-border); }
.mobile-nav > .container > ul > li > a, .mobile-submenu-toggle {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; font-size: 1rem; font-weight: 700; color: var(--color-black);
  background: none; border: none; width: 100%; text-align: left;
  min-height: 50px;
}
.mobile-submenu-toggle .caret { transition: transform var(--dur-s) var(--ease); }
.mobile-submenu-toggle.is-open .caret { transform: rotate(-135deg); margin-top: 3px; }
.mobile-submenu { max-height: 0; overflow: hidden; transition: max-height var(--dur-m) var(--ease); }
.mobile-submenu.is-open { max-height: 700px; padding-bottom: 12px; }
.mobile-submenu li a { display: flex; align-items: center; min-height: 44px; padding: 8px 0 8px 16px; font-size: 0.92rem; color: var(--color-muted); border-left: 2px solid var(--color-border); }
.mobile-nav-cta { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.mobile-nav-bottom { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.mobile-nav-bottom ul { flex-direction: column; gap: 2px; }
.mobile-nav-bottom li a {
  display: flex; align-items: center; gap: 10px; min-height: 42px;
  font-size: 0.88rem; color: var(--color-muted); font-weight: 500;
}
.mobile-nav-bottom .ic { color: var(--color-gold); line-height: 0; }
.mobile-nav-bottom .ic svg { width: 16px; height: 16px; display: block; }
.mobile-nav-bottom .lang-switch { margin-top: 10px; }
.mobile-quick { display: flex; gap: 12px; margin-top: 18px; }
.mobile-quick a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px; border: 1px solid var(--color-black); border-radius: var(--radius-s); font-size: 0.82rem; font-weight: 700;
}

/* ==========================================================================
   BARRE D'ACTIONS RAPIDES MOBILE (appel / WhatsApp / consultant)
   ========================================================================== */
/* La barre d'actions rapides mobile a été retirée à la demande du client.
   Les actions (appeler, WhatsApp, projet) restent accessibles dans le menu. */

/* ==========================================================================
   #main EN FLEX COLONNE — permet à Admin → Sections des pages de réordonner
   les sections d'une page via la propriété CSS `order` (voir cms/sections.php)
   sans déplacer physiquement le contenu dans les fichiers .php. Le rendu par
   défaut (order:0 sur tout élément sans style inline) reste identique à un
   empilement en flux normal : aucun changement visuel tant qu'aucun ordre
   n'est explicitement modifié depuis l'admin.
   ========================================================================== */
#main {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   HERO — SLIDER CLAIR 2 COLONNES
   ========================================================================== */
.hero {
  position: relative;
  background: var(--color-cream);
  overflow: hidden;
  padding-top: 56px;
}
.hero::before {
  /* halo doré très doux dans un angle */
  content: "";
  position: absolute;
  top: -10%; right: -8%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(182,138,53,0.16) 0%, rgba(182,138,53,0.05) 45%, transparent 72%);
  pointer-events: none;
}

/* Hero institutionnel simple (pages intérieures) — bannière plate et compacte,
   sans halo décoratif, sur le modèle d'une bannière institutionnelle sobre. */
.page-hero { padding-bottom: 40px; background: var(--color-soft); }
.page-hero::before { display: none; }
.page-hero-content { position: relative; z-index: 2; padding-top: 34px; max-width: 760px; margin-left: 0; margin-right: auto; text-align: left; }
.page-hero-content .hero-title { max-width: none; font-size: clamp(1.9rem, 2.4vw, 2.5rem); line-height: 1.18; margin-bottom: 14px; }
.page-hero-content .hero-text { max-width: 620px; font-size: 1rem; margin-bottom: 0; }
.page-hero-content .eyebrow { margin-bottom: 10px; }
.page-hero-content .hero-actions { margin-top: 22px; margin-bottom: 0; }

/* Hero de page sectorielle avec visuel (2 colonnes) */
.page-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 70px); align-items: center; padding-top: 96px; }
.page-hero-grid .page-hero-content { padding-top: 0; max-width: none; }
.page-hero-media { aspect-ratio: 4/3.6; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card-hover); position: relative; }
@media (max-width: 1100px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero-media { order: -1; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .page-hero-grid { padding-top: 78px; }
}

/* Carrousel du hero d'accueil : les 3 slides sont superposées (même cellule
   CSS Grid) et alternent par fondu d'opacity au changement de slide — voir
   le commentaire détaillé sur .hero-slides ci-dessous pour l'historique
   (ancienne version en piste glissante translateX, abandonnée). */
.hero-slider { position: relative; overflow: hidden; }
/* Empilement CSS Grid (3 slides dans la même cellule) + fondu croisé
   (opacity), plutôt qu'un carrousel qui glisse horizontalement via
   transform: translateX() sur une piste flex.
   Root cause du bug "le slide 2/3 ne s'affiche pas" (constaté en direct sur
   le site en production, reproduit à froid plusieurs fois de suite) :
   heroTrack.style.transform était pourtant bien positionné à la bonne valeur
   (confirmé via l'attribut style inline et la propriété JS), mais ne se
   traduisait jamais visuellement — getComputedStyle et le rendu réel
   restaient bloqués sur l'état "translateX(0)" de départ, laissant le
   nouveau slide actif (opacity:1) hors-champ et l'ancien slide (redevenu
   opacity:0) visible mais vide à l'écran. L'empilement en grille supprime
   entièrement ce mécanisme de glissement : chaque slide occupe toujours la
   même position, seul son opacity change, ce qui élimine la dépendance à un
   transform de piste qui s'est montré non fiable. */
.hero-slides {
  position: relative;
  display: grid; /* les 3 slides sont posées dans la MÊME cellule (voir
                     grid-column/grid-row sur .hero-slide) plutôt qu'en
                     position: absolute : la hauteur de la cellule s'adapte
                     alors automatiquement au plus grand des 3 slides —
                     comportement par défaut de CSS Grid (align-items/
                     justify-items: stretch), sans jamais avoir besoin d'une
                     hauteur fixée en dur. C'est indispensable sur mobile, où
                     chaque slide passe en une seule colonne empilée
                     (label/titre/photo/texte/boutons) : sa hauteur naturelle
                     dépend entièrement de la longueur du texte saisi par
                     l'admin et ne peut pas être devinée à l'avance. */
}

.hero-slide {
  grid-column: 1;
  grid-row: 1; /* superposées : voir commentaire sur .hero-slides */
  display: grid;
  grid-template-columns: 48% 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  /* Plancher réduit (correspond à la hauteur naturelle du panneau photo
     460px de large en aspect-ratio 4/5, soit ~575px) : l'ancienne valeur de
     760px forçait le hero à dépasser la hauteur d'écran d'un ordinateur
     portable standard, contrairement à la maquette validée où tout tenait
     à l'écran sans défilement. */
  min-height: 600px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease);
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Entrée du texte/de la photo au changement de slide : transition CSS plutôt
   qu'une @keyframes animation. Constat en conditions réelles (testé en
   direct sur le site) : l'ancienne version en "animation: ... both" restait
   bloquée en permanence à son état de départ (opacity:0) dès qu'on changeait
   de slide — le texte et la photo devenaient invisibles jusqu'au rechargement
   complet de la page. getAnimations() montrait l'animation comme "running"
   mais avec currentTime figé à 0 : son horloge interne ne progressait jamais,
   un problème connu quand une @keyframes animation démarre au même instant
   qu'une transition CSS sur un élément parent (ici, le glissement horizontal
   du carrousel). Une transition classique déclenchée par un changement de
   propriété (plutôt qu'une timeline d'animation indépendante) n'a pas ce
   défaut et s'est vérifiée fiable sur plusieurs changements de slide d'affilée. */
.hero-slide-text {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.hero-slide.is-active .hero-slide-text { opacity: 1; transform: translateY(0); }
.hero-slide.is-active .hero-visual { opacity: 1; transform: scale(1); }

/* Hero H1 de l'accueil (carrousel) : taille pilotée par l'échelle unifiée
   --fs-hero (34–38px mobile / 56–64px desktop). Les bannières institutionnelles
   secondaires (.page-hero-content .hero-title, .pole-hero-text .hero-title,
   plus bas dans ce fichier) réutilisent volontairement une échelle plus
   modeste sur desktop : il s'agit de titres de page, pas du grand titre
   d'accueil — les deux se rejoignent sur mobile (voir media query 720px). */
.hero-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-hero);
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--color-black);
  max-width: 560px;
  margin-bottom: 22px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero-title .gold { color: var(--color-gold); }
.hero-text {
  max-width: 480px;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-muted);
  margin-bottom: 32px;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-soft-link { margin-top: 6px; }

/* Panneau visuel plafonné à 460px (comme la maquette validée) : sans cette
   limite, la colonne "1fr" du slider laissait la photo/le cadre de
   substitution s'étirer sur toute la largeur disponible et déborder de
   l'écran en hauteur (aspect-ratio 4/5 appliqué à une très grande largeur). */
.hero-visual {
  position: relative;
  max-width: 460px;
  margin-left: auto;
  width: 100%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 950ms var(--ease), transform 950ms var(--ease);
}
.hero-media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(9,9,9,0.22);
}
.hero-media .placeholder-box {
  background:
    radial-gradient(circle at 20% 12%, rgba(215,184,106,0.30), transparent 46%),
    radial-gradient(circle at 90% 90%, rgba(182,138,53,0.22), transparent 50%),
    linear-gradient(155deg, #171717 0%, #090909 100%);
  color: rgba(247,245,240,0.6);
}
.hero-media .placeholder-box::before { border-color: rgba(215,184,106,0.55); background: radial-gradient(circle, rgba(215,184,106,0.3) 0%, transparent 72%); width: 58px; height: 58px; }
.hero-media .placeholder-box::after {
  background-image:
    linear-gradient(rgba(247,245,240,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,245,240,0.05) 1px, transparent 1px);
}
.hero-media-badge {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(9,9,9,0.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(215,184,106,0.35); border-radius: 999px;
  padding: 8px 15px 8px 10px; color: var(--color-gold-light);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
}
.hero-media-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold-light); }

.hero-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(18,18,18,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 18px 40px -22px rgba(9,9,9,0.28);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-black);
  max-width: 210px;
}
.hero-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold); flex-shrink: 0; }
/* Deux positions fixes uniquement, toujours à l'intérieur du cadre photo :
   badge principal en haut à gauche, badge secondaire en bas à droite.
   Identiques sur les 3 slides — aucun déplacement au changement de slide. */
.hero-card--1 { top: 16px; left: 16px; }
.hero-card--2 { display: none; }
.hero-card--3 { bottom: 16px; right: 16px; }

/* Contrôles du slider — une seule ligne compacte, indicateurs à gauche,
   flèches à droite, position strictement identique sur chaque slide. */
.hero-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  margin-top: 24px;
}
.hero-dots { display: flex; gap: 8px; align-items: center; }
.hero-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(18,18,18,0.18);
  border: none; padding: 0;
  transition: width 300ms var(--ease), background 300ms var(--ease);
}
.hero-dot.is-active { width: 26px; background: var(--color-gold); }
.hero-arrows { display: flex; gap: 8px; margin-left: auto; }
.hero-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--color-anthracite);
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.hero-arrow:hover { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }

.hero-quickfacts {
  position: relative; z-index: 2;
  border-top: 1px solid var(--color-border);
  margin-top: 56px;
}
.hero-quickfacts .container {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 20px 0;
}
.quickfact {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.85rem; font-weight: 600; color: var(--color-anthracite);
  border-left: 1px solid var(--color-border);
  padding-left: 18px;
}
.quickfact:first-child { border-left: none; padding-left: 0; }
.quickfact-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); flex-shrink: 0; }

/* ==========================================================================
   SECTIONS GENERIQUES
   ========================================================================== */
section { padding-block: 110px; }
.section-alt { background: var(--color-white); }
.section-tight { padding-block: 90px; }

/* --- Pourquoi choisir CBVG Group ? --- */
.why-intro { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.why-item {
  padding: 0 28px;
  border-left: 1px solid var(--color-border);
  text-align: left;
}
.why-item:first-child { border-left: none; padding-left: 0; }
.why-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: rgba(182,138,53,0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transition: transform 300ms ease, background 300ms ease;
}
.why-icon svg { width: 26px; height: 26px; stroke: var(--color-gold); fill: none; }
.why-item:hover .why-icon { transform: translateY(-3px); background: rgba(182,138,53,0.18); }
.why-item h3 { font-size: 1.32rem; font-weight: 700; margin-bottom: 10px; line-height: 1.25; }
.why-item p { font-size: 0.95rem; line-height: 1.65; color: var(--color-muted); }
.why-cta { text-align: center; margin-top: 52px; }

/* --- Chiffres clés --- */
.stats {
  background: var(--noir); color: var(--blanc-casse);
  position: relative;
}
.stats-note {
  font-size: 0.72rem; letter-spacing: 0.03em; color: rgba(247,245,240,0.35);
  text-align: center; margin-top: 46px; border-top: 1px solid rgba(247,245,240,0.12); padding-top: 20px;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; }
.stat-item { padding: 0 10px; border-left: 1px solid rgba(247,245,240,0.14); }
.stat-item:first-child { border-left: none; }
.stat-value { font-family: var(--font-serif); font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--dore-clair); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-value .to-complete { font-size: 1.4rem; color: rgba(227,198,117,0.5); font-family: var(--font-sans); }
.stat-label { margin-top: 12px; font-size: 0.86rem; color: rgba(247,245,240,0.75); }

/* --- Fondateur --- */
.founder-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items: center; }
.founder-photo { aspect-ratio: 4/5; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card); }
.founder-quote {
  font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; line-height: 1.4;
  color: var(--noir); padding-left: 26px; border-left: 3px solid var(--dore); margin: 26px 0;
}
.founder-text p { color: #423e36; margin-bottom: 16px; }
.founder-signature { display: flex; align-items: center; gap: 16px; margin: 26px 0 30px; }
.founder-signature-line { width: 46px; height: 1px; background: var(--dore); }
.founder-name { font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; }

/* --- Fondateur : Aperçu du parcours & fonctions (photo+badge / texte+cartes) --- */
.parcours-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; }
.parcours-photo { position: relative; border-radius: var(--radius-l); overflow: hidden; height: 100%; min-height: 440px; box-shadow: var(--shadow-card); }
.parcours-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parcours-photo .placeholder-box { position: absolute; inset: 0; }
.parcours-badge { position: absolute; left: 20px; bottom: 20px; background: var(--color-white); border-radius: 16px; padding: 14px 20px; box-shadow: var(--shadow-card-hover); }
.parcours-badge strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--noir); line-height: 1.1; }
.parcours-badge span { display: block; font-size: 0.8rem; color: var(--color-muted); margin-top: 2px; }
.parcours-intro { font-size: 0.98rem; color: var(--color-muted); line-height: 1.65; margin: 16px 0 26px; }
.parcours-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.parcours-card { display: flex; gap: 14px; align-items: flex-start; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 16px; padding: 18px 20px; }
.parcours-icon { flex-shrink: 0; min-width: 44px; height: 40px; padding: 0 6px; border-radius: 11px; background: var(--color-soft); color: var(--color-anthracite); font-weight: 800; font-size: 0.62rem; letter-spacing: 0.01em; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.parcours-card h4 { font-size: 0.9rem; font-weight: 800; color: var(--noir); margin: 0 0 4px; line-height: 1.3; }
.parcours-card p { font-size: 0.8rem; color: var(--color-muted); margin: 0; line-height: 1.5; }
@media (max-width: 960px) {
  .parcours-wrap { grid-template-columns: 1fr; gap: 28px; }
  .parcours-photo { order: -1; min-height: 320px; max-width: 420px; margin: 0 auto; }
  .parcours-card-grid { grid-template-columns: 1fr; }
}

/* --- Le Groupe : Présentation (texte + photo) ---
   Classe propre à cette section de le-groupe.html : ne touche pas .lg-direction-grid
   (utilisée plus bas par « Mot de la direction »). */
.legroupe-presentation-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
.legroupe-presentation-grid .founder-photo { max-width: 320px; margin-left: auto; }
@media (max-width: 960px) {
  .legroupe-presentation-grid { grid-template-columns: 1fr; gap: 32px; }
  .legroupe-presentation-grid .founder-photo { order: -1; margin: 0 auto; max-width: 340px; }
}

/* --- Le Groupe : Mot de la direction / Nos engagements (rythme alterné) ---
   Classes propres à ces deux sections de le-groupe.html : ne touchent pas
   .founder-grid / .approach-wrap utilisées ailleurs (accueil, fondateur.html). */
.lg-direction-section { padding-block: clamp(80px, 9vw, 140px); background: var(--color-white); }
.lg-direction-grid { grid-template-columns: 0.9fr 1.1fr; gap: 70px; }

.lg-engagements-section { padding-block: clamp(80px, 9vw, 140px); background: #F7F3EA; }
.lg-engagements-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.lg-engagements-media { aspect-ratio: 4/3; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card); }
.lg-engagements-media .placeholder-box { min-height: 100%; }

@media (max-width: 960px) {
  .lg-direction-grid, .lg-engagements-grid { grid-template-columns: 1fr; gap: 40px; }
  .lg-direction-grid .founder-photo { order: -1; max-width: 380px; margin: 0 auto; }
  .lg-direction-grid .founder-text { order: 2; }
  .lg-engagements-grid .lg-engagements-media { order: -1; max-width: 460px; margin: 0 auto; }
  .lg-engagements-grid .lg-engagements-text { order: 2; }
}
@media (max-width: 720px) {
  .lg-direction-grid .founder-photo,
  .lg-engagements-grid .lg-engagements-media { aspect-ratio: 4/3; max-height: 420px; }
  .lg-direction-section, .lg-engagements-section { padding-block: 64px; }
}
.founder-role { font-size: 0.82rem; color: #6a665c; }

/* --- Pôles d'activités --- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pole-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.pole-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: var(--color-gold); }
.pole-card-media { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.pole-card-media img, .pole-card-media .placeholder-box { width: 100%; height: 100%; transition: transform 1.2s var(--ease); }
.pole-card:hover .pole-card-media img, .pole-card:hover .pole-card-media .placeholder-box { transform: scale(1.05); }
.pole-card-num {
  position: absolute; top: 16px; left: 16px;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.92); color: var(--color-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
}
.pole-card-body { padding: 28px 28px 26px; display: flex; flex-direction: column; flex: 1; }
.pole-card-logo {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(182,138,53,0.1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; color: var(--color-gold);
  margin-bottom: 16px;
}
.pole-card-logo--img { background: var(--color-white); border: 1px solid var(--color-border); padding: 6px; }
.pole-card-logo--img img { width: 100%; height: 100%; object-fit: contain; }
.pole-card-body h3 { font-size: 1.2rem; margin-bottom: 10px; line-height: 1.25; }
.pole-card-body p.desc { font-size: 0.92rem; line-height: 1.6; color: var(--color-muted); margin-bottom: 20px; flex: 1; }
.pole-card-cta {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.card-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.85rem; font-weight: 700; color: var(--color-black);
}
.card-link::after { content: "→"; color: var(--color-gold); transition: transform 250ms ease; }
.pole-card:hover .card-link::after { transform: translateX(3px); }
.pole-card-tag { font-size: 0.68rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* --- Marques stratégiques --- */
.brands-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.brand-card {
  background: var(--blanc); border-radius: var(--radius-m); overflow: hidden;
  border: 1px solid var(--gris-clair);
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-m) var(--ease);
}
.brand-card:hover { box-shadow: var(--shadow-card-hover); }
.brand-card-media { aspect-ratio: 16/9; position: relative; }
.brand-card-logo {
  position: absolute; bottom: -30px; left: 30px;
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--blanc); border: 1px solid var(--gris-clair);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 0.85rem; text-align: center;
  box-shadow: 0 10px 24px -10px rgba(8,8,8,0.3);
}
.brand-card.abcd .brand-card-logo { color: #4c7c2f; border-color: #4c7c2f33; }
.brand-card.hsk .brand-card-logo { color: #b5121b; border-color: #b5121b33; }
.brand-card-body { padding: 48px 30px 30px; }
.brand-card-body h3 { font-size: 1.35rem; margin-bottom: 4px; }
.brand-tagline { font-size: 0.86rem; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.05em; }
.brand-card.abcd .brand-tagline { color: #4c7c2f; }
.brand-card.hsk .brand-tagline { color: #b5121b; }
.brand-card-body p.desc { font-size: 0.9rem; color: #5b564a; margin-bottom: 18px; }
.brand-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.brand-tag { font-size: 0.74rem; padding: 5px 11px; border-radius: 999px; background: var(--gris-clair); color: #423e36; }
.brand-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.external-note { font-size: 0.72rem; color: #8a857a; }

/* --- Approche --- */
.approach-wrap { display: grid; grid-template-columns: 44% 1fr; gap: 60px; align-items: center; }
.approach-steps { display: flex; flex-direction: column; }
.approach-step { display: flex; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--gris-clair); }
.approach-step:first-child { padding-top: 0; }
.approach-num { font-family: var(--font-serif); font-size: 2rem; color: var(--dore); font-weight: 700; width: 50px; flex-shrink: 0; }
.approach-step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.approach-step p { font-size: 0.9rem; color: #5b564a; }
.approach-media { aspect-ratio: 4/4.3; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card); }

/* --- Projets & opportunités --- */
.tabs { display: flex; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.tab-btn {
  background: var(--blanc); border: 1px solid var(--gris-clair); padding: 11px 20px;
  border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: #4a4741;
  transition: background-color var(--dur-s) ease, color var(--dur-s) ease, border-color var(--dur-s) ease;
}
.tab-btn.active, .tab-btn:hover { background: var(--noir); color: var(--blanc-casse); border-color: var(--noir); }
.opps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.opp-card {
  background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: var(--radius-m);
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow var(--dur-m), transform var(--dur-m);
}
.opp-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-6px); }
.opp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.opp-card h3 { font-size: 1.08rem; line-height: 1.35; }
.opp-summary { font-size: 0.86rem; color: #5b564a; }
.opp-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.76rem; color: #6a665c; }
.opp-meta span { display: flex; align-items: center; gap: 5px; }
.opp-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--gris-clair); }
.opp-status { font-size: 0.74rem; font-weight: 700; color: var(--dore); text-transform: uppercase; letter-spacing: 0.04em; }

/* Carte "fantôme" : structure prête, contenu réel en attente (aucun projet inventé) */
.opp-card--ghost {
  border-style: dashed;
  border-color: #c9c2ac;
  background: var(--color-cream);
}
.opp-card--ghost .opp-card-media { aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; margin-bottom: 4px; }
.opp-card--ghost h3 { color: var(--color-muted); font-weight: 700; }
.opp-card--ghost .opp-summary { color: #8a857a; }

/* ==========================================================================
   TIMELINE (histoire, parcours)
   ========================================================================== */
.timeline { position: relative; max-width: 760px; }
.timeline::before {
  content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 1px;
  background: var(--color-border);
}
.timeline-item { position: relative; padding-left: 50px; padding-bottom: 40px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 0; top: 2px;
  width: 31px; height: 31px; border-radius: 50%;
  background: var(--color-white); border: 1.5px solid var(--color-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; color: var(--color-gold);
}
.timeline-item h3 { font-size: 1.05rem; margin-bottom: 6px; }
.timeline-item p { font-size: 0.9rem; color: var(--color-muted); line-height: 1.6; max-width: 560px; }

/* ==========================================================================
   PARTENAIRES — grille logos (état d'attente élégant)
   ========================================================================== */
.partners-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.partner-logo-slot {
  aspect-ratio: 3/2; border: 1px dashed var(--color-border); border-radius: 14px;
  background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  color: #b7b2a3; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  text-align: center; padding: 10px;
}
.partner-logo-slot--filled {
  border-style: solid; padding: 16px; transition: border-color 220ms ease, transform 220ms ease;
}
.partner-logo-slot--filled:hover { border-color: var(--color-gold); transform: translateY(-2px); }
.partner-logo-slot--filled img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-logo-slot-name { color: var(--color-black); font-size: 0.78rem; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* ==========================================================================
   PORTRAITS ÉQUIPE / GOUVERNANCE
   ========================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.team-card { text-align: center; }
.team-photo { aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; max-width: 168px; margin: 0 auto 18px; box-shadow: var(--shadow-card); }
.team-photo .placeholder-box { padding: 16px; font-size: 0.6rem; }
.team-card h3 { font-size: 1rem; margin-bottom: 4px; }
.team-card .role { font-size: 0.82rem; color: var(--color-gold); font-weight: 600; }

/* --- HSK à la une --- */
.hsk-feature {
  position: relative; color: var(--blanc-casse); border-radius: var(--radius-m); overflow: hidden;
  background: linear-gradient(135deg, #0c1a10 0%, #080808 60%);
  padding: 90px var(--gutter);
}
.hsk-feature::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(181,18,27,0.18), transparent 55%),
              radial-gradient(ellipse at 10% 90%, rgba(76,124,47,0.18), transparent 55%);
}
.hsk-inner { position: relative; z-index: 1; max-width: 760px; }
.hsk-eyebrow { color: var(--dore-clair); }
.hsk-title { font-size: clamp(2.1rem, 4vw, 3.2rem); color: var(--blanc-casse); margin-bottom: 6px; }
.hsk-subtitle { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--dore-clair); margin-bottom: 24px; }
.hsk-text { color: rgba(247,245,240,0.82); margin-bottom: 36px; max-width: 640px; }
.hsk-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }
.hsk-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; border-top: 1px solid rgba(247,245,240,0.15); padding-top: 26px; }
.hsk-field { font-size: 0.76rem; color: rgba(247,245,240,0.55); }
.hsk-field strong { display: block; color: rgba(247,245,240,0.85); font-size: 0.82rem; margin-bottom: 3px; }

/* --- Actualités --- */
.news-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.news-filters button {
  background: none; border: 1px solid var(--gris-clair); padding: 8px 16px; border-radius: 999px;
  font-size: 0.78rem; color: #4a4741; font-weight: 600;
}
.news-filters button.active { background: var(--dore); border-color: var(--dore); color: var(--noir); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.news-card { background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: var(--radius-m); overflow: hidden; transition: box-shadow var(--dur-m), transform var(--dur-m); }
.news-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-6px); }
.news-media { aspect-ratio: 16/10; position: relative; }
.news-cat { position: absolute; top: 14px; left: 14px; }
.news-body { padding: 22px 24px 26px; }
.news-date { font-size: 0.74rem; color: #8a857a; margin-bottom: 10px; }
.news-body h3 { font-size: 1.08rem; line-height: 1.4; margin-bottom: 10px; }
.news-excerpt { font-size: 0.86rem; color: #5b564a; margin-bottom: 16px; }

/* --- Partenaires --- */
.partners-empty {
  border: 1px dashed #c9c2ac; border-radius: var(--radius-m);
  padding: 50px 30px; text-align: center; color: #6a665c; font-size: 0.9rem;
  background: var(--blanc);
}

/* --- CTA final --- */
.cta-final { background: var(--noir); color: var(--blanc-casse); text-align: center; }
.cta-final .container { max-width: 780px; }
.cta-final h2 { color: var(--blanc-casse); font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 20px; }
.cta-final p { color: rgba(247,245,240,0.78); margin-bottom: 40px; font-size: 1.05rem; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* --- Découvrez les pôles (mosaïque de navigation) --- */
.ecosystem-strip { background: var(--color-soft); }
.ecosystem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.eco-card {
  position: relative; display: block; border-radius: 18px; overflow: hidden;
  aspect-ratio: 3/4; border: 1px solid var(--color-border);
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.eco-card:hover { box-shadow: var(--shadow-card-hover); }
.eco-card:hover { transform: translateY(-6px); }
.eco-card .placeholder-box { position: absolute; inset: 0; }
.eco-card-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,8,8,0) 30%, rgba(8,8,8,0.92) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 20px;
}
.eco-card-logo {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--dore-clair);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
  font-family: var(--font-serif); font-weight: 700; color: var(--dore-clair); font-size: 0.85rem;
}
.eco-card h3 { color: var(--blanc-casse); font-size: 1.02rem; margin-bottom: 6px; line-height: 1.3; }
.eco-card p { color: rgba(247,245,240,0.7); font-size: 0.78rem; margin-bottom: 12px; }
.eco-card-link { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dore-clair); display: inline-flex; align-items: center; gap: 6px; }
.eco-card-link .arrow { transition: transform var(--dur-s); }
.eco-card:hover .eco-card-link .arrow { transform: translateX(4px); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--noir); color: rgba(247,245,240,0.7); padding-top: 90px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(247,245,240,0.1); }
.footer-brand .brand-text .name { color: var(--blanc-casse); }
.footer-brand p { font-size: 0.86rem; margin: 18px 0 22px; max-width: 260px; color: rgba(247,245,240,0.6); }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(247,245,240,0.25);
  display: flex; align-items: center; justify-content: center; font-size: 0.78rem; transition: border-color var(--dur-s) ease, color var(--dur-s) ease;
}
.footer-social a:hover { border-color: var(--dore); color: var(--dore); }
.footer-col h4 { color: var(--blanc-casse); font-family: var(--font-sans); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 22px; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { font-size: 0.86rem; transition: color var(--dur-s); }
.footer-col ul li a:hover { color: var(--dore-clair); }
.footer-contact li { font-size: 0.86rem; margin-bottom: 14px; display: flex; gap: 10px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; font-size: 0.78rem; color: rgba(247,245,240,0.45); flex-wrap: wrap; gap: 12px; }
.footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom-links a:hover { color: var(--dore-clair); }

/* ==========================================================================
   BREADCRUMB (pages internes)
   ========================================================================== */
.breadcrumb { background: var(--blanc); border-bottom: 1px solid var(--gris-clair); }
.breadcrumb .container { padding-top: 16px; padding-bottom: 16px; display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #6a665c; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--dore); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--noir); font-weight: 600; }

/* ==========================================================================
   PAGES SECTORIELLES — composants communs
   ========================================================================== */

/* Présentation du pôle : médaillon + texte */
.presentation-wrap { display: flex; gap: 26px; align-items: flex-start; max-width: 800px; }
.presentation-badge {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
  background: rgba(182,138,53,0.12); color: var(--color-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
}
@media (max-width: 560px) { .presentation-wrap { flex-direction: column; gap: 16px; } }

/* Mention "Un pôle de CBVG Group" */
.pole-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; color: var(--color-muted);
  margin-bottom: 18px;
}
.pole-tag::before { content: ""; width: 16px; height: 1px; background: var(--color-gold); }
.pole-hero-logo {
  width: 56px; height: 56px; border-radius: 14px; overflow: hidden;
  background: var(--color-white); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.pole-hero-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

/* Enjeux */
.issue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.issue-card { padding: 26px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 18px; }
.issue-card .why-icon { margin-bottom: 18px; }
.issue-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.issue-card p { font-size: 0.88rem; line-height: 1.6; color: var(--color-muted); }

/* Prestations */
.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.service-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px;
  font-size: 0.9rem; color: var(--color-text);
}
.service-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold); margin-top: 7px; flex-shrink: 0; }

/* Organisation — cartes visuelles condensées (miniature + titre + flèche) */
.org-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.org-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: 14px;
  padding: 14px; transition: transform var(--dur-m) var(--ease), border-color var(--dur-m) ease, box-shadow var(--dur-m) var(--ease);
}
.org-card:hover { border-color: var(--color-gold); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.org-card-thumb { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.org-card-thumb .placeholder-box { padding: 0; font-size: 0; }
.org-card-thumb .placeholder-box::before { margin-bottom: 0; width: 22px; height: 22px; }
.org-card span.card-link { font-size: 0.86rem; }

/* Publics concernés */
.audience-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.audience-tag {
  font-size: 0.85rem; font-weight: 600; color: var(--color-anthracite);
  padding: 10px 18px; border-radius: 999px; background: var(--color-soft);
}

/* Méthode d'accompagnement (réutilise approach-step) */
.method-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.method-steps .approach-step { flex-direction: column; gap: 10px; padding: 0; border-bottom: none; }
.method-steps .approach-num { width: auto; }

/* Réalisations (placeholder) */
.realisations-note {
  border: 1px dashed var(--color-border); border-radius: 16px;
  padding: 44px 30px; text-align: center; color: var(--color-muted); font-size: 0.92rem;
  background: var(--color-white);
}

/* FAQ */
.faq-list { max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; background: none; border: none; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-black);
}
.faq-question .caret { flex-shrink: 0; }
.faq-question.is-open .caret { transform: rotate(-135deg); margin-top: 3px; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 400ms var(--ease); }
.faq-answer.is-open { max-height: 400px; }
.faq-answer-inner { padding-bottom: 22px; font-size: 0.92rem; line-height: 1.7; color: var(--color-muted); max-width: 640px; }

/* Formulaires */
.form-card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: 22px;
  padding: 40px; max-width: 780px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.84rem; font-weight: 600; color: var(--color-anthracite); }
.form-field .req { color: var(--color-gold); }
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--color-border); border-radius: 10px;
  padding: 12px 14px; font-size: 0.92rem; color: var(--color-text); background: var(--color-cream);
  transition: border-color 250ms ease, background 250ms ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--color-gold); background: var(--color-white);
}
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field-file {
  border: 1px dashed var(--color-border); border-radius: 10px;
  padding: 16px; font-size: 0.84rem; color: var(--color-muted); background: var(--color-cream);
}
.form-consent { display: flex; align-items: flex-start; gap: 10px; grid-column: 1 / -1; }
.form-consent input { margin-top: 3px; }
.form-consent label { font-size: 0.82rem; color: var(--color-muted); line-height: 1.5; }
.form-note { font-size: 0.78rem; color: var(--color-muted); margin-top: 14px; }
.form-submit { grid-column: 1 / -1; margin-top: 6px; }
.form-feedback {
  grid-column: 1 / -1; font-size: 0.85rem; color: var(--color-anthracite);
  background: var(--color-soft); border-radius: 10px; padding: 14px 16px; margin-top: 4px;
}

/* ==========================================================================
   LOCALISATION — carte + itinéraire (page Contact)
   ========================================================================== */
.map-block { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: stretch; max-width: 980px; margin: 0 auto; }
.map-preview { display: block; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 16/9; }
.map-preview .placeholder-box { min-height: 100%; font-size: 0.85rem; font-weight: 700; }
.map-block-info { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 10px 6px; }
.map-address { font-size: 1.05rem; font-weight: 700; color: var(--color-black); }
@media (max-width: 720px) {
  .map-block { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PAGE CONTACT — composition à deux cartes (coordonnées+carte / formulaire)
   ========================================================================== */
.contact-shell { max-width: 1720px; width: calc(100% - 64px); margin-inline: auto; }
.contact-intro-section { padding-top: 56px; padding-bottom: 8px; }
.contact-intro-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 2.6vw, 2.6rem); margin: 10px 0 10px; color: var(--color-black); }
.contact-intro-text { color: var(--color-muted); font-size: 1rem; max-width: 640px; }
.contact-main-section { padding-top: 24px; padding-bottom: 100px; }
.contact-columns { display: grid; grid-template-columns: 52fr 48fr; gap: 60px; align-items: start; }
.contact-card-main {
  background: #FFFFFF; border: 1px solid rgba(20,20,20,0.14); border-radius: 26px;
  padding: clamp(32px, 4vw, 64px);
}
.contact-card-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.8rem); margin-bottom: 26px; color: var(--color-black); }

.coord-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.coord-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px;
  border: 1px solid #DDD8CE; border-radius: 16px;
  transition: border-color 200ms ease, background 200ms ease;
}
.coord-card:hover { border-color: var(--color-gold); background: #FBF8F2; }
.coord-card.full { grid-column: 1 / -1; }
.coord-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: #F3E9D4; color: #B9892E;
  display: flex; align-items: center; justify-content: center;
}
.coord-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.coord-label { display: block; font-size: 0.76rem; color: #68645D; margin-bottom: 2px; }
.coord-value { display: block; font-size: 0.98rem; font-weight: 700; color: #111111; word-break: break-word; }

.contact-hours .coord-card.hours { background: #FBF3E4; border-color: #EADFC4; margin-bottom: 20px; }

.contact-maps-title { font-size: 1.02rem; font-weight: 800; margin: 6px 0 14px; color: var(--color-black); }
.map-frame { width: 100%; height: clamp(330px, 30vw, 420px); border-radius: 16px; overflow: hidden; border: 1px solid #DDD8CE; margin-bottom: 16px; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-directions-btn { display: inline-flex; }

.contact-simple-form .form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.contact-simple-form .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-simple-form label { font-size: 0.84rem; font-weight: 600; color: var(--color-anthracite); }
.contact-simple-form input, .contact-simple-form textarea {
  border: 1px solid #DDD8CE; border-radius: 10px; padding: 12px 14px;
  font-size: 0.94rem; background: #FDFBF7; color: #111111;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.contact-simple-form input:focus, .contact-simple-form textarea:focus {
  outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(185,137,46,0.15);
}
.contact-simple-form textarea { min-height: 130px; resize: vertical; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-submit-btn { display: inline-flex; align-items: center; gap: 10px; }
.contact-submit-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: btnspin 0.7s linear infinite; }
@keyframes btnspin { to { transform: rotate(360deg); } }
.form-status { font-size: 0.85rem; border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; }
.form-status.is-error { background: #FBE4E4; color: #8a1f1f; }
.form-status.is-success { background: #E4F3E1; color: #1f5c1f; }
.field-error { font-size: 0.76rem; color: #b53030; margin-top: 2px; }

@media (max-width: 960px) {
  .contact-columns { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 720px) {
  .contact-shell { width: calc(100% - 36px); }
  .coord-grid { grid-template-columns: 1fr; }
  .contact-simple-form .form-row-2 { grid-template-columns: 1fr; }
  .contact-card-main { padding: 26px 20px; border-radius: 20px; }
  .map-frame { height: clamp(280px, 60vw, 320px); }
  .contact-intro-title { font-size: 28px; }
}

/* ==========================================================================
   PAGES PÔLES — gabarit visuel court (hero image, présentation, domaines, vision)
   Portée : uniquement les 6 pages de pôles d'activité. L'accueil et les pages
   institutionnelles (Contact, Le Groupe, Fondateur) n'utilisent pas ces classes.
   ========================================================================== */

/* Hero pôle : image occupant une large moitié de l'écran */
.pole-hero { position: relative; background: var(--color-cream); overflow: hidden; padding-top: 30px; padding-bottom: 58px; }
.pole-hero-grid { display: grid; grid-template-columns: 0.92fr 1.12fr; gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.pole-hero-text { position: relative; z-index: 2; }
.pole-hero-text .hero-title { max-width: 22ch; font-size: clamp(2.1rem, 3.1vw, 3.05rem); line-height: 1.12; margin-bottom: 16px; }
.pole-hero-text .hero-text { max-width: 440px; font-size: 1.02rem; margin-bottom: 26px; }
/* max-width plafonné (comme la maquette validée) : sans cette limite, la
   colonne 1.12fr du grid laissait la photo s'étirer sur ~700px de large,
   donc ~790px de haut avec cet aspect-ratio — bien plus grand que prévu. */
.pole-hero-media { aspect-ratio: 4/4.5; min-height: 380px; max-width: 380px; margin-left: auto; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card-hover); position: relative; }
@media (max-width: 1100px) {
  .pole-hero-grid { grid-template-columns: 1fr; }
  .pole-hero-media { order: -1; max-width: 460px; margin: 0 auto; aspect-ratio: 4/3.2; min-height: 260px; }
}
@media (max-width: 720px) {
  .pole-hero { padding-top: 24px; padding-bottom: 44px; }
}

/* Présentation : image + texte court (80-100 mots) */
.pole-presentation-grid { display: grid; grid-template-columns: 0.88fr 1fr; gap: clamp(30px, 5vw, 68px); align-items: center; }
/* max-width plafonné (comme la maquette validée) : même correctif que
   .pole-hero-media ci-dessus, même cause (colonne de grid sans limite). */
.pole-presentation-media { aspect-ratio: 4/4.4; max-width: 340px; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card); }
.pole-presentation-text p { font-size: 1.02rem; line-height: 1.75; color: var(--color-muted); max-width: 480px; }
@media (max-width: 960px) {
  .pole-presentation-grid { grid-template-columns: 1fr; gap: 34px; }
  .pole-presentation-media { order: -1; max-width: 420px; margin: 0 auto; }
}

/* Domaines d'intervention : cartes visuelles, 4 maximum */
.pole-domains-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pole-domain-card { padding: 30px 24px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 20px; transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease); }
.pole-domain-card:hover { border-color: var(--color-gold); transform: translateY(-5px); box-shadow: var(--shadow-card); }
.pole-domain-card .why-icon { width: 50px; height: 50px; margin-bottom: 18px; }
.pole-domain-card .why-icon svg { width: 22px; height: 22px; }
.pole-domain-card h3 { font-size: 1rem; margin-bottom: 8px; line-height: 1.3; }
.pole-domain-card p { font-size: 0.86rem; color: var(--color-muted); line-height: 1.55; }
@media (max-width: 960px) { .pole-domains-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pole-domains-grid { grid-template-columns: 1fr; } }

/* Vision : grande image + phrase forte, sans long texte */
.pole-vision { position: relative; border-radius: var(--radius-l); overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; }
.pole-vision .placeholder-box { position: absolute; inset: 0; padding: 0; }
.pole-vision-content { position: relative; z-index: 2; padding: 46px clamp(24px, 4vw, 60px); max-width: 620px; }
.pole-vision-content p { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.32; color: var(--color-white); }
@media (max-width: 720px) {
  .pole-vision { min-height: 300px; }
  .pole-vision-content { padding: 30px 22px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .ecosystem-grid { grid-template-columns: repeat(2, 1fr); }
  .opps-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 40px; }
  .footer-top .footer-col:nth-child(4) { grid-column: 2; }
  .footer-top .footer-col:nth-child(5) { grid-column: 3; }
  .hero-slide { grid-template-columns: 1fr; min-height: auto; }
  /* Ordre mobile — identique pour les 3 slides, sans exception :
     label, titre, photo, description, boutons. La navigation du slider est
     en dehors des slides et garde donc une position strictement fixe. */
  .hero-slide-text { display: contents; animation: none !important; }
  .hero-slide-text > .eyebrow { order: 1; }
  .hero-slide-text > .hero-title { order: 2; }
  .hero-slide-text > .hero-text { order: 4; }
  .hero-slide-text > .hero-actions { order: 5; }
  .hero-slide-text > .hero-soft-link { order: 6; }
  .hero-visual { order: 3; max-width: 340px; margin: 8px auto 0; width: 100%; }
  .hero-media { max-height: 55vh; }
  /* Le texte du hero reste aligné à gauche sur mobile, jamais centré */
  .hero-title, .hero-text, .hero-actions, .hero-controls { margin-left: 0; margin-right: 0; text-align: left; }
}

@media (max-width: 960px) {
  .main-nav, .nav-actions .btn-primary { display: none; }
  .hamburger { display: block; }
  /* Menu hamburger poussé tout à droite du header */
  .nav-actions { margin-left: auto; }
  .founder-grid, .approach-wrap { grid-template-columns: 1fr; gap: 44px; }
  .founder-grid { direction: ltr; }
  .founder-photo { max-width: 360px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
  .stat-item:nth-child(3) { border-left: none; }
  .stat-item { border-left: none; text-align: center; }
  .hero-quickfacts .container { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .quickfact:nth-child(3) { border-left: none; }
  .hsk-fields { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .why-item { border-left: none; padding-left: 0; }
  section { padding-block: 80px; }
  .section-tight { padding-block: 80px; }
  .issue-grid, .method-steps { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: 1fr; }
  .form-card { padding: 30px 26px; }
  .partners-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .org-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  section { padding-block: 64px; }
  .section-tight { padding-block: 64px; }
  .section-head { margin-bottom: 40px; }

  .hero { padding-top: 0; }
  .hero-slider { padding-top: 36px; }
  .hero-title,
  .page-hero-content .hero-title,
  .pole-hero-text .hero-title { font-size: var(--fs-hero); line-height: 1.1; margin-bottom: 20px; max-width: none; }
  .hero-text { font-size: 1rem; margin-bottom: 24px; max-width: none; }
  .hero-actions { margin-bottom: 20px; gap: 12px; }
  .hero-actions .btn { flex: 0 1 auto; justify-content: center; }
  .hero-controls { margin-top: 24px; }
  .hero-media { aspect-ratio: 4/5; border-radius: 22px; width: 100%; }
  .hero-card--1, .hero-card--3 { font-size: 13px; padding: 10px 13px; max-width: 160px; }
  .hero-quickfacts .container { padding: 16px 0; gap: 14px 12px; }
  .quickfact { font-size: 0.8rem; gap: 8px; padding-left: 12px; }

  .why-grid { grid-template-columns: 1fr; gap: 30px; }
  .why-intro { margin-bottom: 40px; }

  .cards-grid, .opps-grid, .news-grid, .brands-grid { grid-template-columns: 1fr; }
  .ecosystem-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .eco-card h3 { font-size: 0.88rem; }
  .eco-card p { font-size: 0.7rem; }
  .eco-card-link { font-size: 0.64rem; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 34px 24px; padding-bottom: 40px; }
  .footer-top .footer-col:nth-child(4), .footer-top .footer-col:nth-child(5) { grid-column: auto; }
  .site-footer { padding-top: 64px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .stat-value { font-size: clamp(2rem, 9vw, 2.6rem); }
  .cta-actions .btn, .hsk-actions .btn { width: 100%; justify-content: center; }
  .hsk-feature { padding: 48px 22px; border-radius: 0; margin: 0 calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); }
  .hsk-title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .hsk-subtitle { font-size: 1.08rem; }

  .pole-card-body { padding: 22px 20px 24px; }
  .brand-card-body { padding: 44px 22px 26px; }
  .founder-quote { font-size: 1.24rem; padding-left: 18px; }
  .opp-card, .news-body { padding: 20px; }

  /* Titres de cartes — taille uniforme sur mobile */
  .why-item h3,
  .pole-card-body h3,
  .brand-card-body h3,
  .approach-step h3,
  .opp-card h3,
  .timeline-item h3,
  .team-card h3,
  .news-body h3,
  .eco-card h3,
  .issue-card h3,
  .pole-domain-card h3 { font-size: 18px; line-height: 1.3; }

  .tabs, .news-filters { gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
  .tabs::-webkit-scrollbar, .news-filters::-webkit-scrollbar { display: none; }
  .tab-btn, .news-filters button { flex-shrink: 0; }

  /* Topbar / navbar mobile */
  .topbar-inner { padding-top: 8px; padding-bottom: 8px; }
  .topbar-links .lang-switch, .topbar-cta, .topbar a[href^="mailto"] { display: none; }
  .topbar { max-height: 40px; }
  .navbar-inner { min-height: 72px; }
  .brand-mark { width: 42px; height: 42px; font-size: 0.92rem; }
  .brand-mark--solo { width: auto; height: 52px; }
  .site-header.is-scrolled .brand-mark--solo { width: auto; height: 48px; }
  .brand-text .name { font-size: 1.08rem; }

  /* Pages sectorielles */
  .issue-grid, .method-steps { grid-template-columns: 1fr; gap: 20px; }
  .service-grid { grid-template-columns: 1fr; }
  .form-card { padding: 26px 20px; border-radius: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .page-hero-content { padding-top: 40px; }
  .page-hero { padding-bottom: 34px; }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; }
  .timeline-item { padding-left: 42px; padding-bottom: 32px; }
  .org-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
  .ecosystem-grid { grid-template-columns: 1fr 1fr; }
  .founder-photo { max-width: 280px; }
  .hero-visual { max-width: 300px; }
  /* Signature longue masquée sur très petits écrans (header plus compact) */
  .navbar .brand-text .sub { display: none; }
}

@media (max-width: 380px) {
  :root { --gutter: 18px; }
  .stats-grid, .ecosystem-grid { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
  .hero-card--3 { display: none; }
}

/* ==========================================================================
   PAGE "NOS PARTENAIRES"
   Portée : uniquement partenaires.html, partenaire.html et leurs composants.
   Palette dédiée (charte fournie pour ce module), sans toucher aux tokens
   globaux utilisés par le reste du site.
   ========================================================================== */
:root {
  --pt-cream: #F7F3EA;
  --pt-white: #FFFFFF;
  --pt-black: #111111;
  --pt-gold: #B9892E;
  --pt-gold-light: #F3E9D4;
  --pt-muted: #68645D;
  --pt-border: #DDD8CE;
}

/* --- Introduction compacte --- */
.partners-intro-section { padding-block: clamp(48px, 6vw, 80px); background: var(--pt-cream); }
.partners-intro-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.partners-intro-text .eyebrow { color: var(--pt-gold); }
.partners-intro-text h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.25; color: var(--pt-black); margin: 8px 0 14px; max-width: 20ch; text-wrap: balance; }
.partners-intro-text p { color: var(--pt-muted); font-size: 1rem; line-height: 1.7; max-width: 52ch; margin: 0 0 22px; }
/* max-width plafonné (comme la maquette validée) : même correctif que sur
   les pages pôles, même cause (colonne de grid sans limite). */
.partners-intro-media { aspect-ratio: 4/3.2; max-width: 380px; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-card); }
@media (max-width: 860px) {
  .partners-intro-grid { grid-template-columns: 1fr; }
  .partners-intro-media { order: -1; aspect-ratio: 16/9; }
}

/* --- Sélecteur de catégories --- */
.partner-tabs { display: flex; gap: 12px; max-width: var(--container-max); margin: -18px auto 0; padding: 0 var(--gutter) 0; position: relative; z-index: 2; }
.partner-tab {
  flex: 1; max-width: 320px; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--pt-border);
  background: var(--pt-white); color: var(--pt-black); font-weight: 700; font-size: 0.92rem; cursor: pointer;
  transition: background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  position: relative;
}
.partner-tab.is-active { background: var(--pt-black); color: var(--pt-white); border-color: var(--pt-black); }
.partner-tab.is-active::after { content: ""; position: absolute; left: 22px; bottom: 9px; width: 22px; height: 3px; border-radius: 2px; background: var(--pt-gold); }
@media (max-width: 640px) { .partner-tabs { flex-direction: column; } .partner-tab { max-width: none; } }

/* --- Mise en page du répertoire --- */
.partners-directory-section { padding-block: clamp(40px, 6vw, 72px); background: var(--pt-white); }
.partners-layout { display: grid; grid-template-columns: minmax(230px, 280px) 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .partners-layout { grid-template-columns: 1fr; } }

.partners-filters { position: sticky; top: 100px; }
.partner-filter-group { margin-bottom: 26px; }
.partner-filter-group h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pt-muted); margin: 0 0 12px; }
.partner-filter-option { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--pt-black); padding: 6px 0; cursor: pointer; }
.partner-filter-option input { accent-color: var(--pt-gold); }

.partners-filters-mobile-toggle { display: none; }
@media (max-width: 900px) {
  .partners-filters-mobile-toggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
    border: 1px solid var(--pt-border); background: var(--pt-white); font-weight: 600; font-size: 0.88rem; cursor: pointer;
  }
  .partners-filters { position: fixed; inset: 0; z-index: 200; background: var(--pt-white); padding: 24px var(--gutter); overflow-y: auto; transform: translateX(-100%); transition: transform var(--dur-m) var(--ease); }
  .partners-filters.is-open { transform: translateX(0); }
  .partners-filters-close { display: block; margin-bottom: 20px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--pt-border); background: var(--pt-cream); font-weight: 600; cursor: pointer; }
}
.partners-filters-close { display: none; }

/* --- Barre d'outils (compteur, recherche, tri) --- */
.partners-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.partners-count { font-size: 0.9rem; color: var(--pt-muted); font-weight: 600; }
.partners-toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.partners-search { padding: 9px 14px; border: 1px solid var(--pt-border); border-radius: 999px; font-size: 0.86rem; min-width: 200px; }
.partners-sort { padding: 9px 14px; border: 1px solid var(--pt-border); border-radius: 999px; font-size: 0.86rem; background: var(--pt-white); }

/* --- Grille et cartes --- */
.partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1080px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .partners-grid { grid-template-columns: 1fr; } }

.partner-card {
  background: var(--pt-white); border: 1px solid var(--pt-border); border-radius: 24px; overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform 280ms var(--ease), border-color 280ms var(--ease);
  display: flex; flex-direction: column;
}
.partner-card:hover { transform: translateY(-4px); border-color: var(--pt-gold); }

.partner-card-media { aspect-ratio: 4/3.4; overflow: hidden; background: var(--pt-cream); }
.partner-card-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.partner-card-photo--placeholder, .partner-card-logo--placeholder {
  width: 100%; height: 100%;
  background: radial-gradient(circle at 25% 20%, rgba(185,137,46,0.16), transparent 46%), linear-gradient(155deg, #EDE7D8 0%, #E3DAC4 100%);
}
.partner-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.partner-card-badge {
  display: inline-block; align-self: flex-start; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--pt-gold-light); color: var(--pt-gold); padding: 4px 10px; border-radius: 20px; margin-bottom: 10px;
}
.partner-card-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--pt-black); margin: 0 0 4px; }
.partner-card-role { font-size: 0.85rem; color: var(--pt-gold); font-weight: 600; margin: 0 0 6px; }
.partner-card-zone { font-size: 0.8rem; color: var(--pt-muted); margin: 0 0 10px; }
.partner-card-desc { font-size: 0.86rem; color: var(--pt-muted); line-height: 1.6; margin: 0 0 14px; }
.partner-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.partner-tag { font-size: 0.72rem; background: var(--pt-cream); color: var(--pt-black); border: 1px solid var(--pt-border); padding: 3px 10px; border-radius: 20px; }
.partner-card-link { margin-top: auto; font-size: 0.86rem; font-weight: 700; color: var(--pt-black); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.partner-card-link:hover { color: var(--pt-gold); }

.partner-card--organization .partner-card-org-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 0; }
.partner-card-logo-wrap { width: 64px; height: 64px; border-radius: 14px; border: 1px solid var(--pt-border); background: var(--pt-cream); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.partner-card-logo { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.partner-card--organization .partner-card-body { padding-top: 16px; }
.partner-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 10px; }
.partner-card-location { font-size: 0.8rem; color: var(--pt-muted); }

.partners-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--pt-muted); font-size: 0.95rem; border: 1px dashed var(--pt-border); border-radius: 20px; }
.partners-load-more-wrap { text-align: center; margin-top: 32px; }
.partners-load-more { padding: 12px 28px; border-radius: 999px; border: 1px solid var(--pt-black); background: var(--pt-white); color: var(--pt-black); font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.partners-load-more:hover { background: var(--pt-black); color: var(--pt-white); }
.partners-load-more[hidden] { display: none; }

/* --- Section "Devenir partenaire" --- */
.partner-cta-section { background: var(--pt-black); color: var(--pt-cream); padding-block: clamp(56px, 7vw, 96px); }
.partner-cta-section .eyebrow { color: var(--pt-gold-light); }
.partner-cta-section h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--pt-white); margin: 10px 0 14px; max-width: 22ch; }
.partner-cta-section > .container > p { color: rgba(247,243,234,0.75); max-width: 60ch; font-size: 1rem; line-height: 1.7; margin: 0 0 28px; }

/* Le conteneur occupe toute la largeur utile de la section (auparavant
   plafonné à 760px dans une section bien plus large : cela laissait un grand
   espace noir vide à droite du formulaire sur desktop). */
.partner-request-form-wrap { background: var(--pt-cream); border-radius: 28px; padding: clamp(28px, 4vw, 48px); margin-top: 32px; max-width: 100%; }

/* Grille responsive : 1 champ par ligne en mobile, 2 en tablette (≥768px),
   3 en desktop (≥1024px). Les champs qui doivent occuper toute la largeur
   (type de partenaire, message, consentement, statut, bouton d'envoi)
   portent la classe .full ou sont ciblés directement ci-dessous. */
.partner-request-form { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px) {
  .partner-request-form { grid-template-columns: repeat(2, 1fr); column-gap: 20px; }
}
@media (min-width: 1024px) {
  .partner-request-form { grid-template-columns: repeat(3, 1fr); column-gap: 22px; }
}
.partner-request-form .form-field { margin-bottom: 0; }
.partner-request-form .form-field.full,
.partner-request-form .form-honeypot,
.partner-request-form .form-consent,
.partner-request-form > .form-status,
.partner-request-form > .contact-submit-btn {
  grid-column: 1 / -1;
}
.partner-request-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--pt-black); margin-bottom: 6px; }
.partner-request-form input[type="text"],
.partner-request-form input[type="email"],
.partner-request-form input[type="tel"],
.partner-request-form select,
.partner-request-form textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--pt-border); border-radius: 10px; font-size: 0.9rem; font-family: inherit; background: var(--pt-white); box-sizing: border-box;
}
.partner-request-form input[type="text"],
.partner-request-form input[type="email"],
.partner-request-form input[type="tel"],
.partner-request-form select {
  height: 46px;
}
/* Hauteur du message fixée entre 140 et 180px, comme demandé (160px par défaut,
   redimensionnable verticalement par la personne qui remplit le formulaire). */
.partner-request-form textarea { min-height: 140px; max-height: 180px; height: 160px; resize: vertical; }

/* Champs fichiers stylisés : le bouton natif du navigateur ("Choisir un
   fichier") est repris avec ::file-selector-button pour correspondre à la
   charte du formulaire, au lieu de garder le rendu brut du navigateur. */
.partner-request-form input[type="file"] {
  width: 100%; padding: 8px; border: 1px solid var(--pt-border); border-radius: 10px; font-size: 0.82rem; font-family: inherit; background: var(--pt-white); color: var(--pt-muted); box-sizing: border-box; cursor: pointer;
}
.partner-request-form input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 16px; border: none; border-radius: 8px;
  background: var(--pt-black); color: var(--pt-white); font-weight: 600; font-size: 0.82rem;
  font-family: inherit; cursor: pointer; transition: background 150ms ease;
}
.partner-request-form input[type="file"]::file-selector-button:hover { background: var(--pt-gold); }

.partner-request-form .form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.84rem; color: var(--pt-muted); margin: 4px 0; }
.partner-request-form .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Paire de boutons radio "Type de partenaire" : toujours sur 2 colonnes,
   y compris en mobile (ce sont deux courtes options, pas des champs de
   saisie — inutile de les empiler sur une largeur pleine). */
.partner-request-form .form-field.full > .form-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 4px;
}
@media (max-width: 480px) {
  .partner-request-form .form-field.full > .form-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .partner-request-form-wrap { padding: 24px 18px; border-radius: 20px; }
}

/* ==========================================================================
   POLISH — retours de pression et survols réservés à la souris
   ========================================================================== */
.btn:active, .hero-arrow:active, .hero-dot:active, .tab-btn:active { transform: scale(0.97); }
.btn-primary:active, .btn-gold:active { transform: scale(0.97); }
@media (hover: none) {
  .pole-card:hover, .brand-card:hover, .opp-card:hover, .org-card:hover, .partner-card:hover, .partner-logo-slot--filled:hover { transform: none; }
}

/* ==========================================================================
   PAGES LÉGALES + ERREUR 404
   ========================================================================== */
.legal-content { max-width: 780px; margin: 0 auto; padding: 90px 0 120px; }
.legal-content h2 { font-family: var(--font-serif); font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--noir); margin: 44px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: rgba(9,9,9,0.72); line-height: 1.75; font-size: 0.98rem; }
.legal-content ul { padding-left: 20px; margin: 10px 0; }
.legal-content li { margin-bottom: 6px; }
.legal-content .legal-updated { color: var(--dore); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 28px; }
.error-page { max-width: 640px; margin: 0 auto; padding: 110px 0 140px; text-align: center; }
.error-page .error-code { font-family: var(--font-serif); font-size: clamp(4rem, 12vw, 7rem); color: var(--dore); line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.error-page h1 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); margin-bottom: 14px; }
.error-page p { color: rgba(9,9,9,0.7); line-height: 1.7; margin-bottom: 32px; }
.error-page .error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   BOUTONS FLOTTANTS (WhatsApp + retour en haut)
   ========================================================================== */
.floating-actions {
  position: fixed;
  right: 18px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.floating-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(9,9,9,0.22);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.floating-btn svg { width: 26px; height: 26px; }
.floating-whatsapp { background: #25D366; color: #fff; }
.floating-whatsapp svg { width: 28px; height: 28px; }
.floating-top {
  background: var(--color-black);
  color: var(--color-gold-light);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.floating-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (max-width: 720px) {
  .floating-actions { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .floating-btn { width: 46px; height: 46px; }
  .floating-btn svg { width: 22px; height: 22px; }
  .floating-whatsapp svg { width: 24px; height: 24px; }
}