/* ========================================
   CAPEO - Solar Panel Company Website
   CSS Stylesheet
   ======================================== */

/* ---- CSS Variables ---- */
:root {
  --primary: #21305E;
  --primary-light: #334b94;
  --secondary: #e17a2d;
  --third: #22a866;
  --background: #fdfcfa;
  --foreground: #1a1a2e;
  --muted: #f5f4f0;
  --muted-foreground: #6b6b7b;
  --card: #ffffff;
  --border: #e8e6e1;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --transition: all 0.3s ease;
  --nav-height: 0px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
  -webkit-overflow-scrolling: touch;
}

/* SCROLL SNAP scope : uniquement sur les pages qui ont les sections
   snap-targets de la home (carousel + SOLEA + intérêts + contact).
   Sur les sous-pages (production, stockage, preconisation, etc.),
   seul le footer est snap-target → tout snap s'agripperait au footer
   et l'utilisateur ne pourrait plus scroller. On les exclut via :has(). */
html:has(.trio-carousel),
body:has(.trio-carousel) {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}

/* Flow de snap voulu (Particulier) :
     1. .storage-daynight  (hero "CAP vers votre transition énergétique")
     2. .trio-carousel     (carrousel : Qui sommes-nous + Équipe + Pourquoi nous)
     3. .solea             ("L'offre SOLEA")
     4. .interet           ("Les intérêts pour vous")
     5. .contact           (formulaire)

   On EXCLUT du snap : .brands, .testimonials, .pro-section (hidden ou
   pas pertinent), et surtout les 3 slides du carrousel (about/equipe/
   advantages) qui ne doivent PAS s'ancrer individuellement — ils sont
   navigués via les flèches/dots du carrousel. */
section {
  /* Par défaut, AUCUN snap. On l'active explicitement sur les sections
     que l'on veut, ci-dessous. */
  scroll-snap-align: none;
}

/* Sections visuelles : exactement 100vh, contenu calé sur le viewport.
   CRITIQUE pour mandatory snap : si une section déborde au-delà de 100vh,
   le snap "trappe" l'utilisateur dedans au lieu de passer à la suivante.
   height + overflow:hidden empêchent ce piège.
   ⚠ .storage-daynight EXCLU : c'est une section sticky 320vh dont
   l'animation jour→nuit dépend de la progression du scroll INTERNE.
   Forcer 100vh casse l'animation (la transition saute instantanément). */
.trio-carousel,
.solea,
#interet,
.interet,
.interet-redesign {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  /* CRITIQUE : annule le scroll-margin-top: 80px qu'une autre règle
     applique à toutes les sections (ligne 3512). Sans ce reset, le
     snap atterrit 80px PLUS HAUT que le top de la section, laissant
     déborder 80px de la section précédente. */
  scroll-margin-top: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

/* .storage-daynight = section sticky 320vh : on garde le snap au top
   (pour s'agripper proprement quand l'utilisateur arrive dessus) mais
   on PRÉSERVE la hauteur 320vh nécessaire à la progression du JS
   (handleDayNightScroll calcule scrollProgress sur sectionHeight). */
.storage-daynight {
  scroll-snap-align: start !important;
  scroll-snap-stop: normal !important;
  scroll-margin-top: 0 !important;
}

/* Le carousel internalise ses slides : carousel et slides à 100vh,
   MAIS le track DOIT garder overflow:visible pour que les slides
   débordent à droite (elles sont amenées au centre via translateX).
   Si le track avait overflow:hidden, seul le 1er slide serait visible. */
.trio-carousel .trio-track {
  height: 100vh !important;
  max-height: 100vh !important;
  /* PAS d'overflow:hidden ici — sinon on cache equipe et advantages. */
}
.trio-carousel .trio-slide {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

/* Contact = section avec formulaire potentiellement plus haut que 100vh.
   On garde snap-align start mais on autorise la croissance (min-height
   seul, pas de max-height ni overflow:hidden). */
.contact {
  scroll-snap-align: start !important;
  /* snap-stop: normal (et pas always) → l'utilisateur peut continuer
     à scroller pour atteindre le footer. Avec always, mandatory bloque
     le scroll sur contact et empêche d'aller voir le footer. */
  scroll-snap-stop: normal !important;
  scroll-margin-top: 0 !important;
  min-height: 100vh !important;
}

/* Sections cachées qui pourraient perturber le snap entre les sections
   visibles : on force scroll-snap-align à none pour qu'elles ne soient
   pas considérées comme des cibles. */
.brands,
.pro-section,
.testimonials,
section.about,
section.equipe,
section.advantages {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}


/* Sur mobile, on utilise svh (small viewport) pour ignorer la barre
   d'URL dynamique et garder un snap pixel-perfect. */
@media (max-width: 768px) {
  .storage-daynight,
  .trio-carousel,
  .solea,
  #interet,
  .interet,
  .contact {
    min-height: 100svh;
  }

  /* Carrousel : les slides remplissent EXACTEMENT l'écran visible grâce à
     `dvh` (dynamic viewport height), qui suit la barre d'adresse iOS qu'elle
     soit affichée ou masquée. Avant on utilisait `svh` (petit écran fixe) :
     quand la barre d'adresse se masquait, l'écran s'agrandissait et la slide
     ne touchait plus le bas → bande de fond visible. Repli `svh` pour les
     vieux navigateurs sans dvh. */
  .trio-carousel,
  .trio-carousel .trio-track,
  .trio-carousel .trio-slide,
  section.about {
    height: 100svh !important;
    height: 100dvh !important;
    max-height: 100svh !important;
    max-height: 100dvh !important;
  }
}

/* Slides du carrousel : pas de snap individuel. */
.trio-slide,
.about,
.equipe,
.advantages {
  scroll-snap-align: none !important;
}

/* Footer : align END pour qu'il devienne une cible valide en mandatory
   snap. Sans ça, l'utilisateur ne peut pas atteindre le footer car le
   browser le pull-back à contact (dernière section avec snap-align). */
.footer {
  scroll-snap-align: end !important;
  scroll-snap-stop: normal !important;
}

/* Sur mobile : snap proximity (doux) au lieu de mandatory, pour qu'un
   geste tactile puisse défiler PROGRESSIVEMENT à travers le hero jour/nuit
   (280vh) sans sauter par-dessus la transition.
   IMPORTANT : on reprend le sélecteur :has(.trio-carousel) pour avoir la
   MÊME spécificité que la règle mandatory plus haut (sinon proximity perd
   et le mandatory reste actif même en mobile). */
@media (max-width: 768px) {
  html:has(.trio-carousel),
  body:has(.trio-carousel) {
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
  }
}

/* Si l'utilisateur préfère un mouvement réduit, on désactive le snap. */
@media (prefers-reduced-motion: reduce) {
  html, body {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}

body {
  font-family: 'Avenir LT Pro', sans-serif;                                              
  /* font-family: 'Inter', system-ui, sans-serif; */
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  /* `clip` et NON `hidden` : avec overflow-x:hidden, le navigateur force
     overflow-y à `auto`, ce qui transforme <body> en conteneur de scroll
     et CASSE position:sticky sur iOS (le hero jour/nuit ne reste plus
     collé → bande crème vide sous le hero). `clip` bloque le débordement
     horizontal SANS créer de conteneur de scroll → sticky préservé. */
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Layout ---- */
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.container {
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 25px;

}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  width: 300px;
  height: 60px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  /* Lueur orange retirée : ombre neutre sobre */
  box-shadow: 0 8px 24px rgba(7, 16, 38, 0.30), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  /* Hover : écriture bleue sur fond blanc */
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 12px 28px rgba(7, 16, 38, 0.25), inset 0 0 0 1px rgba(33, 48, 94, 0.12);
}

.btn-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.colored-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.colored-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}
.btn-outline:hover:not(.colored-btn) {
  background: var(--foreground);
  color: white;
  border-color: var(--foreground);
}

.btn-large {
  padding: 16px 32px;
  font-size: 16px;
}

.btn-full {
  width: 100%;
}

/* ---- Section Styles ---- */
 .section-header {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.section-container{
  position: relative;
  background-size: cover;
  background-position: center;
  /* height: 90vh; */
  width: 100%;
}
.section-badge {
  display: inline-block;
  color: var(--primary);
  background-color: white;
  font-size: clamp(30px, 6vw, 80px);
  font-weight: 800;
  width: 100%;
  letter-spacing: 5px;
}

.section-title {
  font-size: clamp(15px, 2vw, 30px);
  margin-left: 25%;
}

.section-description {
  font-size: clamp(14px, 3vw, 20px);
  color: var(--muted);
  max-width: 1400px;
  background-color: #00000036;
  padding: 20px;
  border: 1px solid white;
  border-radius: 5px;
  backdrop-filter: blur(5px);
}

/* ---- Animations ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes wiggle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes energyFlow {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  5% { opacity: 1; }
  100% { transform: translateY(-100px) translateX(10px)  scale(0.5); opacity: 0; }
}

.animate-on-scroll,
.animate-on-scroll-1,
.animate-on-scroll-2,
.animate-on-scroll-3,.animate-on-scroll-4  {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible,
.animate-on-scroll-1.visible,
.animate-on-scroll-2.visible,
.animate-on-scroll-3.visible,.animate-on-scroll-4.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-from-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-from-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.animate-from-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-from-right.visible {
  opacity: 1;
  transform: translateX(0);
}
/* ========================================
   HEADER
   ======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  padding: 16px 24px 0;
  transition: var(--transition);
  pointer-events: none;
}
.header > * {
  pointer-events: auto;
}
/* Top progress bar — moved above the pill, full-width thin line */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 5px;
  background: transparent;
  z-index: 1001;
  pointer-events: none;
}
.progress-bar {
  height: 5px;
  background: linear-gradient(90deg, #E62020 0%, #F47C20 33%, #F6B800 66%, #4CAF50 100%);
  width: 0%;
}
/* On scroll: shrink to logo-only pill on the left (Energy Market behavior) */
.scrolled .header-container {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  max-width: 160px;
  margin: 0 auto 0 0;
  padding: 8px 20px;
  justify-content: center;
}
.scrolled .logo {
  justify-content: center;
}

/* Hover on the collapsed pill re-expands the full menu — stays left-anchored
   so the cursor never falls outside the expanding shape (would cause flicker). */
.scrolled .header-container:hover {
  max-width: 1280px;
  margin: 0 auto 0 0;
  padding: 10px 16px 10px 24px;
  justify-content: space-between;
}
.scrolled .header-container:hover .logo {
  justify-content: flex-start;
}
.scrolled .header-container:hover .nav,
.scrolled .header-container:hover .header-cta {
  opacity: 1;
  max-width: 1000px !important;
  margin: revert !important;
  padding: revert !important;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
.scrolled .header-container:hover .header-cta {
  max-width: 400px !important;
  padding: 10px 22px !important;
}
.scrolled .nav,
.scrolled .header-cta {
  opacity: 0;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px);
  transition:
    opacity 250ms ease,
    max-width 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 300ms,
    margin 600ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px 10px 24px;
  background: rgba(253, 252, 250, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition:
    max-width 600ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 600ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 500ms cubic-bezier(0.22, 1, 0.36, 1),
    background 300ms ease,
    box-shadow 300ms ease;
}

/* Sur tous les écrans desktop (≥ 1024 px), l'audience-switch est en
   position fixed top-right et fait ~160 px de large. On force la
   pill du header à laisser 200 px d'espace à droite pour qu'il n'y
   ait jamais de chevauchement, quelle que soit la largeur d'écran.
   - max-width: never exceeds (viewport - 220px) → toujours marge claire
   - margin-left: auto + margin-right: 200px → le header se positionne
     en restant à 200 px du bord droit (l'audience-switch occupe les
     derniers ~180 px : 22 right + ~160 width). */
@media (min-width: 1024px) {
  .header-container {
    max-width: min(1280px, calc(100vw - 220px));
    margin-left: auto;
    margin-right: 200px;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 110px;
  height: 32px;
  color: var(--primary);
}

.footer-brand .logo-icon {
  width: 220px;
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer .logo-icon {
  width: 220px;
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .logo-icon {
  width: 110px;
  height: 32px;
}

.sub-link{
  padding-left: 25px !important;
}
.sub-link1{
  padding-left: 15px !important;
}
.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--foreground);
}

.logo-tagline {
  font-size: 10px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav {
  display: none;
}

@media (min-width: 1024px) {
  .nav {
    display: block;
    /* overflow: visible pour ne pas clipper les dropdowns du menu
       (positionnés en absolute). L'animation max-width fonctionne
       toujours sans clip visuel. */
    overflow: visible;
    max-width: 1000px;
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity 300ms ease,
      max-width 600ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s,
      margin 600ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 500ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: clamp(12px, 0.85vw, 13px);
  font-weight: 700;
  color: var(--muted-foreground);
  border-radius: 9999px;
  transition: var(--transition);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--foreground);
  background: var(--muted);
}

/* Scroll-spy : surligne l'item de menu correspondant à la section visible.
   Appliqué via JS (script.js → highlightNav). Pour les dropdowns, la classe
   est posée à la fois sur le sous-item actif ET sur le bouton parent. */
.nav .nav-link.is-active,
.nav .dropdown-trigger.is-active {
  color: var(--primary) !important;
  background: rgba(33, 48, 94, 0.10) !important;
  font-weight: 800 !important;
  box-shadow: inset 0 -2px 0 0 var(--secondary);
}
.nav .dropdown-menu a.is-active {
  color: var(--primary) !important;
  background: rgba(33, 48, 94, 0.06) !important;
  font-weight: 700 !important;
}

.dropdown-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.nav-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 8px;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  font-size: clamp(12px, 1vw, 14px);
  color: var(--muted-foreground);
  border-radius: 8px;
  transition: var(--transition);
}

.dropdown-menu a:hover {
  background: var(--muted);
  color: var(--foreground);
}

.header-cta {
  display: none;
}

@media (min-width: 1024px) {
  .header-cta {
    display: inline-flex;
    width: auto;
    height: auto;
    padding: 10px 22px;
    font-size: 13px;
    border-radius: 9999px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 400px;
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity 300ms ease,
      max-width 600ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s,
      margin 600ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 500ms cubic-bezier(0.22, 1, 0.36, 1),
      background 300ms ease,
      box-shadow 300ms ease;
  }
}

.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

@media (min-width: 1024px) {
  .mobile-menu-btn {
    display: none;
  }
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--foreground);
  border-radius: 2px;
  transition: var(--transition);
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Nav - Premium Floating Menu */
.nav.mobile-active {
  display: block;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.02);
  border-radius: 20px;
  padding: 24px 16px;
  animation: menuFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top center;
}

@keyframes menuFadeInUp {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.nav.mobile-active .nav-list {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.nav.mobile-active .nav-link {
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--st-ink, #0F2438);
  transition: all 0.2s ease;
}

.nav.mobile-active .nav-link:active {
  transform: scale(0.98);
  background: rgba(0, 0, 0, 0.05);
}

.nav.mobile-active .dropdown-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 8px 0 0 16px;
  margin-left: 20px;
  border-left: 2px solid rgba(0,0,0,0.06);
  display: none;
}

.nav.mobile-active .nav-dropdown.active .dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav.mobile-active .nav-dropdown.active > .nav-link {
  background: var(--primary);
  color: white;
}

.nav.mobile-active .dropdown-menu a {
  padding: 12px 16px;
  font-size: 15px;
  color: #444;
  border-radius: 10px;
  display: block;
}

.nav.mobile-active .dropdown-menu a:active {
  background: rgba(0,0,0,0.04);
}
/* ========================================
   EQUIPE SECTION
   ======================================== */

.equipe {
  background-image: url('assets/bg4.webp?v=img20260606a');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  overflow: hidden;
  flex-direction: column;
  padding-bottom: clamp(60px, 9vh, 110px);
}
/* Silhouettes h1-h7 désactivées : la nouvelle photo bg4.webp affiche
   déjà toute l'équipe en contexte (couple + 3 techniciens + van CAPEO).
   Garder les surimpressions ferait double-emploi visuel. */
.equipe > .equipe-people { display: none !important; }

/* Personnages h1-h7 en surimpression sur bg2.webp
   z-index: 1 → au-dessus du fond, sous le voile dark + sous le contenu texte (z:3) */

.equipe > .equipe-people {
  display: none !important;
}
.equipe-person {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: translateY(14px);
  filter: brightness(0) invert(1) blur(14px) drop-shadow(0 0 38px rgba(255, 255, 255, 1));
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  transition: none;
}
/* Apparition en mode "hologramme d'énergie" : on voit d'abord le spectre vert,
   puis le personnage se matérialise dedans, du bas vers le haut */
.equipe.is-revealed .equipe-person {
  animation: equipe-hologram 1.4s linear forwards;
}
/* Vagues d'apparition avec délais spécifiques (centre → bords)
   Chaque vague suivante démarre largement AVANT la fin de la précédente */
.equipe.is-revealed .equipe-person[style*="--i:1"] { animation-delay: 0.2s; }
.equipe.is-revealed .equipe-person[style*="--i:2"] { animation-delay: 0.7s; }
.equipe.is-revealed .equipe-person[style*="--i:3"] { animation-delay: 1.2s; }
.equipe.is-revealed .equipe-person[style*="--i:4"] { animation-delay: 1.7s; }

@keyframes equipe-hologram {
  /* Phase 1 : silhouette blanche pure (brightness 0 + invert 1) qui se matérialise du bas vers le haut */
  0% {
    opacity: 0;
    transform: translateY(14px);
    filter: brightness(0) invert(1) blur(14px) drop-shadow(0 0 38px rgba(255, 255, 255, 1));
    clip-path: inset(100% 0 0 0);
    -webkit-clip-path: inset(100% 0 0 0);
  }
  10% {
    opacity: 1;
    filter: brightness(0) invert(1) blur(14px) drop-shadow(0 0 42px rgba(255, 255, 255, 1));
    clip-path: inset(80% 0 0 0);
    -webkit-clip-path: inset(80% 0 0 0);
  }
  55% {
    /* Silhouette blanche entièrement révélée */
    opacity: 1;
    filter: brightness(0) invert(1) blur(8px) drop-shadow(0 0 40px rgba(255, 255, 255, 0.95));
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
  /* Phase 2 : transition RAPIDE vers le personnage (55% → 72%) */
  72% {
    opacity: 1;
    filter: brightness(1) invert(0) blur(1px) drop-shadow(0 0 26px rgba(255, 255, 255, 0.75));
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
  100% {
    /* État final : image nette + halo blanc permanent */
    opacity: 1;
    transform: translateY(0);
    filter: brightness(1) invert(0) blur(0) drop-shadow(0 0 18px rgba(255, 255, 255, 0.6));
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
}
@keyframes equipe-person-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Notre équipe — titre + sous-titre juste au-dessus des stats */
.equipe .section-header {
  padding: 0 clamp(20px, 5vw, 80px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.6vh, 10px);
  flex: 0 0 auto;
  margin-bottom: clamp(24px, 4vh, 48px);
  position: relative;
  z-index: 5; /* titre TOUJOURS au-dessus, même quand bg3 (z:2) prend le premier plan */
}
.equipe .section-badge {
  background-color: transparent;
  color: #ffffff;
  font-size: clamp(24px, 4.4vw, 72px);
  font-weight: 800;
  letter-spacing: clamp(0px, 0.12vw, 1.5px);
  padding: 0;
  width: auto;
  max-width: 100%;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 8px 30px rgba(0, 0, 0, 0.35);
  border-radius: 0;
  box-shadow: none;
  line-height: 1.05;
  white-space: nowrap;
}
/* Fallback : autoriser le wrap sur très petits écrans pour éviter overflow */
@media (max-width: 900px) {
  .equipe .section-badge {
    white-space: normal;
    font-size: clamp(26px, 6.5vw, 44px);
  }
}
.equipe-subtitle {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15px, 2.45vw, 36px);
  font-weight: 500;
  margin: 0;
  width: 100%;                    /* = largeur du section-header (= titre) */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  line-height: 1.35;
  white-space: nowrap;            /* tient sur une ligne (= visuellement aligné fin du titre) */
}
@media (max-width: 1200px) {
  .equipe-subtitle {
    white-space: normal;
    font-size: clamp(14px, 1.8vw, 22px);
  }
}

/* Stats row — sober, numbers only */
.equipe-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  padding: 0 clamp(20px, 5vw, 80px);
  margin: 0 auto;
  max-width: 1400px;
  width: 100%;
  position: relative;
  z-index: 5; /* stats au-dessus de bg3 (z:2) et du voile (z:3) */
}
.equipe-stat {
  text-align: center;
  color: #ffffff;
  min-width: 180px;
}
.equipe-stat-number {
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.45),
    0 6px 24px rgba(0, 0, 0, 0.3);
}
.equipe-stat-label {
  margin-top: 2px;
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.equipe-stat-separator {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.35);
}
@media (max-width: 700px) {
  .equipe-stat-separator { display: none; }
}
.equipe .section-description {
  margin: 0;
  width: 100%;
  max-width: 900px;
  font-size: clamp(12px, 1.3vw, 17px);
  padding: clamp(10px, 1.5vh, 18px) clamp(16px, 2vw, 26px);
  text-align: left;
  border: none;
  background-color: rgba(20, 28, 44, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6px;
  line-height: 1.55;
  color: var(--muted);
}
/* Bottom dark gradient overlay — pour faire ressortir les stats
   z:3 → AU-DESSUS de bg3 (z:2) pour garder la lisibilité des stats */
.equipe::before,
.about::before,
.nous-container::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(280px, 55vh, 560px);
  background: linear-gradient(
    to top,
    rgba(12, 18, 30, 0.85) 0%,
    rgba(12, 18, 30, 0.7) 30%,
    rgba(12, 18, 30, 0.35) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 3;
}
/* bg3.webp en PREMIER PLAN — recouvre les personnages dès que h7 a fini d'apparaître
   Dernière vague (h1/h7) : delay 1.7s + animation 1.4s ⇒ fin à 3.1s, on enchaîne sans délai */

.equipe::after {
  display: none !important;
  content: none !important;
}
.equipe > *,
.about > *,
.advantages > * {
  position: relative;
  z-index: 4; /* titre + stats au-dessus de bg3 (z:2) ET du voile (z:3) */
}
/* Equipe content centered horizontally, pushed slightly toward bottom */
.equipe .section-container.equipe-bg {
  padding: 0 clamp(20px, 5vw, 80px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  margin-top: clamp(40px, 12vh, 140px); /* pushes cards down from the title */
  display: block;
  height: auto;
  flex: 0 0 auto;
}
.equipe .equipe-content {
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
  justify-content: center;    /* centered */
  align-items: flex-end;
}
.equipe .equipe-description {
  align-self: center;
  width: calc(100% - 48px);
  max-width: 1100px;
  margin: 0 auto clamp(24px, 4vh, 48px);
  flex: 0 0 auto;
}
.equipe-bg {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 40px;
  height: 60vh;
}
.equipe-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    rgba(90, 87, 87, 0.151) 0%, 
    rgba(190, 190, 190, 0.164) 50%, 
    rgba(29, 28, 27, 0.267) 100%
  );
}

.equipe-content {
  display: flex;
  justify-content: center;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.equipe-parent {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 80px;
}

.equipe-1{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
}
.equipe-1 img{
  width: clamp(110px, 12vw, 170px);
  height: auto;
  margin: 0 auto 0;
  /* Picto blanchi avec opacité */
  filter: brightness(0) invert(1) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
  opacity: 0.85;
  position: relative;
  z-index: 2;
  display: block;
  /* Le picto repose physiquement sur la bulle */
  margin-bottom: -1px;
}

/* Speech-bubble tab — compact, white translucent, collé sous le picto */
.equipe-label {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  color: var(--foreground);
  font-weight: 800;
  letter-spacing: 2px;
  font-size: clamp(14px, 1.3vw, 18px);
  padding: 12px 40px;
  border-radius: 8px;
  text-align: center;
  margin: 0 auto 22px;
  text-transform: uppercase;
  width: 250px;
  max-width: 100%;
  line-height: 1.2;
  box-sizing: border-box;
}
.equipe-label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid rgba(255, 255, 255, 0.6);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.08));
}

.equipe-1 .equipe-text {
 background: rgba(255, 255, 255, 0.85);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border: 1px solid rgba(255, 255, 255, 0.5);
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
 width: 250px;
 height: 150px;
   display: flex;
  justify-content: space-around;
  align-items: center;
  color: var(--foreground);
  text-align: center;
  padding: 0 10px;
}

.equipe-text{
  font-size: 18px;
  text-align: center;
  width: 250px;
  box-shadow: rgb(254, 254, 255) 0px 10px 30px -10px;
  border-radius: 10px;
}
@media (max-width: 768px) {

}
/* ========================================
   HERO SECTION
   ======================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 24px;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-image: url('assets/cover.webp?v=img20260606a');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-gradient {
  position: absolute;
  /* backdrop-filter: blur(10px); */
  inset: 0;
  /* Overlay foncé à gauche pour donner du contraste au texte du hero
     (le "votre solution .eco" et "CAP vers votre transition…").
     Auparavant 0.18→0.08 quasi-invisible — remonté à 0.7→0.42→0.12. */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.42) 30%, rgba(0, 0, 0, 0.12) 60%, rgba(254, 243, 199, 0.05) 100%);
}

.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
   background: var(--primary); 
  border-radius: 50%;
  z-index: 2;
  opacity: 0.8;
  animation: float 3s ease-in-out infinite;
}

.sun-rays {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 255, 154, 0.877) 0%, transparent 70%);
  animation: pulse 4s ease-in-out infinite;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .hero-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.hero-text {
  flex: 1;
  max-width: 700px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.hero-badge svg {
  color: var(--primary);
}

.hero-title-img{
  animation: wiggle 2s ease-in-out infinite;
  filter: brightness(1.25) contrast(0.82) saturate(1.05) !important;
  /* Masque dégradé pour couper l'ombre intégrée dans le PNG */
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  margin-bottom: -20px;
}
.hero-title {
  font-size: clamp(20px, 6vw, 32px);
  margin: 26px;
  line-height: 1.1;
  color: var(--muted);
}

.hero-description {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 32px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 48px;
}

.hero-stats {
  display: flex;
  gap: 24px;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: stretch;
}

.stat {
  background: rgba(15, 23, 42, 0.45);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 20px;
  width: clamp(160px, 23vw, 260px);
  min-height: 120px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, border-color 0.3s ease;
  /* Active les container queries → les labels peuvent utiliser cqi
     pour scaler en fonction de la largeur réelle de la carte. */
  container-type: inline-size;
}

.stat:hover {
  transform: translateY(-6px);
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
}

.bigger-stat,
.bigger-label{
  font-size: inherit !important;
}

.stat-value,
.stat-value.bigger-stat {
  display: block;
  font-size: clamp(32px, 3.5vw, 44px) !important;
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-label,
.hero-stats .stat .stat-label {
  /* Taille basée sur la largeur du conteneur (.stat) :
     - mini : 13px sur petite carte
     - 7.2cqi : 7,2% de la largeur de la carte
     - maxi : 17px sur grande carte */
  font-size: clamp(13px, 7.2cqi, 17px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background-color: transparent !important;
  text-shadow: none !important;
  text-transform: uppercase;
  line-height: 1.25;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
}

/* CREDIT / INVESTISSEMENT — labels mis en valeur : plus gros + plus gras. */
.stat-label.bigger-label,
.hero-stats .stat .stat-label.bigger-label {
  font-size: clamp(16px, 1.7vw, 22px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.95) !important;
}





.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  animation: float 2s ease-in-out infinite;
}
@media (max-width: 768px) {

  .scroll-indicator{
    left: 43%;
  }


}

.scroll-arrow {
  width: 24px;
  height: 24px;
}

.scroll-arrow svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
}
.scroll-arrow svg path {
  fill: #ffffff;
}

/* ========================================
   BRANDS SECTION
   ======================================== */

.brand-logo {
  width: 100px;
  height: 100px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}
/* .brands-logos{
  padding-block: 1rem;
   overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  mask: linear-gradient(90deg, transparent, rgb(221, 40, 40) 20%, rgb(33, 192, 94) 80%, transparent);
   width: max-content;
  animation: inf-scroll 20s linear infinite; 
} */
.scroller {
  max-width: 900px;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll 20s forwards linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}
/* ========================================
   COMMON SECTION STYLES
   ======================================== */


/* ========================================
   ABOUT SECTION
   ======================================== */



/* Bloc redesign mobile (slide "Qui sommes-nous" du carrousel) — masqué sur
   desktop. Sa version mobile est définie dans la media query plus bas. */
.about-mobile-card {
  display: none;
}
.advantages-mobile-card {
  display: none;
}
.solea-mobile-card {
  display: none;
}

.about {
  background-image: url('assets/nous1.webp?v=img20260606a');
  background-size: cover;
  background-position: center 24%;
  background-repeat: no-repeat;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
    flex-direction: column;
}

/* About section — left-aligned over the photo, full viewport (mockup style) */
.about {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: clamp(65px, 9vh, 100px);
  padding-bottom: clamp(15px, 2.5vh, 35px);
}
/* NOUVEAU BLOC QUI SOMMES NOUS - DESKTOP (CENTRE BAS) */
.about-bottom-content {
  position: absolute;
  bottom: clamp(80px, 12vh, 140px);
  left: 0;
  width: 100%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.about-bottom-content .section-badge {
  background-color: transparent;
  color: #ffffff;
  font-size: clamp(24px, 4.4vw, 72px);
  font-weight: 800;
  letter-spacing: clamp(0px, 0.12vw, 1.5px);
  padding: 0;
  width: auto;
  max-width: 100%;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 8px 30px rgba(0, 0, 0, 0.35);
  border-radius: 0;
  box-shadow: none;
  line-height: 1.05;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .about-bottom-content .section-badge {
    white-space: normal;
    font-size: clamp(26px, 6.5vw, 44px);
  }
}

/* Paragraphe descriptif CAPEO sous le sous-titre du slide About.
   text-wrap: balance répartit le texte en 2 lignes de longueur
   ÉQUILIBRÉE (au lieu de remplir la 1ère et laisser la 2e courte). */
.about-description {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(12px, 0.95vw, 14.5px);
  line-height: 1.55;
  max-width: none;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
  margin: 14px auto 0;
  padding: 0 clamp(20px, 3vw, 40px);
  text-wrap: balance;
}

/* Cacher le bloc Desktop sur mobile */
@media (max-width: 768px) {
  .about-bottom-content {
    display: none !important;
  }
}

/* ========================================
   NOS OBJECTIFS SECTION — slide carousel
   ======================================== */
/* Slide "Nos objectifs" : présentation IDENTIQUE au slide
   "Pourquoi nous ?" — mêmes flex-end / padding-bottom / header
   centré au-dessus des 3 pictos. */
.objectifs {
  background-image: url('assets/nos-objectifs.webp?v=img20260606a');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(60px, 9vh, 110px);
  color: #ffffff;
}
.objectifs::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Voile assoupli : plus de transparence pour mieux voir la photo
     de fond, tout en gardant la lisibilité du titre et des pictos. */
  background: linear-gradient(180deg, rgba(7, 16, 38, 0.18) 0%, rgba(7, 16, 38, 0.38) 100%);
  pointer-events: none;
  z-index: 1;
}
.objectifs-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.objectifs-header {
  padding: 0 clamp(20px, 5vw, 80px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto clamp(8px, 1.5vh, 20px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.6vh, 10px);
  position: relative;
  z-index: 4;
}
.objectifs .section-badge {
  background-color: transparent;
  color: #ffffff;
  font-size: clamp(24px, 4.4vw, 72px);
  font-weight: 800;
  letter-spacing: clamp(0px, 0.12vw, 1.5px);
  padding: 0;
  width: auto;
  max-width: 100%;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 8px 30px rgba(0, 0, 0, 0.35);
  border-radius: 0;
  box-shadow: none;
  line-height: 1.05;
  white-space: nowrap;
  display: inline-block;
}
@media (max-width: 900px) {
  .objectifs .section-badge {
    white-space: normal;
    font-size: clamp(26px, 6.5vw, 44px);
  }
}
/* Pictos PNG (épingle + symbole) — TAILLE UNIFORME pour alignement
   strict entre les 3 colonnes (même height + object-fit contain). */
.objectifs-picto {
  width: clamp(72px, 8vw, 110px);
  height: clamp(72px, 8vw, 110px);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}
/* .nous-features force aux 3 colonnes la MÊME hauteur de bloc et le
   MÊME alignement (haut), pour que les pictos et leurs paragraphes
   s'alignent visuellement. */
.objectifs .nous-features {
  align-items: stretch;
}
.objectifs .nous-feature {
  justify-content: flex-start;
  gap: 16px;
}
.objectifs .nous-feature p {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(13px, 1.1vw, 15.5px);
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.50);
  margin: 0;
}
.objectifs .separtor {
  background: rgba(255, 255, 255, 0.30);
  align-self: stretch;
  height: auto;
  min-height: 100px;
}
.objectifs .section-badge {
  background-color: transparent;
  color: #ffffff;
  font-size: clamp(24px, 4.4vw, 72px);
  font-weight: 800;
  letter-spacing: clamp(0px, 0.12vw, 1.5px);
  padding: 0;
  width: auto;
  max-width: 100%;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 8px 30px rgba(0, 0, 0, 0.35);
  border-radius: 0;
  box-shadow: none;
  line-height: 1.05;
}
.objectifs .equipe-subtitle {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(14px, 1.4vw, 18px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  font-style: italic;
}
.objectifs .equipe-stats {
  width: 100%;
}

/* ============================================================
   Fix carousel + IntersectionObserver — DESKTOP (≥769px).
   Le slide "Nos objectifs" est dans le carrousel d'accueil :
   l'IO ne se redéclenche pas à chaque changement de slide,
   donc les classes .animate-on-scroll / .animate-from-bottom
   restaient à opacity:0 → contenu invisible, on voyait la
   photo de fond à travers. Même fix qu'en mobile (ligne 1915)
   mais étendu au desktop sur ce slide précis.
   ============================================================ */
.objectifs .objectifs-content,
.objectifs .objectifs-header,
.objectifs .nous-features,
.objectifs .nous-feature,
.objectifs .separtor,
.objectifs-desktop,
.objectifs-desktop .animate-on-scroll,
.objectifs-desktop .animate-on-scroll-1,
.objectifs-desktop .animate-on-scroll-2,
.objectifs-desktop .animate-from-bottom {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .objectifs {
    /* Centre le contenu (au lieu de flex-end qui faisait déborder le titre
       sous le header) et dégage le header (haut) + les flèches (côtés). */
    justify-content: center;
    padding: clamp(92px, 14vh, 124px) 60px clamp(74px, 10vh, 104px);
  }
  .objectifs .section-badge {
    font-size: clamp(28px, 8vw, 40px);
    margin-bottom: clamp(10px, 2vh, 18px);
  }
  /* Voile renforcé : on calme la photo de fond (main + papiers, trop
     chargée) pour faire ressortir les encadrés. */
  .objectifs::before {
    background: linear-gradient(180deg, rgba(7, 16, 38, 0.52) 0%, rgba(7, 16, 38, 0.82) 100%) !important;
  }
  /* 3 objectifs empilés à la verticale, compacts : picto à gauche + texte. */
  .objectifs .nous-features {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(12px, 1.8vh, 18px);
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }
  .objectifs .separtor { display: none; }
  .objectifs .nous-feature {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    /* Effet verre translucide identique aux cartes SOLEA (.solea-inline-step)
       + accent coloré à gauche conservé. */
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-left: 3px solid var(--obj-accent, #f5b301);
    border-radius: 16px;
    padding: 15px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    /* Annule l'état caché des classes animate-on-scroll : sur un slide de
       carrousel l'IntersectionObserver ne se déclenche pas, le texte
       restait en opacity:0 (3ᵉ encadré quasi invisible). */
    opacity: 1 !important;
    transform: none !important;
  }
  /* Accent par carte (jaune → vert → bleu), comme les étapes SOLEA.
     Les .nous-feature sont en positions 1, 3, 5 (séparateurs entre eux). */
  .objectifs .nous-feature:nth-child(1) { --obj-accent: #f5b301; }
  .objectifs .nous-feature:nth-child(3) { --obj-accent: #84cc16; }
  .objectifs .nous-feature:nth-child(5) { --obj-accent: #60a5fa; }
  .objectifs .nous-feature p {
    text-align: left;
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0;
    color: #ffffff;
    /* On retire le fond/padding hérités de `.nous-feature p` (l'ancien
       encadré du texte) : sinon on a un cadre DANS le cadre verre. */
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .objectifs-picto {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-self: center;
  }
}

/* ===== Carte "Louez vos panneaux" — version MOBILE (flip auto recto/verso).
   Masquée par défaut ; affichée seulement sous 768px (la version desktop,
   elle, est dans .solea-steps-desktop, masquée sous 768px). ===== */
.solea-mrental-wrap { display: none; }

@media (max-width: 768px) {
  .solea-mrental-wrap {
    display: block;
    margin-top: clamp(20px, 3.5vh, 32px);
    perspective: 1400px;
  }
  .solea-mrental {
    display: block;
    text-decoration: none;
    color: #ffffff;
  }
  /* Flip robuste, hauteur EXPLICITE sur la carte (aucune dépendance à un
     comportement navigateur) : les 2 faces sont en absolute par-dessus,
     donc la carte a toujours une dimension, même sur iOS Safari. */
  .solea-mrental__inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.05, 0.2, 1);
    animation: rentalAutoFlip 16s ease-in-out 1.5s infinite;
  }
  .solea-mrental:hover .solea-mrental__inner,
  .solea-mrental:focus-visible .solea-mrental__inner {
    animation: none;
    transform: rotateY(180deg);
  }
  .solea-mrental__face {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 16px;
    padding: 24px 22px;
    /* Translucide comme les cartes 01/02/03, MAIS sans backdrop-filter :
       le flou bugue (boîte blanche) sur une carte 3D qui se retourne sur
       Safari. On garde un fond semi-transparent (on voit à travers) avec
       un léger voile sombre interne pour la lisibilité du texte. */
    background:
      linear-gradient(160deg, rgba(8, 18, 40, 0.34), rgba(8, 18, 40, 0.46)),
      rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  /* AVANT en flux → la carte s'auto-ajuste à son contenu (plus de grand
     vide). ARRIÈRE superposée par-dessus, retournée. */
  .solea-mrental__front { position: relative; }
  .solea-mrental__back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    justify-content: center;
  }
  .solea-mrental__flag {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f5b301;
    background: rgba(245, 179, 1, 0.12);
    border: 1px solid rgba(245, 179, 1, 0.35);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 12px;
  }
  .solea-mrental__title {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 4px;
    color: #ffffff;
  }
  .solea-mrental__sub {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.80);
    margin: 0 0 16px;
  }
  .solea-mrental__badges {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
  }
  /* Chaque avantage : pastille coche jaune (à gauche, sur 2 lignes) +
     valeur en gras + description, séparés par un fin trait. */
  .solea-mrental__badges > div {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }
  .solea-mrental__badges > div:first-child {
    border-top: none;
    padding-top: 2px;
  }
  .solea-mrental__badges > div::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / 3;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5b301' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat,
      rgba(245, 179, 1, 0.14);
    border: 1px solid rgba(245, 179, 1, 0.45);
  }
  .solea-mrental__badges strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
  }
  .solea-mrental__badges span {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
  }
  .solea-mrental__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .solea-mrental__steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.92);
  }
  .solea-mrental__steps strong {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(245, 179, 1, 0.18);
    border: 1px solid rgba(245, 179, 1, 0.5);
    color: #f5b301;
    font-size: 13px;
    font-weight: 800;
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .solea-mrental__inner { animation: none !important; }
}

/* ========================================
   SOLEA SECTION
   ======================================== */
.solea {
  background-image:
    linear-gradient(
      180deg,
      rgba(33, 48, 94, 0.64) 0%,
      rgba(33, 48, 94, 0.42) 48%,
      rgba(253, 252, 250, 0.2) 100%
    ),
    url('assets/cover.webp?v=img20260606a');
  background-size: cover;
  background-position: center;
  position: relative;
  /* padding-top minimal — le titre démarre juste après le menu header fixe
     (~70 px). Gap respiratoire de seulement 6 px → titre vraiment haut. */
  padding: 76px 24px 76px;
  overflow: hidden;
}

.solea-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Gap réduit pour resserrer header + steps-desktop. */
  gap: 18px;
}

