/* ============================================
   DESIGN SYSTEM — TOKENS PREMIUM
   ============================================ */

:root{
  --max: 1200px;
  --pad: 32px;

  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --serif: "Fraunces", "Fraunces Variable", ui-serif, Georgia, serif;

  /* LIGHT THEME — LUMINEUX & ÉLÉGANT */
  --bg:#FAFAFC;
  --paper:#FFFFFF;
  --text:#0A0E1A;
  --muted: rgba(10,14,26,.68);
  --muted2: rgba(10,14,26,.48);
  --stroke: rgba(10,14,26,.08);
  --stroke2: rgba(10,14,26,.12);
  --card: rgba(10,14,26,.03);

  --a1:#6D4BFF;
  --a2:#00B7C7;
  --a3:#FF3FC1;

  --shadow: 0 20px 64px rgba(10,14,26,.08);
  --shadow2: 0 12px 32px rgba(10,14,26,.06);
  --shadow3: 0 4px 16px rgba(10,14,26,.04);

  --r: 20px;
  --r2: 28px;

  --headerH: 92px;
  --headerHSmall: 68px;

  --ease: cubic-bezier(.25,.8,.25,1);
  --easeOut: cubic-bezier(.2,0,0,1);

  /* Variables backgrounds par section (light theme) */
  --halo-opacity: 0.75; /* Plus visible */
  --section-bg-light: #F5F5F8; /* Fond gris très clair pour certaines sections */
  --section-bg-lighter: #F8F8FA; /* Encore plus clair */
  
  /* Halos colorés - plus intenses */
  --halo-services-a: color-mix(in srgb, var(--a1) 8%, transparent);
  --halo-services-b: color-mix(in srgb, var(--a3) 6%, transparent);
  --halo-method-a: color-mix(in srgb, var(--a1) 7%, transparent);
  --halo-method-b: color-mix(in srgb, var(--a2) 5%, transparent);
  --halo-projets-a: color-mix(in srgb, var(--a2) 7%, transparent);
  --halo-projets-b: color-mix(in srgb, var(--a3) 6%, transparent);
  --halo-avis-a: color-mix(in srgb, var(--a3) 7%, transparent);
  --halo-avis-b: color-mix(in srgb, var(--a1) 5%, transparent);
}

[data-theme="dark"]{
  --bg:#050810;
  --paper:#0A0F1A;
  --text:#F0F4FF;
  --muted: rgba(240,244,255,.72);
  --muted2: rgba(240,244,255,.52);
  --stroke: rgba(255,255,255,.1);
  --stroke2: rgba(255,255,255,.14);
  --card: rgba(255,255,255,.05);
  --shadow: 0 24px 80px rgba(0,0,0,.4);
  --shadow2: 0 16px 48px rgba(0,0,0,.3);
  --shadow3: 0 6px 20px rgba(0,0,0,.2);

  /* Variables backgrounds par section (dark theme) */
  --halo-opacity: 0.6; /* Plus visible en dark */
  --section-bg-light: #0A0E15; /* Fond gris très clair pour certaines sections (dark) */
  --section-bg-lighter: #0C1018; /* Encore plus clair */
  
  /* Halos colorés - plus intenses */
  --halo-services-a: color-mix(in srgb, var(--a1) 5%, transparent);
  --halo-services-b: color-mix(in srgb, var(--a3) 4%, transparent);
  --halo-method-a: color-mix(in srgb, var(--a1) 4.5%, transparent);
  --halo-method-b: color-mix(in srgb, var(--a2) 3.5%, transparent);
  --halo-projets-a: color-mix(in srgb, var(--a2) 4.5%, transparent);
  --halo-projets-b: color-mix(in srgb, var(--a3) 4%, transparent);
  --halo-avis-a: color-mix(in srgb, var(--a3) 4.5%, transparent);
  --halo-avis-b: color-mix(in srgb, var(--a1) 3.5%, transparent);
}

/* LIGHT THEME — TYPOGRAPHY TOKENS (LIGHT ONLY) */
[data-theme="light"]{
  --text-heading: #081d71;
  --text-body: #3F4E5E;
  --text-muted: #3d4550;

  /* Align legacy tokens to light typography palette */
  --text: var(--text-body);
  --muted: var(--text-muted);
  --muted2: var(--text-muted);
}

/* ============================================
   RESET & BASE
   ============================================ */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background: var(--bg); /* Fond neutre, pas de gradients globaux */
  overflow-x:hidden;
  letter-spacing:.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative; /* Créer un contexte de stacking pour que le hero-bg fixed soit au-dessus */
  z-index: 0; /* S'assurer que le body est en dessous du hero-bg (z-index: 1) */
}

body::before{
  content:"";
  position:fixed; inset:-40%;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .08;
  transform: rotate(5deg);
  z-index: 0; /* Derrière le hero-bg */
}
[data-theme="dark"] body::before{opacity:.15}
[data-theme="light"] body::before{
  z-index: 0; /* S'assurer qu'il est derrière le hero-bg */
}

/* En mode light, rendre le body et html transparents pour que le hero-bg gradient soit visible */
html[data-theme="light"],
body[data-theme="light"] {
  background: transparent !important;
  background-color: transparent !important;
}

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

/* ============================================
   LAYOUT — RESPIRATION MAXIMALE
   ============================================ */

.container{
  max-width:var(--max);
  margin:0 auto;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
  width:100%;
}

main{padding: 0}
section{padding: 200px 0}
/* Hero section exclue du padding par défaut */
.hero-section{padding: 0 !important}
@media (max-width: 980px){ 
  section{padding: 140px 0}
  .hero-section{padding: 0 !important}
  :root{--pad: 24px;}
}

/* Section wrappers pour éviter débordements */
.sectionWrapper{
  position: relative;
  width: 100%;
  overflow: clip; /* Fallback: overflow: hidden si clip non supporté */
  overflow: hidden; /* Fallback pour navigateurs anciens */
  isolation: isolate; /* Empêche les mélanges de calques entre sections */
}
/* Hero section override - fullscreen */
.hero-section.sectionWrapper,
.hero-section {
  position: relative;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important; /* Permettre au hero-bg fixed de s'afficher */
}
.sectionWrapper > .sectionContent{
  position: relative;
  z-index: 1; /* Contenu au-dessus du décor */
}
.sectionContent{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  width: 100%;
}

/* ============================================
   HEADER — FLUIDE & ÉLÉGANT
   ============================================ */

.topbar{
  position: sticky;
  top: 0;
  z-index: 9999;
  height: var(--headerH);
  display:flex;
  align-items:center;
  /* Par défaut : complètement transparente, pas de backdrop-filter ni bordure */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: transparent;
  border-bottom: 1px solid transparent; /* Bordure transparente par défaut pour transition fluide */
  /* Transition optimisée - propriétés séparées pour éviter les conflits */
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-bottom-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              -webkit-backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* S'assurer qu'il n'y a pas de débordement visible */
  box-shadow: none;
  /* Optimisation performance - isolation du rendu */
  transform: translateZ(0);
  backface-visibility: hidden;
  /* contain: layout style seulement (pas paint) pour permettre backdrop-filter */
  contain: layout style;
  overflow: hidden;
  /* Forcer le GPU pour une animation fluide */
  will-change: height;
}

.topbar::after{
  display: none; /* Supprimer le pseudo-élément pour éviter la barre horizontale */
}

/* Au scroll (shrink) : ajouter le backdrop-filter et la bordure */
.topbar.shrink{
  height: var(--headerHSmall);
  /* Ajouter le backdrop-filter et la bordure au scroll - identique à la homepage */
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  background-color: color-mix(in srgb, var(--paper) 88%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--stroke2) 80%, transparent) !important;
  /* Retirer contain pour permettre au backdrop-filter de fonctionner */
  contain: none;
  /* will-change optimisé pour l'état shrink */
  will-change: height, backdrop-filter;
}


.navGrid{
  width:100%;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 20px;
}

.brand{
  display:flex; align-items:center; gap:24px;
  min-width: 0;
}
.mark{
  width:16px;height:16px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--a3), var(--a1));
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--a1) 10%, transparent);
  flex:0 0 auto;
  position: relative;
}
.brandText{display:flex; flex-direction:column; line-height:1.05; min-width:0}
.brandText b{
  font-weight:900; 
  letter-spacing:-.02em; 
  font-size: 15px;
  color: var(--text); /* Assurer la couleur du texte */
}
[data-theme="light"] .brandText b{
  color: #081d71;
}
.brandText small{color:var(--muted2); font-weight:700; font-size: 11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ============================================
   BRAND ORB — ANIMATION PLANÈTE
   ============================================ */

.brand-orb{
  position: relative;
  overflow: visible;
  background: radial-gradient(
    circle at 30% 30%,
    var(--a3),
    var(--a1) 60%,
    var(--a2) 100%
  );
  background-size: 200% 200%;
  animation: orbGradient 16s ease-in-out infinite,
             orbShape 20s ease-in-out infinite;
}

@keyframes orbGradient{
  0%, 100%{ background-position: 0% 0%; }
  25%{ background-position: 100% 0%; }
  50%{ background-position: 100% 100%; }
  75%{ background-position: 0% 100%; }
}

@keyframes orbShape{
  0%, 100%{ border-radius: 50%; }
  25%{ border-radius: 48% 52% 48% 52%; }
  50%{ border-radius: 52% 48% 52% 48%; }
  75%{ border-radius: 50%; }
}

/* Anneau Saturne (::before) */
.brand-orb::before{
  content: "";
  position: absolute;
  inset: -12px;
  border: 1.5px solid color-mix(in srgb, var(--a2) 40%, transparent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.8) rotate(0deg);
  animation: saturnRing 14s ease-in-out infinite;
  pointer-events: none;
}

@keyframes saturnRing{
  0%, 100%{
    opacity: 0;
    transform: scale(0.8) rotate(0deg);
  }
  20%, 80%{
    opacity: 0.6;
    transform: scale(1.1) rotate(180deg);
  }
  50%{
    opacity: 0.4;
    transform: scale(1.05) rotate(360deg);
  }
}

/* Satellite (::after) */
.brand-orb::after{
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--a2);
  box-shadow: 0 0 4px color-mix(in srgb, var(--a2) 60%, transparent);
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  animation: satelliteOrbit 12s linear infinite,
             shootingStar 18s ease-out infinite;
  pointer-events: none;
}

@keyframes satelliteOrbit{
  0%{
    transform: translate(-50%, -50%) rotate(0deg) translateX(20px) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(360deg) translateX(20px) rotate(-360deg);
  }
}

/* Étoile filante (rare, toutes les 18s) */
@keyframes shootingStar{
  0%, 94%{
    box-shadow: 0 0 4px color-mix(in srgb, var(--a2) 60%, transparent);
    opacity: 1;
  }
  95%{
    box-shadow: -6px -6px 10px color-mix(in srgb, var(--a2) 70%, transparent),
                0 0 4px color-mix(in srgb, var(--a2) 60%, transparent);
    opacity: 0.95;
  }
  97%{
    box-shadow: -12px -12px 16px color-mix(in srgb, var(--a2) 50%, transparent),
                0 0 4px color-mix(in srgb, var(--a2) 60%, transparent);
    opacity: 0.6;
  }
  100%{
    box-shadow: -20px -20px 24px transparent,
                0 0 4px color-mix(in srgb, var(--a2) 60%, transparent);
    opacity: 0;
  }
}

