@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');


/* ════════════════════════════════════════════════
   EcoVilleray — Landing page (design « Nexus »)
   Polices : Chillax (display) + Josefin Sans (body)
   Tout est scopé sous .ecovilleray-landing pour ne pas
   impacter le reste de l'application.
   ════════════════════════════════════════════════ */
/* Chillax est chargée en tant que fonte variable (une seule requête, tous les
   poids 200–700) via le @font-face global défini dans index.html. */
.ecovilleray-landing {
  /* ── Palette Nexus ── */
  --argelo:       #EB5C07; /* orange contraste */
  --forest-night: #002216; /* vert très sombre */
  --forest:       #04461F; /* vert profond */
  --frozen:       #B2CAC2; /* gris sauge */
  --warmy:        #A3EFD6; /* menthe */
  --sweety:       #D7E7B6; /* vert clair */
  --electric:     #DDF758; /* lime électrique */
  --milky:        #FFF4D5; /* crème */

  --font-display: 'Chillax', sans-serif;
  --font-body:    'Josefin Sans', sans-serif;

  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.ecovilleray-landing *,
.ecovilleray-landing *::before,
.ecovilleray-landing *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Neutralise la règle mobile globale (index.css, h2 { text-align: center }
   sous 768px, prévue pour d'autres pages) qui recentrait les titres h2 de la
   landing ne définissant pas leur propre alignement. Les titres qui veulent
   explicitement être centrés le restent via leur style inline (plus spécifique). */
.ecovilleray-landing h2 { text-align: left; }
/* ── Échelle typographique Nexus (Font System) ── */
.ecovilleray-landing .t-display { font-family: var(--font-display); font-weight: 700; font-size: clamp(52px, 6vw, 76px); line-height: 0.94; letter-spacing: -0.01em; }
.ecovilleray-landing .t-h1  { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 0.94;  letter-spacing: 0; }
.ecovilleray-landing .t-h2  { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1.15;  letter-spacing: 0; }
.ecovilleray-landing .t-h3  { font-family: var(--font-display); font-weight: 600; font-size: 37px; line-height: 1.25;  letter-spacing: 0; }
.ecovilleray-landing .t-h4  { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.0;   letter-spacing: 0; }
.ecovilleray-landing .t-h5  { font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1.25;  letter-spacing: 0; }
.ecovilleray-landing .t-h6  { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25;  letter-spacing: 0; }
.ecovilleray-landing .t-sub    { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.5; }
.ecovilleray-landing .t-bodyb  { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.5; }
.ecovilleray-landing .t-body   { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.5; }
.ecovilleray-landing .t-small  { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.5; }
.ecovilleray-landing .t-caption{ font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.08em; }
/* Soulignement animé navbar fine */
.ecovilleray-landing .nav-fine::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: var(--nav-line); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.ecovilleray-landing .nav-fine:hover::after { transform: scaleX(1); }
.ecovilleray-landing .nav-active::after { transform: scaleX(1); opacity: .55; }
.ecovilleray-landing .nav-logo:hover .nav-leaf { transform: rotate(-12deg) scale(1.12); }
.ecovilleray-landing .use-cases .uc-poster svg { width: 100%; height: auto; display: block; }
/* Flèches révélées au survol uniquement (nav CTA + bouton fantôme hero) */
/* Flèche du CTA navbar : espace réservé en permanence pour que la largeur du
   bouton (et donc la navbar) ne se dilate/compresse pas au survol ou au clic.
   Seules l'opacité et la position changent. */
.ecovilleray-landing .nav-cta-arrow {
  display: inline-block; max-width: 0; opacity: 0; margin-left: 0;
  transform: translateX(-4px); overflow: hidden;
  transition: max-width .25s ease, opacity .25s ease, margin-left .25s ease, transform .25s ease;
}
.ecovilleray-landing .nav-cta-btn:hover .nav-cta-arrow {
  max-width: 18px; opacity: 1; margin-left: 8px; transform: translateX(0);
}
/* Flèche du bouton fantôme hero (révélée au survol) */
.ecovilleray-landing .ghost-arrow {
  display: inline-block; max-width: 0; opacity: 0; margin-left: -6px;
  transform: translateX(-4px); overflow: hidden;
  transition: max-width .25s ease, opacity .25s ease, margin-left .25s ease, transform .25s ease;
}
.ecovilleray-landing .hero-ghost-btn:hover .ghost-arrow {
  max-width: 18px; opacity: 1; margin-left: 4px; transform: translateX(0);
}
/* Trait « défiler » du hero : léger balayage lumineux pour signaler qu'on peut cliquer/défiler */
.ecovilleray-landing .hero-scroll-bar span {
  background: linear-gradient(90deg, var(--frozen) 0%, var(--electric) 50%, var(--frozen) 100%) !important;
  background-size: 200% 100% !important;
  animation: heroBarSweep 2.4s linear infinite;
}
.ecovilleray-landing .hero-scroll-bar { transition: transform .25s ease, opacity .25s ease; }
.ecovilleray-landing .hero-scroll-bar:hover { opacity: 0.85; }
.ecovilleray-landing .hero-scroll-bar:hover span { transform: scaleX(1.15); }
@keyframes heroBarSweep {
  from { background-position: 200% 0; }
  to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ecovilleray-landing .hero-scroll-bar span { animation: none; }
}
/* Bannière « Agir ensemble » collée à la bande info (aucun espace, tous écrans, y compris mobile) */
.ecovilleray-landing section.agir-section.agir-section { padding: 0 !important; }
/* Mosaïque « EcoVilleray agit localement » — 2 colonnes sur mobile */
@media (max-width: 760px) {
  .ecovilleray-landing .act-bento {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: none !important;
    grid-auto-rows: 150px !important;
  }
  .ecovilleray-landing .act-bento > * { grid-area: auto !important; }
}
/* « Villeray en chiffres » — empilé sur mobile, stats en 2 colonnes */
@media (max-width: 860px) {
  .ecovilleray-landing .stats-2col { grid-template-columns: 1fr !important; gap: 22px !important; }
  .ecovilleray-landing section .stats-card { grid-template-columns: repeat(2, 1fr) !important; }
  /* la barre de chiffres revient en flux normal + devient 4 cartes séparées (2×2) */
  .ecovilleray-landing section .stats-card {
    position: static !important; left: auto !important; right: auto !important; bottom: auto !important;
    margin-top: 20px !important;
    background: transparent !important; box-shadow: none !important; padding: 0 !important; gap: 12px !important;
  }
  .ecovilleray-landing section .stats-card > div {
    background: #e9f3d6 !important; border-radius: 18px !important; padding: 22px 20px !important;
    border-right: none !important; text-align: left !important;
  }
  .ecovilleray-landing .stats-2col div[style*="padding-bottom: 96px"] { padding-bottom: 0 !important; }
  /* mobile : image d'abord (pleine largeur), puis texte sous l'image, puis stats */
  .ecovilleray-landing .stats-2col > *:nth-child(1) { order: 1 !important; }
  .ecovilleray-landing .stats-2col > *:nth-child(2) { order: 2 !important; padding: 0 18px !important; text-align: left !important; }
  .ecovilleray-landing .stats-2col > *:nth-child(2) .t-caption,
  .ecovilleray-landing .stats-2col > *:nth-child(2) h2 { text-align: left !important; margin-left: 0 !important; }
  .ecovilleray-landing .stats-2col .stats-card { order: 3 !important; padding-left: 18px !important; padding-right: 18px !important; }
  /* lime continue plein-largeur : coline haut → cadre lime → coline bas inversée, sans blanc ni séparation */
  .ecovilleray-landing .stats-humps { display: none !important; }
  .ecovilleray-landing .stats-humps-bottom { display: block !important; transform: scaleY(-1); height: 54px; object-fit: fill; margin-top: -1px; }
  .ecovilleray-landing .stats-photo-inner { background: #DDF758; padding: 0 14px; }
  .ecovilleray-landing section.stats-section.stats-section { padding: 0 0 72px !important; overflow: hidden; }
  .ecovilleray-landing .stats-photo-frame { margin: 0 !important; }
  .ecovilleray-landing .stats-photo { border-radius: 28px 28px 16px 16px !important; }
  /* Section Technologie IA — colonnes empilées ; titre en haut, paragraphe justifié en bas */
  .ecovilleray-landing .tech-grid { grid-template-columns: 1fr !important; }
  .ecovilleray-landing .tech-left { min-height: 0 !important; flex-direction: column-reverse !important; align-items: stretch !important; text-align: left !important; }
  .ecovilleray-landing .tech-left h2 { margin: 0 0 16px !important; font-size: clamp(22px, 6.2vw, 34px) !important; text-align: left !important; }
  .ecovilleray-landing .tech-left p { text-align: justify !important; max-width: none !important; margin: 0 !important; font-size: 13px !important; line-height: 1.6 !important; }
  .ecovilleray-landing .impact-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* titre « Des données réelles… » en haut, cartes descendues en dessous */
  .ecovilleray-landing .impact-grid > *:first-child { order: 2 !important; margin-top: 8px !important; }
  .ecovilleray-landing .impact-grid > *:last-child { order: 1 !important; margin-top: 100px !important; }
  /* titre sur 2 lignes, taille réduite : on masque les retours internes */
  .ecovilleray-landing .impact-title { font-size: clamp(18px, 5.6vw, 26px) !important; line-height: 1.12 !important; word-spacing: 0.14em !important; letter-spacing: 0 !important; }
  .ecovilleray-landing .impact-title .br-d { display: none !important; }
  /* Section Impact : on neutralise le masque de section (il rendait le haut
     transparent → texte blanc invisible) et on dessine la coline via un calque
     dédié (single-layer, fiable). Le contenu reste sur le vert plein. */
  .ecovilleray-landing .impact-section {
    -webkit-mask-image: none !important; mask-image: none !important;
    padding: 150px 24px 80px !important;
  }
  /* Coline « comme desktop » : le blanc remplit le haut, les collines vertes
     percent vers le haut. On soustrait la vague d'un calque blanc plein via un
     masque symétrique (exclude/xor), insensible à l'ordre des couches. */
  .ecovilleray-landing .impact-coline {
    display: block !important;
    position: absolute; top: 0; left: 0; width: 100%; height: 130px;
    background: #ffffff; z-index: 2; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000, #000), url(/how-wave.png);
    mask-image: linear-gradient(#000, #000), url(/how-wave.png);
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: center, center bottom; mask-position: center, center bottom;
    -webkit-mask-size: 100% 100%, 100% 100%; mask-size: 100% 100%, 100% 100%;
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  /* légère ombre sur la carte « Réutilisation locale » */
  .ecovilleray-landing .reuse-card { box-shadow: 0 10px 28px rgba(0, 34, 22, 0.16) !important; }
  /* cartes Impact plus compactes sur mobile */
  .ecovilleray-landing .impact-card { padding: 20px 22px !important; }
  .ecovilleray-landing .impact-card h3 { font-size: 17px !important; margin-bottom: 8px !important; }
  .ecovilleray-landing .impact-card p { font-size: 12.5px !important; line-height: 1.55 !important; }
  /* Section Témoignages : padding réduit + cartes plus compactes sur mobile
     (largeur des cartes gérée en JS : cw ~80 % pour la carte centrée + voisine) */
  .ecovilleray-landing .testi-body { padding: 56px 22px 0 !important; }
  .ecovilleray-landing .testi-card { padding: 30px 26px !important; min-height: 220px !important; border-radius: 24px !important; }
  /* Solutions : cartes en carrousel horizontal (swipe + points) */
  .ecovilleray-landing .sol-grid {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px !important;
    scroll-padding-left: 44px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -44px !important; margin-right: -44px !important; padding: 0 44px 4px !important;
  }
  .ecovilleray-landing .sol-grid::-webkit-scrollbar { display: none; }
  .ecovilleray-landing .sol-grid > * { flex: 0 0 82% !important; scroll-snap-align: center; }
  .ecovilleray-landing .sol-dots { display: flex !important; }
  .ecovilleray-landing .sol-head button { width: 100% !important; justify-content: center !important; }
  /* Coline inversée lime en bas de Solutions (mobile) */
  .ecovilleray-landing #solutions { padding-bottom: 88px !important; }
  .ecovilleray-landing .sol-humps { display: block !important; height: 56px; object-fit: fill; }
  .ecovilleray-landing .cta-inner { flex-direction: column !important; align-items: flex-start !important; }
  .ecovilleray-landing .cta-people { display: none !important; }
  .ecovilleray-landing .voix-cta-card { flex-direction: column !important; min-height: 0 !important; }
  .ecovilleray-landing .voix-cta-photo-circle {
    position: static !important; width: 100% !important; height: auto !important;
    aspect-ratio: 1 / 1 !important;
    left: auto !important; top: auto !important; transform: none !important; order: 2; overflow: hidden !important;
    margin: 0 !important;
    /* Seul l'arc haut-gauche (poussé à droite) ; autres coins nets, bas à ras */
    border-radius: 62% 0 0 0 / 55% 0 0 0 !important;
  }
  /* boutons de la carte CTA pleine largeur, empilés */
  .ecovilleray-landing .voix-cta-text > div:last-child { flex-direction: column !important; align-items: stretch !important; }
  .ecovilleray-landing .voix-cta-text > div:last-child button { width: 100% !important; justify-content: center !important; }
  .ecovilleray-landing .voix-cta-text { max-width: none !important; }
  .ecovilleray-landing .voix-cta-text h2 { white-space: normal !important; }
  /* Footer : padding réduit + logo qui tient dans l'écran */
  .ecovilleray-landing .landing-footer { padding: 0 !important; }
  .ecovilleray-landing .footer-inner { padding: 56px 24px 0 !important; }
  .ecovilleray-landing .footer-logo { width: 74vw !important; max-width: 340px !important; }
  /* tagline pleine largeur, puis les 3 colonnes réparties en rangée */
  .ecovilleray-landing .footer-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 28px 14px !important; }
  .ecovilleray-landing .footer-grid > p { grid-column: 1 / -1 !important; text-align: justify !important; max-width: none !important; }
  .ecovilleray-landing .footer-grid .t-caption { font-size: 12px !important; margin-bottom: 14px !important; }
  /* Les liens du footer sont du texte simple, pas des boutons : on annule la règle
     tactile globale (index.css, button/a en display:flex centré + 44px de haut) qui
     les recentrait et gonflait leurs espacements sur mobile. */
  .ecovilleray-landing .footer-grid a {
    font-size: 12.5px !important;
    display: block !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .ecovilleray-landing .footer-bottom { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 10px !important; }
  /* Ligne de crédits (Design/Développement) centrée sur mobile, copyright laissé à gauche */
  .ecovilleray-landing .footer-credits { width: 100% !important; text-align: center !important; }
  /* pas de chevauchement de la carte sur mobile */
  .ecovilleray-landing .voix-cta-wrap { margin-bottom: 0 !important; }
  .ecovilleray-landing .initiative-section { padding-top: 44px !important; }
  /* mobile : titre « Une initiative de Révèl'Action » centré, puis logos en défilement continu */
  .ecovilleray-landing .initiative-row { flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; gap: 26px !important; }
  .ecovilleray-landing .initiative-logos-wrap { width: 100% !important; overflow: hidden !important; }
  .ecovilleray-landing .initiative-logos {
    flex-wrap: nowrap !important; width: max-content !important; gap: 0 !important;
    justify-content: flex-start !important; animation: initiativeScroll 16s linear infinite;
  }
  /* espacement porté par une marge (au lieu de gap) → boucle -50% sans coupure */
  .ecovilleray-landing .initiative-logos > * { flex: 0 0 auto !important; margin-right: 44px !important; }
  .ecovilleray-landing .logo-dup { display: flex !important; }
  .ecovilleray-landing .initiative-logos .partner-logo-img { max-height: 64px !important; max-width: none !important; }
  .ecovilleray-landing .initiative-logos .partner-logo-img.logo-lead { max-height: 92px !important; }
}
@media (max-width: 420px) {
  .ecovilleray-landing .tech-left h2 { white-space: normal !important; }
}
/* Slider « 4 étapes » — même esprit accordéon, reflow sur mobile */
@media (max-width: 760px) {
  .ecovilleray-landing #processus { padding: 64px 24px 8px !important; }
  /* en-tête empilé : titre puis carte non-discrimination */
  .ecovilleray-landing .how-head { grid-template-columns: 1fr !important; gap: 20px !important; margin-bottom: 24px !important; }
  .ecovilleray-landing .how-head > *:nth-child(2) > div { margin-left: 0 !important; max-width: none !important; }
  /* accordéon mobile : carte active pleine largeur en haut, puis les autres étapes
     en CHIPS sur DEUX lignes (2 par rangée) → numéro + titre, lisibles et tappables. */
  .ecovilleray-landing .how-slider { flex-wrap: wrap !important; min-height: 0 !important; row-gap: 12px !important; column-gap: 12px !important; }
  .ecovilleray-landing .how-panel.is-active { flex: 0 0 100% !important; order: -1 !important; margin-bottom: 6px !important; }
  .ecovilleray-landing .how-panel.is-active .how-photo { height: 230px !important; }
  .ecovilleray-landing .how-panel:not(.is-active) { flex: 0 0 calc(50% - 6px) !important; }
  /* chaque étape fermée = une chip : pastille numéro à gauche, titre à droite */
  .ecovilleray-landing .how-panel:not(.is-active) .how-collapsed {
    flex-direction: row !important; align-items: center !important; text-align: left !important;
    padding: 12px 14px !important; gap: 12px !important; height: 100% !important;
    background: rgba(4,70,31,0.05) !important; border: 1px solid rgba(4,70,31,0.10) !important; border-radius: 14px !important;
  }
  .ecovilleray-landing .how-panel:not(.is-active) .how-collapsed > span:first-child { width: 40px !important; height: 40px !important; border-radius: 11px !important; font-size: 16px !important; flex-shrink: 0 !important; }
  .ecovilleray-landing .how-panel:not(.is-active) .how-collapsed > span:last-child { font-size: 13px !important; line-height: 1.25 !important; }
  /* description de l'étape active justifiée */
  .ecovilleray-landing .how-panel.is-active p { text-align: justify !important; max-width: none !important; }
}
/* News bar (ticker défilant) */
.ecovilleray-landing .info-bar { padding: 12px 0; }
.ecovilleray-landing .info-marquee {
  display: flex; width: max-content; animation: infoScroll 34s linear infinite;
}
.ecovilleray-landing .info-marquee:hover { animation-play-state: paused; }
.ecovilleray-landing .info-marquee-group { display: flex; flex: 0 0 auto; }
.ecovilleray-landing .info-marquee-item {
  display: inline-flex; align-items: center; gap: 12px; padding-right: 40px; white-space: nowrap;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
}
.ecovilleray-landing .info-dot { opacity: 0.42; }
/* Barre d'infos STATIQUE (non animée) — centrée, s'enroule si besoin */
.ecovilleray-landing .info-static { display: flex; justify-content: center; align-items: center; padding: 0 24px; }
.ecovilleray-landing .info-static .info-marquee-group { flex-wrap: wrap; justify-content: center; }
/* Barre d'infos statique (non animée) — localisation à gauche, accroche à droite */
.ecovilleray-landing .info-bar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; max-width: 1320px; margin: 0 auto; padding: 0 44px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
}
.ecovilleray-landing .info-bar-loc { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.ecovilleray-landing .info-bar-tag { white-space: nowrap; }
@keyframes infoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Cadre lime de la photo « Villeray en chiffres » — bosses affichées sur mobile uniquement */
.ecovilleray-landing .stats-humps,
.ecovilleray-landing .stats-humps-bottom { display: none; width: 100%; }
/* Coline de la section Impact — dessinée uniquement sur mobile (le masque de section y est désactivé) */
.ecovilleray-landing .impact-coline { display: none; }
/* « Pourquoi nous existons » — les photos bougent en continu (effet vivant) */
.ecovilleray-landing .why-img img { animation: whyFloat 6.5s ease-in-out infinite; transform-origin: center; will-change: transform; }
.ecovilleray-landing .why-img:nth-child(2n) img { animation-duration: 8s; animation-delay: -1.4s; }
.ecovilleray-landing .why-img:nth-child(3n) img { animation-duration: 5.6s; animation-delay: -2.6s; }
.ecovilleray-landing .why-img:nth-child(4n) img { animation-duration: 9s; animation-delay: -0.7s; }
/* « 4 étapes » — fondu du contenu à chaque changement (sans déplacer les panneaux) */
.ecovilleray-landing .how-fade { animation: howFade .6s ease both; }
@keyframes howFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes whyFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1.12); }
  25% { transform: translate(9px, -13px) rotate(2deg) scale(1.12); }
  50% { transform: translate(-7px, -4px) rotate(-1.4deg) scale(1.12); }
  75% { transform: translate(-11px, 11px) rotate(-2.2deg) scale(1.12); }
}
/* Frise Bauhaus animée (marquee) */
.ecovilleray-landing .bauhaus-marquee {
  display: flex; width: max-content;
  animation: bauhausScroll 38s linear infinite;
}
.ecovilleray-landing .bauhaus-marquee img {
  display: block; height: clamp(96px, 14vw, 172px); width: auto; flex: 0 0 auto;
}
@keyframes bauhausScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Logos partenaires : le duplicata ne sert qu'au défilement mobile (masqué sur desktop) */
.ecovilleray-landing .logo-dup { display: none; }
@keyframes initiativeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Animations formes géométriques */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes floatYX { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(10px,-14px) rotate(8deg); } }
@keyframes drift { 0%,100% { transform: translate(0,0); } 33% { transform: translate(12px,-10px); } 66% { transform: translate(-8px,8px); } }
@keyframes pulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .ecovilleray-landing [style*="animation"] { animation: none !important; }
  /* La frise Bauhaus doit tourner en boucle en continu, même en mode « réduire les animations ». */
  .ecovilleray-landing .bauhaus-marquee { animation: bauhausScroll 38s linear infinite !important; }
  .ecovilleray-landing .info-marquee { animation: none !important; }
  .ecovilleray-landing .why-img img { animation: none !important; transform: scale(1.12) !important; }
}
/* ════════════════════════════════════════════════
   RESPONSIVE — Tablette & mobile
   (les styles inline sont surchargés via !important,
    scopés sous .ecovilleray-landing)
   ════════════════════════════════════════════════ */