/* ============================================================================
   SOLEA DESKTOP — "Votre projet en 3 étapes" (glass cards horizontales)
   Adaptation desktop du bloc inline mobile. 3 cartes en grille à 3 colonnes,
   sur fond bleu nuit (background photo du parent .solea), animation stagger.
   ========================================================================== */
.solea-steps-desktop {
  display: block;
  text-align: center;
  /* margin-top = ancien + ~3/4 de la hauteur des cards (~120 px) → cards
     poussées encore d'un cran vers le bas. */
  margin: clamp(200px, 25vh, 280px) auto 0;
  max-width: 1100px;
  width: 100%;
}
.solea-steps-desktop__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.solea-steps-desktop__line {
  width: 48px;
  height: 3px;
  background: linear-gradient(to right, #eab308, #fbbf24);
  border-radius: 2px;
  margin: 0 auto 14px;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.45);
}
.solea-steps-desktop__subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0 auto 28px;
  /* max-width élargi + nowrap : la phrase tient sur 1 seule ligne sur
     desktop ≥ 769px (à toutes les tailles raisonnables). */
  max-width: none;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* En tablette serrée ou viewport très étroit, on relâche la contrainte
   pour éviter un débordement horizontal. */
@media (max-width: 900px) {
  .solea-steps-desktop__subtitle {
    white-space: normal;
    max-width: 560px;
  }
}
.solea-steps-desktop__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

/* ===== Variante 2 colonnes (split) — carte rental à gauche + 3 cartes
   verticales à droite, dans la section SOLEA de la home ============== */
.solea-steps-desktop--split {
  /* Largeur élargie pour pouvoir coller la carte rental plus à gauche
     et garder de l'espace pour les 3 cartes verticales à droite. */
  max-width: 1280px;
  /* Bloc remonté : margin-top fortement réduit par rapport à la
     valeur de base (clamp(200px, 25vh, 280px)). */
  margin-top: clamp(40px, 6vh, 90px);
}

/* Colonne droite : 3 cartes flip empilées (le titre + la ligne ont
   été remontés au-dessus du grid). Flex column qui occupe TOUTE la
   hauteur de la cellule grid (= hauteur Louez), pour que le conteneur
   de cartes en dessous puisse s'étirer pleinement via flex: 1. */
.solea-steps-desktop__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  height: 100%;
}
.solea-steps-desktop--split .solea-steps-desktop__title {
  /* Titre maintenant en flux normal AU-DESSUS du grid (et non plus dans
     la colonne droite). Largeur EXACTEMENT calée sur les cartes
     en-dessous + alignement à droite via margin-left:auto. */
  margin-top: 0;
  margin-bottom: 6px;
  margin-left: auto;
  margin-right: clamp(-280px, -11vw, -50px);
  width: clamp(210px, 19vw, 300px);
  padding: 0;
  line-height: 1;
}

/* SVG du titre : remplit la largeur de son parent (= largeur des cartes).
   Le viewBox 300×30 + textLength=300 + lengthAdjust="spacingAndGlyphs"
   forcent la police à se redimensionner pour coller pile à la largeur. */
.solea-steps-desktop__title-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.solea-steps-desktop__title-svg text {
  fill: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  /* La taille de référence dans le viewBox — la mise à l'échelle SVG
     ajustera ensuite à la largeur réelle du conteneur. */
  font-size: 22px;
  letter-spacing: -0.01em;
  /* Léger glow noir pour la lisibilité sur la photo de fond. */
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.4);
  stroke-width: 0;
}
.solea-steps-desktop--split .solea-steps-desktop__line {
  /* Petite ligne déco juste sous le titre, alignée à droite avec les cartes.
     Le margin-bottom crée une respiration AVANT le grid (Louez + cards). */
  margin-left: auto;
  margin-right: clamp(-280px, -11vw, -50px);
  margin-top: 0;
  margin-bottom: 14px;
}
.solea-steps-desktop__split {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  /* gap réduit + padding-left négatif sur la carte pour la coller
     vers la gauche. */
  gap: clamp(12px, 2vw, 28px);
  /* stretch (au lieu de start) : la colonne droite s'étire pour
     atteindre la même hauteur que la carte Louez ; les 3 cartes à
     l'intérieur se répartissent ensuite cette hauteur en 3 parts
     égales (cf. grid-template-rows: 1fr 1fr 1fr ci-dessous). */
  align-items: stretch;
  text-align: left;
}
/* Sur la variante split, les 3 cartes s'empilent à la verticale.
   Cartes plus compactes ET PLUS OPAQUES (sinon la photo du bg
   transparaît à travers les cards, illisible). */
.solea-steps-desktop__cards--vertical {
  grid-template-columns: 1fr;
  /* 3 lignes égales : la somme des hauteurs + gaps doit faire la
     hauteur totale du conteneur (= hauteur Louez). */
  grid-template-rows: 1fr 1fr 1fr;
  gap: 12px;
  /* Prend toute la hauteur restante de .solea-steps-desktop__right
     (qui elle-même fait 100% de la cellule grid = hauteur Louez). */
  flex: 1;
  width: 100%;
  /* Ancre le curseur démo .solea-steps-cursor (position:absolute). */
  position: relative;
}
.solea-steps-desktop__cards--vertical .solea-step-desktop {
  padding: 0;
  border-radius: 14px;
  /* Le background/border/padding passent sur la FACE FRONT pour que
     la face back ait son propre design. La carte conteneur ne porte
     plus que la perspective + l'ancrage du flip. */
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  /* Cartes plus étroites ET poussées plus à droite. */
  width: clamp(210px, 19vw, 300px);
  margin-left: auto;
  margin-right: clamp(-280px, -11vw, -50px);
  /* min-height retiré : la hauteur est désormais pilotée par
     grid-template-rows: 1fr 1fr 1fr du conteneur parent (cartes ÷ 3
     de la hauteur Louez). Garantit que les 3 cartes occupent
     ensemble la même hauteur que la carte Louez à gauche. */
  min-height: 0;
  height: 100%;
  /* Perspective 3D pour le flip */
  perspective: 1200px;
}

/* ===== Flip 3D + entrée scale-in "grande et design" ===== */
.solea-step-flip {
  position: relative;
  /* Entrée + pulse séquentiel sont déclarés ensemble plus bas
     (section "Pulse séquentiel cliquable"). */
  opacity: 0;
}

.solea-step-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  /* Hint GPU pour que le navigateur promeuve l'élément sur sa propre
     couche compositée pendant la rotation (évite les repaints lourds). */
  will-change: transform;
  /* Flip une fois : démarre après l'entrée (1.4s + delay carte) puis
     reste sur back (forwards). On voit le gros chiffre brièvement,
     puis flip rapide vers les précisions. */
  animation: soleaStepFlipOnce 1.1s cubic-bezier(0.4, 0.05, 0.2, 1)
             calc(1.4s + var(--step-delay, 0s)) forwards;
}

.solea-step-flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  /* Fond rendu opaque (1.0) car le backdrop-filter blur a été retiré :
     il provoquait un bégaiement GPU pendant la rotation 3D
     (le blur du backdrop est recalculé à chaque angle). */
  background: rgb(7, 16, 38);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
}

/* FRONT : gros chiffre 01/02/03 centré, designé, classe.
   C'est ce qu'on voit À L'ENTRÉE de la section SOLEA. */
.solea-step-flip__face--front {
  justify-content: center;
  align-items: center;
  /* Variante visuelle plus impactante selon la couleur de l'étape */
  background:
    radial-gradient(circle at 30% 20%,
      rgba(255, 217, 77, 0.22), transparent 65%),
    linear-gradient(135deg,
      rgba(7, 16, 38, 0.92),
      rgba(13, 28, 58, 0.92));
  border: 1px solid rgba(255, 217, 77, 0.30);
}
.solea-step-flip[data-color="green"] .solea-step-flip__face--front {
  background:
    radial-gradient(circle at 30% 20%,
      rgba(132, 204, 22, 0.22), transparent 65%),
    linear-gradient(135deg, rgba(7, 16, 38, 0.92), rgba(13, 28, 58, 0.92));
  border: 1px solid rgba(132, 204, 22, 0.30);
}
.solea-step-flip[data-color="blue"] .solea-step-flip__face--front {
  background:
    radial-gradient(circle at 30% 20%,
      rgba(96, 165, 250, 0.22), transparent 65%),
    linear-gradient(135deg, rgba(7, 16, 38, 0.92), rgba(13, 28, 58, 0.92));
  border: 1px solid rgba(96, 165, 250, 0.30);
}