/* Support prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .brand-orb,
  .brand-orb::before,
  .brand-orb::after{
    animation: none;
  }
  .brand-orb{
    background: radial-gradient(circle at 30% 30%, var(--a3), var(--a1));
    border-radius: 50%;
  }
  .brand-orb::before,
  .brand-orb::after{
    display: none;
  }
}

.navLinks{
  justify-self:center;
  display:flex;
  align-items:center;
  gap: 24px;
  padding: 0;
  background: transparent;
  border: none;
  transition: .3s var(--ease);
}
.topbar.shrink .navLinks{
  gap: 20px;
}

.navLinks a{
  font-weight:700;
  color:var(--muted);
  padding: 8px 0;
  position:relative;
  transition:.2s var(--ease);
  white-space:nowrap;
  letter-spacing:.01em;
  font-size: 14px;
}
.navLinks a::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:4px;
  height:1.5px;
  border-radius:2px;
  background: linear-gradient(90deg, var(--a1), var(--a3));
  transform: scaleX(0);
  transform-origin:left;
  transition: .25s var(--ease);
  opacity:.9;
}
.navLinks a:hover{
  color: var(--text);
}
.navLinks a:hover::after{transform: scaleX(1)}

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

/* ============================================
   BUTTONS — PREMIUM
   ============================================ */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 0 20px;
  height:46px;
  border-radius:999px;
  font-weight:700;
  font-size: 14px;
  border:1px solid color-mix(in srgb, var(--stroke2) 80%, transparent);
  background: color-mix(in srgb, var(--card) 95%, transparent);
  transition:.25s var(--ease);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  letter-spacing:.01em;
}
.btn:hover{transform:translateY(-2px); box-shadow: var(--shadow2)}
.btn:focus-visible{
  outline: 2px solid var(--a1);
  outline-offset: 3px;
}
.btn.primary{
  border:none;
  color:#fff;
  background: linear-gradient(90deg, var(--a1), var(--a3));
  box-shadow: 0 1px 48px color-mix(in srgb, var(--a1) 10%, transparent);
}
.btn.primary:hover{
  box-shadow: 0 20px 56px color-mix(in srgb, var(--a1) 28%, transparent);
}

.iconBtn{
  width:46px; height:46px;
  border-radius:999px;
  display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--stroke2) 80%, transparent);
  background: color-mix(in srgb, var(--card) 95%, transparent);
  cursor:pointer;
  transition:.25s var(--ease);
  position: relative;
  pointer-events: auto !important; /* S'assurer que le bouton est cliquable */
}
.iconBtn:hover{transform:translateY(-2px); box-shadow:var(--shadow2)}
.iconBtn:focus-visible{
  outline: 2px solid var(--a1);
  outline-offset: 3px;
}
.iconBtn svg{
  width:18px;
  height:18px;
  opacity:.9;
  color: var(--text); /* Force la couleur pour tous les SVG dans iconBtn */
  pointer-events: none; /* Permettre aux clics de passer au bouton parent */
}

/* Theme toggle icons */
.themeToggle{
  overflow: visible;
  pointer-events: auto !important; /* Rendre le bouton toggle cliquable */
}

.themeIcon{
  width: 18px;
  height: 18px;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

/* Hide both icons by default */
.themeIcon--sun,
.themeIcon--moon{
  display: none;
}

/* Sun icon - visible in dark mode (target: light) */
html[data-theme="dark"] .themeToggle .themeIcon--sun,
body[data-theme="dark"] .themeToggle .themeIcon--sun,
[data-theme="dark"] .themeToggle .themeIcon--sun,
html[data-theme="dark"] .themeIcon--sun,
body[data-theme="dark"] .themeIcon--sun{
  display: block !important;
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Moon icon - visible in light mode (target: dark) */
html[data-theme="light"] .themeToggle .themeIcon--moon,
body[data-theme="light"] .themeToggle .themeIcon--moon,
[data-theme="light"] .themeToggle .themeIcon--moon,
html[data-theme="light"] .themeIcon--moon,
body[data-theme="light"] .themeIcon--moon{
  display: block !important;
  color: #3A3A3A !important;
  opacity: 1 !important;
}

/* Hide opposite icon when theme is set */
html[data-theme="dark"] .themeToggle .themeIcon--moon,
body[data-theme="dark"] .themeToggle .themeIcon--moon,
html[data-theme="light"] .themeToggle .themeIcon--sun,
body[data-theme="light"] .themeToggle .themeIcon--sun{
  display: none !important;
}

/* Moon stars - hidden by default, appear on hover */
.themeIcon--moon .star{
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

/* Moon stars visible on hover */
.themeToggle:hover .themeIcon--moon .star,
.themeToggle:focus-visible .themeIcon--moon .star{
  opacity: 0.7;
}

/* Sun rays animation on hover - très léger */
/* Animation alternée des rayons pour effet subtil */
.themeToggle:hover .themeIcon--sun .sunRay:nth-child(2),
.themeToggle:hover .themeIcon--sun .sunRay:nth-child(4),
.themeToggle:hover .themeIcon--sun .sunRay:nth-child(6),
.themeToggle:hover .themeIcon--sun .sunRay:nth-child(8),
.themeToggle:focus-visible .themeIcon--sun .sunRay:nth-child(2),
.themeToggle:focus-visible .themeIcon--sun .sunRay:nth-child(4),
.themeToggle:focus-visible .themeIcon--sun .sunRay:nth-child(6),
.themeToggle:focus-visible .themeIcon--sun .sunRay:nth-child(8){
  animation: sunRayPulse1 2.5s ease-in-out infinite;
}

.themeToggle:hover .themeIcon--sun .sunRay:nth-child(3),
.themeToggle:hover .themeIcon--sun .sunRay:nth-child(5),
.themeToggle:hover .themeIcon--sun .sunRay:nth-child(7),
.themeToggle:hover .themeIcon--sun .sunRay:nth-child(9),
.themeToggle:focus-visible .themeIcon--sun .sunRay:nth-child(3),
.themeToggle:focus-visible .themeIcon--sun .sunRay:nth-child(5),
.themeToggle:focus-visible .themeIcon--sun .sunRay:nth-child(7),
.themeToggle:focus-visible .themeIcon--sun .sunRay:nth-child(9){
  animation: sunRayPulse2 2.5s ease-in-out infinite 0.3s;
}

@keyframes sunRayPulse1{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.75; transform: scale(1.05); }
}

@keyframes sunRayPulse2{
  0%, 100%{ opacity: 0.75; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.05); }
}

/* Sun slight rotation on hover */
.themeToggle:hover .themeIcon--sun,
.themeToggle:focus-visible .themeIcon--sun{
  animation: sunRotate 8s ease-in-out infinite;
}

@keyframes sunRotate{
  0%, 100%{ transform: rotate(0deg); }
  50%{ transform: rotate(2deg); }
}

/* Moon stars twinkle on hover - très léger */
.themeToggle:hover .themeIcon--moon .star-1,
.themeToggle:focus-visible .themeIcon--moon .star-1{
  animation: starTwinkle1 2.2s ease-in-out infinite;
}
.themeToggle:hover .themeIcon--moon .star-2,
.themeToggle:focus-visible .themeIcon--moon .star-2{
  animation: starTwinkle2 2.5s ease-in-out infinite 0.3s;
}
.themeToggle:hover .themeIcon--moon .star-3,
.themeToggle:focus-visible .themeIcon--moon .star-3{
  animation: starTwinkle3 1.9s ease-in-out infinite 0.6s;
}
.themeToggle:hover .themeIcon--moon .star-4,
.themeToggle:focus-visible .themeIcon--moon .star-4{
  animation: starTwinkle4 2.1s ease-in-out infinite 0.45s;
}

@keyframes starTwinkle1{
  0%, 100%{ opacity: 0.7; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.15); }
}

@keyframes starTwinkle2{
  0%, 100%{ opacity: 0.65; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.2); }
}

@keyframes starTwinkle3{
  0%, 100%{ opacity: 0.6; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.1); }
}

@keyframes starTwinkle4{
  0%, 100%{ opacity: 0.65; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.12); }
}

/* Disable animations if prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .themeIcon,
  .sunRay,
  .star{
    animation: none !important;
    transition: opacity .2s ease !important;
  }
  .themeToggle:hover .themeIcon,
  .themeToggle:hover .themeIcon .sunRay,
  .themeToggle:hover .themeIcon .star,
  .themeToggle:focus-visible .themeIcon,
  .themeToggle:focus-visible .themeIcon .sunRay,
  .themeToggle:focus-visible .themeIcon .star{
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================
   MOBILE MENU
   ============================================ */

/* Burger button - visible uniquement en mobile */
.burger{
  display: none;
  pointer-events: auto !important;
  cursor: pointer;
  color: var(--text);
}

.mobileWrap{
  display: none;
  pointer-events: auto !important;
  position: relative;
  width: 46px;
  height: 46px;
}

/* Menu mobile plein écran */
.mobile-menu{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--paper);
  z-index: 99998; /* En dessous de la topbar (9999) pour que le logo reste visible */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  
  /* Masqué par défaut */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s var(--ease), visibility 0.15s var(--ease);
  pointer-events: none;
}

.mobile-menu.is-open{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Bouton fermer (X) - dans le header, masqué par défaut, même style que le burger */
.mobile-menu-close{
  display: none; /* Masqué par défaut */
  width: 46px;
  height: 46px;
  border-radius: 999px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--stroke2) 80%, transparent);
  background: color-mix(in srgb, var(--card) 95%, transparent);
  cursor: pointer;
  transition: 0.25s var(--ease);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto !important;
  color: var(--text);
  padding: 0 !important;
  margin: 0 !important;
  z-index: 100000;
  /* S'assurer que la croix a exactement les mêmes propriétés que le burger */
  box-sizing: border-box;
  /* S'assurer qu'il n'y a pas de décalage dû aux bordures */
  outline: none;
}

.mobile-menu-close:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
}

.mobile-menu-close:focus-visible{
  outline: 2px solid var(--a1);
  outline-offset: 3px;
}

.mobile-menu-close svg{
  width: 18px;
  height: 18px;
  opacity: 0.9;
  stroke: currentColor;
}

/* Afficher la croix quand le menu est ouvert, masquer le burger */
body.menu-open .mobile-menu-close{
  display: grid !important;
}

