/* DÉCLINAISON v2 — DA C (⚡ DA C : Sport & Santé) — remap chromatique SAW-IMG-016.
   Concept figé (GO Attila 30/09, #634) ; palette/typo propres à la DA. */
/* ==========================================================================
   SAW — CONCEPT PLACEHOLDERS v2 « Vie & Tech » (ticket SAW-IMG-016)
   --------------------------------------------------------------------------
   Remplace les cadres pointillés v1 (css/placeholders.css) par des maquettes
   VIVANTES de chaque emplacement d'image :
     - hero = carrousel pleine largeur, texte DANS l'image (scrim AA) ;
     - bannières de section = dégradés animés + titre intégré ;
     - cartes / galeries = dégradés par pôle + micro-interactions ;
     - bandeau logos = sobre, wordmarks texte (logos officiels à valider).

   Références : idrettsforbundet.no · snohetta.com · equinor.com · visitnorway.com
   Détail : projects/SAW/docs/2026-09-30_concept-placeholders-v2-saw.md

   ⛔ Lignes rouges : aucune personne identifiable, aucun logo non validé,
      aucun libellé de label non validé (garde-fou projet — portée : site da-c-v2,
      voir projects/SAW/scripts/README-deploiement.md). WCAG 2.1 AA.
      prefers-reduced-motion respecté (SAW-REV-31/R2 : bot-pulse inclus).
   ========================================================================== */

/* ==========================================================================
   1. HERO CARROUSEL PLEINE LARGEUR (emplacement ACC-01)
   ========================================================================== */
.hero-v2 {
  position: relative;
  width: 100%;
  background: #022C22; /* fallback pendant le chargement */
  overflow: hidden;
}

.carousel {
  position: relative;
  width: 100%;
  min-height: clamp(560px, 78vh, 880px);
  overflow: hidden;
}