/* Le gros chiffre 01/02/03 : énorme, gradient coloré, design */
.solea-step-flip__bignum {
  font-family: 'Inter', sans-serif;
  font-size: clamp(56px, 6vw, 86px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffd94d 0%, #ffb800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 4px 24px rgba(255, 217, 77, 0.20);
  filter: drop-shadow(0 4px 12px rgba(255, 217, 77, 0.18));
}
.solea-step-flip[data-color="green"] .solea-step-flip__bignum {
  background: linear-gradient(135deg, #a3e635 0%, #65a30d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 4px 12px rgba(163, 230, 53, 0.18));
}
.solea-step-flip[data-color="blue"] .solea-step-flip__bignum {
  background: linear-gradient(135deg, #93c5fd 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 4px 12px rgba(147, 197, 253, 0.18));
}

/* BACK : les précisions (num + h4 + p) — même look que les anciennes cartes */
.solea-step-flip__face--back {
  transform: rotateY(180deg);
  flex-direction: row;
  align-items: center;
  gap: 12px;
  /* Garde l'apparence "carte info" : fond bleu nuit + bordure neutre */
  background: rgba(7, 16, 38, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Liseret coloré à gauche — recréé sur CHAQUE face (front + back)
   pour rester visible à travers le flip (le pseudo ::before sur
   .solea-step-desktop était masqué par les faces opaques). */
.solea-step-flip__face::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to bottom, #fbbf24, #eab308);
}
.solea-step-flip[data-color="green"] .solea-step-flip__face::before {
  background: linear-gradient(to bottom, #84cc16, #65a30d);
}
.solea-step-flip[data-color="blue"] .solea-step-flip__face::before {
  background: linear-gradient(to bottom, #60a5fa, #3b82f6);
}

/* ===== Keyframes ===== */
@keyframes soleaStepEntrance {
  0%   { opacity: 0; transform: scale(1.25) translateY(-6px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Flip ONE-SHOT : 0% front, 100% back (reste sur back via forwards) */
@keyframes soleaStepFlipOnce {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

/* Hover utilisateur : retour temporaire sur la face avant pour
   re-voir le gros chiffre. Lâchage du hover → revient au back. */
.solea-step-flip:hover .solea-step-flip__inner {
  transform: rotateY(0deg);
  transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.2, 1);
}

/* === Pulse séquentiel cliquable des 3 cartes 01/02/03 ===
   Chaque carte se gonfle BRIÈVEMENT à tour de rôle (jaune → vert → bleu)
   pour inciter au clic. On n'anime que scale sur l'élément OUTER (qui ne
   tourne plus une fois le flip terminé) — GPU-cheap, zéro bégaiement.
   Le box-shadow coloré statique de chaque carte est conservé pour
   marquer la cliquabilité au repos. */
.solea-step-flip[data-color="yellow"] {
  box-shadow: 0 8px 22px -10px rgba(255, 217, 77, 0.55);
}
.solea-step-flip[data-color="green"] {
  box-shadow: 0 8px 22px -10px rgba(132, 204, 22, 0.55);
}
.solea-step-flip[data-color="blue"] {
  box-shadow: 0 8px 22px -10px rgba(96, 165, 250, 0.55);
}

/* Ordre de pulse : carte 1 (jaune) → 2 (vert) → 3 (bleu).
   IMPORTANT : on utilise nth-of-type (et non nth-child) car le conteneur
   contient aussi le <svg> du curseur démo en 1er enfant ; nth-child
   décalerait l'ordre. nth-of-type ne compte que les <a> (les cartes). */
.solea-steps-desktop__cards--vertical .solea-step-flip:nth-of-type(1) {
  --pulse-order: 0;
}
.solea-steps-desktop__cards--vertical .solea-step-flip:nth-of-type(2) {
  --pulse-order: 1;
}
.solea-steps-desktop__cards--vertical .solea-step-flip:nth-of-type(3) {
  --pulse-order: 2;
}

/* Entrée 0.9s + délai 1.4s pour le flip + 1.1s de flip ≈ 3.4s total.
   Le pulse démarre à 3.6s pour laisser le flip se terminer proprement.
   Cycle 3.6s, stagger 1.2s entre cartes → enchaînement parfait. */
.solea-step-flip {
  animation:
    soleaStepEntrance 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--step-delay, 0s) forwards,
    soleaCardSequentialPulse 3.6s ease-in-out
      calc(3.6s + var(--pulse-order, 0) * 1.2s) infinite;
}

@keyframes soleaCardSequentialPulse {
  /* La carte reste à scale(1) la majorité du cycle, puis pulse brièvement
     (0% → 17% du cycle, soit ~0.6s sur 3.6s) avant de se rendormir. */
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.045); }
  17%      { transform: scale(1); }
}

.solea-step-flip:hover {
  /* Pause l'animation lorsque l'utilisateur survole — la main est déjà
     sur la carte, plus besoin de signaler la cliquabilité. */
  animation-play-state: paused;
}

/* === Curseur démo baladé sur les 3 cartes 01/02/03 ===
   Un curseur unique fait la tournée carte 1 → 2 → 3 en boucle et "tape"
   chaque carte. Le timing (période 3.6s, délai 3.6s) est calé EXACTEMENT
   sur le pulse séquentiel (soleaCardSequentialPulse) : le curseur tape
   chaque carte au moment précis où elle se gonfle. */
.solea-steps-cursor {
  position: absolute;
  width: 28px;
  height: 28px;
  /* Calage horizontal sur le CENTRE réel des cartes.
     Les cartes débordent à droite du conteneur via leur margin-right
     négatif ; on reproduit donc la même géométrie :
       right = margin-right(négatif) + largeur_carte/2 - décalage_pointe
     → le curseur vise le centre de la carte, à toute largeur d'écran.
     Pour viser le BORD DROIT de la carte : right = margin-right + petit inset
     (la demi-largeur est retirée, on n'est plus au centre mais au bord). */
  right: calc(clamp(-280px, -11vw, -50px) + 16px);
  top: 22%;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  transform-origin: 30% 30%;
  /* Caché au départ : n'apparaît qu'APRÈS la rotation d'entrée des 3 cartes
     (leur flip se termine vers 3s). soleaStepsCursorAppear le fait fondre
     en visibilité à 3s, juste avant que la tournée+pulses démarrent (3.6s). */
  opacity: 0;
  animation:
    soleaStepsCursorTour 3.6s ease-in-out 3.6s infinite,
    soleaStepsCursorAppear 0.5s ease-out 3s forwards;
}
@keyframes soleaStepsCursorAppear {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Quand l'utilisateur survole vraiment la zone des cartes, on cache le
   curseur démo (il a déjà la main dessus). */
.solea-steps-desktop__cards--vertical:hover .solea-steps-cursor {
  opacity: 0;
  animation-play-state: paused;
}

@keyframes soleaStepsCursorTour {
  /* Seul `top` change (déplacement vertical d'une carte à l'autre) ;
     le calage horizontal est fixe (cf. `right` ci-dessus). Le "tap" se
     fait via transform (petit recul + scale), sans toucher au calage. */
  /* Principe : le curseur ARRIVE sur la carte et la "clique", PUIS la carte
     pulse en réaction. Le clic est calé ~4% avant le pic de pulse (qui a
     lieu à 8 / 41 / 75% via soleaCardSequentialPulse), et le curseur reste
     posé pendant que la carte se gonfle. */
  /* --- Carte 1 (~22%) : déjà arrivée (retour depuis la carte 3) --- */
  0%   { top: 22%; opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
  4%   { top: 22%; transform: translateX(3px) rotate(-10deg) scale(0.82); } /* clic */
  8%   { top: 22%; transform: translateX(0) rotate(0deg) scale(1); }        /* → la carte pulse */
  15%  { top: 22%; transform: translateX(0) rotate(0deg) scale(1); }
  /* --- glisse vers la carte 2, ARRIVE (30%), clique (37%), PUIS pulse (41%) --- */
  30%  { top: 56%; transform: translateX(0) rotate(0deg) scale(1); }
  37%  { top: 56%; transform: translateX(3px) rotate(-10deg) scale(0.82); } /* clic */
  41%  { top: 56%; transform: translateX(0) rotate(0deg) scale(1); }        /* → la carte pulse */
  48%  { top: 56%; transform: translateX(0) rotate(0deg) scale(1); }
  /* --- glisse vers la carte 3, ARRIVE (63%), clique (71%), PUIS pulse (75%) --- */
  63%  { top: 89%; transform: translateX(0) rotate(0deg) scale(1); }
  71%  { top: 89%; transform: translateX(3px) rotate(-10deg) scale(0.82); } /* clic */
  75%  { top: 89%; transform: translateX(0) rotate(0deg) scale(1); }        /* → la carte pulse */
  82%  { top: 89%; transform: translateX(0) rotate(0deg) scale(1); }
  /* --- remonte vers la carte 1 pour boucler --- */
  100% { top: 22%; opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}

/* prefers-reduced-motion : pas d'entrée ni de flip auto, on affiche
   directement la face back (les précisions) puisque c'est l'état final. */
@media (prefers-reduced-motion: reduce) {
  .solea-step-flip {
    opacity: 1;
    animation: none;
    filter: none !important;
  }
  .solea-step-flip__inner {
    animation: none !important;
    transform: rotateY(180deg);
  }
  .solea-steps-cursor {
    animation: none !important;
    opacity: 0;
  }
}
.solea-steps-desktop__cards--vertical .solea-step-desktop__num {
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 800;
  line-height: 1;
  min-width: 36px;
  text-align: center;
}
.solea-steps-desktop__cards--vertical .solea-step-desktop__body {
  flex: 1;
}
.solea-steps-desktop__cards--vertical .solea-step-desktop__body h4 {
  /* Titres Préconisation / Production / Stockage : agrandis un cran +
     MAJUSCULES pour servir d'accroche sur la face arrière des cartes. */
  font-size: clamp(14px, 1.05vw, 16.5px);
  margin: 0 0 3px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 800;
}
.solea-steps-desktop__cards--vertical .solea-step-desktop__body p {
  font-size: clamp(12px, 0.95vw, 13.5px);
  line-height: 1.4;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  /* Force la phrase à wrapper sur ~2 lignes : limite la largeur du
     texte plutôt qu'une ligne unique trop longue. */
  max-width: 28ch;
  text-wrap: balance;
}
/* Carte "Louez vos panneaux" — version SOLEA (statique, dans le grid,
   pas absolute comme dans le hero stockage). Réutilise le flip 3D
   défini par .offer-card / .card-inner / .card-front / .card-hover.
   Décalée vers la gauche via margin-left négatif pour sortir du
   gabarit centré du parent .solea-inner. */
.solea-rental-card.offer-card {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0;
  /* Décalage gauche renforcé pour coller au bord gauche du viewport.
     margin-top: 0 — Louez sit maintenant au row-top du grid, et la
     carte 01 (premier enfant de la colonne droite) y est aussi : leurs
     hauts sont alignés naturellement par "align-items: start" du grid.
     Le titre + la ligne ont été remontés AU-DESSUS du grid. */
  margin: 0 0 0 clamp(-320px, -12vw, -60px);
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  perspective: 1400px;
  /* min-height retiré : c'est désormais la face BACK ("Comment ça
     fonctionne") qui pilote la hauteur via le swap relative/absolute
     ci-dessous (voir .solea-rental-card .card-hover / .card-front). */
  /* Démo : flip 3D auto en boucle pour qu'on voie qu'il y a 2 faces.
     Synchronisé avec le curseur SVG ci-dessous. Le hover utilisateur
     reste prioritaire (override géré ailleurs). */
}
.solea-rental-card.offer-card .card-inner {
  animation: rentalAutoFlip 16s ease-in-out 1.5s infinite;
}

/* === SWAP relative/absolute pour la version SOLEA de Louez ===
   On veut que la HAUTEUR de la carte = hauteur naturelle de la face
   "Comment ça fonctionne" (back), pas celle du recto (offer-badges).
   Donc :  .card-hover devient position: relative (drive la hauteur)
           .card-front devient position: absolute (fill le wrapper) */
.solea-rental-card.offer-card .card-front {
  /* Le recto devient flex column pour pouvoir placer le logo CAPEO
     en bas via margin-top: auto sur .solea-rental-card__brand.
     Le verso reste en flow normal (pas de logo dessus). */
  display: flex;
  flex-direction: column;
}
.solea-rental-card.offer-card .card-front {
  position: absolute;
  inset: 0;
}
.solea-rental-card.offer-card .card-hover {
  position: relative;
  inset: auto;
}

/* Logo CAPEO en bas de chaque face — "comble" l'espace vide quand la
   face arrière (plus haute) pilote la hauteur. Largeur et opacité
   modérées pour ne pas voler la vedette au contenu principal. */
.solea-rental-card__brand {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0.85;
}
.solea-rental-card__brand img {
  width: clamp(72px, 9vw, 110px);
  height: auto;
  display: block;
  /* Léger glow pour ressortir sur le dégradé sombre de la carte. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.solea-rental-card.offer-card:hover .card-inner {
  /* Quand l'utilisateur survole vraiment, on stoppe l'auto-flip et on
     applique le rotateY 180° directement (cf. règle existante). */
  animation: none;
}

/* Curseur SVG démo : entre par la droite, hover au centre, sort. */
.solea-rental-cursor {
  position: absolute;
  width: 28px;
  height: 28px;
  top: 28%;
  left: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  animation: rentalCursorMove 12s ease-in-out 1.5s infinite;
}
.solea-rental-card.offer-card:hover .solea-rental-cursor {
  /* Quand l'utilisateur prend la main, on cache le curseur démo. */
  animation: none;
  opacity: 0;
}

/* Cycle 12s : 5.4s sur la face avant + 0.6s de rotation + 5.4s sur la
   face arrière + 0.6s de rotation retour. La rotation est rapide
   (0.6s = "vrai flip"), c'est l'attente sur chaque face qui est longue
   pour laisser le temps de lire. */
@keyframes rentalAutoFlip {
  0%, 45%  { transform: rotateY(0deg); }
  50%, 95% { transform: rotateY(180deg); }
  100%     { transform: rotateY(0deg); }
}

/* Démo auto : les 3 étapes apparaissent en cascade pendant que la face
   arrière est visible (35-58% du cycle flip). Hidden quand la carte se
   retourne. Chaque étape a son propre keyframe avec un délai progressif. */
.solea-rental-card.offer-card .steps > div:nth-child(1) {
  animation: rentalStepReveal1 16s ease-in-out 1.5s infinite;
}
.solea-rental-card.offer-card .steps > div:nth-child(2) {
  animation: rentalStepReveal2 16s ease-in-out 1.5s infinite;
}
.solea-rental-card.offer-card .steps > div:nth-child(3) {
  animation: rentalStepReveal3 16s ease-in-out 1.5s infinite;
}
/* L'utilisateur survole : on stoppe les keyframes auto (rentalStepReveal)
   et on relance les keyframes stepDeploy du hover natif, avec les délais
   d'origine. Sans ça, "animation: none !important" tuait aussi le reveal
   hover et les étapes restaient invisibles (opacity:0 de base). */
.solea-rental-card.offer-card:hover .steps > div:nth-child(1) {
  animation: stepDeploy 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 0.60s forwards !important;
}
.solea-rental-card.offer-card:hover .steps > div:nth-child(2) {
  animation: stepDeploy 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 1.35s forwards !important;
}
.solea-rental-card.offer-card:hover .steps > div:nth-child(3) {
  animation: stepDeploy 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 2.10s forwards !important;
}

/* Back visible 50-95%. Les 3 étapes apparaissent en cascade puis RESTENT
   visibles jusqu'à 100% : elles ne s'effacent plus avant le flip retour,
   elles tournent AVEC la carte mère pendant la rotation (95-100%). Le
   masquage est assuré naturellement par le backface-hidden de la face
   arrière (invisible quand la carte est revenue sur le recto). */
@keyframes rentalStepReveal1 {
  0%, 53%    { opacity: 0; transform: translateY(10px); }
  57%, 100%  { opacity: 1; transform: translateY(0); }
}
@keyframes rentalStepReveal2 {
  0%, 60%    { opacity: 0; transform: translateY(10px); }
  64%, 100%  { opacity: 1; transform: translateY(0); }
}
@keyframes rentalStepReveal3 {
  0%, 67%    { opacity: 0; transform: translateY(10px); }
  71%, 100%  { opacity: 1; transform: translateY(0); }
}

/* Cycle 12s recalibré : curseur démo entre juste avant le 1er flip
   (à 45%), pointe le centre pendant la rotation (45-50%), puis sort. */
@keyframes rentalCursorMove {
  0%, 30%  { opacity: 0; left: 110%; top: 60%; }
  38%      { opacity: 1; left: 80%; top: 50%; }
  45%, 52% { opacity: 1; left: 45%; top: 45%; }
  60%      { opacity: 1; left: 80%; top: 55%; }
  68%, 100% { opacity: 0; left: 110%; top: 65%; }
}

@media (prefers-reduced-motion: reduce) {
  .solea-rental-card.offer-card .card-inner,
  .solea-rental-card.offer-card .steps > div,
  .solea-rental-cursor {
    animation: none !important;
  }
  .solea-rental-cursor { opacity: 0; }
}
/* Flip également déclenché par hover/focus sur cette variante. */
.solea-rental-card.offer-card:hover .card-inner,
.solea-rental-card .offer-card__link:focus-visible .card-inner {
  transform: rotateY(180deg);
}
/* Responsive : sur tablette/petit desktop, on repasse en colonne simple
   (carte au-dessus des 3 étapes). */
@media (max-width: 900px) {
  .solea-steps-desktop__split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .solea-rental-card.offer-card {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* Carte glass — version desktop, dimensions plus généreuses qu'en mobile. */
.solea-step-desktop {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.solea-step-desktop::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  border-radius: 0 3px 3px 0;
}
.solea-step-desktop[data-color="yellow"]::before {
  background: linear-gradient(to bottom, #fbbf24, #eab308);
}
.solea-step-desktop[data-color="green"]::before {
  background: linear-gradient(to bottom, #84cc16, #65a30d);
}
.solea-step-desktop[data-color="blue"]::before {
  background: linear-gradient(to bottom, #60a5fa, #3b82f6);
}

/* Pour les cartes en mode FLIP, on désactive le liseret fixe du parent
   (sinon doublon visuel avec le liseret qui suit le flip sur chaque face). */
.solea-step-flip::before {
  display: none !important;
}
.solea-step-desktop:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.solea-step-desktop__num {
  font-family: 'Inter', sans-serif;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.solea-step-desktop[data-color="yellow"] .solea-step-desktop__num {
  color: #fde047;
  text-shadow: 0 0 16px rgba(234, 179, 8, 0.50);
}
.solea-step-desktop[data-color="green"] .solea-step-desktop__num {
  color: #bef264;
  text-shadow: 0 0 16px rgba(101, 163, 13, 0.50);
}
.solea-step-desktop[data-color="blue"] .solea-step-desktop__num {
  color: #93c5fd;
  text-shadow: 0 0 16px rgba(59, 130, 246, 0.50);
}

.solea-step-desktop__body h4 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.solea-step-desktop__body p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(13.5px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
  margin: 0;
}

/* Masquer le bloc desktop sur mobile (la version inline glass est dans le card mobile) */
@media (max-width: 768px) {
  .solea-steps-desktop {
    display: none !important;
  }
}

/* Sur tablette intermédiaire, passer à 1 colonne empilée si la grille étouffe */
@media (max-width: 900px) and (min-width: 769px) {
  .solea-steps-desktop__cards {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}

.solea-header {
  text-align: center;
  gap: 14px;
}

.solea .section-badge {
  width: auto;
  display: inline-block;
  padding: 10px 34px;
  font-size: clamp(24px, 4.6vw, 54px);
  letter-spacing: 0.12em;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  border: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.solea-subtitle {
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 800;
  color: var(--secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 2px 12px rgba(255, 255, 255, 0.65);
}

.solea-intro {
  color: var(--primary);
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(33, 48, 94, 0.14);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(33, 48, 94, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.55;
}

.solea-journey {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.solea-diagram-panel {
  width: 100%;
  max-width: 1040px;
  padding: clamp(8px, 1.5vw, 16px);
  background:
    linear-gradient(180deg, rgba(33, 48, 94, 0.08), rgba(33, 48, 94, 0.28)),
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 36%, rgba(255, 255, 255, 0.08) 70%, transparent 100%);
  border: none;
  border-radius: 0;
  box-shadow:
    inset 0 -110px 120px rgba(13, 18, 48, 0.38),
    0 22px 50px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.diagram-stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1000 / 560;
  overflow: visible;
}

.sol-asset {
  position: absolute;
  height: auto;
  transition: transform 0.25s ease;
}

/* Click cursor hint on SOLEA steps */
.click-cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -22%;
  margin-left: -8%;
  width: clamp(30px, 3.2vw, 46px);
  height: clamp(30px, 3.2vw, 46px);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  animation: cursor-tap 6s linear infinite;
  animation-fill-mode: both;
}
.click-cursor svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(13, 18, 48, 0.45));
}
.click-cursor-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: rgba(225, 122, 45, 0.55);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  visibility: hidden;
  animation: cursor-pulse 6s linear infinite;
  animation-fill-mode: both;
  z-index: 1;
}
/* Sequential delays — only one cursor visible at a time */
.sol-asset.step-1 .click-cursor,
.sol-asset.step-1 .click-cursor-pulse {
  animation-delay: 0s;
}
.sol-asset.step-2 .click-cursor,
.sol-asset.step-2 .click-cursor-pulse {
  animation-delay: 2s;
}
.sol-asset.step-3 .click-cursor,
.sol-asset.step-3 .click-cursor-pulse {
  animation-delay: 4s;
}
.sol-asset:hover .click-cursor {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 0.2s;
}
/* Pulse the picto in sync with the virtual cursor passing over it */
.sol-asset.step-1,
.sol-asset.step-2,
.sol-asset.step-3 {
  cursor: pointer;
  animation: picto-pulse 6s ease-in-out infinite;
}
.sol-asset.step-1 { animation-delay: 0s; }
.sol-asset.step-2 { animation-delay: 2s; }
.sol-asset.step-3 { animation-delay: 4s; }

/* Continuous pulse on real cursor hover */
.sol-asset.step-1:hover,
.sol-asset.step-2:hover,
.sol-asset.step-3:hover {
  animation: picto-pulse-hover 1.1s ease-in-out infinite;
}
@keyframes picto-pulse-hover {
  0%, 100% {
    transform: scale(1.05);
    filter: drop-shadow(0 14px 26px rgba(225, 122, 45, 0.55));
  }
  50% {
    transform: scale(1.22);
    filter: drop-shadow(0 26px 48px rgba(225, 122, 45, 0.85));
  }
}

@keyframes picto-pulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 12px 22px rgba(13, 18, 48, 0.35)); }
  5%   { transform: scale(1.18); filter: drop-shadow(0 22px 40px rgba(225, 122, 45, 0.75)); }
  15%  { transform: scale(1.24); filter: drop-shadow(0 28px 50px rgba(225, 122, 45, 0.85)); }
  22%  { transform: scale(1.20); filter: drop-shadow(0 26px 46px rgba(225, 122, 45, 0.80)); }
  28%  { transform: scale(1.14); filter: drop-shadow(0 20px 36px rgba(225, 122, 45, 0.55)); }
  33%  { transform: scale(1);    filter: drop-shadow(0 12px 22px rgba(13, 18, 48, 0.35)); }
  100% { transform: scale(1);    filter: drop-shadow(0 12px 22px rgba(13, 18, 48, 0.35)); }
}
@keyframes cursor-tap {
  0%, 5%   { transform: translate(0, 0); opacity: 0; visibility: hidden; }
  5.01%    { transform: translate(0, 0); opacity: 0; visibility: visible; }
  10%      { transform: translate(0, -4px); opacity: 1; visibility: visible; }
  18%      { transform: translate(-4px, -8px); opacity: 1; visibility: visible; }
  24%      { transform: translate(0, 2px); opacity: 1; visibility: visible; }
  28%      { transform: translate(-2px, -2px); opacity: 1; visibility: visible; }
  30%      { transform: translate(0, 0); opacity: 1; visibility: visible; }
  31.99%   { opacity: 0; visibility: visible; }
  32%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes cursor-pulse {
  0%, 5%   { transform: translate(-50%, -50%) scale(0.45); opacity: 0; visibility: hidden; }
  5.01%    { transform: translate(-50%, -50%) scale(0.45); opacity: 0; visibility: visible; }
  10%      { transform: translate(-50%, -50%) scale(0.8); opacity: 0.7; visibility: visible; }
  28%      { transform: translate(-50%, -50%) scale(2.4); opacity: 0; visibility: visible; }
  28.01%   { transform: translate(-50%, -50%) scale(2.4); opacity: 0; visibility: hidden; }
  100%     { transform: translate(-50%, -50%) scale(2.4); opacity: 0; visibility: hidden; }
}

.sol-asset.house,
.step-1,
.step-2,
.step-3 {
  filter: drop-shadow(0 12px 22px rgba(13, 18, 48, 0.35));
}

.arrow-curved-right,
.arrow-curved-left,
.arrow-straight-1,
.arrow-straight-2 {
  filter: drop-shadow(0 4px 9px rgba(13, 18, 48, 0.45));
  opacity: 0.95;
}

.sol-asset img {
  width: 100%;
  height: auto;
  display: block;
}

.house {
  top: 2%;
  left: 23%;
  width: 54%;
}

.step-1 {
  top: 55%;
  left: 0%;
  width: 25%;
  cursor: pointer;
}

.step-2 {
  top: 55%;
  left: 37.5%;
  width: 25%;
  cursor: pointer;
}

.step-3 {
  top: 55%;
  left: 75%;
  width: 25%;
  cursor: pointer;
}

.step-1:hover,
.step-2:hover,
.step-3:hover {
  transform: translateY(-5px) scale(1.05);
}

.arrow-curved-right {
  top: 25%;
  left: 78%;
  width: 11%;
  pointer-events: none;
}

.arrow-curved-left {
  left: 11%;
  top: 24%;
  width: 11%;
  transform: scaleX(-1);
  pointer-events: none;
}

.arrow-straight-1 {
  top: 85%;
  left: 26%;
  width: 9%;
  pointer-events: none;
}

.arrow-straight-2 {
  top: 85%;
  left: 62.5%;
  width: 9%;
  pointer-events: none;
}



.feature-card {
  position: relative;
  padding: 32px;
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.feature-card.featured {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  border: none;
}
.solead-description {
  color: var(--primary);
}
.feature-card.featured .feature-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--muted);
  border-radius: 12px;
  margin-bottom: 20px;
}

.feature-card.featured .feature-icon {
  background: rgba(255, 255, 255, 0.2);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.feature-card.featured .feature-icon svg {
  color: white;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.feature-card p {
  font-size: 14px;
  color: var(--muted-foreground);
  margin-bottom: 16px;
}

.feature-card.featured p {
  color: rgba(255, 255, 255, 0.9);
}

.feature-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--muted);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  border-radius: 50px;
}

.solea-process {
  background: white;
  border-radius: 24px;
  padding: 48px;
}

.process-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 48px;
}

.process-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.solea-content{
  display: flex;
  width: 100%;
  height: 600px;
  border-radius: 8px;
  overflow: hidden;
  gap: 16px;
}
.solea-card{
  position: relative;
  flex: 1;
  height: 100%;
  cursor: pointer;
  transition: flex 0.3s ease;
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat ; 
  animation: all 1s ease;
}
.solea-content:hover .solea-card {
    filter: blur(4px);
    justify-content: center;
}

/* Remove blur on hovered one */
.solea-content .solea-card:hover {
    filter: blur(0);
}

.solea-content:hover .solea-card .solea-card-overlay{
    backdrop-filter: blur(0);
}
.solea-content .solea-card:hover  .solea-card-overlay {
    filter: blur(0);
    /* justify-content: flex-start; */

}
.solea-content .solea-card:hover  .solea-card-div {
    display: none;

}
.solea-card-overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  animation: all 1s ease;
  padding: 15px;

}
.solea-card-div{
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid white;
  border-radius: 10px;
  height: 100px;
  width: 300px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  
}
.solea-card-div h3{
  font-size: 25px
}
.solea-card:nth-child(1) .solea-card-div{
  position: absolute;
}
.solea-card:nth-child(2) .solea-card-div{
  position: absolute;
}
.solea-card:nth-child(3) .solea-card-div{
  position: absolute;
}
.solea-card:nth-child(1){
  background-image: url('assets/solps.webp?v=img20260606a');

}
.solea-card:nth-child(2){
  background-color: var(--primary);
  background-image: url('assets/solbat.webp?v=img20260606a');

}
.solea-card:nth-child(3){
  background-image: url('assets/solmo.webp?v=img20260606a');
}
.solea-card:hover{
  flex: 3;
}
.solea-card-content{
  display: flex;
  flex-direction: column;
  gap: 15px;
  opacity: 0;
  transition: all .5s ease;
  color: white;
}
.solea-card-content h2{
  color: var(--third);
  font-size: 20px;
}
.solea-card-ctn{
  display: flex;
  align-items: center;
  gap: 16px;
}
.solea-card-ctn img{
  width: 150px;
}
.solea-content .solea-card:hover  .solea-card-content {
    /* display: flex; */
    flex-direction: column;
    opacity: 1;

}

.solea-card-ctn2{
  display: flex;
  align-items: center;
  gap: 16px;
}
.solea-card-ctn2 img{
  width: 110px;
}

.solea-card-bottom{
  display: flex;
  flex-direction: column;
  border: 2px solid var(--third);
  border-radius: 8px;
  padding: 10px;
  background-color: #0000004b;
}
.solea-card-bottom-row{
  display: flex;
  gap: 16px;
}
.solea-card-bottom-row div{
  width: 170px;
}
.solea-card-bottom-row div h3{
  color: var(--third);
  font-size: 18px;
}
.solea-card-bottom-row p{
  font-size: 13px;
}

.solea-bat p{
  font-size: clamp(10px, 3vw, 16px);
}
.solea-bat img{
  width: 100px;
}
.bold-span{
  font-weight: 800;
  color: var(--third)
}
.bolder{
  font-weight: 800;
}
@media (min-width: 768px) {
  .process-steps {
    flex-direction: row;
    justify-content: center;
  }
}


@media (max-width: 768px) {
  .solea-content{
    display: none;
  }

}


.process-step {
  flex: 1;
  max-width: 280px;
  text-align: center;
}
.process-step img{
  width: 50px;
}
.step-number {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  font-size: 24px;
  font-weight: 700;
  border-radius: 50%;
  margin: 0 auto 16px;
}

.process-step h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.process-step p {
  font-size: 14px;
  color: var(--muted-foreground);
}

.process-connector {
  display: none;
}

@media (min-width: 768px) {
  .process-connector {
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: 2px;
  }
}

/* ========================================
   ADVANTAGES SECTION
   ======================================== */
.nous-container{
  /* Photo de fond desktop pour le slide "Pourquoi nous ?" — convertie
     depuis pkn.webp en WebP qualité 82 : 2.4 Mo → 223 Ko, ×10.8 plus léger.
     background-position: center 75% → la photo est remontée d'un cran
     dans son cadre, on voit davantage le bas de l'image (qui était
     précédemment croppé). */
  background-image: url('assets/pkn.webp?v=img20260606a');
  background-size: cover;
  background-position: center 75%;
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(60px, 9vh, 110px);
}

.advantages-header {
  padding: 0 clamp(20px, 5vw, 80px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto clamp(8px, 1.5vh, 20px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.6vh, 10px);
  position: relative;
  z-index: 4;
}
.advantages .section-badge {
  background-color: transparent;
  color: #ffffff;
  font-size: clamp(24px, 4.4vw, 72px);
  font-weight: 800;
  letter-spacing: clamp(0px, 0.12vw, 1.5px);
  padding: 0;
  width: auto;
  max-width: 100%;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 8px 30px rgba(0, 0, 0, 0.35);
  border-radius: 0;
  box-shadow: none;
  line-height: 1.05;
  white-space: nowrap;
  display: inline-block;
}
@media (max-width: 900px) {
  .advantages .section-badge {
    white-space: normal;
    font-size: clamp(26px, 6.5vw, 44px);
  }
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.advantage-card {
  padding: 32px;
  background: var(--muted);
  border-radius: var(--radius);
  transition: var(--transition);
}

.advantage-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.advantage-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 20px;
}

.advantage-icon svg {
  width: 28px;
  height: 28px;
  color: white;
}
.nous-features{
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  width: 100%;
  padding: 0 clamp(20px, 5vw, 80px);
  max-width: 1400px;
  margin: 0 auto;
  z-index: 4;
}
.nous-feature{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 300px;
}
.nous-feature img{
  height: 100px;
}

.nous-feature p{
  color: var(--muted);
}
.separtor{
  width: 2px;
  height: 100px;
  background: var(--muted);
}
.advantage-icon.green { background: linear-gradient(135deg, #22c55e, #16a34a); }
.advantage-icon.orange { background: linear-gradient(135deg, var(--primary), var(--primary-light)); }
.advantage-icon.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.advantage-icon.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.advantage-icon.teal { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.advantage-icon.red { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.advantage-icon img{
  width: 40px;
}
.advantage-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.advantage-card p {
  font-size: 14px;
  color: var(--muted-foreground);
}

.key-service {
  background: linear-gradient(135deg, var(--foreground) 0%, #2d2d44 100%);
  border-radius: 24px;
  padding: 48px;
}

.key-service-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

@media (min-width: 768px) {
  .key-service-content {
    flex-direction: row;
    text-align: left;
  }
}

.key-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 20px;
  flex-shrink: 0;
}

.key-icon svg {
  width: 40px;
  height: 40px;
  color: white;
}

.key-text {
  flex: 1;
  color: white;
}

.key-text h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.key-text p {
  opacity: 0.8;
}
/* ========================================
   INTERET SECTION
   ======================================== */



/* ========================================
   TESTIMONIALS SECTION
   ======================================== */
.testimonials {
  padding: 100px 0;
  background: var(--muted);
}

.testimonials-header {
  text-align: center;
  margin-bottom: 64px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.testimonial-card {
  padding: 32px;
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: var(--transition);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  color: #fbbf24;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
  color: var(--foreground);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  font-weight: 600;
  border-radius: 50%;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: 600;
}

.author-location {
  font-size: 14px;
  color: var(--muted-foreground);
}

.trust-badges {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.trust-badge {
  text-align: center;
}

.trust-value {
  display: block;
  font-size: 36px;
  font-weight: 700;
  color: var(--primary);
}

.trust-label {
  font-size: 14px;
  color: var(--muted-foreground);
}

/* ========================================
   CONTACT SECTION
   ======================================== */
/* ============================================
   CONTACT SECTION — refonte moderne
   ============================================ */
.contact {
  position: relative;
  /* Photo client en arrière-plan. L'overlay sombre est sur ::after
     pour pouvoir transitionner son opacity selon le remplissage du
     formulaire (cf. JS qui met à jour --overlay-opacity). */
  background: url('assets/contact.webp?v=img20260606a') center / cover no-repeat;
  color: #ffffff;
  padding: clamp(40px, 5vh, 64px) clamp(20px, 4vw, 56px);
  overflow: hidden;
  isolation: isolate;
}
/* Voile sombre dégradé — l'opacité diminue à mesure que l'utilisateur
   remplit le formulaire (de 1 à 0.18 environ, contrôlée par JS via
   la variable --overlay-opacity). */
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(12, 20, 50, 0.85) 0%, rgba(28, 40, 86, 0.72) 55%, rgba(19, 28, 68, 0.88) 100%);
  opacity: var(--overlay-opacity, 1);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0.05, 0.2, 1);
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(255, 255, 255, 0.04) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.04) 95%);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

.contact .section-header {
  /* Titre Contact JUSTE AU-DESSUS du formulaire, aligné à GAUCHE.
     transform: translateY pour DESCENDRE le titre visuellement sans
     affecter la position du formulaire en-dessous. */
  position: relative;
  z-index: 2;
  text-align: left;
  width: 100%;
  max-width: 440px;
  margin: 0 0 10px 0;
  padding: 0 !important;
  justify-self: end;
  transform: translateY(clamp(20px, 3vh, 42px));
}
.contact .section-badge {
  display: inline-block !important;
  background-color: transparent !important;
  /* Même opacité que le formulaire translucide (rgba blanc 0.55). */
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: clamp(26px, 3.8vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  padding: 0 !important;
  width: auto !important;
  margin-bottom: 0 !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  border-radius: 0 !important;
  box-shadow: none !important;
}
.contact .section-description {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.5;
  margin: 0;
}

.contact-container {
  position: relative;
  z-index: 1;
  /* max-width retiré pour que le formulaire puisse coller au bord
     droit de la section (cf. demande "encore plus à droite"). */
  max-width: none;
  width: 100%;
  margin: 0;
}

.contact-grid {
  display: grid;
  /* Formulaire + titre Contact, alignés à droite. La marge top est
     réduite — le titre fournit naturellement l'espace au-dessus du
     formulaire. */
  grid-template-columns: 1fr;
  justify-items: end;
  gap: 0;
  padding: 0;
  max-width: none;
  margin: clamp(80px, 14vh, 160px) 0 0;
}
.contact-grid .contact-form {
  width: 100%;
  max-width: 440px;
}

/* === Texte d'introduction en typographie poster XL à gauche ===
   Bloc vertical élégant, max 500px de large, sans déborder vers le
   centre. Graisse légère, blanc semi-transparent. */
.contact-hero-text {
  position: absolute;
  left: clamp(46px, 4.2vw, 72px);
  top: 30%;
  transform: translateY(-5%);
  z-index: 3;
  /* Largeur libre — chaque ligne dicte sa taille de police pour
     atteindre approximativement la même largeur visuelle. */
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: inherit;
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: rgba(255, 255, 255, 0.62);
  text-align: left;
  pointer-events: none;
}
.contact-hero-text span {
  display: block;
  white-space: nowrap;
}
/* Tailles calibrées pour atteindre ~520px par ligne sans déformer
   les glyphes. */
.contact-hero-text span:nth-child(1) { /* "Notre équipe est à"           18c */
  font-size: clamp(40px, 4.4vw, 66px);
}
.contact-hero-text span:nth-child(2) { /* "votre disposition"            17c */
  /* Bumpé pour que la fin du "n" de "disposition" aligne avec le "à"
     final de la ligne 1 ("Notre équipe est à"). */
  font-size: clamp(44px, 5vw, 75px);
}
.contact-hero-text span:nth-child(3) { /* "pour étudier votre projet"    25c */
  /* Bumpé pour que le "t" de "projet" arrive au niveau du "à" final
     de la ligne 1. */
  font-size: clamp(32px, 3.5vw, 51px);
}
.contact-hero-text span:nth-child(4) { /* "et vous proposer une solution"29c */
  /* Bumpé pour que le "n" final de "solution" arrive au niveau du
     "à" final de la ligne 1. */
  font-size: clamp(27px, 2.95vw, 43px);
}
.contact-hero-text span:nth-child(5) { /* "adaptée à vos besoins."       22c */
  /* Bumpé pour que le "s" final de "besoins" arrive au niveau du
     "à" final de la ligne 1 (le "." dépasse légèrement après). */
  font-size: clamp(35px, 3.85vw, 57px);
}
.contact-hero-text span {
  display: block;
  /* Chaque "ligne" du texte poster reste sur une seule ligne, sinon
     le wrap naturel ferait perdre la composition voulue. */
  white-space: nowrap;
}
/* Mots en gras retirés — on garde la légèreté uniforme (300) sur
   l'ensemble du bloc. */
@media (max-width: 1024px) {
  .contact-hero-text {
    left: clamp(28px, 5vw, 52px);
    top: 26%;
    width: 440px;
    max-width: 440px;
    font-size: clamp(36px, 5.5vw, 56px);
    line-height: 0.96;
  }
}
@media (max-width: 768px) {
  .contact-hero-text {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    max-width: 100%;
    margin: 32px 24px 24px;
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.74);
  }
}

/* Réordonnancement : le FORMULAIRE doit toujours apparaître EN PREMIER,
   le bloc infos en second (sur mobile = empilé sous, sur desktop = à droite).
   Le `order` fonctionne sur les enfants directs d'un grid container. */
.contact-grid .contact-form { order: 1; }
.contact-grid .contact-info { order: 2; }

/* Cartes infos */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-info .info-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-info .info-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(225, 122, 45, 0.45);
  box-shadow: 0 18px 40px -16px rgba(225, 122, 45, 0.35);
}
.contact-info .info-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #e17a2d, #c8651a);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 5px 12px -4px rgba(225, 122, 45, 0.5);
}
.contact-info .info-icon svg {
  width: 18px;
  height: 18px;
  color: #ffffff;
}
.contact-info .info-content h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 6px;
}
.contact-info .info-content p {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 3px;
  line-height: 1.35;
}
.contact-info .info-content span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

/* Formulaire */
.contact-form {
  /* Opacité encore baissée — on voit franchement la photo derrière.
     Le backdrop-blur soutenu garde la lisibilité du texte du form. */
  background: rgba(255, 255, 255, 0.55);
  color: var(--foreground);
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 16px;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 22px 50px -24px rgba(0, 0, 0, 0.50),
    0 6px 16px -8px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}
.form-group {
  margin-bottom: 10px;
}
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 5px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 13px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--foreground);
  background: #fdfcfa;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(107, 107, 123, 0.65);
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: rgba(33, 48, 94, 0.30);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: #e17a2d;
  box-shadow: 0 0 0 4px rgba(225, 122, 45, 0.15);
}
.form-group textarea {
  resize: vertical;
  min-height: 78px;
}
.contact-form .btn-primary {
  background: linear-gradient(135deg, #e17a2d, #c8651a) !important;
  border: none;
  box-shadow: 0 12px 28px -10px rgba(225, 122, 45, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-form .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(225, 122, 45, 0.7);
}
.form-note {
  margin-top: 16px;
  font-size: 11.5px;
  color: var(--muted-foreground);
  text-align: center;
  line-height: 1.5;
}

/* Mobile : formulaire de contact plus compact (moins d'espaces, moins haut). */
@media (max-width: 768px) {
  /* On remonte la photo de fond (on affiche une partie plus basse de
     l'image → elle "remonte" visuellement). Baisse la valeur (ex. 35%)
     pour l'inverse. */
  .contact {
    /* La photo est en paysage dans une section portrait : avec `cover` elle
       couvre pile la hauteur → pas de marge verticale, donc impossible de la
       "remonter". On la zoome un peu (hauteur 125%) pour créer cette marge,
       puis on affiche le BAS de l'image → la photo remonte visuellement.
       Ajuste 125% (plus = plus de marge) et bottom/top pour le sens. */
    background-size: auto 125% !important;
    background-position: center bottom !important;
  }
  /* "Contact" aligné à GAUCHE (comme les champs) au lieu de centré : la
     règle text-align:left n'existait qu'en @media (min-width:768px) = desktop. */
  .contact .section-header {
    text-align: left !important;
    /* Le .section-header est un flex `align-items: center` → c'est LUI qui
       centrait le badge (pas le text-align). On l'aligne à gauche. */
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100%;
    margin: 0 0 2px 0;
    padding: 0 !important;
    /* On descend "Contact" pour le coller au formulaire (translateY ne
       décale que visuellement, sans bouger le formulaire en dessous). */
    transform: translateY(14px) !important;
  }
  .contact .section-badge {
    text-align: left !important;
  }
  .contact-form {
    padding: 14px;
  }
  .form-row {
    gap: 8px;
    margin-bottom: 8px;
  }
  .form-group {
    margin-bottom: 8px;
  }
  .form-group label {
    margin-bottom: 3px;
    font-size: 10.5px;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 8px 11px;
    font-size: 13px;
    border-radius: 9px;
  }
  .form-group textarea {
    min-height: 52px;
  }
  .contact-form .btn-primary {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .form-note {
    margin-top: 8px;
    font-size: 10.5px;
    line-height: 1.4;
  }
}

/* ========================================
   FOOTER
   ======================================== */

/* Ancien .contact-container neutralisé — refonte plus haut */
.footer-container{
   width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  /* Padding réduit pour compacter le footer. */
  padding: 14px 25px;
}
.footer {
  background: var(--foreground);
  color: white;
  /* Padding vertical réduit. */
  padding: 12px 0;
}

.footer-grid {
  /* Passage en GRID 3 colonnes égales : contact à gauche, brand
     centré, social-links à droite. Avec 3 colonnes de même largeur
     (1fr 1fr 1fr), le bloc brand est centré RELATIVEMENT AU FOOTER
     ENTIER et pas seulement à l'espace entre les 2 côtés.
     align-items: start aligne le sommet des 3 colonnes → 1er picto
     social cale au même y que le 1er picto contact. */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 28px;
  /* margin-bottom réduit (48 → 14). */
  margin-bottom: 14px;
}

/* === Bloc contact en petit à GAUCHE du footer ===
   Chaque ligne = picto à gauche (puce ronde orange) + bloc texte
   à droite (label / valeur / sous-mention) — même langage que la
   section Contact, version compacte. */
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  flex-shrink: 0;
  max-width: 310px;
}
.footer-contact__item {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.25;
  text-decoration: none;
  color: inherit;
}
.footer-contact__icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary);
  border-radius: 50%;
  color: #ffffff;
  flex-shrink: 0;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.footer-contact__icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.footer-contact__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.footer-contact__label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.footer-contact__value {
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
}
.footer-contact__sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
.footer-contact__item:hover .footer-contact__icon {
  background: #ffffff;
  color: var(--secondary);
  transform: scale(1.05);
}
.footer-contact__item:hover .footer-contact__value {
  color: var(--secondary);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Plus de flex / max-width : .footer-brand est la colonne centrale
     du grid 1fr 1fr 1fr du .footer-grid → automatiquement centré
     dans le footer entier. */
  /* La marge entre éléments du brand resserrée. */
  gap: 10px;
}

.footer-brand .logo {
  /* Réduit (24 → 6). */
  margin-bottom: 6px;
}

/* Description CENTRÉE + réseaux sociaux en COLONNE à DROITE.
   Le .footer-row reste flex row mais la description prend la place
   centrale et les sociaux s'empilent verticalement à droite. */
.footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-brand .logo-icon {
  color: var(--primary);
}

.footer-brand .logo-name {
  color: white;
}

.footer-brand .logo-tagline {
  color: rgba(255, 255, 255, 0.6);
}

.footer-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  /* margin-bottom retiré : description et social-links sont côte à
     côte dans .footer-row, plus besoin d'espace vertical. */
  margin: 0;
  line-height: 1.45;
  /* max-width assez large pour que la 2e phrase tienne sur une ligne ;
     le <br> dans le HTML coupe explicitement entre les 2 phrases. */
  max-width: 720px;
  white-space: normal;
  /* Texte centré horizontalement. */
  text-align: center;
}

.social-links {
  /* Empilés VERTICALEMENT, dans la 3e colonne du grid, alignés à
     DROITE de cette colonne via justify-self: end. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-self: end;
}

.social-links a {
  /* Pictos réduits pour gagner de la place verticale dans le footer. */
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Puces orange CAPEO — alignées avec les pictos contact à gauche. */
  background: var(--secondary);
  color: #ffffff;
  border-radius: 50%;
  transition: var(--transition);
}

.social-links a:hover {
  background: #ffffff;
  color: var(--secondary);
  transform: scale(1.05);
}

.social-links svg {
  width: 18px;
  height: 18px;
}

.footer-links h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--primary);
}

.footer-bottom {
  /* padding réduit (24 → 10) pour aplatir le footer. */
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer-bottom p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
.white-text {
  color: white;
}

.reveal {
  opacity: 0;
  transform: translateY(50px) scale(1.5);
  transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Variants */
.reveal-left {
  transform: translateX(-80px);
}
.reveal-right {
  transform: translateX(80px);
}

.reveal.visible.reveal-left,
.reveal.visible.reveal-right {
  transform: translateX(0);
}

.panel {
  justify-content: flex-start;
  background-image: url('assets/nous1.webp?v=img20260606a');
  background-size: cover;
  background-position: center;
  /* width: 100%; */
}
.onduleur {
  justify-content: flex-end;
  background-image: url('assets/bg2.webp?v=img20260606a');
  background-size: cover;
  background-position: center;
  /* width: 100%; */
}
.panel, .onduleur {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 10%;
}
.overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
}

.sp-content {
  position: relative;
  max-width: 600px;
  z-index: 2;
}

.title.fixed {
  position: fixed;
  top: 100px;
  right: 0;
  left: auto;
  z-index: 999;
  padding: 0 40px;
  transition: all 0.8s cubic-bezier(.2,.65,.3,1);
  font-size: 60px;
  color: var(--muted);
  padding-bottom: 5px;
  background-color: #4c464645;
  border-radius: 35px 0 0 35px;
  backdrop-filter: blur(5px);
}

.title.fixed.left {
  left: 0;
  right: auto;
  border-radius: 0 35px 35px 0;
}

.text-block {
  margin-bottom: 40px;
}

.text-block h2 {
  color: var(--primary);
  margin-bottom: 10px;
  font-size: 40px;
}

.text-block p {
  color: var(--muted);
  line-height: 1.7;
}

.text-block ul {
  margin-top: 10px;
  padding-left: 20px;
}

.text-block li {
  margin-bottom: 8px;
  transition: var(--transition);
}

/* Hover effet stylé */
.text-block li:hover {
  transform: translateX(10px);
  color: var(--color-secondary);
}

.animate {
  opacity: 0;
  transform: translateY(60px) scale(0.98);
  filter: blur(10px);
  transition: all 1s cubic-bezier(.2,.65,.3,1);
}

.animate.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Delay classes */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.image-card {
  margin-top: 40px;
  overflow: hidden;
  border-radius: 20px;
  transform: scale(0.95);
  transition: var(--transition);
}

.image-card img {
  width: 600px;
  display: block;
  transition: transform 1.2s ease;
}

.image-card:hover img {
  transform: scale(1.1);
}

.image-card:hover {
  transform: scale(1);
}


.simulator-iframe{
  width: max(80%, 599px);
  height: 90%;
  background-color: white;
  border: none;
  border-radius: 10px;
  margin-right: 10%;
  overflow: hidden;
  z-index: 2;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* Dedicated simulator page layout */
.simulator-page {
  position: relative;
  min-height: 100vh;
  padding: 0 clamp(16px, 4vw, 56px) clamp(20px, 3vh, 40px);
  background: linear-gradient(160deg, #fdfcfa 0%, #f5f4f0 60%, #ece9e0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.simulator-shell {
  margin-top: 0 !important;
}

/* Decorative background */
.simulator-page-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.simulator-page-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
.simulator-page-blob.blob-1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(225, 122, 45, 0.45), transparent 70%);
  top: -120px;
  right: -120px;
}
.simulator-page-blob.blob-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(33, 48, 94, 0.30), transparent 70%);
  bottom: -180px;
  left: -180px;
}
.simulator-page-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(33, 48, 94, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 48, 94, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Iframe shell — frosted glass card */
.simulator-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  height: min(90vh, 920px);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 30px 80px -24px rgba(33, 48, 94, 0.30),
    0 12px 32px -12px rgba(33, 48, 94, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.simulator-iframe-page {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: transparent;
}
.simulator-badge-mask {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(150px, 18%, 230px);
  height: clamp(52px, 7vh, 76px);
  background: #ffffff;
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 768px) {
  .simulator-page {
    padding: clamp(90px, 12vh, 110px) 10px 28px;
  }
  .simulator-shell {
    height: 82vh;
    border-radius: 16px;
  }
  .simulator-page-blob.blob-1 { width: 320px; height: 320px; }
  .simulator-page-blob.blob-2 { width: 360px; height: 360px; }
}

.simulator-bg{
  background-image: url('assets/sim.webp?v=img20260606a');
  height: 78vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.simulator-bg img{
  height: 100%;
}

section {
  scroll-margin-top: 80px;
}main {
  margin-top: var(--nav-height);
}

main section {
  scroll-margin-top: var(--nav-height);
}
.section-badge-page{
  display: inline-block;
  color: white;
  background-color:   var(--primary);
  font-size: clamp(24px, 6vw, 70px);
  font-weight: 800;
  width: 100%;
  letter-spacing: 5px;
}

/* ============================================================
   STOCKAGE PAGE — Minimaliste, éditorial
   Image dominante. Pas de cartes. Pas de pictos. Espace.
   Variables scopées : la palette CAPEO ne fuit pas ailleurs.
   ============================================================ */
.storage-main {
  /* Annule le margin-top de <main> : le hero démarre sous le header */
  margin-top: calc(-1 * max(var(--nav-height), 72px));
  --st-night: #071827;
  --st-deep:  #0A2540;
  --st-solar: #F28C28;
  --st-cream: #F7F5EF;
  --st-ink:   #0F2438;
  --st-muted: #5A6B7C;
  --st-rule:  rgba(15, 36, 56, 0.10);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--st-ink);
  background: #fff;
}

/* ---------- 1. HERO — image plein écran, texte sobre ---------- */
.storage-hero {
  /* Chemin de l'image hero exposé comme variable pour rester ajustable */
  --storage-bg: url('assets/PARTICULIER-VIERGE PHOTO.webp?v=img20260606a');
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  /* Adaptive : 100vh = hauteur de l'écran user. Le `+ var(--nav-height)`
     compense le `margin-top: -72px` appliqué sur le parent `.storage-main`
     (qui fait remonter le hero sous le header fixe). Résultat : le hero
     remplit EXACTEMENT la fenêtre visible, du haut au bas, sans bande. */
  height: calc(100vh + max(var(--nav-height, 72px), 72px));
  height: calc(100dvh + max(var(--nav-height, 72px), 72px));
  min-height: 560px;
  background-color: #0a1f3a;
}

/* Image en ::before, avec un léger zoom lent qui respire.
   Mirror horizontal : scaleX(-1) appliqué pour inverser gauche/droite
   (la nuit passe à droite, le jour à gauche). */
.storage-hero::before {
  display: none !important;
}

/* Ambiance globale: gérée directement dans le SVG */
.storage-hero::after {
  display: none !important;
}

/* Superposition de premier plan: gérée directement dans le SVG */
.storage-hero__overlay {
  display: none !important;
}

.storage-hero__mobile-btn {
  display: none;
}

/* Keyframe : compose le mirror horizontal (scaleX = -1) avec le zoom
   lent qui passe de 1 à 1.035. Toutes les couches qui utilisent cette
   animation sont donc inversées gauche/droite, sauf le texte du caption
   qui n'a pas cette animation. */
@keyframes storageSlowZoom {
  from { transform: scale(-1, 1);         }
  to   { transform: scale(-1.035, 1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .storage-hero::before {
    animation: none;
  }
}

/* ============================================================
   Hero — adaptation MOBILE
   - Image de fond et overlay remplacés par les variantes portrait
   - Mirror désactivé (les visuels mobile sont déjà à la bonne
     orientation : nuit à gauche, jour à droite, batterie au centre).
   - SVG d'énergie + labels + carte "Louez" cachés : le viewBox
     1600×900 du SVG est conçu pour le format paysage, il serait
     totalement déplacé sur un écran portrait.
   ============================================================ */
/* SVG mobile : masqué par défaut, affiché uniquement sous 768px */
.storage-energy-svg--mobile {
  display: none;
}

@media (max-width: 768px) {
  .storage-hero {
    --storage-bg: url('assets/mobile/PARTICULIER-VIERGE PHOTO-mobile.webp?v=img20260606a');
    height: auto;
    min-height: 110vh;
  }
  .storage-hero::before {
    animation: storageSlowZoomMobile 18s ease-in-out infinite alternate;
    transform: scale(-1, 1);
  }
  .storage-hero::after {
    transform: scale(-1, 1);
    background:
      linear-gradient(180deg,
        rgba(7, 24, 39, 0.45) 0%,
        rgba(7, 24, 39, 0.20) 55%,
        rgba(7, 24, 39, 0.00) 100%);
  }
  .storage-hero__overlay {
    background-image: url('assets/mobile/PARTICULIER-VIERGE%20PHOTO-ext-mobile.webp?v=img20260606a');
    animation: storageSlowZoomMobile 18s ease-in-out infinite alternate;
    transform: scale(-1, 1);
  }
  /* SVG circuits mobile : position:absolute comme desktop,
     le hero a min-height:110vh donc le conteneur a une hauteur. */
  .storage-energy-flow {
    position: absolute !important;
    inset: 0 !important;
    transform: scale(1, 1) !important;
    animation: none !important;
  }
  .storage-energy-svg:not(.storage-energy-svg--mobile) {
    display: none;
  }
  .storage-energy-svg--mobile {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Labels été/hiver : restent masqués dans le hero portrait. */
  .storage-hero__line-label {
    display: none;
  }
  
  /* Carte flottante affichée en bas du hero sur mobile */
  .storage-hero__rental-card.offer-card {
    display: block !important;
    position: absolute !important;
    bottom: 24px !important;
    top: auto !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 6 !important;
    box-sizing: border-box !important;

    background:
      radial-gradient(
        circle at 18% 10%,
        rgba(74, 154, 220, 0.26),
        transparent 34%
      ),
      linear-gradient(
        135deg,
        rgba(8, 48, 82, 0.80),
        rgba(4, 18, 42, 0.88) 52%,
        rgba(2, 9, 24, 0.92)
      ) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(190, 225, 255, 0.24) !important;
    box-shadow:
      0 24px 70px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    border-radius: 28px !important;
    padding: 24px 20px !important;
  }

  .offer-card h2 {
    font-size: clamp(22px, 5vw, 28px) !important;
    margin-bottom: 6px !important;
  }

  .offer-card .subtitle {
    font-size: clamp(13px, 3.2vw, 15px) !important;
    margin: 6px auto 18px !important;
  }

  .offer-badges {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .offer-badge {
    min-height: 72px !important;
    padding: 12px 6px !important;
    border-radius: 16px !important;
  }

  .offer-badge strong {
    font-size: clamp(12px, 3vw, 14px) !important;
  }

  .offer-badge span {
    font-size: clamp(10px, 2.4vw, 11px) !important;
    margin-top: 3px !important;
  }
}

/* Keyframe mobile : zoom lent sans décalage vertical pour ne pas créer de bande blanche */
@keyframes storageSlowZoomMobile {
  from { transform: scale(1.02, 1.02); }
  to   { transform: scale(1.05, 1.05); }
}

/* ============================================================
   MOBILE — réduction de l'épaisseur des lignes ET de la taille
   des flèches uniquement sur le SVG portrait (viewBox 400×660).
   Le viewBox mobile est ~4× plus petit que le desktop (1600×900),
   donc les mêmes stroke-width et triangles paraissent ~3× plus
   gros visuellement. On compense ici.
   ============================================================ */
/* Lignes mobile : un peu plus fines que desktop (4/5 au lieu de 5/6)
   ET on retire les filtres de glow qui, à cette échelle réduite,
   diluaient complètement le tracé (blur 3-7 viewBox units sur une
   ligne de 4 = presque invisible). On garde la couleur saturée et
   l'opacité d'origine, ça reste lisible sans glow. */
.storage-energy-svg--mobile .storage-flow-line--base {
  stroke-width: 2.5;
  opacity: 0.75;
  filter: none;
}
.storage-energy-svg--mobile .storage-flow-line--active {
  stroke-width: 3;
  filter: none;
}
.storage-energy-svg--mobile .storage-flow-line--orange.storage-flow-line--base {
  stroke-width: 2.5;
  opacity: 0.75;
}
.storage-energy-svg--mobile .storage-flow-line--orange.storage-flow-line--active {
  stroke-width: 3;
  stroke-dasharray: 30 72;
  animation: flowOrangeMobile 3.2s linear infinite;
}

@keyframes flowOrangeMobile {
  from { stroke-dashoffset: 306; }
  to   { stroke-dashoffset: 0;   }
}

/* Sweeps verts SÉQUENTIELS sur mobile : main (picto 3) fire en premier,
   branche (picto 2) avec 1/3 de cycle de retard, branche-2 (picto 1) avec
   2/3 de cycle. Donne la sensation que l'énergie descend la trunk, puis
   se déverse dans les 3 pictos l'un après l'autre, plutôt que tous en
   même temps comme sur desktop. */
.storage-energy-svg--mobile .storage-flow-line--green.storage-flow-line--branch.storage-flow-line--active,
.storage-energy-svg--mobile .storage-flow-line--blue.storage-flow-line--branch.storage-flow-line--active {
  animation-delay: -1.27s;
}
.storage-energy-svg--mobile .storage-flow-line--green.storage-flow-line--branch-2.storage-flow-line--active,
.storage-energy-svg--mobile .storage-flow-line--blue.storage-flow-line--branch-2.storage-flow-line--active {
  animation-delay: -2.54s;
}

/* Icône battery-cloud sur mobile : la keyframe batteryPulse desktop
   compose un scale(-1, 1) qui contre le mirror du parent .storage-energy-flow.
   Sur mobile le parent n'est PAS mirroré, donc ce contre-mirror retourne
   l'icône (battery à droite au lieu de gauche, "MyBattery" en miroir).
   On remplace par une animation mobile sans inversion horizontale. */
.storage-energy-svg--mobile .storage-flow-battery {
  animation-name: batteryPulseMobile;
}

@keyframes batteryPulseMobile {
  0%, 38% {
    transform: scale(1, 1);
    filter: drop-shadow(0 4px 12px rgba(33, 150, 243, 0.30));
  }
  47% {
    transform: scale(1.08, 1.08);
    filter:
      drop-shadow(0 0 36px rgba(33, 150, 243, 0.95))
      drop-shadow(0 0 14px rgba(33, 150, 243, 0.70));
  }
  62% {
    transform: scale(1, 1);
    filter: drop-shadow(0 4px 12px rgba(33, 150, 243, 0.30));
  }
  100% {
    transform: scale(1, 1);
    filter: drop-shadow(0 4px 12px rgba(33, 150, 243, 0.30));
  }
}

/* Flèches mobiles : on rejoue l'animation directionnelle en
   intégrant un scale(0.45) à chaque keyframe, ce qui réduit la
   taille de chaque triangle sans perturber le mouvement existant.
   On référence des animations distinctes (...Mobile) pour ne
   pas écraser celles du desktop. */
.storage-energy-svg--mobile .storage-flow-arrow--down {
  animation-name: arrowFlowDownMobile;
}
.storage-energy-svg--mobile .storage-flow-arrow--up {
  animation-name: arrowFlowUpMobile;
}
.storage-energy-svg--mobile .storage-flow-arrow--left {
  animation-name: arrowFlowLeftMobile;
}
.storage-energy-svg--mobile .storage-flow-arrow--right {
  animation-name: arrowFlowRightMobile;
}
/* Drop-shadow plus discret aussi (moins de halo sur petite échelle). */
.storage-energy-svg--mobile .storage-flow-arrow {
  filter: drop-shadow(0 0 3px currentColor);
}

/* Les flèches OSCILLENT en direction (1.5px) + opacité. Grâce au
   transform-origin direction-spécifique (cf. règles ci-dessous), le
   scale(0.45) garde la base de la flèche pile sur la ligne, et avec
   la stroke-linecap round des lignes l'oscillation de ±1.5px ne crée
   pas d'écart visible — la flèche semble "respirer" sur la ligne. */
@keyframes arrowFlowDownMobile {
  0%, 100% { transform: translateY(-1.5px) scale(0.45); opacity: 0.55; }
  50%      { transform: translateY( 1.5px) scale(0.45); opacity: 1;    }
}
@keyframes arrowFlowUpMobile {
  0%, 100% { transform: translateY( 1.5px) scale(0.45); opacity: 0.55; }
  50%      { transform: translateY(-1.5px) scale(0.45); opacity: 1;    }
}
@keyframes arrowFlowLeftMobile {
  0%, 100% { transform: translateX( 1.5px) scale(0.45); opacity: 0.55; }
  50%      { transform: translateX(-1.5px) scale(0.45); opacity: 1;    }
}
@keyframes arrowFlowRightMobile {
  0%, 100% { transform: translateX(-1.5px) scale(0.45); opacity: 0.55; }
  50%      { transform: translateX( 1.5px) scale(0.45); opacity: 1;    }
}

/* Transform-origin direction-spécifique en mobile : la flèche scale
   vers la base (côté ligne) au lieu du centre, évitant l'écart. */
.storage-energy-svg--mobile .storage-flow-arrow--up {
  transform-origin: center bottom !important;
}
.storage-energy-svg--mobile .storage-flow-arrow--down {
  transform-origin: center top !important;
}
.storage-energy-svg--mobile .storage-flow-arrow--left {
  transform-origin: right center !important;
}
.storage-energy-svg--mobile .storage-flow-arrow--right {
  transform-origin: left center !important;
}



/* Cloud icon (mobile uniquement) : drop-shadow subtil pour le faire
   ressortir sur le ciel de la photo nuit/jour. */
.storage-flow-cloud {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.40))
          drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
}

/* Halo bleu du cloud : pulse en phase avec le sweep bleu (même
   animation que .storage-flow-battery-halo, qui est déjà calée
   sur l'arrivée du flux bleu). transform-box: fill-box pour que
   le scale soit centré sur le cercle lui-même (sinon SVG scalerait
   depuis (0,0)). */
.storage-flow-cloud-halo {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.55;
  animation: cloudHaloPulse 3.6s ease-in-out infinite;
}

@keyframes cloudHaloPulse {
  0%, 100% { opacity: 0.30; transform: scale(0.92); }
  45%      { opacity: 0.75; transform: scale(1.10); }
  60%      { opacity: 0.55; transform: scale(1.00); }
}

/* ============================================================
   Fléchage SVG animé — reproduit les flèches lumineuses de la photo
   ------------------------------------------------------------ */
.storage-energy-flow {
  position: absolute;
  inset: 0;
  z-index: 3; /* au-dessus du ::after, sous le caption */
  pointer-events: none;
  /* Suit le même zoom + mirror que ::before pour rester aligné. */
  transform: scale(-1, 1);
  animation: storageSlowZoom 18s ease-in-out infinite alternate;
}

.storage-energy-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.storage-flow-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.storage-flow-line--base {
  stroke-width: 5;
  opacity: 0.55;
}

.storage-flow-line--active {
  stroke-width: 6;
  opacity: 0.95;
  stroke-dasharray: 70 760;
  stroke-dashoffset: 0;
}

.storage-flow-line--orange {
  /* Jaune fluo / néon : très saturé pour bien ressortir sur l'image
     de fond sombre. Le filtre softGlowOrange (double flou) rajoute un
     halo lumineux jaune autour du tracé.
     (Le nom de la classe reste --orange pour compat, mais la couleur
     est désormais un jaune néon.) */
  stroke: #FFE100;
  filter: url(#softGlowOrange);
}

.storage-flow-line--orange.storage-flow-line--base {
  opacity: 0.55;
  stroke-width: 5;
}

/* Sweep actif : jaune plus clair, opacité 1, mêmes épaisseurs que les
   autres circuits (héritées de .storage-flow-line--active). */
.storage-flow-line--orange.storage-flow-line--active {
  stroke: #FFF59D;
  opacity: 1;
  stroke-dasharray: 60 194;
}

.storage-flow-line--green {
  stroke: #8BC34A;
  filter: url(#softGlowGreen);
}

.storage-flow-line--blue {
  stroke: #2196F3;
  filter: url(#softGlowBlue);
}

.storage-flow-line--pink {
  /* Rose néon : cloud → consommation, en bas du hero. */
  stroke: #E91E63;
  filter: url(#softGlowPink);
}

.storage-flow-line--orange.storage-flow-line--active {
  animation: flowOrange 3.2s linear infinite;
}

.storage-flow-line--green.storage-flow-line--active {
  animation: flowGreen 3.8s linear infinite;
}

.storage-flow-line--blue.storage-flow-line--active {
  animation: flowBlue 3.4s linear infinite;
}

.storage-flow-line--pink.storage-flow-line--active {
  animation: flowPink 3.6s linear infinite;
}

.storage-flow-arrow {
  filter: drop-shadow(0 0 6px currentColor);
  transform-box: fill-box;
  transform-origin: center;
}

/* Mouvement directionnel : chaque flèche oscille dans le sens du flux */
.storage-flow-arrow--down {
  animation: arrowFlowDown 1.3s ease-in-out infinite;
}
.storage-flow-arrow--left {
  animation: arrowFlowLeft 1.3s ease-in-out infinite;
}
.storage-flow-arrow--right {
  animation: arrowFlowRight 1.3s ease-in-out infinite;
}
.storage-flow-arrow--up {
  animation: arrowFlowUp 1.3s ease-in-out infinite;
}

/* Légers décalages de phase pour ne pas battre à l'unisson */
.storage-flow-arrow--phase-1 { animation-delay: -0.55s; }
.storage-flow-arrow--phase-2 { animation-delay: -0.20s; }
.storage-flow-arrow--phase-3 { animation-delay: -1.00s; }
.storage-flow-arrow--green.storage-flow-arrow--left { animation-delay: -0.40s; }
.storage-flow-arrow--green.storage-flow-arrow--down { animation-delay: -0.80s; }
/* Sync des flèches bleues (montantes) — même principe que le vert
   pour neutraliser les décalages phase-2 / phase-3 (spécificité 2 > 1). */
.storage-flow-arrow--blue.storage-flow-arrow--up { animation-delay: -0.30s; }

/* Branches vertes secondaire et tertiaire — sweeps désynchronisés
   du tracé principal pour donner un effet de relais. */
.storage-flow-line--green.storage-flow-line--branch.storage-flow-line--active   { animation-delay: -1.9s; }
.storage-flow-line--green.storage-flow-line--branch-2.storage-flow-line--active { animation-delay: -2.85s; }

/* Branches roses : même principe mais avec leur propre tempo basé sur
   le cycle 3.6s de la ligne rose principale. */
.storage-flow-line--pink.storage-flow-line--branch.storage-flow-line--active   { animation-delay: -1.8s; }
.storage-flow-line--pink.storage-flow-line--branch-2.storage-flow-line--active { animation-delay: -2.7s; }

.storage-flow-arrow--orange {
  fill: #FFE100;
  color: #FFE100;
  filter: drop-shadow(0 0 10px #FFE100) drop-shadow(0 0 4px #FFF59D);
}

.storage-flow-arrow--green {
  fill: #8BC34A;
  color: #8BC34A;
}

.storage-flow-arrow--blue {
  fill: #2196F3;
  color: #2196F3;
}

.storage-flow-arrow--pink {
  fill: #E91E63;
  color: #E91E63;
  filter: drop-shadow(0 0 8px #E91E63) drop-shadow(0 0 3px #FF6B9D);
}

@keyframes arrowFlowDown {
  0%, 100% { transform: translateY(-5px); opacity: 0.55; }
  50%      { transform: translateY( 5px); opacity: 1;    }
}

/* Picto Éclairage — disque vert avec halo doux.
   Trois variantes (main / branch / branch-2) reçoivent une animation
   "pulse + glow" synchronisée avec l'arrivée du flux lumineux vert
   au bout de leur ligne respective (animation flowGreen 3.8s). */
.storage-flow-pin {
  filter: drop-shadow(0 4px 14px rgba(255, 225, 0, 0.45));
  transform-box: fill-box;
  transform-origin: center;
}

/* Picto sur la ligne principale (Éclairage) — sweep arrive ~65 % du cycle */
.storage-flow-pin--main {
  animation: pinGreenPulseMain 3.8s ease-in-out infinite;
}

/* Picto sur la branche secondaire (Électroménager) — ligne décalée -1.9s,
   sweep arrive plus tôt (chemin plus court). On garde le même décalage que
   la ligne pour rester en phase. */
.storage-flow-pin--branch {
  animation: pinGreenPulseBranch 3.8s ease-in-out infinite;
  animation-delay: -1.9s;
}

/* Picto sur la branche tertiaire (Chauffage) — ligne décalée -2.85s. */
.storage-flow-pin--branch-2 {
  animation: pinGreenPulseBranch 3.8s ease-in-out infinite;
  animation-delay: -2.85s;
}

/* Pulse picto principal : peak à 65 % (arrivée du sweep sur la ligne longue) */
@keyframes pinGreenPulseMain {
  0%, 55% {
    transform: scale(1);
    filter: drop-shadow(0 4px 14px rgba(255, 225, 0, 0.45));
  }
  65% {
    transform: scale(1.08);
    filter:
      drop-shadow(0 0 6px rgba(255, 225, 0, 1))
      drop-shadow(0 0 3px rgba(255, 225, 0, 1))
      drop-shadow(0 0 1px rgba(255, 225, 0, 1));
  }
  78% {
    transform: scale(1);
    filter: drop-shadow(0 4px 14px rgba(255, 225, 0, 0.45));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 4px 14px rgba(255, 225, 0, 0.45));
  }
}

/* Pulse pictos de branches : peak à 27 % (chemins plus courts → arrivée
   du sweep plus tôt dans le cycle de chaque ligne). */
@keyframes pinGreenPulseBranch {
  0%, 17% {
    transform: scale(1);
    filter: drop-shadow(0 4px 14px rgba(255, 225, 0, 0.45));
  }
  27% {
    transform: scale(1.08);
    filter:
      drop-shadow(0 0 6px rgba(255, 225, 0, 1))
      drop-shadow(0 0 3px rgba(255, 225, 0, 1))
      drop-shadow(0 0 1px rgba(255, 225, 0, 1));
  }
  40% {
    transform: scale(1);
    filter: drop-shadow(0 4px 14px rgba(255, 225, 0, 0.45));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 4px 14px rgba(255, 225, 0, 0.45));
  }
}

/* Halo individuel SVG natif placé derrière chaque picto vert. Chaque
   halo pulse en phase avec l'arrivée du sweep vert sur SA ligne :
   - --main      : ligne principale, peak ~65 % du cycle
   - --branch    : branche, delay -1.9s, peak ~27 % du cycle local
   - --branch-2  : branche tertiaire, delay -2.85s, peak ~27 % */
.storage-flow-pin-halo {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.storage-flow-pin-halo--main {
  animation: pinHaloPulseMain 3.8s ease-in-out infinite;
}

.storage-flow-pin-halo--branch {
  animation: pinHaloPulseBranch 3.8s ease-in-out infinite;
  animation-delay: -1.9s;
}

.storage-flow-pin-halo--branch-2 {
  animation: pinHaloPulseBranch 3.8s ease-in-out infinite;
  animation-delay: -2.85s;
}

@keyframes pinHaloPulseMain {
  0%, 55% {
    opacity: 0;
    transform: scale(0.45);
  }
  65% {
    opacity: 1;
    transform: scale(1.15);
  }
  78% {
    opacity: 0;
    transform: scale(0.45);
  }
  100% {
    opacity: 0;
    transform: scale(0.45);
  }
}

@keyframes pinHaloPulseBranch {
  0%, 17% {
    opacity: 0;
    transform: scale(0.45);
  }
  27% {
    opacity: 1;
    transform: scale(1.15);
  }
  40% {
    opacity: 0;
    transform: scale(0.45);
  }
  100% {
    opacity: 0;
    transform: scale(0.45);
  }
}

/* Icône MyBattery à droite du circuit bleu —
   pulse + halo bleu synchronisés avec l'arrivée du sweep bleu (flowBlue).
   Peak du pulse à 47 % du cycle, qui coïncide avec le moment où la
   lueur bleue atteint l'extrémité de la ligne. */
.storage-flow-battery {
  transform-box: fill-box;
  transform-origin: center;
  animation: batteryPulse 3.4s ease-in-out infinite;
}

/* Halo bleu SVG natif derrière la batterie — pulse synchronisé avec
   batteryPulse (peak à 47 % du cycle 3.4s). Plus visible qu'un simple
   drop-shadow CSS, car rendu en SVG sur fond sombre du hero. */
.storage-flow-battery-halo {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.30;
  animation: batteryHaloPulse 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes batteryHaloPulse {
  0%, 38% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  47% {
    opacity: 0.78;
    transform: scale(1.14);
  }
  62% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
}

/* Halo chaud sur la fenêtre éclairée de la lucarne. Pulse lent et
   asymétrique pour évoquer une flamme / lumière incandescente qui
   respire (cycle plus long que les autres halos, jamais éteint). */
.storage-flow-window-halo {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.55;
  mix-blend-mode: screen; /* fusion lumineuse plutôt que recouvrement */
  pointer-events: none;
  animation: windowLightPulse 4.6s ease-in-out infinite;
}

@keyframes windowLightPulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.92);
  }
  35% {
    opacity: 0.85;
    transform: scale(1.08);
  }
  55% {
    opacity: 0.65;
    transform: scale(0.98);
  }
  75% {
    opacity: 0.80;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .storage-flow-window-halo {
    animation: none;
    opacity: 0.65;
  }
}

/* Le hero parent est entièrement mirroré (scaleX(-1)), or on veut que
   l'icône MyBattery garde son orientation normale (cloud à gauche,
   "Battery" lisible à droite). Le scale(-1, …) ici compose un 2e mirror
   horizontal qui annule celui du parent, tout en conservant le pulse
   (scale 1 → 1.08). */
@keyframes batteryPulse {
  0%, 38% {
    transform: scale(-1, 1);
    filter: drop-shadow(0 4px 12px rgba(33, 150, 243, 0.30));
  }
  47% {
    transform: scale(-1.08, 1.08);
    filter:
      drop-shadow(0 0 36px rgba(33, 150, 243, 0.95))
      drop-shadow(0 0 14px rgba(33, 150, 243, 0.70));
  }
  62% {
    transform: scale(-1, 1);
    filter: drop-shadow(0 4px 12px rgba(33, 150, 243, 0.30));
  }
  100% {
    transform: scale(-1, 1);
    filter: drop-shadow(0 4px 12px rgba(33, 150, 243, 0.30));
  }
}

@keyframes arrowFlowLeft {
  0%, 100% { transform: translateX( 5px); opacity: 0.55; }
  50%      { transform: translateX(-5px); opacity: 1;    }
}

@keyframes arrowFlowUp {
  0%, 100% { transform: translateY( 5px); opacity: 0.55; }
  50%      { transform: translateY(-5px); opacity: 1;    }
}

@keyframes arrowFlowRight {
  0%, 100% { transform: translateX(-5px); opacity: 0.55; }
  50%      { transform: translateX( 5px); opacity: 1;    }
}

@keyframes flowOrange {
  from { stroke-dashoffset: 254; }
  to   { stroke-dashoffset: 0;   }
}

@keyframes flowGreen {
  from { stroke-dashoffset: 760; }
  to   { stroke-dashoffset: 0;   }
}

@keyframes flowBlue {
  from { stroke-dashoffset: 760; }
  to   { stroke-dashoffset: 0;   }
}

@keyframes flowPink {
  from { stroke-dashoffset: 760; }
  to   { stroke-dashoffset: 0;   }
}

@media (prefers-reduced-motion: reduce) {
  .storage-flow-line--active {
    animation: none;
  }
  .storage-energy-flow {
    animation: none;
  }
  .storage-flow-arrow,
  .storage-flow-arrow--down,
  .storage-flow-arrow--left,
  .storage-flow-arrow--right {
    animation: none;
    transform: none;
    opacity: 0.95;
  }
  .storage-flow-battery {
    animation: none;
    /* Mirror conservé pour compenser le scaleX(-1) du parent. */
    transform: scale(-1, 1);
    filter: drop-shadow(0 4px 18px rgba(33, 150, 243, 0.45));
  }
  .storage-flow-battery-halo {
    animation: none;
    transform: none;
    opacity: 0.55;
  }
  .storage-flow-pin--main,
  .storage-flow-pin--branch,
  .storage-flow-pin--branch-2 {
    animation: none;
    transform: none;
    filter: drop-shadow(0 4px 14px rgba(255, 225, 0, 0.45));
  }
  .storage-flow-pin-halo,
  .storage-flow-pin-halo--main,
  .storage-flow-pin-halo--branch,
  .storage-flow-pin-halo--branch-2 {
    animation: none;
    transform: none;
    opacity: 0.30;
  }
}

/* ----------- Carte "Louez vos panneaux" (offer-card) -----------
   Flip 3D au survol : .offer-card porte le `perspective` et le
   positionnement, .card-inner porte la rotation Y. Chaque face
   (.card-front / .card-hover) a son propre background "glass" et
   sa propre orientation (front=0°, hover=180°). */
.storage-hero__rental-card.offer-card {
  position: absolute;
  z-index: 6; /* au-dessus du caption (5) et de l'overlay (4) */
  top: clamp(290px, 38vh, 410px);
  /* Inversé : la carte "Louez vos panneaux" passe à GAUCHE. */
  left: clamp(20px, 4vw, 60px);
  right: auto;
  width: clamp(280px, 25vw, 340px);
  /* Le wrapper ne porte plus de fond / bordure / shadow : ils sont
     déplacés sur chaque face pour que le flip 3D fonctionne. */
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
  perspective: 1400px;
  /* Hauteur minimale calculée pour contenir la plus grande des deux
     faces — sinon le wrapper s'effondre quand on passe à l'absolute. */
  min-height: 360px;
}

/* Lien englobant : remplit toute la carte, perd les styles de lien
   par défaut, et reste le porteur du focus clavier. */
.offer-card__link {
  display: block;
  width: 100%;
  min-height: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 28px;
  outline-offset: 4px;
}

.offer-card__link:focus-visible {
  outline: 3px solid #ffd94d;
}

/* Flipper : tourne autour de l'axe Y au hover. Garde l'espace 3D des
   enfants grâce à preserve-3d. */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.4, 0.05, 0.2, 1);
}

/* Le flip est déclenché aussi bien par le hover sur la carte que
   par le focus clavier sur le lien (accessibilité). */
.storage-hero__rental-card.offer-card:hover .card-inner,
.offer-card__link:focus-visible .card-inner {
  transform: rotateY(180deg);
}

/* Les deux faces partagent toute la mise en forme "glass" et la même
   géométrie ; seule la rotation initiale change. */
.card-front,
.card-hover {
  position: absolute;
  inset: 0;
  /* padding-top réduit de 28 → 14 px : le contenu (h2 + sous-titre + steps)
     remonte de 14 px à l'intérieur de la carte. */
  padding: 14px 24px 24px;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(74, 154, 220, 0.26),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(8, 48, 82, 0.80),
      rgba(4, 18, 42, 0.88) 52%,
      rgba(2, 9, 24, 0.92)
    );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(190, 225, 255, 0.24);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fff;
  /* Cache la face arrière pendant le flip pour éviter le bleed
     visuel des deux contenus superposés à mi-rotation. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* La face front prend la place naturelle, sa hauteur drive le wrapper. */
.card-front {
  position: relative;
  inset: auto;
}

/* La face hover est tournée de 180° pour apparaître droite quand le
   flipper a tourné. Variante de dégradé pour la distinguer.
   Flex column avec space-between → le contenu se répartit sur toute
   la hauteur de la carte, plus de zone vide en bas. */
.card-hover {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(255, 217, 77, 0.18),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(12, 34, 72, 0.94),
      rgba(5, 16, 38, 0.96)
    );
  border-color: rgba(255, 217, 77, 0.30);
}

/* Étapes numérotées (face hover) — état initial : invisibles et
   légèrement décalées vers le bas. Elles se déploient en cascade
   APRÈS le flip via animation déclenchée au hover. */
.steps {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.steps > div {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(10px);
  /* Position relative pour ancrer le liseret coloré à gauche */
  position: relative;
  overflow: hidden;
}

/* Liserets colorés à gauche des 3 étapes — même palette que les
   cartes 01/02/03 (jaune, vert, bleu) pour cohérence visuelle. */
.steps > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 0 3px 3px 0;
}
.steps > div:nth-child(1)::before {
  background: linear-gradient(to bottom, #fbbf24, #eab308);
}
.steps > div:nth-child(2)::before {
  background: linear-gradient(to bottom, #84cc16, #65a30d);
}
.steps > div:nth-child(3)::before {
  background: linear-gradient(to bottom, #60a5fa, #3b82f6);
}

.steps strong {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Fond par défaut (jaune) — chaque numéro est colorisé en dessous */
  background: linear-gradient(135deg, #fbbf24, #eab308);
  color: #06142d;
  font-size: 14px;
  font-weight: 900;
}

/* Couleurs alignées sur les cartes 01/02/03 (jaune, vert, bleu) */
.steps > div:nth-child(1) strong {
  background: linear-gradient(135deg, #fbbf24, #eab308);
  color: #06142d;
}
.steps > div:nth-child(2) strong {
  background: linear-gradient(135deg, #84cc16, #65a30d);
  color: #06142d;
}
.steps > div:nth-child(3) strong {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: #ffffff;
}

.steps span {
  color: #ffffff;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 700;
}

/* Déploiement staggered des 3 étapes au survol — démarre à mi-flip
   pour qu'elles apparaissent quand la face arrière devient visible. */
@keyframes stepDeploy {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Rythme : apparition RAPIDE de chaque étape (0.35s), pauses raccourcies
   (~0.4s au lieu de ~1s) pour un rythme plus dynamique entre les étapes.
   Step 1 : 0.60s → 0.95s (apparition), puis pause jusqu'à 1.35s
   Step 2 : 1.35s → 1.70s, puis pause jusqu'à 2.10s
   Step 3 : 2.10s → 2.45s */
.offer-card:hover .steps > div:nth-child(1),
.offer-card__link:focus-visible .steps > div:nth-child(1) {
  animation: stepDeploy 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 0.60s forwards;
}
.offer-card:hover .steps > div:nth-child(2),
.offer-card__link:focus-visible .steps > div:nth-child(2) {
  animation: stepDeploy 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 1.35s forwards;
}
.offer-card:hover .steps > div:nth-child(3),
.offer-card__link:focus-visible .steps > div:nth-child(3) {
  animation: stepDeploy 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 2.10s forwards;
}

/* Accessibilité — flip réduit à un fondu instantané pour les
   utilisateurs sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  .card-inner,
  .storage-hero__rental-card.offer-card:hover .card-inner {
    transition: none;
    transform: none;
  }
  .card-hover {
    transform: none;
    opacity: 0;
    transition: opacity 0.2s linear;
  }
  .offer-card:hover .card-hover {
    opacity: 1;
  }
  .offer-card:hover .card-front {
    opacity: 0;
  }
  .card-front {
    transition: opacity 0.2s linear;
  }
  .steps > div,
  .offer-card:hover .steps > div {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.offer-card h2 {
  margin: 0;
  text-align: center;
  font-size: 26px;
  line-height: 1.0;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  text-transform: uppercase;
}

.offer-card .subtitle {
  margin: 8px auto 22px;
  text-align: center;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  color: #FFE45C;
}

.offer-badges {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.offer-badge {
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(210, 235, 255, 0.18);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.offer-badge:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}

.offer-badge strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 900;
  color: #fff;
}

.offer-badge span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
}

/* Sur écrans étroits (< 980px) la carte prend toute la largeur sous
   le caption au lieu d'être latérale, pour ne pas écraser la lecture. */
@media (max-width: 980px) {
  .storage-hero__rental-card.offer-card {
    position: static;
    margin: clamp(24px, 4vh, 40px) auto 0;
    width: min(92%, 460px);
  }
  .offer-badges {
    grid-template-columns: repeat(3, 1fr);
  }
  .offer-badge {
    min-height: 78px;
    padding: 14px 8px;
  }
  .offer-badge strong {
    font-size: 14px;
  }
  .offer-badge span {
    font-size: 11px;
  }
}

/* ----------- Cartes de stockage : virtuel à GAUCHE, physique à DROITE
   de la maison. Le conteneur s'étend sur toute la largeur du hero et
   les 2 items sont distribués aux extrémités. ----------- */
.storage-hero__cards {
  position: absolute;
  z-index: 6;
  /* Remontées de ~100 px : clamp(420 / 55vh / 560) → clamp(320 / 42vh / 460). */
  top: clamp(280px, 36vh, 420px);
  left: clamp(20px, 2.5vw, 50px);
  right: clamp(20px, 2.5vw, 50px);
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 60px);
  pointer-events: none;
}

/* ----------- Items de stockage (texte blanc, sans carte) -----------
   Plus de border-bottom puisqu'on est côte à côte. Largeur fixe pour
   garder une lisibilité comparable des 2 colonnes. */
.storage-hero-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 0;
  border-bottom: none;
  width: clamp(240px, 22vw, 320px);
  pointer-events: auto;
}
/* Le premier item (card-virtuel) va à gauche, le second (card-physique)
   à droite. align-self à chaque pour assurer le bon comportement même
   si l'ordre HTML change. */
.storage-hero-item.card-virtuel {
  align-self: flex-start;
}
.storage-hero-item.card-physique {
  align-self: flex-start;
  text-align: right;
  /* Largeur élargie pour accueillir le texte de 5 lignes avec les <br>
     forcés du HTML, sans re-wrap involontaire. */
  width: clamp(300px, 28vw, 400px);
}
/* Variante "right" : on inverse l'ordre icône / texte sur la carte
   physique pour qu'elle se lise visuellement depuis la droite. */
.storage-hero-item.card-physique {
  flex-direction: row-reverse;
}
.storage-hero-item.card-physique .storage-hero-item__content {
  text-align: right;
}

.storage-hero-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.20);
}

.storage-hero-item__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.storage-hero-item__content {
  flex: 1;
}

.storage-hero-item__content h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
  color: #ffffff;
}

.storage-hero-item__content p {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Carte "Stockage virtuel" (jour, à gauche) — passée en bleu CAPEO
   pour matcher l'ambiance jour de la maison + faire le pendant avec
   le blanc de la carte physique côté nuit. */
.storage-hero-item.card-virtuel .storage-hero-item__content h3,
.storage-hero-item.card-virtuel .storage-hero-item__content p {
  color: var(--primary);
}
.storage-hero-item.card-virtuel .storage-hero-item__content p {
  /* Petit voile pour la fluidité de lecture sur le ciel clair. */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35);
}
.storage-hero-item.card-virtuel .storage-hero-item__icon {
  background: rgba(33, 48, 94, 0.12);
  color: var(--primary);
  border-color: rgba(33, 48, 94, 0.35);
}

/* ----------- Labels au-dessus des lignes énergie ----------- */
.storage-hero__line-label {
  position: absolute;
  z-index: 5;
  font-family: 'Inter', sans-serif;
  font-size: clamp(9px, 0.72vw, 11px);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%); /* centré sur la position left donnée */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* Label bleu : centré entre les 2 flèches bleues sur l'horizontale
   y=774. Bleu 2 (x=914) + Bleu 3 (x=1304) → centre SVG x=1109,
   visuel x = 1600-1109 = 491 → ~31 % de la largeur. */
.storage-hero__line-label--blue {
  top: 84%;
  left: 31%;
  color: #4FC3F7; /* bleu clair lumineux */
}

/* Label rose : centré entre les 2 flèches roses sur l'horizontale
   y=830. Rose 5 (x=770) + Rose 4 (x=1050) → centre SVG x=910,
   visuel x = 1600-910 = 690 → ~43 % de la largeur. */
.storage-hero__line-label--pink {
  top: 90%;
  left: 43%;
  color: #FF6B9D; /* rose lumineux */
}

/* Caption du hero — panneau glassmorphism en bas à gauche. */
.highlight-green {
  color: #8BC34A;
  text-shadow: 0 0 20px rgba(139, 195, 74, 0.4);
}

.highlight-yellow {
  color: #FFE100;
  text-shadow: 0 0 20px rgba(255, 225, 0, 0.4);
}

.highlight-blue {
  color: #28A8FF;
  text-shadow: 0 0 20px rgba(40, 168, 255, 0.4);
}

.storage-hero__caption {
  position: absolute;
  left: clamp(20px, 4vw, 72px);
  top: clamp(160px, 18vh, 220px);
  bottom: auto;
  z-index: 8;
  max-width: 520px;
  padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px);
  background: linear-gradient(
    135deg,
    rgba(8, 18, 32, 0.58),
    rgba(8, 18, 32, 0.28)
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.storage-hero__eyebrow {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 225, 0, 0.18);
  border: 1px solid rgba(255, 225, 0, 0.40);
  color: #fff5b3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.storage-hero__title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 540px;
  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 12px 38px rgba(0, 0, 0, 0.32);
}
/* Chaque ligne du titre sur une seule ligne (pas de wrap interne) —
   l'enchaînement des 3 lignes est fait via les <br>. */
.storage-hero__title > span {
  white-space: nowrap;
  display: inline-block;
}
.storage-hero__subtitle {
  margin: 16px 0 0;
  max-width: 440px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 500;
  line-height: 1.45;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.storage-hero__bottom-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px 24px;
  text-align: center;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  z-index: 10;
  box-sizing: border-box;
}
.storage-hero__bottom-text h3 {
  color: #fff;
  font-size: clamp(22px, 2.5vw, 32px);
  margin: 0 0 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.storage-hero__bottom-text p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0 auto;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.storage-copy {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 28px 26px;
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(0, 15, 35, 0.74),
    rgba(0, 5, 18, 0.88)
  );
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.storage-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.90);
  font-size: clamp(15px, 2.1vw, 20px);
  line-height: 1.48;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.storage-copy p + p {
  margin-top: 10px;
}

.storage-copy span {
  font-weight: 800;
  white-space: nowrap;
}

.storage-copy .yellow {
  color: #FFE100;
  text-shadow: 0 0 18px rgba(255, 225, 0, 0.28);
}

.storage-copy .green {
  color: #8BD84E;
  text-shadow: 0 0 18px rgba(139, 216, 78, 0.24);
}

.storage-copy .blue {
  color: #28A8FF;
  text-shadow: 0 0 18px rgba(40, 168, 255, 0.26);
}

.storage-copy .pink {
  color: #F22B7A;
  text-shadow: 0 0 18px rgba(242, 43, 122, 0.26);
}

@media (max-width: 768px) {
  /* Design titre épuré sur mobile : SANS panneau glassmorphism.
     Le titre flotte directement sur le ciel de la photo, avec une
     forte ombre portée pour la lisibilité et un trait jaune vertical
     décoratif à gauche pour structurer la composition. La ligne
     question "Utilisation ?" est accentuée en jaune brand. */
  .storage-hero__caption {
    /* Descendu à 140 (au lieu de 108) pour passer franchement sous le
       pill header compact (~54px de bas + marge respiratoire). */
    top: 140px;
    bottom: auto;
    left: 22px;
    right: 22px;
    max-width: none;
    padding: 4px 0 4px 14px;
    /* Plus de fond / blur / border : juste le trait jaune à gauche. */
    background: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-left: 3px solid rgba(255, 225, 0, 0.95);
  }
  .storage-hero__title {
    /* Plus grand : 28-40 au lieu de 22-30. */
    font-size: clamp(28px, 7.6vw, 40px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 800;
    text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.75),
      0 1px 3px rgba(0, 0, 0, 0.9),
      0 0 24px rgba(0, 0, 0, 0.55);
  }
  /* Ligne question "Utilisation ?" en accent jaune brand. */
  .storage-hero__title > span:nth-of-type(2) {
    color: #FFE100;
    text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.75),
      0 1px 3px rgba(0, 0, 0, 0.9),
      0 0 28px rgba(255, 225, 0, 0.35);
  }
  /* Sur mobile on permet aux longues lignes de wrapper si nécessaire,
     plutôt que de forcer le nowrap et déborder de l'écran étroit. */
  .storage-hero__title > span {
    white-space: normal;
    display: inline;
  }
  /* Sur mobile, le sous-titre est MASQUÉ pour libérer le ciel et garder
     le caption dans le 1/4 supérieur du hero. */
  .storage-hero__subtitle {
    display: none;
  }
  /* Eyebrow pill SOLIDE jaune (vs translucide desktop) pour ressortir
     comme un tag de catégorie. */
  .storage-hero__eyebrow {
    font-size: 9px;
    margin-bottom: 10px;
    padding: 4px 10px;
    letter-spacing: 0.18em;
    background: rgba(255, 225, 0, 0.95);
    border: none;
    color: #1a1f3a;
    font-weight: 800;
    text-shadow: none;
    box-shadow: 0 2px 10px rgba(255, 225, 0, 0.35);
  }
}

/* ---------- Reusable Section Header ---------- */
.storage-section-header {
  text-align: left;
  max-width: 800px;
  margin-bottom: clamp(48px, 6vh, 80px);
}
.storage-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--st-solar);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.storage-section-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--st-ink);
}

/* ---------- 2. Louez vos panneaux — L'offre location (version éditoriale) ---------- */
.storage-rental {
  padding: clamp(120px, 16vh, 200px) clamp(24px, 6vw, 96px);
  background: var(--st-cream);
  position: relative;
}
.storage-rental__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.storage-rental-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(48px, 6vw, 96px);
}
.storage-rental-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.storage-rental-item__icon {
  /* Picto rond gris en haut de chaque item, comme dans le poster :
     SVG monochrome en stroke = currentColor → on contrôle la teinte
     ici (gris doux), sans bg rempli. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: #6c7884;
  margin-bottom: 4px;
}
.storage-rental-item__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.storage-rental-item__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--st-solar); /* orange — comme dans le poster */
  margin: 0;
}
.storage-section-title-accent {
  color: var(--st-solar);
}
.storage-rental-item__text {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--st-muted);
  margin: 0;
}

/* ---------- 3. Cycle de l'énergie Jour/Nuit (Animation Scroll - Full Screen) ---------- */
.storage-daynight {
  height: 320vh;
  position: relative;
  background: var(--st-cream, #F7F5EF);
}
.storage-daynight-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.storage-daynight-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}
/* Les images jour/nuit sont enveloppées dans <picture> pour le srcset
   mobile. On neutralise visuellement le wrapper picture afin que l'img
   enfant continue à hériter du positioning absolute du parent .bg. */
.storage-daynight-bg picture {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.storage-daynight-img--day,
.storage-daynight-img--night {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.storage-daynight-img--night {
  opacity: 0;
}
.storage-daynight-content {
  position: relative;
  z-index: 10;
  padding-left: clamp(24px, 8vw, 120px);
  padding-top: clamp(110px, 18vh, 180px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.storage-daynight-text {
  max-width: 640px;
  text-align: left;
  margin-bottom: 40px;
}
.storage-kicker {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #F6B800;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.storage-section-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3.2rem, 6vw, 6.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin: 0 0 24px 0;
  text-shadow: 0 12px 30px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.6);
}
.storage-daynight-desc {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2);
  transition: color 0.3s ease;
}
.storage-daynight-labels {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
.storage-label {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
.storage-label.is-visible {
  opacity: 1;
}
.storage-daynight-logo {
  position: absolute;
  top: clamp(110px, 18vh, 180px);
  right: clamp(24px, 8vw, 120px);
  width: clamp(240px, 36vw, 480px);
  aspect-ratio: 1;
  pointer-events: none;
}
.capeo-logo-blanc,
.capeo-logo-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.capeo-logo-blanc {
  opacity: 0.3;
}
.capeo-logo-color-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 100% 0 0); /* starts empty from right */
}

@media (max-width: 768px) {
  .storage-daynight {
    height: 280vh;
  }
  .storage-daynight-content {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 96px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
  }
  .storage-daynight-text {
    order: 1;
  }
  .storage-daynight-content .hero-stats {
    order: 2;
    margin-top: auto !important; /* Pousse tout vers le bas */
    margin-bottom: 20px !important; /* Espace entre les stats et les boutons */
  }
  .storage-daynight-content .hero-buttons {
    order: 3;
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* A quelques pixels du bas */
    justify-content: center;
    flex-direction: row !important; /* Force side by side and override the column rule at bottom of file */
    flex-wrap: nowrap !important;
    gap: 12px;
  }
  .storage-daynight-content .hero-buttons .btn {
    width: auto !important;
    flex: 1;
    max-width: 200px;
    height: 50px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  .storage-section-title {
    font-size: clamp(2.6rem, 13vw, 4.2rem);
  }
  .storage-daynight-labels {
    flex-direction: row;
  }
  .storage-daynight-logo {
    display: none; /* Hide logo on mobile if it interferes, or put it absolute */
  }
}

@media (prefers-reduced-motion: reduce) {
  /* On NE flatten PLUS la section en reduce-motion : on garde la hauteur
     scrollable + le sticky pour que la transition jour→nuit (version
     allégée, sans zoom — gérée par le JS) s'affiche dans tous les cas.
     L'opacité de l'image nuit est donc pilotée par le JS, pas figée ici. */
  .storage-label {
    opacity: 1 !important;
  }
}

/* ---------- 4. Deux façons de stocker — Physique & Virtuel (reprise propre) ---------- */
.storage-ways {
  padding: clamp(120px, 16vh, 200px) clamp(24px, 6vw, 96px);
  background: #ffffff;
}
.storage-ways__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(64px, 8vw, 120px);
}
.storage-way {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.storage-way__icon {
  /* Picto carré vert néon (même teinte que les pictos du hero animé)
     pour faire écho aux 3 ronds verts du flux d'énergie. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(139, 195, 74, 0.12);
  color: #5fa12c;
  margin-bottom: 8px;
}
.storage-way__icon svg {
  width: 32px;
  height: 32px;
  display: block;
}
.storage-way__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--st-ink);
}
.storage-way__text {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
  color: var(--st-muted);
  margin: 0;
  max-width: 46ch;
}

/* ---------- 5. Les bénéfices clés — cards premium ---------- */
.storage-benefits {
  padding: clamp(80px, 12vh, 140px) clamp(24px, 6vw, 96px);
  background: var(--st-cream);
}
.storage-benefits__header {
  text-align: center;
  margin-bottom: clamp(48px, 7vh, 80px);
}
.storage-benefits__eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-solar);
  margin-bottom: 14px;
}
.storage-benefits__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 600;
  color: var(--st-ink);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.storage-benefits__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}

/* ---------- Footer "Passez à l'énergie solaire, louez la sérénité" + CTA ---------- */
.storage-benefits__footer {
  margin: clamp(48px, 7vh, 80px) auto 0;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vh, 32px);
  text-align: center;
}
.storage-benefits__tagline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 600;
  color: var(--st-ink);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 720px;
}
.storage-benefits__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(14px, 1.8vh, 18px) clamp(22px, 3vw, 36px);
  background: var(--st-ink, #0a2752);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 999px;
  box-shadow:
    0 12px 28px -8px rgba(10, 39, 82, 0.45),
    0 2px 6px rgba(10, 39, 82, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.storage-benefits__cta:hover {
  transform: translateY(-2px);
  background: #0d3169;
  box-shadow:
    0 18px 36px -8px rgba(10, 39, 82, 0.55),
    0 3px 8px rgba(10, 39, 82, 0.20);
}
.storage-benefits__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.25s ease;
}
.storage-benefits__cta:hover .storage-benefits__cta-arrow {
  transform: translateX(3px);
}

/* ---------- Breakpoint TABLETTE : 2 colonnes (768-1024px) ---------- */
@media (max-width: 1024px) and (min-width: 769px) {
  .storage-benefits__list {
    grid-template-columns: repeat(2, 1fr);
  }
  /* La 3ᵉ carte prend toute la largeur sous les deux premières */
  .storage-benefits__card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - clamp(10px, 1.25vw, 16px));
    justify-self: center;
  }
}
.storage-benefits__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 40px);
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--st-rule);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.storage-benefits__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(15, 36, 56, 0.10);
}
.storage-benefits__card:hover .benefit-card-glow {
  opacity: 1;
}
.benefit-card-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,140,40,0.12) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.benefit-icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(242, 140, 40, 0.10);
  color: var(--st-solar);
  flex-shrink: 0;
}
.benefit-icon-wrap svg {
  width: 26px;
  height: 26px;
}
.benefit-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(38px, 4vw, 64px);
  font-weight: 600;
  color: transparent;
  background: linear-gradient(135deg, rgba(242,140,40,0.20) 0%, rgba(242,140,40,0.06) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 0.85;
  flex-shrink: 0;
  margin-top: auto;
  align-self: flex-end;
  letter-spacing: -0.03em;
}
.benefit-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.benefit-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 600;
  color: var(--st-ink);
  margin: 0;
  letter-spacing: -0.015em;
}
.benefit-content p {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.65;
  color: var(--st-muted);
  margin: 0;
}

