/* ============================================================
   Swiss Radio Rescue — Site de présentation
   V2 — Design institutionnel, responsive, harmonieux
   ============================================================ */

:root {
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #d1d5db;
  --gray-300: #d1d5db;
  /* Gris assombris d'un cran pour la lisibilité (WCAG AA ~4.5:1+) sans passer au
     noir : on conserve la hiérarchie titres foncés / textes secondaires gris. */
  --gray-400: #5b6573; /* était #9ca3af (trop pâle, ~2.8:1) → ~4.8:1 */
  --gray-500: #44505d; /* était #6b7280 → ~5.9:1 */
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.1);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.12);
  --nav-h: 64px;
  --max-w: 1200px;
  --section-px: clamp(1rem, 4vw, 2.5rem);
  --section-py: clamp(2.5rem, 6vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--gray-900);
  background: #f4f5f7;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Cadre figé plein écran (desktop). Layout flex colonne : top-bar + navbar
     prennent leur hauteur RÉELLE, .container prend le reste — au lieu de
     soustraire des hauteurs en dur (64+32) qui ne correspondent pas au rendu
     réel selon l'OS/scaling/police (bug : contenu coupé sans ascenseur sur
     certains PC haute résolution). */
  overflow: hidden;
  /* 100vh UNIQUEMENT — PAS de 100dvh ici. Chrome desktop résout parfois dvh
     avec une valeur PÉRIMÉE au chargement (mise à jour seulement à la première
     interaction) → body plus court que la fenêtre, bas de page « blanc/coupé »
     jusqu'au premier mouvement de souris. Les hacks de repaint n'y font RIEN
     (le layout se recalcule avec la même valeur périmée). Sur desktop vh==dvh,
     et le mobile (<640px) passe déjà en height:auto : dvh n'apportait rien. */
  height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.section-inner {
  width: 100%; /* largeur définie: sans elle, un enfant flex avec margin auto passe en fit-content (largeur dépendante du contenu/langue) */
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--section-px);
  padding-right: var(--section-px);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  /* PAS de backdrop-filter ici. Le blur créait une frontière de rasterisation
     GPU : Chrome laissait le bas de la page NON PEINT (blanc) jusqu'au premier
     mouvement de souris — layout parfait, bug invisible aux mesures/captures
     logicielles (déjà mordu par ce défaut : voir commentaire modale contact
     dans index.html). Fond quasi-opaque pour compenser la perte du flou. */
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--gray-200);
  height: var(--nav-h);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 var(--section-px);
}

/* Bandeau officiel au sommet */
.top-bar {
  background: var(--red-600);
  color: rgba(255,255,255,0.9);
  font-size: clamp(0.72rem, 1.8vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.4rem 1rem;
  line-height: 1.5;
}
html.dark .top-bar {
  background: var(--red-800);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gray-900);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.nav-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: contain;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  justify-content: center;
}

.nav-link {
  display: block;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-link:hover {
  color: var(--gray-900);
  background: var(--gray-50);
}
.nav-link.active {
  color: var(--red-600);
  font-weight: 600;
}

.nav-cta {
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--red-600);
  background: transparent;
  border: 1.5px solid var(--red-600);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
  letter-spacing: 0.02em;
}
.nav-cta:hover {
  background: var(--red-600);
  color: #ffffff; /* blanc fixe : var(--white) devient noir en dark sur fond rouge */
}

.lang-selector {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 0.25rem;
}