body.menu-open .burger{
  display: none !important;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus-visible{
  opacity: 0.7;
  outline: 2px solid var(--stroke);
  outline-offset: 2px;
}

.mobile-menu-close svg{
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

/* Contenu du menu */
.mobile-menu-content{
  display: flex;
  flex-direction: column;
  padding: calc(var(--headerH) + 32px) var(--pad) var(--pad);
  max-width: 100%;
  min-height: 100vh;
}

/* Liens du menu */
.mobile-menu-link{
  display: block;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--stroke) 30%, transparent);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
  min-height: 48px;
  display: flex;
  align-items: center;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus-visible{
  color: var(--a1);
  background-color: color-mix(in srgb, var(--card) 40%, transparent);
  outline: none;
}

.mobile-menu-link:last-of-type{
  border-bottom: none;
}

/* Séparateur visuel */
.mobile-menu-separator{
  height: 1px;
  background-color: color-mix(in srgb, var(--stroke) 50%, transparent);
  margin: 24px 0;
}

/* CTA principal */
.mobile-menu-cta{
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  min-height: 48px;
}

/* Footer optionnel */
.mobile-menu-footer{
  margin-top: auto;
  padding-top: 32px;
  font-size: 12px;
  color: var(--muted2);
  text-align: center;
  line-height: 1.5;
}

/* Afficher burger et menu uniquement en mobile */
@media (max-width: 768px){
  .navLinks{
    display: none;
  }
  
  /* Masquer le bouton "Prendre contact" du header en mobile (il est dans le menu) */
  .navRight > .btn.primary{
    display: none;
  }
  
  /* Aligner les boutons à droite en mobile */
  .navRight{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    /* S'assurer que la taille ne change pas quand le menu s'ouvre */
    min-width: fit-content;
  }
  
  .mobileWrap{
    display: block;
    position: relative;
    width: 46px;
    height: 46px;
    z-index: 10001;
    pointer-events: auto !important;
    /* S'assurer que le conteneur garde une taille fixe */
    flex-shrink: 0;
    flex-grow: 0;
  }
  
  .burger{
    display: grid;
    color: var(--text) !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100002;
    pointer-events: auto !important;
    cursor: pointer;
    /* S'assurer que le burger a exactement les mêmes propriétés que la croix */
    border-radius: 999px;
    place-items: center;
    box-sizing: border-box;
    /* Surcharger les propriétés de .iconBtn pour éviter tout décalage */
    border: 1px solid color-mix(in srgb, var(--stroke2) 80%, transparent) !important;
    background: color-mix(in srgb, var(--card) 95%, transparent) !important;
  }
  
  .burger svg{
    color: var(--text) !important;
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
    pointer-events: none;
  }
  
  /* La croix remplace le burger dans le même conteneur .mobileWrap */
  /* Pas besoin de positionnement spécial, elle est déjà dans le flux */
  
  /* S'assurer que le logo reste visible au-dessus du menu */
  .topbar{
    z-index: 99999 !important; /* Au-dessus du menu mobile (99998) */
  }
  
  /* Garder le texte "Studio identité & web" visible en mobile */
  /* .brandText small reste visible - pas de display: none */
  
  /* Ajuster le burger menu pour qu'il soit plus à droite, aligné visuellement avec le logo */
  .navRight{
    /* Réduire la marge à droite pour rapprocher le burger du bord */
    margin-right: -8px; /* Compense visuellement le dépassement du logo à gauche */
  }
}

/* Blocage du scroll du body quand le menu est ouvert */
body.menu-open{
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ============================================
   TYPOGRAPHY — HIÉRARCHIE CLAIRE
   ============================================ */

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .h1,
[data-theme="light"] .headline,
[data-theme="light"] .serviceTitle,
[data-theme="light"] .stepTitle,
[data-theme="light"] .accordionTitle,
[data-theme="light"] .projTitle,
[data-theme="light"] .prevTitle,
[data-theme="light"] .footerBrand-title,
[data-theme="light"] .footerNav-title{
  color: var(--text-heading);
}

[data-theme="light"] p{
  color: var(--text-body);
}

.kickerRow{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom: 16px; /* Réduit de 24px à 16px */
}
.kickerRow > p{
  margin: 0;
  padding: 0;
  display: contents;
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--card) 95%, transparent);
  color:var(--muted);
  font-size: 12px;
  font-weight:700;
  white-space:nowrap;
  letter-spacing:.02em;
  margin: 0;
  line-height: 1;
}
.tag i,
.tagDot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--a2);
  flex:0 0 auto;
  display:inline-block;
}

/* Couleurs des tags par type */
.tagDot--ux-ui,
.tagDot--ux,
.tagDot--ui,
.tagDot--design-system,
.tagDot--plateforme,
.tagDot--mobile{
  background: var(--a1);
}
.tagDot--branding,
.tagDot--web,
.tagDot--print,
.tagDot--identité{
  background: var(--a3);
}
.tagDot--transmission,
.tagDot--documentation,
.tagDot--sites{
  background: var(--a2);
}

.sectionKicker{
  font-weight:800;
  color:var(--muted2);
  text-transform:uppercase;
  letter-spacing:.4em;
  font-size: 11px;
  margin:0 0 16px;
}
.headline{
  font-family: var(--serif);
  font-weight:400;
  font-size: clamp(42px, 5.2vw, 68px);
  letter-spacing:-.04em;
  line-height:1.04;
  margin: 0 0 32px;
  max-width: 24ch;
}
.hint{
  margin:0;
  color:var(--muted);
  line-height:1.75;
  max-width: 58ch;
  font-size: 16px;
}

/* ============================================
   HERO — IMPACT MAXIMUM
   ============================================ */

.heroGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 80px;
  align-items:start;
  padding-top: 24px;
  max-height: calc(100vh - var(--headerH) - 40px - 48px); /* Limite la hauteur pour éviter chevauchement SVG */
  overflow: hidden; /* Empêche le débordement */
}
@media (max-width: 980px){ 
  .heroGrid{
    grid-template-columns:1fr; 
    gap:40px; 
    padding-top: 16px;
    max-height: calc(100vh - var(--headerHSmall) - 24px - 32px);
  } 
}

.h1{
  font-family:var(--serif);
  font-weight:400;
  font-size: clamp(68px, 7.5vw, 100px);
  line-height: .94;
  letter-spacing:-.05em;
  margin: 0 0 24px;
  max-width: 16ch;
}
.sub{
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin:0;
  max-width: 54ch;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limite à 3 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.heroActions{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top: 36px;
}

/* Micro-ligne locale - style pill avec icône GPS */
.hero-local{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 24px 0 0;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--stroke) 25%, transparent);
  background: color-mix(in srgb, var(--card) 50%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  opacity: 0.75;
  white-space: nowrap; /* 1 ligne sur desktop */
  max-width: 100%;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.hero-local-icon{
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  opacity: 0.85;
  color: var(--muted);
}
@media (max-width: 980px){
  .hero-local{
    white-space: normal; /* Wrap autorisé sur mobile */
    padding: 5px 10px;
    font-size: 10px;
  }
}

.heroCard{
  position:relative;
  border-radius: var(--r2);
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--paper) 92%, var(--card));
  box-shadow: var(--shadow2);
  padding: 32px;
  overflow:hidden;
  min-height: 240px;
}
.heroCard::before{
  content:"";
  position:absolute; inset:-25%;
  background:
    radial-gradient(800px 400px at 20% 20%, color-mix(in srgb, var(--a1) 12%, transparent), transparent 60%),
    radial-gradient(700px 380px at 85% 30%, color-mix(in srgb, var(--a2) 8%, transparent), transparent 65%),
    radial-gradient(600px 300px at 60% 80%, color-mix(in srgb, var(--a3) 6%, transparent), transparent 65%);
  opacity:.6;
}

/* ============================================
   HERO BACKGROUND - SVG LAYERS & STARFIELD
   ============================================ */

/* TODO Theme: À l'avenir, ajouter des CSS variables ici pour le thème dark/light
 * Exemple:
 * :root {
 *   --sky-gradient-start: #1a2f60;
 *   --sky-gradient-end: #375e92;
 *   --water-gradient-start: #1d496f;
 *   --water-gradient-end: #5ba2b6;
 *   --star-color: #ffffff;
 * }
 */


/* Contenu du hero au-dessus du background */
.hero-content {
  position: relative;
  z-index: 10;
  padding: 0;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Remonté en haut */
  padding-top: calc(var(--headerH) + 10px); /* Espacement depuis le header */
  padding-bottom: 48px; /* Zone de respiration au-dessus du SVG */
  max-width: var(--max);
  margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  width: 100%;
}

@media (max-width: 980px) {
  .hero-content {
    padding-top: calc(var(--headerHSmall) + 24px); /* Espacement depuis le header sur mobile */
    padding-bottom: 32px; /* Respiration mobile */
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }
}

/* Container principal fullscreen du hero-bg */
.hero-bg {
  position: fixed; /* Fixed pour passer derrière la topbar sticky */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1; /* Derrière la topbar (z-index 9999) mais au-dessus du body */
  /* Par défaut : gradient de fond bleu foncé (dark theme) */
  background: linear-gradient(180deg, #0d1f3a 0%, #1a2f60 30%, #1d496f 60%, #2b4c7f 100%);
  /* S'assurer que le background est visible même si le parent a overflow: hidden */
  isolation: isolate;
}

/* Version light : ciel doux avec dégradé harmonieux */
[data-theme="light"] .hero-bg {
  background-color: #ebe2d1 !important; /* Fallback clair */
  background-image: linear-gradient(135deg, #93c9ef 0%, #ebe2d1 100%) !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
  background-size: 100% 100% !important;
  z-index: 1 !important; /* S'assurer que le hero-bg est au-dessus du body */
  opacity: 1 !important; /* S'assurer que le hero-bg est visible */
  visibility: visible !important; /* S'assurer que le hero-bg est visible */
}

/* Pas d'overlay en light - ciel uniforme */
[data-theme="light"] .hero-bg::after {
  display: none;
}

/* Version dark : garde le gradient nocturne */
[data-theme="dark"] .hero-bg {
  background: linear-gradient(180deg, #0d1f3a 0%, #1a2f60 30%, #1d496f 60%, #2b4c7f 100%) !important;
}

[data-theme="dark"] .hero-bg::after {
  display: none; /* Pas d'overlay en version dark */
}

/* Canvas pour les étoiles - derrière le SVG */
canvas#stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none; /* Ne bloque pas les clics sur les éléments interactifs */
}

/* Version light : masquer les étoiles (jour) et s'assurer qu'elles n'interfèrent pas */
[data-theme="light"] canvas#stars {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: -1 !important; /* Derrière tout */
}

/* Version dark : afficher les étoiles (nuit) */
[data-theme="dark"] canvas#stars {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* SVG wrapper - ancré bottom-right (desktop) / bottom-left (mobile) */
.scene-svg-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(80vw, 112vw, 128vw); /* Réduit de 20% (0.8 * 140vw = 112vw, etc.) */
  height: clamp(80vh, 96vh, 112vh); /* Réduit de 20% */
  transform-origin: bottom right;
  z-index: 1;
  pointer-events: none;
  overflow: hidden; /* Permet de couper le SVG qui dépasse */
}

/* SVG inline - positionnement et dimensions */
.scene-svg-wrapper svg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: none; /* Pas de transformation, positionnement direct */
  object-position: bottom right;
  pointer-events: none;
  transform-origin: bottom right;
  /* Le SVG doit "s'asseoir" en bas de l'écran, pas flotter */
  /* Préserver la transparence exacte du SVG */
  mix-blend-mode: normal;
}

/* Alignement fin du SVG light (corrige un léger décalage horizontal) */
[data-theme="light"] .scene-svg-wrapper svg {
  transform: translateX(-2px);
}

/* Comportement du groupe water_bg - positionnement naturel du SVG */
.scene-svg-wrapper svg #water_bg,
.scene-svg-wrapper svg #water_bg_light {
  /* Le water_bg garde sa position naturelle dans le SVG, pas de transformation forcée */
  width: auto;
  min-width: auto;
  transform: none;
  /* Le côté gauche de l'eau doit rester transparent - pas de fond blanc */
  background: transparent;
}

/* ============================================
   SCENE SVG — TOKENS DE COULEURS DAY/NIGHT
   ============================================
   
   Les tokens sont définis dans scene-tokens.css (chargé avant ce fichier)
   Le SVG utilise maintenant des variables CSS au lieu de filtres
   ============================================ */

/* Animation des reflets de l'eau - chaque path bouge individuellement */
.scene-svg-wrapper svg #water_reflect path,
.scene-svg-wrapper svg #water_reflect_light path {
  animation: waterRipple 6s ease-in-out infinite;
  transform-origin: center;
}

/* Délais différents pour chaque path pour créer un effet de vague */
.scene-svg-wrapper svg #water_reflect path:nth-child(1),
.scene-svg-wrapper svg #water_reflect_light path:nth-child(1) { animation-delay: 0s; }
.scene-svg-wrapper svg #water_reflect path:nth-child(2),
.scene-svg-wrapper svg #water_reflect_light path:nth-child(2) { animation-delay: 0.5s; }
.scene-svg-wrapper svg #water_reflect path:nth-child(3),
.scene-svg-wrapper svg #water_reflect_light path:nth-child(3) { animation-delay: 1s; }
.scene-svg-wrapper svg #water_reflect path:nth-child(4),
.scene-svg-wrapper svg #water_reflect_light path:nth-child(4) { animation-delay: 1.5s; }
.scene-svg-wrapper svg #water_reflect path:nth-child(5),
.scene-svg-wrapper svg #water_reflect_light path:nth-child(5) { animation-delay: 2s; }
.scene-svg-wrapper svg #water_reflect path:nth-child(6),
.scene-svg-wrapper svg #water_reflect_light path:nth-child(6) { animation-delay: 2.5s; }