/* ---------- 7. CTA final — dark gradient ---------- */
.storage-cta {
  position: relative;
  padding: clamp(80px, 14vh, 160px) clamp(24px, 6vw, 96px);
  background: linear-gradient(135deg, var(--st-night) 0%, var(--st-deep) 60%, #0D3060 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.storage-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 680px;
  width: 100%;
}
.storage-cta__deco {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 50vw, 500px);
  height: clamp(280px, 50vw, 500px);
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}
.storage-cta__eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--st-solar);
  background: rgba(242, 140, 40, 0.12);
  padding: 6px 16px;
  border-radius: 99px;
  border: 1px solid rgba(242, 140, 40, 0.25);
}
.storage-cta__line {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0;
  color: #ffffff;
}
.storage-cta__sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 1vw, 14px);
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  letter-spacing: 0.01em;
}
.storage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding: 18px 36px;
  border-radius: 99px;
  background: var(--st-solar);
  color: #ffffff;
  transition: all 0.3s ease;
  margin-top: 8px;
  box-shadow: 0 8px 32px rgba(242, 140, 40, 0.35);
}
.storage-btn:hover {
  background: #f09010;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(242, 140, 40, 0.50);
}
.storage-trust {
  padding: clamp(60px, 8vh, 96px) clamp(24px, 6vw, 96px);
  background: #ffffff;
  border-top: 1px solid var(--st-rule);
  border-bottom: 1px solid var(--st-rule);
}
.storage-trust__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.storage-trust-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(32px, 4vw, 64px);
}
.storage-trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 180px;
}
.trust-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--st-ink);
  letter-spacing: -0.01em;
}
.trust-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--st-muted);
}
.highlight-trust .trust-title {
  color: var(--st-solar);
  font-weight: 700;
}