.lang-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gray-400);
  transition: color 0.15s, background 0.15s;
}
.lang-btn:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}
.lang-btn.active {
  color: var(--red-600);
  background: var(--red-50);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* ============================================================
   PAGES (SPA)
   ============================================================ */
.container {
  /* Full-width container — no max-width here.
     Prend toute la hauteur restante sous top-bar + navbar (flex body).
     min-height:0 = indispensable pour que l'enfant scrollable (.page)
     puisse rétrécir et afficher son ascenseur au lieu de déborder. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.page {
  display: none;
  flex-direction: column;
  /* Plus de hauteur en dur : on remplit le .container (lui-même = reste du
     viewport). Fonctionne quelle que soit la hauteur réelle de top-bar/navbar. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.page.active {
  display: flex;
}

/* ============================================================
   FRAME — Cadre visible sur très grands écrans
   ============================================================ */
@media (min-width: 1600px) {
  body {
    background: #e5e7eb;
  }
  /* width:100% + box-sizing:border-box → navbar et container occupent la MÊME
     largeur (cadre 1560px centré). Sans width:100%, le body en flex-column laissait
     la navbar se réduire à son contenu (~1102px) alors que le container atteignait
     1204px → barre de menu plus étroite que le reste (désalignement signalé). */
  .navbar {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    box-sizing: border-box;
    border-left: 2px solid #d1d5db;
    border-right: 2px solid #d1d5db;
  }
  .container {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    box-sizing: border-box;
    background: var(--white);
    border-left: 2px solid #d1d5db;
    border-right: 2px solid #d1d5db;
    box-shadow: 0 0 80px rgba(0,0,0,0.1);
    /* min-height retiré : laisser le flex (flex:1; min-height:0) dimensionner
       .container sur la hauteur réelle restante, sinon il déborde du body. */
    min-height: 0;
  }
  html.dark body {
    background: #080a0f;
  }
  html.dark .navbar {
    border-left-color: var(--gray-200);
    border-right-color: var(--gray-200);
  }
  html.dark .container {
    border-left-color: var(--gray-200);
    border-right-color: var(--gray-200);
    box-shadow: 0 0 80px rgba(0,0,0,0.3);
  }
}

@media (min-width: 2560px) {
  .navbar,
  .container {
    max-width: 1800px;
  }
}

/* ============================================================
   HERO — Full-width, immersive
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: url('hero-bg.webp') center 35% / cover no-repeat;
  height: clamp(120px, 16vh, 210px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,15,30,0.85) 0%, rgba(127,29,29,0.6) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--section-px);
}

.hero-logo {
  width: clamp(56px, 8vw, 88px);
  height: clamp(56px, 8vw, 88px);
  border-radius: var(--radius-lg);
  object-fit: contain;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  background: rgba(255,255,255,0.06);
}

.hero h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  color: white;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero-sub {
  font-size: clamp(0.82rem, 1.5vw, 1rem);
  color: rgba(255,255,255,0.85);
  margin-top: 0.35rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ============================================================
   CARDS — Refined
   ============================================================ */
.hero-block {
  background: linear-gradient(135deg, var(--white) 0%, var(--red-50) 100%);
  border: 1px solid rgba(220,38,38,0.18);
  border-radius: var(--radius-xl);
  padding: clamp(0.65rem, 1.4vh, 1.2rem) clamp(0.9rem, 2vw, 1.6rem);
  margin-bottom: clamp(0.4rem, 0.8vh, 0.8rem);
  box-shadow: 0 4px 24px rgba(220,38,38,0.07);
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.7vh, 0.6rem);
  /* flex-shrink:1 + overflow:hidden RETIRÉS : ils compressaient ce bloc sous
     la hauteur de son contenu et COUPAIENT le bas (3e question, bloc rouge,
     boutons) sans ascenseur. Le contenu prend désormais sa hauteur réelle.
     min-height retiré : les 3 questions en blocs donnent déjà une hauteur stable
     entre langues (le titre court + sous-texte clampé 2 lignes ne varie pas). */
}

/* Le texte réserve 3 lignes même quand la langue n'en occupe que 2 */
.hero-block-text {
  min-height: calc(1.6em * 3);
}

.hero-block-title {
  font-size: clamp(1rem, 1.9vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  margin: 0;
}
.hero-block-title strong { color: var(--red-600); }

.hero-block-text {
  font-size: clamp(0.82rem, 1.15vw, 0.93rem);
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
  max-width: 75ch;
}

.hero-block-emphasis {
  border-left: 3px solid var(--red-600);
  background: var(--red-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: clamp(0.4rem, 0.8vh, 0.65rem) clamp(0.65rem, 1.2vw, 1rem);
}
.hero-block-emphasis p {
  font-size: clamp(0.8rem, 1.1vw, 0.9rem);
  color: var(--gray-700);
  line-height: 1.55;
  margin: 0;
}
.hero-block-emphasis strong { color: var(--red-700); }

/* 3 questions cliquables (FAQ) du hero */
.hero-faq {
  display: flex;
  flex-direction: column;
  gap: clamp(0.3rem, 0.7vh, 0.55rem);
}
.hero-faq-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--gray-900);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.3;
  transition: color 0.15s ease;
}
.hero-faq-link:hover { color: var(--red-600); }
.hero-faq-link:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.hero-faq-arrow { color: var(--red-600); font-weight: 700; flex-shrink: 0; }

/* 3 questions en blocs (style .tile des 5 axes, version COMPACTE) */
.hero-q-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.4rem, 0.6vw, 0.7rem);
}
/* .tile-q : surcharge compacte de .tile (icône réduite, padding serré) */
.tile-q {
  /* padding vertical augmenté pour CONSERVER l'espace libéré par le badge retiré
     (1/3, 2/3, 3/3) ; justify-content:center pour RECENTRER le contenu (icône +
     titre + question + lien) sur la hauteur du bloc. */
  padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(0.5rem, 0.9vw, 0.8rem);
  box-shadow: none;
  justify-content: center;
}
.tile-q .tile-badge { margin-bottom: 0.25rem; }
.tile-q .tile-icon { flex: 0 0 auto; padding: 0.15rem 0; }
.tile-q .tile-icon svg {
  width: clamp(30px, 2.4vw, 40px);
  height: clamp(30px, 2.4vw, 40px);
  padding: clamp(6px, 0.6vw, 9px);
}
.tile-q h3 { font-size: clamp(0.78rem, 0.95vw, 0.9rem); margin: 0.2rem 0 0; }
.tile-q-sub {
  font-size: clamp(0.66rem, 0.82vw, 0.78rem);
  color: var(--gray-500);
  line-height: 1.28;
  margin: 0.15rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-q .tile-link { margin-top: 0.25rem; font-size: 0.7rem; }

.hero-block-free {
  font-size: clamp(0.78rem, 1.05vw, 0.88rem);
  color: var(--gray-600);
  font-style: italic;
  margin: 0;
}

/* Bouton d'inscription + phrase "service gratuit" sur la MÊME ligne (desktop) :
   la phrase passe à droite du bouton → on récupère la ligne qu'elle occupait en
   bas, ce qui permet d'agrandir le hero sans faire scroller la page. */
.hero-block-action {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.75rem);
  flex-wrap: wrap;
}
/* margin-top du bouton ANNULÉ ici : .btn-primary a un margin-top global (espacement
   quand il était seul sous le texte) qui, dans cette ligne flex, poussait le bouton
   vers le bas et cassait le centrage vertical avec la phrase (texte ~7px trop haut). */
.hero-block-action .btn-primary { flex-shrink: 0; margin: 0; }
.hero-block-action .hero-block-free { flex: 1 1 12rem; align-self: center; line-height: 1.4; margin: 0; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0.55rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  color: #ffffff; /* blanc fixe sur fond rouge (lisibilité dark) */
  background: var(--red-600);
  transition: background 0.2s;
  letter-spacing: 0.02em;
  align-self: flex-start;
}
.btn-primary:hover {
  background: var(--red-700);
}

/* ============================================================
   HOME CONTENT WRAPPER
   ============================================================ */
.home-content {
  padding: clamp(0.75rem, 1.5vh, 1.5rem) 0;
  /* Hauteur NATURELLE (plus de flex:1 ni overflow) : le contenu pousse sa
     vraie hauteur. Si l'ensemble dépasse, c'est .page (scroller unique) qui
     affiche l'ascenseur → tout le contenu reste accessible. */
  display: flex;
  flex-direction: column;
}

/* ============================================================
   SECTION TITLES
   ============================================================ */
.section-title {
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: clamp(0.4rem, 0.8vh, 0.75rem);
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--red-600);
  display: inline-block;
  flex-shrink: 0;
}

/* ============================================================
   TILES (accueil — 5 axes)
   ============================================================ */
.tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 0.8vw, 1rem);
  /* flex:1 / min-height:0 RETIRÉS : laissaient les tuiles s'écraser. Hauteur
     naturelle, le scroll global de .page gère un éventuel dépassement. */
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(0.4rem, 0.8vw, 0.7rem) clamp(0.6rem, 1.2vw, 1rem);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
}
.tile:hover {
  border-top-color: var(--red-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}


.tile-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.6rem;
  align-self: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tile h3 {
  font-size: clamp(0.82rem, 1.1vw, 0.92rem);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0.45rem 0 0;
  line-height: 1.3;
}

/* Pictogramme institutionnel — pastille ronde, trait fin */
.tile-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-600);
  min-height: 0;
  padding: 0.35rem 0;
}
.tile-icon svg {
  width: clamp(40px, 4vw, 60px);
  height: clamp(40px, 4vw, 60px);
  padding: clamp(8px, 0.85vw, 13px);
  background: var(--red-50);
  border: 1.5px solid rgba(220,38,38,0.28);
  border-radius: 50%;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.tile:hover .tile-icon svg {
  background: var(--red-600);
  border-color: var(--red-600);
  color: #ffffff;
  transform: scale(1.06);
}

.tile-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--red-600);
  margin-top: 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap 0.2s;
}
.tile:hover .tile-link { gap: 0.4rem; }

/* ============================================================
   AXE PAGES — Full-width banners + contained content
   ============================================================ */

/* Banner — full-width with background image (same size as hero) */
.axe-banner {
  padding: clamp(1rem, 2vw, 2rem) 0;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  height: clamp(100px, 15vh, 200px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.axe-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.axe-banner-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--section-px);
  position: relative;
  z-index: 2;
  width: 100%;
}

.axe-banner--dark,
.axe-banner--red {
  background-color: #7f1d1d;
  color: white;
}
.axe-banner--dark::before,
.axe-banner--red::before {
  background: linear-gradient(135deg, rgba(10,15,30,0.85) 0%, rgba(127,29,29,0.6) 100%);
}

/* Same hero image on all pages */
.axe-banner { background-image: url('hero-bg.webp'); }

.axe-step {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.75rem;
}

.axe-banner h2 {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.axe-lead {
  font-size: clamp(0.82rem, 1.2vw, 0.95rem);
  opacity: 0.7;
  margin-top: 0.3rem;
  font-weight: 400;
}

/* Intertitre « eyebrow » : introduit la liste des profils de partenaires */
.axe-eyebrow,
.modal-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-600);
  margin: 1.5rem 0 0.25rem;
}

/* Variante 2 colonnes de la grille partenaires (profils institutionnels /
   indépendants). La base .partners-grid vaut 3 colonnes et est redéfinie dans
   plusieurs media queries situées plus bas ; on double la classe pour prendre
   le dessus sur ces règles quelle que soit leur position dans le fichier. */
.partners-grid.partners-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  .partners-grid.partners-grid--2 { grid-template-columns: 1fr; }
}

/* Body content */
.axe-content {
  padding: clamp(0.75rem, 1.5vh, 1.5rem) 0;
  /* Hauteur naturelle : le scroll est géré par .page (scroller unique). */
}

.axe-body {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1vh, 1rem);
  /* height:auto (au lieu de 100% + overflow:hidden) : laisse le contenu
     définir sa hauteur réelle pour que .axe-content puisse scroller. */
  overflow: visible;
}

/* Quote block */
.axe-quote {
  border-left: 3px solid var(--red-600);
  margin: 0;
  padding: 1rem 1.5rem;
  background: var(--gray-50);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.axe-quote p {
  font-size: clamp(0.84rem, 1.1vw, 0.92rem);
  color: #1e293b; /* gris renforcé popups (était --gray-700) */
  line-height: 1.6;
  margin: 0;
}

/* Two-column content grid */
.axe-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.axe-block {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.15rem, 2.5vw, 1.5rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s, transform 0.25s;
}
.axe-block:hover {
  box-shadow: var(--shadow);
}

.axe-block h3 {
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.6rem;
}
.axe-block ul { padding-left: 1.25rem; margin: 0; }
.axe-block li {
  font-size: clamp(0.8rem, 1.1vw, 0.88rem);
  color: #334155; /* gris renforcé pour la lisibilité des popups (était --gray-600) */
  margin-bottom: 0.4rem;
  line-height: 1.55;
}

/* Key point */
.axe-keypoint {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.5rem;
}
.axe-keypoint p {
  font-size: clamp(0.85rem, 1.1vw, 0.92rem);
  color: var(--gray-700);
  margin: 0;
  line-height: 1.6;
}
.axe-keypoint strong { color: var(--gray-900); }

/* Variante MISE EN VALEUR (modal « Opérationnel en cas de crise ») : bordure
   gauche rouge + préfixe en gras rouge, pour que la phrase-clé ressorte. */
.axe-keypoint--accent {
  border-left: 3px solid var(--red-600);
  background: rgba(220, 38, 38, 0.05);
}
.axe-keypoint--accent strong { color: var(--red-600); }
html.dark .axe-keypoint--accent { background: rgba(220, 38, 38, 0.10); }

/* Action buttons */
.axe-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}
.axe-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.35rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.axe-btn--primary {
  background: var(--red-600);
  color: white;
  border: none;
}
.axe-btn--primary:hover {
  background: var(--red-700);
}
.axe-btn--outline {
  background: transparent;
  color: var(--red-600);
  border: 1.5px solid var(--gray-200);
}
.axe-btn--outline:hover {
  border-color: var(--red-600);
  background: var(--red-50);
}

/* Navigation prev/next */
.page-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
}
.page-nav a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--red-600);
  padding: 0.45rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.page-nav a:hover {
  background: var(--red-50);
  border-color: rgba(220,38,38,0.25);
}

/* ============================================================
   PARTENAIRES
   ============================================================ */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

.partner-col {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.25rem);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}
.partner-col:hover {
  border-top-color: var(--red-600);
  box-shadow: var(--shadow);
}

.partner-col-title {
  font-size: clamp(0.82rem, 1.1vw, 0.92rem);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.4rem;
}
.partner-col p {
  font-size: clamp(0.74rem, 1vw, 0.82rem);
  color: var(--gray-600);
  margin-bottom: 0.35rem;
  line-height: 1.5;
}
.partner-offer { flex: 1; }