/* ── Navigation : menu hamburger sous 900px ── */
.ecovilleray-landing .nav-burger,
.ecovilleray-landing .nav-mobile-panel { display: none; }
/* ── Hero desktop : fleur géante qui déborde à gauche ── */
@media (min-width: 861px) {
  .ecovilleray-landing .hero-visual {
    max-width: 1040px !important;
    width: 150% !important;
    margin-left: clamp(-520px, -24vw, -200px) !important;
  }
}
@media (max-width: 900px) {
  .ecovilleray-landing nav { padding: 12px 22px !important; justify-content: space-between !important; }
  .ecovilleray-landing .nav-links-desktop,
  .ecovilleray-landing .nav-cta-desktop { display: none !important; }
  /* Logo à gauche */
  .ecovilleray-landing .nav-logo { flex: 0 0 auto !important; justify-content: flex-start !important; }
  /* Burger à droite — cercle vert à traits blancs (comme la maquette) */
  .ecovilleray-landing .nav-burger {
    display: flex !important; width: 46px !important; height: 46px !important; min-width: 46px !important;
    border-radius: 50% !important; aspect-ratio: 1 / 1 !important; flex: 0 0 auto !important;
    background: #33795a; align-items: center; justify-content: center; padding: 0 !important;
    box-shadow: 0 6px 18px rgba(0,34,22,0.22);
  }
  .ecovilleray-landing .nav-burger span { background: #ffffff !important; width: 20px !important; }
  /* Menu plein écran (comme la maquette) */
  .ecovilleray-landing .nav-mobile-panel {
    display: flex !important;
    top: 0 !important; height: 100vh; height: 100dvh;
    padding: 94px 26px 76px !important;
    box-shadow: none !important;
  }
  /* liens plus grands, au-dessus de la feuille décorative */
  .ecovilleray-landing .nav-mobile-panel { overflow: hidden !important; }
  .ecovilleray-landing .nav-mobile-panel > a { font-size: 20px !important; padding: 20px 4px !important; position: relative; z-index: 1; }
  /* Feuille décorative en fond, sous les boutons */
  .ecovilleray-landing .nav-mobile-leaf { z-index: 0 !important; }
  /* Groupe de boutons collé en bas */
  .ecovilleray-landing .nav-mobile-actions {
    margin-top: auto !important; position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 12px; padding-top: 24px;
  }
  .ecovilleray-landing .nav-mobile-actions .nma-btn {
    text-align: center; text-decoration: none;
    font-family: var(--font-body); font-size: 15px; font-weight: 700;
    letter-spacing: 0.06em; padding: 16px 20px; border-radius: 100px;
    box-shadow: 0 8px 20px rgba(0,34,22,0.16);
  }
}
/* ── Tablette & mobile ── */
@media (max-width: 860px) {
  /* Paddings de section compressés (hors hero) */
  .ecovilleray-landing section:not(.hero-section) {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
  /* Empilement des grilles de contenu (celles en « fr » ;
     les grilles décoratives en px, ex. DotGrid, sont épargnées) */
  .ecovilleray-landing [style*="grid-template-columns"][style*="1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Bandes de chiffres : 2 colonnes plutôt que 4
     (deux attributs pour égaler la spécificité de la règle d'empilement) */
  .ecovilleray-landing [style*="grid-template-columns"][style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Gaps généreux réduits */
  .ecovilleray-landing [style*="gap: 80px"],
  .ecovilleray-landing [style*="gap: 72px"],
  .ecovilleray-landing [style*="gap: 60px"] { gap: 36px !important; }
  /* Carte de stats : marge latérale réduite */
  .ecovilleray-landing .stats-card {
    margin-left: 24px !important;
    margin-right: 24px !important;
    padding: 44px 28px !important;
  }
  /* Footer */
  .ecovilleray-landing footer > div {
    padding-left: 24px !important;
    padding-right: 24px !important;
    row-gap: 32px;
  }
  /* ── Hero mobile (split -> empilé, centré) ── */
  .ecovilleray-landing .hero-section {
    min-height: auto !important;
    /* halos doux (réduits) fondus vers le blanc en bas → aucune séparation avec la section suivante */
    background:
      radial-gradient(80% 46% at 82% 5%, rgba(163,239,214,0.20), transparent 62%),
      radial-gradient(82% 44% at 10% 4%, rgba(221,247,88,0.18), transparent 64%),
      linear-gradient(180deg, #FFF6E2 0%, #ffffff 82%) !important;
  }
  .ecovilleray-landing .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 74px 22px 24px !important;
    text-align: left;
  }
  /* visuel (fleur) en haut, agrandi et décalé vers la gauche (déborde du bord gauche) */
  .ecovilleray-landing .hero-visual { order: -1; max-width: none !important; width: 132% !important; margin: 0 0 6px -32% !important; }
  /* titre sur mobile, aligné à gauche */
  .ecovilleray-landing .hero-text,
  .ecovilleray-landing .hero-text h1,
  .ecovilleray-landing .hero-text .t-sub { text-align: left !important; }
  .ecovilleray-landing .hero-text h1 { font-size: 27px !important; line-height: 1.1 !important; }
  /* pagination du hero masquée sur mobile (évite le chevauchement du bouton) */
  .ecovilleray-landing .hero-pagination { display: none !important; }
  /* pas de badge sur mobile (comme la maquette) */
  .ecovilleray-landing .hero-badge { display: none !important; }
  /* sous-titre aligné à gauche + retour à la ligne */
  .ecovilleray-landing .hero-text .t-sub { margin-left: 0 !important; margin-right: 0 !important; white-space: normal !important; }
  /* boutons pleine largeur empilés */
  .ecovilleray-landing .hero-cta { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 12px !important; }
  .ecovilleray-landing .hero-cta button { width: 100% !important; flex: 0 0 auto !important; justify-content: center !important; }
  /* carte localisation : pleine largeur sous les boutons */
  .ecovilleray-landing .hero-loc-card {
    position: static !important; width: auto !important;
    max-width: none; margin: 14px 0 0 !important; text-align: left;
  }
  /* Carte CTA : padding interne réduit */
  .ecovilleray-landing .cta-card { padding: 48px 28px !important; gap: 32px !important; }
  /* Boutons CTA : largeur auto -> pleine largeur */
  .ecovilleray-landing .cta-card [style*="min-width: 260px"] { min-width: 0 !important; width: 100%; }
  /* ── Bande info mobile : localisation + accroche, taille réduite ── */
  .ecovilleray-landing .info-bar { padding: 9px 0 !important; }
  .ecovilleray-landing .info-bar-row { padding: 0 18px; gap: 8px; font-size: 11px; }
  .ecovilleray-landing .info-bar-tag { display: inline-block; font-size: 9px; white-space: normal; text-align: right; line-height: 1.25; }
  /* ── Bannière « Agir ensemble » mobile : image plein cadre, AGIR ENSEMBLE en haut, texte en bas ── */
  .ecovilleray-landing .agir-banner {
    margin-left: 0 !important; margin-right: 0 !important;
    min-height: 86vh !important;
  }
  .ecovilleray-landing .agir-banner > img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  .ecovilleray-landing .agir-content {
    top: 0 !important;
    flex-direction: column-reverse !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  .ecovilleray-landing .agir-title-wrap { align-items: flex-start !important; width: 100%; }
  .ecovilleray-landing .agir-title { text-align: left !important; font-size: clamp(42px, 13vw, 66px) !important; }
  .ecovilleray-landing .agir-text { max-width: none !important; }
}
/* ── Petits mobiles ── */
@media (max-width: 560px) {
  .ecovilleray-landing section:not(.hero-section) {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .ecovilleray-landing .stats-card {
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 36px 22px !important;
  }
  .ecovilleray-landing footer > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* Boutons hero pleine largeur */
  .ecovilleray-landing .hero-cta button { width: 100% !important; flex: 0 0 auto !important; justify-content: center !important; }
  /* Gros chiffres de stats réduits */
  .ecovilleray-landing [style*="font-size: 60px"] { font-size: 38px !important; }
  .ecovilleray-landing [style*="font-size: 44px"] { font-size: 32px !important; }
  /* Paddings de cartes internes réduits */
  .ecovilleray-landing [style*="padding: 44px"],
  .ecovilleray-landing [style*="padding: 56px"] { padding: 26px !important; }
  /* Logos partenaires plus compacts (hauteurs inline neutralisées) */
  .ecovilleray-landing .partner-logo-img { height: auto !important; max-height: 58px !important; max-width: 62vw !important; }
  /* « Pourquoi nous existons » : sur mobile, photos réduites + réparties en haut/bas (centre dégagé) */
  .ecovilleray-landing .why-collage { min-height: 600px !important; }
  .ecovilleray-landing .why-img { width: 72px !important; height: 72px !important; }
  .ecovilleray-landing .why-img:nth-child(1) { left: 2% !important;  top: 5% !important; }
  .ecovilleray-landing .why-img:nth-child(2) { left: 30% !important; top: 1% !important; }
  .ecovilleray-landing .why-img:nth-child(3) { left: 58% !important; top: 4% !important; }
  .ecovilleray-landing .why-img:nth-child(4) { left: 82% !important; top: 11% !important; }
  .ecovilleray-landing .why-img:nth-child(5) { left: 2% !important;  top: 80% !important; }
  .ecovilleray-landing .why-img:nth-child(6) { left: 24% !important; top: 87% !important; }
  .ecovilleray-landing .why-img:nth-child(7) { left: 47% !important; top: 81% !important; }
  .ecovilleray-landing .why-img:nth-child(8) { left: 68% !important; top: 88% !important; }
  .ecovilleray-landing .why-img:nth-child(9) { left: 82% !important; top: 79% !important; }
}
/* ── Échelle typographique mobile ── */
@media (max-width: 640px) {
  .ecovilleray-landing .t-display { font-size: 40px; }
  .ecovilleray-landing .t-h1 { font-size: 36px; }
  .ecovilleray-landing .t-h2 { font-size: 32px; }
  .ecovilleray-landing .t-h3 { font-size: 26px; }
  .ecovilleray-landing .t-h4 { font-size: 26px; }
  .ecovilleray-landing .t-h5 { font-size: 22px; }
  .ecovilleray-landing .t-sub { font-size: 16px; }
}
/* ============================================================
   VILLERAY ECO-AI — PREMIUM CSS
   Style: Montreal Urban • Eco • Modern SaaS
   Font: Poppins
   ============================================================ */

/* ---------- TOKENS ---------- */
/* Custom Modern Cursor */
.custom-cursor {
  width: 20px;
  height: 20px;
  border: 2px solid var(--green-500);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  transition: transform 0.1s ease-out, background 0.2s ease;
  transform: translate(-50%, -50%);
}
.custom-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--green-500);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
}
body, a, button, input, select, textarea, label {
  cursor: none !important;
}
a:hover ~ .custom-cursor, button:hover ~ .custom-cursor {
  transform: translate(-50%, -50%) scale(2);
  background: rgba(34, 197, 94, 0.1);
}
@media (max-width: 1024px) {
  .custom-cursor, .custom-cursor-dot { display: none; }
  body, a, button { cursor: auto !important; }
}

:root {
    --green-400: #34d399;
    --green-500: #10b981;
    --green-600: #059669;
    --green-700: #047857;
    --green-900: #064e3b;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --teal-400: #2dd4bf;
    --dark-950: #030712;
    --dark-900: #0a0f1a;
    --dark-800: #111827;
    --dark-700: #1f2937;
    --dark-600: #374151;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-500: #6b7280;
    --neutral-700: #374151;
    --white: #ffffff;
    --cream: #f8fafc;
    --forest: #0f172a;
    --leaf: #10b981;
    --moss: #059669;
    --sage: #34d399;
    --mint: #6ee7b7;
    --muted: #64748b;

    /* ── Charte graphique EcoVilleray (Figma / officielle) ── */
    --eco-forest-night: #002216; /* vert le plus profond — fonds/headings */
    --eco-forest: #04461F;       /* vert principal — textes */
    --eco-forest-deep: #063f27;  /* surfaces sombres */
    --eco-electric: #DDF758;     /* lime signature — accent principal */
    --eco-warmy: #A3EFD6;        /* menthe */
    --eco-sweety: #D7E7B6;       /* vert tendre */
    --eco-frozen: #B2CAC2;       /* gris-vert */
    --eco-milky: #FFF4D5;        /* crème — fonds clairs */
    --eco-argelo: #EB5C07;       /* orange — accent chaud */

    --font-display: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    --grad-green: linear-gradient(135deg, var(--green-400) 0%, var(--green-600) 100%);
    --grad-hero: linear-gradient(170deg, rgba(0,0,0,.25) 0%, rgba(4,30,10,.62) 100%);
    --grad-dark: linear-gradient(180deg, var(--dark-900) 0%, var(--dark-800) 100%);

    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 40px;
    --radius-xl: 60px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
    --shadow-md: 0 10px 25px rgba(0,0,0,.15);
    --shadow-lg: 0 25px 50px rgba(0,0,0,.25);
    --shadow-glow: 0 0 40px rgba(74, 222, 128, .25);

    --font: 'Poppins', sans-serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--white);
    color: var(--dark-800);
    line-height: 1.65;
    overflow-x: hidden;
    cursor: none;
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
h1 { font-size: clamp(42px, 7vw, 72px); font-weight: 800; }
h2 { font-size: clamp(34px, 5vw, 52px); }
h3 { font-size: clamp(22px, 3vw, 30px); }
h4 { font-size: 20px; font-weight: 600; }
h5 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
p { font-size: 17px; line-height: 1.75; color: var(--neutral-500); }

em { font-style: normal; color: var(--green-500); }

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

/* ---------- LAYOUT ---------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.section-pad { padding: 8rem 0; }
.dark-section { background: var(--dark-900); color: var(--white); }
.dark-section p { color: #9ca3af; }
.dark-section h2 { color: var(--white); }

/* ---------- CURSOR ---------- */
.cursor-dot, .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition-property: transform;
    transition-timing-function: var(--ease-out);
}
.cursor-dot {
    width: 8px; height: 8px;
    background: var(--green-400);
    border-radius: 50%;
    transition-duration: 0s;
}
.cursor-ring {
    width: 36px; height: 36px;
    border: 2px solid rgba(74,222,128,.5);
    border-radius: 50%;
    transition-duration: .15s;
}
.cursor-ring.large {
    width: 64px; height: 64px;
    background: rgba(74,222,128,.06);
    transition-duration: .25s;
}

/* ---------- NAVBAR ---------- */
.navbar {
    position: fixed;
    width: 100%; top: 0; z-index: 1000;
    padding: 1.25rem 0;
    background: var(--white);
    transition: all .4s var(--ease-out);
}
.navbar.scrolled {
    padding: 1rem 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
/* nav revised: brand left, links right */
.nav-inner {
    max-width: 1536px; margin: 0 auto; padding: 0 2.5rem;
    display: flex; align-items: center; justify-content: space-between;
}
.nav-brand {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 1.25rem; font-weight: 700; color: var(--green-800);
    transition: all 0.3s var(--ease-out);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nav-brand:hover { transform: scale(1.02); }
.nav-brand strong { color: var(--green-600); font-weight: 900; }

.nav-links {
    display: flex; align-items: center; gap: 2.5rem; list-style: none;
}
.nav-links a { font-size: .95rem; font-weight: 600; color: var(--dark-700); transition: color .3s; }
.nav-links a:hover { color: var(--green-600); }

/* Nav Login Link */
.nav-login-link {
    padding: 0.45rem 1.25rem !important;
    border: 1px solid var(--green-500) !important;
    color: var(--green-600) !important;
    border-radius: 100px !important;
    transition: all 0.3s !important;
}
.nav-login-link:hover {
    background: var(--green-50) !important;
}

/* Hero Sponsor Strip */
.hero-sponsors {
    margin-top: 3.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.75rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    max-width: fit-content;
}

.sponsors-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.sponsors-logos {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.sponsor-item {
    display: flex;
    align-items: center;
}

.sponsor-logo-img {
    height: 42px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.3s;
}

.sponsor-logo-img:hover {
    opacity: 1;
}

.sponsor-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.12);
}

.sponsor-placeholder {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    transition: all 0.3s;
}

.sponsor-placeholder:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 991px) {
    .hero-sponsors {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .sponsors-logos { flex-wrap: wrap; gap: 0.75rem; }
    .sponsor-divider { display: none; }
}

.features-section {
    background-color: #f0fdf4; /* Ultra light mint */
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}

.features-tabs {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 5rem;
    padding: 0 1rem;
    flex-wrap: wrap;
}

.f-tab {
    padding: 0.8rem 2rem;
    border-radius: 99px;
    background: transparent;
    color: var(--neutral-500);
    font-weight: 700;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.f-tab:hover {
    color: var(--green-600);
}

.f-tab.active {
    background: #5eead4; /* Mint/Cyan accent like screenshot */
    background: var(--green-400); 
    color: var(--white);
    box-shadow: 0 10px 25px rgba(34, 197, 94, 0.2);
}

.features-content-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 8rem;
    align-items: center;
}

.f-content-pane {
    display: none;
    animation: fadeInSlideUp 0.6s var(--ease-out) forwards;
}

.f-content-pane.active {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

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

.f-text-block h2 {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--dark-900);
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.f-text-block p {
    font-size: 1.25rem;
    color: var(--neutral-600);
    line-height: 1.7;
    margin-bottom: 3rem;
}

.f-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.f-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    font-weight: 500;
    color: var(--dark-800);
}

.f-list-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.f-visual-block {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0,0,0,0.12);
}

.f-mockup-img {
    width: 100%;
    display: block;
    border-radius: 24px;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .f-content-pane.active {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .features-content-split {
        grid-template-columns: 1fr;
    }
    .f-text-block h2 { font-size: 2.5rem; }
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .75rem;
    justify-content: center;
    text-align: center;
    padding: 1.1rem 2.4rem;
    border-radius: 14px;
    font-family: var(--font); font-size: 1rem; font-weight: 600;
    border: none; cursor: pointer;
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}
.btn-primary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--white);
    padding: 1.25rem 3.5rem;
    font-size: 1.15rem;
    box-shadow: 0 20px 40px rgba(16,185,129,0.3);
    position: relative;
    overflow: hidden;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(16,185,129,0.4);
}
.btn-hero-lg {
    padding: 1.4rem 4rem;
    font-size: 1.2rem;
    min-width: 320px;
}
.btn-ghost {
    background: rgba(16, 185, 129, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.1);
    color: var(--green-700);
}
.btn-ghost:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
    transform: translateY(-5px);
}
.btn-full { width: 100%; justify-content: center; }

/* Shimmer effect on primary btn */
.btn-primary::after {
    content: '';
    position: absolute; top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transition: left .6s;
}
.btn-primary:hover::after { left: 130%; }

/* ---------- HERO V4 (Flowrix Style) ---------- */
.hero-v4-wrapper {
    /* Accounts for the 80px navbar, plus 1rem top margin, 1.5rem L/R/B margins */
    padding: 100px 1.5rem 1.5rem 1.5rem;
    background: var(--white);
    min-height: 100vh;
}

.hero-v4 {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    min-height: calc(100vh - 110px); /* Fill most of the screen */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3.5rem 4.5rem;
    box-shadow: 0 40px 80px rgba(0,0,0,0.1);
}

.hero-v4-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-v4-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8, 14, 25, 0.96) 0%, rgba(10, 18, 30, 0.9) 60%, rgba(16, 185, 129, 0.25) 100%);
    z-index: 1;
}

/* Ensure text is above background */
.hero-v4 > div {
    position: relative;
    z-index: 2;
}

/* Top Row */
.hero-v4-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.hero-v4-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    font-weight: 500;
}

.hv4-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green-400);
    box-shadow: 0 0 12px var(--green-400);
}

.hero-v4-desc {
    max-width: 380px;
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: right;
    margin: 0;
}

.hero-v4-desc strong {
    color: var(--white);
    font-weight: 600;
}

/* Bottom Row */
.hero-v4-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hero-v4-title-block {
    max-width: 65%;
}

.hv4-tagline {
    color: rgba(255,255,255,0.7);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.hv4-tagline strong { color: var(--green-400); font-weight: 700; }
.hv4-tagline em { color: var(--white); font-style: normal; font-weight: 700; }

.hv4-title {
    font-size: 8rem;
    font-weight: 900;
    line-height: 0.9;
    color: var(--white);
    letter-spacing: -3px;
    margin: 0;
}

.hv4-title em {
    color: var(--green-400);
    font-style: normal;
}

/* Bottom Right: CTA & Services (Flowrix Style List) */
.hero-v4-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 320px;
}

.hv4-cta {
    background: var(--green-500);
    color: var(--white);
    padding: 1.4rem;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    border-radius: 16px 16px 0 0;
    text-decoration: none;
    transition: background 0.3s;
}

.hv4-cta:hover {
    background: var(--green-600);
}

.hv4-services {
    background: var(--white);
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

.hv4-service-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.5rem;
    color: var(--dark-800);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1px solid var(--gray-100);
    transition: all 0.3s;
}

.hv4-service-row:last-child {
    border-bottom: none;
}

.hv4-service-row:hover {
    background: var(--green-50);
    color: var(--green-600);
    padding-left: 1.7rem;
}

/* Responsive V4 */
@media (max-width: 1199px) {
    .hv4-title { font-size: 6rem; }
    .hero-v4 { padding: 3rem; }
}

@media (max-width: 991px) {
    .hero-v4-top {
        flex-direction: column;
        gap: 2rem;
    }
    .hero-v4-desc {
        text-align: left;
    }
    .hero-v4-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 4rem;
        margin-top: 4rem;
    }
    .hero-v4-title-block, .hero-v4-right {
        max-width: 100%;
        width: 100%;
    }
    .hv4-title { font-size: 5rem; }
}

@media (max-width: 767px) {
    .hero-v4-wrapper { padding: 80px 0.5rem 0.5rem 0.5rem; }
    .hero-v4 { border-radius: 24px; padding: 2rem; min-height: calc(100vh - 90px); }
    .hv4-title { font-size: 3.5rem; }
}

/* Old hero compat */
.hero-scroll-hint {
    position: absolute; bottom: 2.5rem; left: 50%;
    transform: translateX(-50%); z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    color: var(--neutral-500);
}
.scroll-line {
    width: 1px; height: 50px;
    background: linear-gradient(to bottom, var(--green-500), transparent);
    animation: scrollDrop 2s ease-in-out infinite;
}

.d1 { transition-delay: .1s; }
.d2 { transition-delay: .25s; }
.d3 { transition-delay: .4s; }
.d4 { transition-delay: .55s; }
.d5 { transition-delay: .7s; }

/* ---------- SCROLL REVEAL ---------- */
.reveal {
    opacity: 0; transform: translateY(36px);
    transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
    transition-delay: var(--delay, 0s);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- PARTNERS SECTION - PREMIUM DESIGN ---------- */
.partners-section {
    background: #fafafa;
    padding: 6rem 0;
    border-top: 1px solid var(--neutral-100);
}
.partners-premium-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #059669;
    background: rgba(16, 185, 129, 0.08);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
    border: 1px solid rgba(16, 185, 129, 0.1);
}
.partners-label {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--neutral-500);
    position: relative;
    padding-bottom: 1rem;
}
.partners-label::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 30px; height: 2px; background: var(--green-500);
}
.partners-grid-premium {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
.partner-chip-premium {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    transition: all 0.4s var(--ease-out);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.partner-chip-premium:hover {
    border-color: var(--green-400);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}
.p-chip-icon {
    width: 36px; height: 36px;
    background: #f0fdf4;
    color: var(--green-600);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.partner-chip-premium:hover .p-chip-icon {
    background: var(--green-500);
    color: var(--white);
}
.partner-chip-premium span {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-800);
}

/* ---------- LOGO BAR — Premium animated marquee ---------- */
.logo-bar {
    background: var(--white);
    padding: 0;
    overflow: hidden;
    position: relative;
    margin-top: -2px; /* Pull up to overlap the hero gap */
}

.logo-bar-inner {
    max-width: 100%;
    display: flex; align-items: center;
    height: 60px;
}
.partner-label {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--neutral-500); white-space: nowrap;
    padding: 0 2rem;
    border-right: 1px solid var(--neutral-200);
    height: 100%; display: flex; align-items: center;
    background: var(--white);
    z-index: 2; flex-shrink: 0;
}

/* Marquee track */
.marquee-track-outer {
    flex: 1; overflow: hidden; position: relative;
    height: 100%; display: flex; align-items: center;
}
/* Fade edges */
.marquee-track-outer::before,
.marquee-track-outer::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none;
}
.marquee-track-outer::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
.marquee-track-outer::after  { right: 0; background: linear-gradient(to left,  var(--white), transparent); }

.marquee-track {
    display: flex; align-items: center;
    animation: marqueeScroll 28s linear infinite;
    width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee-group {
    display: flex; align-items: center; gap: 0; flex-shrink: 0;
}

.partner-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .875rem; font-weight: 600;
    color: var(--dark-700);
    padding: .45rem 1.25rem;
    white-space: nowrap;
    transition: color .2s;
}
.partner-chip:hover { color: var(--green-600); }

.partner-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--neutral-200); flex-shrink: 0; margin: 0 .25rem;
}



/* ---------- SECTION EYEBROW ---------- */
.section-eyebrow {
    display: inline-block;
    font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--green-600);
    background: #dcfce7;
    padding: .35rem .9rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.25rem;
}
.section-eyebrow.light {
    color: var(--green-400);
    background: rgba(74,222,128,.1);
}
.section-header.center { text-align: center; margin-bottom: 5rem; }
.section-header.center p { max-width: 600px; margin: 1rem auto 0; }

/* ---------- WHAT SECTION ---------- */
.what-section { background: var(--white); }
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.split-text h2 { margin-bottom: 1.5rem; }
.split-text > p { margin-bottom: 2.5rem; }

.check-list { display: flex; flex-direction: column; gap: .85rem; }
.check-list li { display: flex; align-items: flex-start; gap: .85rem; font-size: 16px; color: var(--dark-700); font-weight: 500; }
.check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; min-width: 22px;
    background: var(--green-500); color: white;
    border-radius: 50%; font-size: 12px; font-weight: 700; margin-top: 1px;
}

/* Phone mockup */
.split-visual { display: flex; justify-content: center; }
.phone-mockup { position: relative; }
.phone-frame {
    width: 280px; height: 560px;
    background: var(--dark-950);
    border-radius: 44px;
    border: 3px solid rgba(255,255,255,.1);
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 12px rgba(0,0,0,.04);
    position: relative; z-index: 1;
}
.phone-screen { height: 100%; display: flex; flex-direction: column; background: var(--dark-900); }
.app-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.25rem .75rem;
    font-size: .8rem; font-weight: 600; color: var(--white);
}
.status-dot { width: 8px; height: 8px; background: var(--green-400); border-radius: 50%; }

.app-scan { padding: .5rem 1rem; flex: 1; display: flex; align-items: center; justify-content: center; }
.scan-area {
    position: relative; width: 160px; height: 160px;
    border-radius: 16px; background: rgba(255,255,255,.03);
    display: flex; align-items: center; justify-content: center;
}
.scan-line {
    position: absolute; width: 80%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--green-400), transparent);
    animation: scanMove 2s ease-in-out infinite;
}
@keyframes scanMove {
    0%, 100% { top: 20%; }
    50% { top: 80%; }
}
.scan-corner {
    position: absolute; width: 16px; height: 16px;
    border-color: var(--green-400); border-style: solid;
}
.scan-corner.tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.scan-corner.tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.scan-corner.bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.scan-corner.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }
.scan-label { color: rgba(255,255,255,.4); font-size: .7rem; margin-top: 1rem; position: absolute; bottom: -1.5rem; }

.app-results { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.result-item {
    display: flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.04);
    border-radius: 10px; padding: .6rem;
    font-size: .68rem; color: rgba(255,255,255,.7);
    animation: resultAppear .5s var(--ease-out) both;
}
.result-item:nth-child(1) { animation-delay: .2s; }
.result-item:nth-child(2) { animation-delay: .5s; }
.result-item:nth-child(3) { animation-delay: .8s; }
@keyframes resultAppear {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}
.result-text { flex: 1; }
.result-match { color: var(--green-400); font-weight: 700; }

.phone-glow {
    position: absolute;
    bottom: -60px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(34,197,94,.3) 0%, transparent 70%);
    filter: blur(20px); z-index: 0;
}

/* ---------- FONCTIONS SECTION (UML 3) ---------- */
.fonctions-section { background: var(--white); }
.fonctions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.fonction-card {
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    padding: 2.75rem 2.25rem;
    transition: all .4s var(--ease-out);
    position: relative; overflow: hidden;
}
.fonction-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease-out);
}
.fonction-card:nth-child(1)::before { background: var(--grad-green); }
.fonction-card:nth-child(2)::before { background: linear-gradient(90deg, var(--blue-400), var(--blue-500)); }
.fonction-card:nth-child(3)::before { background: linear-gradient(90deg, var(--teal-400), #0d9488); }
.fonction-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.fonction-card:hover::before { transform: scaleX(1); }

.fonction-num {
    font-size: 3.5rem; font-weight: 800; opacity: .06;
    line-height: 1; color: var(--dark-800); margin-bottom: .25rem;
}
.fonction-icon-wrap {
    width: 52px; height: 52px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.5rem;
}
.fonction-icon-wrap.green { background: #dcfce7; stroke: var(--green-700); }
.fonction-icon-wrap.blue  { background: #dbeafe; stroke: #1d4ed8; }
.fonction-icon-wrap.teal  { background: #ccfbf1; stroke: #0f766e; }

.fonction-card h3 { font-size: 1.25rem; color: var(--dark-800); margin-bottom: 1rem; }
.fonction-card > p { font-size: 15px; color: var(--neutral-500); line-height: 1.7; margin-bottom: 2rem; }

.fonction-flow {
    display: flex; flex-direction: column; gap: .5rem;
    border-top: 1px solid var(--neutral-200); padding-top: 1.5rem;
}
.flow-step {
    font-size: 13px; font-weight: 500; color: var(--neutral-700);
    background: var(--white); border-radius: 8px;
    padding: .55rem .85rem;
}
.flow-step.accent { background: var(--dark-800); color: var(--green-400); }
.flow-arrow { font-size: 12px; color: var(--neutral-500); text-align: center; line-height: 1; }

/* BANQUE ALIMENTAIRE SECTION REMOVED */

/* ---------- EMPLOI SECTION ---------- */
.emploi-section {
    background: var(--neutral-100);
    position: relative;
    padding: 8rem 0;
    margin-top: 0;
    z-index: 1;
}
.emploi-timeline { display: flex; flex-direction: column; gap: 0; max-width: 900px; margin: 0 auto 4rem; }

.etape {
    display: grid; grid-template-columns: 80px 1fr;
    align-items: stretch; gap: 0;
    position: relative;
}
.etape:not(:last-child) .etape-num::after {
    content: ''; position: absolute;
    left: 50%; top: 100%; transform: translateX(-50%);
    width: 2px; height: 100%; min-height: 40px;
    background: linear-gradient(to bottom, var(--green-500), transparent);
}
.etape-num {
    position: relative;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: .15rem;
}
.etape-num-inner {
    width: 44px; height: 44px;
    background: var(--white); border: 2px solid var(--green-500);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; color: var(--green-700);
    flex-shrink: 0; z-index: 1;
    box-shadow: 0 0 0 6px rgba(34,197,94,.08);
}
/* ---------- AUTH PAGE PRO (Split Layout) ---------- */
.auth-page-pro {
    background: var(--white);
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    color: var(--dark-900);
}
.auth-split-container {
    display: flex;
    min-height: 100vh;
}

/* Left Side - Visual */
.auth-visual-side {
    position: relative;
    flex: 1.2; /* Larger than form side */
    display: flex;
    flex-direction: column;
    padding: 4rem;
    color: var(--white);
    overflow: hidden;
}
.auth-visual-bg {
    position: absolute; inset: 0; z-index: -1;
}
.auth-visual-bg img {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.65);
}
.auth-visual-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(21, 128, 61, 0.4) 0%, rgba(3, 7, 18, 0.8) 100%);
}
.auth-visual-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.auth-back-home {
    display: flex; align-items: center; gap: 0.75rem;
    color: var(--white); font-weight: 600;
    transition: transform 0.3s ease;
}
.auth-back-home:hover { transform: translateX(-5px); }

.auth-mission { max-width: 500px; margin-bottom: 4rem; }
.auth-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 99px;
    font-size: 0.85rem; font-weight: 700;
    margin-bottom: 2rem;
}
.auth-mission h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 1.5rem; }
.auth-mission p { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,0.8); }