/* ---------- 7. CTA final ---------- */
.storage-cta {
  padding: clamp(120px, 16vh, 200px) clamp(24px, 6vw, 96px);
  background: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.storage-cta__line {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 800px;
  color: var(--st-ink);
}
.storage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding: 18px 36px;
  border-radius: 99px;
  background: var(--st-ink);
  color: #ffffff;
  transition: all 0.3s ease;
}
.storage-btn:hover {
  background: var(--st-solar);
  transform: translateY(-2px);
}

/* ---------- RESPONSIVE MEDIA QUERIES ---------- */
@media (max-width: 992px) {
  .storage-rental-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

@media (max-width: 768px) {
  .storage-rental-grid {
    grid-template-columns: 1fr;
  }
  .storage-cycle-grid {
    flex-direction: column;
    gap: 32px;
  }
  .storage-cycle-arrow {
    transform: rotate(90deg);
  }
  .storage-ways__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .storage-trust-list {
    flex-direction: column;
    gap: 32px;
  }
  .storage-trust-item {
    width: 100%;
  }
}


/* ========================================
   PRECONISATION PAGE
   ======================================== */
.preconisation-page {
  /* Annule le margin-top de main : le hero part du haut de l'écran */
  margin-top: calc(-1 * max(var(--nav-height), 72px));
}

.preconisation-container {
  background-image:
    linear-gradient(
      100deg,
      rgba(33, 48, 94, 0.5) 0%,
      rgba(33, 48, 94, 0.4) 48%,
      rgba(33, 48, 94, 0.18) 62%,
      rgba(33, 48, 94, 0.06) 100%
    ),
    url('assets/precobg.webp?v=img20260606a');
  background-size: cover;
  background-position: 75% center;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: calc(max(var(--nav-height), 72px) + 24px) 24px 40px;
  display: flex;
  flex-direction: column;
}

.preconisation-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(300px, 42%) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header photo"
    "panel photo"
    "steps steps";
  gap: 12px clamp(20px, 2.5vw, 32px);
  align-items: start;
}

.preconisation-header.section-header {
  grid-area: header;
  gap: 0;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  justify-content: flex-start;
}

.preconisation-grid {
  display: contents;
}

.preco-visite-panel {
  grid-area: panel;
  width: 100%;
  box-sizing: border-box;
  margin-top: clamp(20px, 3vh, 36px);
}

.preconisation-steps--compact {
  grid-area: steps;
}

.preconisation-bubbles {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

.preconisation-badge,
.preconisation-intro {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #fff;
}

.preconisation-badge {
  width: auto;
  max-width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 8px 22px;
  letter-spacing: 0.12em;
  font-size: clamp(14px, 2vw, 20px);
  box-shadow: none;
  border-radius: 5px 5px 0 0;
  border-bottom: none;
  margin: 0;
  z-index: 1;
}

.preconisation-intro {
  width: max-content;
  max-width: none;
  margin: 0;
  margin-top: -1px;
  text-align: left;
  border-radius: 0 5px 5px 5px;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: clamp(11px, 1.15vw, 16px);
  padding: 14px 20px;
}

.preconisation-steps--compact {
  width: 100%;
  max-width: none;
  align-self: end;
  padding-top: 8px;
}

.preconisation-steps-title {
  color: #fff;
  font-size: clamp(20px, 2.2vw, 26px);
  margin-bottom: 24px;
  font-weight: 700;
}

.preconisation-steps--compact .preconisation-steps-title {
  font-size: clamp(14px, 1.4vw, 17px);
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.95;
}

.preco-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.preco-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 28px 20px 24px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}

.preco-step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.preco-step-number {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--secondary);
}

.preco-step-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.preco-step-card p {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.45;
  margin: 0;
}

/* Étapes — rangée en bas, côte à côte */
.preco-steps-grid--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 16px);
  padding-top: 14px;
}

.preco-step-card--compact {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 12px 14px;
  padding-top: 32px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  overflow: visible;
}

.preco-step-card--compact:hover {
  transform: translateY(-4px);
}

.preco-step-card--compact .preco-step-number {
  top: -18px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 4vw, 44px);
  height: clamp(36px, 4vw, 44px);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
  background: var(--primary);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(33, 48, 94, 0.35);
}

.preco-step-card--compact:nth-child(1) .preco-step-number {
  background: var(--primary);
}

.preco-step-card--compact:nth-child(2) .preco-step-number {
  background: var(--secondary);
}

.preco-step-card--compact:nth-child(3) .preco-step-number {
  background: var(--third);
}

.preco-step-card--compact:nth-child(4) .preco-step-number {
  background: var(--primary-light);
}

.preco-step-card--compact img {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.preco-step-card--compact p {
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.35;
  font-weight: 600;
}

.preco-visite-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: var(--card);
  border-radius: calc(var(--radius) + 4px);
  border-left: 4px solid var(--secondary);
  box-shadow: var(--shadow-xl);
}

.preco-visite-panel h2 {
  color: var(--primary);
  font-size: clamp(22px, 2.5vw, 30px);
  margin: 0;
}

.preco-lead {
  color: var(--muted-foreground);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

.preco-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.preco-benefits li {
  position: relative;
  padding: 14px 16px 14px 44px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--foreground);
  background: var(--muted);
  border-radius: 8px;
  list-style: none;
}

.preco-benefits li::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-color: var(--third);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.preco-cta {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 52px;
  margin-top: 8px;
}


/* ========================================
   Panel PAGE
   ======================================== */
 .panel-container{
  background-image: url('assets/panneaubg.webp?v=img20260606a');
  background-size: cover;
  background-position: center;
  height: auto;
  width: 100%;
  position: relative;
}
 .onduleur-container{
  background-image: url('assets/onduleurbg.webp?v=img20260606a');
  background-size: cover;
  background-position: center;
  height: auto;
  width: 100%;
  position: relative;
}
.panel-content{
  display: flex;
  gap: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.panel-cards{
  display: flex;
  gap: 20px;
  justify-content: center;
  /* stretch (au lieu de center) : toutes les cartes prennent la hauteur
     de la plus haute → tops alignés + titres au même y. */
  align-items: stretch;
  margin: 50px 0;
  flex-wrap: wrap;
  }

/* === Cartes "panneau" — design harmonisé avec le reste du site ===
   Même langage visuel que les cartes SOLEA / offer-card :
   - fond glass dégradé bleu nuit + backdrop-blur,
   - bordure fine claire,
   - radius doux,
   - liseret jaune CAPEO en tête (signature),
   - texte blanc + accents jaunes (au lieu du vert Trina).
   On NE TOUCHE PAS au layout (largeur, gaps, structure HTML). */
.panel-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* gap réduit : texte rapproché du titre */
  gap: 10px;
  width: 250px;
  min-height: 300px;
  height: auto;
  padding: 26px 22px 22px;
  position: relative;
  background:
    /* Légère remontée de l'opacité pour un peu plus de présence
       sans perdre la transparence de fond. */
    radial-gradient(circle at 18% 12%, rgba(74, 154, 220, 0.20), transparent 60%),
    linear-gradient(135deg, rgba(8, 30, 60, 0.55), rgba(4, 14, 32, 0.65));
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
/* Liserets colorés CAPEO sur le BORD GAUCHE de chaque carte — même
   signature que les cartes 01/02/03 de "Votre projet en 3 étapes".
   Palette du logo (rouge → orange → jaune → vert) pour les 4 cartes. */
.panel-card::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  /* Liseret plus FIN : passé de 5 à 3 px. */
  width: 3px;
  border-radius: 0 2px 2px 0;
  /* Le background et le glow sont définis par nth-child plus bas. */
}
.panel-card:nth-child(1)::before {
  background: linear-gradient(to bottom, #f87171, #dc2626);
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.50);
}
.panel-card:nth-child(2)::before {
  background: linear-gradient(to bottom, #fb923c, #e17a2d);
  box-shadow: 0 0 14px rgba(225, 122, 45, 0.50);
}
.panel-card:nth-child(3)::before {
  background: linear-gradient(to bottom, #fde047, #eab308);
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.50);
}
.panel-card:nth-child(4)::before {
  background: linear-gradient(to bottom, #4ade80, #22a866);
  box-shadow: 0 0 14px rgba(34, 168, 102, 0.50);
}
/* 5e carte (section Onduleurs : "Sécurité électrique accrue") —
   vert foncé pour la distinguer du vert clair de la 4e carte. */
.panel-card:nth-child(5)::before {
  background: linear-gradient(to bottom, #15803d, #14532d);
  box-shadow: 0 0 14px rgba(20, 83, 45, 0.55);
}

/* Les cartes Panneaux gardent désormais le même bandeau titre blanc
   sur écriture bleu CAPEO que les cartes Onduleurs (les anciens fonds
   colorés rouge/orange/jaune/vert ont été retirés). Le liseret gauche
   coloré sur chaque carte continue d'identifier la rangée. */

/* Page production : fond body en bleu CAPEO pour supprimer la bande
   blanche entre le header (pill flottant) et le bandeau navy du titre
   "Les Panneaux : TRINA SOLAR". Scope strict via :has() pour ne rien
   casser sur les autres pages. */
body:has(#panel-product) {
  background-color: var(--primary);
}

/* Largeur du bloc bas calée sur la largeur cumulée des cartes au
   dessus (n × 250px + (n-1) × 20px de gap). Panneaux a 4 cartes,
   Onduleurs en a 5. */
#panel-product .panel-cards-bottom {
  width: calc(4 * 250px + 3 * 20px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
#onduleur-product .panel-cards-bottom {
  /* Largeur = 3 cartes centrales (cartes 2/3/4) au lieu des 5 cartes
     pour aérer le bloc. Centré horizontalement → aligné sous le
     groupe central. */
  width: calc(3 * var(--prod-card-w, 250px) + 2 * 20px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* === Page Production : chaque section TIENT dans 1 écran ===
   Les 2 sections (Panneaux + Onduleurs) sont des viewports plein écran :
   - min-height: 100dvh (utilise la hauteur dynamique du viewport)
   - flex column centré verticalement
   - cartes fluides via clamp() pour rester proportionnelles à la taille
     de l'écran (240→160px largeur, 280→180px hauteur mini)
   La valeur de la card est exposée en custom property pour que les
   .panel-cards-bottom (calc largeur = N × card + gaps) suivent. */
#panel-product,
#onduleur-product {
  --prod-card-w: clamp(160px, 15vw, 250px);
  --prod-card-h: clamp(180px, 28vh, 300px);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
#panel-product > .panel-container,
#onduleur-product > .onduleur-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* Contenu aligné en HAUT (justify-content: center descendait tout
     au milieu → effet "page basse" perceptible pendant la transition
     inter-pages SOLEA). On garde min-height: 100dvh pour la sensation
     carousel, mais sans déplacement vertical du contenu. */
  justify-content: flex-start;
  padding: clamp(20px, 3vh, 56px) clamp(12px, 2vw, 40px);
  box-sizing: border-box;
}
#panel-product .panel-content,
#onduleur-product .panel-content {
  gap: clamp(14px, 2vh, 32px);
}
#panel-product .panel-cards,
#onduleur-product .panel-cards {
  margin: clamp(12px, 2vh, 40px) 0;
  gap: clamp(10px, 1.4vw, 20px);
}
#panel-product .panel-card,
#onduleur-product .panel-card {
  width: var(--prod-card-w);
  min-height: var(--prod-card-h);
  padding: clamp(16px, 2vh, 26px) clamp(14px, 1.4vw, 22px);
}
#panel-product .panel-cards-bottom {
  /* Recalcule sur la nouvelle largeur fluide. */
  width: calc(4 * var(--prod-card-w) + 3 * 20px);
}
.panel-card h3 {
  /* Bandeau titre OPAQUE qui englobe le HAUT de la carte — touche
     les bords gauche, droit et supérieur du cadre (avec les coins
     supérieurs arrondis pour matcher le border-radius de la carte).
     Dégradé navy 3 stops + bord bas accent coloré (cf. ::after). */
  position: relative;
  z-index: 1;
  display: flex;
  /* Force la pleine largeur même quand le texte est court ; le parent
     a "align-items: center" qui sinon redonne au h3 la largeur de son
     contenu, créant un gap inégal selon la longueur du titre. */
  align-self: stretch;
  width: auto;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 18px;
  /* Sort des paddings de la carte (26px 22px 22px) pour toucher les
     bords : -26 en haut, -22 droite/gauche. margin-bottom retiré : on
     laisse le gap du flex parent (réduit) gérer l'espacement vers le
     paragraphe — texte plus près du titre. */
  margin: -26px -22px 0;
  font-family: 'Inter', 'Avenir LT Pro', sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  /* Fond BLANC opaque + écriture bleu CAPEO — contraste fort avec
     le glass sombre du corps de carte. */
  color: var(--primary);
  background:
    linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
  /* Top corners arrondis = border-radius carte (18) - border (1) = 17 */
  border-radius: 17px 17px 0 0;
  border-bottom: 1px solid rgba(33, 48, 94, 0.18);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(33, 48, 94, 0.06);
  text-shadow: none;
}
/* Le bandeau titre couvre TOUTE la largeur de la carte ; le liseret
   gauche démarre donc sous le bandeau (z-index inférieur) pour ne pas
   l'interrompre. Il reste pleinement visible sous le titre. */
.panel-card::before {
  z-index: 0;
}
/* Accent coloré au RAS DU BAS du bandeau, en pleine largeur, matche
   la couleur du liseret de chaque carte. */
.panel-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
}
.panel-card:nth-child(1) h3::after {
  background: linear-gradient(90deg, transparent, #dc2626, transparent);
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.7);
}
.panel-card:nth-child(2) h3::after {
  background: linear-gradient(90deg, transparent, #e17a2d, transparent);
  box-shadow: 0 0 10px rgba(225, 122, 45, 0.7);
}
.panel-card:nth-child(3) h3::after {
  background: linear-gradient(90deg, transparent, #eab308, transparent);
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.7);
}
.panel-card:nth-child(4) h3::after {
  background: linear-gradient(90deg, transparent, #22a866, transparent);
  box-shadow: 0 0 10px rgba(34, 168, 102, 0.7);
}
.panel-card:nth-child(5) h3::after {
  background: linear-gradient(90deg, transparent, #15803d, transparent);
  box-shadow: 0 0 10px rgba(21, 128, 61, 0.7);
}
.panel-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin: 0;
}
/* Accent jaune pour les mots-clés mis en valeur dans le texte
   (anciennement en vert via .bolder). */
.panel-card .bolder {
  color: #fbbf24;
  font-weight: 700;
}
.panel-card img {
  margin-top: auto;
  max-width: 70%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.panel-card:hover {
  transform: translateY(-8px);
  border-color: rgba(251, 191, 36, 0.35);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.48),
    0 0 22px rgba(251, 191, 36, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* === Rangée du bas (Robustes / Ecologiques / Sur Mesure) ===
   Même style glass que les cartes du dessus, mais en un seul bloc
   pour préserver la structure HTML d'origine (1 wrapper, 3 rows). */
.panel-cards-bottom {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 24px;
  margin-bottom: 100px;
  position: relative;
  background:
    /* Bloc bas : un poil plus opaque que les cartes du dessus pour
       garder la lisibilité du texte tabulé (label + paragraphe). */
    radial-gradient(circle at 12% 0%, rgba(74, 154, 220, 0.14), transparent 70%),
    linear-gradient(135deg, rgba(8, 30, 60, 0.38), rgba(4, 14, 32, 0.48));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
/* Liseret CAPEO sur le bord GAUCHE du bloc bas — jaune uniforme,
   reprend la 3e couleur du logo et signale ce bloc comme un encart
   "info pratique" distinct des 4 cartes du dessus. */
.panel-cards-bottom::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 5px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to bottom, #fde047, #eab308);
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.50);
}
.panel-card-bottom {
  display: flex;
  gap: 28px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.panel-card-bottom:last-child {
  border-bottom: none;
}
.panel-card-bottom h3 {
  color: #ffffff;
  font-family: 'Inter', 'Avenir LT Pro', sans-serif;
  font-size: 16px;
  font-weight: 800;
  width: 130px;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.panel-card-bottom p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.panel-card-bottom .bold-span {
  color: #fbbf24;
  font-weight: 700;
}

/* Le parent flex .section-header sépare normalement le badge titre
   du marquee par un gap de 20px. On colle le marquee au bas du
   bandeau navy : gap nul quand le child est un marquee. */
.product .section-header:has(.section-description--marquee) {
  gap: 0;
}

/* Description en-tête transformée en BANDE DÉFILANTE (marquee) sous
   le titre — collée au bas du bandeau navy, hauteur compacte. */
.product .section-description--marquee {
  /* Reset complet du style de base (.section-description) — on retire
     fond gris, bordure blanche, padding, max-width, etc. */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  /* Bande visuelle propre : ligne fine en-dessous uniquement (le haut
     touche directement le bandeau navy → pas de border-top). */
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg,
    rgba(7, 16, 38, 0.55) 0%,
    rgba(7, 16, 38, 0.40) 100%);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  overflow: hidden;
  position: relative;
  /* Fondu sur les bords gauche/droit pour un look élégant */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 80px,
    #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 80px,
    #000 calc(100% - 80px), transparent 100%);
}
.section-description__track {
  display: inline-flex;
  align-items: center;
  gap: 50px;
  /* Padding réduit : bande plus compacte. */
  padding: 7px 0;
  white-space: nowrap;
  font-size: clamp(12px, 0.95vw, 14px);
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
  /* Animation : translateX de 0 à -50% (la moitié de la track puisque
     contenu dupliqué). Linear infinite pour défilement continu. */
  animation: section-description-scroll 38s linear infinite;
  will-change: transform;
}
.section-description__item {
  flex-shrink: 0;
}
.section-description__sep {
  flex-shrink: 0;
  color: rgba(251, 191, 36, 0.85);
  font-size: 14px;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
}
@keyframes section-description-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 30px)); }
}
/* Pause au hover pour permettre la lecture */
.product .section-description--marquee:hover .section-description__track {
  animation-play-state: paused;
}
/* Accessibilité : on coupe le défilement pour les utilisateurs
   sensibles au mouvement et on laisse le texte statique en wrap. */
@media (prefers-reduced-motion: reduce) {
  .section-description__track {
    animation: none;
    white-space: normal;
    display: block;
    text-align: center;
  }
  .section-description__item ~ .section-description__sep,
  .section-description__sep ~ .section-description__item {
    display: none;
  }
  .product .section-description--marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.medal{
  width: 150px;
  animation: float 2s ease-in-out infinite;
}


/* ========================================
   Mobile Responsiveness
   ======================================== */

@media (max-width: 900px) {
   /* Anti-scroll horizontal : on utilise `clip` (PAS `hidden`). `clip` ne
      crée pas de conteneur de scroll → il ne casse pas le position:sticky
      du hero jour/nuit sur iOS (contrairement à `hidden`). Couvre un
      éventuel débordement au niveau racine, en complément du body. */
   html {
    overflow-x: clip;
  }
   .parallax {
    background-attachment: scroll;
  }
  .white-text {
  color: var(--muted-foreground);
}
.header{
  height: 72px;
}
   /*=================  HERO  ====================== */

  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding: 120px 24px 80px;
    overflow: hidden;
  }
  .hero-bg{
    background-image: url('assets/mobile/Cover.webp?v=img20260606a');
    /* Zoom : la photo mobile est agrandie ~170 % pour rendre le sujet
       (couple + maison) bien présent en plein écran. cover seul donnait
       une image trop "petite" à cause du fit. */
    background-size: 170% auto;
    /* On remonte la photo : la cover bouge vers le haut, ce qui fait
       apparaître davantage le couple / la maison (plutôt que le ciel). */
    background-position: center 55%;
  }
  .hero-buttons{
    margin-bottom: 24px;
  }
  .stat-value, .stat-label {
    color: var(--muted);
    padding: 0;
  }
  .btn{
    width: 250px;
    height: 50px;
  }
  .btn-primary {
    padding: 12px 24px;
    font-size: 14px;
  }
  .scroll-indicator{
    /* bottom: 130px; */
  }

  /*=================  NOUS — slide "Qui sommes-nous ?" mobile (v4 éditorial bas) ==
     Composition :
     - photo pleine slide en background (haut entièrement libre, sans texte)
     - GROS overlay bas en dégradé bleu nuit (transparent haut → opaque bas)
     - titre + texte + bouton "Découvrir CAPEO" tous DANS l'overlay bas
     - le centre de la photo (personnes + maison) reste lisible
  ============================================================================= */
  .about {
    background-image: url('assets/mobile/nous-mob.webp?v=img20260606a') !important;
    background-size: cover !important;
    background-position: center 25% !important; /* On remonte la photo */
    background-repeat: no-repeat !important;
    background-color: #0a2752 !important;
    position: relative;
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    padding: 0 !important;
    overflow: hidden;
    display: block !important;
  }

  /* Masquer le contenu desktop (.about-intro, .section-header, .objectives, etc.) */
  .about > *:not(.about-mobile-card) {
    display: none !important;
  }

  .about-mobile-card {
    position: relative;
    min-height: 100svh;
    min-height: 100dvh;
    width: 100%;
    color: #ffffff;
    display: block;
  }

  /* ---- OVERLAY BAS : tout le texte est ici. ---- */
  .about-mobile-card__overlay {
    display: block !important; /* override de l'ancienne règle qui masquait .__overlay */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    /* padding-top large = la zone du dégradé démarre haut, l'opacité commence
       transparente puis monte. La photo respire dans la moitié haute. */
    padding: 120px 24px 82px;
    background: linear-gradient(
      to top,
      rgba(5, 18, 42, 0.96)   0%,
      rgba(5, 18, 42, 0.88)  42%,
      rgba(5, 18, 42, 0.45)  72%,
      rgba(5, 18, 42, 0.00) 100%
    );
    color: #ffffff;
  }

  .about-mobile-card__title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(32px, 8vw, 42px);
    line-height: 1.05;
    font-weight: 850;
    color: #ffffff;
    letter-spacing: -0.04em;
    margin: 0;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  .about-mobile-card__text {
    margin: 14px 0 0;
    /* Alignement à gauche (texte naturellement aligné à droite ragged).
       text-align: justify créait des trous trop grands avec "CAPEO"
       agrandi en début de paragraphe. */
    max-width: 480px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* Mot "CAPEO" agrandi pour combler les lignes justifiées et réduire les
     grands espaces inter-mots. Aligné optiquement sur la baseline du texte. */
  .about-mobile-card__brand {
    font-size: 1.55em;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: #ffffff;
    line-height: 1;
    vertical-align: baseline;
    margin-right: 2px;
  }

  .about-mobile-card__btn {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .about-mobile-card__btn:hover,
  .about-mobile-card__btn:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-1px);
  }
  .about-mobile-card__btn > span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
  }
  .about-mobile-card__btn:hover > span[aria-hidden="true"] {
    transform: translateX(3px);
  }

  /* Anciennes classes (héritage) neutralisées par sécurité. */
  .about-mobile-card__header,
  .about-mobile-card__subtitle,
  .about-mobile-card__keyline,
  .about-mobile-card__divider,
  .about-mobile-card__photo,
  .about-mobile-card__divider-legacy,
  .about-mobile-card__rule {
    display: none !important;
  }

/*=================  EQUIPE  ====================== */
 .equipe{
  /* Photo de fond mobile "Notre équipe terrain, partout en France" —
     convertie depuis qui.webp en WebP qualité 80 : 2.7 Mo → 238 Ko. */
  background-image: url('assets/mobile/qui.webp?v=img20260606a');
 }
 .equipe-content{
  flex-wrap: wrap;
  gap: 12px;
 }
 .equipe-bg{
  position: absolute;
  bottom: 20px;
 }

.equipe-1 div{
 width: 160px;
 height: 90px;
}
.equipe-1 img{
  width: 120px;
}
.equipe-text{
  font-size: 10px;
}

/*=================  SOLEA  ====================== */
.solea {
  padding: 0 !important;
  /* Fond navy de sécurité — si jamais une zone n'est pas couverte par la
     photo de l'inner card (différence 100vh vs 100svh), c'est du navy
     qui transparaît au lieu du blanc du body. */
  background: #0c1a35 !important;
  /* Reset min-height : la règle parente .solea { min-height: 100vh }
     crée un espace résiduel sur mobile. On contrainte à 100svh exact. */
  min-height: 100svh !important;
  height: auto !important;
  /* CRITIQUE : la règle de snap impose `max-height: 100vh !important`.
     Sans l'annuler ici, la section reste plafonnée à 100vh alors que la
     carte mobile peut être plus haute (largeurs tablette ~600-768px) →
     le contenu déborde et CHEVAUCHE la section suivante. `none` laisse la
     section grandir pour épouser son contenu. */
  max-height: none !important;
  overflow: visible !important;
}

.solea-inner {
  display: none !important;
}

.solea-mobile-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.solea-mobile-card__top {
  position: relative;
  width: 100%;
  /* Section grandit naturellement pour contenir tout son contenu, avec
     un plancher à 100svh. Pas de height fixe → pas de tronquage sur
     iPhone SE et compagnie. */
  min-height: 100svh;
  box-sizing: border-box;
  /* Padding adaptatif : compact sur petits écrans, plus généreux sur grands. */
  padding-top: clamp(80px, 12vh, 110px);
  padding-bottom: clamp(24px, 4vh, 40px);
  padding-left: clamp(18px, 5vw, 28px);
  padding-right: clamp(18px, 5vw, 28px);
  background-image:
    radial-gradient(circle at top left, rgba(8,24,56,0.75) 0%, rgba(8,24,56,0) 60%),
    linear-gradient(to top, rgba(8,24,56,0.85) 0%, rgba(8,24,56,0.5) 20%, rgba(8,24,56,0) 45%),
    url('assets/mobile/offresolmob.webp?v=img20260606a');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* (Padding shorthand retiré — il écrasait les clamp() responsive ci-dessus.) */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.solea-mobile-card__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #eab308;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.solea-mobile-card__line-yellow {
  width: 24px;
  height: 3px;
  background: #eab308;
  margin-bottom: 12px;
  border-radius: 2px;
}