/* Sponsors strip */
.sponsors-strip {
  padding: 1rem 1.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--gray-50);
  margin-top: 0.5rem;
}
.sponsors-strip h4 {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
  text-align: center;
}
.sponsors-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.sponsor-slot {
  width: 72px;
  height: 36px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  opacity: 0.4;
}
/* Slot occupé par un logo partenaire (ex. IAPC) : pleinement visible et cliquable. */
.sponsor-slot--filled {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: #fff;
  opacity: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sponsor-slot--filled img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sponsor-slot--filled:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sponsors-placeholder {
  font-size: 0.72rem;
  color: var(--gray-400);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--gray-50);
  border-top: 2px solid var(--gray-200);
  /* Pas de margin-top:auto : sinon le footer est collé tout en bas du viewport
     et laisse un grand VIDE entre le contenu et lui sur les écrans très hauts.
     Le footer suit désormais le contenu ; sur grand écran le vide se retrouve
     SOUS le footer (rendu « page courte » standard), sur écran normal le
     contenu remplit et le footer reste en bas. */
  padding: clamp(0.5rem, 0.8vh, 1rem) var(--section-px);
  flex-shrink: 0;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.footer-left {
  font-size: 0.75rem;
  color: var(--gray-500);
  letter-spacing: 0.02em;
}
.footer-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.75rem;
}
.footer-right a {
  color: var(--gray-600);
  font-weight: 500;
  transition: color 0.15s;
}
.footer-right a:hover {
  color: var(--red-600);
}
.footer-sep {
  color: var(--gray-300);
}

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
.page.active {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE — TABLETTE (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }
  .tiles .tile:nth-child(4),
  .tiles .tile:nth-child(5) {
    /* Center last 2 tiles on a 3-col grid */
  }
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   RESPONSIVE — TABLETTE PETIT (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  .axe-grid-2 { grid-template-columns: 1fr; }
  .nav-cta { display: none; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  :root {
    --nav-h: 52px;
  }

  /* 3 questions sur MOBILE : 1 colonne, cartes HORIZONTALES (icône à gauche,
     titre + question à droite). Évite les 3 colonnes écrasées (titres entassés,
     questions tronquées) et reste compact en hauteur. */
  .hero-q-tiles {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .tile-q {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "icon sub"
      "icon link";
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.1rem;
    text-align: left;
    padding: 0.7rem 0.9rem;
  }
  .tile-q .tile-badge { display: none; }           /* badge superflu en ligne */
  .tile-q .tile-icon {
    grid-area: icon;
    align-self: center;
    padding: 0;
  }
  .tile-q .tile-icon svg { width: 44px; height: 44px; padding: 10px; }
  .tile-q h3 {
    grid-area: title;
    margin: 0;
    font-size: 0.98rem;
    align-self: end;
  }
  .tile-q-sub {
    grid-area: sub;
    margin: 0.1rem 0;
    font-size: 0.82rem;
    -webkit-line-clamp: 2;
    align-self: start;
  }
  .tile-q .tile-link { grid-area: link; margin: 0; font-size: 0.78rem; align-self: start; }

  /* ===== RESPIRATION MOBILE : aérer les sections verticales (rendu desktop
     "concassé" sur mobile). Uniquement ≤640px. ===== */
  /* Plus d'air entre les cartes questions empilées */
  .hero-q-tiles { gap: 0.75rem; }
  /* Espacer les sections du bloc d'accueil */
  .hero-block { gap: 1rem; padding: 1.1rem 1rem; margin-bottom: 0.6rem; }
  .hero-block-emphasis { margin: 0.25rem 0; }
  /* Bouton + phrase : empilés et aérés sur mobile (pas côte à côte serré) */
  .hero-block-action { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .hero-block-action .btn-primary { justify-content: center; }
  /* flex:0 0 auto OBLIGATOIRE en colonne : sinon le flex:1 hérité du desktop
     étirait la phrase verticalement (~192px de vide sous "service gratuit"). */
  .hero-block-action .hero-block-free { flex: 0 0 auto; text-align: center; }

  /* Titre "LES 5 AXES D'INFORMATION" : CENTRÉ en largeur sur mobile */
  .section-title {
    display: block;
    text-align: center;
    margin: 0.25rem auto 0.85rem;
    width: fit-content;
  }

  /* Plus d'espace entre les blocs des 5 axes */
  .tiles { gap: 0.85rem; margin-bottom: 1.5rem; }
  /* Marge intérieure latérale plus généreuse pour ne pas coller aux bords */
  .home-content { padding-left: 1.1rem; padding-right: 1.1rem; }

  /* top-bar : AFFICHÉ sur web mobile, forcé sur UNE seule ligne (police réduite +
     letter-spacing/padding resserrés) pour éviter une coupure disgracieuse
     ("d'urgence" seul sur la 2e ligne). N'apparaît pas dans l'app native. */
  .top-bar {
    font-size: clamp(0.56rem, 2.7vw, 0.72rem);
    letter-spacing: 0.01em;
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Mobile : retour au flux document normal (scroll natif du navigateur).
     On neutralise le layout flex 'cadre figé' du desktop. */
  body { overflow: auto; height: auto; display: block; }
  .container { flex: none; min-height: 0; display: block; }
  .page { flex: none; height: auto; min-height: 0; overflow: visible; }
  .home-content { overflow: visible; }
  .axe-content { overflow: visible; }
  .axe-body { overflow: visible; height: auto; }

  .navbar { height: var(--nav-h); }
  .nav-inner { flex-wrap: nowrap; }
  .nav-toggle { display: flex; order: -1; }
  .nav-brand span { font-size: 0.85rem; }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    padding: 0.5rem 0.75rem;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-link {
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    border-radius: 8px;
  }
  .nav-cta { display: none; }

  .hero {
    height: 150px; /* hauteur fixe: évite les sauts de layout iOS quand la barre d'URL se replie (vh instable) */
  }
  .hero-block { min-height: 0; }
  .hero-block-text { min-height: 0; }
  .hero-content {
    padding: 1.5rem var(--section-px);
    gap: 0.85rem;
  }
  .hero h1 { font-size: 1.35rem; }

  .tiles {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }
  /* Le 5e bloc (Alertes) est seul sur sa ligne en grille 2 colonnes. On le laisse
     dans sa cellule normale (colonne 1) → MÊME largeur/dimension que les 4 autres,
     aligné à gauche. (Avant : grid-column 1/-1 + width 50% centré → il paraissait
     décalé/de taille différente.) */
  .tiles .tile:nth-child(5) {
    grid-column: 1;
    justify-self: stretch;
  }

  .tile { padding: 0.8rem 0.95rem; }
  .tile h3 { font-size: 0.84rem; }

  .partners-grid { grid-template-columns: 1fr; }
  .axe-grid-2 { grid-template-columns: 1fr; }

  .axe-banner h2 { font-size: 1.2rem; }
  .axe-actions { flex-direction: column; }
  .axe-btn { justify-content: center; width: 100%; }

  .page-nav {
    flex-direction: column;
    gap: 0.5rem;
  }
  .page-nav a {
    text-align: center;
    width: 100%;
  }

  /* Hero d'accueil — tailles fixes harmonisées sur mobile (les clamp() en vw
     deviennent disproportionnés sur petit écran). */
  .hero-block-title { font-size: 1.15rem; line-height: 1.3; }
  .hero-faq { gap: 0.5rem; }
  .hero-faq-link { font-size: 0.92rem; }
  .hero-block-emphasis p { font-size: 0.88rem; }
  .hero-block-free { font-size: 0.82rem; }
  .btn-primary { width: 100%; justify-content: center; }

  /* FOOTER MOBILE : sur petit écran, les liens en ligne unique débordaient
     (Partenaires coupé, "Accéder à l'application" chevauché). On empile en
     colonne centrée, les liens passent à la ligne proprement, on agrandit
     légèrement et on renforce le contraste. */
  .footer {
    padding: 1.1rem var(--section-px) calc(1.1rem + env(safe-area-inset-bottom, 0px));
  }
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
  }
  .footer-left {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--gray-600);
  }
  .footer-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-size: 0.82rem;
  }
  .footer-right a {
    color: var(--gray-700);
    padding: 0.15rem 0;
  }
  /* Séparateurs « | » masqués en colonne wrap : ils tombaient en début/fin
     de ligne de façon disgracieuse. Les liens espacés suffisent. */
  .footer-right .footer-sep { display: none; }
}

/* ============================================================
   RESPONSIVE — PETIT MOBILE (≤ 380px)
   ============================================================ */
@media (max-width: 380px) {
  .nav-brand span { font-size: 0.78rem; }
  .hero h1 { font-size: 1.15rem; }
  .tiles { grid-template-columns: 1fr; }
  .tiles .tile:nth-child(5) {
    max-width: 100%;
    grid-column: auto;
  }
}

/* ============================================================
   DESKTOP (≥ 1024px) — Contenu naturel, pas d'étirement
   ============================================================ */
@media (min-width: 1024px) {
  .tiles {
    grid-template-columns: repeat(5, 1fr);
  }
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   GRAND ÉCRAN (≥ 1600px) — Generous spacing within frame
   ============================================================ */
@media (min-width: 1600px) {
  .tiles {
    gap: clamp(0.75rem, 1vw, 1.25rem);
  }
}

/* ============================================================
   TRÈS GRAND ÉCRAN (≥ 2560px) — Extra comfort
   ============================================================ */
@media (min-width: 2560px) {
  :root {
    --max-w: 1400px;
    --section-py: 6rem;
  }
  .nav-inner {
    max-width: 1400px;
  }
}

/* ============================================================
   DARK MODE
   ============================================================ */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--gray-500);
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}
.theme-toggle:hover {
  color: var(--gray-800);
  background: var(--gray-100);
}
.theme-toggle .icon-moon,
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-sun { display: inline; }
html.dark .theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-moon { display: inline; }

/* Dark theme overrides */
html.dark,
:root.dark {
  --white: #0f1117;
  --gray-50: #0f1117;  /* aligné sur les cartes de l'app (--card #0f1117) — blocs identiques app↔site */
  --gray-100: #1c1f2b;
  --gray-200: #282c3a;
  --gray-300: #363b4d;
  --gray-400: #525972;
  --gray-500: #7b839a;
  --gray-600: #a0a7be;
  --gray-700: #c5cad8;
  --gray-800: #dfe2ea;
  --gray-900: #eef0f5;
  /* Rouge ÉCLAIRCI en dark : #dc2626 (rouge SRR) ressort mal sur le fond noir
     (~4.6:1). #f04a52 monte à ~6.5:1 → lisibilité nettement meilleure tout en
     restant fidèle au rouge de marque. Le mode clair garde #dc2626 (identité). */
  --red-600: #f04a52;
  --red-700: #ff6b72;
  --red-50: rgba(240,74,82,0.10);
  --red-100: rgba(240,74,82,0.16);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.35);
  color-scheme: dark;
}