.carousel-track {
  display: flex;
  height: 100%;
  min-height: inherit;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  min-height: clamp(560px, 78vh, 880px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* --- Fond de slide : dégradé animé (placeholder de l'image finale) --- */
.slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: 220% 220%;
  animation:
    gradientDrift 18s ease-in-out infinite alternate,
    kenBurns 16s linear both;
}
.carousel-slide[aria-hidden="true"] .slide-bg { animation-play-state: paused; }

/* Slide 1 — Institution : marine + halo rouge suisse */
.slide-bg-institution {
  background-image:
    radial-gradient(circle at 82% 18%, rgba(5, 150, 105, 0.34) 0%, transparent 46%),
    radial-gradient(circle at 12% 85%, rgba(16, 185, 129, 0.38) 0%, transparent 48%),
    linear-gradient(133deg, #022C22 0%, #064E3B 52%, #065F46 100%);
}
/* Slide 2 — Preuve : vert forêt sport-santé */
.slide-bg-preuve {
  background-image:
    radial-gradient(circle at 80% 22%, rgba(16, 185, 129, 0.30) 0%, transparent 46%),
    radial-gradient(circle at 14% 82%, rgba(2, 132, 199, 0.26) 0%, transparent 48%),
    linear-gradient(133deg, #022C22 0%, #064E3B 55%, #065F46 100%);
}
/* Slide 3 — Événement : nuit cobalt + énergie rouge */
.slide-bg-evenement {
  background-image:
    radial-gradient(circle at 84% 20%, rgba(5, 150, 105, 0.30) 0%, transparent 44%),
    radial-gradient(circle at 10% 80%, rgba(16, 185, 129, 0.30) 0%, transparent 46%),
    linear-gradient(133deg, #022C22 0%, #064E3B 50%, #065F46 100%);
}

/* Motif « tech » discret : trame de points, opacité imperceptible */
.slide-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

/* --- Scrim de lisibilité : garantit le contraste AA du texte --- */
.slide-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(2, 44, 34, 0.92) 0%, rgba(2, 44, 34, 0.42) 46%, rgba(2, 44, 34, 0.14) 100%),
    linear-gradient(to right, rgba(2, 44, 34, 0.82) 0%, rgba(2, 44, 34, 0.38) 52%, rgba(2, 44, 34, 0.10) 100%);
  pointer-events: none;
}

/* --- Contenu texte DANS l'image --- */
.slide-content {
  position: relative;
  z-index: 2;
  padding-top: 2.5rem;
  padding-bottom: 6.5rem; /* laisse respirer les dots */
}
.slide-content > * { max-width: 660px; }

.slide-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--saw-font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E2E8F0;
  margin-bottom: 1.1rem;
}
.slide-kicker::before {
  content: '';
  display: inline-block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--saw-primary);
}

.slide-title {
  font-family: var(--saw-font-heading);
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  font-weight: 800;
  line-height: 1.12;
  color: #FFFFFF;
  margin-bottom: 1.15rem;
  text-wrap: balance;
}
.slide-title span { color: #FDBA74; }

.slide-sub {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: #E2E8F0;
  margin-bottom: 1.9rem;
  max-width: 58ch;
}

.slide-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Reveal en cascade du texte du slide actif --- */
.carousel-slide .slide-kicker,
.carousel-slide .slide-title,
.carousel-slide .slide-sub,
.carousel-slide .slide-actions {
  opacity: 0;
  transform: translateY(26px);
}
.carousel-slide.is-active .slide-kicker   { animation: slideReveal 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.10s both; }
.carousel-slide.is-active .slide-title   { animation: slideReveal 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.22s both; }
.carousel-slide.is-active .slide-sub     { animation: slideReveal 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.34s both; }
.carousel-slide.is-active .slide-actions { animation: slideReveal 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.46s both; }

/* --- Flèches --- */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--saw-radius-full);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(2, 44, 34, 0.35);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.carousel-arrow:hover { background: rgba(2, 44, 34, 0.62); border-color: rgba(255, 255, 255, 0.5); }
.carousel-arrow:active { transform: translateY(-50%) scale(0.94); }
.carousel-arrow svg { width: 22px; height: 22px; }
.carousel-prev { left: 26px; }
.carousel-next { right: 26px; }

/* --- Points de progression (barre qui se remplit pendant l'autoplay) --- */
.carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 10px;
}
.carousel-dot {
  appearance: none;
  background: transparent;
  border: none;
  padding: 8px 0;
  margin: 0;
  cursor: pointer;
  width: 64px;
}
.carousel-dot-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.30);
  overflow: hidden;
}
.carousel-dot-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #FFFFFF;
}
.carousel-dot.is-active .carousel-dot-fill {
  animation: dotFill var(--carousel-duration, 6s) linear forwards;
}
.carousel.is-paused .carousel-dot-fill { animation-play-state: paused; }

/* ==========================================================================
   2. BANDEAU DE CHIFFRES CLÉS sous le hero (ex-hero-card, pattern Equinor)
   ========================================================================== */