.solea-mobile-card__title {
  font-family: 'Inter', sans-serif;
  /* Taille fluide : compact sur petits écrans, généreuse sur grands. */
  font-size: clamp(30px, 9vw, 40px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  margin: 0 0 8px 0;
  letter-spacing: -0.03em;
}

.solea-mobile-card__line-gradient {
  width: 40px;
  height: 3px;
  background: linear-gradient(to right, #eab308, #22c55e);
  margin-bottom: 24px;
  border-radius: 2px;
}

.solea-mobile-card__heading {
  font-family: 'Inter', sans-serif;
  /* Taille fluide : 17-22 px. */
  font-size: clamp(17px, 5vw, 22px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  /* margin-top: auto → pousse heading + texte + boutons vers le bas. */
  margin: auto 0 clamp(10px, 1.8vh, 16px) 0;
}
.solea-mobile-card__heading .text-yellow {
  color: #eab308;
}

.solea-mobile-card__text {
  font-family: 'Inter', sans-serif;
  /* Taille fluide entre iPhone SE et iPad — 13-16px. */
  font-size: clamp(13px, 3.5vw, 16px);
  color: #e2e8f0;
  line-height: 1.5;
  margin: 0 0 clamp(14px, 2.2vh, 22px);
}

.solea-mobile-card__buttons {
  /* Espace sous le 2ᵉ bouton ("Demander une étude") pour qu'il ne touche
     pas le bas du viewport — meilleure respiration. */
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-solea-primary, .btn-solea-secondary {
  display: flex;
  align-items: center;
  width: 100%;
  /* Padding et font fluides : compact sur iPhone SE, plus généreux sur iPad. */
  padding: clamp(11px, 1.6vh, 14px) clamp(14px, 4vw, 20px);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 3.7vw, 15px);
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  gap: clamp(8px, 2.5vw, 12px);
}

.btn-solea-primary {
  background: #ffffff;
  color: #1e3a8a; /* deep blue */
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-solea-secondary {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid #ffffff;
}

.btn-solea-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-solea-icon svg {
  width: 24px;
  height: 24px;
}

.btn-solea-primary .arrow-right,
.btn-solea-secondary .arrow-right {
  width: 18px;
  height: 18px;
  margin-left: auto;
}

/* ============================================================================
   SOLEA MOBILE — "Votre projet en 3 étapes" (intégré inline dans le top card)
   Les 3 étapes ne sont plus dans un panneau blanc séparé mais EN OVERLAY
   sur la photo, dans la zone "grass" entre le couple et le heading SOLEA.
   Cards compactes glass-morphism (fond translucide + backdrop-blur).
   ========================================================================== */

/* L'ancien panneau blanc bottom est masqué — son contenu a été déplacé inline. */
.solea-mobile-card__bottom {
  display: none !important;
}

/* Container du bloc 3-étapes intégré, positionné dans l'auto-margin
   de .solea-mobile-card__top (entre le titre et le heading).
   margin-top adaptatif (clamp) — descend les cartes dans la photo sur
   grand écran mais reste compact sur iPhone pour ne pas tronquer les
   boutons du bas. */
.solea-mobile-card__steps-inline {
  margin: clamp(100px, 22vh, 220px) 0 20px;
  width: 100%;
}

.solea-inline__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.94);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 clamp(12px, 1.8vh, 18px);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.solea-inline__cards {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 14px);
  width: 100%;
}

/* Carte étape glass-morphism — version XL (padding + tailles ++).
   <a> en flex pour rester un lien cliquable (mène vers /pages/preconisation,
   /pages/production, /pages/stockage). */
.solea-inline-step {
  display: flex;
  align-items: center;
  /* Gap et padding responsive : compacts sur iPhone SE, généreux sur iPad. */
  gap: clamp(12px, 3.5vw, 18px);
  padding: clamp(12px, 1.8vh, 18px) clamp(14px, 4vw, 20px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
  /* Neutralisation des styles <a> par défaut pour rester en visuel "carte". */
  text-decoration: none;
  color: inherit;
}
.solea-inline-step::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  border-radius: 0 3px 3px 0;
}
.solea-inline-step[data-color="yellow"]::before {
  background: linear-gradient(to bottom, #fbbf24, #eab308);
}
.solea-inline-step[data-color="green"]::before {
  background: linear-gradient(to bottom, #84cc16, #65a30d);
}
.solea-inline-step[data-color="blue"]::before {
  background: linear-gradient(to bottom, #60a5fa, #3b82f6);
}
.solea-inline-step:hover,
.solea-inline-step:active {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.solea-inline-step__num {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 6.5vw, 30px);
  font-weight: 900;
  width: clamp(32px, 9vw, 44px);
  text-align: center;
  flex-shrink: 0;
  letter-spacing: -0.04em;
  margin-left: clamp(2px, 1vw, 6px);
}
.solea-inline-step[data-color="yellow"] .solea-inline-step__num {
  color: #fde047;
  text-shadow: 0 0 10px rgba(234, 179, 8, 0.45);
}
.solea-inline-step[data-color="green"] .solea-inline-step__num {
  color: #bef264;
  text-shadow: 0 0 10px rgba(101, 163, 13, 0.45);
}
.solea-inline-step[data-color="blue"] .solea-inline-step__num {
  color: #93c5fd;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.45);
}

.solea-inline-step__body {
  flex-grow: 1;
  min-width: 0;
}
.solea-inline-step__body h4 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
.solea-inline-step__body p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 3.3vw, 14px);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  margin: 0;
}

/* =========== Anciennes règles du panneau bottom (conservées mais inertes
              puisque .solea-mobile-card__bottom est display:none ci-dessus). */
.solea-mobile-card__bottom-legacy {
  /* Fond doux avec léger pattern radial pour ne pas être plat. */
  background:
    radial-gradient(circle at 50% 0%, rgba(234, 179, 8, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
    #f8fafc;
  border-radius: 28px 28px 0 0;
  margin-top: -28px;
  position: relative;
  z-index: 2;
  padding: 40px 20px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Soft top shadow pour décoller du bloc photo au-dessus. */
  box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.06);
}

/* Petit "handle" décoratif en haut du bloc, comme un drag handle. */
.solea-mobile-card__bottom::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: linear-gradient(to right, #eab308, #65a30d, #3b82f6);
  border-radius: 999px;
  opacity: 0.65;
}

.solea-mobile-card__steps-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.solea-mobile-card__line-yellow-center {
  width: 36px;
  height: 3px;
  background: linear-gradient(to right, #eab308, #fbbf24);
  border-radius: 2px;
  margin: 0 auto 18px;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.45);
}

.solea-mobile-card__steps-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: #475569;
  text-align: center;
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 320px;
}

/* Conteneur des 3 cartes — position relative pour la ligne reliante. */
.solea-mobile-card__cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  position: relative;
}

/* Ligne verticale subtile reliant les 3 cartes (effet "ladder"). */
.solea-mobile-card__cards::before {
  content: "";
  position: absolute;
  left: 32px; /* sous les numéros */
  top: 70px;
  bottom: 70px;
  width: 2px;
  background: linear-gradient(to bottom,
    rgba(234, 179, 8, 0.4) 0%,
    rgba(101, 163, 13, 0.4) 50%,
    rgba(59, 130, 246, 0.4) 100%);
  border-radius: 2px;
  z-index: 0;
  /* Animation du tracé de la ligne quand la section entre en viewport.
     Synchronisée avec le stagger des 3 cartes (1-2-3). */
  transform-origin: top;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
              opacity 0.4s ease 0.3s;
}
.solea-mobile-card.is-visible .solea-mobile-card__cards::before,
.solea-mobile-card__cards.animate-on-scroll.visible::before,
/* Fallback : si la 1ʳᵉ carte devient visible (animate-on-scroll-1), la ligne se trace. */
.animate-on-scroll-1.visible ~ .solea-mobile-card__cards::before {
  transform: scaleY(1);
  opacity: 1;
}
/* Hack plus robuste : on observe la visibilité du wrapper via :has() si supporté. */
.solea-mobile-card__cards:has(.animate-on-scroll-1.visible)::before {
  transform: scaleY(1);
  opacity: 1;
}

.solea-step-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* Transition pour micro-interaction (tap visuel). */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}
.solea-step-card:hover,
.solea-step-card:active {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 32px rgba(15, 23, 42, 0.10);
}

/* Bandeau coloré gauche, plus généreux + gradient. */
.solea-step-card__left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 0 4px 4px 0;
}
.solea-step-card__left.line-yellow {
  background: linear-gradient(to bottom, #fbbf24, #eab308);
}
.solea-step-card__left.line-green {
  background: linear-gradient(to bottom, #84cc16, #65a30d);
}
.solea-step-card__left.line-blue {
  background: linear-gradient(to bottom, #60a5fa, #3b82f6);
}

.solea-step-card__num {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 900;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
  margin-left: 6px;
  letter-spacing: -0.04em;
  /* Subtil text-shadow ton-sur-ton pour épaisseur. */
  position: relative;
  z-index: 1;
}
.solea-step-card__num.text-yellow { color: #eab308; text-shadow: 0 0 12px rgba(234, 179, 8, 0.20); }
.solea-step-card__num.text-green { color: #65a30d; text-shadow: 0 0 12px rgba(101, 163, 13, 0.20); }
.solea-step-card__num.text-blue { color: #3b82f6; text-shadow: 0 0 12px rgba(59, 130, 246, 0.20); }

.solea-step-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid rgba(226, 232, 240, 0.8);
}
.solea-step-card__content h4 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
.solea-step-card__content p {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}

.solea-step-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: 12px;
  /* Soft inner glow pour donner du relief. */
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8),
              0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
}
.solea-step-card__icon.bg-light-yellow {
  background: linear-gradient(135deg, #fef9c3, #fef08a);
}
.solea-step-card__icon.bg-light-green {
  background: linear-gradient(135deg, #f7fee7, #d9f99d);
}
.solea-step-card__icon.bg-light-blue {
  background: linear-gradient(135deg, #eff6ff, #bfdbfe);
}
.solea-step-card__icon svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}
.solea-step-card__icon.text-yellow { color: #ca8a04; }
.solea-step-card__icon.text-green { color: #4d7c0f; }
.solea-step-card__icon.text-blue { color: #2563eb; }

/* Effet "pulse" subtil au survol/tap sur l'icône. */
.solea-step-card:hover .solea-step-card__icon::after,
.solea-step-card:active .solea-step-card__icon::after {
  animation: soleaIconPulse 0.6s ease-out;
}
.solea-step-card__icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
}
@keyframes soleaIconPulse {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

.solea .section-badge {
  font-size: clamp(18px, 5vw, 32px);
  padding: 8px 20px;
}

.solea-diagram-panel {
  padding: 16px 12px 20px;
  border-radius: 16px;
}

/*=================  WHYUS  ====================== */
.advantages {
  padding: 0 !important;
}
.advantages-mobile-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  /* Conversion WebP qualité 82 : 2.3 Mo → 219 Ko (×10.5 plus léger). */
  background-image: url('assets/mobile/pknmob.webp?v=img20260606a');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.advantages > *:not(.advantages-mobile-card) {
  display: none !important;
}

.advantages-mobile-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 24, 56, 0.05) 0%,
    rgba(8, 24, 56, 0.25) 30%,
    rgba(8, 24, 56, 0.8) 60%,
    rgba(8, 24, 56, 0.95) 100%
  );
  z-index: 1;
}

.advantages-mobile-card__content {
  position: relative;
  z-index: 2;
  padding: 32px 24px;
  width: 100%;
}

.advantages-mobile-card__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 8vw, 40px);
  line-height: 1.1;
  font-weight: 850;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin: 0 0 8px 0;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.advantages-mobile-card__subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.4;
  color: #f1f5f9;
  margin: 0 0 28px 0;
  font-weight: 400;
}

.advantages-mobile-card__separator {
  width: 50px;
  height: 3px;
  background: linear-gradient(to right, #f97316, #22c55e);
  margin: 0 0 24px 0;
  border-radius: 2px;
}

.advantages-mobile-card__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.adv-mob-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* Effet verre translucide identique aux cartes SOLEA (.solea-inline-step). */
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 12px;
  padding: 16px 20px;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}

.adv-mob-card__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
  align-self: stretch;
  padding-bottom: 4px;
}

.adv-mob-card__line {
  flex-grow: 1;
  width: 2px;
  margin-bottom: 8px;
  border-radius: 2px;
}
.adv-mob-card__line.line-1 { background: #f97316; }
.adv-mob-card__line.line-2 { background: #65a30d; }
.adv-mob-card__line.line-3 { background: #eab308; }

.adv-mob-card__num {
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  line-height: 1;
}
.adv-mob-card__num.num-1 { color: #f97316; }
.adv-mob-card__num.num-2 { color: #65a30d; }
.adv-mob-card__num.num-3 { color: #eab308; }

.adv-mob-card__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}
.adv-mob-card__center h3 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: 0.01em;
}
.adv-mob-card__center p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #cbd5e1;
  margin: 0;
}

.adv-mob-card__right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.adv-mob-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}
.adv-mob-card__icon.icon-1 { color: #f97316; }
.adv-mob-card__icon.icon-2 { color: #65a30d; }
.adv-mob-card__icon.icon-3 { color: #eab308; }

.adv-mob-card__icon svg {
  width: 26px;
  height: 26px;
}

.advantages-mobile-card__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(90deg, #10214a, #0c1836);
  border: 1px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.advantages-mobile-card__btn:active {
  opacity: 0.8;
}


.nous-container{
  background-image: url('assets/mobile/whyus.webp?v=img20260606a');

}
.nous-features{
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: static; 
  bottom: auto; 
}
.nous-feature img{
  height: 80px;
}
.nous-feature p{
  font-size: 12px;
  background-color: #0d0e3e62;
  padding: 10px;
  text-align: center;
  border-radius: 10px;
}
.separtor{
  display: none;
}

/*=================  INTERET  ====================== */


/*=================  SIMULATOR  ====================== */
.simulator-bg{
  background-image: url('assets/mobile/simbg.webp?v=img20260606a');

}
.simulator-iframe{
  width: min(90%, 599px);
  height: 80%;
  margin: 0 auto;
}


.contact-grid{
  padding: 24px;
}
/*=================  PRECONISATION  ====================== */
.preconisation-container {
  background-image:
    linear-gradient(
      165deg,
      rgba(33, 48, 94, 0.48) 0%,
      rgba(33, 48, 94, 0.35) 55%,
      rgba(33, 48, 94, 0.08) 100%
    ),
    url('assets/mobile/precobg.webp?v=img20260606a');
  background-position: 70% center;
  padding: calc(max(var(--nav-height), 72px) + 16px) 16px 32px;
}

.preconisation-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.preconisation-header.section-header {
  width: 100%;
}

.preconisation-bubbles {
  max-width: calc(100vw - 32px);
}

.preconisation-intro {
  font-size: clamp(9px, 2.6vw, 13px);
  padding: 12px 14px;
}

.preconisation-steps--compact {
  max-width: 100%;
  width: 100%;
}

.preconisation-steps--compact .preconisation-steps-title {
  text-align: center;
}

.preco-steps-grid--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.preco-step-card--compact img {
  width: 44px;
  height: 44px;
}

.preco-step-card--compact p {
  font-size: 12px;
}

.preco-visite-panel {
  padding: 24px 20px;
}

.preco-visite-panel h2 {
  text-align: center;
}

@media (min-width: 901px) {
  .preconisation-steps--compact .preconisation-steps-title {
    text-align: left;
  }
}

@media (min-width: 520px) and (max-width: 900px) {
  .preco-steps-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .preco-step-card--compact {
    padding: 12px 8px 10px;
    padding-top: 28px;
  }

  .preco-step-card--compact .preco-step-number {
    top: -14px;
    width: 32px;
    height: 32px;
    font-size: 13px;
    border-width: 2px;
  }

  .preco-step-card--compact img {
    width: 40px;
    height: 40px;
  }

  .preco-step-card--compact p {
    font-size: 10px;
  }
}

@media (max-width: 519px) {
  .preco-steps-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.panel-container{
  background-image: url('./assets/mobile/psbg.webp?v=img20260606a');
}
.onduleur-container{
  background-image: url('./assets/mobile/ondbg.webp?v=img20260606a');
}
.panel-cards{
  flex-direction: column;
   gap: 20px;
   margin: 30px 0;
}
.panel-card{
  width: 250px;
  height: 250px;
}
.medal{
  width: 100px;
}
.panel-card-bottom{
  gap: 20px;
}
.panel-card h3,.panel-card-bottom h3{
  font-size: 14px;
}
.panel-card p,.panel-card-bottom p{
  font-size: 12px;
}



/* ---- Stockage — responsive ----
   (Anciennes règles désactivées car elles écrasaient le caption compact
   et faisaient passer les circuits SVG en opacity 0.65. Le styling
   mobile/portrait est entièrement géré par la media query
   @media (max-width: 768px) en haut du fichier, qui place le caption
   en haut dans le ciel et garde les circuits à opacity 1.) */
.storage-hero::before,
.storage-hero__overlay {
  background-position: 60% center;
}
.storage-ways {
  padding: 64px 22px;
}
.storage-ways__inner {
  grid-template-columns: 1fr;
  gap: 40px;
}
.storage-benefits {
  padding: 56px 22px;
}
.storage-benefits__list {
  grid-template-columns: 1fr;
  gap: 16px;
}
.storage-benefits__card {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 20px;
}
.benefit-num {
  font-size: 40px;
  align-self: flex-end;
  margin-top: 0;
}
.storage-cta {
  padding: 64px 22px;
}
.storage-cta__inner {
  gap: 20px;
}
}


/* ========================================
   SOLEA — Premium commercial section
   ======================================== */

.solea {
  position: relative;
  min-height: 100vh;
  /* padding-top abaissé pour faire arriver "L'offre SOLEA" juste sous
     le menu header fixe (~80 px). */
  padding: clamp(76px, 8vh, 92px) clamp(18px, 4vw, 72px) clamp(80px, 10vh, 120px);
  overflow: hidden;
  isolation: isolate;
}

.solea::before {
  content: none;
}

.solea::after {
  content: none;
}

.solea-inner {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Gap entre header / steps-desktop resserré. */
  gap: clamp(18px, 2.5vh, 28px);
}

.solea-header {
  /* Gap interne réduit pour resserrer badge + titre + intro + actions. */
  gap: clamp(8px, 1.2vh, 14px);
}

.solea .section-badge {
  background: transparent;
  color: #ffffff;
  font-size: clamp(36px, 6vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-shadow:
    0 5px 18px rgba(0, 0, 0, 0.38),
    0 18px 60px rgba(0, 0, 0, 0.28);
}

.solea-kicker {
  margin: 0;
  font-size: clamp(12px, 1.25vw, 16px);
  font-weight: 900;
  color: var(--secondary);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.solea-title {
  max-width: 1050px;
  /* margin-top : air contrôlé entre le kicker et le titre, suffisant
     pour ne pas coller mais sans excès. */
  margin: clamp(14px, 2.8vh, 42px) auto 0;
  color: #ffffff;
  font-size: clamp(34px, 5.3vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-align: center;
  text-wrap: balance;
  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.38),
    0 18px 60px rgba(0, 0, 0, 0.28);
}

.solea-intro {
  max-width: 900px;
  margin: 0 auto;
  color: #21305E;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.65;
  text-align: center;
  border-radius: 22px;
  padding: clamp(18px, 2vw, 28px) clamp(20px, 3vw, 38px);
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    0 24px 70px rgba(13, 18, 48, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.solea-benefits {
  /* Mini-puces 01/02/03 desktop masquées : remplacées par le nouveau bloc
     .solea-steps-desktop (3 glass cards horizontales) plus visuel. */
  display: none !important;
}

.solea-benefit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    0 18px 45px rgba(13, 18, 48, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform 260ms ease,
    box-shadow 260ms ease,
    background 260ms ease;
}

.solea-benefit:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 26px 58px rgba(13, 18, 48, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.solea-benefit strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 24px rgba(33, 48, 94, 0.28);
}

.solea-benefit span {
  color: var(--primary);
  font-size: clamp(13px, 1.18vw, 16px);
  font-weight: 900;
  line-height: 1.2;
}

.solea-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.solea-actions .btn {
  width: auto;
  min-width: 250px;
  height: 58px;
  border-radius: 999px;
}

.solea-secondary-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.solea-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  border-color: rgba(255, 255, 255, 0.92);
}

.solea-journey {
  width: 100%;
  display: flex;
  justify-content: center;
}

.solea-diagram-panel {
  position: relative;
  width: min(1100px, 100%);
  border-radius: 32px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68));
  border: 1px solid rgba(255, 255, 255, 0.46);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.solea-diagram-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  border: 1px solid rgba(33, 48, 94, 0.08);
  pointer-events: none;
  z-index: 3;
}

.solea-diagram-panel::after {
  content: "Un parcours complet : étude, production, stockage";
  position: absolute;
  left: clamp(18px, 2vw, 30px);
  bottom: clamp(16px, 2vw, 26px);
  z-index: 4;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(33, 48, 94, 0.88);
  color: #ffffff;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: 0 12px 30px rgba(33, 48, 94, 0.22);
}

.diagram-stage {
  position: relative;
  min-height: clamp(420px, 48vw, 620px);
}

.sol-asset {
  transition:
    transform 280ms ease,
    filter 280ms ease,
    opacity 280ms ease;
}

.step-1:hover,
.step-2:hover,
.step-3:hover {
  transform: translateY(-8px) scale(1.035);
  filter:
    drop-shadow(0 18px 24px rgba(33, 48, 94, 0.22))
    saturate(1.05);
  z-index: 5;
}

/* Responsive SOLEA */
@media (max-width: 1024px) {
  .solea {
    min-height: auto;
    padding-top: 96px;
  }

  .solea .section-badge {
    font-size: clamp(38px, 8vw, 72px);
  }

  .solea-title {
    font-size: clamp(36px, 7vw, 62px);
  }

  .solea-benefits {
    grid-template-columns: 1fr;
    max-width: 620px;
  }

  .solea-benefit {
    min-height: 70px;
  }

  .solea-diagram-panel {
    border-radius: 26px;
  }

  .diagram-stage {
    min-height: clamp(360px, 70vw, 540px);
  }
}

@media (max-width: 768px) {
  .solea {
    padding: 78px 16px 70px;
  }

  .solea-inner {
    gap: 34px;
  }

  .solea-header {
    gap: 13px;
  }

  .solea .section-badge {
    font-size: clamp(34px, 11vw, 48px);
    letter-spacing: -0.04em;
  }

  .solea-kicker {
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .solea-title {
    font-size: clamp(32px, 10vw, 46px);
    line-height: 1;
  }

  .solea-intro {
    padding: 18px;
    font-size: 15px;
    text-align: left;
  }

  .solea-benefit {
    padding: 14px;
    border-radius: 18px;
  }

  .solea-actions {
    width: 100%;
  }

  .solea-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .solea-diagram-panel {
    border-radius: 22px;
  }

  .solea-diagram-panel::after {
    right: 14px;
    left: 14px;
    text-align: center;
    white-space: normal;
  }

  .diagram-stage {
    min-height: 440px;
  }
}

@media (max-width: 480px) {
  .solea {
    padding-left: 12px;
    padding-right: 12px;
  }

  .solea-intro {
    border-radius: 18px;
  }

  .solea-benefit strong {
    min-width: 36px;
    height: 36px;
  }

  .diagram-stage {
    min-height: 390px;
  }
}

/* SOLEA — version intégrée, sans fonds bulles */
.solea .section-badge {
  padding: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}

.solea-intro {
  max-width: 860px;
  padding: 0;
  color: #ffffff;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.36);
}

.solea-benefits {
  max-width: 980px;
  gap: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}

.solea-benefit {
  min-height: auto;
  padding: 0 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.solea-benefit + .solea-benefit {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.solea-benefit:hover {
  transform: translateY(-3px);
  background: transparent;
  box-shadow: none;
}

.solea-benefit strong {
  min-width: auto;
  height: auto;
  background: transparent;
  color: var(--secondary);
  font-size: clamp(18px, 2vw, 26px);
  box-shadow: none;
}

.solea-benefit span {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.solea-diagram-panel {
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.solea-diagram-panel::before,
.solea-diagram-panel::after {
  display: none;
}

@media (max-width: 1024px) {
  .solea-benefits {
    gap: 14px;
    border-top: 0;
  }

  .solea-benefit {
    justify-content: center;
    padding: 0;
  }

  .solea-benefit + .solea-benefit {
    border-left: 0;
  }
}

@media (max-width: 768px) {
  .solea-intro {
    text-align: center;
  }
}

/* SOLEA — correction layout compact premium */
@media (min-width: 901px) {
  .solea {
    min-height: 100vh;
    padding: clamp(86px, 9vh, 118px) clamp(28px, 5vw, 78px) clamp(54px, 7vh, 86px);
    display: flex;
    align-items: center;
  }

  .solea-inner {
    width: min(1280px, 100%);
    display: grid;
    grid-template-columns: minmax(340px, 0.82fr) minmax(520px, 1.18fr);
    align-items: center;
    gap: clamp(34px, 5vw, 72px);
  }

  .solea-header {
    align-items: flex-start;
    text-align: left;
    gap: 14px;
  }

  .solea .section-badge {
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-align: left;
  }

  .solea-kicker {
    text-align: left;
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.16em;
  }

  .solea-title {
    max-width: 620px;
    margin: 0;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1;
    letter-spacing: -0.045em;
    text-align: left;
  }

  .solea-intro {
    max-width: 590px;
    margin: 0;
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.55;
    text-align: left;
  }

  .solea-benefits {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 6px 0 0;
    padding-top: 16px;
    gap: 10px;
  }

  .solea-benefit {
    justify-content: flex-start;
    padding: 0;
  }

  .solea-benefit + .solea-benefit {
    border-left: 0;
  }

  .solea-actions {
    justify-content: flex-start;
    margin-top: 10px;
  }

  .solea-actions .btn {
    min-width: 210px;
    height: 54px;
  }

  .solea-journey {
    align-self: center;
  }

  .solea-diagram-panel {
    width: 100%;
    max-width: 760px;
  }

  .diagram-stage {
    min-height: 0;
    aspect-ratio: 1000 / 560;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .solea {
    padding-top: 76px;
    padding-bottom: 42px;
  }

  .solea-inner {
    gap: 34px;
  }

  .solea .section-badge {
    font-size: clamp(30px, 3.6vw, 52px);
  }

  .solea-title {
    font-size: clamp(30px, 3.4vw, 48px);
  }

  .solea-header {
    gap: 10px;
  }

  .solea-benefits {
    padding-top: 10px;
    gap: 7px;
  }

  .solea-actions .btn {
    height: 48px;
  }
}

/* SOLEA — reset final : centré, lisible, schéma prioritaire.
   PADDING-TOP RÉDUIT : 82-110 → 76-90 px → "L'offre SOLEA" arrive
   juste sous le menu header fixe (~80 px de haut), pas un cran plus bas. */
.solea {
  min-height: 100vh;
  /* padding-top réduit pour remonter le badge "L'offre SOLEA" et le
     kicker "Soleil comme énergie alternative" dans le viewport. */
  padding: clamp(30px, 4vh, 50px) clamp(18px, 4vw, 56px) clamp(54px, 7vh, 82px);
  display: flex;
  align-items: flex-start;
  /* PARALLAX : background-attachment: fixed → la photo cover.webp reste
     fixe dans le viewport pendant que l'utilisateur scroll, le contenu
     glisse "par-dessus". Effet de profondeur premium.
     Note : ignoré par certains browsers mobile pour des raisons de perf —
     fallback sur scroll classique géré dans la media query mobile en bas. */
  background-image:
    linear-gradient(180deg, rgba(33, 48, 94, 0.65) 0%, rgba(33, 48, 94, 0.40) 30%, rgba(33, 48, 94, 0.10) 60%, rgba(33, 48, 94, 0) 100%),
    url('assets/cover.webp?v=img20260606a');
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-color: #21305E;
}

.solea-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Gap resserré entre header et bloc 3-étapes. */
  gap: clamp(14px, 2vh, 22px);
}

.solea-header {
  width: 100%;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.solea .section-badge {
  padding: 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  color: #fff;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-align: center;
  text-shadow: 0 5px 20px rgba(0, 0, 0, 0.38);
}

.solea-kicker {
  color: var(--secondary);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.16em;
  text-align: center;
}

.solea-title {
  max-width: 780px;
  /* margin-top : air contrôlé entre kicker et titre. Suffisant pour
     ne pas coller, pas trop pour rester groupé visuellement. */
  margin: clamp(14px, 2.8vh, 42px) auto 0;
  color: #fff;
  font-size: clamp(26px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 5px 20px rgba(0, 0, 0, 0.38);
}

.solea-intro {
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
  color: #fff;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.55;
  text-align: center;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.42);
}

.solea-benefits {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  max-width: 920px;
  margin: 4px auto 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.solea-benefit {
  min-height: auto;
  padding: 0 18px;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.solea-benefit + .solea-benefit {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.solea-benefit:hover {
  transform: translateY(-2px);
  background: transparent;
  box-shadow: none;
}

.solea-benefit strong {
  min-width: auto;
  height: auto;
  color: var(--secondary);
  background: transparent;
  box-shadow: none;
  font-size: clamp(15px, 1.4vw, 20px);
}

.solea-benefit span {
  color: #fff;
  font-size: clamp(12px, 1vw, 14px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.solea-actions {
  justify-content: center;
  margin-top: 4px;
  gap: 12px;
}

.solea-actions .btn {
  min-width: 210px;
  height: 50px;
}

.solea-journey {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: clamp(8px, 1.5vh, 18px);
}

.solea-diagram-panel {
  width: min(900px, 100%);
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.solea-diagram-panel::before,
.solea-diagram-panel::after {
  display: none;
}

.diagram-stage {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1000 / 560;
}

@media (max-width: 900px) {
  .solea {
    min-height: auto;
    padding: 82px 16px 60px;
  }

  .solea-title {
    font-size: clamp(28px, 8vw, 42px);
  }

  .solea-benefits {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-top: 0;
  }

  .solea-benefit,
  .solea-benefit + .solea-benefit {
    border-left: 0;
    padding: 0;
  }

  .solea-actions .btn {
    width: min(100%, 320px);
    min-width: 0;
  }

  .solea-diagram-panel {
    width: min(100%, 680px);
  }
}

/* SOLEA — titre sur une ligne desktop */
@media (min-width: 901px) {
  .solea-title {
    max-width: none;
    width: 100%;
    white-space: nowrap;
    font-size: clamp(28px, 3.25vw, 48px);
  }
}

/* SOLEA — titre centré */
@media (min-width: 901px) {
  .solea-title {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* SOLEA — centrage réel du titre sur la page */
@media (min-width: 901px) {
  .solea-title {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding: 0 24px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
  }
}

/* SOLEA — correction centrage titre sans débordement */
@media (min-width: 901px) {
  .solea-title {
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    display: block;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(24px, 3vw, 42px);
  }
}


/* SOLEA — intro en deux lignes avec taille fixe */
@media (min-width: 901px) {
  .solea-intro {
    max-width: 980px;
    width: 100%;
    font-size: 15px;
    line-height: 1.55;
    text-align: center;
  }

  .solea-intro-break {
    display: block;
  }
}

@media (max-width: 900px) {
  .solea-intro-break {
    display: none;
  }
}

/* SOLEA — intro justifiée gauche/droite */
@media (min-width: 901px) {
  .solea-intro {
    text-align: justify;
    text-align-last: center;
  }
}

/* ============================================
   SPLIT INTRO MODAL (Particulier / PRO)
   ============================================ */
html.audience-set .audience-gate,
.audience-gate.is-closed {
  display: none !important;
}

.audience-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* width: 100% au lieu de 100vw — évite l'overflow horizontal sur les
     browsers qui incluent la scrollbar dans vw (Edge/Lenovo notamment),
     ce qui causait une bande verticale parasite à droite. */
  width: 100%;
  height: 100%;
  background: #071827;
  overflow: hidden;
  /* Transition du background : quand l'animation des portes commence
     (.is-animating), on bascule en transparent pour que la page derrière
     soit visible pendant le slide. */
  transition: background 300ms ease 200ms;
  /* By default it's visible, so it doesn't flash the homepage.
     It will be hidden by script.js after a choice is made */
}

/* Pendant l'animation des portes : fond bleu nuit → transparent → on voit
   la page d'accueil (Particulier ou Pro) DERRIÈRE les cartes qui glissent. */
.audience-gate.is-animating {
  background: transparent;
}

/* is-open is no longer strictly needed for visibility since it's visible by default,
   but we can leave it for compatibility */
.audience-gate.is-open {
  visibility: visible;
  opacity: 1;
}

.audience-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem, 5vw, 5rem);
  color: #fff;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  isolation: isolate;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  cursor: pointer;
}

.audience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 900ms ease;
  z-index: -2;
}

.audience-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 20, 35, 0.10) 0%,
    rgba(5, 20, 35, 0.78) 100%
  );
  transition: opacity 500ms ease;
  z-index: -1;
}

/* Border-right retiré : créait un trait blanc visible au milieu entre les
   deux cartes Particulier / Professionnel. Le séparateur graphique (logo
   CAPEO en infinity) suffit à scinder les deux moitiés. */
.audience-card:first-child {
  border-right: none;
}

.audience-card:hover::before {
  transform: scale(1.06);
}

.audience-card:hover .audience-card__overlay {
  opacity: 0.88;
}

.audience-card__content {
  max-width: 540px;
  transform: translateY(0);
  transition: transform 500ms ease;
  pointer-events: none;
}

.audience-card:hover .audience-card__content {
  transform: translateY(-10px);
}

.audience-card__label {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: clamp(0.75rem, 0.9vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.audience-card__title {
  margin: 0 0 1rem;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.audience-card__text {
  max-width: 460px;
  margin: 0 0 2rem;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.audience-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 52px;
  padding: 0 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    background 300ms ease,
    color 300ms ease,
    transform 300ms ease;
}

.audience-card:hover .audience-card__button {
  background: #fff;
  color: #071827;
  transform: translateY(-2px);
}

/* Animations for "Elevator doors" */
.audience-gate.is-animating .split-left {
  transform: translateX(-100%);
}

.audience-gate.is-animating .split-right {
  transform: translateX(100%);
}

.split-logo-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: clamp(80px, 10vw, 120px);
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.audience-gate:hover .split-logo-center {
  opacity: 0.8;
}

.logo-base {
  display: block;
  width: 100%;
  height: auto;
}

.logo-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s ease-in-out;
}

.audience-gate.is-loading .split-logo-center {
  opacity: 1;
}

.audience-gate.is-loading .logo-fill {
  clip-path: inset(0 0 0 0);
}

.audience-gate.is-animating .split-logo-center {
  opacity: 0;
}

@media (max-width: 768px) {
  .audience-gate {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  /* Empilage vertical : la jonction des 2 cartes est au bas de la 1ʳᵉ carte,
     soit à 50vh (les cartes utilisent min-height: 50vh). Le logo doit y être
     centré. On le cale donc sur 50vh (et non top:50% du gate) : sur iOS la
     barre d'adresse fait que le gate (height:100%) est plus court que 100vh,
     ce qui décalait le logo au-dessus de la vraie jonction. */
  .split-logo-center {
    top: 50vh;
  }

  .audience-card {
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 2rem;
    text-align: center;
  }

  .audience-card:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

  .audience-card__content {
    max-width: 420px;
  }

  .audience-card__text {
    margin-left: auto;
    margin-right: auto;
  }

  .audience-card__title {
    font-size: clamp(2.8rem, 13vw, 4.5rem);
  }

  .audience-gate.is-animating .split-left {
    transform: translateY(-100%);
  }

  .audience-gate.is-animating .split-right {
    transform: translateY(100%);
  }
}

/* ============================================
   AUDIENCE-AWARE NAV (Particulier / PRO)
   ============================================ */
/* Default: show Particulier menu, hide PRO */
.nav-list--pro { display: none; }
html[data-audience="pro"] .nav-list--particulier { display: none; }
html[data-audience="pro"] .nav-list--pro { display: flex; }

/* Photo de fond Hero en mode PRO */
html[data-audience="pro"] .hero-bg {
  background-image: url('assets/pro.webp?v=img20260627b');
}
html[data-audience="pro"] .sun-rays {
  display: none;
}
/* Overlay du hero pour le mode PRO : sombre à droite, transparent à gauche */
html[data-audience="pro"] .hero-gradient {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.18) 35%, rgba(0, 0, 0, 0.03) 70%, rgba(254, 243, 199, 0.05) 100%);
}

/* Hero PRO : contenu aligné à droite */
html[data-audience="pro"] .hero-content {
  align-items: flex-end !important;
  justify-content: flex-end !important;
}
html[data-audience="pro"] .hero-text {
  flex: 0 1 auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  width: auto !important;
}
html[data-audience="pro"] .hero-title-img {
  margin-left: auto !important;
  margin-right: 0 !important;
  display: block !important;
}
html[data-audience="pro"] .hero-title {
  text-align: right !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
html[data-audience="pro"] .hero-buttons {
  justify-content: flex-end !important;
}
html[data-audience="pro"] .hero-stats {
  justify-content: flex-end !important;
}

/* Mode PRO : header pill = on rétrécit au contenu exact (4 items courts
   + logo + CTA) pour éviter les grands vides à gauche de "Solutions" et
   à droite de "Méthodologie". Width fit-content + gap pour bien aérer.
   Centré horizontalement via margin: 0 auto (override le right:200px
   du rule générique desktop). */
/* Desktop UNIQUEMENT (≥1025px) : pill pro = compact centré.
   Sur mobile, on ne touche à rien → le pro hérite à 100% du comportement
   particulier (logo + burger flush gauche, expansion au tap, etc.). */
@media (min-width: 1025px) {
  html[data-audience="pro"] .header:not(.scrolled) .header-container {
    max-width: fit-content;
    width: fit-content;
    gap: 36px;
    padding-right: 24px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html[data-audience="pro"] .nav-list--pro {
    gap: 28px;
  }
}

/* Pas d'espace inutile autour de la page PRO premium (pro2-wrap) */
html[data-audience="pro"] .pro-section.pro2-wrap {
  padding: 0 !important;
  background: transparent !important;
}
/* Le header étant fixed, on annule le margin-top de main injecté par JS sur la page pro */
html[data-audience="pro"] main {
  margin-top: 0 !important;
}

/* Hero PRO — DESKTOP : section haute + fond sticky → la transition
   jour→nuit au scroll est ÉTALÉE et douce (comme Particulier ~280vh).
   Le contenu tient dans l'enfant sticky 100vh (grille côte à côte). */
html[data-audience="pro"] .pro2-hero {
  height: 240vh;
  min-height: 240vh;
  display: block;
  padding: 0 !important;
  position: relative;
  background: #0c1432;
}

html[data-audience="pro"] .pro2-hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(95px, 11vh, 130px) 0 clamp(28px, 4vh, 50px);
}

html[data-audience="pro"] .pro2-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 540px at 85% -10%, rgba(225,122,45,.15), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(51,75,148,.25), transparent 55%),
    linear-gradient(180deg, rgba(12,20,50,0.62) 0%, rgba(19,28,68,0.52) 55%, rgba(15,22,56,0.62) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Scintillements de nuit (Hero Pro) */
.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--duration, 3s) infinite ease-in-out;
  animation-delay: var(--delay, 0s);
}

.sparkle:nth-child(1) { --delay: 0.2s; --duration: 3.2s; --max-opacity: 0.9; --min-opacity: 0.1; }
.sparkle:nth-child(2) { --delay: 1.7s; --duration: 4.5s; --max-opacity: 0.5; --min-opacity: 0.05; }
.sparkle:nth-child(3) { --delay: 0.5s; --duration: 2.8s; --max-opacity: 1.0; --min-opacity: 0.2; }
.sparkle:nth-child(4) { --delay: 2.4s; --duration: 5.1s; --max-opacity: 0.6; --min-opacity: 0.1; }
.sparkle:nth-child(5) { --delay: 1.1s; --duration: 3.7s; --max-opacity: 0.8; --min-opacity: 0.15; }
.sparkle:nth-child(6) { --delay: 0.8s; --duration: 4.2s; --max-opacity: 0.4; --min-opacity: 0.0; }
.sparkle:nth-child(7) { --delay: 2.0s; --duration: 3.1s; --max-opacity: 0.95; --min-opacity: 0.2; }
.sparkle:nth-child(8) { --delay: 2.8s; --duration: 4.8s; --max-opacity: 0.7; --min-opacity: 0.1; }

@keyframes twinkle {
  0%, 100% { 
    opacity: var(--min-opacity, 0.1); 
    transform: scale(0.5); 
    box-shadow: none; 
  }
  50% { 
    opacity: var(--max-opacity, 1); 
    transform: scale(1.5); 
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, var(--max-opacity, 0.8)), 
                0 0 20px 5px rgba(225, 122, 45, calc(var(--max-opacity, 0.8) * 0.5)); 
  }
}

html[data-audience="pro"] .pro2-hero .storage-daynight-bg {
  z-index: -1;
}

/* ----------------------------------------------------------------
   Hero PRO — MOBILE UNIQUEMENT (≤768px).
   Sur mobile le contenu (titre + carte « Pourquoi les pros » + KPIs)
   dépasse 100vh : on dé-colle le hero (tout reste visible, pas de clip)
   et on joue la transition jour↔nuit en boucle douce (20s) au lieu du
   scroll. L'animation CSS prime sur l'opacité inline posée par le JS. */
@media (max-width: 768px) {
  html[data-audience="pro"] .pro2-hero {
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }
  html[data-audience="pro"] .pro2-hero-sticky {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }
  html[data-audience="pro"] .pro2-hero #night-img,
  html[data-audience="pro"] .pro2-hero #night-sparkles {
    animation: proHeroDayNight 20s ease-in-out infinite;
  }
  html[data-audience="pro"] .pro2-hero #day-img {
    animation: proHeroDayDim 20s ease-in-out infinite;
  }
}
@keyframes proHeroDayNight {
  0%, 16%   { opacity: 0; }
  44%, 56%  { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes proHeroDayDim {
  0%, 16%   { filter: brightness(1); }
  44%, 56%  { filter: brightness(0.7); }
  84%, 100% { filter: brightness(1); }
}

html[data-audience="pro"] .pro2-hero .pro2-container {
  width: 100%;
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vh, 36px);
}

/* KPIs intégrés au hero — version compacte sur fond dark */
html[data-audience="pro"] .pro2-kpis.pro2-kpis--in-hero {
  background: transparent !important;
  padding: 0 !important;
}
html[data-audience="pro"] .pro2-kpis--in-hero .pro2-kpis__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 860px) {
  html[data-audience="pro"] .pro2-kpis--in-hero .pro2-kpis__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
html[data-audience="pro"] .pro2-kpis--in-hero .pro2-kpi {
  background: rgba(15, 22, 56, 0.55) !important;
  padding: 18px 18px 20px !important;
  color: #fff !important;
  position: relative;
}
html[data-audience="pro"] .pro2-kpis--in-hero .pro2-kpi__num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
html[data-audience="pro"] .pro2-kpis--in-hero .pro2-kpi__num .suffix {
  color: #e17a2d;
  font-size: 0.7em;
  margin-left: 2px;
}
html[data-audience="pro"] .pro2-kpis--in-hero .pro2-kpi__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}
html[data-audience="pro"] .pro2-kpis--in-hero .pro2-kpi__bar {
  margin-top: 10px;
  height: 2px;
  width: 28px;
  background: #e17a2d;
  border-radius: 2px;
}

/* Variante "carte texte" du bandeau KPI hero (Agriculture) :
   titre bold sans-serif blanc + description plus claire, même cadre. */
html[data-audience="pro"] .pro2-kpis--in-hero .pro2-kpi--card .pro2-kpi__title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
html[data-audience="pro"] .pro2-kpis--in-hero .pro2-kpi--card .pro2-kpi__label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

/* Section "Une expertise calibrée…" : adaptée à l'écran avec photo expertise.webp */
html[data-audience="pro"] .pro2-section--segments {
  min-height: 100vh;
  padding: clamp(60px, 8vh, 100px) 0 !important;
  display: flex;
  align-items: center;
  position: relative;
  background:
    linear-gradient(180deg, rgba(253, 252, 250, 0.55) 0%, rgba(253, 252, 250, 0.70) 100%),
    url('assets/expertise.webp?v=img20260606a') !important;
  background-size: auto, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: scroll, scroll !important;
}
html[data-audience="pro"] .pro2-section--segments > .pro2-container {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Cartes "profil d'activité" devenues des liens cliquables (vers les pages
   segments). On neutralise le style lien et on ajoute une affordance claire. */
a.pro2-segment {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* Petit chevron "découvrir" en haut à droite, révélé au survol */
a.pro2-segment::after {
  content: "→";
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 18px;
  color: var(--c-orange);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s var(--pro-ease, ease);
  z-index: 2;
}
a.pro2-segment:hover::after {
  opacity: 1;
  transform: translateX(0);
}
/* Carte du segment EN COURS (sur les pages segments) : non cliquable, mise en avant */
a.pro2-segment[aria-current="page"] {
  cursor: default;
  border-color: var(--seg-c, #e17a2d);
  box-shadow: 0 18px 44px -20px rgba(33, 48, 94, .22);
}
a.pro2-segment[aria-current="page"]:hover { transform: none; }
a.pro2-segment[aria-current="page"]::after { content: ""; }

/* ---- Couleur d'accent par profil (au survol des cartes) ----
   PME = orange · Industries = jaune · Collectivités = bleu · Agriculture = vert.
   On scope à .pro2-segments + :nth-child pour battre les règles inline. */
.pro2-segments a.pro2-segment:nth-of-type(1) { --seg-c: #e17a2d; --seg-c2: #c8651a; } /* PME & TPE */
.pro2-segments a.pro2-segment:nth-of-type(2) { --seg-c: #f6b800; --seg-c2: #d99e00; } /* Industries & logistique */
.pro2-segments a.pro2-segment:nth-of-type(3) { --seg-c: #3f86d4; --seg-c2: #2f6fb8; } /* Collectivités & public — bleu plus clair */
.pro2-segments a.pro2-segment:nth-of-type(4) { --seg-c: #2fbf7a; --seg-c2: #22a866; } /* Agriculture — vert plus clair */

/* Au survol, la couleur du périmètre est fournie par le liseret animé (ci-dessous),
   on ne colore donc plus la bordure instantanément. */
/* Liseret qui se DESSINE autour de la carte survolée, dans la couleur du profil. */
.pro2-seg-outline{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.pro2-seg-outline rect{
  fill:none; stroke: var(--seg-c, #e17a2d); stroke-width:2.5;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition: stroke-dashoffset .85s ease;
}
.pro2-segments a.pro2-segment:hover .pro2-seg-outline rect{ stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce){ .pro2-seg-outline rect{ transition:none; } }
.pro2-segments a.pro2-segment:hover .pro2-segment__icon {
  background: linear-gradient(135deg, var(--seg-c, #e17a2d), var(--seg-c2, #c8651a)) !important;
}
.pro2-segments a.pro2-segment:hover .pro2-segment__tag {
  color: var(--seg-c, #e17a2d);
}
.pro2-segments a.pro2-segment::after {
  color: var(--seg-c, #e17a2d) !important;
}
/* teinte diagonale au survol, assortie à la couleur du profil */
.pro2-segments a.pro2-segment:nth-of-type(1):hover::before { background: linear-gradient(160deg, rgba(225,122,45,.08), transparent 55%); }
.pro2-segments a.pro2-segment:nth-of-type(2):hover::before { background: linear-gradient(160deg, rgba(246,184,0,.10), transparent 55%); }
.pro2-segments a.pro2-segment:nth-of-type(3):hover::before { background: linear-gradient(160deg, rgba(63,134,212,.10), transparent 55%); }
.pro2-segments a.pro2-segment:nth-of-type(4):hover::before { background: linear-gradient(160deg, rgba(47,191,122,.10), transparent 55%); }

/* Effet "comme SOLEA" : pulse séquentiel des 4 cartes profils + curseur démo
   qui fait leur tournée en boucle (tout se fige au vrai survol). */
.pro2-segments{ position: relative; }
.pro2-segments a.pro2-segment:nth-of-type(1){ --pulse-order:0; }
.pro2-segments a.pro2-segment:nth-of-type(2){ --pulse-order:1; }
.pro2-segments a.pro2-segment:nth-of-type(3){ --pulse-order:2; }
.pro2-segments a.pro2-segment:nth-of-type(4){ --pulse-order:3; }
.pro2-segments a.pro2-segment:not([aria-current="page"]){
  animation: segCardPulse 8s ease-in-out calc(1s + var(--pulse-order,0) * 2s) infinite;
}
@keyframes segCardPulse{
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.045); }
  17%      { transform: scale(1); }
}
/* survol réel d'une carte : on stoppe son pulse (le soulèvement hover reprend la main) */
.pro2-segments a.pro2-segment:hover{ animation: none; }

/* curseur démo qui tourne sur les 4 cartes (calé sur le pulse) */
.pro2-seg-cursor{
  position:absolute; top:80%; left:18%; width:30px; height:30px;
  margin-left:-14px; z-index:6; pointer-events:none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
  transform-origin:30% 30%; opacity:0;
  animation: segCursorAppear .5s ease-out .6s forwards,
             segCursorTour 8s ease-in-out 1s infinite;
}
@keyframes segCursorAppear{ from{opacity:0} to{opacity:1} }
@keyframes segCursorTour{
  0%   { left:18%; transform: translateX(0) rotate(0deg) scale(1); }
  6%   { left:18%; transform: translateX(2px) rotate(-12deg) scale(.8); }
  12%  { left:18%; transform: translateX(0) rotate(0deg) scale(1); }
  22%  { left:43%; transform: translateX(0) rotate(0deg) scale(1); }
  31%  { left:43%; transform: translateX(2px) rotate(-12deg) scale(.8); }
  37%  { left:43%; transform: translateX(0) rotate(0deg) scale(1); }
  47%  { left:68%; transform: translateX(0) rotate(0deg) scale(1); }
  56%  { left:68%; transform: translateX(2px) rotate(-12deg) scale(.8); }
  62%  { left:68%; transform: translateX(0) rotate(0deg) scale(1); }
  72%  { left:92%; transform: translateX(0) rotate(0deg) scale(1); }
  81%  { left:92%; transform: translateX(2px) rotate(-12deg) scale(.8); }
  87%  { left:92%; transform: translateX(0) rotate(0deg) scale(1); }
  100% { left:18%; transform: translateX(0) rotate(0deg) scale(1); }
}
.pro2-segments:hover .pro2-seg-cursor{ opacity:0; animation-play-state:paused; }
@media (max-width:1024px){ .pro2-seg-cursor{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .pro2-segments a.pro2-segment{ animation:none !important; }
  .pro2-seg-cursor{ display:none; }
}

/* Section "Une installation solaire, sans débourser un euro" — design photo */
html[data-audience="pro"] .pro2-section--capex,
html[data-audience="pro"] .pro2-capex-hero {
  min-height: 100vh;
  padding: 0 !important;
  background:
    linear-gradient(110deg, rgba(253, 252, 250, 0.35) 0%, rgba(253, 252, 250, 0.12) 45%, rgba(253, 252, 250, 0) 70%),
    url('assets/Zdebourser.webp?v=img20260606a') !important;
  background-size: auto, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  color: var(--c-navy);
  position: relative;
  display: flex;
  align-items: stretch;
}
.pro2-capex-hero__container {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(60px, 9vh, 110px) clamp(28px, 5vw, 80px) clamp(28px, 5vh, 60px);
  display: flex;
  flex-direction: column;
}

/* Titre */
.pro2-capex-hero__copy {
  max-width: 620px;
}
.pro2-capex-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0 0 22px;
}
.pro2-capex-title .t-navy { color: #1c2856; }
.pro2-capex-title .t-gold { color: #e8b13a; }
.pro2-capex-title .t-green { color: #22a866; }

.pro2-capex-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: #22a866;
  border-radius: 2px;
  margin-bottom: 24px;
}
.pro2-capex-hero__copy p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: #1c2856;
}
.pro2-capex-hero__copy p strong { font-weight: 700; color: #1c2856; }

/* Badge 0€ */
.pro2-capex-badge {
  position: absolute;
  top: clamp(60px, 9vh, 110px);
  right: clamp(28px, 5vw, 80px);
  width: clamp(140px, 14vw, 180px);
  height: clamp(140px, 14vw, 180px);
  border-radius: 50%;
  /* Pastille bleu nuit PLEINE (au lieu d'un fond quasi transparent) :
     le texte blanc + le 0€ vert ressortent nettement, même sur un ciel
     clair. Léger dégradé + ombre = rendu premium. */
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 32% 26%, rgba(52, 75, 148, 0.55), transparent 60%),
    linear-gradient(150deg, rgba(20, 30, 68, 0.96), rgba(11, 19, 48, 0.97));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:
    0 16px 38px -12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  padding: 14px;
  z-index: 3;
}
/* Liseret (anneau fin) à l'intérieur de la pastille. */
.pro2-capex-badge::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(52, 210, 127, 0.65);
  pointer-events: none;
}
.pro2-capex-badge__num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: #34d27f;
  letter-spacing: -0.02em;
}
.pro2-capex-badge__euro { font-size: 0.55em; vertical-align: super; margin-left: 2px; }
.pro2-capex-badge__label {
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: #ffffff;
}

/* Bandeau bas 5 piliers */
.pro2-capex-pillars {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: rgba(15, 22, 56, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 22px 12px;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
}
.pro2-capex-pillar {
  position: relative;
  text-align: center;
  padding: 4px 14px;
}
.pro2-capex-pillar + .pro2-capex-pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.pro2-capex-pillar__icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
  color: #ffffff;
}
.pro2-capex-pillar__icon svg { width: 100%; height: 100%; }
.pro2-capex-pillar p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 900px) {
  .pro2-capex-pillars {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 0;
  }
  .pro2-capex-pillar + .pro2-capex-pillar::before { display: none; }
  .pro2-capex-badge {
    width: 120px;
    height: 120px;
    top: 20px;
    right: 20px;
  }
}

/* ============================================
   Section "Quatre étapes" — adaptée à l'écran + dynamique
   ============================================ */
html[data-audience="pro"] .pro2-section--method {
  min-height: 100vh;
  padding: clamp(60px, 8vh, 100px) 0 !important;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 12% 22%, rgba(225, 122, 45, 0.08), transparent 50%),
    radial-gradient(circle at 88% 78%, rgba(34, 168, 102, 0.08), transparent 50%),
    linear-gradient(180deg, #fdfcfa 0%, #f5f4f0 100%);
}
html[data-audience="pro"] .pro2-section--method > .pro2-container {
  width: 100%;
}

.pro2-section--method .t-accent {
  font-style: normal;
  background: linear-gradient(135deg, #e17a2d 0%, #22a866 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pro2-method {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 36px);
  padding-top: 30px;
}

/* Ligne connectant les nodes */
.pro2-method__track {
  position: absolute;
  top: 80px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(33, 48, 94, 0.15) 0%,
    rgba(225, 122, 45, 0.55) 35%,
    rgba(34, 168, 102, 0.55) 70%,
    rgba(33, 48, 94, 0.15) 100%);
  z-index: 0;
}

.pro2-method__step {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pro2-method__step:hover {
  transform: translateY(-8px);
}

.pro2-method__node {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(33, 48, 94, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 18px 36px -16px rgba(33, 48, 94, 0.30),
    0 4px 12px -4px rgba(33, 48, 94, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--c-navy);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.pro2-method__node::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, transparent 0deg, rgba(225, 122, 45, 0.0) 90deg, rgba(225, 122, 45, 0.55) 180deg, rgba(34, 168, 102, 0.55) 270deg, transparent 360deg);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
.pro2-method__step:hover .pro2-method__node {
  transform: scale(1.06) rotate(-3deg);
  box-shadow:
    0 24px 50px -16px rgba(225, 122, 45, 0.45),
    0 6px 18px -6px rgba(33, 48, 94, 0.30);
}
.pro2-method__step:hover .pro2-method__node::before {
  opacity: 1;
  animation: method-spin 4s linear infinite;
}
@keyframes method-spin {
  to { transform: rotate(360deg); }
}

.pro2-method__num {
  /* Numéros (01–04) retirés des ronds : redondants avec le picto et le tag d'étape */
  display: none;
}
.pro2-method__icon {
  width: 44px;
  height: 44px;
  color: var(--c-navy);
  transition: color 0.3s ease, transform 0.3s ease;
}
.pro2-method__step:hover .pro2-method__icon {
  color: #e17a2d;
  transform: translateY(-2px);
}

.pro2-method__body {
  max-width: 240px;
}
.pro2-method__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(225, 122, 45, 0.10);
  color: #e17a2d;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pro2-method__body h4 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--c-navy);
}
.pro2-method__body p {
  font-size: 13.5px;
  color: var(--c-muted);
  line-height: 1.55;
  margin: 0;
}

/* Apparition échelonnée (utilise data-step) */
.pro2-method__step[data-step="01"] .pro2-method__node { animation-delay: 0s; }
.pro2-method__step[data-step="02"] .pro2-method__node { animation-delay: 0.15s; }
.pro2-method__step[data-step="03"] .pro2-method__node { animation-delay: 0.30s; }
.pro2-method__step[data-step="04"] .pro2-method__node { animation-delay: 0.45s; }

@media (max-width: 880px) {
  .pro2-method {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pro2-method__track { display: none; }
  .pro2-method__step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 22px;
  }
  .pro2-method__body { max-width: none; }
  /* Fix : en row le node 110x110 se faisait compresser horizontalement
     par le flex parent → forme ovale. flex-shrink:0 + aspect-ratio
     garantissent un rond parfait. */
  .pro2-method__node {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    aspect-ratio: 1 / 1;
  }
  .pro2-method__icon {
    width: 38px;
    height: 38px;
  }
}

/* Cas client — fond Logistique.webp visible derrière le voile bleu + halo orange */
html[data-audience="pro"] .pro2-case__visual {
  background:
    radial-gradient(circle at 30% 30%, rgba(225, 122, 45, 0.40), transparent 55%),
    linear-gradient(160deg, rgba(33, 48, 94, 0.45) 0%, rgba(12, 20, 50, 0.55) 100%),
    url('assets/Logistique.webp?v=img20260606a') !important;
  background-size: auto, auto, cover !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
}

/* ============================================
   AUDIENCE SWITCH — top-right floating toggle
   ============================================ */
.audience-switch {
  position: fixed;
  /* Aligne le centre vertical du switch sur celui de la PILL du header
     (.header-container) : pill top=16, height=62.8 → centre à y=47.4.
     transform: translateY(-50%) centre le switch sur cette valeur. */
  top: 47px;
  right: 22px;
  transform: translateY(-50%);
  z-index: 1100;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 4px;
  background: rgba(253, 252, 250, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(33, 48, 94, 0.10);
  border-radius: 999px;
  box-shadow:
    0 8px 24px -8px rgba(33, 48, 94, 0.18),
    0 2px 6px -2px rgba(33, 48, 94, 0.10);
  font-family: inherit;
  isolation: isolate;
}
.audience-switch-option {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.25s ease;
  font-family: inherit;
  white-space: nowrap;
  text-align: center;
}
.audience-switch-option:hover {
  color: var(--primary);
}
.audience-switch-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 999px;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(33, 48, 94, 0.25);
  pointer-events: none;
}
/* Default (no audience set) — Particulier as selected */
.audience-switch-option:nth-child(1) { color: #ffffff; }
html[data-audience="pro"] .audience-switch-option:nth-child(1) { color: var(--muted-foreground); }
html[data-audience="pro"] .audience-switch-option:nth-child(2) { color: #ffffff; }
html[data-audience="pro"] .audience-switch-slider { transform: translateX(100%); }

@media (max-width: 600px) {
  /* Audience-switch centrée VERTICALEMENT sur la pill du header.
     Pill mobile : padding-top 16 (header) + padding-y 8 (container) +
     hauteur contenu max(logo 22, burger 28) = 28 + padding-y 8 = 44 px
     ⇒ centre pill à y = 16 + 22 = 38. On y aligne le centre du switch
     avec translateY(-50%). */
  .audience-switch {
    /* Toggle ~39px de haut, centré sur la pill du header (centre à 38px)
       → top edge ≈ 18px. PAS de transform : un `transform` sur un élément
       `position: fixed` CASSE le fixed sur iOS (le toggle se désaligne du
       header pendant le scroll / les transitions de la barre d'adresse). */
    top: 18px;
    right: 16px;
    transform: none;
  }
  .audience-switch-option {
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: 0.1px;
  }

  /* Burger menu compact (28×28). Padding interne réduit à 2 pour
     coller davantage les barres au bord du bouton et donc au logo. */
  .mobile-menu-btn {
    width: 28px;
    height: 28px;
    padding: 2px;
    gap: 4px;
  }
  .mobile-menu-btn span {
    width: 18px;
    height: 1.6px;
  }

  /* Header pill COMPACT : largeur ajustée au contenu, aligné à gauche.
     Gap très resserré (4px) pour que le burger soit collé au logo.
     Padding horizontal interne réduit aussi pour une pill plus serrée. */
  .header-container {
    max-width: fit-content;
    margin: 0;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 12px;
  }

  .header-container:has(.nav.mobile-active) {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    background: #fff;
  }

  .nav.mobile-active {
    width: 100%;
    left: 0;
    border-radius: 0 0 20px 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  }

  /* Logo réduit sur mobile : 110×32 desktop → 78×22 pour une pill plus
     compacte (le burger 28px se loge à côté sans gonfler la pill). */
  .header .logo-icon,
  .logo-icon {
    width: 78px;
    height: 22px;
  }

  /* Au scroll, on garde EXACTEMENT la même pill compacte qu'en haut
     de page (mêmes padding, gap, alignement) pour qu'il n'y ait aucun
     saut visuel entre les deux états. Neutralise la règle desktop
     `.scrolled .header-container { max-width: 160px; ... }`. */
  .scrolled .header-container,
  .scrolled .header-container:hover {
    max-width: fit-content;
    margin: 0;
    padding: 8px 12px;
    gap: 4px;
    justify-content: flex-start;
  }
  /* La règle hover desktop ressuscite la nav+cta dans le pill agrandi ;
     sur mobile pas de hover et nav/cta restent cachés. */
  .scrolled .header-container:hover .nav,
  .scrolled .header-container:hover .header-cta {
    display: none;
  }
}

/* ============================================
   AUDIENCE VISIBILITY — sections par profil
   ============================================ */
/* Section PRO masquée par défaut */
.pro-section { display: none; }
/* Sections taggées data-pro-only (notamment #solutions sur la home avec
   classes pro2-section--capex) : masquées par défaut, visibles uniquement
   quand l'audience pro est active. Évite que la section "Une installation
   solaire sans débourser un euro" apparaisse au milieu de la home
   Particulier (entre Nos objectifs et l'équipe). */
[data-pro-only]:not(.pro-section) { display: none; }
html[data-audience="pro"] [data-pro-only]:not(.pro-section) { display: revert; }
/* Mode PRO : afficher la section PRO */
html[data-audience="pro"] .pro-section { display: block; }
/* Mode PRO : masquer les sections particulier */
html[data-audience="pro"] .equipe,
html[data-audience="pro"] .solea,
html[data-audience="pro"] .advantages,
html[data-audience="pro"] .interet,
html[data-audience="pro"] .testimonials {
  display: none !important;
}

/* ============================================
   SECTION "POUR LES PROFESSIONNELS"
   ============================================ */
.pro-section {
  padding: clamp(80px, 10vh, 140px) clamp(20px, 4vw, 64px);
  background: linear-gradient(180deg, #fdfcfa 0%, #f5f4f0 100%);
}
.pro-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.pro-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vh, 80px);
}
.pro-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(225, 122, 45, 0.12);
  color: #e17a2d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.pro-title {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.2vw, 50px);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.pro-title-accent {
  background: linear-gradient(135deg, #e17a2d, #22a866);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pro-subtitle {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* Segments cibles */
.pro-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: clamp(48px, 6vh, 80px);
}
.pro-segment {
  background: #ffffff;
  border: 1px solid rgba(33, 48, 94, 0.08);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 4px 12px -4px rgba(33, 48, 94, 0.08);
}
.pro-segment:hover {
  transform: translateY(-6px);
  border-color: rgba(225, 122, 45, 0.30);
  box-shadow: 0 18px 40px -16px rgba(33, 48, 94, 0.25);
}
.pro-segment-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(33, 48, 94, 0.08), rgba(225, 122, 45, 0.10));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.pro-segment-icon svg { width: 30px; height: 30px; }
.pro-segment h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
}
.pro-segment p {
  margin: 0;
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.55;
}

/* Piliers (3 colonnes ROI / RSE / Clé en main) */
.pro-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  padding: clamp(36px, 5vh, 60px) clamp(28px, 4vw, 56px);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 24px;
  margin-bottom: clamp(48px, 6vh, 80px);
  color: #ffffff;
  box-shadow: 0 24px 60px -20px rgba(33, 48, 94, 0.40);
}
.pro-pillar {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.pro-pillar-number {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: -1px;
  flex-shrink: 0;
}
.pro-pillar-body h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}
.pro-pillar-body p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}

/* CTAs */
.pro-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.pro-ctas .btn { white-space: nowrap; }
.pro-cta-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.pro-cta-link:hover {
  color: #e17a2d;
  background: rgba(225, 122, 45, 0.08);
}

@media (max-width: 768px) {
  .pro-pillars {
    padding: 28px 24px;
    gap: 24px;
  }
  .pro-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .pro-ctas .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Section PRO en page indépendante */
.pro-section--page {
  display: block !important;
  padding-top: clamp(120px, 14vh, 170px);
}

/* ============================================
   TRIO CAROUSEL — About + Équipe + Pourquoi nous
   ============================================ */
.trio-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fond bleu nuit (et non transparent) : sur mobile, si une slide ne
     couvre pas toute la hauteur 100svh, c'était le fond CRÈME du body qui
     transparaissait (bande blanche disgracieuse autour des points). Les
     slides photo couvrent ce fond ; là où il y a un vide, c'est navy. */
  background: #0c1a35;
}
.trio-track {
  display: flex;
  width: 100%;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.trio-carousel .trio-slide {
  flex: 0 0 100%;
  min-width: 100%;
  width: 100%;
}

/* Boutons prev/next */
.trio-carousel .trio-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(33, 48, 94, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 24px -8px rgba(33, 48, 94, 0.30);
}
.trio-carousel .trio-nav:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 32px -8px rgba(225, 122, 45, 0.45);
  color: #e17a2d;
}
.trio-carousel .trio-nav svg { width: 22px; height: 22px; }
.trio-carousel .trio-prev { left: 18px; }
.trio-carousel .trio-next { right: 18px; }

/* === Navigation carousel pour les pages SOLEA (Préconisation,
   Production, Stockage) — flèches fixes gauche/droite qui font
   tourner entre les 3 pages en boucle, esthétique IDENTIQUE aux
   trio-nav du carousel de la home. === */
.solea-page-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1050;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(33, 48, 94, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  box-shadow: 0 8px 24px -8px rgba(33, 48, 94, 0.30);
}
.solea-page-nav:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 32px -8px rgba(225, 122, 45, 0.45);
  color: #e17a2d;
}
.solea-page-nav svg {
  width: 22px;
  height: 22px;
}
.solea-page-nav--prev { left: 18px; }
.solea-page-nav--next { right: 18px; }

/* Animations carousel inter-pages SOLEA.

   STRATÉGIE — pour éviter le "passage à vide" entre deux pages HTML :
   1. View Transitions API (Chrome 126+, Safari 18+) → le navigateur
      cross-fade entre l'ancienne et la nouvelle page automatiquement,
      ZÉRO instant blanc.
   2. Pas de leave animation (qui exposait l'off-white de <html> via
      l'opacité). On laisse l'ancienne page entière à l'écran jusqu'à
      la navigation.
   3. L'enter slide depuis le côté donne la sensation carousel.
   4. Prefetch des autres pages SOLEA (dans le HTML) → la nouvelle page
      est déjà téléchargée au moment du clic, donc la navigation est
      quasi instantanée.
*/

/* View Transitions cross-document (navigation classique). Le navigateur
   gère lui-même le cross-fade entre les snapshots des 2 pages. */
@view-transition {
  navigation: auto;
}
/* Sur la transition cross-document, on raccourcit le cross-fade par
   défaut (300ms → 220ms) pour rester nerveux. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: ease-out;
}

@keyframes solea-page-enter-right {
  from { transform: translateX(100%); opacity: 0.4; }
  to   { transform: translateX(0);    opacity: 1;   }
}
@keyframes solea-page-enter-left {
  from { transform: translateX(-100%); opacity: 0.4; }
  to   { transform: translateX(0);     opacity: 1;   }
}
body.solea-page-enter-right {
  animation: solea-page-enter-right 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.solea-page-enter-left {
  animation: solea-page-enter-left 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* <html> reçoit la même couleur de fond que <body> — sécurité. */
html {
  background-color: var(--background);
}
/* Évite les scroll-bars horizontales pendant l'animation. */
body.solea-page-enter-right,
body.solea-page-enter-left,
body.solea-page-leave-left,
body.solea-page-leave-right {
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  body.solea-page-enter-right,
  body.solea-page-enter-left,
  body.solea-page-leave-left,
  body.solea-page-leave-right {
    animation: none;
  }
}
@media (max-width: 768px) {
  .solea-page-nav {
    width: 42px;
    height: 42px;
  }
  .solea-page-nav svg {
    width: 18px;
    height: 18px;
  }
  .solea-page-nav--prev { left: 10px; }
  .solea-page-nav--next { right: 10px; }
}

/* Dots */
.trio-carousel .trio-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(33, 48, 94, 0.10);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: 0 10px 30px -10px rgba(33, 48, 94, 0.30);
}
.trio-carousel .trio-dot {
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: color 0.25s ease, background 0.25s ease;
}
.trio-carousel .trio-dot:hover { color: var(--primary); }
.trio-carousel .trio-dot-fill {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(33, 48, 94, 0.25);
  transition: background 0.3s ease, transform 0.3s ease;
}
.trio-carousel .trio-dot.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
}
.trio-carousel .trio-dot.is-active .trio-dot-fill {
  background: #e17a2d;
  transform: scale(1.4);
}

/* Mobile */
@media (max-width: 768px) {
  .trio-carousel .trio-nav { width: 42px; height: 42px; }
  .trio-carousel .trio-prev { left: 10px; }
  .trio-carousel .trio-next { right: 10px; }
  .trio-carousel .trio-dots { bottom: 18px; padding: 6px 8px; }
  .trio-carousel .trio-dot-label { display: none; }
}

/* ============================================
   FAQ — ampoule décorative premium (champagne pâle, filigrane)
   ============================================ */
html[data-audience="pro"] .pro2-section--faq {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html[data-audience="pro"] .pro2-faq-bulb {
  position: absolute;
  right: clamp(-30px, -2vw, 0px);
  top: 50%;
  transform: translateY(-50%);
  height: clamp(360px, 38vh, 460px);
  width: auto;
  color: rgba(245, 161, 92, 1);
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}
html[data-audience="pro"] .pro2-section--faq > .pro2-container {
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  html[data-audience="pro"] .pro2-faq-bulb {
    height: 220px;
    right: -60px;
    opacity: 0.07;
  }
}
@media (max-width: 600px) {
  html[data-audience="pro"] .pro2-faq-bulb {
    display: none;
  }
}

.hero-copy {
  position: absolute;
  top: 135px;
  left: 28px;
  right: 28px;
  z-index: 5;
}

.storage-hero .hero-title {
  max-width: 100%;
  font-size: clamp(42px, 11vw, 58px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  font-weight: 850;
  margin: 0;
}

.storage-hero .hero-title span {
  display: block;
}

.storage-hero .hero-title .line-1 {
  color: #ffffff;
  text-align: left;
}

.storage-hero .hero-title .line-2 {
  color: #f6de4c;
  text-align: right;
}

.hero-subtitle {
  max-width: 100%;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: rgba(255,255,255,0.86);
  text-align: right;
}

@media (max-width: 768px) {
  .hero-subtitle {
    margin-top: 4px;
  }
}

@media (min-width: 769px) {
  .hero-copy {
    /* Titre descendu de +50 px (top: 165 → 215). */
    top: 215px;
    transform: translateX(85px);
  }
  /* Spécificité plus forte que .animate-on-scroll(.visible) afin que
     le décalage horizontal du titre soit conservé pendant et après
     l'animation d'entrée (sinon translateY(0) écrase notre translateX). */
  .hero-copy.animate-on-scroll {
    transform: translate(85px, 30px);
  }
  .hero-copy.animate-on-scroll.visible {
    transform: translate(85px, 0);
  }
  .storage-hero .hero-title {
    text-align: center;
  }
  .storage-hero .hero-title span {
    display: inline-block;
  }
  .storage-hero .hero-title .line-1 {
    color: #ffffff;
    margin-right: 16px;
  }
  .storage-hero .hero-title .line-2 {
    text-align: left;
  }
  .hero-subtitle {
    text-align: center;
    margin-top: 2px;
  }
}

/* =====================================================================
   RESPONSIVE HARDENING — ajustements globaux pour adaptation tous écrans
   Ajouté en fin de fichier pour bénéficier de la cascade (priorité haute).
   ===================================================================== */

/* ---------- 1. TOUCH TARGETS WCAG 2.5.5 (44×44 px minimum) ---------- */
@media (max-width: 1023px) {
  /* Burger menu : au moins 44px tappable même si visuellement plus petit.
     On agrandit la zone cliquable via padding, sans changer le visuel. */
  .mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Liens du menu mobile déroulé : padding suffisant pour bon tap target */
  .nav.mobile-active .nav-link {
    min-height: 48px;
  }
  .nav.mobile-active .dropdown-menu a {
    min-height: 44px;
  }
  /* Options du switch Particulier/Pro tappables confortablement */
  .audience-switch-option {
    min-height: 36px;
  }
}

/* ---------- 2. BOUTONS .btn — largeur fluide, jamais de débordement --- */
.btn {
  /* Override : la width fixe 300px causait overflow sur écrans < 320px.
     max-width permet au bouton de respirer dans le container parent. */
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .btn {
    /* Sur très petits écrans, le bouton occupe la largeur disponible
       (avec marges via le parent), pas 300px fixe qui dépasserait. */
    width: 100%;
    min-width: 0;
    max-width: 340px;
  }
  .btn-large {
    padding: 14px 24px;
    font-size: 15px;
  }
}

@media (max-width: 380px) {
  .btn {
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* ---------- 3. HERO BUTTONS — empilage vertical sur petit écran ------ */
@media (max-width: 600px) {
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons .btn {
    width: 100%;
  }
}

/* ---------- 4. AUDIENCE SWITCH — protection des très petits écrans ---- */
@media (max-width: 380px) {
  /* Sur très petit écran, on resserre encore le switch pour éviter le
     chevauchement avec le logo de la pill header. Position pivote
     vers le haut-droit avec très peu de marge. */
  .audience-switch {
    /* Toggle plus petit ici (~36px) → top ≈ 20px pour rester centré sur la
       pill (centre 38px). Toujours pas de transform (cf. plus haut). */
    top: 20px;
    right: 10px;
    transform: none;
    padding: 3px;
  }
  .audience-switch-option {
    padding: 4px 8px;
    font-size: 9px;
    letter-spacing: 0;
    min-height: 30px;
  }
}

/* Au scroll en mobile, la pill devient compacte et le switch peut
   chevaucher : on réduit son opacité au scroll pour discrétion. */
@media (max-width: 480px) {
  .scrolled .audience-switch {
    opacity: 0.85;
  }
}

/* ---------- 5. BREAKPOINT INTERMÉDIAIRE 900–1199px (small desktop) --- */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Sur petits desktops/laptops, le menu peut être tassé. On réduit
     légèrement le padding et la font-size des nav-links pour éviter
     que le CTA ne pousse le menu en dehors de la pill. */
  .nav-link {
    padding: 7px 9px;
    font-size: 12px;
  }
  .header-cta {
    padding: 8px 16px;
    font-size: 12px;
  }
  .header-container {
    padding: 8px 12px 8px 18px;
    gap: 8px;
  }
}

/* Tablette landscape entre 769 et 1023 : on ne montre pas le CTA mais
   on s'assure que le hamburger est bien visible et que la pill est
   bien dimensionnée. */
@media (min-width: 769px) and (max-width: 1023px) {
  .header-container {
    max-width: fit-content;
    padding: 8px 16px;
    gap: 12px;
  }
}

/* ---------- 6. HEADER PILL — empêche dépassement horizontal --------- */
.header,
.header-container,
.nav-list {
  /* Sécurité : pas de débordement horizontal qui forcerait un scroll
     horizontal sur la page. */
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .header-container {
    max-width: calc(100vw - 16px);
  }
}

/* ---------- 7. SAFE-AREA POUR ÉCRANS À ENCOCHE (iPhone X+) ---------- */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 768px) {
    .header {
      padding-left: max(8px, env(safe-area-inset-left));
      padding-right: max(8px, env(safe-area-inset-right));
    }
    .audience-switch {
      right: max(22px, calc(env(safe-area-inset-right) + 10px));
    }
  }
}

/* ---------- 8. PRÉVENIR LE ZOOM iOS SUR INPUT FOCUS ----------------- */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px; /* iOS ne zoome plus si font-size ≥ 16px sur focus */
  }
}

/* ---------- 9. DROPDOWNS DU MENU — alignement à droite en desktop --- */
/* Quand un dropdown est près du bord droit du header, son alignement
   left:0 par défaut peut le faire déborder. On le repositionne à droite
   pour les derniers items du menu (sous-items SOLEA en particulier). */
@media (min-width: 1024px) {
  .nav-dropdown:last-of-type .dropdown-menu,
  .nav-dropdown:nth-last-of-type(2) .dropdown-menu {
    /* Ces dropdowns sont près du bord droit — on les ancre à droite
       de leur trigger plutôt qu'à gauche, pour éviter qu'ils sortent
       de l'écran sur de petits viewports desktop. */
    left: auto;
    right: 0;
  }
}

/* ---------- 10. STORAGE HERO — fixes mobile spécifiques ------------- */
/* Sur la page /pages/stockage, le hero a un titre "Stockez mieux. /
   Consommez juste." qui débordait sur mobile, et la carte rental qui
   prenait trop de place à cause du min-height du flip 3D. */
@media (max-width: 768px) {
  /* Titre adapté à la viewport mobile + alignement centré + jamais coupé
     par la pill header. !important pour passer outre toute cascade. */
  .storage-hero .hero-title {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    margin: 0 !important;
  }
  .storage-hero .hero-title .line-1,
  .storage-hero .hero-title .line-2 {
    display: block !important;
    text-align: center !important;
    white-space: normal !important;
    width: 100% !important;
  }
  .storage-hero .hero-title .line-1 {
    color: #ffffff !important;
    margin-bottom: 4px !important;
  }
  .storage-hero .hero-title .line-2 {
    color: #f6de4c !important;
  }
  /* Hero-copy positionné CLAIREMENT sous la pill fixed.
     Pill fixed avec padding 16px + height ~50px + safe area ~50px
     = ~115-130px → on garde une marge confortable de 30px → top:160. */
  .storage-hero .hero-copy {
    position: absolute !important;
    top: max(160px, calc(env(safe-area-inset-top, 0px) + 110px)) !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 4 !important;
    text-align: center !important;
    /* Désactive le transform horizontal hérité du desktop. */
    transform: translateY(0) !important;
  }
  .storage-hero .hero-copy.animate-on-scroll,
  .storage-hero .hero-copy.animate-on-scroll.visible {
    transform: translateY(0) !important;
  }
  .storage-hero .hero-subtitle {
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* ============ CARTE "LOUEZ VOS PANNEAUX" MOBILE ============
     Version simplifiée : la carte devient un VRAI BOUTON CTA visible
     et tappable. Pas de badges (info redondante sur mobile). */
  .storage-hero__rental-card.offer-card {
    min-height: 0 !important;
    perspective: none !important;
    width: calc(100% - 24px) !important;
    max-width: 340px !important;
    position: absolute !important;
    bottom: 28px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .storage-hero__rental-card.offer-card .card-inner {
    transform: none !important;
    transform-style: flat !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  .storage-hero__rental-card.offer-card .card-hover {
    display: none !important;
  }
  .storage-hero__rental-card.offer-card .offer-card__link {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
  }
  /* Le bouton CTA : carte cliquable en pleine largeur, gradient jaune
     ambré, ombre dorée, lisible et engageante. */
  .storage-hero__rental-card.offer-card .card-front {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    padding: 18px 20px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #FFD94D 0%, #FFB347 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow:
      0 12px 30px rgba(255, 179, 71, 0.4),
      0 4px 12px rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
    text-align: center !important;
    color: #06142d !important;
  }
  /* Titre — typo grasse, lisible, foncé sur fond jaune */
  .storage-hero__rental-card.offer-card .card-front h2 {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin: 0 0 4px 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 900 !important;
    color: #06142d !important;
  }
  /* Sous-titre court sous le titre */
  .storage-hero__rental-card.offer-card .card-front .subtitle {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
    color: rgba(6, 20, 45, 0.78) !important;
    font-weight: 600 !important;
  }
  /* Sur mobile on cache les 3 badges — la carte est un bouton CTA pur */
  .storage-hero__rental-card.offer-card .offer-badges {
    display: none !important;
  }
  /* Flèche / chevron "→" en bas pour signifier "tap pour aller au form" */
  .storage-hero__rental-card.offer-card .card-front::after {
    content: "Demander une étude  →" !important;
    display: inline-block !important;
    margin-top: 4px !important;
    padding: 8px 18px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #06142d !important;
    background: rgba(6, 20, 45, 0.12) !important;
    border-radius: 999px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
  }
  /* Photo du hero remplit bien l'écran en cover, sans bandes vides. */
  .storage-hero {
    min-height: 100vh !important;
    height: 100vh !important;
  }
}

@media (max-width: 380px) {
  .storage-hero .hero-title {
    font-size: clamp(24px, 7.5vw, 32px);
  }
  .storage-hero .hero-copy {
    top: 120px;
  }
  .storage-hero__rental-card.offer-card {
    width: calc(100% - 24px);
  }
}



/* =====================================================================
   HERO HOME — décalage du bloc texte vers la gauche (desktop)
   Objectif : éviter que "CAP vers votre transition énergétique" et les
   tuiles stats ne se superposent au visage du couple sur la cover.
   - 1024-1399 : shift modéré (-60 px) pour ne pas pousser hors viewport
   - >= 1400 : shift plein (-150 px) calé sur la zone "claire" de la cover
   Mobile (<1024) : flex-direction:column déjà, donc pas de chevauchement.
   ===================================================================== */
@media (min-width: 1024px) {
  .hero-text {
    transform: translateX(-60px);
  }
}
@media (min-width: 1400px) {
  .hero-text {
    transform: translateX(-150px);
  }
}

/* =====================================================================
   HERO HOME — titre aligné à gauche (et pas centré)
   La règle générique .hero-title { text-align: center } à >=769px
   (héritée du bloc storage hero) s'appliquait aussi au titre de la home.
   On force ici un text-align: left scopé à .hero (la home), sans toucher
   au comportement du storage hero (.storage-hero .hero-copy).
   ===================================================================== */
@media (min-width: 1024px) {
  .hero .hero-title,
  .hero .hero-title span {
    text-align: left;
  }

  /* =====================================================================
     HERO HOME — H1 sur UNE ligne, largeur = largeur de l'image hero.
     On NE retreint PAS l'image (elle garde width:100% du .hero-text
     soit max 700 px). On force white-space:nowrap sur le H1 et on
     calibre font-size pour que "CAP vers votre transition énergétique"
     occupe à peu près la même largeur que l'image (~700 px).
     - text complet ≈ 16 × font-size (avec letter-spacing:-0.055em,
       font-weight:850 actuels) ⇒ font-size 44 px ⇒ texte ≈ 704 px.
     - clamp() pour scaler entre petits et grands desktops.
     ===================================================================== */
  .hero .hero-title-img {
    display: block;
    width: 100%;
    max-width: none;
  }
  .hero .hero-title {
    white-space: nowrap;
    /* Réduit par rapport à la version précédente (44 px max → 34 px max). */
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1.05;
    max-width: none;
    width: auto;
  }
}

/* =====================================================================
   HERO HOME — aération sur mobile (boutons et cartes stats)
   - Baisse les boutons par rapport au titre
   - Centre les 4 cartes stats et les baisse par rapport aux boutons
   ===================================================================== */
@media (max-width: 768px) {
  .hero .hero-buttons {
    margin-top: 40px;
  }
  .hero .hero-stats {
    justify-content: center;
    margin-top: 32px;
  }
}

/* =====================================================================
   HERO HOME — espacement entre les 4 tuiles stats réduit sur mobile.
   Le gap desktop (32 px) crée trop d'air entre les cards quand elles
   passent en 2×2 sur petit écran.
   ===================================================================== */
@media (max-width: 768px) {
  .hero .hero-stats {
    gap: 10px;
  }
}

/* =====================================================================
   HERO HOME — sur mobile, on pousse les boutons et tuiles stats vers
   le BAS pour libérer de l'espace en haut (et laisser la photo hero
   bien visible). Combiné avec le shift de la cover (background-position
   55%), ça donne une compo plus aérée et plus photo-centrique.
   On resserre aussi l'écart entre le logo image (capeo / votre
   solution .eco) et le H1 (CAP vers votre transition…).
   ===================================================================== */
@media (max-width: 768px) {
  /* Resserre l'écart logo image ↔ H1 :
     - on enlève la marge top du H1
     - on rapproche l'image avec un margin-bottom plus négatif. */
  .hero .hero-title-img {
    margin-bottom: -60px;
  }
  .hero .hero-title {
    margin: 0;
  }
  /* On pousse les boutons et stats plus bas */
  .hero .hero-buttons {
    margin-top: 110px;
  }
  .hero .hero-stats {
    margin-top: 28px;
  }
}

/* =========================================================
   FIX HERO HOME MOBILE — CAPEO
   Garde la taille actuelle du logo hero
   Corrige uniquement l'empilement mobile
   ========================================================= */
@media (max-width: 768px) {
  /* HERO GLOBAL */
  .hero {
    min-height: 100svh;
    padding: 92px 18px 34px;
    align-items: flex-start;
    box-sizing: border-box;
    overflow: hidden;
  }
  .hero-content {
    width: 100%;
    min-height: calc(100svh - 126px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    margin: 0 auto;
  }
  .hero-text {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 22px;
    position: relative;
    z-index: 4;
  }
  /* FOND HERO */
  .hero-bg {
    background-position: 58% center;
    background-size: cover;
  }
  .hero-gradient {
    background:
      linear-gradient(
        180deg,
        rgba(4, 10, 18, 0.34) 0%,
        rgba(4, 10, 18, 0.28) 32%,
        rgba(4, 10, 18, 0.58) 70%,
        rgba(4, 10, 18, 0.84) 100%
      ),
      linear-gradient(
        90deg,
        rgba(4, 10, 18, 0.56) 0%,
        rgba(4, 10, 18, 0.24) 55%,
        rgba(4, 10, 18, 0.10) 100%
      );
  }
  /* LOGO HERO — taille restaurée (fill 100% du conteneur, comme avant) */
  .hero-title-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 6px !important;
    display: block;
    position: relative;
    z-index: 5;
    animation: wiggle 2s ease-in-out infinite;
    filter: brightness(1.25) contrast(0.82) saturate(1.05)
            drop-shadow(0 8px 22px rgba(0, 0, 0, 0.28)) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  }
  /* TITRE — ne chevauche plus le logo */
  .hero-title {
    margin: -10px auto 32px !important;
    padding: 0;
    width: min(92vw, 430px);
    font-size: clamp(27px, 8.2vw, 38px);
    line-height: 0.96;
    letter-spacing: -0.055em;
    text-align: left;
    color: #ffffff;
    text-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
    position: relative;
    z-index: 6;
  }
  .hero-title .bolder,
  .hero-title span {
    display: block;
  }
  /* BOUTONS */
  .hero-buttons {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 auto 22px !important;
    position: relative;
    z-index: 7;
  }
  .hero-buttons .btn {
    width: 100%;
    height: 58px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 0 18px;
  }
  .hero-buttons .btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }
  .hero-buttons .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    box-shadow: 0 16px 34px rgba(33, 48, 94, 0.38);
  }
  .hero-buttons .btn-outline {
    background: rgba(255, 255, 255, 0.10);
    border: 2px solid rgba(255, 255, 255, 0.72);
    color: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  /* STATS */
  .hero-stats {
    width: 100%;
    max-width: 420px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    margin: 0 auto !important;
    justify-content: center;
    position: relative;
    z-index: 7;
  }
  .hero-stats .stat {
    width: auto;
    min-width: 0;
    height: 96px;
    padding: 12px 8px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.13);
    border: 1.5px solid rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .hero-stats .stat-value,
  .hero-stats .stat-value.bigger-stat {
    /* Taille unifiée sur les 4 cartes en mobile. */
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1;
    margin-bottom: 8px;
    color: #ffffff;
    text-shadow: 0 5px 16px rgba(0, 0, 0, 0.35);
  }
  .hero-stats .stat-label {
    /* Label unifié et plus lisible sur les 4 cartes en mobile. */
    font-size: clamp(12px, 3.5vw, 16px) !important;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.94);
    text-align: center;
    white-space: normal;
  }
  /* CREDIT / INVESTISSEMENT — agrandi et gras en mobile aussi */
  .hero-stats .stat-label.bigger-label {
    font-size: clamp(14px, 4.2vw, 19px) !important;
    font-weight: 900 !important;
  }
  /* NETTOYAGE MOBILE */
  .hero-particles,
  .particle,
  .sun-rays {
    display: none !important;
  }
  .scroll-indicator {
    display: none !important;
  }
}
/* =========================================================
   FIX TRÈS PETITS ÉCRANS
   iPhone SE / écrans courts
   ========================================================= */
@media (max-width: 390px), (max-height: 760px) {
  .hero {
    padding-top: 84px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero-content {
    min-height: calc(100svh - 112px);
  }
  .hero-text {
    padding-top: 12px;
  }
  /* Logo toujours non réduit volontairement */
  .hero-title-img {
    margin-bottom: 2px !important;
  }
  .hero-title {
    width: min(92vw, 390px);
    font-size: clamp(24px, 7.5vw, 32px);
    line-height: 0.96;
    margin: -12px auto 24px !important;
  }
  .hero-buttons {
    gap: 11px;
    margin-bottom: 16px !important;
  }
  .hero-buttons .btn {
    height: 53px;
    font-size: 15px;
    border-radius: 13px;
  }
  .hero-stats {
    gap: 8px !important;
  }
  .hero-stats .stat {
    height: 84px;
    padding: 9px 6px;
  }
  .hero-stats .stat-value {
    margin-bottom: 6px;
  }
  .hero-stats .stat-label {
    /* Sur très petit écran (iPhone SE) : taille unifiée et plus lisible. */
    font-size: 12px !important;
  }
  /* CREDIT / INVESTISSEMENT — agrandi sur très petit écran également */
  .hero-stats .stat-label.bigger-label {
    font-size: 15px !important;
    font-weight: 900 !important;
  }
}

/* =====================================================================
   NOUVEAU HERO HOME — section FONCTIONNEMENT (storage-daynight) au TOP
   de la home, visible uniquement en mode Particulier. Le hero classique
   (capeo / CAP vers…) descend automatiquement après.
   ===================================================================== */
.particulier-only-hero {
  display: block;
}
html[data-audience="pro"] .particulier-only-hero {
  display: none;
}

/* Hero PRO home — visible uniquement en mode Pro */
.pro-only-hero {
  display: none;
}
html[data-audience="pro"] .pro-only-hero {
  display: block;
}

/* Footer "Tous droits réservés." : passe à la ligne sur mobile pour
   éviter une ligne avec un mot orphelin "Tous". */
@media (max-width: 768px) {
  .footer-bottom .footer-droits {
    display: block;
    margin-top: 4px;
  }
}
/* Mode PRO sur la home : masquer le contenu particulier avant les sections pro */
html[data-audience="pro"] .about,
html[data-audience="pro"] .objectifs,
html[data-audience="pro"] .trio-carousel,
html[data-audience="pro"] .brands {
  display: none !important;
}

/* (Bloc PRO daynight retiré — l'approche scroll-locked ne marchait pas
   avec le contenu existant du pro2-hero. On revient à l'état d'origine
   et on décide ensuite d'une approche viable.) */

/* ============================================================
   FIX TEXTE DES CARTES — desktop/mobile
   ============================================================ */

.mobile-text {
  display: none !important;
}

.desktop-text {
  display: block !important;
}

@media (max-width: 768px) {
  .desktop-text {
    display: none !important;
  }

  .mobile-text {
    display: block !important;
  }
}

/* ============================================================
   STOCKAGE HERO — CARTES MOBILE ADAPTÉES AUX CIRCUITS
   Vert = batterie physique / Bleu = batterie virtuelle
   ============================================================ */

@media (max-width: 768px) {

  .storage-hero {
    position: relative;
    min-height: 110vh !important;
    height: auto;
    padding-top: 160px;
    padding-bottom: 190px;
    overflow: hidden;
    background-color: #172212; /* Fallback couleur herbe sombre pour éviter toute bande blanche */
  }

  /* Titre design qui suit la dualité jour/nuit de la photo :
     "Stockez mieux." (côté gauche, ciel jour) en texte foncé sur halo blanc,
     "Consommez juste." (côté droit, ciel nuit) en blanc lumineux. */
  .storage-hero .hero-copy {
    display: block !important;
    position: absolute !important;
    /* Titre descendu (+25px) — laisse plus d'air sous le header. */
    top: max(175px, env(safe-area-inset-top, 0px) + 150px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 6 !important;
    text-align: center !important;
    transform: translateY(0) !important;
    padding: 0 16px !important;
  }
  .storage-hero .hero-copy.animate-on-scroll,
  .storage-hero .hero-copy.animate-on-scroll.visible {
    transform: translateY(0) !important;
  }
  /* Cache l'ancien titre (.storage-hero__title / __subtitle, en H1 séparé) */
  .storage-hero__title,
  .storage-hero__subtitle {
    display: none !important;
  }
  .storage-hero .hero-copy .hero-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(28px, 8.5vw, 40px) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.04em !important;
    font-weight: 850 !important;
    font-family: 'Inter', sans-serif !important;
  }
  /* line-1 "Stockez mieux." — côté JOUR : texte navy profond + halo blanc */
  .storage-hero .hero-copy .hero-title .line-1 {
    display: block !important;
    color: #0a2752 !important;
    text-align: left !important;
    padding-left: 6vw !important;
    text-shadow:
      0 0 12px rgba(255, 255, 255, 0.85),
      0 2px 8px rgba(255, 255, 255, 0.55),
      0 0 28px rgba(168, 200, 224, 0.45) !important;
  }
  /* line-2 "Consommez juste." — côté NUIT : texte blanc + glow doré stellaire */
  .storage-hero .hero-copy .hero-title .line-2 {
    display: block !important;
    color: #ffffff !important;
    text-align: right !important;
    padding-right: 6vw !important;
    margin-top: 4px !important;
    text-shadow:
      0 0 14px rgba(255, 220, 130, 0.55),
      0 2px 8px rgba(0, 10, 30, 0.55),
      0 0 28px rgba(10, 31, 58, 0.85) !important;
  }
  /* Séparateur lumineux sous le titre retiré (option a) — il apparaissait
     sous "Consommez juste." au lieu d'être entre les 2 lignes (à cause du
     ::after qui se place après l'élément), et créait visuellement un petit
     trait isolé peu lisible. */
  .storage-hero .hero-copy .hero-title::after {
    display: none !important;
  }
  /* Sous-titre potentiel : on le garde discret au centre, blanc cassé */
  .storage-hero .hero-subtitle {
    display: block !important;
    text-align: center !important;
    margin-top: 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: rgba(255, 255, 255, 0.88) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
  }

  /* La carte desktop complète ne doit pas apparaître en mobile */
  .storage-hero__rental-card,
  .storage-hero__rental-card.offer-card {
    display: none !important;
  }

  .storage-hero__cards {
    position: absolute !important;
    z-index: 8;
    bottom: 24px !important;
    top: auto !important;
    left: 17px !important;
    right: 17px !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column;
    gap: 0;
    transform: none !important;
  }

  .storage-hero-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 0;
    /* border-bottom retiré : héritage de l'ancienne mise en page verticale
       (items empilés séparés par un trait). En mode 2 colonnes cartes, le
       trait apparaissait sous la carte gauche (non :last-child). */
    border-bottom: none;
  }
  .storage-hero-item:last-child {
    border-bottom: none;
  }
  .storage-hero-item__icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  .storage-hero-item__icon svg {
    width: 18px;
    height: 18px;
  }
  .storage-hero-item__content h3 {
    font-size: 14px;
    margin-bottom: 4px;
  }
  .storage-hero-item__content p {
    font-size: 12px;
  }

  .storage-hero-card {
    position: relative;
    overflow: hidden;

    width: 100%;
    min-height: 136px;

    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 9px;

    padding: 13px 13px 14px;
    border-radius: 22px;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
      0 18px 42px rgba(8, 22, 42, 0.18),
      inset 0 1px 0 rgba(255,255,255,0.48);
  }

  /* Carte batterie physique — circuit vert */
  .storage-hero-card:first-child {
    background:
      radial-gradient(circle at 18% 16%, rgba(116, 220, 91, 0.24), transparent 38%),
      linear-gradient(145deg, rgba(255,255,255,0.82), rgba(228,246,222,0.66));
    border: 1px solid rgba(104, 210, 90, 0.46);
  }

  /* Trait néon sous la carte retiré (option b) — coupait le texte
     descendant ("g", "p") de la description. */
  .storage-hero-card:first-child::before {
    display: none !important;
  }

  /* Carte batterie virtuelle — circuit bleu */
  .storage-hero-card:nth-child(2) {
    background:
      radial-gradient(circle at 18% 16%, rgba(42, 159, 255, 0.22), transparent 38%),
      linear-gradient(145deg, rgba(255,255,255,0.80), rgba(222,238,252,0.62));
    border: 1px solid rgba(42, 159, 255, 0.42);
  }

  /* Trait néon sous la 2ᵉ carte retiré (option b). */
  .storage-hero-card:nth-child(2)::before {
    display: none !important;
  }

  .storage-hero-card__icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
  }

  .storage-hero-card:first-child .storage-hero-card__icon {
    background: rgba(104, 210, 90, 0.18);
    color: #2f9f45;
    border: 1px solid rgba(104, 210, 90, 0.32);
  }

  .storage-hero-card:nth-child(2) .storage-hero-card__icon {
    background: rgba(42, 159, 255, 0.16);
    color: #1676bd;
    border: 1px solid rgba(42, 159, 255, 0.30);
  }

  .storage-hero-card__icon svg {
    width: 18px;
    height: 18px;
  }

  .storage-hero-card__content h3 {
    margin: 0 0 5px;
    font-size: clamp(14px, 3.9vw, 17px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: #0f2438;
  }

  .storage-hero-card__content p {
    margin: 0;
    font-size: clamp(11px, 3.05vw, 13px);
    line-height: 1.25;
    color: rgba(15, 36, 56, 0.92);
    max-width: none;
  }

  .storage-hero-card .desktop-text {
    display: none !important;
  }

  .storage-hero-card .mobile-text {
    display: block !important;
  }
}

/* ============================================================
   CTA MOBILE — version premium, moins lourde
   ============================================================ */

@media (max-width: 768px) {

  /* Bouton "Découvrir l'offre SOLEA" — pilule blanche compacte,
     flèche dans cercle bleu marine. */
  .storage-hero__mobile-btn {
    position: absolute !important;
    z-index: 9;

    left: 50%;
    bottom: 82px;
    transform: translateX(-50%) !important;

    width: auto;
    max-width: min(62vw, 250px);
    height: 42px;
    padding: 0 10px 0 16px;
    margin: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: 999px;

    background: #ffffff;

    color: #16213f !important;

    font-size: clamp(12px, 3.2vw, 13px);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;

    border: 1px solid rgba(22, 33, 63, 0.10);

    box-shadow:
      0 8px 20px -6px rgba(22, 33, 63, 0.20),
      0 2px 6px -1px rgba(22, 33, 63, 0.08);

    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s ease;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Flèche arrow → dans cercle bleu marine (couleur primary du site) */
  .storage-hero__mobile-btn::after {
    content: "→";
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;

    background: linear-gradient(135deg, #2d3a85, #16213f);
    box-shadow: 0 2px 6px rgba(22, 33, 63, 0.35);

    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .storage-hero__mobile-btn:active {
    transform: translateX(-50%) translateY(1px) !important;
    box-shadow:
      0 8px 20px -6px rgba(22, 33, 63, 0.22),
      0 2px 6px -1px rgba(22, 33, 63, 0.10);
  }
  .storage-hero__mobile-btn:active::after {
    transform: translateX(3px);
  }
}

@media (max-width: 430px) {

  .storage-hero {
    padding-top: 160px;
    padding-bottom: 180px;
  }

  .storage-hero__cards {
    width: calc(100vw - 28px);
    gap: 0;
  }

  .storage-hero-card {
    min-height: 122px;
    padding: 10px 10px 11px;
    border-radius: 17px;
  }

  .storage-hero-card__icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 10px;
  }

  .storage-hero-card__icon svg {
    width: 16px;
    height: 16px;
  }

  .storage-hero-card__content h3 {
    font-size: 14.5px;
    margin-bottom: 4px;
  }

  .storage-hero-card__content p {
    font-size: 11.2px;
    line-height: 1.22;
  }

  .storage-hero__mobile-btn {
    bottom: 78px;
    width: calc(100vw - 96px);
    height: 48px;
    font-size: 12.2px;
  }
}

/* old card-virtuel / card-physique styles removed — items are now plain white text */

/* =====================================================================
   STORAGE HERO MOBILE — finition v3
   - Épaisseur des vecteurs (lignes circuit) réduite
   - Cartes "Stockage virtuel / physique" repositionnées en HAUT sous le
     titre (2 colonnes, virtuel à gauche, physique à droite)
   - Sous-titre "Votre énergie solaire disponible…" déplacé hors de
     .hero-copy, positionné entre le vecteur bleu et le bouton SOLEA.
   ===================================================================== */
@media (max-width: 768px) {
  /* Vecteurs plus fins */
  .storage-energy-svg--mobile .storage-flow-line--base {
    stroke-width: 1.4 !important;
  }
  .storage-energy-svg--mobile .storage-flow-line--active {
    stroke-width: 1.8 !important;
  }

  /* Cartes en haut (sous le titre), 2 colonnes (virtuel | physique).
     Descendues encore (+25px) pour aérer l'écart titre ↔ cartes. */
  .storage-hero__cards {
    position: absolute !important;
    top: clamp(270px, 32vh, 340px) !important;
    bottom: auto !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    z-index: 7;
  }
  /* Mini cards plus compactes sur mobile pour tenir en 2 colonnes étroites */
  .storage-hero__cards .storage-hero-card {
    min-height: 110px;
    padding: 10px 10px 8px;
  }
  .storage-hero__cards .storage-hero-card .storage-hero-card__content h3 {
    font-size: 13px !important;
  }
  .storage-hero__cards .storage-hero-card .storage-hero-card__content p {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }

  /* Sous-titre positionné entre circuit bleu (au-dessus) et bouton SOLEA.
     Sur 2 lignes (<br>) — première ligne "Votre énergie solaire" en gras
     et plus grosse pour atteindre visuellement la largeur de la 2ᵉ ligne
     "disponible quand votre maison en a besoin." (cf. .hero-subtitle__lead). */
  .storage-hero > .hero-subtitle {
    position: absolute !important;
    bottom: 125px !important;
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    margin: 0 auto !important;
    max-width: 320px !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
    z-index: 7 !important;
  }
  /* 1ère ligne "Votre énergie solaire" — plus grosse + plus grasse pour que
     sa largeur visuelle s'aligne sur la 2ᵉ ligne (deux fois plus longue en
     caractères). 21 caractères × ratio ~2 = font-size ~22px à 800 weight. */
  .storage-hero > .hero-subtitle .hero-subtitle__lead {
    display: inline-block;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65) !important;
  }
  /* Bouton SOLEA — remonté à bottom: 60px (sous-titre à 155px → ~70px d'air
     entre la 2e ligne du sous-titre et le haut du bouton). */
  .storage-hero__mobile-btn {
    bottom: 60px !important;
  }
}

/* ============================================================
   CURSEUR DÉMO DESKTOP
   Une fois la batterie de MyBattery "verte" (chargée), un curseur
   sort de MyBattery, vole vers la carte "Louez vos panneaux", la
   fait pivoter, puis revient. Boucle infinie. Démo uniquement
   sur desktop (≥ 769px). Masqué sur mobile / tablette.
   ============================================================ */
.storage-hero__demo-cursor {
  display: none; /* caché par défaut, activé en desktop */
}

@media (min-width: 769px) {
  .storage-hero__demo-cursor {
    display: block;
    position: absolute;
    z-index: 10; /* au-dessus de la carte (z:6) et du SVG (z:3) */
    width: 32px;
    height: 32px;
    pointer-events: none;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 12px rgba(255, 255, 255, 0.45));
    /* Position initiale = battery-cloud après tous les transforms du SVG :
       SVG x=941+114, y=668+74 (centre du picto) → scale 0.9 → translate(95,85)
       → mirror autour de 800 → centre viewBox (555.5, 752.8). En pourcentage
       du viewBox 1600×900 : 34.7% horizontal, 83.6% vertical. */
    left: 35%;
    top: 84%;
    opacity: 0;
    /* Cycle 15s = 3 cycles batterie (5s). Délai 4s = aligne sur le moment
       où les 4 LED de battery-cloud.svg deviennent vertes (t=4-5s du cycle
       batterie). Donc le démo se déclenche tous les 3 cycles batterie. */
    animation: demoCursorFlight 15s ease-in-out 4s infinite;
  }
  .storage-hero__demo-cursor svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Trajectoire du curseur sur 15s (= 3 cycles batterie 5s).
     Active du début à 47 %, pause de 47 % à 100 % (= 2 cycles batterie
     sans démo, soit 8s de pause).
     0% → 3%   : (t=4-4.5s, 4 LED vertes) fade-in sur battery-cloud
     3% → 17%  : voyage vers le coin bas-droit de la carte
     17% → 43% : reste sur le coin (durant le flip + apparition des étapes)
     43% → 47% : fade-out sur la carte (ne revient pas)
     47% → 100%: invisible — PAUSE durant les 2 cycles batterie suivants */
  @keyframes demoCursorFlight {
    0%   { left: 35%; top: 84%; opacity: 0; transform: scale(0.6); }
    3%   { left: 35%; top: 84%; opacity: 1; transform: scale(1); }
    17%  { left: 21%; top: 67%; opacity: 1; transform: scale(1); }
    43%  { left: 21%; top: 67%; opacity: 1; transform: scale(1); }
    47%  { left: 21%; top: 67%; opacity: 0; transform: scale(0.7); }
    100% { left: 35%; top: 84%; opacity: 0; transform: scale(0.6); }
  }

  /* Carte qui pivote en synchro avec le curseur sur cycle 15s :
     - Curseur arrive à 17 % → carte pivote 20-27 %
     - Curseur reste jusqu'à 43 % → carte reflippe à 47 %
     - Pause de 50 % à 100 % (face avant durant les 2 cycles batterie de pause) */
  @keyframes demoCardAutoFlip {
    0%, 20%   { transform: rotateY(0deg); }   /* avant arrivée du curseur */
    27%, 43%  { transform: rotateY(180deg); } /* flippée pendant la visite */
    50%, 100% { transform: rotateY(0deg); }   /* retour face avant + pause */
  }
  /* L'animation s'applique sur .card-inner sur cycle 15s avec délai 4s
     (aligné sur le 1ᵉʳ moment "4 LED vertes" de battery-cloud.svg,
     puis pause de 2 cycles batterie avant la relance). */
  .storage-hero__rental-card.offer-card .card-inner {
    animation: demoCardAutoFlip 15s ease-in-out 4s infinite;
  }
  .storage-hero__rental-card.offer-card:hover .card-inner,
  .offer-card__link:focus-visible .card-inner {
    animation: none;
    transform: rotateY(180deg);
  }

  /* Étapes 1/2/3 du verso sur cycle 15s : apparaissent en cascade quand
     la carte est pivotée (entre 27 et 43 % du cycle).
     Step 1 : 29 %, Step 2 : 33 %, Step 3 : 38 %
     Toutes restent visibles jusqu'à 43 % puis fade-out (45-48 %).
     De 48 % à 100 % : invisibles (pause durant les 2 cycles batterie). */
  @keyframes demoStep1 {
    0%, 27%   { opacity: 0; transform: translateY(10px); }
    29%, 43%  { opacity: 1; transform: translateY(0);    }
    48%, 100% { opacity: 0; transform: translateY(10px); }
  }
  @keyframes demoStep2 {
    0%, 31%   { opacity: 0; transform: translateY(10px); }
    33%, 43%  { opacity: 1; transform: translateY(0);    }
    48%, 100% { opacity: 0; transform: translateY(10px); }
  }
  @keyframes demoStep3 {
    0%, 36%   { opacity: 0; transform: translateY(10px); }
    38%, 43%  { opacity: 1; transform: translateY(0);    }
    48%, 100% { opacity: 0; transform: translateY(10px); }
  }
  .storage-hero__rental-card.offer-card .steps > div:nth-child(1) {
    animation: demoStep1 15s ease-in-out 4s infinite;
  }
  .storage-hero__rental-card.offer-card .steps > div:nth-child(2) {
    animation: demoStep2 15s ease-in-out 4s infinite;
  }
  .storage-hero__rental-card.offer-card .steps > div:nth-child(3) {
    animation: demoStep3 15s ease-in-out 4s infinite;
  }
  /* Sur hover utilisateur, le stagger original (stepDeploy 0.35s) reprend
     la main : l'animation demoStepN est court-circuitée. */
  .storage-hero__rental-card.offer-card:hover .steps > div:nth-child(1),
  .offer-card__link:focus-visible .steps > div:nth-child(1) {
    animation: stepDeploy 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 0.30s forwards;
  }
  .storage-hero__rental-card.offer-card:hover .steps > div:nth-child(2),
  .offer-card__link:focus-visible .steps > div:nth-child(2) {
    animation: stepDeploy 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 0.80s forwards;
  }
  .storage-hero__rental-card.offer-card:hover .steps > div:nth-child(3),
  .offer-card__link:focus-visible .steps > div:nth-child(3) {
    animation: stepDeploy 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 1.30s forwards;
  }
}

/* ========================================
   VOS BÉNÉFICES SOLAIRES (Redesign)
   ======================================== */
.interet-redesign {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-image: url('assets/interet.webp?v=img20260606a');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  padding: 80px 5%;
}

.interet-redesign::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.interet-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 580px;
}

.interet-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  color: #1e3a8a;
  margin: 0 0 16px 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.interet-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 2vw, 20px);
  color: #4b5563;
  margin: 0 0 32px 0;
  line-height: 1.5;
}

.interet-card {
  /* Opacité réduite (0.85 → 0.65) — laisse davantage transparaître le
     fond de la section tout en gardant la lisibilité du contenu. */
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 24px;
  padding: 24px 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  margin-bottom: 32px;
}

.interet-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.interet-item:first-child {
  padding-top: 8px;
}
.interet-item:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}

.interet-item-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #1e3a8a;
}
.interet-item-icon svg {
  width: 28px;
  height: 28px;
}

.interet-item-text h3 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0 0 6px 0;
}
.interet-item-text p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.interet-footer {
  display: flex;
  align-items: center;
  /* flex-start (au lieu de space-between) — le bouton est seul,
     on l'aligne à gauche, à l'emplacement où était le petit soleil. */
  justify-content: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.interet-footer-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.interet-footer-info svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.interet-footer-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  line-height: 1.3;
}

.btn-interet {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #1e3a8a;
  color: #ffffff;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, background-color 0.2s;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
}
.btn-interet:hover {
  background: #172554;
  transform: translateY(-2px);
}
.btn-interet svg {
  width: 20px;
  height: 20px;
}

/* Default: Show Desktop, Hide Mobile */
.interet-desktop {
  display: block;
}
.interet-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* La section grandit pour contenir tout son contenu (visuel 60vh + 3
     cartes + bouton) au lieu d'être bloquée à 100vh, ce qui rognait le haut
     (titre/1ʳᵉ carte sous le menu). Même correctif que SOLEA. */
  .interet-redesign {
    height: auto !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  .interet-desktop {
    display: none;
  }
  .interet-mobile {
    display: flex;
    flex-direction: column;
    background-color: #f8fafc; /* Light gray background */
    padding-bottom: 32px;
  }
  
  .interet-mobile-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    background-image: url('assets/mobile/interet.webp?v=img20260606a');
    background-size: cover;
    background-position: center;
    border-radius: 0 0 32px 32px;
    overflow: hidden;
    margin-bottom: -32px; /* Pulls cards up over the image */
  }
  
  .interet-mobile-hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(8,24,56,0.9) 0%, rgba(8,24,56,0.4) 40%, rgba(8,24,56,0) 100%);
  }
  
  .interet-mobile-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32px 24px 64px 24px;
    z-index: 2;
  }
  
  .interet-mobile-title {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 16px 0;
  }
  .interet-mobile-title .text-yellow {
    color: #eab308;
  }
  
  .interet-mobile-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #f1f5f9;
    line-height: 1.5;
    margin: 0;
  }
  
  .interet-mobile-cards {
    position: relative;
    z-index: 3;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }
  
  .interet-mobile-card-item {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }
  
  .interet-mobile-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1e3a8a;
  }
  .interet-mobile-card-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .interet-mobile-card-text {
    flex-grow: 1;
  }
  
  .interet-mobile-card-text h3 {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0 0 4px 0;
  }
  
  .interet-mobile-card-text p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
  }
  
  .interet-mobile-card-arrow {
    color: #1e3a8a;
    flex-shrink: 0;
    margin-left: 8px;
  }
  .interet-mobile-card-arrow svg {
    width: 20px;
    height: 20px;
  }
  
  .interet-mobile-footer {
    padding: 0 16px;
  }
  
  .btn-interet-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    background: #1e3a8a; /* Bleu standard du site au lieu du noir */
    color: #ffffff;
    padding: 16px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  .btn-interet-mobile svg {
    width: 20px;
    height: 20px;
  }
}


/* Responsive backgrounds for mobile (using object-fit/background-size instead of generative fill) */
@media (max-width: 768px) {
  .audience-card--particulier,
  .audience-card--pro {
    background-size: cover !important;
    background-position: center !important;
  }
  
  html[data-audience="pro"] .hero-bg {
    background-size: cover !important;
    background-position: center !important;
  }
  
  .about-mobile-card, .about-mobile-card::before, .about {
    background-image: url('assets/mobile/nous-mob.webp?v=img20260606a') !important;
    background-size: cover !important;
    background-position: 65% center !important; /* Shift to keep people in frame */
  }
  
  /* Add a dark gradient overlay on mobile to make the text readable */
  .about-mobile-card__overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%) !important;
  }

  /* Fix .interet-redesign leaking on mobile */
  .interet-redesign {
    padding: 0 !important;
    background-image: none !important;
  }
  .interet-redesign::before {
    display: none !important;
  }
}


/* ============================================================
   Cas client — design enrichi (image + résultats + témoignage)
   Utilisé par les pages métier. Survol de la miniature = nuit.
   ============================================================ */
.cas{ display:grid; grid-template-columns:1fr 1.05fr; background:#fff;
  border:1px solid var(--c-line); border-radius:24px; overflow:hidden;
  box-shadow:0 30px 80px -42px rgba(33,48,94,.28); }
.cas__visual{ position:relative; min-height:480px; background-size:cover; background-position:center; }
.cas__visual::before{ content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--cas-night); background-size:cover; background-position:center;
  opacity:0; transition:opacity .6s ease; }
.cas__visual:hover::before{ opacity:1; }
.cas__visual::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(8,12,28,.62) 0%, rgba(8,12,28,.12) 38%, transparent 62%); }
.cas__badge{ position:absolute; top:24px; left:24px; z-index:2; display:flex; align-items:center; gap:12px;
  background:#fff; border-radius:16px; padding:11px 18px 11px 12px; box-shadow:0 12px 30px -14px rgba(33,48,94,.4); }
.cas__badge-ic{ width:38px; height:38px; border-radius:10px; background:var(--c-soft); color:var(--c-navy);
  display:grid; place-items:center; flex:0 0 38px; }
.cas__badge-ic svg{ width:22px; height:22px; }
.cas__badge-txt{ display:flex; flex-direction:column; line-height:1.25; }
.cas__badge-txt strong{ font-size:13px; letter-spacing:.14em; color:var(--c-navy); }
.cas__badge-txt span{ font-size:13px; color:var(--c-muted); }
.cas__metric{ position:absolute; left:28px; bottom:26px; z-index:2; color:#fff; }
.cas__metric-num{ display:block; font-family:'Playfair Display',serif; font-weight:700;
  font-size:clamp(58px,7.5vw,98px); line-height:.9; letter-spacing:-.02em; }
.cas__minus{ color:var(--c-orange); }
.cas__plus{ color:var(--c-green); }
.cas__pct{ font-size:.5em; }
.cas__metric-label{ display:block; margin-top:10px; font-family:'Inter',sans-serif;
  font-size:15px; line-height:1.35; color:rgba(255,255,255,.92); }
.cas__panel{ padding:clamp(28px,3vw,44px); }
.cas__title{ font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--c-navy); }
.cas__divider{ height:1px; background:var(--c-line); margin:22px 0; }
.cas__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 22px; }
.cas__stat{ display:flex; align-items:center; gap:14px; }
.cas__stat-ic{ width:46px; height:46px; border-radius:50%; flex:0 0 46px;
  background:rgba(225,122,45,.12); color:var(--c-orange); display:grid; place-items:center; }