html.dark body {
  background: #080a0f; /* noir profond — IDENTIQUE au fond dark de l'app (--background) */
  color: var(--gray-900);
}

html.dark .navbar {
  background: rgba(15,17,23,0.97); /* quasi-opaque : compense l'absence de blur */
  border-bottom-color: var(--gray-200);
}

html.dark .nav-toggle span {
  background: var(--gray-700);
}

html.dark .nav-links {
  background: var(--white);
  border-bottom-color: var(--gray-200);
}

html.dark .nav-cta {
  box-shadow: 0 2px 8px rgba(220,38,38,0.35);
}

html.dark .hero-block {
  background: linear-gradient(135deg, var(--gray-50) 0%, rgba(220,38,38,0.1) 100%);
  border-color: rgba(220,38,38,0.3);
  box-shadow: 0 4px 24px rgba(220,38,38,0.12);
}
html.dark .hero-block-free { color: var(--gray-700); } /* éclairci : était gray-400 (#525972), trop sombre/peu visible en dark */

html.dark .hero-block-emphasis strong {
  color: #f87171;
}

html.dark .tile {
  background: var(--gray-50);
  border-color: var(--gray-200);
  border-top-color: var(--gray-200);
}
html.dark .tile-icon {
  color: #ef4444; /* icône cerclée ROUGE au repos (comme la plateforme / le mode clair) */
}
html.dark .tile-icon svg {
  background: rgba(220,38,38,0.12);   /* halo rouge discret */
  border-color: rgba(220,38,38,0.45); /* bordure rouge */
}
html.dark .tile:hover .tile-icon svg {
  background: var(--red-600);
  border-color: var(--red-600);
}
html.dark .tile:hover .tile-icon { color: #ffffff; } /* trait de l'icône en blanc au survol (fond rouge) */
html.dark .tile:hover {
  border-top-color: var(--red-600);
}

html.dark .axe-block {
  background: var(--gray-50);
  border-color: var(--gray-200);
}

html.dark .axe-quote {
  background: var(--gray-100);
}

html.dark .axe-keypoint {
  background: var(--gray-100);
  border-color: var(--gray-200);
}

html.dark .partner-col {
  background: var(--gray-50);
  border-color: var(--gray-200);
  border-top-color: var(--gray-200);
}
html.dark .partner-col:hover {
  border-top-color: var(--red-600);
}

html.dark .sponsors-strip {
  background: var(--gray-100);
  border-color: var(--gray-200);
}
html.dark .sponsor-slot {
  background: var(--gray-200);
  border-color: var(--gray-300);
}
/* Slot logo : garder un fond clair en mode sombre pour la lisibilité du logo. */
html.dark .sponsor-slot--filled {
  background: #fff;
  border-color: var(--gray-300);
}

html.dark .footer {
  border-top-color: var(--gray-200);
}

html.dark .page-nav a {
  border-color: var(--gray-200);
}
html.dark .page-nav a:hover {
  background: var(--red-50);
  border-color: rgba(220,38,38,0.25);
}

html.dark .theme-toggle {
  color: var(--gray-500);
}
html.dark .theme-toggle:hover {
  color: var(--gray-800);
  background: var(--gray-200);
}

html.dark .axe-btn--outline {
  border-color: var(--gray-300);
}
html.dark .axe-btn--outline:hover {
  border-color: var(--red-600);
  background: var(--red-50);
}

/* ============================================================
   MODAL (Axe 1 — Pourquoi aider)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.4);
  /* PAS de backdrop-filter à l'état FERMÉ : ces overlays plein écran sont
     nombreux dans le DOM dès le chargement (un par axe/partenaires/contact) ;
     leur blur permanent posait des frontières de rasterisation GPU sur toute
     la page → bas non peint (blanc) jusqu'au premier mouvement de souris.
     Le flou n'est appliqué que sur .active (modale réellement ouverte). */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 1rem;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-content {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  max-width: 920px;
  width: 100%;
  height: min(675px, 92vh);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  animation: modalSlideUp 0.3s ease;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

/* En-tête ROUGE (comme le formulaire de contact de /app) — appliqué à la modale
   Contact via .modal-header--accent. Dégradé rouge + textes/croix en blanc. */
.modal-header--accent {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  border-bottom: none;
  align-items: center;
}
.modal-header--accent .modal-label { color: rgba(255,255,255,0.85); }
.modal-header--accent .modal-title { color: #ffffff; }
.modal-header--accent .modal-close {
  color: #ffffff;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
}
.modal-header--accent .modal-close:hover { background: rgba(255,255,255,0.28); }

.modal-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--red-600); /* eyebrow en rouge SRR (identité visuelle) */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.3rem;
  display: block;
}
/* Eyebrow rouge aussi en dark (un rouge un poil plus clair pour le fond noir). */
html.dark .modal-label { color: #ef4444; }

.modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0;
  line-height: 1.2;
}

.modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--gray-700);
  background: var(--gray-100);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-quote {
  border-left: 3px solid var(--red-600);
  margin: 0;
  padding: 0.8rem 1.1rem;
  background: var(--gray-50);
  border-radius: 0 8px 8px 0;
}