.stats-strip {
  background: linear-gradient(180deg, #022C22 0%, #064E3B 100%);
  color: #FFFFFF;
  padding: 2.4rem 0 2.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stats-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat-item { border-left: 3px solid var(--saw-primary); padding-left: 1.15rem; }
.stat-item-value {
  font-family: var(--saw-font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  color: #FFFFFF;
}
.stat-item-label { font-size: 0.85rem; color: #94A3B8; margin-top: 0.4rem; line-height: 1.45; }
.stats-strip-trust {
  margin-top: 1.7rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #94A3B8;
}
.stats-strip-trust .trust-names {
  display: flex;
  gap: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #E2E8F0;
}

/* ==========================================================================
   3. BANNIÈRES DE SECTION — headers de pages (MEM-01 · PRO-01 · EVE-01)
   Le titre de page VIT dans l'image (texte sur scrim AA).
   ========================================================================== */
.saw-band {
  position: relative;
  width: 100%;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #FFFFFF;
  padding: 4.5rem 0 3.2rem;
}
.saw-band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: 220% 220%;
  animation: gradientDrift 16s ease-in-out infinite alternate;
}
.saw-band-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.saw-band-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(2, 44, 34, 0.90) 8%, rgba(2, 44, 34, 0.40) 55%, rgba(2, 44, 34, 0.16) 100%);
  pointer-events: none;
}
.saw-band-content { position: relative; z-index: 2; }
.saw-band-content .badge { margin-bottom: 1rem; }
.saw-band-title {
  font-family: var(--saw-font-heading);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
  margin-bottom: 0.9rem;
  max-width: 22ch;
  text-wrap: balance;
}
.saw-band-sub {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #E2E8F0;
  max-width: 62ch;
}

/* Variantes par page (couleurs de pôle DA-A) */
.saw-band--membership .saw-band-bg {
  background-image:
    radial-gradient(circle at 82% 20%, rgba(5, 150, 105, 0.32) 0%, transparent 46%),
    radial-gradient(circle at 12% 82%, rgba(5, 150, 105, 0.16) 0%, transparent 48%),
    linear-gradient(133deg, #022C22 0%, #064E3B 55%, #065F46 100%);
}
.saw-band--programmes .saw-band-bg {
  background-image:
    radial-gradient(circle at 82% 20%, rgba(245, 158, 11, 0.28) 0%, transparent 46%),
    radial-gradient(circle at 12% 82%, rgba(16, 185, 129, 0.34) 0%, transparent 48%),
    linear-gradient(133deg, #022C22 0%, #064E3B 55%, #065F46 100%);
}
.saw-band--evenements .saw-band-bg {
  background-image:
    radial-gradient(circle at 84% 18%, rgba(16, 185, 129, 0.30) 0%, transparent 44%),
    radial-gradient(circle at 10% 82%, rgba(5, 150, 105, 0.24) 0%, transparent 46%),
    linear-gradient(133deg, #022C22 0%, #064E3B 50%, #065F46 100%);
}

/* Variante « split » : bannière avec contenu riche en 2 colonnes (centrage vertical) */
.saw-band--split { align-items: center; }
.saw-band--split .saw-band-title { margin-bottom: 1.25rem; }

/* ==========================================================================
   4. BANNIÈRES D'AMBIANCE mid-page (ACC-03 · ACC-05 · ACC-06 · EVE-02)
   ========================================================================== */
.saw-visual {
  position: relative;
  border-radius: var(--saw-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  color: #FFFFFF;
  box-shadow: var(--saw-shadow-lg);
}
.saw-visual--wide { aspect-ratio: 21 / 9; min-height: 220px; }
.saw-visual--portrait { aspect-ratio: 4 / 3; }
.saw-visual-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: 220% 220%;
  animation: gradientDrift 16s ease-in-out infinite alternate;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.saw-visual:hover .saw-visual-bg { transform: scale(1.035); }
.saw-visual-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.saw-visual-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(2, 44, 34, 0.88) 6%, rgba(2, 44, 34, 0.30) 55%, rgba(2, 44, 34, 0.10) 100%);
  pointer-events: none;
}
.saw-visual-content { position: relative; z-index: 2; padding: 1.6rem 1.8rem; }
.saw-visual-title {
  font-family: var(--saw-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.3rem;
}
.saw-visual-sub { font-size: 0.92rem; color: #E2E8F0; max-width: 52ch; }

/* Variantes de dégradés (institution / santé / événement / lieu) */
.saw-visual--institution .saw-visual-bg {
  background-image:
    radial-gradient(circle at 80% 20%, rgba(5, 150, 105, 0.26) 0%, transparent 46%),
    linear-gradient(133deg, #022C22 0%, #064E3B 60%, #065F46 100%);
}
.saw-visual--sante .saw-visual-bg {
  background-image:
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.26) 0%, transparent 46%),
    linear-gradient(133deg, #022C22 0%, #064E3B 60%, #065F46 100%);
}
.saw-visual--event .saw-visual-bg {
  background-image:
    radial-gradient(circle at 82% 18%, rgba(5, 150, 105, 0.28) 0%, transparent 44%),
    linear-gradient(133deg, #022C22 0%, #064E3B 55%, #065F46 100%);
}
.saw-visual--lieu .saw-visual-bg {
  background-image:
    radial-gradient(circle at 78% 22%, rgba(2, 132, 199, 0.26) 0%, transparent 46%),
    linear-gradient(133deg, #022C22 0%, #064E3B 55%, #065F46 100%);
}

/* ==========================================================================
   5. CARTES / VIGNETTES par pôle (ACC-04 · MEM-02 · PRO-03 · EVE-03)
   ========================================================================== */
.saw-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}
.saw-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--saw-radius-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #FFFFFF;
  box-shadow: var(--saw-shadow-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.saw-tile:hover,
.saw-tile:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--saw-shadow-xl);
}
.saw-tile-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: 200% 200%;
  animation: gradientDrift 14s ease-in-out infinite alternate;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.saw-tile:hover .saw-tile-bg,
.saw-tile:focus-within .saw-tile-bg { transform: scale(1.06); }
.saw-tile-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(2, 44, 34, 0.85) 4%, transparent 62%);
  pointer-events: none;
}
.saw-tile-icon {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(2, 44, 34, 0.5));
}
.saw-tile-content { position: relative; z-index: 2; padding: 1.1rem 1.2rem; }
.saw-tile-title { font-family: var(--saw-font-heading); font-size: 1.02rem; font-weight: 700; color: #FFFFFF; }
.saw-tile-sub { font-size: 0.82rem; color: #E2E8F0; margin-top: 0.2rem; }

/* Dégradés par pôle (tokens DA-A) */
.saw-tile--federation  .saw-tile-bg { background-image: linear-gradient(135deg, #064E3B 0%, #065F46 100%); }
.saw-tile--programmes  .saw-tile-bg { background-image: linear-gradient(135deg, #B45309 0%, #F77F00 100%); }
.saw-tile--evenements  .saw-tile-bg { background-image: linear-gradient(135deg, #5B21B6 0%, #7209B7 100%); }
.saw-tile--membership  .saw-tile-bg { background-image: linear-gradient(135deg, #065F46 0%, #C2410C 100%); }
.saw-tile--ressources  .saw-tile-bg { background-image: linear-gradient(135deg, #0C4A6E 0%, #008080 100%); }
.saw-tile--membres     .saw-tile-bg { background-image: linear-gradient(135deg, #0F766E 0%, #D4A373 100%); }
.saw-tile--sante       .saw-tile-bg { background-image: linear-gradient(135deg, #065F46 0%, #10B981 100%); }
.saw-tile--cobalt      .saw-tile-bg { background-image: linear-gradient(135deg, #064E3B 0%, #065F46 100%); }

/* Variante « couverture » : documents du centre de ressources (PRO-04) */
.saw-tile--cover { aspect-ratio: 3 / 4; }

/* ==========================================================================
   6. GALERIE / MOSAÏQUE (EVE-04 · PRO-04)
   ========================================================================== */
.saw-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.saw-mosaic .saw-tile { aspect-ratio: 3 / 2; }
.saw-mosaic .saw-tile--tall { grid-row: span 2; aspect-ratio: 3 / 4.4; }
.saw-mosaic-caption {
  position: relative;
  z-index: 2;
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  color: #E2E8F0;
}

/* ==========================================================================
   7. BANDEAU LOGOS SOBRE (ACC-02 · TRA-01 · TRA-03)
   Wordmarks en texte — logos officiels après validation David/Alistair.
   ========================================================================== */
.saw-partners {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.6rem;
  flex-wrap: wrap;
  padding: 1.6rem 1rem;
  border-radius: var(--saw-radius-md);
  background: var(--saw-bg-subtle, #F8FAFC);
  border: 1px solid var(--saw-secondary-border, #C5D7E4);
}
.saw-partners-name {
  font-family: var(--saw-font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #64748B;
  transition: color 0.2s ease;
}
.saw-partners-name:hover { color: var(--saw-secondary, #064E3B); }

/* ==========================================================================
   8. KEYFRAMES
   ========================================================================== */
@keyframes gradientDrift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
@keyframes slideReveal {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dotFill {
  from { width: 0; }
  to   { width: 100%; }
}

/* ==========================================================================
   9. ACCESSIBILITÉ — focus visible (navigation clavier)
   ========================================================================== */
.carousel-arrow:focus-visible,
.carousel-dot:focus-visible,
.saw-tile:focus-within {
  outline: 2px solid #F59E0B;
  outline-offset: 3px;
}

/* ==========================================================================
   10. PREFERS-REDUCED-MOTION — la vie sans le mouvement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition-duration: 0.2s; }
  .slide-bg,
  .saw-band-bg,
  .saw-visual-bg,
  .saw-tile-bg {
    animation: none !important;
  }
  .carousel-slide .slide-kicker,
  .carousel-slide .slide-title,
  .carousel-slide .slide-sub,
  .carousel-slide .slide-actions {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .carousel-dot.is-active .carousel-dot-fill { animation: none !important; width: 100%; }
  .saw-visual:hover .saw-visual-bg,
  .saw-tile:hover,
  .saw-tile:hover .saw-tile-bg { transform: none; }
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .carousel-arrow { width: 46px; height: 46px; }
  .carousel-prev { left: 16px; }
  .carousel-next { right: 16px; }
  .stats-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
  .saw-mosaic { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  /* SAW-IMG-016 (ré-ouverture, re-capture vrai 375px) : le hero doit tenir DANS
     l'écran mobile. 170px = chrome mesuré au-dessus du hero (demo-bar 60 +
     topbar 52 + header sticky 57 ≈ 169px). En production sans demo-bar,
     réduire la constante (~125px). Fallback svh non supporté : clamp desktop
     78vh = 633px → bas à 802px < 812px, reste dans l'écran. */
  .carousel,
  .carousel-slide { min-height: min(88svh, calc(100svh - 170px)); }
  .slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 1.75rem;
    padding-bottom: 6.5rem; /* flèches 44px à bottom 74px : sommet à 118px du bas, contenu arrêté à 104px */
  }
  .slide-content > * { max-width: 30ch; }
  .slide-kicker::before { display: none; }
  .slide-kicker { margin-bottom: 0.75rem; }
  .slide-title { line-height: 1.08; }
  .slide-sub { max-width: none; font-size: 0.95rem; line-height: 1.55; } /* pleine largeur, 5 lignes — le hero tient dans l'écran */
  .slide-actions { flex-direction: column; width: 100%; max-width: 340px; }
  .slide-actions .btn { width: 100%; justify-content: center; }
  /* Titres v2 restaurés : le !important générique h1/h2 de main.css (media 768,
     l.1224-1231) écrasait le clamp v2 et réduisait les titres à 24px —
     taille de section, pas de hero. Spécificité (0,2,0) > (0,0,1) : gagne. */
  .carousel-slide .slide-title { font-size: clamp(1.75rem, 8vw, 2.25rem) !important; }
  .saw-band .saw-band-title { font-size: clamp(1.6rem, 7vw, 2.1rem) !important; }
  /* Cibles tactiles ≥ 44px (Apple HIG · WCAG 2.2 AA) */
  .carousel-arrow { top: auto; bottom: 74px; transform: none; width: 44px; height: 44px; }
  .carousel-arrow:active { transform: scale(0.94); }
  .carousel-prev { left: 14px; }
  .carousel-next { right: 14px; }
  .carousel-dots { bottom: 20px; gap: 7px; }
  .carousel-dot { width: 44px; padding: 20px 0; } /* boîte cliquable 44px de haut, barre visuelle 4px */
  .saw-band { min-height: 52vh; padding: 3.6rem 0 2.6rem; }
  /* Bannière split : à 375px elle atteignait 1065px (1,3 écran) — compactage.
     Les !important battent les styles inline du prototype (padding/gap). */
  .saw-band--split { padding: 2.6rem 0 2.2rem; }
  .saw-band--split .saw-band-sub { margin-bottom: 1.25rem !important; }
  .saw-band--split .saw-band-content .grid-2 { gap: 1.25rem; }
  .saw-band--split .saw-band-content .grid-2 > div:last-child { padding: 1.25rem !important; }
  .saw-band--split .saw-band-content .grid-2 > div:last-child > h3 { font-size: 1.05rem !important; margin-bottom: 0.75rem !important; }
  .saw-band--split .saw-band-content .grid-2 > div:last-child > div { gap: 0.6rem !important; }
  .saw-band--split .saw-band-content .grid-2 > div:last-child > div > div { padding: 0.6rem 0.75rem !important; }
  .stats-strip { padding: 1.8rem 0 1.6rem; } /* bandeau de chiffres clés plus respirant en mobile */
  .saw-visual { aspect-ratio: 4 / 3; }
  .saw-visual--wide { aspect-ratio: 16 / 9; }
  .saw-mosaic { grid-template-columns: repeat(2, 1fr); }
  .saw-mosaic .saw-tile--tall { grid-row: auto; aspect-ratio: 3 / 2; }
  .stats-strip-trust { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  /* Chiffres clés en 2×2 (pattern Equinor mobile) : 1 colonne = 573px de haut
     à 375px, 2 colonnes ≈ 300px — la page mobile respire. */
  .stats-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .saw-tile-grid { grid-template-columns: 1fr; }
  .saw-partners { gap: 1.4rem; }
}

/* ==========================================================================
   12. UTILITAIRES
   ========================================================================== */

/* Statut carrousel pour lecteurs d'écran (visuellement masqué) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Wrapper de flux pour les blocs v2 placés directement dans <main> */
.saw-block {
  max-width: 1280px;
  margin: 0 auto 2.5rem;
  padding: 0 1.25rem;
}
.saw-block:last-child { margin-bottom: 0; }

/* ==========================================================================
   13. LOGO RÉEL SAW (SAW-logo.png fourni — fond rendu transparent)
   Remplace l'ancien lockup CSS .logo-shield/.logo-cross (conservés par sécurité).
   Hauteur 44px = iso ancien .logo-shield -> chrome du header inchangé
   (les invariants mobiles hero <= 812px restent valides).
   ========================================================================== */
.site-logo .logo-emblem {
  display: block;
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

/* ==========================================================================
   14. SAW-IMG-021 — VISUELS IA INTÉGRÉS (remplacent les dégradés placeholders)
   Les <img class="…-bg"> reprennent la couche visuelle des dégradés v2
   (SAW-IMG-014) ; le texte sur scrim, les contrôles et les `data-img-slot`
   sont inchangés. SAW-REV-32/C2' : les mentions visibles (pastilles HTML +
   bandeaux incrustés) sont retirées — la traçabilité reste en code via
   `data-img-ai` et la mention officielle vit dans l'impressum.
   ========================================================================== */
img.slide-bg,
img.saw-band-bg,
img.saw-visual-bg,
img.saw-tile-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Paire de visuels côte à côte dans une bannière d'ambiance (ACC-06 · MEM-04) */
.saw-visual--pair .saw-visual-bg { width: 50%; }
.saw-visual--pair .saw-visual-bg.saw-pair-b {
  left: 50%;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

/* Mosaïque réduite aux 3 visuels générés (EVE-04) */
.saw-mosaic--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .saw-mosaic--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .saw-mosaic--3 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   SAW-CONT-014 — BANDEAU DE CONFIANCE (ACC-02) + BANNIÈRE ACTUALITÉS
   Le 2ᵉ carrousel « Prochains événements » (SAW-CONT-010) a été FUSIONNÉ dans
   le hero (4 slides) → sa section est supprimée ; seul le bandeau de confiance
   (ACC-02) subsiste. Styles NEUTRES vis-à-vis de la DA : couleurs via tokens
   (--saw-secondary-dark, --saw-pole-*) → adaptatif A/B/C/D.
   ========================================================================== */
.trust-band {
  background: var(--saw-secondary-dark, #081E2E);
  color: #FFFFFF;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.6rem 0;
}
.trust-band .stats-strip-trust { margin-top: 0; padding-top: 0; border-top: none; }

/* Bannière actualités (1-3 actualités) */
.news-banner { background: var(--saw-bg-subtle, #F8FAFC); }
.news-grid { align-items: stretch; }
.news-card {
  text-decoration: none;
  color: inherit;
  height: 100%;
  gap: 0.25rem;
}
.news-card .card-text { flex: 1 1 auto; margin-bottom: 1rem; }
.news-date {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--saw-text-muted, #64748B);
  margin-bottom: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .news-card { transition: none; }
}