/* Right Side - Form */
.auth-form-side {
    flex: 1;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}
.auth-form-container {
    width: 100%;
    max-width: 420px;
}
.auth-logo-pro { font-size: 1.4rem; font-weight: 700; color: var(--green-600); margin-bottom: 2rem; }
.auth-form-header h2 { font-size: 1.85rem; color: var(--dark-900); margin-bottom: 0.5rem; font-family: 'Poppins', sans-serif; }
.auth-form-header p { color: var(--neutral-500); margin-bottom: 2.5rem; font-size: 1rem; }

/* Social buttons */
.auth-social { margin-bottom: 1.5rem; }
.btn-social {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    padding: 0.85rem;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    font-weight: 600; font-family: inherit;
    transition: all 0.3s;
}
.btn-social:hover { background: #f9fafb; border-color: var(--neutral-300); }

.auth-divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}
.auth-divider::before {
    content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--neutral-100);
}
.auth-divider span {
    position: relative; background: var(--white); padding: 0 1rem;
    color: var(--neutral-400); font-size: 0.85rem; font-weight: 500;
}

/* Tabs Toggle */
.auth-tabs-pro {
    display: flex;
    gap: 0.5rem;
    background: #f3f4f6;
    padding: 0.35rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}
.auth-tabs-pro .auth-tab {
    flex: 1; border: none; padding: 0.6rem; border-radius: 8px;
    font-weight: 600; font-size: 0.9rem; cursor: pointer;
    transition: all 0.3s; background: transparent; color: var(--neutral-500);
}
.auth-tabs-pro .auth-tab.active { background: var(--white); color: var(--dark-900); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

/* Forms Stack */
.auth-form-pro { display: none; }
.auth-form-pro.active { display: block; animation: slideUp 0.5s var(--ease-out); }
@keyframes slideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.label-row { display: flex; justify-content: space-between; align-items: center; }
.forgot-link { font-size: 0.85rem; color: var(--green-600); font-weight: 600; }
.form-terms { font-size: 0.85rem; color: var(--neutral-400); margin: 1rem 0; line-height: 1.4; }
.form-terms a { color: var(--dark-800); text-decoration: underline; }

.auth-footer-pro { margin-top: 2rem; text-align: center; border-top: 1px solid var(--neutral-100); padding-top: 1.5rem; }
.auth-footer-pro p { display: none; font-size: 0.95rem; color: var(--neutral-500); }
.auth-form-pro#login-form.active ~ .auth-footer-pro p:last-child { display: block; }
.auth-form-pro#signup-form.active ~ .auth-footer-pro p:first-child { display: block; }
.auth-footer-pro a { color: var(--green-600); font-weight: 700; text-decoration: none; }

/* Responsive */
@media (max-width: 1024px) {
    .auth-visual-side { flex: 1; padding: 3rem; }
    .auth-mission h1 { font-size: 2.5rem; }
}
@media (max-width: 850px) {
    .auth-split-container { flex-direction: column; }
    .auth-visual-side { min-height: 40vh; padding: 2rem; justify-content: center; }
    .auth-form-side { padding: 3rem 1.5rem; }
    .auth-mission { margin-bottom: 0; }
    .auth-mission h1 { font-size: 2rem; }
    .auth-visual-overlay { background: linear-gradient(to bottom, rgba(3,7,18,0.2), rgba(3,7,18,0.8)); }
}
/* ---------- STAT CARDS REFINEMENT ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.stat-card {
    background: var(--white);
    padding: 3rem 2rem;
    border: 1px solid var(--neutral-100);
    transition: all 0.5s var(--ease-out);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}
.stat-card:hover {
    transform: translateY(-10px);
    border-color: var(--green-200);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.stat-icon-wrap {
    width: 64px; height: 64px;
    background: #f0fdf4;
    color: var(--green-600);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2rem;
    transition: all 0.5s var(--ease-out);
}
.stat-card:hover .stat-icon-wrap {
    background: var(--green-500);
    color: var(--white);
    transform: rotate(10deg);
}
.stat-number-wrap { display: flex; align-items: baseline; gap: 0.1rem; margin-bottom: 0.5rem; }
.stat-number { font-size: 3rem; font-weight: 800; color: var(--dark-900); }
.stat-plus { font-size: 1.5rem; font-weight: 700; color: var(--green-500); }
.stat-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--dark-800); margin-bottom: 1rem; }
.stat-card p { font-size: 0.95rem; line-height: 1.6; }
.etape-body {
    display: flex; gap: 1.5rem; align-items: flex-start;
    background: var(--white); border-radius: var(--radius-md);
    padding: 2rem; margin: 0 0 1.5rem 1.5rem;
    border: 1px solid var(--neutral-200);
    transition: box-shadow .3s, border-color .3s;
}
.etape-body:hover { box-shadow: var(--shadow-md); border-color: var(--green-400); }
.etape-icon {
    width: 44px; height: 44px; min-width: 44px;
    background: #dcfce7; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    stroke: var(--green-700);
}
.etape-content h4 { font-size: 1.05rem; color: var(--dark-800); margin-bottom: .5rem; }
.etape-content > p { font-size: 15px; color: var(--neutral-500); margin: 0 0 1rem; }
.etape-tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.etape-tags span {
    font-size: .72rem; font-weight: 600; color: var(--green-700);
    background: #dcfce7; border: 1px solid #bbf7d0;
    padding: .25rem .65rem; border-radius: var(--radius-full);
}

.emploi-cta {
    text-align: center;
    background: var(--dark-800); border-radius: var(--radius-lg);
    padding: 3.5rem 2rem;
}
.emploi-cta > p {
    font-size: 1.15rem; font-weight: 500;
    color: rgba(255,255,255,.7); margin-bottom: 1.75rem;
}

/* Old diagram styles removed for new tabbed features section */





.uml-diagram {
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    overflow-x: auto;
}

/* Column headers */
.uml-headers {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem; margin-bottom: 2.5rem;
}
.uml-col-head {
    display: flex; flex-direction: column; align-items: center;
    gap: .5rem; text-align: center;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-md);
    border-top: 3px solid;
}
.uml-col-head.green { background: #f0fdf4; border-color: var(--green-500); }
.uml-col-head.blue  { background: #eff6ff; border-color: var(--blue-500); }
.uml-col-head.teal  { background: #f0fdfa; border-color: var(--teal-400); }
.uml-col-icon {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .25rem;
}
.uml-col-head.green .uml-col-icon { background: #dcfce7; stroke: var(--green-700); }
.uml-col-head.blue  .uml-col-icon { background: #dbeafe; stroke: #1d4ed8; }
.uml-col-head.teal  .uml-col-icon { background: #ccfbf1; stroke: #0f766e; }
.uml-col-head span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--neutral-500); }
.uml-col-head strong { font-size: 1rem; font-weight: 700; color: var(--dark-800); }

/* UML body grid */
.uml-body { display: flex; flex-direction: column; gap: 1.25rem; }
.uml-row, .uml-step-row, .uml-final-row {
    display: grid; grid-template-columns: 1fr 60px 1fr;
    align-items: center; gap: 0;
    min-height: 80px;
}

/* Actor row */
.uml-actor-row { min-height: 48px; }
.uml-actor {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: .8rem; font-weight: 600; color: var(--neutral-500);
    background: var(--neutral-100); border-radius: var(--radius-sm);
    padding: .5rem .9rem;
}
.uml-actor-icon { stroke: var(--neutral-500); }

/* UML nodes */
.uml-node {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: .8rem; font-weight: 500; line-height: 1.4;
    border-left: 3px solid;
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
    transition-delay: var(--nd, 0s);
}
.uml-diagram.visible .uml-node { opacity: 1; transform: translateY(0); }
.uml-node svg { flex-shrink: 0; stroke: inherit; }
.uml-node em { font-style: normal; opacity: .65; font-size: .75rem; display: block; }

.node-action  { background: #f0fdf4; border-color: var(--green-500); color: var(--green-700); stroke: var(--green-600); }
.node-ai      { background: #1e293b; border-color: var(--green-400); color: var(--white); stroke: var(--green-400); position: relative; overflow: hidden; }
.node-result  { background: #eff6ff; border-color: var(--blue-500); color: #1d4ed8; stroke: #1d4ed8; }
.node-final   { background: #f0fdfa; border-color: var(--teal-400); color: #0f766e; stroke: #0f766e; font-weight: 700; }

/* AI pulse effect */
.ai-pulse {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(74,222,128,.12) 0%, transparent 70%);
    animation: aiGlow 2s ease-in-out infinite;
}
/* --- Animations --- */
.reveal, .animate-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.visible, .animate-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fail-safe: show elements if JS is disabled or after timeout */
.no-js .reveal, .js-timeout .reveal {
  opacity: 1 !important;
  transform: none !important;
}

.d1 { transition-delay: 0.1s !important; }
.d2 { transition-delay: 0.2s !important; }
.d3 { transition-delay: 0.3s !important; }
.d4 { transition-delay: 0.4s !important; }
.d5 { transition-delay: 0.5s !important; }


@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes aiGlow {
    0%, 100% { opacity: .5; transform: scale(.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Vertical arrows */
.uml-arrow-down {
    height: 32px; width: 2px;
    background: linear-gradient(to bottom, var(--green-400), transparent);
    margin: .25rem auto 0;
    position: relative;
    opacity: 0; transform: scaleY(0); transform-origin: top;
    transition: opacity .4s, transform .4s var(--ease-out);
    transition-delay: var(--nd, 0s);
}
.uml-arrow-down::after {
    content: '';
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--green-400);
}
.uml-diagram.visible .uml-arrow-down { opacity: 1; transform: scaleY(1); }

/* Horizontal arrows */
.uml-arrow-right-wrap { display: flex; align-items: center; justify-content: center; min-height: 80px; }
.uml-arrow-h {
    width: 100%; height: 2px;
    background: linear-gradient(to right, var(--green-300), var(--blue-400));
    position: relative;
    opacity: 0; transform: scaleX(0); transform-origin: left;
    transition: opacity .4s, transform .5s var(--ease-out);
    transition-delay: var(--nd, 0s);
}
.uml-arrow-h.final { background: linear-gradient(to right, var(--blue-400), var(--teal-400)); }
.uml-arrow-h::after {
    content: '';
    position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--blue-400);
}
.uml-arrow-h.final::after { border-left-color: var(--teal-400); }
.uml-diagram.visible .uml-arrow-h { opacity: 1; transform: scaleX(1); }

/* Legend */
.uml-legend {
    display: flex; gap: 2rem; flex-wrap: wrap;
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--neutral-200);
    justify-content: center;
}
.legend-item { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--neutral-500); }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.leg-dot.green { background: var(--green-500); }
.leg-dot.blue  { background: var(--blue-500); }
.leg-dot.teal  { background: var(--teal-400); }
.leg-dot.gold  { background: #f59e0b; }

/* BANQUE PHOTO REMOVED */


.axis-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg); padding: 3.5rem 3rem;
    transition: all .4s var(--ease-out);
    position: relative; overflow: hidden;
}
.axis-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--grad-green);
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease-out);
}
.axis-card:hover { background: rgba(255,255,255,.06); transform: translateY(-8px); border-color: rgba(74,222,128,.2); }
.axis-card:hover::before { transform: scaleX(1); }
.axis-num { font-size: 4rem; font-weight: 800; opacity: .06; line-height: 1; margin-bottom: .5rem; color: var(--white); }
.axis-icon-svg {
    width: 56px; height: 56px;
    background: rgba(74,222,128,.1);
    border: 1px solid rgba(74,222,128,.15);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2rem;
    stroke: var(--green-400);
}
.axis-card h3 { color: var(--white); margin-bottom: 1rem; font-size: 1.5rem; }
.axis-card p { font-size: 16px; }
.axis-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; }
.axis-tags span {
    background: rgba(74,222,128,.1); color: var(--green-400);
    border: 1px solid rgba(74,222,128,.2);
    padding: .3rem .8rem; border-radius: var(--radius-full);
    font-size: .75rem; font-weight: 600;
}

/* ---------- IMPACTS SECTION ---------- */
.impacts-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
    margin-bottom: 5rem;
}
.impact-card {
    border-radius: var(--radius-lg); padding: 3rem 2.5rem;
    transition: transform .4s var(--ease-out);
}
.impact-card:hover { transform: translateY(-10px); }
.impact-card.green { background: #f0fdf4; border: 1px solid #bbf7d0; }
.impact-card.blue  { background: #eff6ff; border: 1px solid #bfdbfe; }
.impact-card.teal  { background: #f0fdfa; border: 1px solid #99f6e4; }
.impact-icon-svg {
    width: 48px; height: 48px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.75rem;
}
.impact-card.green .impact-icon-svg { background: #dcfce7; stroke: var(--green-700); }
.impact-card.blue  .impact-icon-svg { background: #dbeafe; stroke: #1d4ed8; }
.impact-card.teal  .impact-icon-svg { background: #ccfbf1; stroke: #0f766e; }
.impact-card h4 { font-size: 1.25rem; margin-bottom: 1.5rem; }
.impact-card.green h4 { color: var(--green-700); }
.impact-card.blue  h4 { color: #1d4ed8; }
.impact-card.teal  h4 { color: #0f766e; }
.impact-card ul { display: flex; flex-direction: column; gap: .6rem; }
.impact-card li { font-size: 15px; color: var(--neutral-700); display: flex; gap: .5rem; }
.impact-card li::before { content: '—'; opacity: .4; flex-shrink: 0; }

/* ---------- IMPACTS ---------- */
.impacts-section {
    background: var(--dark-900); color: var(--white);
    padding: 8rem 0;
    margin-top: 0;
    z-index: 1;
    position: relative;
}
.impacts-section h2 { color: var(--white); }
.impact-card.green { background: rgba(255,255,255,.03); border: 1px solid rgba(74,222,128,.15); }
.impact-card.blue  { background: rgba(255,255,255,.03); border: 1px solid rgba(96,165,250,.15); }
.impact-card.teal  { background: rgba(255,255,255,.03); border: 1px solid rgba(45,212,191,.15); }
.impacts-section .impact-card.green .impact-icon-svg { background: rgba(74,222,128,.1); stroke: var(--green-400); }
.impacts-section .impact-card.blue  .impact-icon-svg { background: rgba(96,165,250,.1); stroke: var(--blue-400); }
.impacts-section .impact-card.teal  .impact-icon-svg { background: rgba(45,212,191,.1); stroke: var(--teal-400); }
.impacts-section .impact-card.green h4 { color: var(--green-400); }
.impacts-section .impact-card.blue  h4 { color: var(--blue-400); }
.impacts-section .impact-card.teal  h4 { color: var(--teal-400); }
.impacts-section .impact-card li { color: rgba(255,255,255,.55); }

/* Stats bar */
.stats-bar {
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    background: var(--dark-900); border-radius: var(--radius-lg);
    padding: 3rem 4rem;
    box-shadow: var(--shadow-lg);
}
.stat-item { text-align: center; }
.stat-num {
    display: block; font-size: clamp(36px, 5vw, 52px);
    font-weight: 800; color: var(--green-400);
    line-height: 1; margin-bottom: .5rem;
}
.stat-label { font-size: .875rem; color: #9ca3af; }
.stat-divider { width: 1px; height: 60px; background: rgba(255,255,255,.08); }

/* ---------- REGISTER SECTION ---------- */
/* Text-centric Features Redesign */
.features-section {
    background: var(--white);
    padding: 10rem 0;
}

.features-content-split {
    display: block; /* Change from grid/flex to block for Centered layout */
}

.f-content-pane {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.f-content-pane.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.f-text-block {
    width: 100%;
}

.f-content-pane h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.f-content-pane > p {
    font-size: 1.25rem;
    color: var(--neutral-500);
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.f-grid-concrete {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
    text-align: left;
    width: 100%;
}

.f-item-concrete {
    background: #f8fafc;
    padding: 2.5rem;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.f-item-concrete:hover {
    transform: translateY(-8px);
    border-color: var(--green-400);
    box-shadow: var(--shadow-md);
}

.f-item-icon-lg {
    width: 56px;
    height: 56px;
    background: #dcfce7;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    stroke: var(--green-700);
}

.f-item-concrete h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--dark-900);
}

.f-item-concrete p {
    font-size: 0.95rem;
    color: var(--neutral-500);
    line-height: 1.5;
}

.mistral-privacy-notice {
    margin-top: 4rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: var(--dark-900);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
}

.mistral-logo-mini {
    height: 20px;
    filter: brightness(0) invert(1);
}

.privacy-tag {
    color: var(--green-400);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

@media (max-width: 991px) {
    .f-grid-concrete { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    .f-grid-concrete { grid-template-columns: 1fr; }
    .f-content-pane h2 { font-size: 2.25rem; }
}
/* ---------- MISTRAL AI SECTION ---------- */
.mistral-section {
    background: var(--dark-900);
    position: relative;
    padding: 8rem 0;
}

.mistral-header {
    text-align: center;
    margin-bottom: 4rem;
}

.mistral-header h2 {
    color: var(--white);
    font-size: 2.75rem;
    margin-bottom: 1.5rem;
}

.mistral-header h2 em {
    font-style: normal;
    color: var(--green-400);
}

.mistral-intro {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.1rem;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

.mistral-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.mistral-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.35s ease;
}

.mistral-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(74, 222, 128, 0.25);
    transform: translateY(-6px);
}

.mc-icon {
    width: 56px;
    height: 56px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-400);
    margin-bottom: 1.5rem;
}

.mistral-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.75rem;
}

.mistral-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
}

.mistral-card p strong {
    color: var(--green-400);
    font-weight: 700;
}

.mistral-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    max-width: fit-content;
    margin: 0 auto;
}

.mf-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--green-400);
    white-space: nowrap;
}

.mf-dot {
    width: 8px;
    height: 8px;
    background: var(--green-400);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.mf-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

@media (max-width: 767px) {
    .mistral-grid { grid-template-columns: 1fr; }
    .mistral-header h2 { font-size: 2rem; }
    .mistral-footer { flex-direction: column; text-align: center; border-radius: 20px; }
}

/* ---------- REGISTER / FORM ---------- */
.register-section {
    background: var(--white);
    padding: 8rem 0;
    margin-top: 0;
    z-index: 1;
    position: relative;
}
.register-section .register-left h2 { color: var(--dark-800); }
.register-section .register-left > p { color: var(--neutral-500); }
.register-section .section-eyebrow { color: var(--green-600); background: #dcfce7; }
.register-section .perk { color: var(--dark-700); }
.register-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6rem; align-items: start; }
.register-left h2 { margin-bottom: 1.25rem; }
.register-left > p { margin-bottom: 2.5rem; }
.register-perks { display: flex; flex-direction: column; gap: 1rem; }
.perk {
    display: flex; align-items: center; gap: .85rem;
    font-size: 15px; font-weight: 500; color: rgba(255,255,255,.8);
}
.perk-icon {
    width: 42px; height: 42px;
    background: rgba(74,222,128,.12);
    border: 1px solid rgba(74,222,128,.2);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    stroke: var(--green-400);
}

/* Register form */
.reg-form {
    background: var(--neutral-100);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    padding: 3rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .25rem; }
.form-group label { font-size: .875rem; font-weight: 600; color: var(--dark-700); }
.form-group input,
.form-group select,
.form-group textarea {
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    font-family: var(--font); font-size: .95rem;
    color: var(--dark-800);
    outline: none;
    transition: border-color .25s, background .25s;
}
.form-group select option { background: var(--white); color: var(--dark-800); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--green-500);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--neutral-500); }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group + .btn { margin-top: 1.25rem; }
.form-note { font-size: .8rem; color: var(--neutral-500); text-align: center; margin-top: 1rem; }
.hidden { display: none !important; }
.form-success {
    text-align: center; padding: 4rem 2rem;
}
.success-check {
    width: 72px; height: 72px;
    background: #dcfce7;
    border: 2px solid var(--green-400);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 2rem;
    stroke: var(--green-600);
}
.form-success h3 { color: var(--dark-800); font-size: 1.75rem; margin-bottom: 1rem; }
.form-success p { font-size: 1rem; color: var(--neutral-500); }
.success-contact { margin-top: 2rem; font-size: .9rem; color: rgba(255,255,255,.4); line-height: 1.8; }

.banque-actions {
    margin-top: 3rem;
}
.btn-locator {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 2.25rem;
    background: linear-gradient(135deg, var(--green-600) 0%, var(--green-700) 100%);
    color: var(--white);
    font-weight: 700;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(22, 101, 52, 0.25);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-locator svg {
    transition: transform 0.4s ease;
}
.btn-locator:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(22, 101, 52, 0.4);
    background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%);
}
.btn-locator:hover svg {
    transform: scale(1.2) rotate(-10deg);
}
.btn-locator span {
    font-size: 1.05rem;
}
.btn-text-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}
.btn-label {
    font-size: 1.05rem;
}
.btn-sublabel {
    font-size: 0.8rem;
    opacity: 0.8;
    font-weight: 500;
}

@media (max-width: 768px) {
    .banque-actions { text-align: center; }
    .btn-locator { width: 100%; justify-content: center; padding: 1.15rem 1.5rem; }
    .btn-locator span { font-size: 0.95rem; }
}

/* ---------- FOOTER ---------- */
.footer {
    background: var(--dark-950);
    color: var(--white); 
    padding: 8rem 0 4rem;
    margin-top: 0;
    position: relative;
}
.footer-top {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem; margin-bottom: 4rem;
}
.footer-brand .logo { font-size: 1.25rem; margin-bottom: 1rem; }
.footer-brand p { font-size: .9rem; color: #6b7280; max-width: 340px; }
.footer-contact h5,
.footer-links h5 { color: rgba(255,255,255,.5); margin-bottom: 1.25rem; }
.footer-contact p { font-size: .9rem; color: #6b7280; line-height: 1.9; }
.footer-contact a { color: var(--green-400); }
.footer-links { display: flex; flex-direction: column; gap: .6rem; }
.footer-links a { font-size: .9rem; color: #6b7280; transition: color .2s; }
.footer-links a:hover { color: var(--green-400); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 2rem; text-align: center;
}
.footer-bottom p { font-size: .85rem; color: #4b5563; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .split-layout { grid-template-columns: 1fr; gap: 4rem; }
    .split-visual { order: -1; }
    .phone-frame { width: 240px; height: 480px; }
    .axes-grid { grid-template-columns: 1fr; }
    .fonctions-grid { grid-template-columns: 1fr; }
    .register-layout { grid-template-columns: 1fr; gap: 4rem; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .container { padding: 0 1.25rem; }
    .section-pad { padding: 4.5rem 0; }
    
    h1 { font-size: 2.25rem; text-align: center; line-height: 1.2; }
    h2 { font-size: 2rem; text-align: center; line-height: 1.25; }
    .section-header.center p { text-align: center; margin-top: 1rem; font-size: 1rem; }
    
    .hero { border-radius: 0; }
    .hero-bg, .hero-overlay, .hero-img, .hero::after { border-radius: 0; }

    .hero-content { padding: 0 1rem; }
    .eyebrow { justify-content: center; width: 100%; text-align: center; }
    .hero-sub { font-size: 1.05rem; }
    .hero-actions { flex-direction: column; width: 100%; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    
    .uml-section,
    .villeray-stats-section,
    .banque-section,
    .emploi-section,
    .impacts-section,
    .register-section,
    .partners-section,
    .footer { 
        border-radius: 0; 
        margin-top: 0; 
        padding: 4.5rem 0;
    }
    
    .partners-list { gap: 1rem 1.5rem; }
    .partners-label { font-size: 0.9rem; }
    
    .navbar { padding: 1rem 0; }
    .nav-inner { padding: 0 1rem; }
    .nav-links { 
        gap: 0.75rem 1rem; 
        flex-wrap: wrap; 
        justify-content: center; 
    }
    .nav-links a { font-size: 0.9rem; }
    .nav-cta { padding: 0.35rem 0.9rem; }
    
    .logo-bar-inner { height: 50px; }
    .partner-label { padding: 0 1rem; font-size: 0.65rem; }
    .partner-chip { padding: 0.35rem 1rem; font-size: 0.8rem; }
    
    .split-layout { gap: 3rem; }
    .banque-photo { height: 320px; }
    
    .cd-wrapper { 
        flex-direction: column; 
        gap: 0; 
        padding: 1rem 0; 
    }
    .cd-box {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }
    .cd-arrow-h {
        width: 2px !important;
        height: 50px !important;
        margin: 1rem auto;
        transform: none !important;
    }
    .cd-arrow-line {
        width: 2px;
        height: 100%;
        background: linear-gradient(to bottom, transparent, var(--green-400), transparent);
    }
    .cd-arrow-line::before, .cd-arrow-line::after { display: none; }

    .stats-grid { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2.5rem; }
    .stat-card { padding: 2rem 1.5rem; flex-direction: column; align-items: center; text-align: center; }
    .stat-icon-wrap { margin-bottom: 0.5rem; }
    .stat-number-wrap { justify-content: center; width: 100%; }
    .stat-number { font-size: 2.5rem; }

    .banque-steps { gap: 1.75rem; display: none; }
    .bstep-num { margin-bottom: 0px; }
    
    .emploi-timeline { margin-bottom: 2rem; }
    .etape { grid-template-columns: 40px 1fr; }
    .etape-num-inner { width: 32px; height: 32px; font-size: 0.75rem; box-shadow: 0 0 0 3px rgba(34,197,94,.08); }
    .etape-body { 
        padding: 1.5rem 1.25rem; 
        margin: 0 0 2rem 1rem; 
        flex-direction: column; 
        gap: 1rem; 
        align-items: center;
        text-align: center;
    }
    .etape-tags { justify-content: center; }
    
    .impacts-grid { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
    .impact-card { padding: 2.5rem 1.75rem; text-align: center; align-items: center; display: flex; flex-direction: column; }
    .impact-card ul { align-items: flex-start; text-align: left; width: 100%; }
    
    .stats-bar { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 2rem; }
    .stat-num { font-size: 2.75rem; }
    .stat-divider { display: none; }
    
    .register-layout { grid-template-columns: 1fr; gap: 3rem; }
    .reg-form { padding: 1.75rem 1.25rem; }
    .form-row { grid-template-columns: 1fr; }
    .form-group input, .form-group select, .form-group textarea { padding: 0.75rem 1rem; }
    .register-left h2 { text-align: center; }
    .register-left > p { text-align: center; }
    .register-perks { align-items: center; text-align: center; padding: 0 1rem; }
    
    .footer { padding: 3rem 0 1.5rem; }
    .footer-top { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
    .footer-brand p { margin: 0 auto; }
    .footer-links { align-items: center; }

    .cursor-dot, .cursor-ring { display: none; }
    body { cursor: auto; }
    .btn { cursor: pointer; }
}

/* ---------- CUSTOM SCROLLBAR ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--dark-950); }
::-webkit-scrollbar-thumb { background: var(--green-700); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-500); }

/* ---------- MODAL SYSTEM ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-out);
    padding: 1.5rem;
}
.modal.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.modal-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.5s var(--ease-out);
}
.modal.active .modal-container {
    transform: scale(1) translateY(0);
}
.modal-close {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 40px; height: 40px;
    background: var(--neutral-100);
    border: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--dark-700);
    transition: all 0.3s;
    z-index: 10;
}
.modal-close:hover { background: var(--green-100); color: var(--green-700); transform: rotate(90deg); }

.modal-content { padding: 4rem 3.5rem; }
.modal-header { text-align: center; margin-bottom: 2.5rem; }
.modal-header h2 { margin-bottom: 0.75rem; color: var(--dark-900); }
.modal-header p { font-size: 1rem; color: var(--neutral-500); }

.modal-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Form Success Inside Modal */
.modal .form-success {
    text-align: center;
    padding: 2rem 0;
}

@media (max-width: 600px) {
    .modal-form .form-grid { grid-template-columns: 1fr; }
    .modal-content { padding: 3rem 1.5rem; }
    .modal-header h2 { font-size: 1.75rem; }
}

/* ---------- DASHBOARD SYSTEM ---------- */
.dashboard-page {
    background: #f8fafc;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}
.dash-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.dash-sidebar {
    width: 280px;
    background: var(--dark-950);
    color: var(--white);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
}
.sidebar-header { padding: 2.5rem 2rem; }
.sidebar-nav { flex: 1; padding: 0 1rem; }
.sidebar-nav ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.85rem 1rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s;
}
.sidebar-nav li.active a,
.sidebar-nav a:hover {
    background: rgba(255,255,255,0.05);
    color: var(--white);
}
.sidebar-nav li.active a { color: var(--green-400); background: rgba(34,197,94,0.1); }

.sidebar-footer { padding: 2rem; border-top: 1px solid rgba(255,255,255,0.05); }
.logout-link { display: flex; align-items: center; gap: 1rem; color: #ef4444; font-weight: 600; }

/* Main Area */
.dash-main {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
}
.dash-header {
    height: 80px;
    background: var(--white);
    border-bottom: 1px solid var(--neutral-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    position: sticky; top: 0; z-index: 90;
}
.header-left h1 { font-size: 1.5rem; font-weight: 700; color: var(--dark-900); }

.header-right { display: flex; align-items: center; gap: 2.5rem; }
.header-search {
    position: relative;
    display: flex; align-items: center;
    background: #f1f5f9;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    width: 260px;
}
.header-search input {
    background: transparent; border: none; padding: 0 0.75rem;
    font-size: 0.9rem; width: 100%; color: var(--dark-800);
}
.header-actions { display: flex; align-items: center; gap: 1.5rem; }
.profile-mini { display: flex; align-items: center; gap: 1rem; }
.profile-name { font-weight: 600; font-size: 0.9rem; }
.profile-avatar {
    width: 36px; height: 36px;
    background: var(--green-100); color: var(--green-700);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
}

/* Content */
.dash-content { padding: 3rem; }
.content-section { display: none; }
.content-section.active { display: block; animation: fadeIn 0.5s ease-out; }

/* Stats Cards */
.stats-grid-pro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-card-dash {
    background: var(--white);
    padding: 1.5rem 2rem;
    border-radius: 20px;
    border: 1px solid var(--neutral-100);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.stat-info span { font-size: 0.85rem; color: var(--neutral-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-info h3 { font-size: 2rem; font-weight: 800; margin: 0.5rem 0; color: var(--dark-900); }
.trend { font-size: 0.85rem; font-weight: 600; color: var(--neutral-400); }
.trend.up { color: #10b981; }

.stat-icon-pro {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.stat-icon-pro.green { background: #f0fdf4; color: #166534; }
.stat-icon-pro.blue { background: #eff6ff; color: #1e40af; }
.stat-icon-pro.orange { background: #fff7ed; color: #9a3412; }

/* Dashboard Cards */
.dash-grid-two {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
}
.dash-card {
    background: var(--white);
    border-radius: 20px;
    border: 1px solid var(--neutral-100);
    padding: 2rem;
}
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 2rem;
}
.card-header h4 { font-size: 1.1rem; color: var(--dark-900); }

/* AI Insights Content */
.ai-insight-content { display: flex; flex-direction: column; gap: 1.25rem; }
.insight-item { display: flex; gap: 1rem; align-items: flex-start; }
.insight-dot { width: 10px; height: 10px; min-width: 10px; border-radius: 50%; background: var(--green-500); margin-top: 6px; }
.insight-dot.warning { background: #f59e0b; }
.insight-item p { font-size: 0.95rem; line-height: 1.6; color: var(--dark-700); }

/* Activity List */
.activity-list { display: flex; flex-direction: column; gap: 1.5rem; }
.activity-item { position: relative; padding-left: 1.5rem; border-left: 2px solid var(--neutral-100); }
.activity-time { font-size: 0.8rem; color: var(--neutral-400); font-weight: 600; display: block; margin-bottom: 0.25rem; }
.activity-item p { font-size: 0.9rem; color: var(--dark-800); }

/* Dashboard Table */
.dash-table { width: 100%; border-collapse: collapse; text-align: left; }
.dash-table th { padding: 1rem 0; font-size: 0.85rem; color: var(--neutral-400); font-weight: 700; text-transform: uppercase; border-bottom: 1px solid var(--neutral-100); }
.dash-table td { padding: 1.25rem 0; border-bottom: 1px solid var(--neutral-50); font-size: 0.95rem; font-weight: 500; }
.badge { padding: 0.35rem 0.75rem; border-radius: 6px; font-size: 0.8rem; font-weight: 700; }
.badge-green { background: #f0fdf4; color: #166534; }
.badge-blue { background: #eff6ff; color: #1e40af; }

/* Responsive Dashboard */
@media (max-width: 1200px) {
    .stats-grid-pro { grid-template-columns: repeat(2, 1fr); }
    .dash-grid-two { grid-template-columns: 1fr; }
}
@media (max-width: 850px) {
    .dash-sidebar { transform: translateX(-100%); transition: transform 0.3s; }
    .dash-main { margin-left: 0; }
    .dash-header { padding: 0 1.5rem; }
    .stats-grid-pro { grid-template-columns: 1fr; }
    .dash-content { padding: 1.5rem; }
}

/* ---------- ECOVILLERAY DASHBOARD THEME (REFINED GREEN) ---------- */
.dashboard-eco {
    background: #f8f9fe;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    color: #3d4465;
    overflow-x: hidden;
}
.fillow-wrapper { display: flex; min-height: 100vh; }

/* Sidebar EcoVilleray */
.fillow-sidebar {
    width: 280px;
    background: var(--white);
    height: 100vh;
    position: fixed;
    border-right: 1px solid #f0f1f5;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}
.sidebar-brand { padding: 2.5rem 2.5rem; }
.f-logo { display: flex; align-items: center; gap: 0.75rem; font-weight: 800; font-size: 1.35rem; color: #1e293b; }
.f-logo-icon { width: 40px; height: 40px; background: var(--green-600); color: var(--white); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.f-sublogo { font-size: 0.75rem; color: #94a3b8; font-weight: 500; margin-top: 2px; }
/* Logo EcoVilleray (PNG blanc) dans un bloc vert foncé — visible sur sidebar claire */
.f-logo-lockup { background: #002216; border-radius: 12px; padding: 0.7rem 0.95rem; display: inline-flex; align-items: center; }
.f-logo-lockup img { height: 26px; width: auto; display: block; }
.sidebar-brand .f-logo-lockup + .f-sublogo { margin-top: 0.6rem; }
/* Sur la peau RevelAction (sidebar sombre déjà), pas de bloc — logo directement */
.revel-skin .f-logo-lockup { background: transparent; padding: 0; }

.f-nav { flex: 1; padding: 1rem 0; overflow-y: auto; }
.nav-list { list-style: none; }
.nav-item a {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.9rem 2.5rem;
    color: #888ea8; font-weight: 500; text-decoration: none;
    transition: all 0.3s;
}
.nav-item.active a { color: var(--green-700); background: rgba(22, 101, 52, 0.05); border-right: 4px solid var(--green-600); font-weight: 600; }
.nav-item a:hover { color: var(--green-600); }

.sidebar-user { padding: 2rem 2.5rem; border-top: 1px solid #f0f1f5; }
.user-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.u-name { font-size: 0.85rem; font-weight: 700; color: #1e293b; }
.u-email { font-size: 0.75rem; color: #94a3b8; }
.up-text { display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 600; margin-bottom: 0.5rem; }
.up-bar { height: 6px; background: #f0f1f5; border-radius: 3px; }
.up-fill { height: 100%; background: var(--green-600); border-radius: 3px; }
.f-copyright { font-size: 0.65rem; color: #cbd5e1; margin-top: 1.5rem; }

/* EcoVilleray Header */
.fillow-header {
    height: 80px;
    background: var(--green-600);
    position: fixed; top: 0; left: 280px; right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    color: var(--white);
}
.h-left { display: flex; align-items: center; gap: 1.5rem; }
.h-left h2 { font-size: 1.4rem; font-weight: 700; }
.sidebar-toggle { background: transparent; border: none; color: var(--white); cursor: pointer; }

.h-right { display: flex; align-items: center; gap: 2rem; }
.h-search {
    position: relative;
    background: rgba(255,255,255,0.15);
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    display: flex; align-items: center;
}
.h-search input { background: transparent; border: none; color: var(--white); font-family: inherit; font-size: 0.9rem; width: 180px; outline: none; }
.h-search input::placeholder { color: rgba(255,255,255,0.7); }
.h-icons { display: flex; align-items: center; gap: 0.75rem; }
.h-icon-btn {
    position: relative; width: 40px; height: 40px;
    background: rgba(255,255,255,0.15);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    transition: background 0.3s; cursor: pointer;
}
.h-icon-btn:hover { background: rgba(255,255,255,0.25); }
.h-icon-btn .badge {
    position: absolute; top: -5px; right: -5px;
    background: #4caf50; color: #fff; font-size: 10px; font-weight: 800;
    padding: 2px 5px; border-radius: 4px;
}
.h-icon-btn .badge.green { background: #166534; color: #fff; }
.header-avatar-mini { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--white); }
.header-avatar-mini img { width: 100%; height: 100%; object-fit: cover; }

/* Dashboard Content */
.fillow-content { flex: 1; margin-left: 280px; padding-top: 80px; }
.fillow-inner { padding: 2.5rem; }
.f-section { display: none; }
.f-section.active { display: block; animation: fFadeIn 0.5s ease; }
@keyframes fFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Grid Layout */
.f-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(min-content, auto);
    gap: 1.5rem;
}

.f-card { background: var(--white); border-radius: 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); padding: 2rem; border: 1px solid rgba(0,0,0,0.05); }

/* Hero Card */
.hero-gradient-card {
    grid-column: span 2;
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 50%, #f97316 100%) !important;
    color: var(--white);
    padding: 3rem;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 25px 50px rgba(234,88,12,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-gradient-inner-box {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.2);
}

.hero-gradient-card h1 { 
    font-size: 2.2rem; font-weight: 800; margin-bottom: 1rem; 
    line-height: 1.2; color: #ffffff; letter-spacing: -0.02em; 
}
.hero-gradient-card p { 
    opacity: 0.95; margin-bottom: 2rem; font-size: 1rem; 
    color: rgba(255,255,255,0.9); line-height: 1.5; 
}
.hero-actions { 
    display: flex; gap: 1rem; justify-content: center;
}
.hero-actions .btn {
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-orange { 
    background: #f97316; color: #ffffff; border: none; 
}
.btn-orange:hover { background: #ea580c; transform: translateY(-2px); }

.btn-outline-white { 
    background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #ffffff; 
}
.btn-outline-white:hover { border-color: #ffffff; background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* Metric Cards (1 column width) */
.metric-card {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.metric-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: #f8fafc;
    display: flex; align-items: center; justify-content: center;
    color: #0f172a;
}
.metric-icon.dark { background: #0f172a; color: #ffffff; }

.metric-link {
    font-size: 0.75rem; font-weight: 700;
    color: #64748b; background: #f1f5f9;
    padding: 0.4rem 0.8rem; border-radius: 20px;
    text-decoration: none; display: flex; align-items: center; gap: 0.3rem;
}

.metric-title { font-size: 0.9rem; font-weight: 700; color: #1e293b; margin-bottom: 0.2rem; }
.metric-value { font-size: 2.2rem; font-weight: 800; color: #0f172a; margin-bottom: 0.5rem; line-height: 1; }
.metric-desc { font-size: 0.8rem; font-weight: 600; color: #94a3b8; }
.metric-desc.red { color: #ef4444; }
.metric-desc.green { color: #10b981; }

.metric-chart { margin-top: auto; }
.metric-chart-legend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; color: #64748b; margin-bottom: 0.5rem; }
.metric-chart-legend .dot { width: 6px; height: 6px; border-radius: 50%; background: #ea580c; display: inline-block; }

/* Activity Heatmap */
.heatmap-card {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}
.heatmap-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;
}
.heatmap-title { font-size: 1.1rem; font-weight: 800; color: #1e293b; display: flex; align-items: center; gap: 0.5rem; }
.heatmap-refresh { background: #f1f5f9; border: none; padding: 0.5rem 1rem; border-radius: 12px; font-size: 0.8rem; font-weight: 700; color: #64748b; cursor: pointer; }

.heatmap-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.heatmap-legend { display: flex; gap: 0.8rem; font-size: 0.75rem; font-weight: 600; color: #94a3b8; }
.heatmap-legend span { display: flex; align-items: center; gap: 0.3rem; }
.heatmap-legend .dot { width: 6px; height: 6px; border-radius: 50%; }
.heatmap-legend .d1 { background: #fef08a; } /* Faible */
.heatmap-legend .d2 { background: #fcd34d; } /* Moyen */
.heatmap-legend .d3 { background: #f97316; } /* Élevé */
.heatmap-legend .d4 { background: #dc2626; } /* Intense */

.heatmap-tabs { display: flex; background: #f1f5f9; padding: 0.25rem; border-radius: 12px; }
.heatmap-tabs button { background: transparent; border: none; padding: 0.4rem 1rem; font-size: 0.8rem; font-weight: 700; color: #64748b; border-radius: 8px; cursor: pointer; }
.heatmap-tabs button.active { background: #0f172a; color: #ffffff; }

.heatmap-grid {
    display: grid;
    grid-template-columns: 40px repeat(7, 1fr);
    gap: 4px;
    flex: 1;
}
.heatmap-row-label { font-size: 0.65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; }
.heatmap-cell { background: #f1f5f9; border-radius: 4px; min-height: 24px; }
.heatmap-cell.level-1 { background: #ffedd5; }
.heatmap-cell.level-2 { background: #fed7aa; }
.heatmap-cell.level-3 { background: #f97316; }
.heatmap-cell.level-4 { background: #ea580c; }
.heatmap-col-label { font-size: 0.7rem; font-weight: 700; color: #64748b; text-align: center; margin-top: 8px; }
.heatmap-empty { }

/* Progress Card */
.f-progress-card { grid-column: span 1; display: flex; flex-direction: column; }
.f-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.f-progress-header h4 { font-size: 1rem; font-weight: 800; color: #1e293b; }
.f-progress-header .nav-arrow { color: #94a3b8; cursor: pointer; }
.f-progress-body { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.progress-circle-wrap { position: relative; width: 140px; height: 140px; margin: 0 auto 1.5rem; }
.circle-bg { width: 100%; height: 100%; border-radius: 50%; border: 8px solid #f1f5f9; position: relative; }
.circle-progress { position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border-radius: 50%; border: 8px solid transparent; border-top-color: #ea580c; border-right-color: #ea580c; transform: rotate(45deg); }
.circle-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.circle-text h3 { font-size: 1.8rem; font-weight: 800; color: #1e293b; margin: 0; }
.circle-text span { font-size: 0.65rem; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.f-progress-desc { font-size: 0.8rem; color: #64748b; margin-bottom: 1.5rem; line-height: 1.5; }
.btn-black { background: #0f172a; color: #ffffff; border: none; padding: 0.8rem 1rem; border-radius: 12px; font-weight: 700; font-size: 0.85rem; width: 100%; cursor: pointer; }


/* Table styles */
.f-table-wrap { overflow-x: auto; }
.f-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.f-table th { text-align: left; font-size: 0.8rem; color: #888ea8; text-transform: uppercase; padding: 1rem; border-bottom: 1px solid #f0f1f5; }
.f-table td { padding: 1.25rem 1rem; font-size: 0.9rem; border-bottom: 1px solid #f0f1f5; }
.badge-success-eco { background: #f0fdf4; color: #166534; padding: 0.35rem 0.75rem; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }
.badge-danger-eco { background: #fef2f2; color: #991b1b; padding: 0.35rem 0.75rem; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }
.badge-pending-eco { background: #fffbeb; color: #92400e; padding: 0.35rem 0.75rem; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }

/* Premium Recruitment Options */
.recruitment-options-box {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.opt-group { flex: 1; min-width: 200px; }
.opt-label { 
    display: block; 
    font-size: 0.85rem; 
    font-weight: 700; 
    color: var(--dark-800); 
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.radio-chips {
    display: flex;
    gap: 0.75rem;
}

.radio-chips label {
    flex: 1;
    text-align: center;
    padding: 0.6rem 1rem;
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-chips input { display: none; }
.radio-chips input:checked + span {
    color: var(--white);
}
.radio-chips label:has(input:checked) {
    background: var(--green-600);
    border-color: var(--green-600);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
}

.opt-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--green-600);
    text-decoration: none;
    transition: opacity 0.2s;
}
.opt-link:hover { opacity: 0.8; text-decoration: underline; }

.urgent-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #fee2e2;
    cursor: pointer;
    transition: all 0.2s;
}
.urgent-toggle-wrap:hover { border-color: #fca5a5; background: #fffafb; }
.urgent-toggle-wrap input { width: 18px; height: 18px; accent-color: #ef4444; cursor: pointer; }
.urgent-toggle-wrap span { font-weight: 700; color: #ef4444; font-size: 0.9rem; }
.btn-primary-eco { 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); 
    color: var(--white); font-weight: 600; padding: 0.75rem 1.5rem; 
    border-radius: 12px; border: none; cursor: pointer; transition: all 0.3s ease; 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); 
}
.btn-primary-eco:hover { 
    background: linear-gradient(135deg, #059669 0%, #047857 100%); 
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3); 
}
.btn-sm { padding: 0.5rem 1rem !important; font-size: 0.8rem !important; border-radius: 10px !important; }

/* Modal Fillow */
.f-modal { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; }
.f-modal.show { display: flex; }
.f-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.f-modal-content { position: relative; background: var(--white); width: 90%; max-width: 600px; max-height: 92vh; overflow-y: auto; border-radius: 32px; padding: 3rem; z-index: 10; transform: translateY(-30px); animation: modalUp 0.3s forwards; box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
@keyframes modalUp { to { transform: translateY(0); } }

.f-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.btn-close, .btn-close-recruit, .btn-close-order { 
    background: #f1f5f9; border: none; width: 36px; height: 36px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; cursor: pointer; 
    color: #64748b; transition: 0.3s; 
}
.btn-close:hover, .btn-close-recruit:hover, .btn-close-order:hover { background: #e2e8f0; color: #0f172a; transform: rotate(90deg); }

.f-tag-hints { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.f-tag-pill { 
    font-size: 0.75rem; font-weight: 600; background: #f0fdf4; color: var(--green-700); 
    padding: 0.25rem 0.75rem; border-radius: 20px; border: 1px solid rgba(22, 163, 74, 0.1); 
    cursor: pointer; transition: 0.2s; 
}
.f-tag-pill:hover { background: var(--green-600); color: white; transform: translateY(-2px); }
.f-form-group { margin-bottom: 1.5rem; }
.f-form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: #1e293b; margin-bottom: 0.5rem; }
.f-form-group input, .f-form-group select, .f-form-group textarea { width: 100%; padding: 0.85rem; border: 1px solid #e2e8f0; border-radius: 10px; font-family: inherit; }
.f-upload-box-mini { 
    border: 2px dashed #e2e8f0; padding: 1.5rem 0.5rem; text-align: center; border-radius: 8px; cursor: pointer; font-size: 0.85rem; 
    transition: all 0.3s ease;
}
.f-upload-box-mini.dragging {
    border-color: var(--green-500);
    background: rgba(34, 197, 148, 0.05);
    transform: scale(1.02);
}
.f-upload-box-mini label { cursor: pointer; color: var(--green-600); font-weight: 500; }
.f-upload-box { border: 2px dashed #e2e8f0; padding: 2rem; text-align: center; border-radius: 12px; cursor: pointer; }
.f-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.f-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: #1e293b; margin: 10px 0; }
.f-checkbox input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--green-600); }

/* Responsive Dashboard */
@media (max-width: 1200px) {
    .f-grid-container { grid-template-columns: 1fr !important; }
    /* !important nécessaire : les gridColumn/gridRow inline écrasent les classes CSS */
    .hero-gradient-card, .metric-card, .heatmap-card, .f-progress-card {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    /* Cibler directement les éléments avec gridColumn/gridRow inline */
    .f-grid-container > [style*="grid-column"] {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    /* En colonne unique : la carte « Gérez votre impact » passe en premier */
    .f-grid-container .hero-gradient-card { order: -1; }
}
@media (max-width: 991px) {
    .fillow-sidebar { transform: translateX(-100%); transition: 0.3s; }
    .fillow-sidebar.show { transform: translateX(0); }
    .fillow-header, .fillow-content { left: 0; margin-left: 0; }
    .h-search { display: none; }
    /* RevelactionDashboard : fillow-main doit perdre son margin-left dès 991px */
    .fillow-main { margin-left: 0 !important; }
}
/* Cacher le toggle sidebar sur desktop (fillow-content = Dashboard commerçant) */
@media (min-width: 992px) {
    .fillow-content .sidebar-toggle { display: none !important; }
}
@media (max-width: 768px) {
    .hero-gradient-inner-box { padding: 2rem 1.5rem; }
    .heatmap-grid { overflow-x: auto; }
}

/* ---------- AUTH SPLIT RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .auth-split-wrapper {
    flex-direction: column !important;
  }
  .auth-split-left {
    padding: 4rem 2rem !important;
    flex: none !important;
  }
  .auth-split-left h1 {
    font-size: 3rem !important;
  }
  .auth-split-right {
    flex: none !important;
    width: 100% !important;
    padding: 4rem 2rem !important;
  }
  .auth-split-right h2 {
    font-size: 2.5rem !important;
  }
}

/* ---------- REVELACTION DASHBOARD CLASSES ---------- */
/* Main content area */
.fillow-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

/* Mobile header */
.f-header-mobile {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--white);
  border-bottom: 1px solid #e2e8f0;
}

.f-menu-btn {
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f-header-user {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 900;
  font-size: 0.9rem;
}

/* Desktop header */
.f-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background: var(--white);
  border-bottom: 1px solid #e2e8f0;
}

.f-header-left h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e1b4b;
  margin: 0;
}

.f-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Content wrapper */
.f-content {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Hero section */
.f-hero {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  color: var(--white);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.f-hero h2 {
  font-size: 2rem;
  margin: 0 0 0.5rem;
}

.f-hero p {
  opacity: 0.9;
  font-size: 1rem;
  margin-bottom: 2rem;
}

.f-hero-actions {
  display: flex;
  gap: 1rem;
}

/* Stats grid */
.f-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.f-stat-card {
  background: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.f-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.f-stat-info {
  flex: 1;
}

.f-stat-label {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
}

.f-stat-value {
  margin: 0.2rem 0 0;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

/* Cards */
.f-card {
  background: var(--white);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid #e2e8f0;
}

.f-card h3 {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  font-weight: 800;
}

/* Grid layouts */
.f-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

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

/* List items */
.f-list-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.f-avatar-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
}

.f-list-content {
  flex: 1;
}

.f-list-content p {
  margin: 0;
  font-size: 0.9rem;
}

.f-list-content p:first-child {
  font-weight: 700;
}

.f-list-content p:last-child {
  font-size: 0.8rem;
  color: #64748b;
}

/* Badges */
.f-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-weight: 700;
}

.f-badge.success {
  background: #f0fdf4;
  color: #059669;
}

.f-badge.warning {
  background: #fffbeb;
  color: #d97706;
}

.f-badge.danger {
  background: #fef2f2;
  color: #dc2626;
}

.f-badge.info {
  background: #f0f9ff;
  color: #0ea5e9;
}

/* Search bar */
.f-search-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.f-search-input-wrapper {
  flex: 1;
  min-width: 220px;
  position: relative;
}

.f-search-input-wrapper svg {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
}

.f-search-input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.5rem;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  font-size: 0.9rem;
  outline: none;
  box-sizing: border-box;
  background: var(--white);
}

.f-filter-buttons {
  display: flex;
  gap: 0.5rem;
}

.f-filter-btn {
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: var(--white);
  color: #64748b;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}

.f-filter-btn.active {
  border-color: #7c3aed;
  background: #7c3aed;
  color: var(--white);
}

/* Empty state */
.f-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #94a3b8;
}

.f-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.f-empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.f-empty-text {
  font-size: 0.9rem;
  margin: 0;
}

/* Table */
.f-table-wrap {
  overflow-x: auto;
}

.f-table {
  width: 100%;
  border-collapse: collapse;
}

.f-table th {
  padding: 1rem;
  text-align: left;
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #e2e8f0;
}

.f-table td {
  padding: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

/* Progress bar */
.f-progress-bar {
  flex: 1;
  height: 12px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.f-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #059669, #10b981);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.f-progress-info {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.f-progress-percent {
  font-weight: 800;
  color: #059669;
  font-size: 1.2rem;
}

.f-progress-text {
  color: #64748b;
  font-size: 0.9rem;
  margin: 0;
}

/* Settings */
.f-settings-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.f-settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 12px;
}

.f-settings-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: #64748b;
}

.f-settings-value {
  font-weight: 800;
  font-size: 0.9rem;
  color: #1e1b4b;
}

/* Button variants */
.btn-sm {
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.btn-success {
  background: #059669;
  color: var(--white);
}

.btn-danger {
  background: #dc2626;
  color: var(--white);
}

.btn-info {
  background: #0ea5e9;
  color: var(--white);
}

/* Badge */
.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

/* Tab navigation */
.f-tab {
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.f-tab:hover {
  color: var(--green-600);
}

.f-tab.active {
  background: var(--green-500);
  color: var(--white);
}

.f-btn-group {
  display: flex;
  gap: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .f-header-mobile {
    display: flex;
  }
  
  .f-header {
    display: none;
  }
  
  .f-grid-2 {
    grid-template-columns: 1fr;
  }
  
  .f-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .f-hero-actions {
    flex-direction: column;
  }
  
  .f-search-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .f-filter-buttons {
    flex-wrap: wrap;
  }
}

@media (min-width: 769px) {
  .fillow-sidebar {
    transform: translateX(0) !important;
  }
}

/* ---------- MOBILE RESPONSIVE STYLES ---------- */
@media (max-width: 768px) {
  /* Sidebar mobile */
  .fillow-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .fillow-sidebar.show {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
  }

  .sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  /* Header mobile — fond blanc, texte/icônes sombres */
  .fillow-header {
    padding: 1rem;
    background: #ffffff !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    color: #1e293b !important;
    border-bottom: 1px solid #f0f1f5;
  }

  /* Titre du header */
  .h-left h2,
  .fillow-header h2 {
    font-size: 1.2rem;
    color: #1e293b !important;
  }

  /* Menu latéral retiré sur mobile : la navigation se fait via la barre d'onglets
     du bas. On masque le tiroir, son overlay et le bouton hamburger. */
  .dashboard-eco .fillow-sidebar,
  .dashboard-eco .fillow-sidebar.show,
  .dashboard-eco .sidebar-overlay,
  .dashboard-eco .sidebar-overlay.show,
  .dashboard-eco .sidebar-toggle {
    display: none !important;
  }

  /* Icônes de droite (notification, etc.) */
  .h-icon-btn {
    background: #f1f5f9 !important;
    color: #475569 !important;
  }
  .h-icon-btn svg {
    stroke: #475569 !important;
    color: #475569 !important;
  }

  .h-right {
    gap: 0.5rem;
  }

  .h-search {
    display: none;
  }

  .h-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f8fafc;
    transition: all 0.2s ease;
  }

  .h-icon-btn:active {
    transform: scale(0.95);
    background: #e2e8f0;
  }

  .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }

  /* Notification dropdown mobile — ancré à droite de l'écran */
  .notification-dropdown {
    position: fixed !important;
    width: calc(100vw - 2rem) !important;
    max-width: 360px !important;
    right: 1rem !important;
    top: 72px !important;
    left: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18) !important;
    z-index: 9999 !important;
  }

  .notification-dropdown .notif-list {
    max-height: 55vh;
    overflow-y: auto;
  }

  /* Page Notifications dédiée (mobile) — même design que le menu, en plein écran */
  .notif-page {
    padding: 0 !important;
  }
  .notif-page-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  }
  /* La liste suit la hauteur de la page plutôt qu'une hauteur fixe */
  .notif-page-card .notif-list {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Content area — padding-top pour ne pas passer sous le header fixe (80px) */
  .fillow-content {
    padding: 92px 1rem 1rem 1rem;
    margin-left: 0;
  }
  .fillow-inner {
    padding: 0;
  }

  /* Grid layouts */
  .f-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .f-grid-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .f-grid-3 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Cards */
  .f-card {
    padding: 1.25rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
  }

  .f-card:active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  /* Mini stats */
  .f-mini-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .mini-stat {
    padding: 1.25rem;
    border-radius: 16px;
  }

  /* Analytics */
  .f-analytics-body {
    padding: 1rem;
  }

  .analytics-legend {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Charts */
  .f-chart-large {
    height: 250px;
  }

  /* Progress bars */
  .f-progress-body {
    padding: 1rem;
  }

  /* Tables */
  .f-table {
    font-size: 0.85rem;
    border-radius: 12px;
    overflow: hidden;
  }

  .f-table th,
  .f-table td {
    padding: 0.75rem 0.5rem;
  }

  .f-table tr:active {
    background: #f1f5f9;
  }

  /* Forms */
  .f-search-bar {
    flex-direction: column;
    gap: 0.75rem;
  }

  .f-search-input-wrapper {
    width: 100%;
  }

  .f-filter-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .f-filter-buttons button {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .f-filter-buttons button:active {
    transform: scale(0.95);
  }

  /* Buttons */
  .btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .btn:active {
    transform: scale(0.97);
  }

  .btn-sm {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
  }

  /* Hero sections */
  .f-hero {
    padding: 2rem 1rem;
  }

  .f-hero h1 {
    font-size: 1.8rem;
  }

  .f-hero p {
    font-size: 0.95rem;
  }

  /* Stats cards */
  .f-stats-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .f-stat-card {
    padding: 1.25rem;
    border-radius: 16px;
  }

  /* Empty states */
  .f-empty-state {
    padding: 2rem 1rem;
    border-radius: 16px;
  }

  .f-empty-state h3 {
    font-size: 1.2rem;
  }

  .f-empty-state p {
    font-size: 0.9rem;
  }

  /* Modals */
  .modal-overlay {
    padding: 1rem;
  }

  .modal-content {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px;
  }

  /* Toast notifications */
  .toast {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    border-radius: 16px;
  }

  /* Tabs */
  .f-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .f-tabs button {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    white-space: nowrap;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .f-tabs button:active {
    transform: scale(0.95);
  }

  /* Badge adjustments */
  .f-badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
  }

  /* Spacing adjustments */
  .fillow-wrapper {
    gap: 0;
  }

  /* Scrollbar improvements for mobile */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  /* Touch-friendly targets */
  button,
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  button span,
  a span {
    min-height: auto;
  }

  /* Improved tap targets for icons */
  .h-icon-btn,
  .sidebar-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Better focus states for accessibility */
  button:focus,
  a:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: 2px solid var(--green-500);
    outline-offset: 2px;
  }

  /* Improved text selection */
  ::selection {
    background: var(--green-500);
    color: white;
  }

  /* Safe area for notch devices */
  .fillow-header {
    padding-top: max(1rem, env(safe-area-inset-top));
  }

  .fillow-content {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .fillow-header {
    padding: 0.75rem;
  }

  .h-left h2 {
    font-size: 1rem;
  }

  .notification-dropdown {
    width: 280px !important;
    right: 5px !important;
  }

  .f-card {
    padding: 0.75rem;
  }

  .btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }

  .f-hero h1 {
    font-size: 1.5rem;
  }

  .f-hero p {
    font-size: 0.85rem;
  }

  /* Make notification items more compact */
  .notification-dropdown .notif-list > div {
    padding: 0.75rem 1rem;
  }

  .notification-dropdown .notif-list > div > div > div:first-child {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .surplus-grid {
    grid-template-columns: 1fr !important;
  }

  .community-grid {
    grid-template-columns: 1fr !important;
  }

  .messages-section > .f-card:first-child {
    max-height: 250px !important;
  }
}

/* Messages section responsive */
.messages-section {
  display: flex;
  gap: 2rem;
}

/* Bouton « Supprimer la conversation » — design soigné */
.msg-delete-btn {
  background: #fff5f5 !important;
  border: 1px solid #fecaca !important;
  color: #ef4444 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.12);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.msg-delete-btn:hover {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.32);
  transform: translateY(-1px);
}
.msg-delete-btn:active { transform: scale(0.94); }

@media (max-width: 768px) {
  .messages-section {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
  }

  .messages-section > .f-card:first-child {
    width: 100% !important;
    max-height: 300px !important;
  }

  .messages-section > .f-card:last-child {
    min-height: 400px !important;
  }

  .messages-section div[style*="max-width: 70%"] {
    max-width: 85% !important;
  }

  /* Zone de saisie + bouton « Envoyer » : input rétrécit (min-width:0),
     bouton jamais coupé ni hors écran, hauteur tactile confortable */
  .messages-section input[type="text"] {
    min-width: 0 !important;
    min-height: 48px;
    font-size: 16px; /* 16px = évite le zoom auto iOS */
  }
  .messages-section button {
    flex-shrink: 0 !important;
    min-height: 48px;
    white-space: nowrap;
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }

  /* Bouton « Supprimer la conversation » : carré net, grande cible tactile,
     exempté des règles génériques du bouton « Envoyer » ci-dessus */
  .messages-section .msg-delete-btn {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
  }
  .messages-section .msg-delete-btn svg { width: 20px; height: 20px; }

  /* En-tête du chat : titre sur une ligne, puis statut (gauche) + corbeille (droite)
     alignés et justifiés sur toute la largeur. */
  .messages-section > .f-card:last-child > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
  }
  .messages-section > .f-card:last-child > div:first-child > div:last-child {
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .messages-section > .f-card:last-child > div:first-child > div:last-child > div {
    text-align: left !important;
  }

  /* ── Hero « Votre Histoire d'Impact » — design pro mobile ── */
  .impact-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    padding: 1.6rem 1.4rem !important;
    border-radius: 22px !important;
  }

  .impact-hero-content h2 {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }

  .impact-hero-content p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* Deux stats côte à côte (grille 2 colonnes) plutôt que des blocs empilés */
  .impact-hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.8rem !important;
    margin-top: 1.5rem !important;
    width: 100% !important;
  }

  .impact-hero-stat {
    min-width: 0 !important;
    width: auto !important;
    padding: 1.05rem 0.9rem !important;
    text-align: left !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.09) !important;
  }

  .impact-hero-stat .val {
    font-size: 1.85rem !important;
  }

  .impact-hero-stat .label {
    font-size: 0.6rem !important;
    letter-spacing: 0.5px !important;
    opacity: 0.85 !important;
    line-height: 1.25 !important;
  }

  .premium-menu-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .premium-menu-header .btn-premium-action {
    width: 100% !important;
    justify-content: center !important;
  }

  .premium-menu-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .premium-menu-icon {
    margin: 0 0 0.6rem 0 !important;
  }

  .premium-menu-title h2 {
    font-size: 1.5rem !important;
    text-align: left !important;
  }

  .premium-menu-title p {
    font-size: 0.85rem !important;
    text-align: left !important;
  }

  .premium-content-body {
    padding: 1rem !important;
  }

  .fillow-inner {
    padding: 1rem !important;
  }

  .hero-gradient-card {
    padding: 2rem 1rem !important;
  }

  .hero-gradient-card h1 {
    font-size: 1.5rem !important;
  }

  .hero-gradient-inner-box {
    padding: 1.5rem 1rem !important;
  }

  .hero-actions {
    flex-direction: column !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .f-form-row {
    grid-template-columns: 1fr !important;
  }

  .f-section.active form .f-form-group[style*="max-width"] {
    max-width: 100% !important;
  }

  .f-section.active .f-card[style*="max-width: 800px"] {
    max-width: 100% !important;
    padding: 1.5rem !important;
  }

  .f-section.active .f-card[style*="border: 1px solid #fecaca"] {
    padding: 1.5rem !important;
  }

  .f-section.active div[style*="display: grid"][style*="grid-template-columns: repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }

  .f-section.active div[style*="height: calc(100vh"] {
    height: auto !important;
    min-height: auto !important;
    flex-direction: column !important;
  }

  .f-section.active div[style*="height: calc(100vh"] > div {
    width: 100% !important;
  }

  .impact-section-title {
    font-size: 1rem !important;
  }

  .impact-card-metric {
    padding: 1rem !important;
  }

  .impact-card-metric .val {
    font-size: 1.5rem !important;
  }

  .f-progress-card .progress-circle-wrap {
    transform: scale(0.85) !important;
  }

  .dashboard-eco .sidebar-toggle {
    display: none !important;
  }

  .h-left h2 {
    font-size: 1rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .h-right {
    gap: 0.5rem !important;
  }

  .header-avatar-mini {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ---------- LANDING PAGE RESPONSIVE — SECTION OVERRIDES ---------- */

/* Navbar */
@media (max-width: 768px) {
  nav[id="navbar"] > div {
    padding: 0 1.25rem !important;
  }
}

/* Hero — current component (inline styles, no CSS classes) */
@media (max-width: 900px) {
  section[id="hero"] > div {
    padding: 100px 24px 60px !important;
    gap: 48px !important;
  }
  section[id="hero"] div[style*="border-top: 1px solid"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  section[id="hero"] div[style*="border-top: 1px solid"] > div {
    border-right: none !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(74,140,92,0.12) !important;
  }
  section[id="hero"] div[style*="border-top: 1px solid"] > div:first-child {
    border-top: none !important;
  }
}

@media (max-width: 600px) {
  section[id="hero"] > div {
    padding: 80px 20px 40px !important;
    gap: 32px !important;
  }
  section[id="hero"] div[style*="min-height: 520px"] {
    min-height: 340px !important;
  }
  section[id="hero"] div[style*="border-radius: 50%"][style*="440px"] {
    width: 280px !important;
    height: 280px !important;
  }
  section[id="hero"] div[style*="border-radius: 50%"][style*="330px"] {
    width: 210px !important;
    height: 210px !important;
  }
  section[id="hero"] div[style*="border-radius: 50%"][style*="190px"] {
    width: 130px !important;
    height: 130px !important;
  }
  section[id="hero"] div[style*="border-radius: 50%"][style*="190px"] svg {
    width: 56px !important;
    height: 56px !important;
  }
  section[id="hero"] div[style*="top: 10px"][style*="right: -10px"] {
    top: 0 !important;
    right: 0 !important;
    min-width: 120px !important;
    padding: 12px 16px !important;
  }
  section[id="hero"] div[style*="top: 10px"][style*="right: -10px"] div[style*="font-size: 28px"] {
    font-size: 22px !important;
  }
  section[id="hero"] div[style*="bottom: 30px"][style*="left: -10px"] {
    bottom: 10px !important;
    left: 0 !important;
    min-width: 120px !important;
    padding: 12px 16px !important;
  }
  section[id="hero"] div[style*="bottom: 30px"][style*="left: -10px"] div[style*="font-size: 28px"] {
    font-size: 22px !important;
  }
  section[id="hero"] div[style*="top: 110px"][style*="left: 0px"] {
    top: 60px !important;
  }
  section[id="hero"] div[style*="bottom: 140px"][style*="right: 0px"] {
    bottom: 100px !important;
  }
  section[id="hero"] div[style*="right: -30px"][style*="bottom: 0px"][style*="grid-template-columns"] {
    display: none !important;
  }
  section[id="hero"] h1 {
    font-size: clamp(32px, 8vw, 46px) !important;
  }
  section[id="hero"] div[style*="display: flex"][style*="gap: 14px"][style*="flexWrap"] {
    flex-direction: column !important;
  }
  section[id="hero"] div[style*="display: flex"][style*="gap: 14px"][style*="flexWrap"] button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* PourquoiSection — grid & padding */
@media (max-width: 768px) {
  section[id="fonctions"] {
    padding: 64px 24px !important;
  }
  section[id="fonctions"] .pourquoi-header-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  section[id="fonctions"] .pourquoi-card-grid {
    grid-template-columns: 1fr !important;
  }
  section[id="fonctions"] .pourquoi-card-grid > div {
    border-radius: 24px !important;
    padding: 32px 24px !important;
  }
  section[id="fonctions"] div[style*="font-size: 80px"] {
    font-size: 56px !important;
    right: 20px !important;
  }
  section[id="fonctions"] h2[style*="clamp(2rem, 3.5vw, 3.2rem)"] {
    font-size: clamp(1.5rem, 4.5vw, 2rem) !important;
  }
}

@media (max-width: 480px) {
  section[id="fonctions"] div[style*="font-size: 80px"] {
    font-size: 40px !important;
  }
}

/* SdcSection — stats grid */
@media (max-width: 768px) {
  section[id="quartier"] {
    padding: 64px 24px !important;
  }
  section[id="quartier"] .sdc-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  section[id="quartier"] .sdc-stats-grid > div {
    padding: 28px 20px !important;
  }
  section[id="quartier"] .sdc-stats-grid > div div[style*="font-size: clamp"] {
    font-size: 36px !important;
  }
  section[id="quartier"] h2[style*="clamp(2.2rem, 4vw, 3.4rem)"] {
    font-size: clamp(1.6rem, 4.5vw, 2.2rem) !important;
  }
}

@media (max-width: 480px) {
  section[id="quartier"] .sdc-stats-grid {
    grid-template-columns: 1fr !important;
  }
  section[id="quartier"] {
    padding: 48px 16px !important;
  }
  section[id="quartier"] .sdc-stats-grid > div div[style*="font-size: clamp"] {
    font-size: 28px !important;
  }
}

/* StepsSection */
@media (max-width: 768px) {
  section[id="etapes"] {
    padding: 64px 24px !important;
  }
  section[id="etapes"] > div > div:first-child > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] > div {
    padding: 24px 16px 16px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] div[style*="position: absolute"][style*="top: 0"] {
    display: none !important;
  }
  section[id="etapes"] div[style*="margin-top: 72px"] {
    margin-top: 40px !important;
    flex-direction: column !important;
    text-align: center !important;
  }
  section[id="etapes"] h2[style*="clamp(1.8rem, 3vw, 3rem)"] {
    font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
  }
}

@media (max-width: 480px) {
  section[id="etapes"] h2[style*="clamp(1.8rem, 3vw, 3rem)"] {
    font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
  }
}
  section[id="etapes"] > div > div:first-child > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] > div {
    padding: 24px 16px 16px !important;
  }
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] div[style*="position: absolute"][style*="top: 0"] {
    display: none !important;
  }
  section[id="etapes"] div[style*="margin-top: 72px"] {
    margin-top: 40px !important;
    flex-direction: column !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  section[id="etapes"] div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  section[id="etapes"] {
    padding: 48px 16px !important;
  }
}

/* ---------- IMPACTS SECTION MOBILE-FRIENDLY ---------- */
/* 4-tier progressive enhancement: 1024 → 768 → 600 → 480 */

@media (max-width: 1024px) {
  /* Grid → 2 columns */
  section[id="impacts"] {
    padding: 64px 24px !important;
  }
  section[id="impacts"] > div > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* [A] Title full width */
  section[id="impacts"] div[style*="grid-column: 1 / 3"][style*="grid-row: 1"] {
    grid-column: 1 / -1 !important;
  }
  /* [B] [C] keep side-by-side */
  section[id="impacts"] div[style*="grid-column: 3"] { grid-column: span 1 !important; }
  section[id="impacts"] div[style*="grid-column: 4"] { grid-column: span 1 !important; }
  /* [D] full width */
  section[id="impacts"] div[style*="grid-column: 1 / 3"][style*="grid-row: 2"] {
    grid-column: 1 / -1 !important;
  }
  /* [E] left, [F] right */
  section[id="impacts"] div[style*="grid-column: 3"][style*="grid-row: 2"] {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 2"] {
    grid-column: 2 !important;
    grid-row: auto !important;
  }
  /* [G] Zéro Déchet — full width, inner → 1 column */
  section[id="impacts"] div[style*="grid-column: 1 / 4"][style*="grid-row: 3"] {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px !important;
  }
  /* [H] CTA — fix: push below [G] to avoid overlap */
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 3"] {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 28px !important;
  }
}

@media (max-width: 768px) {
  /* ── Card padding ── */
  section[id="impacts"] div[style*="padding: 40px 36px"] {
    padding: 28px 24px !important;
  }
  section[id="impacts"] div[style*="padding: 48px 48px 44px"] {
    padding: 32px 24px !important;
  }
  section[id="impacts"] div[style*="grid-row: 2"][style*="padding: 48px"][style*="position: relative"] {
    padding: 28px 24px !important;
  }
  section[id="impacts"] div[style*="grid-column: 1 / 4"][style*="grid-row: 3"] {
    padding: 28px 24px !important;
    gap: 20px !important;
  }
  /* ── Heading sizes ── */
  section[id="impacts"] h3[style*="font-size: 22px"] { font-size: 17px !important; }
  section[id="impacts"] h3[style*="font-size: 24px"] { font-size: 19px !important; }
  /* ── Body & labels ── */
  section[id="impacts"] p[style*="font-size: 15px"] { font-size: 13px !important; }
  section[id="impacts"] div[style*="font-size: 13px"][style*="color: rgba"] { font-size: 12px !important; }
  /* ── CTA ── */
  section[id="impacts"] div[style*="font-size: 20px"][style*="color: #fff"] {
    font-size: 17px !important;
  }
  /* ── Progress margins ── */
  section[id="impacts"] div[style*="margin-bottom: 32px"] { margin-bottom: 20px !important; }
  section[id="impacts"] div[style*="margin-bottom: 28px"] { margin-bottom: 18px !important; }
}

@media (max-width: 600px) {
  /* Grid → 1 column */
  section[id="impacts"] > div > div:first-child {
    grid-template-columns: 1fr !important;
  }
  /* All cards full width */
  section[id="impacts"] div[style*="grid-column: 1 / 3"][style*="grid-row: 1"],
  section[id="impacts"] div[style*="grid-column: 3"],
  section[id="impacts"] div[style*="grid-column: 4"],
  section[id="impacts"] div[style*="grid-column: 1 / 3"][style*="grid-row: 2"],
  section[id="impacts"] div[style*="grid-column: 3"][style*="grid-row: 2"],
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 2"],
  section[id="impacts"] div[style*="grid-column: 1 / 4"][style*="grid-row: 3"],
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 3"] {
    grid-column: 1 / -1 !important;
  }
  /* [H] push below [G] */
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 3"] {
    grid-row: auto !important;
  }
  /* Stat numbers */
  section[id="impacts"] div[style*="font-size: 88px"] { font-size: 48px !important; }
  section[id="impacts"] div[style*="font-size: 72px"] { font-size: 40px !important; }
  section[id="impacts"] div[style*="font-size: 62px"] { font-size: 36px !important; }
  section[id="impacts"] div[style*="font-size: 64px"] { font-size: 38px !important; }
  section[id="impacts"] div[style*="font-size: 56px"] { font-size: 30px !important; }
  /* Card padding */
  section[id="impacts"] div[style*="padding: 40px 36px"] { padding: 24px 20px !important; }
  section[id="impacts"] div[style*="padding: 48px 48px 44px"] { padding: 28px 20px !important; }
  section[id="impacts"] div[style*="grid-row: 2"][style*="padding: 48px"][style*="position: relative"] {
    padding: 24px 20px !important;
  }
  /* h3 */
  section[id="impacts"] h3[style*="font-size: 22px"] { font-size: 16px !important; }
  section[id="impacts"] h3[style*="font-size: 24px"] { font-size: 17px !important; }
  /* body */
  section[id="impacts"] p[style*="font-size: 15px"] { font-size: 13px !important; }
  /* Section */
  section[id="impacts"] { padding: 40px 16px !important; }
  /* CTA text */
  section[id="impacts"] div[style*="font-size: 20px"][style*="color: #fff"] {
    font-size: 16px !important;
  }
  /* Badges */
  section[id="impacts"] span[style*="letter-spacing: 0.08em"][style*="border-radius: 100px"] {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }
  /* [G] inner gap */
  section[id="impacts"] div[style*="grid-column: 1 / 4"][style*="grid-row: 3"] {
    gap: 18px !important;
  }
}

@media (max-width: 480px) {
  /* ── Card padding tight ── */
  section[id="impacts"] div[style*="padding: 40px 36px"] { padding: 20px 16px !important; }
  section[id="impacts"] div[style*="padding: 48px 48px 44px"] { padding: 24px 16px !important; }
  section[id="impacts"] div[style*="grid-row: 2"][style*="padding: 48px"][style*="position: relative"] {
    padding: 20px 16px !important;
  }
  section[id="impacts"] div[style*="grid-column: 1 / 4"][style*="grid-row: 3"] {
    padding: 20px 16px !important;
    gap: 14px !important;
  }
  /* ── Stat numbers compact ── */
  section[id="impacts"] div[style*="font-size: 88px"] { font-size: 32px !important; }
  section[id="impacts"] div[style*="font-size: 72px"] { font-size: 28px !important; }
  section[id="impacts"] div[style*="font-size: 62px"] { font-size: 26px !important; }
  section[id="impacts"] div[style*="font-size: 64px"] { font-size: 28px !important; }
  section[id="impacts"] div[style*="font-size: 56px"] { font-size: 24px !important; }
  /* ── h3 ── */
  section[id="impacts"] h3[style*="font-size: 22px"] { font-size: 14px !important; }
  section[id="impacts"] h3[style*="font-size: 24px"] { font-size: 15px !important; }
  /* ── body ── */
  section[id="impacts"] p[style*="font-size: 15px"] { font-size: 12px !important; }
  /* ── CTA ── */
  section[id="impacts"] div[style*="grid-column: 4"][style*="grid-row: 3"] {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
  }
  section[id="impacts"] div[style*="font-size: 20px"][style*="color: #fff"] {
    font-size: 15px !important;
  }
  section[id="impacts"] div[style*="font-size: 13px"][style*="color: rgba(255,255,255"] {
    font-size: 11px !important;
  }
  section[id="impacts"] div[style*="width: 48px"][style*="height: 48px"] {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  /* ── Section ── */
  section[id="impacts"] { padding: 32px 12px !important; }
  /* ── Progress margins ── */
  section[id="impacts"] div[style*="margin-bottom: 32px"] { margin-bottom: 16px !important; }
  section[id="impacts"] div[style*="margin-bottom: 28px"] { margin-bottom: 14px !important; }
}

/* MistralSection */
@media (max-width: 768px) {
  .mistral-section {
    padding: 64px 24px !important;
  }
  .mistral-section > div {
    text-align: center !important;
  }
  section[id="mistral"] h2[style*="clamp(2rem, 3.5vw, 3rem)"] {
    font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
  }
}

@media (max-width: 480px) {
  .mistral-section {
    padding: 48px 16px !important;
  }
  section[id="mistral"] h2[style*="clamp(2rem, 3.5vw, 3rem)"] {
    font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
  }
}

/* Footer */
@media (max-width: 768px) {
  footer > div > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  footer > div {
    padding: 48px 24px 32px !important;
  }
}

@media (max-width: 480px) {
  footer > div > div:first-child {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  footer > div > div:first-child div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  footer > div {
    padding: 32px 16px 24px !important;
  }
}

/* InsertionSection */
@media (max-width: 768px) {
  .insertion-section {
    padding: 64px 0 !important;
  }
  .insertion-section .container > div:first-child h2 {
    font-size: 2.2rem !important;
  }
  .insertion-section div[style*="grid-template-columns: 1fr auto 1.2fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .insertion-section div[style*="grid-template-columns: 1fr auto 1.2fr auto 1fr"] > div[style*="color: #e2e8f0"] {
    display: none !important;
  }
  .insertion-section div[style*="grid-template-columns: 1.2fr 0.8fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .insertion-section div[style*="grid-template-columns: 1.2fr 0.8fr"] > div:last-child {
    text-align: center !important;
  }
  .insertion-section div[style*="grid-template-columns: 1.2fr 0.8fr"] h3 {
    font-size: 1.6rem !important;
  }
  .insertion-section div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 2rem"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .insertion-section div[style*="padding: 4rem"] {
    padding: 2rem 1.5rem !important;
    border-radius: 24px !important;
  }
  .insertion-section div[style*="padding: 2.5rem 1.5rem"] {
    padding: 1.5rem 1rem !important;
  }
  .insertion-section div[style*="padding: 3rem"] {
    padding: 1.5rem !important;
  }
  .insertion-section {
    padding: 48px 0 !important;
  }
  .insertion-section .container > div:first-child h2 {
    font-size: 1.8rem !important;
  }
  .insertion-section p[style*="text-align: justify"] {
    text-align: left !important;
  }
}

/* RegisterSection */
@media (max-width: 768px) {
  .register-section {
    padding: 64px 0 !important;
  }
  .register-section button[style*="padding: 1.5rem 5rem"] {
    padding: 1.2rem 2rem !important;
    font-size: 1.1rem !important;
    width: 100% !important;
    max-width: 400px !important;
  }
  .register-section div[style*="grid-template-columns: 0.8fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .register-section div[style*="grid-template-columns: 0.8fr 1.2fr"] > div:first-child {
    text-align: center !important;
  }
  .register-section div[style*="grid-template-columns: 0.8fr 1.2fr"] > div:first-child h3 {
    font-size: 1.8rem !important;
  }
  .register-section form[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .register-section form[style*="grid-template-columns: 1fr 1fr"] div[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  .register-section form div[style*="padding: 3rem"] {
    padding: 2rem !important;
  }
  .register-section h2[style*="font-size: 2.2rem"] {
    font-size: 1.8rem !important;
  }
}

@media (max-width: 480px) {
  .register-section {
    padding: 48px 0 !important;
  }
  .register-section div[style*="padding: 3rem"] {
    padding: 1.5rem !important;
    border-radius: 20px !important;
  }
  .register-section div[style*="display: flex"][style*="gap: 1rem"][style*="margin-bottom: 2rem"][style*="background: #f8fafc"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .register-section form div[style*="background: #f8fafc"] button {
    padding: 0.7rem !important;
  }
}

/* PartnersSection */
@media (max-width: 768px) {
  .partners-section {
    padding: 3rem 1rem !important;
  }
}

/* ReviewsSection inline overrides */
@media (max-width: 768px) {
  .reviews-section {
    padding: 64px 24px !important;
  }
}

/* Reviews section default (desktop) */
.reviews-section {
  padding: 130px 64px;
}

/* ---------- LANDING PAGE MOBILE RESPONSIVE ---------- */
@media (max-width: 768px) {
  /* Navbar mobile */
  .navbar {
    padding: 1rem 1.5rem;
  }

  .nav-desktop {
    display: none !important;
  }

  .mobile-menu-btn {
    display: block !important;
  }

  /* Mobile menu overlay */
  .mobile-menu-overlay {
    opacity: 0;
    visibility: hidden;
  }

  .mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
  }

  /* Hero section mobile */
  .hero-v4-wrapper {
    padding: 80px 1rem 1rem 1rem;
  }

  .hero-v4 {
    padding: 2rem;
    border-radius: 20px;
  }

  .hero-v4-top {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-v4-desc {
    max-width: 100%;
    text-align: left;
    font-size: 0.95rem;
  }

  .hero-v4-bottom {
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
  }

  .hero-v4-title-block {
    max-width: 100%;
  }

  .hv4-title {
    font-size: 3rem;
    letter-spacing: -2px;
  }

  .hv4-tagline {
    font-size: 1rem;
  }

  .hero-v4-right {
    width: 100%;
  }

  .hv4-cta {
    padding: 1rem;
    font-size: 1rem;
  }

  /* Partners section mobile */
  .partners-section {
    padding: 4rem 0;
  }

  .sponsors-logos {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-sponsors {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Features section mobile */
  .features-section {
    padding: 4rem 0;
  }

  .features-tabs {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }

  .f-tab {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }

  .f-content-pane h2 {
    font-size: 2rem;
  }

  .f-content-pane p {
    font-size: 0.95rem;
  }

  /* Mistral section mobile */
  .mistral-section {
    padding: 4rem 0;
  }

  .mistral-header h2 {
    font-size: 2rem;
  }

  .mistral-header p {
    font-size: 0.95rem;
  }

  /* Steps section mobile */
  .steps-section {
    padding: 4rem 0;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .step-card {
    padding: 1.5rem;
  }

  /* Reviews section mobile */
  .reviews-section {
    padding: 4rem 1.5rem !important;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .review-card {
    padding: 1.5rem;
  }

  /* Register section mobile */
  .register-section {
    padding: 4rem 0;
  }

  .register-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .register-left h2 {
    font-size: 2rem;
  }

  .register-left > p {
    font-size: 0.95rem;
  }

  .register-perks {
    gap: 0.75rem;
  }

  .perk {
    font-size: 0.9rem;
  }

  .reg-form {
    padding: 1.5rem;
  }

  .reg-form input,
  .reg-form select {
    padding: 0.75rem;
    font-size: 0.95rem;
  }

  /* Footer mobile */
  .footer {
    padding: 3rem 0;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-brand h3 {
    font-size: 1.5rem;
  }

  .footer-links {
    gap: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  /* Buttons mobile */
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
  }

  .btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
  }

  /* Modal mobile */
  .modal-overlay {
    padding: 1rem;
  }

  .modal-content {
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
  }

  /* Custom cursor hidden on mobile */
  .custom-cursor,
  .custom-cursor-dot {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */

  /* Hero extra small */
  .hero-v4-wrapper {
    padding: 70px 0.75rem 0.75rem 0.75rem;
  }

  .hero-v4 {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .hv4-title {
    font-size: 2.25rem;
    letter-spacing: -1px;
  }

  .hv4-tagline {
    font-size: 0.9rem;
  }

  .hero-v4-desc {
    font-size: 0.85rem;
  }

  /* Partners extra small */
  .partners-section {
    padding: 3rem 0;
  }

  /* Features extra small */
  .features-section {
    padding: 3rem 0;
  }

  .f-tab {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
  }

  .f-content-pane h2 {
    font-size: 1.75rem;
  }

  /* Mistral extra small */
  .mistral-section {
    padding: 3rem 0;
  }

  .mistral-header h2 {
    font-size: 1.75rem;
  }

  /* Register extra small */
  .register-section {
    padding: 3rem 0;
  }

  .register-layout {
    gap: 2rem;
  }

  .register-left h2 {
    font-size: 1.75rem;
  }

  .reg-form {
    padding: 1rem;
  }

  .reg-form input,
  .reg-form select {
    padding: 0.6rem;
    font-size: 0.9rem;
  }

  /* Footer extra small */
  .footer {
    padding: 2rem 0;
  }

  .footer-brand h3 {
    font-size: 1.25rem;
  }

  /* Hide custom cursor on touch devices */
  .custom-cursor {
    display: none !important;
  }
}

/* ---------- AUTH PAGE MOBILE RESPONSIVE ---------- */
@media (max-width: 768px) {
  .auth-split-wrapper {
    flex-direction: column !important;
  }

  .auth-split-left {
    flex: none !important;
    padding: 4rem 2rem !important;
    min-height: auto;
  }

  .auth-split-left h1 {
    font-size: 2rem !important;
  }

  .auth-split-left p {
    font-size: 0.95rem !important;
  }

  .auth-split-left a {
    top: 2rem !important;
    left: 2rem !important;
    font-size: 0.95rem !important;
  }

  .auth-split-left div[style*="bottom"] {
    bottom: 2rem !important;
    left: 2rem !important;
    right: 2rem !important;
    text-align: center;
    font-size: 0.8rem !important;
  }

  .auth-split-right {
    flex: none !important;
    width: 100% !important;
    padding: 4rem 2rem !important;
  }

  .auth-split-right h2 {
    font-size: 1.5rem !important;
  }

  .auth-split-right form {
    gap: 1.5rem !important;
  }

  .auth-split-right input {
    font-size: 1rem !important;
  }

  .auth-split-right button {
    padding: 1.1rem !important;
    font-size: 0.95rem !important;
  }

  /* Signup form grid */
  .auth-split-right form[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .auth-split-right form[style*="grid"] > div[style*="span"] {
    grid-column: span 1 !important;
  }

  /* Role buttons */
  .auth-split-right div[style*="background: #f8fafc"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .auth-split-right div[style*="background: #f8fafc"] button {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .auth-split-left {
    padding: 3rem 1.5rem !important;
  }

  .auth-split-left h1 {
    font-size: 1.75rem !important;
  }

  .auth-split-left p {
    font-size: 0.85rem !important;
  }

  .auth-split-left div[style*="fontSize: 3rem"] {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }

  .auth-split-right {
    padding: 3rem 1.5rem !important;
  }

  .auth-split-right h2 {
    font-size: 1.25rem !important;
  }

  .auth-split-right h3 {
    font-size: 1rem !important;
  }

  .auth-split-right input {
    font-size: 0.95rem !important;
  }

  .auth-split-right button {
    padding: 1rem !important;
    font-size: 0.85rem !important;
  }

  .auth-split-right label {
    font-size: 0.7rem !important;
  }

  .auth-split-right p[style*="text-align: center"] {
    font-size: 0.7rem !important;
  }
}

/* ---------- DASHBOARD SECTIONS MOBILE RESPONSIVE ---------- */
@media (max-width: 768px) {
  /* Gestion Surplus section */
  .f-section.active .f-card {
    padding: 1.5rem !important;
  }

  .f-section.active .f-card-header {
    flex-direction: column !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  .f-section.active .f-card-header h4 {
    font-size: 1.25rem !important;
  }

  .f-section.active .f-card-actions {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .f-section.active .f-card-actions span {
    font-size: 0.85rem !important;
    padding: 0.5rem 1rem !important;
  }

  .f-section.active .f-card-header button {
    width: 100% !important;
  }

  /* Tables in surplus section */
  .f-table-wrap {
    overflow-x: auto !important;
  }

  .f-table {
    font-size: 0.85rem !important;
  }

  .f-table th,
  .f-table td {
    padding: 0.75rem 0.5rem !important;
  }

  /* Recrutement IA section */
  .f-section.active div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .f-section.active .f-card[style*="padding: 1.5rem"] {
    padding: 1.25rem !important;
  }

  .f-section.active .f-card[style*="padding: 1.5rem"] h4 {
    font-size: 1rem !important;
  }

  /* Empty states */
  .f-section.active div[style*="text-align: center"] {
    padding: 2rem 1rem !important;
    font-size: 0.9rem !important;
  }

  /* Forms in modals */
  .f-section.active form {
    gap: 1rem !important;
  }

  .f-section.active form input,
  .f-section.active form select,
  .f-section.active form textarea {
    padding: 0.75rem !important;
    font-size: 0.95rem !important;
  }

  /* Tabs */
  .f-section.active .f-card-actions {
    background: #f8fafc !important;
    padding: 0.5rem !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 480px) {
  /* Gestion Surplus section - extra small */
  .f-section.active .f-card {
    padding: 1rem !important;
  }

  .f-section.active .f-card-header h4 {
    font-size: 1.1rem !important;
  }

  .f-section.active .f-card-actions span {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  /* Tables - extra small */
  .f-table {
    font-size: 0.8rem !important;
  }

  .f-table th,
  .f-table td {
    padding: 0.5rem 0.3rem !important;
  }

  /* Recrutement IA - extra small */
  .f-section.active .f-card[style*="padding: 1.5rem"] {
    padding: 1rem !important;
  }

  .f-section.active .f-card[style*="padding: 1.5rem"] h4 {
    font-size: 0.95rem !important;
  }

  /* Buttons - extra small */
  .f-section.active .f-card-header button {
    font-size: 0.9rem !important;
    padding: 0.75rem 1rem !important;
  }
}

/* ---------- PREMIUM DASHBOARD MENUS ---------- */
.premium-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.premium-menu-title {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.premium-menu-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--green-100), #ccfbf1);
    color: var(--green-600);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(22, 163, 74, 0.15);
}

.premium-menu-icon.talent {
    background: linear-gradient(135deg, #fef3c7, #fff7ed);
    color: #d97706;
    box-shadow: 0 10px 25px rgba(217, 119, 6, 0.15);
}

.premium-menu-icon.community {
    background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
    color: #0284c7;
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.15);
}

.premium-menu-title h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--neutral-900);
}

.premium-menu-title p {
    margin: 0;
    color: var(--neutral-500);
    font-weight: 500;
    font-size: 1rem;
    margin-top: 0.25rem;
}

.btn-orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.25) !important;
}
.btn-orange:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    box-shadow: 0 12px 25px rgba(234, 88, 12, 0.35) !important;
}

.btn-black {
    background: #1e293b !important;
    color: white !important;
    border: none !important;
    padding: 0.85rem 1.75rem;
    border-radius: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.btn-black:hover {
    background: #0f172a !important;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.btn-premium-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.85rem 1.75rem;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.25);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-premium-action:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 24px rgba(16, 185, 129, 0.35);
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
}

.btn-premium-action:active {
    transform: translateY(0) scale(0.98);
}

.btn-premium-action::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.btn-premium-action:hover::before {
    left: 100%;
}

.premium-tabs-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}

.premium-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.premium-tab:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #1e293b;
    transform: translateY(-1px);
}

.premium-tab.active {
    background: #1e293b;
    color: white;
    border-color: #1e293b;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.premium-tab.active {
    background: var(--green-600);
    border-color: var(--green-600);
    color: white;
    box-shadow: 0 8px 15px rgba(22, 163, 74, 0.2);
}

.premium-content-body {
    padding: 2rem;
    border-radius: 24px;
    border: 1px solid var(--neutral-200);
    background: var(--white);
    box-shadow: 0 20px 40px rgba(0,0,0,0.03);
}

/* ── Surplus section responsive ── */
@media (max-width: 768px) {
    /* Wrapper principal : réduire le padding */
    .surplus-section-card {
        padding: 1rem !important;
    }

    /* Header : empiler titre + bouton */
    .premium-menu-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        margin-bottom: 1.25rem !important;
    }
    .premium-menu-header .btn-premium-action {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Titre : réduire la taille */
    .premium-menu-title {
        gap: 1rem !important;
    }
    .premium-menu-title h2 {
        font-size: 1.35rem !important;
    }
    .premium-menu-title p {
        font-size: 0.875rem !important;
    }
    .premium-menu-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
    }

    /* Onglets : plus compacts, scrollables */
    .premium-tabs-container {
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    .premium-tab {
        padding: 0.6rem 1rem !important;
        font-size: 0.82rem !important;
        border-radius: 10px !important;
    }
    .premium-tab svg {
        display: none !important;
    }

    /* Corps du contenu */
    .premium-content-body {
        padding: 0.75rem !important;
        border-radius: 16px !important;
    }
}

/* ---------- IMPACT DASHBOARD ---------- */
/* ============ SECTION IMPACT (redesign responsive) ============ */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(min-content, auto);
    gap: 1.5rem;
    align-items: stretch;
}

.impact-grid > .impact-hero,
.impact-grid > .impact-section-title,
.impact-grid > .impact-chart-card { grid-column: 1 / -1; }
.impact-grid > .impact-card-metric { grid-column: span 1; }
.impact-grid > .impact-progress-container,
.impact-grid > .impact-table-card { grid-column: span 2; }

/* ---- Hero ---- */
.impact-hero {
    background: linear-gradient(135deg, #0f172a 0%, #064e3b 55%, #047857 100%);
    color: white;
    padding: 3rem;
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 25px 50px -12px rgba(6, 78, 59, 0.35);
}

.impact-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.impact-hero::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -8%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.impact-hero-content { position: relative; z-index: 1; }

.impact-hero-content h2 {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
    color: white;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.impact-hero-content p {
    font-size: 1.05rem;
    color: #ffffff;
    opacity: 1;
    max-width: 560px;
    line-height: 1.6;
}

.impact-hero-stats {
    display: flex;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.impact-hero-stat {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 1.5rem 1.75rem;
    border-radius: 20px;
    min-width: 150px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, background 0.25s ease;
}

.impact-hero-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #34d399);
}

.impact-hero-stat:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.11); }

.impact-hero-stat .val {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    color: #34d399;
    line-height: 1.1;
}

.impact-hero-stat .label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.7;
    letter-spacing: 1px;
    margin-top: 0.35rem;
    display: block;
}

/* ---- Titres de section ---- */
.impact-section-title {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    letter-spacing: -0.01em;
}

.impact-section-title::before {
    content: '';
    width: 6px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(180deg, #10b981, #34d399);
    flex-shrink: 0;
}

.impact-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #e2e8f0, transparent);
}

/* ---- Cartes métriques ---- */
.impact-card-metric {
    background: white;
    border: 1px solid #eef2f7;
    padding: 1.5rem;
    border-radius: 22px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.impact-card-metric::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--metric-accent, #10b981);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.impact-card-metric:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -12px rgba(16, 185, 129, 0.18);
    border-color: transparent;
}

.impact-card-metric:hover::before { opacity: 1; }

.impact-card-metric .icon {
    width: 52px;
    height: 52px;
    background: var(--metric-bg, linear-gradient(135deg, #f0fdf4, #dcfce7));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    font-size: 1.5rem;
}

.impact-card-metric .val {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0f172a;
    display: block;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.impact-card-metric .label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* ---- Carte progression ---- */
.impact-progress-container {
    background: white;
    padding: 2rem;
    border-radius: 24px;
    border: 1px solid #eef2f7;
    display: flex;
    flex-direction: column;
}

.impact-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.impact-progress-header h4 { font-size: 1.05rem; font-weight: 800; color: #0f172a; }

.impact-progress-header span {
    background: #f0fdf4;
    color: #059669 !important;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.95rem;
}

.impact-progress-bar-bg {
    width: 100%;
    height: 14px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.impact-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #059669, #10b981, #34d399);
    border-radius: 999px;
    transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 8px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* ---- Carte tableau ---- */
.impact-table-card {
    background: white;
    padding: 2rem;
    border-radius: 24px;
    border: 1px solid #eef2f7;
}

.impact-table-card h4 { font-size: 1.05rem; font-weight: 800; color: #0f172a; }

.impact-table-card .f-table th { border-bottom: 1px solid #eef2f7; }
.impact-table-card .f-table tbody tr { transition: background 0.2s ease; }
.impact-table-card .f-table tbody tr:hover { background: #f8fafc; }

/* ---- Carte graphique ---- */
.impact-chart-card {
    background: white;
    padding: 2rem;
    border-radius: 24px;
    border: 1px solid #eef2f7;
}

.impact-chart-card h4 { font-size: 1.05rem; font-weight: 800; color: #0f172a; }

/* ---- Graphique « Évolution de l'Impact » (design pro) ---- */
.impact-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.impact-chart-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    flex-shrink: 0;
}
.impact-chart-total .num {
    font-size: 1.6rem;
    font-weight: 900;
    color: #059669;
    letter-spacing: -0.02em;
}
.impact-chart-total .cap {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}
.impact-chart {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    height: 260px;
    padding: 1.25rem 1.25rem 0;
    border-radius: 18px;
    background:
        linear-gradient(#eef2f7 1px, transparent 1px) 0 0 / 100% 25% ,
        linear-gradient(135deg, #fafffd, #f4f8f6);
    border: 1px solid #eef2f7;
}
.impact-bar-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    height: 100%;
}
.impact-bar-track {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.impact-bar {
    position: relative;
    width: 70%;
    max-width: 46px;
    min-height: 6px;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #cbd5e1, #e2e8f0);
    transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease;
}
.impact-bar.current {
    background: linear-gradient(180deg, #10b981, #059669);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}
.impact-bar:hover { filter: brightness(1.05); }
.impact-bar-val {
    position: absolute;
    top: -1.55rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.82rem;
    font-weight: 800;
    color: #1e293b;
}
.impact-bar.current .impact-bar-val { color: #059669; }
.impact-bar-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
    white-space: nowrap;
}
.impact-bar-label.current { color: #059669; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .impact-chart {
        height: 200px;
        gap: 0.5rem;
        padding: 1rem 0.75rem 0;
    }
    .impact-bar { width: 80%; max-width: 30px; }
    .impact-bar-val { font-size: 0.7rem; top: -1.3rem; }
    .impact-bar-label { font-size: 0.62rem; }
    .impact-chart-total .num { font-size: 1.3rem; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .impact-grid { grid-template-columns: repeat(2, 1fr); }
    .impact-grid > .impact-card-metric { grid-column: span 1; }
    .impact-grid > .impact-progress-container,
    .impact-grid > .impact-table-card { grid-column: 1 / -1; }
    .impact-hero { flex-direction: column; align-items: flex-start; }
    .impact-hero-stats { width: 100%; }
    .impact-hero-stat { flex: 1; }
}

@media (max-width: 768px) {
    .impact-hero { padding: 2rem 1.5rem; text-align: left; }
    .impact-hero-content h2 { font-size: 1.7rem; }
    .impact-hero-content p { font-size: 0.95rem; }
}

@media (max-width: 560px) {
    .impact-grid { gap: 1rem; }
    .impact-card-metric { padding: 1.25rem; }
    .impact-card-metric .icon { width: 46px; height: 46px; font-size: 1.3rem; margin-bottom: 0.85rem; }
    .impact-card-metric .val { font-size: 1.6rem; }
    .impact-hero-stats { flex-direction: column; }
    .impact-progress-container, .impact-table-card, .impact-chart-card { padding: 1.5rem; }
}

/* ---------- E-COMMERCE SURPLUS CARDS ---------- */
.surplus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2rem;
    padding: 1rem 0;
}

.surplus-card {
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.surplus-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: var(--green-400);
}

.surplus-card-img-wrap {
    width: 100%;
    aspect-ratio: 4/5;
    background: var(--neutral-100);
    position: relative;
    overflow: hidden;
}

.surplus-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.surplus-card:hover .surplus-card-img {
    transform: scale(1.05);
}

.surplus-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-500);
    font-size: 0.85rem;
    background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
}

.surplus-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--white);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 2;
}

.surplus-card-badge.transport {
    background: #fef2f2;
    color: #ef4444;
}

.surplus-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.surplus-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-800);
    margin: 0 0 0.25rem 0;
}

.surplus-card-org {
    font-size: 0.85rem;
    color: var(--neutral-500);
    margin: 0 0 1rem 0;
}

.surplus-card-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--green-600);
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.surplus-card-qty {
    font-size: 0.8rem;
    color: var(--neutral-500);
    background: var(--neutral-100);
    padding: 4px 8px;
    border-radius: 6px;
}

/* Modal details */
.product-modal-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

@media (max-width: 768px) {
    .product-modal-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.product-modal-img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 12px;
    background: var(--neutral-100);
}

.product-modal-img-placeholder {
    width: 100%;
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
    color: var(--neutral-500);
    border-radius: 12px;
    font-size: 2rem;
}

.product-modal-info {
    display: flex;
    flex-direction: column;
}

.product-modal-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    color: var(--dark-900);
}

.product-modal-org {
    font-size: 1.1rem;
    color: var(--neutral-500);
    margin: 0 0 2rem 0;
}

.product-modal-meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--neutral-200);
}

.pm-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}

.pm-meta-label {
    color: var(--neutral-500);
    font-weight: 500;
}

.pm-meta-value {
    color: var(--dark-800);
    font-weight: 700;
}

.btn-black {
    background: var(--dark-900);
    color: var(--white);
    padding: 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    transition: background 0.3s;
    cursor: pointer;
    border: none;
    font-size: 1.05rem;
}

.btn-black:hover {
    background: var(--dark-700);
}

.btn-black:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-shop-pay {
    background: #5a31f4;
    color: var(--white);
    padding: 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    transition: background 0.3s;
    cursor: pointer;
    border: none;
    font-size: 1.05rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-shop-pay:hover {
    background: #4625cc;
}

.btn-shop-pay:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- PUBLIC PROFILE MODAL ---------- */
.profile-modal-split {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

.pm-avatar-wrap {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--neutral-100);
    border: 4px solid var(--white);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    margin-top: -60px; /* Pull it up out of the modal content */
    margin-bottom: 1rem;
}

.pm-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--neutral-400);
    background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
}

.profile-modal-content {
    background: var(--white);
    border-radius: 24px;
    padding: 3rem 2rem 2rem 2rem;
    position: relative;
    max-width: 500px;
    width: 100%;
    margin-top: 60px; /* Space for avatar */
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.pm-business-name {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--dark-900);
    margin: 0 0 0.25rem 0;
}

.pm-org-name {
    font-size: 1.1rem;
    color: var(--green-600);
    font-weight: 600;
    margin: 0 0 1.5rem 0;
}

.pm-bio {
    font-size: 1rem;
    color: var(--neutral-600);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 400px;
}

.pm-website {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--blue-500);
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 100px;
    background: rgba(59, 130, 246, 0.05);
    transition: all 0.3s;
}

.pm-website:hover {
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

/* ---------- COMMUNITY SECTION ---------- */
.community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    padding: 1.5rem 0;
}

.community-card {
    background: var(--white);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--neutral-200);
    transition: all 0.4s var(--ease-out);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.community-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--green-400);
}

.community-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(135deg, var(--green-50), var(--green-100));
    z-index: 0;
}

.cc-avatar-wrap {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--white);
    border: 4px solid var(--white);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.cc-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
    color: var(--neutral-500);
    font-size: 2.5rem;
    font-weight: 700;
}

.cc-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--dark-900);
    margin-bottom: 0.5rem;
}

.cc-bio {
    font-size: 0.9rem;
    color: var(--neutral-500);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cc-btn {
    margin-top: auto;
    background: var(--neutral-100);
    color: var(--dark-700);
    padding: 0.6rem 1.25rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.3s;
}

.community-card:hover .cc-btn {
    background: var(--green-600);
    color: var(--white);
}

/* Social links in modal */
.pm-socials {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.pm-social-link {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: var(--neutral-600);
    transition: all 0.3s;
    border: 1px solid #e2e8f0;
}

.pm-social-link:hover {
    transform: translateY(-3px);
    background: var(--white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.pm-social-link.fb:hover {
    color: #1877f2;
    border-color: #1877f2;
}

.pm-social-link.ig:hover {
    color: #e4405f;
    border-color: #e4405f;
}

.btn-pm-action {
    background: var(--green-600);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.2);
}

.btn-pm-action:hover {
    background: var(--green-700);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.25);
}

/* Navigation Badges */
.nav-badge {
  background: #ef4444;
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 8px;
  margin-left: auto;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.messages-section {
  animation: fadeInMessages 0.4s ease-out;
}

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

/* ============================================================
   REVELACTION DASHBOARD — STYLES COMPLÉMENTAIRES
   ============================================================ */

/* Zone principale : fillow-main encapsule le header + contenu */
.fillow-main {
  flex: 1;
  margin-left: 280px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8f9fe;
}

/* Le header est sticky à l'intérieur de fillow-main */
.fillow-main .fillow-header {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  height: 72px;
  background: #ffffff;
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  padding: 0 2rem;
  z-index: 90;
}

/* Bouton sidebar (visible seulement sur mobile) */
.fillow-main .sidebar-toggle {
  color: #475569;
  display: none;
}

/* Côté gauche du header */
.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

/* ── Notifications ── */
.header-notif-wrap {
  position: relative;
}

.header-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: #f1f5f9;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: background 0.2s, color 0.2s;
  min-height: auto;
}
.header-icon-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

/* Point rouge sur la cloche */
.notif-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #fff;
  pointer-events: none;
}

/* Panneau de notifications */
.header-notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  border: 1px solid #f1f5f9;
  z-index: 9999;
  overflow: hidden;
  animation: rv-dropIn 0.2s ease;
}
@keyframes rv-dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.notif-header h4 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}
.notif-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.notif-list {
  max-height: 420px;
  overflow-y: auto;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid #f8fafc;
  cursor: pointer;
  transition: background 0.15s;
  min-height: auto;
}
.notif-item:hover { background: #f8fafc; }
.notif-item.unread {
  background: #f0fdf4;
  border-left: 3px solid #10b981;
  padding-left: calc(1.5rem - 3px);
}
.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
  min-height: auto;
}
.notif-content { flex: 1; min-width: 0; }
.notif-text {
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  color: #1e293b;
  font-weight: 500;
  line-height: 1.4;
}
.notif-time {
  font-size: 0.75rem;
  color: #94a3b8;
}
.notif-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.875rem;
}

/* ── Avatar RevelAction dans le header ── */
.rv-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  min-height: auto;
}

/* ── Onglets (Candidats / Surplus) ── */
.rv-tab {
  font-family: inherit;
  transition: color 0.2s, border-color 0.2s;
  min-height: auto !important;
}
.rv-tab:hover { color: #10b981 !important; }

/* ── Spinner de chargement ── */
.spinner-eco {
  width: 40px;
  height: 40px;
  border: 3px solid #f1f5f9;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spinEco 0.8s linear infinite;
}
@keyframes spinEco {
  to { transform: rotate(360deg); }
}

/* Spinner générique + apparition (pages auth : mot de passe oublié / confirmation email) */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Toast de notification automatique (temps réel) ── */
/* Cycle de vie 5s : apparaît → reste affiché → disparaît */
@keyframes toastLife {
  0%   { opacity: 0; transform: translateY(12px); }
  6%   { opacity: 1; transform: translateY(0); }
  88%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}
@keyframes toastLifeMobile {
  0%   { opacity: 0; transform: translateY(-16px); }
  6%   { opacity: 1; transform: translateY(0); }
  88%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}
.app-toast {
  animation: toastLife 5s ease forwards;
}
/* Mobile : le toast occupe le haut de l'écran, pleine largeur, au-dessus de tout */
@media (max-width: 640px) {
  .app-toast {
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 16px !important;
    padding: 0.9rem 1.1rem !important;
    font-size: 0.92rem !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28) !important;
    animation: toastLifeMobile 5s ease forwards !important;
    z-index: 100000 !important;
  }
  /* Texte secondaire plus discret sur petit écran */
  .app-toast .toast-hint {
    font-size: 0.72rem !important;
  }
}

/* ── Détails utilisateur (sidebar) ── */
.user-details {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.user-details .u-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Responsive mobile ── */
@media (max-width: 768px) {
  .fillow-main {
    margin-left: 0;
  }
  .fillow-main .sidebar-toggle {
    display: flex;
    min-height: auto;
  }
  .fillow-main .header-search {
    display: none;
  }
  .header-notif-dropdown {
    position: fixed !important;
    width: calc(100vw - 2rem) !important;
    max-width: 340px !important;
    right: 1rem !important;
    left: auto !important;
    top: 72px !important;
    z-index: 99999 !important;
  }
  .fillow-main .fillow-inner {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .header-notif-dropdown {
    max-width: calc(100vw - 2rem) !important;
    right: 1rem !important;
  }
}

/* ---------- COOKIE CONSENT MOBILE (fix flexDirection bug) ---------- */
@media (max-width: 600px) {
  div[style*="z-index: 10000"][style*="position: fixed"][style*="bottom: 0"] {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
  }
  div[style*="z-index: 10000"] div[style*="min-width: 300px"] {
    min-width: 0 !important;
  }
  div[style*="z-index: 10000"] div[style*="gap: 0.75rem"][style*="flex-shrink: 0"] {
    width: 100% !important;
    justify-content: center !important;
  }
  div[style*="z-index: 10000"] div[style*="gap: 0.75rem"] button {
    flex: 1 !important;
    text-align: center !important;
  }
}

/* ---------- REGISTER MODAL MOBILE RESPONSIVE ---------- */
@media (max-width: 768px) {
  /* Overlay padding reduction */
  div[style*="z-index: 9999"][style*="position: fixed"][style*="backdrop-filter: blur(8px)"] {
    padding: 1rem !important;
  }
  /* Modal card padding reduction */
  div[style*="padding: 3.5rem"][style*="border-radius: 32px"][style*="max-width: 650px"] {
    padding: 2rem !important;
    border-radius: 24px !important;
  }
  /* Role selector stack */
  div[style*="z-index: 9999"] div[style*="border-radius: 18px"][style*="background: #f8fafc"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  /* Form grid collapse */
  div[style*="z-index: 9999"] form[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Reset span 2 children */
  div[style*="z-index: 9999"] form div[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  /* Submit button span fix */
  div[style*="z-index: 9999"] form button[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  /* Error message span fix */
  div[style*="z-index: 9999"] form p[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  /* Terms modal padding */
  div[style*="padding: 2.5rem"][style*="max-width: 560px"] {
    padding: 1.5rem !important;
  }
}

@media (max-width: 480px) {
  /* Modal card - extra small */
  div[style*="padding: 3.5rem"][style*="border-radius: 32px"][style*="max-width: 650px"] {
    padding: 1.25rem !important;
    border-radius: 20px !important;
  }
  /* Modal title */
  div[style*="z-index: 9999"] h2[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
  }
  /* Terms modal - extra small */
  div[style*="padding: 2.5rem"][style*="max-width: 560px"] {
    padding: 1rem !important;
  }
}

/* ---------- REVIEWS SECTION MOBILE CLAMP ---------- */
@media (max-width: 768px) {
  section[id="avis"] div[style*="max-width: 1280px"][style*="margin: 0px auto"] {
    max-width: 100% !important;
  }
}

/* ============================================================
   AUTH PAGE — RESPONSIVE
   ============================================================ */

/* Tablet: réduire paddings */
@media (max-width: 1024px) {
  .auth-split-left  { padding: 4rem !important; }
  .auth-split-right { flex: 1 !important; padding: 4rem !important; }
}

/* Mobile: masquer le panneau gauche décoratif, formulaire plein écran */
@media (max-width: 768px) {
  .auth-split-wrapper { flex-direction: column !important; }
  .auth-split-left    { display: none !important; }
  .auth-split-right   {
    flex: 1 !important;
    padding: 2.5rem 1.5rem !important;
    min-height: 100vh;
    justify-content: flex-start !important;
  }

  /* Formulaire inscription : 2 col → 1 col, tous les champs empilés pleine largeur.
     On force chaque enfant sur toute la colonne (robuste, sans dépendre du
     format inline de React pour « grid-column: span 2 »). */
  .auth-signup-form {
    grid-template-columns: 1fr !important;
  }
  .auth-signup-form > * {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  /* Sélecteur de rôle : empiler les boutons */
  .auth-role-selector { flex-direction: column !important; }
}

@media (max-width: 480px) {
  .auth-split-right { padding: 2rem 1.25rem !important; }
}

/* Correctif débordement horizontal mobile (flexbox min-width + box-sizing) */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .auth-split-wrapper { overflow-x: hidden; max-width: 100%; }
  .auth-split-right {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* min-width:0 permet aux items flex de rétrécir sous leur min-content
     (sinon le formulaire déborde du panneau) */
  .auth-split-right .animate-up,
  .auth-split-right form,
  .auth-split-right form > div,
  .auth-split-right form > label {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* tous les champs en pleine largeur, padding inclus dans la largeur */
  .auth-split-right input,
  .auth-split-right button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   AUTH — EN-TÊTE VERT DE MARQUE (mobile uniquement)
   ============================================================ */
.auth-mobile-brand { display: none; }
.auth-mobile-features { display: none; }

@media (max-width: 768px) {
  /* Panneau = page mobile claire ; hero vert en haut, formulaire en carte blanche */
  .auth-split-right {
    padding: 0 0 1.75rem !important;
    justify-content: flex-start !important;
    background: #EFF4E6 !important;
  }

  /* ── Hero vert (sans photo, formes décoratives) ── */
  .auth-mobile-brand {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 2.5rem 1.5rem 3.75rem;
    background: linear-gradient(150deg, #002216 0%, #04461F 60%, #0a5a2a 100%);
    color: #fff;
  }
  .auth-mobile-brand::before,
  .auth-mobile-brand::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  }
  .auth-mobile-brand::before {
    width: 210px; height: 210px; bottom: -70px; left: -60px;
    background: radial-gradient(circle, rgba(163, 239, 214, 0.18), transparent 70%);
  }
  .auth-mobile-brand::after {
    width: 130px; height: 130px; top: 28px; right: 26px;
    border: 1.5px solid rgba(221, 247, 88, 0.25);
  }
  .auth-mobile-brand-halo {
    position: absolute; top: -90px; right: -70px;
    width: 230px; height: 230px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(221, 247, 88, 0.25), transparent 70%);
  }
  .auth-mobile-brand-back {
    position: relative; z-index: 1;
    display: inline-block; margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.8); text-decoration: none;
    font-weight: 700; font-size: 0.9rem;
  }
  .auth-mobile-brand-back:hover { color: #fff; }
  .auth-mobile-brand-logo {
    position: relative; z-index: 1;
    display: block; height: 42px; width: auto; margin-bottom: 1rem;
  }
  .auth-mobile-brand-tag {
    position: relative; z-index: 1; margin: 0;
    color: rgba(255, 255, 255, 0.85); font-size: 1rem; line-height: 1.5;
    max-width: 300px; font-weight: 500;
  }

  /* ── Carte blanche du formulaire (chevauche le hero vert) ── */
  .auth-split-right .animate-up {
    position: relative; z-index: 2;
    background: #fff !important;
    width: auto !important;
    max-width: none !important;
    margin: -28px 0.9rem 0 !important;
    padding: 1.6rem 1.25rem 1.75rem !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 32px rgba(0, 34, 22, 0.12);
  }

  /* on masque le titre texte redondant « EcoVilleray IA » (déjà dans le logo) */
  .auth-split-right .animate-up > h3 { display: none !important; }

  /* ── Bandeau de valeurs (3 icônes) ── */
  .auth-mobile-features {
    display: flex; justify-content: space-around; align-items: flex-start;
    gap: 0.5rem; margin: 1.75rem 0.9rem 0;
  }
  .amf-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
    flex: 1; text-align: center;
  }
  .amf-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #04461F;
    border: 1.5px solid rgba(4, 70, 31, 0.12);
    box-shadow: 0 4px 14px rgba(0, 34, 22, 0.07);
  }
  .amf-label { font-size: 0.72rem; font-weight: 700; color: #04461F; }

  /* Alignement pro : tout le contenu du formulaire aligné à gauche
     (neutralise la règle globale « h1,h2 { text-align:center } » en mobile) */
  .auth-split-right h1,
  .auth-split-right h2,
  .auth-split-right h3,
  .auth-split-right p,
  .auth-split-right label,
  .auth-split-right .animate-up { text-align: left !important; }

  /* Titre + sous-titre : hiérarchie nette */
  .auth-split-right .animate-up > div:first-of-type { margin-top: 0.25rem !important; }
  .auth-split-right .animate-up h2 { letter-spacing: -0.01em; }

  /* Liens texte inline (« S'inscrire », « conditions d'utilisation »… ) :
     ils sont des <button> et héritaient à tort des styles génériques de bouton
     (padding 1rem, min-height 48px, width:100%) → retrait/saut de ligne.
     On les remet en vrai lien inline. */
  .auth-split-right .auth-link-btn {
    display: inline !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
  }
  .auth-split-right .animate-up > div > p { line-height: 1.6; }

  /* « Mot de passe oublié ? » : aligné à gauche pour la cohérence */
  .auth-split-right form > div > div[style*="text-align: right"] { text-align: left !important; }

  /* Boutons « afficher / masquer le mot de passe » : ils sont positionnés
     en absolu dans le champ et ne doivent PAS hériter du width:100% générique
     (sinon l'icône œil se centre au milieu du champ). */
  .auth-split-right div[style*="position: relative"] > button {
    width: auto !important;
    min-width: 40px !important;
    max-width: none !important;
    min-height: 40px !important;
    padding: 0.5rem !important;
    right: 6px !important;
  }
}

/* ============================================================
   AUTH PAGE — ACCESSIBILITÉ & UX (calque final, prioritaire)
   ============================================================ */

/* Liens-boutons inline (bascule connexion/inscription, conditions) */
.auth-link-btn {
  display: inline;
  text-align: left;
}
.auth-link-btn:hover { opacity: 0.85; }

/* Focus clavier visible et cohérent sur toute la page auth */
.auth-split-wrapper a:focus-visible,
.auth-split-wrapper button:focus-visible,
.auth-split-wrapper input:focus-visible {
  outline: 3px solid #EB5C07;
  outline-offset: 2px;
  border-radius: 8px;
}
/* Ne pas afficher le contour au clic souris (uniquement clavier) */
.auth-split-wrapper a:focus:not(:focus-visible),
.auth-split-wrapper button:focus:not(:focus-visible) {
  outline: none;
}

/* Barre supérieure mobile : remplacée par le bouton « Accueil » de l'en-tête vert */
@media (max-width: 768px) {
  .auth-mobile-topbar { display: none !important; }
}

/* Anti-zoom iOS : un input < 16px déclenche un zoom auto au focus sur iPhone.
   On force ≥ 16px sur mobile (surclasse les règles 0.95rem plus haut). */
@media (max-width: 768px) {
  .auth-split-right input { font-size: 16px !important; }
  /* Cibles tactiles plus généreuses */
  .auth-split-right input[type="checkbox"] { width: 20px !important; height: 20px !important; }
  .auth-split-right button { min-height: 48px; }
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .auth-split-wrapper *,
  .auth-split-wrapper *::before,
  .auth-split-wrapper *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   REGISTER MODAL — CORRECTIFS RESPONSIVE MANQUANTS
   ============================================================ */

/* Label avec grid-column: span 2 non couvert par les règles existantes */
@media (max-width: 768px) {
  div[style*="z-index: 9999"] form label[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  /* Sélecteur de rôle dans le modal */
  div[style*="z-index: 9999"] > div > div[style*="border-radius: 18px"] {
    flex-direction: column !important;
  }
  /* Réduire le padding externe du modal sur petit écran */
  div[style*="z-index: 9999"][style*="padding: 2rem"] {
    padding: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  /* Titre du modal */
  div[style*="z-index: 9999"] h2[style*="font-size: 2rem"] {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }
  /* Badge "Projet Pilote" */
  div[style*="z-index: 9999"] span[style*="font-size: 0.75rem"] {
    font-size: 0.7rem !important;
  }
  /* Réduire padding du card */
  div[style*="padding: 3.5rem"][style*="border-radius: 32px"] {
    padding: 1.5rem 1.25rem !important;
    border-radius: 20px !important;
  }
}

/* ============================================================
   LANDING PAGE — RESPONSIVE FIXES
   ============================================================ */

/* — Navbar toggle + fond solide sur mobile — */
@media (max-width: 768px) {
  .nav-desktop { display: none !important; }
  .mobile-menu-btn { display: flex !important; }

  /* Fond navbar opaque sur mobile (évite l'effet "invisible") */
  nav[id="navbar"] {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  }
}

/* — Reviews section padding — */
.reviews-section {
  padding: 120px 64px;
}
@media (max-width: 900px) {
  .reviews-section { padding: 80px 32px; }
}
@media (max-width: 600px) {
  .reviews-section { padding: 60px 20px; }
}

/* — Steps section — */
@media (max-width: 900px) {
  #etapes { padding: 80px 32px !important; }
  .steps-header-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .steps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .steps-connecting-line { display: none !important; }
}
@media (max-width: 600px) {
  #etapes { padding: 60px 20px !important; }
  .steps-grid { grid-template-columns: 1fr !important; }
}

/* — Impacts bento grid — */
@media (max-width: 1024px) {
  #impacts { padding: 80px 32px !important; }
  .bento-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .bento-a { grid-column: 1 / 3 !important; grid-row: auto !important; }
  .bento-b { grid-column: 1 !important;     grid-row: auto !important; }
  .bento-c { grid-column: 2 !important;     grid-row: auto !important; }
  .bento-d { grid-column: 1 / 3 !important; grid-row: auto !important; }
  .bento-e { grid-column: 1 !important;     grid-row: auto !important; }
  .bento-f { grid-column: 2 !important;     grid-row: auto !important; }
  .bento-g {
    grid-column: 1 / 3 !important;
    grid-row: auto !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .bento-h { grid-column: 1 / 3 !important; grid-row: auto !important; }
}
@media (max-width: 600px) {
  #impacts { padding: 60px 20px !important; }
  .bento-grid { grid-template-columns: 1fr !important; }
  .bento-a, .bento-b, .bento-c,
  .bento-d, .bento-e, .bento-f,
  .bento-g, .bento-h {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* ============================================================
   DASHBOARDS — RESPONSIVE FIXES COMPLÉMENTAIRES
   ============================================================ */

/* ── Header RevelactionDashboard sur mobile ── */
@media (max-width: 991px) {
  .fillow-main .fillow-header {
    padding: 0 1rem !important;
    height: 60px !important;
  }
  .fillow-main .fillow-inner {
    padding: 1rem !important;
  }
}

/* ── Grilles inline "1fr 1fr" dans RevelactionDashboard ── */
@media (max-width: 768px) {
  /* Overview section : candidats récents + demandes de placement */
  .fillow-main div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Formulaire candidat dans modal */
  .fillow-main form div[style*="grid-template-columns: 1fr 1fr"],
  .fillow-main > * div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Hero RevelactionDashboard : boutons CTA */
  .fillow-main div[style*="display: flex"][style*="gap: 1rem"] .btn {
    flex: 1 !important;
    min-width: 0 !important;
  }
  /* Titre header raccourci sur petit écran */
  .fillow-main .header-title {
    font-size: 1rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px !important;
  }
}

/* ── Dashboard commerçant (fillow-content) ── */
@media (max-width: 768px) {
  /* fillow-content padding-top doit correspondre à la hauteur du header réduit */
  .fillow-content {
    padding-top: 80px !important;
  }
  /* fillow-inner padding */
  .fillow-inner {
    padding: 1rem !important;
  }
  /* hero actions dans la grille dashboard */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  /* Réduire encore la hero card */
  .hero-gradient-card h1 {
    font-size: 1.3rem !important;
  }
  .hero-gradient-inner-box {
    padding: 1.25rem 0.75rem !important;
  }
  /* Heatmap scrollable sur très petit écran */
  .heatmap-grid {
    font-size: 0.6rem !important;
    gap: 2px !important;
  }
  /* Grilles dans les sections settings RevelactionDashboard */
  .fillow-main div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   TABLE RESPONSIVE → CARDS (surplus section)
   ============================================================ */
@media (max-width: 768px) {
  /* Masquer les en-têtes de colonne */
  .f-table-responsive thead {
    display: none;
  }

  /* Chaque ligne devient une carte */
  .f-table-responsive,
  .f-table-responsive tbody,
  .f-table-responsive tr,
  .f-table-responsive td {
    display: block;
    width: 100%;
  }

  .f-table-responsive tr {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  /* Chaque cellule sur une ligne avec label à gauche */
  .f-table-responsive td {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    border-radius: 0;
    box-shadow: none;
  }

  .f-table-responsive td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Label auto via data-label */
  .f-table-responsive td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #94a3b8;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 85px;
    flex-shrink: 0;
    padding-top: 3px;
    line-height: 1.3;
  }

  /* Cellule photo : pas de label, image centrée */
  .f-table-responsive td.td-photo {
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: 0.75rem;
  }
  .f-table-responsive td.td-photo::before {
    display: none;
  }
  .f-table-responsive td.td-photo img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 14px !important;
  }

  /* Cellule colSpan (état vide) */
  .f-table-responsive td[colspan] {
    border-bottom: none;
    padding: 1.5rem 0.5rem;
  }
  .f-table-responsive td[colspan]::before {
    display: none;
  }

  /* Boutons d'action : pleine largeur */
  .f-table-responsive td[data-label="Actions"] > div,
  .f-table-responsive td[data-label="Actions"] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .f-table-responsive td[data-label="Actions"] button,
  .f-table-responsive td[data-label="Actions"] .btn-premium-action,
  .f-table-responsive td[data-label="Actions"] .premium-tab {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Cellules sans étiquette : pas d'espace vide réservé (le contenu prend toute la largeur) */
  .f-table-responsive td:not([data-label]):not(.td-photo)::before { display: none; }
  .f-table-responsive td:not([data-label]):not(.td-photo) { gap: 0; }

  /* Onglets « Gestion des Surplus » : défilement horizontal sans débordement */
  .rv-surplus-tabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; gap: 0.25rem !important; }
  .rv-surplus-tabs::-webkit-scrollbar { display: none; }
  .rv-surplus-tabs button { white-space: nowrap; flex-shrink: 0; padding: 0.7rem 0.9rem !important; font-size: 0.85rem !important; }

  /* En-tête « Gestion des Surplus » : titre + bouton empilés */
  .rv-surplus-head { flex-direction: column; align-items: stretch !important; gap: 1rem; margin-bottom: 1.5rem !important; }
  .rv-surplus-head h3 { font-size: 1.4rem !important; }
  .rv-surplus-head > button { width: 100%; justify-content: center; }
}

/* ============================================================
   FAB CAMÉRA — MOBILE UNIQUEMENT
   ============================================================ */

/* Caché sur desktop */
.mobile-camera-fab {
  display: none;
}

@media (max-width: 768px) {
  .mobile-camera-fab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 950;
    box-shadow:
      0 6px 20px rgba(16, 185, 129, 0.5),
      0 2px 6px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease;
    /* Évite le min-height: 44px global */
    min-height: auto !important;
  }

  .mobile-camera-fab:active {
    transform: scale(0.90) !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.4) !important;
  }

  /* Label "Surplus" sous l'icône */
  .fab-label {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    min-height: auto !important;
    line-height: 1;
  }

  /* Anneau de pulsation */
  .fab-pulse-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, 0.55);
    animation: fabRingPulse 2.2s ease-out infinite;
    pointer-events: none;
  }

  @keyframes fabRingPulse {
    0%   { transform: scale(1);    opacity: 0.7; }
    70%  { transform: scale(1.25); opacity: 0;   }
    100% { transform: scale(1.25); opacity: 0;   }
  }
}

@media (max-width: 480px) {
  .mobile-camera-fab {
    width: 62px;
    height: 62px;
    bottom: 80px;
    right: 16px;
  }
}

/* ========== Responsive mobile — Gestion des Surplus & formulaire ========== */

/* Onglets surplus (Revelaction) : défilement horizontal au lieu de déborder */
.rv-surplus-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rv-surplus-tabs::-webkit-scrollbar { display: none; }
.rv-surplus-tabs .rv-tab { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 768px) {
  /* Onglets compacts */
  .rv-surplus-tabs { gap: 0.25rem !important; margin-bottom: 1.5rem !important; }
  .rv-surplus-tabs .rv-tab { padding: 0.7rem 0.85rem !important; font-size: 0.82rem !important; }

  /* Modal de formulaire : confortable + scroll vertical sur petits écrans */
  .f-modal-content { width: 94%; padding: 1.5rem !important; border-radius: 20px !important; max-height: 90vh; }
  .f-modal-header h3 { font-size: 1.2rem; }

  /* Graphes de l'aperçu surplus : empilés */
  .nx-surplus-charts { grid-template-columns: 1fr !important; }

  /* Tableaux surplus : scroll horizontal fluide, pas d'écrasement des colonnes */
  .f-table-wrap { -webkit-overflow-scrolling: touch; }
  .f-table { min-width: 560px; }
}

@media (max-width: 480px) {
  .f-modal-content { padding: 1.15rem !important; }
  .f-modal-header h3 { font-size: 1.1rem; }
  .rv-surplus-tabs .rv-tab { padding: 0.6rem 0.7rem !important; font-size: 0.78rem !important; }
}

/* ============================================================
   REVEL-SKIN — Dashboard commerçant repris au design Revelaction
   (palette NX : vert forêt, argelo, électrique, crème)
   Scopé sous .revel-skin pour n'affecter QUE le dashboard commerce.
   ============================================================ */
.revel-skin {
  --rv-night: #002216;
  --rv-forest: #04461F;
  --rv-argelo: #EB5C07;
  --rv-electric: #DDF758;
  --rv-cream: #EEEADD;
  --rv-ink: #002216;
  --rv-inksoft: #5f7068;
  --rv-line: rgba(4,70,31,0.09);
}

/* Fond crème de la zone de contenu */
.revel-skin .fillow-content,
.revel-skin .fillow-inner { background: var(--rv-cream); }

/* Desktop : compacter le tableau de bord pour qu'il tienne mieux à l'écran */
@media (min-width: 992px) {
  .revel-skin .fillow-inner { zoom: 0.9; padding: 1.75rem 2rem; }
}
@media (min-width: 1500px) {
  .revel-skin .fillow-inner { zoom: 0.94; }
}

/* ── Sidebar : vert forêt sombre ── */
.revel-skin .fillow-sidebar { background: var(--rv-night); border-right: none; }
.revel-skin .f-logo, .revel-skin .u-name { color: #fff; }
.revel-skin .f-logo-icon { background: var(--rv-argelo); color: #fff; border-radius: 10px; }
.revel-skin .f-sublogo, .revel-skin .u-email, .revel-skin .f-copyright { color: rgba(255,255,255,0.4); }
.revel-skin .f-nav { padding: 0.5rem 0; }
.revel-skin .nav-item a {
  color: rgba(255,255,255,0.6);
  border-radius: 10px;
  margin: 2px 14px;
  padding: 0.72rem 1rem;
  font-weight: 600;
}
.revel-skin .nav-item a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.revel-skin .nav-item.active a {
  color: #fff;
  background: rgba(255,255,255,0.1);
  border-right: none;
  position: relative;
}
.revel-skin .nav-item.active a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 24px;
  background: var(--rv-argelo);
  border-radius: 0 3px 3px 0;
}
.revel-skin .sidebar-user { border-top: 1px solid rgba(255,255,255,0.08); }
.revel-skin .up-text { color: rgba(255,255,255,0.7); }
.revel-skin .up-bar { background: rgba(255,255,255,0.12); }
.revel-skin .up-fill { background: var(--rv-electric); }

/* ── Header : clair (crème/blanc), texte encre ── */
.revel-skin .fillow-header {
  background: #fff;
  color: var(--rv-ink);
  border-bottom: 1px solid var(--rv-line);
}
.revel-skin .fillow-header .h-left h2 { color: var(--rv-ink); }
.revel-skin .sidebar-toggle { color: var(--rv-ink); }
.revel-skin .h-search { background: rgba(0,34,22,0.055); }
.revel-skin .h-search input { color: var(--rv-ink); }
.revel-skin .h-search input::placeholder { color: var(--rv-inksoft); }
.revel-skin .h-icon-btn { background: rgba(0,34,22,0.055); color: var(--rv-ink); }
.revel-skin .h-icon-btn:hover { background: rgba(0,34,22,0.1); }
.revel-skin .header-avatar-mini { border-color: var(--rv-line); }

/* ── Cartes : style nx-card (18px, ombres douces, bordure fine) ── */
.revel-skin .f-card,
.revel-skin .premium-content-body {
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0,34,22,0.05), 0 4px 18px rgba(0,34,22,0.04);
  border: 1px solid var(--rv-line);
}
.revel-skin .metric-card {
  border-radius: 18px !important;
  border: 1px solid var(--rv-line);
  box-shadow: 0 1px 3px rgba(0,34,22,0.05), 0 4px 18px rgba(0,34,22,0.04);
}
/* Carte hero : dégradé forêt → argelo */
.revel-skin .hero-gradient-card {
  background: linear-gradient(135deg, #002216 0%, #04461F 55%, #EB5C07 100%) !important;
  box-shadow: 0 25px 50px rgba(0,34,22,0.22) !important;
  border-radius: 18px;
}

/* ── Onglets premium : style nx ── */
.revel-skin .premium-tab { border-radius: 12px; }
.revel-skin .premium-tab.active {
  background: var(--rv-night);
  color: var(--rv-electric);
  border-color: var(--rv-night);
}

/* ── Boutons principaux : style nx-cta (vert forêt + électrique) ── */
.revel-skin .btn-premium-action,
.revel-skin .btn-primary-eco {
  background: var(--rv-night);
  color: var(--rv-electric);
  border: none;
}
.revel-skin .btn-premium-action:hover,
.revel-skin .btn-primary-eco:hover { opacity: 0.9; background: var(--rv-night); }

/* ── Hero card : redesign premium ── */
.revel-skin .hero-gradient-inner-box {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 22px;
  padding: 2.75rem 2.5rem;
  text-align: left;
}
.revel-skin .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(221,247,88,0.16);
  color: #DDF758;
  border: 1px solid rgba(221,247,88,0.35);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  margin-bottom: 1.15rem;
}
.revel-skin .hero-gradient-card h1 {
  font-size: 2.5rem;
  line-height: 1.12;
  margin-bottom: 0.9rem;
}
.revel-skin .hero-gradient-card p {
  font-size: 1.02rem;
  max-width: 470px;
  margin-bottom: 2rem;
}
.revel-skin .hero-actions { justify-content: flex-start; flex-wrap: wrap; }
.revel-skin .hero-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
}
/* Bouton principal : électrique sur encre */
.revel-skin .hero-actions .btn-orange { background: #DDF758; color: #002216; }
.revel-skin .hero-actions .btn-orange:hover { background: #d2ef3f; transform: translateY(-2px); }
/* Bouton secondaire : verre dépoli */
.revel-skin .hero-actions .btn-outline-white {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
}
.revel-skin .hero-actions .btn-outline-white:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }

@media (max-width: 600px) {
  .revel-skin .hero-gradient-card h1 { font-size: 1.7rem; }
  .revel-skin .hero-gradient-inner-box { padding: 1.75rem 1.35rem; }
}

/* Indice badge sous la progression impact (sidebar sombre) */
.revel-skin .up-badge-hint {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
  margin: 0.55rem 0 0;
  line-height: 1.35;
}

/* ── Étape 1 : photo proéminente du formulaire de surplus ── */
.surplus-photo-step { margin-bottom: 1.75rem; }
.sps-cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 2.25rem 1.25rem;
  background: #f0fdf4;
  border: 2px dashed #16a34a;
  border-radius: 18px;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.sps-cta:hover { background: #ecfdf5; border-color: #15803d; transform: translateY(-1px); }
.sps-cta:disabled { opacity: 0.7; cursor: default; transform: none; }
.sps-cta-icon { font-size: 2.1rem; line-height: 1; }
.sps-cta-title { font-size: 1.05rem; font-weight: 800; color: #15803d; }
.sps-cta-sub { font-size: 0.82rem; color: #64748b; max-width: 380px; line-height: 1.4; }
.sps-analyzing { margin: 0.65rem 0 0; color: #2563eb; font-size: 0.85rem; font-weight: 600; text-align: center; }
.sps-preview { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid #16a34a; }
.sps-preview img { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.sps-remove {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; min-height: auto;
  border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
  border: none; cursor: pointer; font-size: 1.15rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.sps-preview-cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.85rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.sps-preview-cap span { color: #fff; font-size: 0.82rem; font-weight: 700; }
.sps-preview-cap button {
  background: rgba(255,255,255,0.92); color: #15803d;
  border: none; border-radius: 8px; padding: 0.3rem 0.75rem;
  font-size: 0.75rem; font-weight: 700; cursor: pointer; min-height: auto;
}

/* ── Dashboard commerçant : finitions responsive mobile ── */
@media (max-width: 768px) {
  /* Cartes de section (Surplus / Recrutement / Impact / Paramètres) : padding 3rem trop grand */
  .dashboard-eco .f-card[style*="padding: 3rem"] { padding: 1.25rem !important; }
  /* Formulaire Paramètres : champs pleine largeur, lignes empilées */
  .dashboard-eco .f-form-row { grid-template-columns: 1fr !important; }
  .dashboard-eco .f-form-group[style*="max-width"] { max-width: 100% !important; }
}
@media (max-width: 480px) {
  .dashboard-eco .f-card[style*="padding: 3rem"] { padding: 1rem !important; }
  .dashboard-eco .fillow-inner { padding: 0 !important; }
}

/* ── RegisterModal « Rejoindre l'aventure » : bouton fermer + responsive ── */
.rm-close:active { transform: scale(0.92) !important; }
@media (max-width: 600px) {
  .rm-panel { padding: 26px 18px !important; border-radius: 22px !important; }
  .rm-panel h2 { font-size: 26px !important; padding-right: 44px !important; }
  .rm-close { top: 12px !important; right: 12px !important; width: 42px !important; height: 42px !important; }
}

/* ============================================================
   DASHBOARD — POLISH MOBILE (cibles tactiles + espacements + écrans)
   Calque final, scopé .dashboard-eco — additif, n'affecte pas le desktop.
   ============================================================ */
@media (max-width: 768px) {
  /* ── En-tête : plus net, recentré, recherche masquée (place au titre) ── */
  .dashboard-eco .fillow-header { gap: 0.5rem; align-items: center; }
  .dashboard-eco .h-search { display: none !important; }
  .dashboard-eco .h-left h2 { font-size: 1.15rem; line-height: 1.2; }
  .dashboard-eco .h-icons { gap: 0.35rem; }

  /* Cloche + badge plus compacts */
  .dashboard-eco .h-icon-btn { width: 30px; height: 30px; border-radius: 7px; }
  .dashboard-eco .h-icon-btn svg { width: 17px; height: 17px; }
  .dashboard-eco .h-icon-btn .badge {
    top: -4px; right: -4px;
    min-width: 13px; height: 13px;
    padding: 0 2px;
    font-size: 7.5px; font-weight: 800; line-height: 1;
    border-radius: 100px;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
  }

  /* ── Cibles tactiles ≥ 44px ── */
  .dashboard-eco .sidebar-toggle,
  .dashboard-eco .h-icon-btn {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
  }
  .dashboard-eco .h-icon-btn:active,
  .dashboard-eco .sidebar-toggle:active { background: rgba(0,0,0,0.06); }

  /* Liens de navigation : plus hauts et plus aérés au pouce */
  .dashboard-eco .nav-list .nav-item a {
    min-height: 50px;
    padding-top: 0.7rem; padding-bottom: 0.7rem;
    font-size: 1rem;
  }

  /* Boutons : hauteur tactile minimale, plein largeur quand seuls dans une pile */
  .dashboard-eco .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .dashboard-eco .btn-icon,
  .dashboard-eco .btn-close { min-width: 44px; min-height: 44px; }

  /* ── Espacements de contenu cohérents ── */
  .dashboard-eco .fillow-content { padding: 84px 0.9rem 1.25rem; }
  .dashboard-eco .f-card { padding: 1.15rem; border-radius: 18px; margin-bottom: 0; }
  .dashboard-eco .f-section > h3,
  .dashboard-eco .f-section-title { font-size: 1.25rem; }

  /* Notifications : ne jamais déborder de l'écran */
  .dashboard-eco .notification-dropdown {
    width: min(420px, calc(100vw - 18px)) !important;
    right: 9px !important;
    left: auto !important;
  }

  /* ── ACCUEIL / Vue d'ensemble ── */
  .dashboard-eco .f-mini-stats,
  .dashboard-eco .f-stats-grid { gap: 0.85rem; }
  .dashboard-eco .f-hero { padding: 1.5rem 1.25rem; }
  .dashboard-eco .f-hero h1 { font-size: 1.5rem; line-height: 1.2; }

  /* ── SURPLUS : cartes en 1 colonne dès la tablette étroite ── */
  .dashboard-eco .surplus-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* ── COMMUNAUTÉ : 1 colonne ── */
  .dashboard-eco .community-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* ── MESSAGES : chat plein écran, saisie confortable ── */
  .dashboard-eco .messages-section > .f-card:last-child { min-height: 60vh; }
  .dashboard-eco .messages-section input[type="text"] { min-height: 46px; font-size: 16px; } /* 16px = anti-zoom iOS */
  .dashboard-eco .messages-section .btn-premium-action,
  .dashboard-eco .messages-section button { min-height: 46px; }
}

@media (max-width: 480px) {
  /* Garde le dégagement bas pour ne pas masquer le contenu (ex: saisie des messages)
     derrière la tabbar fixe du bas. */
  .dashboard-eco .fillow-content { padding: 80px 0.75rem calc(96px + env(safe-area-inset-bottom)); }
  .dashboard-eco .f-card { padding: 1rem; border-radius: 16px; }
  .dashboard-eco .h-left h2 { font-size: 1.05rem; }
  /* Bulles de message un peu plus larges sur très petit écran */
  .dashboard-eco .messages-section div[style*="max-width: 70%"] { max-width: 88% !important; }
}

/* ════════════════════════════════════════════════
   DASHBOARD — Barre d'onglets mobile (style app)
   ════════════════════════════════════════════════ */
.mobile-tabbar { display: none; }
.mobile-impact-bar { display: none; }

@media (max-width: 991px) {
  .mobile-tabbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    background: #fff;
    border-top: 1px solid #e7efe5;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 28px rgba(0, 34, 22, 0.07);
  }

  /* Barre de progression Impact — ligne fine moderne en haut de la barre d'onglets */
  .mobile-impact-bar {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(4, 70, 31, 0.08);
    overflow: hidden;
  }
  .mobile-impact-fill {
    height: 100%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, #04461F 0%, #0a5a2a 55%, #DDF758 100%);
    box-shadow: 0 0 8px rgba(221, 247, 88, 0.5);
    transition: width 0.6s cubic-bezier(.22,1,.36,1);
  }
  .mtab {
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #8a9a90;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 4px 0;
    min-width: 0;
    transition: color 0.2s ease;
  }
  .mtab > span:last-child {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mtab.active { color: #04461F; }
  .mtab-badge {
    position: absolute;
    top: -6px; right: -10px;
    background: #EB5C07;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    min-width: 15px; height: 15px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
  }
  /* Bouton central « Capturer » surélevé */
  .mtab-center { color: #04461F; }
  .mtab-cap {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: linear-gradient(150deg, #04461F 0%, #0a5a2a 100%);
    color: #DDF758;
    display: flex; align-items: center; justify-content: center;
    margin-top: -26px;
    border: 4px solid #fff;
    box-shadow: 0 10px 22px rgba(4, 70, 31, 0.35);
    transition: transform 0.15s ease;
  }
  .mtab-center:active .mtab-cap { transform: scale(0.94); }

  /* Espace en bas pour ne pas masquer le contenu sous la barre */
  .dashboard-eco .fillow-inner,
  .dashboard-eco .fillow-content { padding-bottom: 92px !important; }

  /* Ancien FAB caméra masqué (remplacé par l'onglet « Capturer ») */
  .mobile-camera-fab { display: none !important; }
}

/* ════════════════════════════════════════════════
   GESTION SURPLUS — pile de cartes « style Tinder » (mobile)
   ════════════════════════════════════════════════ */
.surplus-swipe-mobile { display: none; }

/* ── Onglet « Livrés » : cartes mobiles ── */
.livres-cards-mobile { display: none; }
.livre-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.livre-card-top { display: flex; gap: 0.85rem; align-items: center; }
.livre-card-top img, .livre-card-ph {
  width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0;
}
.livre-card-ph { background: #f0fdf4; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.livre-card-info { min-width: 0; flex: 1; }
.livre-card-info h4 { margin: 0 0 0.2rem; font-size: 1rem; font-weight: 800; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livre-card-role { font-size: 0.8rem; color: #64748b; }
.livre-card-meta { display: flex; gap: 0.6rem; margin-top: 0.75rem; }
.livre-card-meta span { flex: 1; background: #f8fafc; border-radius: 10px; padding: 0.5rem 0.7rem; font-size: 0.85rem; font-weight: 700; color: #0f172a; }
.livre-card-meta b { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: #94a3b8; font-weight: 800; margin-bottom: 0.15rem; }
.livre-card-badge {
  margin-top: 0.75rem; text-align: center; font-size: 0.82rem; font-weight: 700; color: #059669;
  background: #f0fdf4; border: 1px solid #86efac; border-radius: 10px; padding: 0.55rem;
}
.livre-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; padding: 2.5rem 1rem; color: #94a3b8; }
.livre-empty p { margin: 0; font-size: 0.95rem; }

/* ── Photo de profil (Paramètres) — avatar tappable + responsive ── */
.profile-photo-group { max-width: 400px; }
.profile-photo-row { display: flex; align-items: center; gap: 1.25rem; }
.profile-photo-avatar {
  position: relative; width: 96px; height: 96px; border: none; padding: 0;
  background: none; cursor: pointer; flex-shrink: 0; transition: transform 0.1s ease;
}
.profile-photo-avatar img {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); display: block;
}
.profile-photo-badge {
  position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%;
  background: #10b981; color: #fff; font-size: 0.95rem; display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.profile-photo-avatar:active { transform: scale(0.96); }
.profile-photo-avatar:disabled { opacity: 0.6; cursor: not-allowed; }
.profile-photo-btn {
  padding: 0.6rem 1.1rem; font-size: 0.85rem; font-weight: 700; border-radius: 10px;
  background: var(--green-600); color: #fff; border: none; cursor: pointer;
}
.profile-photo-btn:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 768px) {
  .profile-photo-group { max-width: 100%; }
  .profile-photo-row { flex-direction: column; text-align: center; gap: 1rem; }
  .profile-photo-avatar, .profile-photo-avatar img { width: 112px; height: 112px; }
  .profile-photo-text { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .profile-photo-btn { width: 100%; max-width: 300px; padding: 0.85rem; }
}

@media (max-width: 991px) {
  .surplus-table-desktop { display: none !important; }
  .surplus-swipe-mobile { display: block; }
  .livres-table-desktop { display: none !important; }
  .livres-cards-mobile { display: flex; flex-direction: column; gap: 0.85rem; }

  .sss-wrap { padding: 0.5rem 0 0.25rem; }
  .sss-stack { position: relative; max-width: 380px; margin: 0 auto; }
  .sss-card {
    position: absolute; top: 0; left: 0; width: 100%;
    background: #fff; border-radius: 22px; overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 34, 22, 0.16);
    border: 1px solid rgba(4, 70, 31, 0.06);
    touch-action: pan-y;
    user-select: none;
  }
  .sss-stack > .sss-card:last-child { position: relative; cursor: grab; }
  .sss-stack > .sss-card:last-child:active { cursor: grabbing; }

  .sss-photo { position: relative; height: 190px; background: #0a2c18; }
  .sss-photo img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
  .sss-photo-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: rgba(255,255,255,0.5); }
  .sss-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 5px 12px; border-radius: 100px;
    font-size: 0.72rem; font-weight: 800; color: #fff;
    backdrop-filter: blur(6px);
  }
  .sss-badge.ok { background: rgba(4, 70, 31, 0.92); }
  .sss-badge.pending { background: rgba(180, 83, 9, 0.92); }
  .sss-qty {
    position: absolute; top: 12px; right: 12px;
    padding: 5px 12px; border-radius: 100px;
    background: rgba(255, 255, 255, 0.92); color: #04461F;
    font-size: 0.72rem; font-weight: 800;
  }
  .sss-transport {
    position: absolute; bottom: 10px; left: 12px;
    padding: 4px 10px; border-radius: 100px;
    background: rgba(180, 83, 9, 0.92); color: #fff;
    font-size: 0.68rem; font-weight: 700;
  }
  /* Bouton « Commander » conservé sur la carte swipe */
  .sss-order-btn {
    width: 100%; padding: 0.9rem; border: none; border-radius: 14px;
    background: #04461F; color: #fff; font-weight: 800; font-size: 0.92rem;
    cursor: pointer; transition: background .2s ease, transform .12s ease;
  }
  .sss-order-btn:hover { background: #002216; }
  .sss-order-btn:active { transform: scale(0.98); }
  .sss-order-disabled {
    width: 100%; padding: 0.85rem; border-radius: 14px; text-align: center;
    background: #f1f5f9; color: #64748b; font-weight: 700; font-size: 0.85rem;
  }

  .sss-body { padding: 1.1rem 1.25rem 1.25rem; }
  .sss-title { margin: 0 0 0.75rem; font-size: 1.5rem; font-weight: 900; color: #002216; font-family: 'Chillax', sans-serif; }
  .sss-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.1rem; }
  .sss-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eef3ea; }
  .sss-row:last-child { border-bottom: none; padding-bottom: 0; }
  .sss-row span { color: #7a8b82; font-weight: 600; }
  .sss-row b { color: #04461F; font-weight: 700; }

  .sss-actions { display: flex; gap: 0.6rem; }
  .sss-btn { flex: 1; padding: 0.85rem; border-radius: 14px; font-weight: 800; font-size: 0.85rem; cursor: pointer; border: none; transition: transform .12s ease; }
  .sss-btn:active { transform: scale(0.97); }
  .sss-btn-ghost { background: #002216; color: #DDF758; }
  .sss-btn-danger { background: #fff1f2; color: #dc2626; border: 1px solid #fecaca; flex: 0 0 auto; padding-left: 1.1rem; padding-right: 1.1rem; }

  /* tampons de swipe */
  .sss-stamp {
    position: absolute; top: 18px; z-index: 6;
    font-size: 1.4rem; font-weight: 900; letter-spacing: 0.08em;
    padding: 6px 14px; border-radius: 12px; border: 3px solid currentColor;
    text-transform: uppercase; pointer-events: none;
  }
  .sss-stamp-keep { right: 18px; color: #04461F; transform: rotate(12deg); }
  .sss-stamp-skip { left: 18px; color: #dc2626; transform: rotate(-12deg); }

  .sss-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.1rem; }
  .sss-nav {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(4,70,31,0.15);
    background: #fff; color: #04461F; font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,34,22,0.06);
  }
  .sss-counter { font-size: 0.85rem; font-weight: 800; color: #04461F; min-width: 56px; text-align: center; }
  .sss-hint { text-align: center; font-size: 0.74rem; color: #8a9a90; margin: 0.6rem 0 0; }
  .sss-empty { text-align: center; padding: 3rem 1rem; color: #8a9a90; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }

  /* la carte de section perd son gros padding sur mobile pour laisser place à la pile */
  .dashboard-eco .surplus-section-card { padding: 0 !important; }

  /* Correctif débordement : laisser le contenu rétrécir à la largeur de l'écran
     (.fillow-main-content est flex:1 avec min-width:auto → bloque le shrink) */
  .dashboard-eco .fillow-main-content { min-width: 0 !important; }
  .dashboard-eco .fillow-content,
  .dashboard-eco .fillow-inner,
  .dashboard-eco .premium-content-body,
  .dashboard-eco .surplus-section-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Onglet « Disponibles » : image moins haute pour voir toute la carte
     (titre, quantité et bouton Commander) sans devoir scroller */
  .dashboard-eco .surplus-card-img-wrap { aspect-ratio: 16 / 11 !important; }
}

/* Bouton « Commander » sur les cartes Disponibles (desktop + mobile) */
.surplus-card-order {
  margin-top: 0.9rem;
  width: 100%;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 12px;
  background: #04461F;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: background 0.2s ease, transform 0.12s ease;
}
.surplus-card-order:hover { background: #002216; }
.surplus-card-order:active { transform: scale(0.98); }

/* ════════════════════════════════════════════════
   DASHBOARD — Dropdown notifications (mobile)
   Panneau pleine largeur, centré, contenu défilant,
   boutons d'action qui ne débordent jamais.
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dashboard-eco .notification-dropdown {
    position: fixed !important;
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    width: auto !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    border-radius: 22px !important;
    /* évite le recalcul/jitter et fige le rendu */
    will-change: auto !important;
    animation: none !important;
  }
  /* en-tête + items plus compacts */
  .dashboard-eco .notification-dropdown > div:first-child { padding: 0.8rem 1rem !important; }
  .dashboard-eco .notification-dropdown > div:first-child h4 { font-size: 0.95rem !important; }
  .dashboard-eco .notification-dropdown .notif-list { max-height: none !important; }
  .dashboard-eco .notification-dropdown .notif-list > div { padding: 0.8rem 1rem !important; }
  /* Boutons d'action (Approuver / Rejeter / Accepter…) : pleine largeur empilée
     sur mobile → cible tactile fiable, jamais de débordement hors de l'écran */
  .dashboard-eco .notification-dropdown .notif-list button {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.85rem !important;
    padding: 0.7rem 1rem !important;
    white-space: normal !important;
    text-align: center;
  }
  /* Onglets (Toutes / Non lues / Mentions) : 3 colonnes égales, sans débordement */
  .dashboard-eco .notification-dropdown .notif-tabs { gap: 0.35rem !important; padding: 0.7rem 0.8rem 0.5rem !important; }
  .dashboard-eco .notification-dropdown .notif-tabs > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center !important;
    padding: 0.45rem 0.35rem !important;
    font-size: 0.74rem !important;
    gap: 0.3rem !important;
    white-space: nowrap !important;
  }
  /* Bouton fermer : cercle parfait + grande cible tactile, bien visible.
     On force un carré (width = height, aspect-ratio) sinon le flex/line-height
     l'étire en ovale, et on neutralise tout padding/min-height global. */
  .dashboard-eco .notification-dropdown > div:first-child button[aria-label="Fermer"],
  .dashboard-eco .notif-page-card > div:first-child button[aria-label="Fermer"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    font-size: 1.25rem !important;
    flex: 0 0 auto !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  }
  .dashboard-eco .notif-page-card > div:first-child button[aria-label="Fermer"]:active {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: scale(0.92);
  }
}

/* ════════════════════════════════════════════════
   DASHBOARD — Logo applicatif centré (mobile)
   ════════════════════════════════════════════════ */
.dashboard-header-logo { display: none; }

@media (max-width: 991px) {
  /* logo centré dans l'en-tête (le header est déjà position:fixed → contexte OK) */
  .dashboard-eco .dashboard-header-logo {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 36px;
    width: auto;
    border-radius: 9px;
    pointer-events: none;
  }
  /* le titre de section laisse la place au logo (la section reste indiquée par la barre d'onglets) */
  .dashboard-eco .fillow-header .h-left h2 { display: none; }
}

/* ════════════════════════════════════════════════
   DASHBOARD — Détail notification en « mini carte » (mobile)
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .fiche-mini {
    max-width: min(400px, calc(100vw - 24px)) !important;
    width: calc(100vw - 24px) !important;
    border-radius: 22px !important;
  }
  /* En-tête vert + corps : paddings réduits mais lisibles */
  .fiche-mini > div { padding: 1.35rem !important; }
  .fiche-mini h3 { font-size: 1.25rem !important; }
  .fiche-mini h4 { font-size: 1.15rem !important; }
  .fiche-mini p { font-size: 0.9rem !important; }
  /* vignette produit plus petite */
  .fiche-mini [style*="width: 100px"] { width: 64px !important; height: 64px !important; border-radius: 14px !important; }
  /* carte rendez-vous compacte */
  .fiche-mini .order-schedule-card { padding: 1rem !important; }
  .fiche-mini .order-schedule-card [style*="font-size: 1.25rem"] { font-size: 1rem !important; line-height: 1.3 !important; }
  /* gaps internes resserrés */
  .fiche-mini > div:last-child { gap: 1.25rem !important; }
  /* boutons d'action empilés en pleine largeur (au lieu de 3 en ligne cramés) */
  .fiche-mini [style*="gap: 1rem"][style*="margin-top: 1rem"] { flex-direction: column !important; }
  .fiche-mini [style*="gap: 1rem"][style*="margin-top: 1rem"] > button { width: 100% !important; flex: none !important; }
  .fiche-mini .btn-close { top: 8px !important; right: 12px !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; font-size: 0.85rem !important; }
  /* la ligne de statut reste lisible même en colonne étroite */
  .fiche-mini .fiche-status-row span:first-child { font-size: 0.85rem !important; }

  /* Modal aligné en haut + scroll : statut et boutons toujours atteignables */
  .f-modal { align-items: flex-start !important; }
  .fiche-mini { margin: 12px auto !important; }

  /* Carte « Candidat proposé » dans la notif : en-tête qui passe à la ligne */
  .fiche-mini [style*="background: #eef2ff"] > div:first-child { flex-wrap: wrap !important; row-gap: 0.4rem; }
  .fiche-mini [style*="background: #eef2ff"] [style*="margin-left: auto"] { margin-left: 0 !important; }

  /* Voir la fiche / Demander le placement : boutons empilés pleine largeur */
  .candidate-card-actions { flex-direction: column !important; }
  .candidate-card-actions > button { width: 100% !important; flex: none !important; }
}

/* ════════════════════════════════════════════════
   DASHBOARD — Responsive général (sections)
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Grilles auto-fill (Recrutement, etc.) : 1 colonne pour ne jamais déborder
     (sinon minmax(320/350px) force une largeur > écran) */
  .dashboard-eco [style*="minmax(280px"],
  .dashboard-eco [style*="minmax(300px"],
  .dashboard-eco [style*="minmax(320px"],
  .dashboard-eco [style*="minmax(350px"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Headers de section : titre + bouton empilés, pleine largeur */
  .dashboard-eco .premium-menu-header { flex-direction: column !important; align-items: stretch !important; gap: 0.85rem !important; }
  .dashboard-eco .premium-menu-header .btn-premium-action { width: 100% !important; justify-content: center !important; }
  .dashboard-eco .premium-menu-title h2 { font-size: 1.35rem !important; }

  /* Onglets de section : défilables horizontalement, sans rétrécir */
  .dashboard-eco .premium-tabs-container { gap: 0.6rem !important; }
  .dashboard-eco .premium-tab { flex: 0 0 auto !important; white-space: nowrap; font-size: 0.82rem !important; padding: 0.6rem 0.9rem !important; }

  /* Cartes de contenu : padding réduit + jamais de débordement */
  .dashboard-eco .premium-content-body { padding: 0.85rem !important; }
  .dashboard-eco .f-card { overflow-wrap: anywhere; }

  /* Tableaux : passage en cartes (déjà géré par f-table-responsive),
     on garde une marge de sécurité contre le débordement */
  .dashboard-eco .f-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* En-tête mobile compact (moins d'espace en haut) */
  .dashboard-eco .fillow-header {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 0.85rem !important;
  }
  .dashboard-eco .fillow-content { padding-top: 52px !important; }
  .dashboard-eco .dashboard-header-logo { height: 30px; }
  /* Espacement minimal entre la barre et le contenu */
  .dashboard-eco .fillow-inner { padding-top: 0.4rem !important; }
  .dashboard-eco .f-grid-container { margin-top: 0; }

  /* ── Statistiques d'activité (heatmap) responsive ── */
  /* En-tête : titre + bouton actualiser peuvent passer à la ligne */
  .dashboard-eco .heatmap-header { flex-wrap: wrap; gap: 0.5rem; }
  /* Contrôles : légende au-dessus, onglets en dessous (au lieu de space-between qui déborde) */
  .dashboard-eco .heatmap-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .dashboard-eco .heatmap-legend { flex-wrap: wrap; gap: 0.4rem 0.8rem; }
  .dashboard-eco .heatmap-tabs { width: 100%; }
  .dashboard-eco .heatmap-tabs button { flex: 1; padding: 0.45rem 0.4rem; }
  /* Grille : colonne d'étiquette lisible + cellules compactes → tient dans l'écran */
  .dashboard-eco .heatmap-grid {
    grid-template-columns: 40px repeat(7, 1fr) !important;
    gap: 3px !important;
    overflow: visible !important;
  }
  .dashboard-eco .heatmap-cell { min-height: 18px; }
  .dashboard-eco .heatmap-row-label {
    font-size: 0.6rem !important;
    padding-right: 4px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .dashboard-eco .heatmap-col-label { font-size: 0.6rem; }
}