.modal-quote p {
  font-size: 0.9rem;
  color: #1e293b; /* gris renforcé popups (était --gray-700) */
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}

.modal-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.modal-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-block h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--red-600);
  margin: 0;
  letter-spacing: 0.02em;
}

.modal-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-block li {
  font-size: 0.84rem;
  color: #334155; /* gris renforcé pour la lisibilité des popups (était --gray-600) */
  line-height: 1.5;
  padding-left: 1.25rem;
  position: relative;
}

.modal-block li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--red-600);
  font-weight: bold;
}

.modal-keypoint {
  border: 1px solid var(--red-200);
  background: rgba(220, 38, 38, 0.04);
  padding: 0.75rem 1.1rem;
  border-radius: 8px;
}

.modal-keypoint p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--gray-700);
  line-height: 1.5;
}

.modal-keypoint strong {
  color: var(--red-600);
  font-weight: 700;
}

/* Mention « statuts dans l'espace membre » (popup Association). Encadré discret,
   ton informatif (pas un bouton — l'accès réel est dans /app). */
.assoc-statuts-note {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.95rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gray-700);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}
.assoc-statuts-note strong { color: var(--gray-800); font-weight: 700; }

.modal-footer {
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.modal-btn {
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.modal-btn--primary {
  background: var(--red-600);
  color: #ffffff; /* blanc fixe sur fond rouge (lisibilité dark) */
}

.modal-btn--primary:hover {
  background: var(--red-700);
}

.modal-btn--secondary {
  background: var(--gray-100);
  color: var(--gray-700);
}

.modal-btn--secondary:hover {
  background: var(--gray-200);
}

/* ===== Formulaire de contact (modale #contact) ===== */
.contact-form { display: flex; flex-direction: column; gap: 0.95rem; }
.contact-field { display: flex; flex-direction: column; gap: 0.3rem; }
.contact-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: 0.01em;
}
.contact-field .req { color: var(--red-600); }
.contact-input,
.contact-textarea,
.contact-select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--gray-900);
  background: var(--white);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.contact-textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus {
  outline: none;
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.contact-input::placeholder,
.contact-textarea::placeholder { color: var(--gray-400); }
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-turnstile { margin-top: 0.25rem; }
.contact-message {
  display: none;
  margin-top: 0.25rem;
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.45;
}
.contact-message.is-success {
  display: block;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.contact-message.is-error {
  display: block;
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid #fecaca;
}

html.dark .contact-field label { color: #d1d5db; }
html.dark .contact-input,
html.dark .contact-textarea,
html.dark .contact-select {
  background: #1a1f2e;
  border-color: #374151;
  color: #e5e7eb;
}
html.dark .contact-input::placeholder,
html.dark .contact-textarea::placeholder { color: #6b7280; }
html.dark .contact-input:focus,
html.dark .contact-textarea:focus,
html.dark .contact-select:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
html.dark .contact-message.is-success {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  border-color: #065f46;
}
html.dark .contact-message.is-error {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
  border-color: #7f1d1d;
}

/* Dark mode adjustments */
html.dark .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}

html.dark .modal-content {
  background: #0f1117;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

html.dark .modal-header {
  border-bottom-color: #1f2937;
}

html.dark .modal-title {
  color: #ffffff;
}

html.dark .modal-close {
  color: #9ca3af;
}

html.dark .modal-close:hover {
  color: #d1d5db;
  background: #374151;
}

html.dark .modal-body {
  color: #d1d5db;
}

html.dark .modal-quote {
  background: #1a1f2e;
  border-left-color: #f04a52; /* rouge dark éclairci (cohérence) */
}

html.dark .modal-quote p {
  color: #d1d5db;
}

html.dark .modal-block h3 {
  color: #ef4444;
}

/* HARMONISATION des gris des popups en dark : TOUT le texte courant sur #d1d5db
   (la teinte la plus lisible, proche du blanc, contraste ~13:1). Avant, 3 gris
   coexistaient (#9ca3af listes/faq, #c5cad8 paragraphes de blocs, #d1d5db
   exergues) → incohérent. Désormais une seule teinte pour listes, paragraphes
   de blocs et corps de faq. Exergue (.modal-quote p) et « À retenir »
   (.modal-keypoint p) sont DÉJÀ à #d1d5db → cohérents. */
html.dark .modal-block li,
html.dark .modal-body > p,
html.dark .modal-block p {
  color: #d1d5db;
}

html.dark .modal-keypoint {
  border-color: #7f1d1d;
  background: rgba(220, 38, 38, 0.15);
}

html.dark .modal-keypoint p {
  color: #d1d5db;
}

html.dark .modal-footer {
  border-top-color: #1f2937;
}

html.dark .modal-btn--secondary {
  background: #1f2937;
  color: #d1d5db;
}

html.dark .modal-btn--secondary:hover {
  background: #374151;
}

/* ============================================================
   MODALS — MOBILE (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  .modal-overlay { padding: 0.5rem; }
  .modal-content { height: auto; max-height: 94vh; max-height: 94dvh; }
  .modal-header { padding: 1.1rem 1.25rem; }
  .modal-title { font-size: 1.15rem; }
  .modal-body { padding: 1.25rem; gap: 1rem; }
  .modal-quote { padding: 0.9rem 1.1rem; }
  .modal-grid-2 { grid-template-columns: 1fr; gap: 1rem; }
  .modal-footer { flex-wrap: wrap; gap: 0.5rem; }
  .modal-btn { flex: 1 1 auto; justify-content: center; text-align: center; }

  /* Pied à slides sur mobile : points sur une ligne, compteur + navigation
     dessous. La nav peut contenir jusqu'à 3 boutons sur la dernière page
     (Accéder à l'app + Précédent + Fermer) → on autorise le retour à la ligne
     et on laisse les boutons s'étirer pour qu'AUCUN ne déborde / ne soit caché. */
  .modal-footer.slides-footer { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  /* Bloc compteur + navigation : compteur à part, et la nav prend toute la largeur. */
  .slides-footer > div:last-child { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; width: 100%; }
  .slides-footer .slides-counter { align-self: flex-start; }
  /* Sur mobile, le bouton « Fermer » de la dernière page est MASQUÉ : la croix ✕
     en haut ferme déjà la modale. Il reste donc au plus 2 boutons (Accéder à
     l'app + Précédent). On les EMPILE pleine largeur : même largeur, même hauteur,
     aucun texte long (ex. « Auf die Anwendung zugreifen ») ne déséquilibre la rangée. */
  .slides-footer .slides-close-btn { display: none; }
  .slides-footer .slides-nav { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
  .slides-footer .slides-nav .modal-btn { width: 100%; justify-content: center; padding: 0.7rem 0.9rem; font-size: 0.9rem; line-height: 1.2; }
  .slide h3 { font-size: 1.05rem; }
  .slide p, .slide li { font-size: 0.9rem; }
}

/* ============================================================
   MODAL PARTENAIRES — grille 3 colonnes + liens CTA
   ============================================================ */
.modal-content--wide {
  max-width: 920px; /* identique à la base — taille unique pour tous les modals */
}

.modal-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.modal-block p {
  font-size: 0.85rem;
  color: #1e293b; /* gris renforcé pour la lisibilité des popups (était --gray-700) */
  line-height: 1.55;
  margin: 0 0 0.6rem;
}

.modal-cta-link {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--red-600);
  margin-top: 0.2rem;
}
.modal-cta-link:hover { color: var(--red-700); }

/* ============================================================
   MÉMORANDUM PARTENAIRES — cartes de profils (modale + page)
   Cartes empilées, filet rouge à gauche, liste à puces soignée.
   Responsive mobile : padding réduit, aucun débordement.
   ============================================================ */
.modal-memo-note {
  margin: 0.35rem 0 0;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--gray-500);
  letter-spacing: 0.01em;
}

/* Conteneur des cartes (empilées verticalement) */
.partner-cards { display: flex; flex-direction: column; gap: 1rem; }

.partner-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--red-600);
  border-radius: var(--radius-lg);
  padding: clamp(0.9rem, 2.2vw, 1.25rem) clamp(1rem, 2.5vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
html.dark .partner-card { background: var(--gray-50); border-color: var(--gray-200); border-left-color: var(--red-600); }

.partner-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--red-600);
  margin: 0;
  line-height: 1.25;
}
html.dark .partner-card-title { color: #ef4444; }

.partner-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #334155;
  margin: 0;
}
html.dark .partner-card p { color: #d1d5db; }

/* Liste à puces des groupes structurés */
.partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.partner-list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;
}
html.dark .partner-list li { color: #d1d5db; }
.partner-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--red-600);
  font-weight: 700;
}