/* Animation des reflets de l'eau - sans filtres, uniquement transform */
@keyframes waterRipple {
  0%, 100% {
    transform: translateY(0) translateX(0) scaleY(1) scaleX(1);
  }
  25% {
    transform: translateY(-8px) translateX(3px) scaleY(1.03) scaleX(1.01);
  }
  50% {
    transform: translateY(0) translateX(0) scaleY(1) scaleX(1);
  }
  75% {
    transform: translateY(8px) translateX(-3px) scaleY(0.97) scaleX(0.99);
  }
}

/* Sur desktop : SVG immersif, illustration partiellement croppée par les bords */
@media (min-width: 981px) {
  .scene-svg-wrapper {
    width: clamp(80vw, 112vw, 128vw); /* Réduit de 20% */
    height: clamp(80vh, 96vh, 112vh); /* Réduit de 20% */
  }
  
  .scene-svg-wrapper svg {
    width: 100%;
  height: auto;
    max-height: 100%;
}

  /* Le groupe water_bg garde sa position naturelle dans le SVG */
  .scene-svg-wrapper svg #water_bg,
  .scene-svg-wrapper svg #water_bg_light {
    width: auto;
    min-width: auto;
    transform: none;
  }
}

/* Sur mobile : SVG plus contenu, ancré en bas à droite pour voir l'illustration */
@media (max-width: 980px) {
  .scene-svg-wrapper {
  position: absolute;
  bottom: 0;
    right: 0; /* Ancré en bas à droite sur mobile */
    left: auto;
    width: clamp(138vw, 173vw, 208vw); /* Encore augmenté de 20% (115vw * 1.2 = 138vw, etc.) */
    height: clamp(127vh, 150vh, 173vh); /* Encore augmenté de 20% (106vh * 1.2 = 127.2vh, etc.) */
    transform-origin: bottom right; /* Origine en bas à droite */
  }
  
  .scene-svg-wrapper svg {
  position: absolute;
  bottom: 0;
    right: 0; /* Positionné en bas à droite */
    left: auto;
  width: 100%;
    height: auto;
    max-height: 100%;
    object-position: bottom right; /* Ancré en bas à droite */
    transform-origin: bottom right;
}

  /* Sur mobile, le water_bg garde sa position naturelle */
  .scene-svg-wrapper svg #water_bg,
  .scene-svg-wrapper svg #water_bg_light {
    width: auto;
    min-width: auto;
    transform: none;
  }
}

/* Très petits écrans */
@media (max-width: 480px) {
  .scene-svg-wrapper {
    width: 150vw;
    height: 130vh;
  }
  
  .scene-svg-wrapper svg #water_bg {
    width: auto;
    transform: none;
  }
}

.codeveil{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity .2s var(--ease);
  pointer-events:none;
  mask-image: radial-gradient(400px 260px at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(400px 260px at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 70%);
}
.heroCard:hover .codeveil{opacity:1}
.codeveil pre{
  margin:0;
  padding: 20px 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--a2) 55%, var(--muted));
  opacity:.6;
  white-space: pre-wrap;
}

.microList{
  margin: 18px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.8;
  position:relative;
}
.microList li{margin: 10px 0}

/* ============================================
   CLIENTS — LOGOS
   ============================================ */

.clientsSection{
  padding: 120px 0;
  text-align: center;
}
@media (max-width: 980px){
  .clientsSection{
    padding: 80px 0;
  }
}

.clientsCarousel{
  overflow: hidden;
  margin-top: 56px;
  position: relative;
  width: 100%;
}
.clientsCarouselTrack{
  display: flex;
  gap: 64px;
  align-items: center;
  animation: carouselScroll 40s linear infinite;
  width: fit-content;
}
@keyframes carouselScroll{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}
.clientsCarouselTrack:hover{
  animation-play-state: paused;
}
@media (max-width: 980px){
  .clientsCarouselTrack{
    gap: 48px;
  }
}

.clientLogo{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  width: auto;
  min-width: 0;
  flex-shrink: 0;
  opacity: .7;
  filter: grayscale(100%) brightness(1.3);
  transition: all .35s var(--ease);
  /* Isolation pour éviter les conflits avec les règles SVG des logos projets */
  isolation: isolate;
}
/* Dark theme : éclaircir les logos pour qu'ils tirent vers le blanc */
[data-theme="dark"] .clientLogo{
  filter: grayscale(100%) invert(1) brightness(1.5) contrast(0.9);
}
.clientLogo:hover{
  opacity: 1;
  filter: grayscale(0%) brightness(1) !important;
  transform: scale(1.05);
}
[data-theme="dark"] .clientLogo:hover{
  filter: grayscale(0%) invert(0) brightness(1) contrast(1) !important;
}
.clientLogo img{
  /* Forcer des dimensions pour garantir l'affichage */
  width: auto !important;
  height: auto !important;
  min-width: 80px !important;
  min-height: 50px !important;
  max-width: 160px !important;
  max-height: 88px !important;
  object-fit: contain !important;
  display: block !important; /* Garantir l'affichage */
  opacity: 1 !important; /* Forcer l'opacité à 1 pour l'image elle-même */
  filter: none !important; /* Pas de filtre sur l'image, le filtre est sur .clientLogo */
  visibility: visible !important; /* Garantir la visibilité */
  /* Protection contre les règles SVG des logos projets */
  position: relative !important;
  z-index: 1 !important;
  /* Forcer l'affichage de l'image */
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Forcer une couleur pour les SVG qui utilisent currentColor */
  color: var(--text) !important;
}
/* Protection supplémentaire : s'assurer que les règles des logos projets n'affectent pas les logos clients */
.clientsCarousel .clientLogo img {
  /* Réinitialiser toutes les propriétés qui pourraient être affectées par d'autres règles */
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  transform: none !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  max-width: 160px !important;
  max-height: 88px !important;
  object-fit: contain !important;
}

/* ============================================
   SERVICES — CE QUE J'ACHÈTE
   ============================================ */

/* Background décoratif isolé pour Services - fond gris clair + gradients légers + halos */
#services.sectionWrapper{
  background: 
    linear-gradient(180deg, var(--section-bg-light) 0%, color-mix(in srgb, var(--section-bg-light) 92%, var(--bg)) 50%, var(--section-bg-light) 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
#services.sectionWrapper::before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  background:
    radial-gradient(1400px 700px at 25% 30%, var(--halo-services-a), transparent 55%),
    radial-gradient(1300px 650px at 75% 60%, var(--halo-services-b), transparent 60%);
  opacity: var(--halo-opacity);
  z-index: 0;
  pointer-events: none;
}

.servicesGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 64px;
}
@media (max-width: 980px){
  .servicesGrid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.servicesCTA{
  margin-top: 48px;
  text-align: center;
}
.servicesCTA-hint{
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted2);
}
@media (max-width: 980px){
  .servicesCTA{
    margin-top: 40px;
  }
  .servicesCTA-hint{
    font-size: 12px;
  }
}

.serviceCard{
  position: relative;
  padding: 40px 36px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--stroke) 45%, transparent);
  background: color-mix(in srgb, var(--paper) 96%, var(--card));
  transition: all .35s var(--ease);
  display: flex;
  flex-direction: column;
  min-height: 240px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.serviceCard::before{
  content: '';
  position: absolute;
  inset: -45%;
  border-radius: var(--r);
  background:
    radial-gradient(42% 42% at 20% 20%, rgba(180, 120, 255, .35), transparent 60%),
    radial-gradient(45% 45% at 80% 30%, rgba(120, 200, 255, .28), transparent 60%),
    radial-gradient(40% 40% at 50% 80%, rgba(255, 120, 220, .25), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  filter: blur(22px);
  animation: benefitGlow 3.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.serviceCard:nth-child(1)::before{
  background:
    radial-gradient(45% 45% at 10% 18%, rgba(140, 200, 255, .36), transparent 60%),
    radial-gradient(42% 42% at 72% 12%, rgba(120, 140, 255, .28), transparent 60%),
    radial-gradient(40% 40% at 58% 85%, rgba(80, 220, 210, .24), transparent 60%);
}
.serviceCard:nth-child(2)::before{
  background:
    radial-gradient(46% 46% at 22% 40%, rgba(190, 120, 255, .36), transparent 60%),
    radial-gradient(42% 42% at 88% 10%, rgba(255, 140, 220, .28), transparent 60%),
    radial-gradient(40% 40% at 45% 86%, rgba(120, 200, 255, .24), transparent 60%);
}
.serviceCard:nth-child(3)::before{
  background:
    radial-gradient(46% 46% at 12% 32%, rgba(120, 230, 200, .32), transparent 60%),
    radial-gradient(42% 42% at 78% 35%, rgba(120, 170, 255, .30), transparent 60%),
    radial-gradient(40% 40% at 62% 75%, rgba(255, 120, 210, .24), transparent 60%);
}
.serviceCard:nth-child(4)::before{
  background:
    radial-gradient(46% 46% at 28% 18%, rgba(255, 170, 120, .30), transparent 60%),
    radial-gradient(42% 42% at 70% 28%, rgba(255, 120, 190, .28), transparent 60%),
    radial-gradient(40% 40% at 52% 90%, rgba(120, 210, 255, .24), transparent 60%);
}
.serviceCard:hover{
  transform: translateY(-8px);
  box-shadow: 
    0 16px 48px color-mix(in srgb, var(--a1) 8%, transparent),
    var(--shadow2);
  border-color: color-mix(in srgb, var(--a1) 30%, var(--stroke));
  background: color-mix(in srgb, var(--paper) 99%, var(--card));
}
.serviceCard:hover::before{
  opacity: 1;
}
.serviceCard:focus-visible{
  outline: 2px solid var(--a1);
  outline-offset: 4px;
  border-radius: calc(var(--r) + 2px);
}
.serviceCard > *{
  position: relative;
  z-index: 1;
}

.serviceTags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.serviceTags .tag{
  padding: 6px 12px;
  font-size: 11px;
  opacity: .9;
}

.serviceTitle{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 36px);
  line-height: 1.08;
  letter-spacing: -.04em;
  margin: 0 0 16px;
  color: var(--text);
  position: relative;
  padding-bottom: 12px;
}
.serviceTitle::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--a1), var(--a3));
  transition: width .3s var(--ease);
}
.serviceCard:hover .serviceTitle::after{
  width: 48px;
}

.serviceText{
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15px;
  flex: 1;
}

/* Points de service — liste sobre et premium */
.svc-points{
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.svc-points li{
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted2);
}
.svc-points li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--a2) 55%, transparent);
  opacity: .75;
  transform: translateY(-50%);
}

@media (max-width: 980px){
  .serviceCard{
    padding: 32px 24px;
  }
  .svc-points{
    margin-top: 20px;
    gap: 5px;
  }
  .svc-points li{
    font-size: 12px;
  }
}

/* Badge de preuve/livrable (bas de carte) - distinct des tags du haut */
.service-proof{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--stroke) 30%, transparent);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  opacity: .75;
  transition: opacity .2s var(--ease);
}
.service-proof::before{
  content: "✓";
  font-size: 11px;
  color: var(--a2);
  opacity: .9;
  flex: 0 0 auto;
}
.serviceCard:hover .service-proof{
  opacity: .9;
  border-color: color-mix(in srgb, var(--a2) 20%, var(--stroke));
}

/* ============================================
   METHOD — SIMPLE INTERSECTIONOBSERVER
   ============================================ */

#methode{
  scroll-margin-top: 110px; /* Compenser le header sticky pour l'ancre */
}

.methodSection{
  padding: 200px 0;
  position: relative;
  overflow: clip; /* Empêcher débordement */
}