.cas__stat-ic svg{ width:22px; height:22px; }
.cas__stat-tx strong{ display:block; font-family:'Playfair Display',serif; font-weight:700;
  font-size:23px; color:var(--c-navy); line-height:1.1; }
.cas__stat-tx strong small{ font-size:.62em; font-weight:600; }
.cas__stat-tx strong.cas__stat-word{ font-family:'Inter',sans-serif; font-size:16px; line-height:1.2; }
.cas__stat-tx span{ font-family:'Inter',sans-serif; font-size:13px; color:var(--c-muted); }
.cas__quote{ position:relative; margin:0; padding-left:46px; }
.cas__qmark{ position:absolute; left:0; top:-14px; font-family:'Playfair Display',serif;
  font-size:72px; line-height:1; color:var(--c-orange); }
.cas__quote p{ margin:0; font-family:'Playfair Display',serif; font-style:italic; font-weight:500;
  font-size:clamp(19px,1.5vw,23px); line-height:1.5; color:var(--c-navy); }
.cas__author{ display:flex; align-items:center; gap:14px; margin-top:22px; }
.cas__avatar{ width:46px; height:46px; border-radius:50%; flex:0 0 46px; background:var(--c-navy);
  color:#fff; display:grid; place-items:center; font-family:'Inter',sans-serif; font-weight:700; font-size:15px; }
.cas__author-tx{ display:flex; flex-direction:column; line-height:1.3; }
.cas__author-tx strong{ color:var(--c-navy); font-family:'Inter',sans-serif; font-size:15px; }
.cas__author-tx span{ color:var(--c-muted); font-size:13px; }
@media (max-width:900px){ .cas{ grid-template-columns:1fr; } .cas__visual{ min-height:340px; } }
@media (max-width:560px){ .cas__grid{ grid-template-columns:1fr; gap:18px; } }