/* Encadré « affiliation » sous la liste des groupes */
.partner-affil {
  margin: 0.25rem 0 0;
  padding: 0.65rem 0.85rem;
  background: rgba(220, 38, 38, 0.04);
  border-radius: 8px;
  font-size: 0.86rem !important;
  line-height: 1.55;
  color: #475569 !important;
}
html.dark .partner-affil { background: rgba(220,38,38,0.10); color: #cbd5e1 !important; }

/* Bandeau CTA final centré */
.modal-keypoint--cta {
  border: none;
  background: none;
  text-align: center;
  padding: 0.5rem 0 0;
}

/* --- Responsive mobile ---------------------------------------------------- */
@media (max-width: 640px) {
  .partner-card { padding: 0.85rem 0.95rem; border-radius: 10px; }
  .partner-card-title { font-size: 0.95rem; }
  .partner-card p, .partner-list li { font-size: 0.88rem; }
  .partner-affil { font-size: 0.82rem !important; padding: 0.6rem 0.7rem; }
  .partner-list li { padding-left: 1.15rem; }
  .modal-memo-note { font-size: 0.7rem; }
  /* Le CTA SRR-PARTNER-GROUP peut être long : on autorise le retour à la ligne. */
  .modal-keypoint--cta .modal-btn { white-space: normal; line-height: 1.3; }
}

.modal-note {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-style: italic;
  text-align: center;
  margin: 0;
}

html.dark .modal-block p { color: #d1d5db; } /* harmonisé (était #c5cad8) */
html.dark .modal-note { color: #7b839a; }

@media (max-width: 760px) {
  .modal-grid-3 { grid-template-columns: 1fr; gap: 1rem; }
}

/* ===== Modale à SLIDES — « Opérationnel en cas de crise » (FAQ 3) =====
   Réutilise les variables de couleur existantes (--red-600, --gray-*)
   → aucune nouvelle couleur de charte. */
.slides-track { position: relative; }
.slide { display: none; animation: fadeIn 0.25s ease; }
.slide.active { display: block; }
.slide-eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red-600); margin: 0 0 0.35rem;
}
.slide h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.85rem; color: var(--gray-900); }
.slide p { font-size: 0.92rem; line-height: 1.6; color: #334155; margin: 0 0 0.85rem; }
html.dark .slide p { color: #d1d5db; }
.slide ul { margin: 0 0 0.5rem; padding: 0; list-style: none; }
.slide li {
  position: relative; padding-left: 1.3rem; margin-bottom: 0.55rem;
  font-size: 0.9rem; line-height: 1.55; color: #334155;
}
html.dark .slide li { color: #d1d5db; }
.slide li::before { content: '•'; position: absolute; left: 0; color: var(--red-600); font-weight: 700; }

/* --- Modale Partenaires : aérer les 2 slides -----------------------------
   .slide est en display:block (pas de gap flex), donc ses enfants de type
   <div> (grilles, encadrés) se collent. On donne une marge verticale régulière
   entre blocs, et un peu plus d'air autour des intertitres et du CTA. Ciblé sur
   la modale partenaires uniquement (la modale FAQ garde son propre espacement). */
#partenaires-modal-overlay .slide > * { margin-bottom: 1.15rem; }
#partenaires-modal-overlay .slide > *:last-child { margin-bottom: 0; }
#partenaires-modal-overlay .slide .modal-eyebrow { margin: 1.75rem 0 0.75rem; }
#partenaires-modal-overlay .slide .modal-quote { margin-bottom: 1.4rem; }
#partenaires-modal-overlay .slide .modal-grid-2,
#partenaires-modal-overlay .slide .modal-grid-3 { margin-bottom: 1.4rem; }
/* CTA « Affilier » : détacher franchement du bloc profils et de l'intertitre suivant. */
#partenaires-modal-overlay .slide .modal-keypoint { margin: 1.5rem 0; }
.slide-icon {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 0 1rem; color: #ef4444; background: rgba(220,38,38,0.12); border: 1.5px solid rgba(220,38,38,0.45);
}
.slide-icon svg { width: 26px; height: 26px; }
.slide-keypoint {
  border: 1px solid rgba(220,38,38,0.25); background: rgba(220,38,38,0.06);
  border-radius: 8px; padding: 0.75rem 1.05rem; margin-top: 0.75rem;
}
.slide-keypoint p { margin: 0; font-size: 0.88rem; color: #334155; }
html.dark .slide-keypoint p { color: #d1d5db; }
.slide-keypoint strong { color: var(--red-600); }

.slides-dots { display: flex; gap: 8px; align-items: center; }
.slides-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); transition: all .2s; cursor: pointer; }
.slides-dot.active { background: var(--red-600); width: 22px; border-radius: 5px; }
.slides-counter { font-size: 0.78rem; color: var(--gray-500); font-weight: 600; }
.modal-footer.slides-footer { justify-content: space-between; align-items: center; gap: 1rem; }
.slides-nav { display: flex; gap: 0.5rem; }

/* ====== Badge « œil » partenaires (nav) + vitrine des logos ====== */
.partners-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  opacity: 0.5;
  cursor: pointer;
  flex-shrink: 0;
  /* Collé au dernier lien de menu (à sa gauche), pas au CTA : petite marge à
     gauche, aucune à droite. */
  margin: 0 0 0 0.1rem;
  transition: color 0.18s, opacity 0.18s, background 0.18s;
}
.partners-eye svg { width: 15px; height: 15px; }
.partners-eye:hover {
  color: var(--red-600);
  opacity: 1;
  background: var(--red-50);
}
.partners-eye.hidden { display: none; }
/* Item de menu qui héberge l'œil : aligné verticalement avec les liens, collé
   au menu précédent (pas de puce, centré). */
.partners-eye-li { display: flex; align-items: center; }
html.dark .partners-eye { color: var(--gray-500); }
html.dark .partners-eye:hover { color: var(--red-600); background: rgba(220,38,38,0.12); }

.modal-content--partners-eye { max-width: 760px; }

.partners-logos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.partner-logo-slot {
  aspect-ratio: 3 / 2;
  border: 1.5px dashed var(--gray-300);
  border-radius: 10px;
  background: var(--gray-50, #f9fafb);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.partner-logo-slot img {
  max-width: 82%;
  max-height: 72%;
  object-fit: contain;
}
html.dark .partner-logo-slot { border-color: var(--gray-600, #374151); background: rgba(255,255,255,0.03); }

@media (max-width: 640px) {
  .partners-logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
}