/* Background isolé avec gradient léger + halos */
.methodSection{
  background: 
    linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 90%, var(--section-bg-light)) 50%, var(--bg) 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.methodSection::before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  background:
    radial-gradient(1400px 700px at 20% 30%, var(--halo-method-a), transparent 55%),
    radial-gradient(1300px 650px at 80% 60%, var(--halo-method-b), transparent 60%);
  opacity: var(--halo-opacity);
  z-index: 0;
  pointer-events: none;
}

.methodSection .sectionContent{
  position: relative;
}

.methodGrid{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 80px;
  align-items: start;
  position: relative;
}
@media (max-width: 980px){
  .methodGrid{
    display: none; /* Hide desktop layout on mobile */
  }
  .methodSection{
    padding: 120px 0;
  }
}

/* Colonne gauche : sticky sidebar */
.methodSidebar{
  position: sticky;
  top: calc(var(--headerHSmall) + 32px);
  height: fit-content;
}

.methodSidebar .headline{
  margin-bottom: 20px;
}
.methodSidebar .hint{
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}
@media (max-width: 980px){
  .methodSidebar{
    position: static; /* Pas de sticky sur mobile */
  }
}

/* Timeline verticale - fine et moderne */
.methodTimeline{
  position: relative;
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 0;
}

/* Ligne verticale ultra fine (1px) */
.timelineLine{
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: color-mix(in srgb, var(--stroke) 25%, transparent);
  z-index: 0;
}

.timelineItem{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  z-index: 2;
  font-family: inherit;
  transition: opacity .25s var(--ease);
}
.timelineItem:hover{
  opacity: 0.75;
}
.timelineItem:focus-visible{
  outline: 2px solid var(--a1);
  outline-offset: 4px;
  border-radius: 4px;
}

.timelineDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--stroke) 35%, transparent);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  flex: 0 0 auto;
  position: relative;
}

/* Étape active : ring dégradé + glow doux + scale */
.timelineItem.is-active .timelineDot{
  background: var(--a1);
  border: 2px solid var(--a1);
  box-shadow: 
    0 0 0 2px color-mix(in srgb, var(--a2) 40%, transparent),
    0 0 0 4px color-mix(in srgb, var(--a1) 20%, transparent),
    0 0 8px color-mix(in srgb, var(--a1) 15%, transparent),
    0 0 16px color-mix(in srgb, var(--a1) 8%, transparent);
  transform: scale(1.0);
  animation: timelinePulse 2s ease-in-out infinite;
  position: relative;
}

/* Ring dégradé via pseudo-element (conic gradient pour effet circulaire) */
.timelineItem.is-active .timelineDot::before{
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 135deg, var(--a1), var(--a2), var(--a1));
  z-index: -1;
  opacity: 0.6;
  filter: blur(1px);
}

@keyframes timelinePulse {
  0%, 100% { transform: scale(1.0); }
  50% { transform: scale(1.05); }
}

/* Étape passée : dot rempli discret */
.timelineItem.is-past .timelineDot{
  background: color-mix(in srgb, var(--a1) 40%, transparent);
  border-color: color-mix(in srgb, var(--a1) 30%, transparent);
  transform: scale(1.0);
}

/* Étape future : dot vide + très léger */
.timelineItem:not(.is-active):not(.is-past) .timelineDot{
  background: transparent;
  border-color: color-mix(in srgb, var(--stroke) 25%, transparent);
}

.timelineNumber{
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -.02em;
  transition: color .3s var(--ease), opacity .3s var(--ease);
  line-height: 1;
  color: var(--muted2);
  opacity: 0.4; /* Par défaut très léger */
}

/* Étape active : numéro lisible */
.timelineItem.is-active .timelineNumber{
  color: var(--text);
  font-weight: 500;
  opacity: 1;
}

/* Étape passée : numéro plus lisible */
.timelineItem.is-past .timelineNumber{
  color: var(--text);
  opacity: 0.7;
}

/* Étape future : numéro très léger (déjà défini par défaut) */

/* Colonne droite : 4 blocs alignés verticalement */
.methodSteps{
  display: flex;
  flex-direction: column;
  gap: 72px; /* Espacement entre les étapes */
  position: relative;
}

/* Guide vertical discret (bonus) - hairline alignée avec timeline */
.methodSteps::before{
  content: '';
  position: absolute;
  left: -80px; /* Aligné avec la timeline */
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--stroke) 8%, transparent);
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 1200px){
  .methodSteps::before{
    display: none; /* Masquer sur petits écrans */
  }
}

.methodStep{
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
  padding-bottom: 32px; /* Espacement pour séparateur */
  transition: opacity .4s var(--ease),
              transform .4s var(--ease);
}

/* Séparateur invisible entre steps */
.methodStep:not(:last-child)::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%,
    color-mix(in srgb, var(--stroke) 5%, transparent) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* Par défaut : titre lisible (0.6), bullets plus faibles */
.methodStep{
  opacity: 0.6;
  transform: translateY(4px);
}

.methodStep .stepTitle{
  opacity: 0.6; /* Titre toujours lisible même hors focus */
  transition: opacity .4s var(--ease);
}

.methodStep .stepBullets{
  opacity: 0.5; /* Bullets plus faibles par défaut */
  transition: opacity .4s var(--ease);
}

.methodStep .stepTags{
  opacity: 0.5;
  transition: opacity .4s var(--ease);
}

/* Step actif - focus complet */
.methodStep.is-active{
  opacity: 1;
  transform: translateY(0);
}

.methodStep.is-active .stepTitle{
  opacity: 1;
}

.methodStep.is-active .stepBullets{
  opacity: 0.8; /* Bullets à 0.8 pour lisibilité */
}

.methodStep.is-active .stepTags{
  opacity: 1;
}

.stepNumber{
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 400;
  color: var(--a1);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.stepTitle{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 36px);
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0 0 16px;
  color: var(--text);
}

.stepBullets{
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style-type: disc;
}
.stepBullets li{
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
}

.stepTags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.tag--method{
  font-size: 10px;
  padding: 5px 10px;
  opacity: 0.9;
}

/* Mobile accordéon */
.methodMobile{
  display: none;
}
@media (max-width: 980px){
  .methodMobile{
    display: block;
  }
}

.methodAccordion{
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  background: var(--paper);
  margin-bottom: 16px;
  overflow: hidden;
}
.methodAccordion summary{
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  user-select: none;
  transition: background .2s var(--ease);
}
.methodAccordion summary::-webkit-details-marker{
  display: none;
}
.methodAccordion summary:hover{
  background: color-mix(in srgb, var(--card) 50%, transparent);
}
.methodAccordion[open] summary{
  border-bottom: 1px solid color-mix(in srgb, var(--stroke) 40%, transparent);
}

.accordionNumber{
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--a1);
  letter-spacing: .1em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.accordionTitle{
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -.02em;
  flex: 1;
}

.accordionContent{
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.accordionContent .stepBullets{
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.accordionContent .stepBullets li{
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
}

.accordionContent .stepTags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Support prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .methodStep,
  .timelineItem,
  .timelineDot{
    transition: opacity .2s ease !important;
    transform: none !important;
    animation: none !important;
  }
  .methodStep.is-active{
    transform: none !important;
  }
  .timelineItem.is-active .timelineDot{
    transform: scale(1.0) !important;
    animation: none !important;
  }
}


/* ============================================
   PROJECTS — PREMIUM REFONDU
   ============================================ */

/* Background décoratif isolé pour Portfolio - fond gris très clair + gradients légers + halos */
#projets.sectionWrapper{
  background: 
    linear-gradient(180deg, var(--section-bg-lighter) 0%, color-mix(in srgb, var(--section-bg-lighter) 88%, var(--bg)) 50%, var(--section-bg-lighter) 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
#projets.sectionWrapper::before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  background:
    radial-gradient(1500px 750px at 20% 40%, var(--halo-projets-a), transparent 55%),
    radial-gradient(1400px 700px at 80% 50%, var(--halo-projets-b), transparent 60%);
  opacity: var(--halo-opacity);
  z-index: 0;
  pointer-events: none;
}

.projectsHeader{
  margin-bottom: 48px;
}
.projectsHeader .headline{
  margin-bottom: 12px;
}
.projectsHeader .hint{
  font-size: 15px;
  max-width: 50ch;
}

.projectsGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 980px){ .projectsGrid{grid-template-columns:1fr; gap:20px} }

.projCard{
  position:relative;
  border-radius: var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 60%, transparent);
  background: color-mix(in srgb, var(--paper) 95%, var(--card));
  overflow:visible;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  cursor:pointer;
  display: flex;
  flex-direction: column;
  min-height: auto;
}
@media (hover: hover) and (pointer: fine){
  .projCard:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow2);
    border-color: color-mix(in srgb, var(--a1) 25%, var(--stroke));
  }
}
/* Body compact — pas de zone image */
.projBody{
  padding: 24px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  flex: 1;
}

/* Logo client — adaptatif light/dark */
.projLogo{
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  height: 32px;
  overflow: visible; /* Anti-crop: permettre au logo de s'afficher complètement */
}
.projLogo img{
  max-width: 120px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter .3s var(--ease);
}
.projLogoImage--light,
.projLogoImage--dark{
  filter: none;
  opacity: 0.55;
}
.projLogoImage--hover{
  display: none;
  filter: none;
  opacity: 1;
}
.projLogoImage--dark{
  display: none;
}
[data-theme="dark"] .projLogoImage--light{
  display: none;
}
[data-theme="dark"] .projLogoImage--dark{
  display: block;
}
@media (hover: hover) and (pointer: fine){
  .projCard:hover .projLogoImage--hover,
  .projCard:has(a:focus-visible) .projLogoImage--hover{
    display: block;
  }
  .projCard:hover .projLogoImage--light,
  .projCard:has(a:focus-visible) .projLogoImage--light,
  .projCard:hover .projLogoImage--dark,
  .projCard:has(a:focus-visible) .projLogoImage--dark{
    display: none;
  }
}
[data-theme="light"] .projLogo img{
  filter: grayscale(100%) brightness(0.2);
}
[data-theme="dark"] .projLogo img{
  filter: grayscale(100%) brightness(0) invert(1);
}
/* Logo WeTrail (SVG inline) */
.projLogo--wetrail{
  position: relative;
  width: 160px;
  height: 35px;
  display: block;
  overflow: visible;
  margin-bottom: 4px;
}
.projLogo--wetrail .logoLayer{
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 35px;
}
.projLogo--wetrail .logoLayer svg{
  display: block;
  width: 160px;
  height: 35px;
}
.projLogo--wetrail .logoLayer--mono{
  opacity: 0.55;
  transition: opacity .3s var(--ease);
}
.projLogo--wetrail .logoLayer--mono svg{
  filter: brightness(0);
}
.projLogo--wetrail .logoLayer--color svg{
  filter: none;
}
.projLogo--wetrail .logoLayer--color{
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.projLogo--wetrail .logoLayer svg a{
  pointer-events: none;
}
[data-theme="light"] .projLogo--wetrail .logoLayer--mono svg{
  filter: brightness(0);
}
[data-theme="dark"] .projLogo--wetrail .logoLayer--mono svg{
  filter: brightness(0) invert(1);
}
@media (hover: hover) and (pointer: fine){
  .projCard:hover .projLogo--wetrail .logoLayer--mono,
  .projCard:has(a:focus-visible) .projLogo--wetrail .logoLayer--mono{
    opacity: 0;
  }
  .projCard:hover .projLogo--wetrail .logoLayer--color,
  .projCard:has(a:focus-visible) .projLogo--wetrail .logoLayer--color{
    opacity: 1;
  }
}

/* Logo Bpifrance avec technique 2 couches (mono + couleur) */
.projLogo--bpifrance-tnp{
  position: relative;
  width: 156px;
  height: 24px;
  display: block !important;
  overflow: visible !important;
  align-items: normal !important;
  justify-content: flex-start !important; /* Alignement à gauche */
  margin-left: 0 !important; /* Force alignement à gauche */
  margin-right: auto !important; /* Force alignement à gauche */
  margin-bottom: 4px; /* Garder la même marge que .projLogo */
  text-align: left !important; /* Force alignement texte à gauche */
  align-self: flex-start !important; /* Alignement à gauche dans le flex container parent */
  padding-left: 0 !important; /* Supprime tout padding à gauche */
  padding-right: 0 !important;
}

.projLogo--bpifrance-tnp .logoLayer{
  position: absolute;
  top: 0;
  left: 0 !important; /* Alignement à gauche explicite */
  right: auto !important; /* Empêcher tout décalage vers la droite */
  width: 156px;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.projLogo--bpifrance-tnp .logoLayer svg{
  display: block;
  width: 156px;
  height: 24px;
  max-width: 100%;
  max-height: 100%;
  margin: 0 !important; /* Supprime toute marge */
  padding: 0 !important; /* Supprime tout padding */
  vertical-align: top; /* Alignement vertical haut */
  position: relative;
  left: 0 !important; /* Force alignement à gauche */
  transform: translateX(0) !important; /* Force position à gauche */
}

.projLogo--bpifrance-tnp .logoLayer svg a{
  pointer-events: none; /* Désactiver les clics sur les liens internes du SVG */
}

/* Couche mono : visible par défaut, adaptée au thème */
.projLogo--bpifrance-tnp .logoLayer--mono{
  opacity: 0.55;
  transition: opacity 0.18s var(--ease);
}

/* Light theme : logo noir #0A0E1A */
[data-theme="light"] .projLogo--bpifrance-tnp .logoLayer--mono svg{
  filter: brightness(0); /* Noir */
}

/* Dark theme : logo blanc */
[data-theme="dark"] .projLogo--bpifrance-tnp .logoLayer--mono svg{
  filter: brightness(0) invert(1); /* Blanc */
}

/* "bpi" (cls-4) plus transparent dans la couche mono uniquement */
.projLogo--bpifrance-tnp .logoLayer--mono svg .cls-4{
  opacity: 0.25; /* Plus transparent que le reste (0.55 * 0.25 ≈ 0.14) */
}

/* Couche couleur : cachée par défaut, visible au hover */
.projLogo--bpifrance-tnp .logoLayer--color{
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}

.projLogo--bpifrance-tnp .logoLayer--color svg{
  filter: none; /* Pas de filter, couleurs originales */
}

/* Hover : afficher couleur, cacher mono - RÈGLES SPÉCIFIQUES POUR BPIFRANCE SEULEMENT */
@media (hover: hover) and (pointer: fine){
  /* BPIFRANCE : cacher mono, afficher couleur */
  .projCard:hover .projLogo--bpifrance-tnp .logoLayer--mono,
  .projCard:has(a:focus-visible) .projLogo--bpifrance-tnp .logoLayer--mono{
    opacity: 0 !important;
  }
  .projCard:hover .projLogo--bpifrance-tnp .logoLayer--color,
  .projCard:has(a:focus-visible) .projLogo--bpifrance-tnp .logoLayer--color{
    opacity: 1 !important;
  }
  /* PROTECTION : s'assurer que les autres logos ne sont PAS affectés */
  .projCard:hover .projLogo--bpifrance-tnp .logoLayer--color svg{
    filter: none !important; /* Couleurs originales Bpifrance uniquement */
  }
}

/* Support prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .projLogo--bpifrance-tnp .logoLayer--mono,
  .projLogo--bpifrance-tnp .logoLayer--color{
    transition: none !important;
  }
}

/* ============================================
   ISOLATION DES LOGOS - CHAQUE LOGO GARDE SES COULEURS
   ============================================ */

/* S'assurer que les règles de hover ne s'appliquent qu'au logo concerné */
.projLogo--bpifrance-tnp .logoLayer--color svg{
  /* Forcer les couleurs originales du logo Bpifrance uniquement */
  filter: none !important;
}

.projLogo--movinmotion .logoLayer--color svg{
  /* Forcer les couleurs originales du logo Movinmotion uniquement */
  filter: none !important;
}

/* Logo Movinmotion - même traitement que Bpifrance */
.projLogo--movinmotion{
  position: relative;
  width: 156px;
  height: 24px;
  display: block !important;
  overflow: visible !important;
  align-items: normal !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-bottom: 4px;
}

.projLogo--movinmotion .logoLayer{
  position: absolute;
  top: 0;
  left: 0 !important;
  right: auto !important;
  width: 156px;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.projLogo--movinmotion .logoLayer svg{
  display: block;
  width: 156px;
  height: 24px;
  max-width: 100%;
  max-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top;
  position: relative;
  left: 0 !important;
  pointer-events: none; /* Désactiver les interactions sur le SVG */
}
.projLogo--movinmotion .logoLayer svg a{
  pointer-events: none; /* Désactiver les liens dans le SVG */
}

.projLogo--movinmotion .logoLayer--mono{
  opacity: 0.55;
  transition: opacity 0.18s var(--ease);
}

/* Light theme : logo noir #0A0E1A */
[data-theme="light"] .projLogo--movinmotion .logoLayer--mono svg{
  filter: brightness(0); /* Noir */
}

/* Dark theme : logo blanc */
[data-theme="dark"] .projLogo--movinmotion .logoLayer--mono svg{
  filter: brightness(0) invert(1); /* Blanc */
}

.projLogo--movinmotion .logoLayer--color{
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}

.projLogo--movinmotion .logoLayer--color svg{
  filter: none;
}

/* Hover : afficher couleur, cacher mono - RÈGLES SPÉCIFIQUES POUR MOVINMOTION SEULEMENT */
@media (hover: hover) and (pointer: fine){
  /* MOVINMOTION : cacher mono, afficher couleur */
  .projCard:hover .projLogo--movinmotion .logoLayer--mono,
  .projCard:has(a:focus-visible) .projLogo--movinmotion .logoLayer--mono{
    opacity: 0 !important;
  }
  .projCard:hover .projLogo--movinmotion .logoLayer--color,
  .projCard:has(a:focus-visible) .projLogo--movinmotion .logoLayer--color{
    opacity: 1 !important;
  }
  /* PROTECTION : s'assurer que les autres logos ne sont PAS affectés */
  .projCard:hover .projLogo--movinmotion .logoLayer--color svg{
    filter: none !important; /* Couleurs originales Movinmotion uniquement */
  }
}

@media (prefers-reduced-motion: reduce){
  .projLogo--movinmotion .logoLayer--mono,
  .projLogo--movinmotion .logoLayer--color{
    transition: none !important;
  }
}

/* Logo Doyoogo - même traitement que Bpifrance et Movinmotion */
.projLogo--doyoogo{
  position: relative;
  width: 147px; /* Ajuster selon la taille réelle du logo Doyoogo */
  height: 42px; /* Ajuster selon la taille réelle du logo Doyoogo */
  display: block !important;
  overflow: visible !important;
  align-items: normal !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-bottom: 4px;
}

.projLogo--doyoogo .logoLayer{
  position: absolute;
  top: 0;
  left: 0 !important;
  right: auto !important;
  width: 147px; /* Ajuster selon la taille réelle du logo Doyoogo */
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.projLogo--doyoogo .logoLayer svg{
  display: block;
  width: 147px; /* Ajuster selon la taille réelle du logo Doyoogo */
  height: 42px; /* Ajuster selon la taille réelle du logo Doyoogo */
  max-width: 100%;
  max-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top;
  position: relative;
  left: 0 !important;
  pointer-events: none; /* Désactiver les interactions sur le SVG */
}

.projLogo--doyoogo .logoLayer svg a{
  pointer-events: none; /* Désactiver les liens dans le SVG */
}

.projLogo--doyoogo .logoLayer--mono{
  opacity: 0.55;
  transition: opacity 0.18s var(--ease);
}

/* Light theme : logo noir #0A0E1A */
[data-theme="light"] .projLogo--doyoogo .logoLayer--mono svg{
  filter: brightness(0); /* Noir */
}

/* Dark theme : logo blanc */
[data-theme="dark"] .projLogo--doyoogo .logoLayer--mono svg{
  filter: brightness(0) invert(1); /* Blanc */
}

.projLogo--doyoogo .logoLayer--color{
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}

.projLogo--doyoogo .logoLayer--color svg{
  filter: none; /* Couleurs originales */
}

/* Hover : afficher couleur, cacher mono - RÈGLES SPÉCIFIQUES POUR DOYOOGO SEULEMENT */
@media (hover: hover) and (pointer: fine){
  /* DOYOOGO : cacher mono, afficher couleur */
  .projCard:hover .projLogo--doyoogo .logoLayer--mono,
  .projCard:has(a:focus-visible) .projLogo--doyoogo .logoLayer--mono{
    opacity: 0 !important;
  }
  .projCard:hover .projLogo--doyoogo .logoLayer--color,
  .projCard:has(a:focus-visible) .projLogo--doyoogo .logoLayer--color{
    opacity: 1 !important;
  }
  /* PROTECTION : s'assurer que les autres logos ne sont PAS affectés */
  .projCard:hover .projLogo--doyoogo .logoLayer--color svg{
    filter: none !important; /* Couleurs originales Doyoogo uniquement */
  }
}

@media (prefers-reduced-motion: reduce){
  .projLogo--doyoogo .logoLayer--mono,
  .projLogo--doyoogo .logoLayer--color{
    transition: none !important;
  }
}

/* Logo Valvital - noir en light, blanc en dark, couleurs au hover */
.projLogo--valvital{
  position: relative;
  width: 120px; /* Taille réduite pour la card */
  height: 57px; /* Taille réduite proportionnelle */
  display: block !important;
  overflow: visible !important;
  align-items: normal !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-bottom: 4px;
}

.projLogo--valvital .logoLayer{
  position: absolute;
  top: 0;
  left: 0 !important;
  right: auto !important;
  width: 120px; /* Taille réduite pour la card */
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.projLogo--valvital .logoLayer svg{
  display: block;
  width: 120px; /* Taille réduite pour la card */
  height: 57px; /* Taille réduite proportionnelle */
  max-width: 100%;
  max-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top;
  position: relative;
  left: 0 !important;
  pointer-events: none; /* Désactiver les interactions sur le SVG */
}

.projLogo--valvital .logoLayer svg a{
  pointer-events: none; /* Désactiver les liens dans le SVG */
}

/* Couche mono : visible par défaut, adaptée au thème */
.projLogo--valvital .logoLayer--mono{
  opacity: 0.55;
  transition: opacity 0.18s var(--ease);
}

/* Light theme : logo noir #0A0E1A */
[data-theme="light"] .projLogo--valvital .logoLayer--mono svg{
  filter: brightness(0); /* Noir */
}

/* Dark theme : logo blanc */
[data-theme="dark"] .projLogo--valvital .logoLayer--mono svg{
  filter: brightness(0) invert(1); /* Blanc */
}

/* Couche couleur : cachée par défaut, visible au hover */
.projLogo--valvital .logoLayer--color{
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}

.projLogo--valvital .logoLayer--color svg{
  filter: none; /* Couleurs originales */
}

/* Hover : afficher couleur, cacher mono - RÈGLES SPÉCIFIQUES POUR VALVITAL SEULEMENT */
@media (hover: hover) and (pointer: fine){
  /* VALVITAL : cacher mono, afficher couleur */
  .projCard:hover .projLogo--valvital .logoLayer--mono,
  .projCard:has(a:focus-visible) .projLogo--valvital .logoLayer--mono{
    opacity: 0 !important;
  }
  .projCard:hover .projLogo--valvital .logoLayer--color,
  .projCard:has(a:focus-visible) .projLogo--valvital .logoLayer--color{
    opacity: 1 !important;
  }
  /* PROTECTION : s'assurer que les couleurs sont bien affichées sans filtre */
  .projCard:hover .projLogo--valvital .logoLayer--color svg{
    filter: none !important; /* Couleurs originales Valvital uniquement */
  }
}

@media (prefers-reduced-motion: reduce){
  .projLogo--valvital .logoLayer--mono,
  .projLogo--valvital .logoLayer--color{
    transition: none !important;
  }
}

.projTitle{
  font-family: var(--serif);
  font-weight:400;
  font-size: 20px;
  letter-spacing:-.02em;
  line-height: 1.15;
  margin: 0;
}

.projMeta{
  color: var(--muted2);
  font-weight: 700;
  font-size: 12px;
  line-height:1.4;
  letter-spacing:.02em;
  margin: 0;
  text-transform: uppercase;
}

/* Tags harmonisés avec hero */
.projTags{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 4px;
}

.tag--project{
  font-size: 11px;
  padding: 6px 12px;
}

/* Support prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .projCard,
  .projLogo{
    transition: none;
  }
  @media (hover: hover) and (pointer: fine){
    .projCard:hover{
      transform: none;
    }
  }
}

/* Floating hover preview — PREMIUM */
.preview{
  position:fixed;
  left: 20px; top: 20px;
  width: 440px;
  border-radius: 24px;
  border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--paper) 95%, var(--card));
  box-shadow: var(--shadow);
  overflow:hidden;
  z-index: 80;
  transform: translate3d(0,0,0) scale(.96);
  opacity: 0;
  pointer-events:none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  backdrop-filter: blur(20px);
}
.preview.show{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}
.prevImg{height: 240px; border-bottom:1px solid color-mix(in srgb, var(--stroke) 55%, transparent); overflow: hidden}
.prevImg img{width:100%;height:100%;object-fit:cover;display:block}
.prevBody{padding:20px 22px}
.prevTitle{
  font-family: var(--serif);
  font-weight:400;
  font-size: 28px;
  margin: 0 0 10px;
  line-height:1.06;
  letter-spacing:-.02em;
}
.prevText{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.75;
  font-size: 14px;
}

/* ============================================
   DIFFÉRENCE — ÉDITORIAL IMMERSIF
   ============================================ */

/* Section plein écran + fond immersif */
#difference.sectionWrapper{
  position: relative;
  min-height: 100svh;
  padding: 160px 0 120px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, var(--section-bg-light)) 0%, var(--bg) 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
#difference.sectionWrapper::before{
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  background:
    radial-gradient(1200px 600px at 18% 15%, color-mix(in srgb, var(--a1) 35%, transparent), transparent 60%),
    radial-gradient(1000px 520px at 80% 35%, color-mix(in srgb, var(--a2) 30%, transparent), transparent 65%),
    radial-gradient(900px 540px at 60% 85%, color-mix(in srgb, var(--a3) 28%, transparent), transparent 70%);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}

#difference.sectionWrapper > .sectionContent{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
}

#difference .sectionKicker{
  letter-spacing: .18em;
}

#difference .headline{
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

#difference .promiseLine{
  margin: 6px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  max-width: 680px;
}

#difference .benefits{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}
@media (max-width: 980px){ #difference .benefits{grid-template-columns:1fr; gap:20px} }

#difference .benefitCard{
  position: relative;
  border-radius: var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  background: color-mix(in srgb, var(--paper) 96%, var(--card));
  padding: 28px 26px 30px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#difference .benefitCard::before{
  content: '';
  position: absolute;
  inset: -45%;
  background:
    radial-gradient(42% 42% at 20% 20%, rgba(180, 120, 255, .35), transparent 60%),
    radial-gradient(45% 45% at 80% 30%, rgba(120, 200, 255, .28), transparent 60%),
    radial-gradient(40% 40% at 50% 80%, rgba(255, 120, 220, .25), transparent 60%);
  opacity: 0;
  filter: blur(22px);
  transition: opacity .4s var(--ease);
  animation: benefitGlow 4.6s ease-in-out infinite;
  pointer-events: none;
}
#difference .benefitCard:nth-child(1)::before{
  background:
    radial-gradient(45% 45% at 15% 25%, rgba(140, 200, 255, .36), transparent 60%),
    radial-gradient(42% 42% at 80% 20%, rgba(120, 140, 255, .28), transparent 60%),
    radial-gradient(40% 40% at 55% 80%, rgba(80, 220, 210, .24), transparent 60%);
}
#difference .benefitCard:nth-child(2)::before{
  background:
    radial-gradient(46% 46% at 20% 30%, rgba(190, 120, 255, .36), transparent 60%),
    radial-gradient(42% 42% at 85% 25%, rgba(255, 140, 220, .28), transparent 60%),
    radial-gradient(40% 40% at 55% 80%, rgba(120, 200, 255, .24), transparent 60%);
}
#difference .benefitCard:nth-child(3)::before{
  background:
    radial-gradient(46% 46% at 20% 30%, rgba(120, 230, 200, .32), transparent 60%),
    radial-gradient(42% 42% at 80% 25%, rgba(120, 170, 255, .30), transparent 60%),
    radial-gradient(40% 40% at 55% 80%, rgba(255, 120, 210, .24), transparent 60%);
}
#difference .benefitCard:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow2);
  border-color: color-mix(in srgb, var(--a1) 35%, var(--stroke));
}
#difference .benefitCard:hover::before{
  opacity: 1;
}

#difference .benefitCard h3{
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 34px);
  color: var(--text);
  letter-spacing: -.01em;
}
#difference .benefitCard p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
  font-size: 14px;
}
#difference .signatureLine{
  margin: 30px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted2);
  letter-spacing: .04em;
}

@keyframes benefitGlow{
  0%{ transform: translate3d(-6px,4px,0) }
  50%{ transform: translate3d(22px,-14px,0) }
  100%{ transform: translate3d(-6px,4px,0) }
}

@media (prefers-reduced-motion: reduce){
  #difference .benefitCard::before{ animation: none }
  .serviceCard::before{ animation: none }
  #difference .benefitCard,
  #difference .benefitCard:hover{ transform: none }
}

/* ============================================
   FAQ — PROPRE
   ============================================ */

.faq{
  margin-top: 32px;
  display:grid;
  gap: 16px;
}
details{
  border-radius: var(--r);
  border:1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
  background: color-mix(in srgb, var(--paper) 95%, var(--card));
  padding: 20px 24px;
  transition:.2s var(--ease);
}
details:hover{
  border-color: color-mix(in srgb, var(--stroke2) 80%, transparent);
}
summary{
  cursor:pointer;
  font-weight: 800;
  color: var(--text);
  list-style:none;
  font-size: 15px;
}
summary:focus-visible{
  outline: 2px solid var(--a1);
  outline-offset: 3px;
  border-radius: 8px;
}
summary::-webkit-details-marker{display:none}
details p{
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 14px;
}

/* ============================================
   CONTACT — PREMIUM 2 COLONNES
   ============================================ */

/* Fond opaque pour la section contact entière (full width) */
section#contact.sectionWrapper,
#contact.sectionWrapper {
  background: var(--bg);
  position: relative;
  z-index: 1;
  /* Full width comme le hero */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 200px 0 80px;
}

/* Le sectionContent garde le container pour le contenu */
section#contact.sectionWrapper > .sectionContent {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

/* Footer dans la section contact hérite du fond et du container */
section#contact footer {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

.contactGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 0;
  padding-top: 0;
}
@media (max-width: 980px){
  .contactGrid{
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Colonne gauche */
.contactLeft{
  position: sticky;
  top: 0;
  height: fit-content;
  padding-top: 0;
  margin-top: 0;
}
.contactLeft .sectionKicker{
  margin-top: 0;
  margin-bottom: 16px;
  padding-top: 0;
}
.contactLeft .headline{
  margin-top: 0;
  margin-bottom: 24px;
  padding-top: 0;
}
@media (max-width: 980px){
  .contactLeft{
    position: static;
  }
}

.contactBullets{
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contactBullets li{
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
.contactBullets li::before{
  content: "→";
  position: absolute;
  left: 0;
  color: var(--a2);
  font-weight: 600;
}

.contactProof{
  margin: 32px 0 0;
  font-size: 13px;
  color: var(--muted2);
  line-height: 1.5;
}

/* Colonne droite : formulaire glass */
.contactFormWrapper{
  position: relative;
  border-radius: var(--r2);
  border: 1px solid color-mix(in srgb, var(--stroke2) 80%, transparent);
  background: color-mix(in srgb, var(--paper) 92%, var(--card));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 40px;
  box-shadow: var(--shadow2);
  align-self: start;
  margin-top: 0;
}
@media (max-width: 980px){
  .contactFormWrapper{
    padding: 32px 24px;
  }
}

/* Honeypot */
.honeypot{
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Champs formulaire */
.formField{
  margin-bottom: 24px;
}
.formField:last-of-type{
  margin-bottom: 32px;
}

.formField label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.formField .optional{
  font-weight: 400;
  color: var(--muted2);
  font-size: 12px;
}

.formField input[type="text"],
.formField input[type="email"],
.formField textarea{
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--stroke) 60%, transparent);
  background: color-mix(in srgb, var(--paper) 98%, var(--card));
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  transition: all .2s var(--ease);
  outline: none;
}
.formField input[type="text"]:focus,
.formField input[type="email"]:focus,
.formField textarea:focus{
  border-color: var(--a1);
  background: color-mix(in srgb, var(--paper) 100%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 10%, transparent);
}
.formField input[type="text"]:invalid:not(:focus):not(:placeholder-shown),
.formField input[type="email"]:invalid:not(:focus):not(:placeholder-shown){
  border-color: color-mix(in srgb, var(--a3) 50%, transparent);
}

.formField textarea{
  resize: vertical;
  min-height: 100px;
}

.charCount{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted2);
  text-align: right;
}

/* Chips */
.chipsGroup{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chipInput{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all .2s var(--ease);
  border: 1.5px solid color-mix(in srgb, var(--stroke) 50%, transparent);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  color: var(--muted);
}
.chip:hover{
  border-color: color-mix(in srgb, var(--a1) 40%, transparent);
  background: color-mix(in srgb, var(--a1) 8%, transparent);
  color: var(--text);
  transform: translateY(-1px);
}
.chipInput:checked + .chip{
  border-color: var(--a1);
  background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 20%, transparent), color-mix(in srgb, var(--a2) 15%, transparent));
  color: var(--text);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--a1) 15%, transparent);
}
.chipInput:focus-visible + .chip{
  outline: 2px solid var(--a1);
  outline-offset: 2px;
}

.chipError{
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--a3);
  min-height: 18px;
}
.chipError:empty{
  display: none;
}

/* Bouton submit */
.contactFormWrapper .btn.primary{
  width: 100%;
  margin-top: 8px;
}

.submitHint{
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted2);
  text-align: center;
}

/* Messages de statut du formulaire */
#formStatus{
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  min-height: 20px;
  display: none;
}
#formStatus.success{
  display: block;
  background: color-mix(in srgb, var(--a2) 15%, transparent);
  color: color-mix(in srgb, var(--a2) 90%, var(--text));
  border: 1px solid color-mix(in srgb, var(--a2) 40%, transparent);
}
#formStatus.error{
  display: block;
  background: color-mix(in srgb, var(--a3) 15%, transparent);
  color: color-mix(in srgb, var(--a3) 90%, var(--text));
  border: 1px solid color-mix(in srgb, var(--a3) 40%, transparent);
}
#formStatus:empty{
  display: none;
}

/* Bouton "Remonter en haut" */
.backToTop{
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom));
  right: max(24px, env(safe-area-inset-right));
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--stroke2) 80%, transparent);
  background: color-mix(in srgb, var(--paper) 95%, var(--card));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s var(--ease);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  box-shadow: var(--shadow3);
}
.backToTop.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.backToTop:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: color-mix(in srgb, var(--a1) 40%, transparent);
  background: color-mix(in srgb, var(--paper) 98%, var(--card));
}
.backToTop:focus-visible{
  outline: 2px solid var(--a1);
  outline-offset: 3px;
}
.backToTop svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.backToTop span{
  white-space: nowrap;
}
@media (max-width: 640px){
  .backToTop{
    padding: 10px 14px;
    font-size: 12px;
  }
  .backToTop span{
    display: none;
  }
  .backToTop svg{
    width: 18px;
    height: 18px;
  }
}

/* ============================================
   FOOTER — ÉLÉGANT & ALIGNÉ
   ============================================ */

footer.siteFooter{
  margin-top: 80px;
  padding: 72px 0 40px;
  border-top: 1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  background: transparent;
  color: var(--muted2);
  font-size: 14px;
}
.footerInner{
  max-width: none;
  margin: 0;
  padding: 0 env(safe-area-inset-left) 48px env(safe-area-inset-right);
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
  align-items: flex-start;
  justify-content: space-between;
}
.footerBrand{
  flex: 1.3;
  min-width: 260px;
}
.footerBrand-title{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.footerBrand-name{
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -.02em;
  color: var(--text);
}
[data-theme="light"] .footerBrand-name{
  color: #081d71;
}
.footerBrand-baseline{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--muted2);
}
.footerBrand-text{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 42ch;
}
.footerBrand-location{
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted2);
}
.footerNav{
  flex: 1;
  min-width: 240px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 72px;
}
.footerNav-title{
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted2);
}
.footerNav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footerNav-list a{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.footerNav-list a:hover{
  color: var(--text);
}
.footerNav-list a:focus-visible{
  outline: 2px solid var(--a1);
  outline-offset: 2px;
  border-radius: 999px;
}
.footerMarquee{
  margin-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--stroke) 30%, transparent);
  opacity: .78;
  overflow: hidden;
}
.footerMarquee-track{
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: footer-marquee 36s linear infinite;
}
.footerMarquee-text{
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--muted2);
  padding: 10px 0;
}
.footerMarquee:hover .footerMarquee-track{
  animation-play-state: paused;
}
@keyframes footer-marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
.footerLegal{
  max-width: none;
  margin: 0;
  padding: 16px env(safe-area-inset-left) 0 env(safe-area-inset-right);
  font-size: 12px;
  color: var(--muted2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footerLegal p{
  margin: 0;
}
@media (max-width: 720px){
  .footerInner{
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .footerNav{
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
  .footerMarquee{
    opacity: .85;
  }
  .footerMarquee-track{
    animation: none;
  }
  .footerLegal{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce){
  .footerMarquee-track{
    animation: none;
  }
}

/* ============================================
   PROJECT PAGE SPECIFIC
   ============================================ */

.projetHeader{
  margin-bottom: 64px;
}
.projetHeader .kickerRow{
  margin-bottom: 20px;
}
.projetContent{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 48px;
}
@media (max-width: 980px){ .projetContent{grid-template-columns:1fr; gap:48px} }

.projetImage{
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
  background: color-mix(in srgb, var(--paper) 95%, var(--card));
}
.projetImage img{
  width: 100%;
  height: auto;
  display: block;
}

.projetSection{
  margin-top: 56px;
}
.projetSection h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  margin: 0 0 16px;
  line-height: 1.08;
  letter-spacing:-.02em;
}
.projetSection p{
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 20px;
  font-size: 15px;
}
.projetSection ul{
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15px;
}
.projetSection li{
  margin: 10px 0;
}

.projetCTA{
  margin-top: 64px;
  padding: 48px;
  border-radius: var(--r2);
  border: 1px solid color-mix(in srgb, var(--stroke) 40%, transparent);
  background: color-mix(in srgb, var(--paper) 98%, var(--card));
  text-align: center;
}
@media (max-width: 980px){
  .projetCTA{
    margin-top: 48px;
    padding: 40px 32px;
  }
}
.projetCTA p{
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 16px;
}

/* ============================================
   PROJECT BPIFRANCE-TNP — PREMIUM CASE STUDY
   Structure stricte : sections séparées, contraintes visuelles strictes
   ============================================ */

/* SECTION 1 — HERO */
.projetHero{
  margin-bottom: 0;
}
.projetHero br{
  display: none;
}
.projetBaselineWrapper br,
.projetBaselineWrapper p:empty{
  display: none;
}
.projetBaselineWrapper > p:has(div){
  margin: 0;
  padding: 0;
  display: contents;
}
.projetBaselineWrapper{
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
/* Cacher les <p> générés par Markdown qui enveloppent les divs */
.projetBaselineWrapper > p:has(> .projetBaselineWrapper),
.projetBaselineWrapper > p:has(> .projetBaseline),
.projetBaselineWrapper > p:has(> .projetBaselineCTA),
.projetBaselineWrapper > p:empty{
  display: none;
}
.projetBaselineWrapper > p:has(div){
  display: contents;
}
@media (max-width: 980px){
  .projetBaselineWrapper{
    flex-direction: column;
    gap: 20px;
  }
}
.projetBaseline{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 60ch;
  flex: 1;
  min-width: 0;
}
.projetBaselineCTA{
  flex-shrink: 0;
  margin-top: 0;
  margin-left: auto;
  text-align: right;
}
@media (max-width: 980px){
  .projetBaselineCTA{
    margin-left: 0;
    text-align: left;
  }
}
.projetHeroImage{
  margin-top: 48px;
  width: 100%;
  max-width: 100%;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stroke) 40%, transparent);
  background: color-mix(in srgb, var(--paper) 98%, var(--card));
  aspect-ratio: 16 / 9;
  margin-left: auto;
  margin-right: auto;
}
.projetHeroImage br{
  display: none;
}
@media (max-width: 980px){
  .projetHeroImage{
    margin-top: 40px;
  }
}
.projetHeroImage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 auto;
}

/* SECTION 2 — CONTEXTE (texte seul à droite) */
.projetContext{
  margin-top: 120px;
  margin-bottom: 120px;
  max-width: 55ch;
  margin-left: auto;
  margin-right: 0;
  text-align: left;
}
@media (max-width: 980px){
  .projetContext{
    margin-top: 80px;
    margin-bottom: 80px;
    margin-right: auto;
  }
}
.projetContext h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  margin: 0 0 24px;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.projetContext p{
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

/* SECTION 3 — OVERVIEW (image composite max 60vh, full width) */
.projetOverview{
  margin-top: 96px;
}
@media (max-width: 980px){
  .projetOverview{
    margin-top: 64px;
  }
}
.projetOverviewImage{
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stroke) 40%, transparent);
  background: color-mix(in srgb, var(--paper) 98%, var(--card));
}
.projetOverviewImage p{
  margin: 0;
  padding: 0;
  display: contents; /* Rendre le p transparent pour éviter les espaces */
}
.projetOverviewImage img{
  width: 100%;
  height: auto;
  display: block;
}

/* SECTION 4 — LOGO OVERVIEW */
.projetLogoOverview{
  margin-top: 128px;
  margin-bottom: 128px;
  padding-bottom: 100px;
}
@media (max-width: 980px){
  .projetLogoOverview{
    margin-top: 88px;
    margin-bottom: 88px;
    padding-bottom: 80px;
  }
}
.projetLogoOverview h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  margin: 0 0 100px;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.logoOverviewGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
@media (max-width: 980px){
  .logoOverviewGrid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.logoOverviewItem{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.logoOverviewItem img{
  width: auto;
  max-width: none;
  max-height: 120px;
  height: auto;
  display: block;
}
.logoBadge{
  justify-content: center;
}
.logoBadgeSwatch{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  flex: 0 0 auto;
}
.logoBadgeSwatch--light{
  border-color: color-mix(in srgb, var(--stroke) 85%, transparent);
}
.logoBadgeDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffae46 0%, #ff9755 19%, #ff5a7d 74%, #ff428d 100%);
}
.logoThemeDark{
  display: none;
}
[data-theme="dark"] .logoThemeLight{
  display: none;
}
[data-theme="dark"] .logoThemeDark{
  display: block;
}

/* Metaphore — logo overview plus aéré et logos plus grands */
.projet-metaphore .projetLogoOverview{
  margin-top: 144px;
  margin-bottom: 144px;
}
@media (max-width: 980px){
  .projet-metaphore .projetLogoOverview{
    margin-top: 96px;
    margin-bottom: 96px;
  }
}
.projet-metaphore .logoOverviewGrid{
  gap: 48px;
}
@media (max-width: 980px){
  .projet-metaphore .logoOverviewGrid{
    gap: 32px;
  }
}
.projet-metaphore .logoOverviewItem{
  gap: 22px;
}
.projet-metaphore .logoOverviewItem img{
  height: 75px;
  max-height: none;
}

/* SECTION 4 — RÔLE & CONTRIBUTIONS (texte gauche + image droite) */
.projetRoleWrapper{
  margin-top: 96px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.projetRoleWrapper > * {
  min-width: 0;
}
.projetRoleWrapper br,
.projetRoleWrapper p:empty{
  display: none;
}
@media (max-width: 980px){
  .projetRoleWrapper{
    margin-top: 64px;
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
.projetRoleText{
  max-width: none;
}
.projetRoleText h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  margin: 0 0 24px;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.projetRoleText .projetRoleList{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.projetRoleText .projetRoleList > p{
  margin: 0;
  padding: 0;
  display: contents;
}
.projetRoleText .projetRoleList li{
  position: relative;
  padding-left: 24px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
}
.projetRoleText .projetRoleList li:last-child{
  margin-bottom: 0;
}
.projetRoleText .projetRoleList li p{
  margin: 0;
  padding: 0;
  display: inline;
}
.projetRoleText .projetRoleList li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: var(--a2);
}
.projetRoleWrapper br,
.projetRoleWrapper > p:has(br),
.projetRoleImage br,
.projetRoleImage p{
  display: none;
}
.projetRoleText br,
.projetRoleText > p:has(br){
  display: none;
}
.projetRoleImage{
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stroke) 40%, transparent);
  background: color-mix(in srgb, var(--paper) 98%, var(--card));
  aspect-ratio: 4 / 3;
}
.projetRoleImage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Image sans encadré pour illustrations avec fond transparent */
.projetRoleImage--no-frame{
  border-radius: 0;
  border: none;
  background: transparent;
  overflow: visible;
  aspect-ratio: auto;
}
.projetRoleImage--no-frame img{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* SECTION 5 — GALERIE (grille 2 colonnes, max 70vh) */
.projetGalleryFinal{
  margin-top: 96px;
}
@media (max-width: 980px){
  .projetGalleryFinal{
    margin-top: 64px;
  }
}
.projetGalleryFinal .projetGalleryGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 980px){
  .projetGalleryFinal .projetGalleryGrid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.projetGalleryFinal .projetGalleryItem{
  width: 100%;
  border-radius: var(--r2);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stroke) 40%, transparent);
  background: color-mix(in srgb, var(--paper) 98%, var(--card));
  aspect-ratio: 16 / 10;
}
.projetGalleryFinal .projetGalleryItem img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Section couleurs */
.projetColors{
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
@media (max-width: 980px){
  .projetColors{
    margin-top: 64px;
    gap: 20px;
  }
}
.projetColorBlock{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 20px;
  border-radius: var(--r2);
  border: 1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
  background: color-mix(in srgb, var(--paper) 95%, var(--card));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.projetColorBlock:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
}
.projetColorSwatch{
  width: 80px;
  height: 80px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
}
.projetColorHex{
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--sans);
  letter-spacing: .05em;
}

/* Navigation retour - style funtownstudio */
.projetNav{
  margin-top: 64px;
  text-align: center;
  padding-bottom: 0;
}
@media (max-width: 980px){
  .projetNav{
    margin-top: 48px;
  }
}