/* ==========================================================================
   GROWTHLINE — DESIGN SYSTEM [VARIANTE TEST 2 — pastel scandinave]
   Fond crème chaud, formes organiques, coins XXL, ombres très douces.
   Palette pastel (sauge / lavande / bleu ciel / rose poudré / pêche).
   Fichier isolé : n'affecte pas le site de production.
   ========================================================================== */

:root{
  /* --- Couleurs --- */
  --bg:            #F7F4EF;
  --bg-soft:       #F1ECE2;
  --bg-elevated:   #FFFFFF;
  --surface:       rgba(46,43,39,0.04);
  --surface-hover: rgba(46,43,39,0.07);
  --border:        rgba(46,43,39,0.12);
  --border-soft:   rgba(46,43,39,0.07);

  --ink:           #2E2B27;
  --ink-dim:       #6B655D;
  --ink-mute:      #776E5D;

  --sage:          #B9D9C3;
  --lavender:      #D7C5F4;
  --sky:           #A7D8FF;
  --pink:          #FFB7C5;
  --peach:         #FFC7A0;

  /* --- Touches vives, réservées aux petits éléments décoratifs (icônes, puces) --- */
  --pop-yellow:    #FFD84D;
  --pop-coral:     #FF8A65;
  --pop-cyan:      #6DD3FF;
  --pop-mint:      #8CFF98;

  --accent:        #7FA98C;
  --accent-bright: #97C0A2;
  --accent-ink:    #1E2E22;
  --accent-dim:    rgba(127,169,140,0.2);
  --accent-line:   rgba(127,169,140,0.55);
  --accent-text:   #4C7657;

  --accent-2:      var(--lavender);
  --accent-2-dim:  rgba(215,197,244,0.3);
  --accent-2-line: rgba(215,197,244,0.6);
  --accent-3:      var(--pink);
  --accent-3-dim:  rgba(255,183,197,0.32);

  --inverse-bg:    #232B26;
  --inverse-ink:   #F7F4EF;

  --soft-shadow: 0 24px 60px -30px rgba(46,43,39,.18);

  /* --- Typographie : display en gras (General Sans 700) + un corps de texte
     distinct (Plus Jakarta Sans) pour le contraste "titre massif / texte
     lisible" propre aux sites d'agence premium --- */
  --font-display: 'General Sans', 'Inter', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-accent: 'General Sans', 'Inter', sans-serif;

  /* --- Rythme --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  --container: 1360px;
  --container-pad: clamp(20px, 5vw, 64px);

  /* --- Forme : coins très généreux, aspect "organique" --- */
  --radius-sm: 14px;
  --radius-md: 26px;
  --radius-lg: 44px;
  --radius-full: 999px;

  --shadow-soft: 0 40px 100px -50px rgba(0,0,0,0.7);
  --shadow-lift: 0 20px 60px -25px rgba(0,0,0,0.55);

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur: .6s;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); overflow-x:hidden; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }

::selection{ background:var(--accent); color:var(--accent-ink); }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--container-pad);
  padding-right:var(--container-pad);
}

/* --- Contenu légal (mentions-legales.html) --- */
.legal-content{ max-width:74ch; }
.legal-content h2{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; margin:44px 0 14px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color:var(--ink-dim); margin-bottom:14px; line-height:1.75; }
.legal-placeholder{ color:#945000; background:rgba(255,190,110,.12); padding:1px 7px; border-radius:5px; font-weight:600; }

/* --- Barre de progression du scroll --- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1001; pointer-events:none; }
.scroll-progress span{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:var(--accent); box-shadow:0 0 14px 1px var(--accent-dim);
}
@media (prefers-reduced-motion:reduce){ .scroll-progress{ display:none; } }

/* --- Écran de bienvenue au chargement (logo qui apparaît en douceur) --- */
.page-loader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.page-loader .mark{
  width:56px; height:56px; border-radius:16px; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.6) rotate(-8deg);
  transition:opacity .6s var(--ease-spring), transform .6s var(--ease-spring);
}
.page-loader .mark svg{ width:30px; height:30px; color:var(--accent-ink); }
.page-loader.is-in .mark{ opacity:1; transform:scale(1) rotate(0deg); }
.page-loader-text{
  font-family:var(--font-body); font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); opacity:0; transition:opacity .4s ease;
}
.page-loader.is-in .page-loader-text{ opacity:1; }
.page-loader-bar{ width:180px; height:3px; border-radius:var(--radius-full); background:var(--border-soft); overflow:hidden; opacity:0; transition:opacity .4s ease; }
.page-loader.is-in .page-loader-bar{ opacity:1; }
.page-loader-bar span{
  display:block; height:100%; width:0%; border-radius:var(--radius-full);
  background:linear-gradient(90deg, var(--sage), var(--sky)); transition:width .3s ease;
}
.page-loader.is-out{ opacity:0; visibility:hidden; }
@media (prefers-reduced-motion:reduce){ .page-loader{ display:none; } }

/* --- Grain de fond, texture premium discrète --- */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Typo utilitaires --- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px 2px var(--accent-dim); flex:none; }

/* --- Repère de chapitre : donne un fil narratif visible aux sections principales --- */
.chapter-tag{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:.72rem; font-weight:500; color:var(--ink-mute);
  margin-bottom:10px;
}
.chapter-tag::before{ content:""; width:16px; height:1px; background:var(--border); }
.chapter-tag b{ color:var(--accent-text); font-weight:500; }

.display-1{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:.98; font-size:clamp(2.6rem, 7vw, 7.2rem); }
.display-2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; line-height:1.04; font-size:clamp(2.1rem, 4.4vw, 3.7rem); }
.display-3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.005em; line-height:1.14; font-size:clamp(1.5rem, 2.6vw, 2.2rem); }

/* --- Titre révélé par un masque qui glisse (au lieu d'un simple fondu) --- */
.mask-reveal-wrap{ overflow:hidden; }
.mask-reveal-inner{ display:block; }

/* --- Motifs de marque tirés du logo (trajectoire de croissance + courbe du G) :
   remplace les blobs génériques par des formes qui appartiennent vraiment à
   Growthline, pour qu'une section soit reconnaissable même sans le logo --- */
.growth-arrow-bg{ position:absolute; z-index:0; pointer-events:none; opacity:.4; }
.g-curve-bg{ position:absolute; z-index:0; pointer-events:none; opacity:.5; }

.lede{ font-size:clamp(1.05rem, 1.4vw, 1.3rem); color:var(--ink-dim); line-height:1.65; font-weight:400; max-width:46ch; }

.accent-text{ color:var(--accent); }
.ink-mute{ color:var(--ink-mute); }

/* --- Split-text reveal targets (mots/lignes wrappés par JS) --- */
.split-line{ overflow:hidden; display:block; }
.split-line > span{ display:inline-block; will-change:transform; }
.split-word{ display:inline-block; overflow:hidden; }
.split-word > span{ display:inline-block; will-change:transform; }

/* --- Boutons --- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 28px; border-radius:var(--radius-full);
  font-size:.95rem; font-weight:500; letter-spacing:.01em;
  border:1px solid var(--border); color:var(--ink); background:transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .35s var(--ease-spring), box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--surface-hover); border-color:var(--border); transform:translateY(-2px); }
.btn-solid{
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
  box-shadow:0 14px 30px -14px rgba(143,174,141,.7);
  position:relative; overflow:hidden;
}
.btn-solid:hover{ background:var(--accent-bright); border-color:var(--accent-bright); transform:translateY(-3px); box-shadow:0 20px 38px -16px rgba(143,174,141,.8); }
/* --- Reflet lumineux qui balaie le bouton au survol --- */
.btn-solid::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); transition:left .7s ease; pointer-events:none;
}
.btn-solid:hover::before{ left:130%; }

/* --- Badge "disponible pour de nouveaux projets" (pastille qui pulse) --- */
.availability-badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 12px;
  border-radius:var(--radius-full); background:var(--bg-elevated); border:1px solid var(--border-soft);
  font-size:.8rem; font-weight:500; color:var(--ink-dim); box-shadow:var(--soft-shadow);
}
.availability-badge .dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; position:relative;
}
.availability-badge .dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid var(--accent);
  animation:availability-pulse 2.2s ease-out infinite;
}
@keyframes availability-pulse{ 0%{ transform:scale(.5); opacity:.9; } 100%{ transform:scale(1.8); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .availability-badge .dot::after{ animation:none; } }
.btn-ghost-inverse{ border-color:rgba(10,10,11,.2); color:var(--inverse-ink); }
.btn-ghost-inverse:hover{ background:rgba(10,10,11,.06); }
.btn-lg{ height:60px; padding:0 32px; font-size:1rem; }
.btn-sm{ height:40px; padding:0 20px; font-size:.85rem; gap:8px; }
.btn-block{ width:100%; }
.btn .arrow{ width:16px; height:16px; transition:transform .4s var(--ease); flex:none; }
.btn:hover .arrow{ transform:translateX(4px); }

/* --- Cartes / surfaces --- */
.card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
header{
  position:fixed; top:18px; left:0; right:0; z-index:1000;
  padding:0 var(--container-pad);
  transition:top .4s var(--ease);
}
header.scrolled{ top:12px; }
.nav-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:rgba(255,255,255,.75); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border-soft); border-radius:var(--radius-full);
  padding:10px 10px 10px 24px; box-shadow:var(--soft-shadow);
  transition:padding .4s var(--ease), background .4s var(--ease);
}
header.scrolled .nav-inner{ padding:8px 8px 8px 20px; background:rgba(255,255,255,.92); }

.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:500; font-size:1.15rem; letter-spacing:0; }
.brand .mark{
  width:34px; height:34px; border-radius:50%; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--accent-ink); background:var(--bg-soft);
  transition:width .4s var(--ease), height .4s var(--ease);
  animation:markBreathe 5s ease-in-out infinite;
}
.brand .mark img{ width:100%; height:100%; object-fit:cover; }
@keyframes markBreathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(127,169,140,0); transform:scale(1); }
  50%{ box-shadow:0 0 0 6px rgba(127,169,140,.14); transform:scale(1.04); }
}
@media (prefers-reduced-motion:reduce){ .brand .mark{ animation:none; } }
header.scrolled .brand .mark{ width:28px; height:28px; }
.brand .mark svg{ width:16px; height:16px; }

.main-nav{ display:flex; align-items:center; gap:8px; }
.main-nav a{
  position:relative; padding:8px 16px; font-size:.92rem; font-weight:500; color:var(--ink-dim);
  transition:color .3s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); }
.main-nav a.active{ color:var(--ink); }

.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-cta{ display:inline-flex; }
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px;
  border:1px solid var(--border); border-radius:var(--radius-full); align-items:center;
}
.menu-toggle span{ width:16px; height:1.4px; background:var(--ink); transition:transform .35s var(--ease), opacity .35s var(--ease); }
.menu-toggle.is-open span:nth-child(1){ transform:translateY(6.4px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform:translateY(-6.4px) rotate(-45deg); }

/* --- Menu mobile plein écran --- */
.mobile-menu{
  position:fixed; inset:0; z-index:998; background:var(--bg);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:110px var(--container-pad) 48px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.mobile-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.mobile-menu-links{ display:flex; flex-direction:column; gap:6px; }
.mobile-menu-links a{
  font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem,9vw,3.2rem); letter-spacing:-.02em;
  padding:12px 0; border-bottom:1px solid var(--border-soft); color:var(--ink);
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-menu-links a span{ font-size:.85rem; color:var(--ink-mute); font-family:var(--font-body); font-weight:500; }
.mobile-menu-foot{ display:flex; flex-direction:column; gap:18px; }
.mobile-menu-foot .btn{ width:100%; }
.mobile-menu-foot .meta-row{ display:flex; justify-content:space-between; color:var(--ink-mute); font-size:.85rem; }

/* ==========================================================================
   RESPONSIVE — nav
   ========================================================================== */
@media (max-width:900px){
  .main-nav{ display:none; }
  .nav-cta{ display:none; }
  .menu-toggle{ display:flex; }
}

/* ==========================================================================
   FORMES ORGANIQUES — blobs pastel ambiants + petites formes flottantes
   ========================================================================== */
.blob-field{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.blob-parallax{ position:absolute; will-change:transform; }
.blob-parallax .blob{ position:static; }
.blob{
  position:absolute; border-radius:42% 58% 65% 35% / 45% 45% 55% 55%;
  filter:blur(2px); opacity:.55; will-change:transform;
  animation:blobFloat var(--blob-float-dur,7s) ease-in-out infinite, blobPulse var(--blob-pulse-dur,15s) ease-in-out infinite;
}
.blob--sage{ background:var(--sage); }
.blob--lavender{ background:var(--lavender); }
.blob--pink{ background:var(--pink); }
.blob--sky{ background:var(--sky); }
.blob--peach{ background:var(--peach); }
@keyframes blobFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-18px) rotate(6deg); } }
@keyframes blobPulse{ 0%,100%{ scale:1; } 50%{ scale:1.1; } }
@media (prefers-reduced-motion:reduce){ .blob{ animation:none; } }

/* --- Petites formes qui dérivent doucement vers le bas (façon confettis discrets) --- */
.drift-shape{
  position:absolute; border-radius:50%; opacity:0; pointer-events:none;
  animation:driftDown var(--drift-dur,9s) ease-in var(--drift-delay,0s) infinite;
}
@keyframes driftDown{
  0%{ transform:translateY(-20px) scale(.9) rotate(0deg); opacity:0; }
  10%{ opacity:.7; }
  55%{ transform:translateY(215px) scale(1.06) rotate(28deg); }
  64%{ transform:translateY(190px) scale(.97) rotate(24deg); }
  74%{ transform:translateY(225px) scale(1.01) rotate(32deg); opacity:.55; }
  100%{ transform:translateY(340px) scale(.92) rotate(50deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .drift-shape{ display:none; } }

/* --- Variante émoji des formes qui dérivent (mots-clés / ambiance, pas des icônes de métier) --- */
.drift-emoji{
  position:absolute; opacity:0; pointer-events:none; line-height:1; filter:drop-shadow(0 6px 10px rgba(46,43,39,.12));
  animation:driftEmoji var(--drift-dur,11s) ease-in-out var(--drift-delay,0s) infinite;
}
@keyframes driftEmoji{
  0%{ transform:translateY(-24px) scale(.7) rotate(-6deg); opacity:0; }
  15%{ opacity:.9; transform:translateY(10px) scale(1) rotate(2deg); }
  50%{ transform:translateY(60px) scale(1) rotate(-3deg); }
  85%{ opacity:.7; }
  100%{ transform:translateY(150px) scale(.85) rotate(6deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .drift-emoji{ display:none; } }

/* --- Anneau d'icônes qui gravitent lentement (types de projets réalisés) --- */
.orbit{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.orbit-spin{
  position:absolute; top:50%; left:50%; width:0; height:0;
  animation:orbitSpin var(--orbit-dur,26s) linear infinite;
}
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
.orbit-chip-pos{
  position:absolute; top:0; left:0;
  transform:rotate(var(--angle,0deg)) translateX(var(--r,180px));
}
.orbit-chip{
  width:66px; height:52px; margin-left:-33px; margin-top:-26px; border-radius:11px;
  background:var(--bg-elevated); box-shadow:var(--soft-shadow); overflow:hidden; position:relative;
  padding:7px 8px 6px; display:flex; flex-direction:column; gap:3px;
  animation:orbitCounter var(--orbit-dur,26s) linear infinite;
}
.orbit-chip::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; }
.orbit-chip::after{ content:""; position:absolute; top:5px; left:6px; width:3px; height:3px; border-radius:50%; background:rgba(46,43,39,.18); box-shadow:7px 0 rgba(46,43,39,.18); }
.orbit-chip--sage::before{ background:var(--sage); }
.orbit-chip--lavender::before{ background:var(--lavender); }
.orbit-chip--sky::before{ background:var(--sky); }
.orbit-chip--pink::before{ background:var(--pink); }
.orbit-chip--peach::before{ background:var(--peach); }
.orbit-chip-emoji{ font-size:.86rem; line-height:1; margin-top:3px; }
.orbit-chip i{ display:block; height:3px; border-radius:2px; background:rgba(46,43,39,.15); }
.orbit-chip i:nth-of-type(1){ width:78%; }
.orbit-chip i:nth-of-type(2){ width:48%; }
.orbit-chip-btn{ width:18px; height:6px; border-radius:3px; margin-top:auto; }
.orbit-chip--sage .orbit-chip-btn{ background:var(--sage); }
.orbit-chip--lavender .orbit-chip-btn{ background:var(--lavender); }
.orbit-chip--sky .orbit-chip-btn{ background:var(--sky); }
.orbit-chip--pink .orbit-chip-btn{ background:var(--pink); }
.orbit-chip--peach .orbit-chip-btn{ background:var(--peach); }
@keyframes orbitCounter{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
@media (prefers-reduced-motion:reduce){ .orbit-spin, .orbit-chip{ animation:none; } }
@media (max-width:900px){ .orbit{ display:none; } }

/* ==========================================================================
   VISUEL SIGNATURE — "Constellation" (a-propos.html)
   Diagramme, pas un dashboard : votre entreprise reliée aux 6 catégories
   réellement analysées par Growthline. Volontairement sans barres/scores,
   pour ne pas ajouter une 4e occurrence du motif "dashboard" du site.
   ========================================================================== */
.constellation{ position:relative; width:100%; aspect-ratio:800/420; max-width:820px; margin:0 auto; }
.constellation-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.constellation-lines path{
  fill:none; stroke-width:2; stroke-linecap:round; stroke-dasharray:6 8; opacity:.5;
  animation:constellation-flow 6s linear infinite;
}
.constellation-lines path:nth-of-type(1){ stroke:var(--sage); }
.constellation-lines path:nth-of-type(2){ stroke:var(--lavender); }
.constellation-lines path:nth-of-type(3){ stroke:var(--sky); }
.constellation-lines path:nth-of-type(4){ stroke:var(--pink); }
.constellation-lines path:nth-of-type(5){ stroke:var(--peach); }
.constellation-lines path:nth-of-type(6){ stroke:var(--sage); }
@keyframes constellation-flow{ to{ stroke-dashoffset:-28; } }

.constellation-node{
  position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px;
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-full);
  padding:9px 16px 9px 10px; box-shadow:var(--soft-shadow); font-size:.8rem; font-weight:600; color:var(--ink-dim);
  white-space:nowrap; animation:constellation-float 6s ease-in-out infinite;
}
.constellation-node .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.constellation-node--sage .dot{ background:var(--sage); }
.constellation-node--lavender .dot{ background:var(--lavender); }
.constellation-node--sky .dot{ background:var(--sky); }
.constellation-node--pink .dot{ background:var(--pink); }
.constellation-node--peach .dot{ background:var(--peach); }
@keyframes constellation-float{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-7px); } }

.constellation-node--center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:132px; height:132px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(160deg,#FFFFFF,var(--bg-soft)); border:1px solid var(--border-soft); box-shadow:var(--shadow-lift);
}
.constellation-node--center b{ font-family:var(--font-display); font-size:1rem; font-weight:700; line-height:1.25; }

@media (prefers-reduced-motion:reduce){ .constellation-lines path, .constellation-node{ animation:none; } }

/* --- Visuel signature Contact : échange / connexion, composition asymétrique
   (pas de nœud central) — même mécanique que la constellation d'À propos
   (bulles flottantes + lignes animées) pour rester dans le même langage
   visuel, sans être une copie de la même composition. Contenu jamais
   dépendant de l'animation : visible immédiatement, seule l'animation
   est coupée en reduced-motion. --- */
.contact-web{ position:relative; width:100%; aspect-ratio:800/300; max-width:820px; margin:0 auto; }
.contact-web-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.contact-web-lines path{
  fill:none; stroke-width:2; stroke-linecap:round; stroke-dasharray:6 8; opacity:.5;
  animation:constellation-flow 6s linear infinite;
}
.contact-web-lines path:nth-of-type(1){ stroke:var(--sage); }
.contact-web-lines path:nth-of-type(2){ stroke:var(--lavender); }
.contact-web-lines path:nth-of-type(3){ stroke:var(--sky); }
.contact-web-lines path:nth-of-type(4){ stroke:var(--peach); }
.contact-bubble{
  position:absolute; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px;
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-full);
  padding:9px 16px 9px 10px; box-shadow:var(--soft-shadow); font-size:.8rem; font-weight:600; color:var(--ink-dim);
  white-space:nowrap; animation:constellation-float 6.5s ease-in-out infinite;
}
.contact-bubble:nth-of-type(2){ animation-delay:-1.3s; }
.contact-bubble:nth-of-type(3){ animation-delay:-2.6s; }
.contact-bubble:nth-of-type(4){ animation-delay:-3.9s; }
.contact-bubble:nth-of-type(5){ animation-delay:-5.2s; }
.contact-bubble .dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--sage); }
.contact-bubble--accent{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-size:.88rem; padding:11px 18px 11px 12px;
}
.contact-bubble--accent .dot{ background:var(--accent-ink); }
@media (prefers-reduced-motion:reduce){ .contact-web-lines path, .contact-bubble{ animation:none; } }
@media (max-width:640px){
  .contact-web{ aspect-ratio:800/420; }
  .contact-bubble{ font-size:.68rem; padding:7px 12px 7px 8px; gap:6px; }
  .contact-bubble--accent{ font-size:.76rem; padding:9px 14px 9px 10px; }
}
@media (max-width:640px){
  .constellation{ aspect-ratio:800/620; }
  .constellation-node{ font-size:.68rem; padding:7px 12px 7px 8px; gap:6px; }
  .constellation-node--center{ width:100px; height:100px; }
  .constellation-node--center b{ font-size:.8rem; }
}

/* ==========================================================================
   VISUEL SIGNATURE — "Journey" (contact.html)
   Une trajectoire, pas un hub : partage le vocabulaire de la Constellation
   (ligne en tirets, pastille qui voyage) mais dans une forme différente,
   pour rester reconnaissable sans être une répétition du même composant.
   ========================================================================== */
.journey{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; max-width:640px; margin:0 auto; padding:8px 0 0; }
.journey-line{
  position:absolute; left:52px; right:52px; top:26px; height:0; border-top:2px dashed var(--border);
}
.journey-pulse{
  position:absolute; top:26px; left:52px; width:8px; height:8px; margin-top:-3px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px 2px var(--accent-dim); animation:journey-travel 3.6s ease-in-out infinite;
}
@keyframes journey-travel{ 0%{ left:52px; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:calc(100% - 52px); opacity:0; } }
.journey-stop{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; width:33%; }
.journey-dot{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--border-soft); box-shadow:var(--soft-shadow); font-size:1.35rem;
}
.journey-stop b{ font-size:.86rem; }
.journey-stop span{ font-size:.76rem; color:var(--ink-mute); max-width:16ch; }
@media (prefers-reduced-motion:reduce){ .journey-pulse{ animation:none; opacity:0; } }
@media (max-width:640px){
  .journey{ max-width:320px; }
  .journey-stop span{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:150px 0 80px; overflow:hidden;
}

.hero-glow{
  position:absolute; top:-20%; left:50%; width:1200px; height:1100px; transform:translateX(-50%);
  background:
    radial-gradient(closest-side at 20% 20%, var(--accent-dim), transparent 55%),
    radial-gradient(closest-side at 88% 38%, var(--accent-2-dim), transparent 55%),
    radial-gradient(closest-side at 92% 96%, rgba(235,196,204,.35), transparent 50%);
  pointer-events:none; z-index:0; filter:blur(16px);
}
.hero-grid-lines{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(to right, var(--border-soft) 1px, transparent 1px);
  background-size:calc((100% - 2 * var(--container-pad)) / 4) 100%;
  background-position:center top;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 70%);
}
.hero-inner{ position:relative; z-index:1; }
.hero-eyebrow-row{ display:flex; align-items:center; gap:14px; margin-bottom:28px; flex-wrap:wrap; }
.hero h1{ max-width:16ch; }

/* --- Stickers flottants : reprennent les vrais chiffres du hero (pas
   d'inventer de fausses stats) sous forme de badges tournés/animés,
   pour un rendu "agence créative" plutôt qu'un simple bloc de texte --- */
.sticker-badge{
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:var(--radius-full); border:1px solid transparent;
  font-family:var(--font-display); font-weight:600; font-size:.82rem; letter-spacing:-.01em;
  white-space:nowrap; box-shadow:var(--soft-shadow); pointer-events:none;
  transform:rotate(var(--tilt,-4deg)); animation:sticker-float 5.5s ease-in-out infinite;
}
.sticker-badge span{ font-size:1rem; }
.sticker-badge--yellow{ background:var(--pop-yellow); color:var(--accent-ink); }
.sticker-badge--mint{ background:var(--pop-mint); color:var(--accent-ink); }
@keyframes sticker-float{ 0%,100%{ transform:rotate(var(--tilt,-4deg)) translateY(0); } 50%{ transform:rotate(var(--tilt,-4deg)) translateY(-7px); } }
@media (max-width:900px){ .sticker-badge{ display:none; } }

/* --- Petit accent "griffonné à la main" à côté du CTA principal --- */
.doodle-arrow{
  position:absolute; width:64px; height:auto; color:var(--accent); opacity:.75;
  pointer-events:none; z-index:2;
}
@media (max-width:900px){ .doodle-arrow{ display:none; } }
.hero h1 .split-word:nth-of-type(6) > span,
.hero h1 .split-word:nth-of-type(7) > span{
  color:var(--accent-ink);
  background:linear-gradient(100deg, var(--sage), var(--sky) 60%, var(--sage));
  background-size:200% 100%;
  padding:0 .12em; border-radius:.3em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero h1 .accent-underline{ position:relative; white-space:nowrap; }
.hero h1 .accent-underline svg{ position:absolute; left:0; bottom:-.06em; width:100%; height:.22em; overflow:visible; }
.hero h1 .accent-underline path{ stroke:var(--accent); stroke-width:6; fill:none; }
.hero-bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:44px; flex-wrap:wrap; }
.hero-sub-col{ display:flex; flex-direction:column; gap:28px; max-width:520px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:1.7rem; font-weight:500; letter-spacing:0; }
.hero-stat span{ font-size:.82rem; color:var(--ink-mute); }

.scroll-cue{
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-mute);
}
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(to bottom, var(--ink-mute), transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; left:0; top:-40%; width:100%; height:40%; background:var(--accent); }
@media (prefers-reduced-motion:no-preference){ .scroll-cue .line::after{ animation:cueDrop 2s ease-in-out infinite; } }
@keyframes cueDrop{ 0%{ top:-40%; } 60%,100%{ top:100%; } }
@media (max-width:720px){ .scroll-cue{ display:none; } }

/* --- Visuel hero : scène de marque (illustration, pas un dashboard) —
   remplace l'ancienne carte "signal" pour ne pas être le 3e dashboard du
   site (déjà Growthline Intelligence + Réalisations). Recadrée en CSS sur
   la partie sculpture de l'image, le texte anglais d'origine reste hors
   cadre. --- */
.hero-signature{
  position:relative; z-index:1; width:100%; max-width:460px; aspect-ratio:1/1; margin-left:auto;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft);
  box-shadow:var(--soft-shadow), 0 0 0 10px rgba(191,211,190,.16);
}
.hero-signature-img{ width:100%; height:100%; object-fit:cover; object-position:52% 40%; transform:scale(1.08); display:block; }
@media (max-width:900px){ .hero-signature{ max-width:100%; margin-left:0; } }

/* --- Visuel signature de la page Services (illustration système, réutilise
   la même logique de recadrage CSS que le hero) --- */
.services-signature{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft);
  box-shadow:var(--soft-shadow); aspect-ratio:16/7; margin-bottom:var(--space-8);
}
.services-signature img{ width:100%; height:100%; object-fit:cover; object-position:50% 34%; transform:scale(2.6) translateX(-115px); }
@media (max-width:640px){ .services-signature{ aspect-ratio:4/3; } }

/* --- En-tête façon fenêtre (points + étiquette), toujours utilisé par la
   démo Growthline Intelligence plus bas sur la page --- */
.signal-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.signal-card-head .dots{ display:flex; gap:6px; }
.signal-card-head .dots span{ width:8px; height:8px; border-radius:50%; background:var(--border); }
.signal-card-head .tag{ font-size:.72rem; color:var(--accent); border:1px solid var(--accent-line); border-radius:var(--radius-full); padding:4px 10px; display:flex; align-items:center; gap:6px; }
.signal-card-head .tag::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.signal-score{ font-family:var(--font-display); font-size:2.1rem; font-weight:500; }
.signal-score span{ font-size:.9rem; color:var(--ink-mute); font-family:var(--font-body); font-weight:500; }
.signal-score .signal-score-num{ font-size:inherit; color:inherit; font-family:inherit; font-weight:inherit; }

/* ==========================================================================
   MARQUEE (mots-clés de service — pas de faux logos clients)
   ========================================================================== */
.marquee{ position:relative; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding:26px 0; overflow:hidden; }
.marquee-track{ display:flex; width:max-content; gap:0; will-change:transform; }
.marquee-track span{
  font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2.3rem); font-weight:600; letter-spacing:-.01em;
  color:transparent; -webkit-text-stroke:1px var(--ink-mute); padding:0 28px; white-space:nowrap; display:flex; align-items:center; gap:28px;
}
.marquee-track span.is-accent{ -webkit-text-stroke:1px var(--accent); color:var(--accent); }
.marquee-track span::after{ content:"—"; -webkit-text-stroke:1px var(--ink-mute); margin-left:28px; }

/* ==========================================================================
   SECTION HEADER (réutilisé partout)
   ========================================================================== */
.section{ padding:var(--space-9) 0; position:relative; }

/* --- Modificateur "section sombre" : réservé à quelques sections stratégiques
   pour créer du rythme entre les chapitres du site — pas une bascule de thème.
   Réutilise --inverse-bg/--inverse-ink, déjà présents et éprouvés sur .cta-final. --- */
.section--dark{ background:var(--inverse-bg); color:var(--inverse-ink); }
.section--dark .eyebrow{ color:rgba(246,239,222,.65); }
.section--dark .eyebrow::before{ background:var(--accent-bright); box-shadow:0 0 10px 2px var(--accent-dim); }
.section--dark .chapter-tag{ color:rgba(246,239,222,.45); }
.section--dark .chapter-tag::before{ background:rgba(246,239,222,.25); }
.section--dark .chapter-tag b{ color:var(--accent-bright); }
.section--dark .lede{ color:rgba(246,239,222,.72); }
.section--dark .disclaimer-note{ color:rgba(246,239,222,.55); }
.section--dark .quote-marquee-wrap::before{ background:repeating-linear-gradient(to right, rgba(246,239,222,.18) 0 6px, transparent 6px 14px); }
.section--dark .proof-cell{ box-shadow:none; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:var(--space-8); flex-wrap:wrap; }
.section-head .lede{ max-width:420px; }
.section-head-title{ max-width:560px; position:relative; }
.section-head-title::before{
  content:""; position:absolute; left:-40px; top:-60px; width:340px; height:220px; z-index:-1;
  background:radial-gradient(closest-side, var(--accent-dim), transparent 72%);
  opacity:.5; pointer-events:none; filter:blur(6px);
}

/* --- Ambiance légèrement différente par section, pour éviter un fond uniforme --- */
#services{ background:linear-gradient(180deg, transparent, rgba(156,127,224,.05) 40%, transparent); }
#audit{ background:radial-gradient(1200px 500px at 50% 0%, rgba(63,143,73,.08), transparent 70%); }

/* ==========================================================================
   SERVICES — présentation éditoriale
   ========================================================================== */
.service-row{
  position:relative; display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:28px;
  padding:36px 0; border-top:1px solid var(--border-soft); cursor:pointer;
}
.service-row:last-child{ border-bottom:1px solid var(--border-soft); }
.service-row::after{
  content:""; position:absolute; inset:-1px 0; opacity:0; pointer-events:none; z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(127,169,140,.14), transparent 70%);
  transition:opacity .5s ease;
}
.service-row:hover::after{ opacity:1; }
.service-row > *{ position:relative; z-index:1; }
.service-num{ font-family:'Courier New',ui-monospace,monospace; font-size:.82rem; letter-spacing:-.02em; color:var(--ink-mute); }
.service-main h3, .service-main h2{ font-family:var(--font-display); font-size:clamp(1.6rem,3.6vw,3rem); font-weight:700; letter-spacing:-.01em; transition:transform .5s var(--ease-spring), color .4s ease; }
.service-row:hover .service-main h3, .service-row:hover .service-main h2{ transform:translateX(14px); color:var(--accent); }
.service-main p{ margin-top:10px; color:var(--ink-dim); max-width:52ch; font-size:.98rem; }
.service-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right; }
.service-price{ font-size:.85rem; color:var(--ink-mute); white-space:nowrap; }
.service-arrow{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  transition:transform .5s var(--ease), background .4s ease, border-color .4s ease;
}
.service-row:hover .service-arrow{ transform:rotate(45deg); background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* --- Case visuelle par service : une scène animée propre à chaque service,
   visible en permanence (plus cachée derrière un survol) — chaque service
   doit se comprendre visuellement avant même la lecture du texte. --- */
.service-visual{
  position:relative; width:220px; height:150px; border-radius:var(--radius-md); overflow:hidden; flex:none;
  border:1px solid var(--border-soft);
  transition:transform .5s var(--ease-spring), box-shadow .5s var(--ease), border-color .4s ease;
}
.service-row:hover .service-visual{
  transform:translateY(-4px) scale(1.03) rotate(-1deg);
  box-shadow:0 20px 34px -16px rgba(46,43,39,.28);
}
.service-visual-image{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.service-visual-image svg{ width:100%; height:100%; overflow:visible; }
@media (max-width:900px){
  .service-visual{ width:100%; height:150px; }
}

/* --- Scène 1 : Audit — un faisceau balaie la page, des repères s'allument ---
   (le conteneur .service-visual-image est déjà position:absolute, sert de repère) */
.svc-scan-beam{
  position:absolute; top:8%; bottom:8%; left:0; width:26px;
  background:linear-gradient(90deg, transparent, rgba(127,169,140,.55), transparent);
  animation:svc-scan-sweep 3.2s ease-in-out infinite;
}
@keyframes svc-scan-sweep{ 0%{ left:6%; } 50%{ left:78%; } 100%{ left:6%; } }
.svc-scan-dot{ animation:svc-scan-blink 3.2s ease-in-out infinite; opacity:.25; }
.svc-scan-dot--2{ animation-delay:.5s; }
.svc-scan-dot--3{ animation-delay:.9s; }
@keyframes svc-scan-blink{ 0%,40%{ opacity:.25; } 50%{ opacity:1; } 75%,100%{ opacity:.25; } }

/* --- Scène 2 : Rapport — des tickets de priorité qui respirent, du plus urgent au plus léger --- */
.svc-ticket{ animation:bubbleFloat 4.5s ease-in-out infinite; transform-origin:center; }
.svc-ticket--1{ animation-delay:0s; }
.svc-ticket--2{ animation-delay:.35s; }
.svc-ticket--3{ animation-delay:.7s; }

/* --- Scène 3 : Corrections ciblées — un problème repéré devient une correction validée --- */
.svc-target-ring{ transform-origin:100px 75px; animation:svc-target-spin 9s linear infinite; }
@keyframes svc-target-spin{ to{ transform:rotate(360deg); } }
.svc-mark-x{ animation:svc-mark-cross 4s ease-in-out infinite; }
.svc-mark-check{ animation:svc-mark-cross 4s ease-in-out infinite; animation-delay:2s; }
@keyframes svc-mark-cross{ 0%,42%{ opacity:1; } 50%,92%{ opacity:0; } 100%{ opacity:1; } }

/* --- Scène 4 : Refonte — le wireframe se transforme en site fini --- */
.svc-scene--rebuild svg{ position:absolute; inset:0; }
.svc-rebuild-before{ animation:svc-rebuild-fade 6s ease-in-out infinite; }
.svc-rebuild-after{ animation:svc-rebuild-fade 6s ease-in-out infinite reverse; }
@keyframes svc-rebuild-fade{ 0%,38%{ opacity:1; } 50%,88%{ opacity:0; } 100%{ opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .svc-scan-beam{ display:none; }
  .svc-scan-dot, .svc-ticket, .svc-rebuild-after{ animation:none; opacity:1; }
  .svc-target-ring{ animation:none; }
  .svc-mark-x{ animation:none; opacity:0; }
  .svc-mark-check{ animation:none; opacity:1; }
  .svc-rebuild-before{ animation:none; opacity:0; }
}

/* ==========================================================================
   PROCESSUS — ligne de progression au scroll
   ========================================================================== */
.process-row{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:900px){ .process-row{ grid-template-columns:1fr 300px; gap:var(--space-8); align-items:start; } }
.process-visual{ display:none; }
@media (min-width:900px){
  .process-visual{
    display:flex; justify-content:center; align-items:flex-start;
    background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
    padding:56px 0; box-shadow:var(--soft-shadow); position:sticky; top:120px;
  }
}
.process-visual-track{ position:relative; display:flex; flex-direction:column; align-items:center; gap:52px; }
.process-visual-track::before{
  content:""; position:absolute; left:50%; top:26px; bottom:26px; width:1px;
  background:linear-gradient(180deg,var(--sage),var(--lavender),var(--sky),var(--peach)); transform:translateX(-50%);
}
.process-visual-node{
  position:relative; z-index:1; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--border-soft); box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.process-visual-node svg{ width:22px; height:22px; }
.process-visual-node--sage{ color:var(--sage); }
.process-visual-node--lavender{ color:var(--lavender); }
.process-visual-node--sky{ color:var(--sky); }
.process-visual-node--peach{ color:var(--peach); }
.process-track{ position:relative; padding-left:40px; }
.process-track::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--border); }
.process-track-fill{ position:absolute; left:0; top:6px; width:1px; height:0; background:var(--accent); box-shadow:0 0 12px 1px var(--accent-dim); }
.process-step{ position:relative; padding:0 0 var(--space-8); }
.process-step:last-child{ padding-bottom:0; }
.process-step::before{
  content:attr(data-step); position:absolute; left:-40px; top:0; transform:translateX(-50%);
  width:34px; height:34px; margin-left:0; left:-58px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:.78rem; color:var(--ink-mute); font-weight:600;
}
.process-step h3{ font-family:var(--font-display); font-size:clamp(1.2rem,2vw,1.6rem); font-weight:500; margin-bottom:8px; }
.process-step p{ color:var(--ink-dim); max-width:52ch; }

/* ==========================================================================
   ON CRÉE TOUT — grille de secteurs (types de projets, pas des clients réels)
   ========================================================================== */
.craft-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.craft-card{
  position:relative; overflow:hidden;
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:30px 18px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  box-shadow:var(--soft-shadow); transition:box-shadow .4s ease, transform .4s var(--ease-spring); transform-style:preserve-3d;
}
.craft-card::after{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(127,169,140,.22), transparent 68%);
  transition:opacity .4s ease;
}
.craft-card:hover::after{ opacity:1; }
.craft-card:hover{ box-shadow:0 26px 46px -22px rgba(46,43,39,.22), 0 0 40px -16px rgba(127,169,140,.35); transform:translateY(-4px) rotate(-1.5deg) scale(1.03); }
.craft-emoji{ font-size:2.1rem; line-height:1; }
.craft-icon{ width:64px; height:64px; object-fit:contain; }

/* --- Lévitation discrète : un léger va-et-vient vertical sur les icônes
   illustrées (secteurs, valeurs, tarifs) pour qu'elles semblent vivantes
   sans jamais attirer l'attention plus que le contenu. --- */
@keyframes gentle-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.craft-icon,
.value-icon,
.price-card-icon{ animation:gentle-float 4.2s ease-in-out infinite; }
.craft-card:nth-child(3n+1) .craft-icon,
.value-item:nth-child(3n+1) .value-icon,
.price-card:nth-child(3n+1) .price-card-icon{ animation-delay:0s; }
.craft-card:nth-child(3n+2) .craft-icon,
.value-item:nth-child(3n+2) .value-icon,
.price-card:nth-child(3n+2) .price-card-icon{ animation-delay:.7s; }
.craft-card:nth-child(3n) .craft-icon,
.value-item:nth-child(3n) .value-icon,
.price-card:nth-child(3n) .price-card-icon{ animation-delay:1.4s; }
@media (prefers-reduced-motion:reduce){
  .craft-icon, .value-icon, .price-card-icon{ animation:none; }
}
.craft-card b{ font-family:var(--font-display); font-weight:500; font-size:.92rem; letter-spacing:0; }
@media (max-width:900px){ .craft-grid{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   PEU IMPORTE VOTRE ACTIVITÉ — mot qui défile
   ========================================================================== */
.shift-panel{ text-align:center; padding:var(--space-7) 0; }
.shift-line{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--ink-mute); margin:0 0 14px; }
.shift-cycle{ display:inline-flex; align-items:center; gap:16px; font-family:var(--font-display); font-weight:500; font-size:clamp(2.4rem,6vw,4.6rem); }
.shift-emoji{ font-size:1em; line-height:1; display:inline-block; }
.shift-word{
  background:linear-gradient(100deg, var(--sage), var(--sky) 60%); color:var(--accent-ink);
  padding:.03em .28em; border-radius:.22em; display:inline-block;
}

/* ==========================================================================
   CONSTRUCTION EN DIRECT — wireframe → design → animation → site terminé
   ========================================================================== */
.build-stage{
  position:relative; height:440px; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--bg-elevated); border:1px solid var(--border-soft); box-shadow:var(--soft-shadow);
}
/* --- Chrome de navigateur, persistant : c'est LE MÊME écran qui se transforme,
   pas 6 scènes différentes — répond directement à "aucune étape ne doit sembler forcée". --- */
.build-chrome{
  position:absolute; top:0; left:0; right:0; height:40px; z-index:3;
  display:flex; align-items:center; gap:7px; padding:0 16px;
  background:var(--surface); border-bottom:1px solid var(--border-soft);
}
.build-chrome-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.build-chrome-url{
  margin-left:8px; width:200px; max-width:40%; height:21px; border-radius:var(--radius-full);
  background:var(--bg-elevated); border:1px solid var(--border-soft);
  display:flex; align-items:center; padding:0 12px; overflow:hidden;
}
.build-chrome-url span{ font-size:.66rem; font-family:ui-monospace,'Courier New',monospace; color:var(--ink-mute); white-space:nowrap; }
.build-chrome-badge{
  margin-left:auto; display:flex; align-items:center; gap:6px; opacity:0; transform:translateY(-4px);
  transition:opacity .4s ease, transform .4s ease; font-size:.72rem; font-weight:700; color:var(--accent);
}
.build-chrome-badge.is-shown{ opacity:1; transform:translateY(0); }
.build-chrome-badge i{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px 1px var(--accent-dim); }

/* --- Barre de progression façon "story" : un segment par étape, qui se
   remplit pendant la durée d'affichage puis passe au suivant, en boucle. --- */
.build-story-bar{
  position:absolute; top:46px; left:16px; right:16px; z-index:4;
  display:flex; gap:5px;
}
.build-story-seg{ flex:1; height:3px; border-radius:var(--radius-full); background:rgba(46,43,39,.1); overflow:hidden; display:block; }
.build-story-seg i{ display:block; height:100%; width:0%; background:var(--accent); border-radius:inherit; }
.build-story-seg.is-done i{ width:100%; }
.build-story-seg.is-active i{ width:0%; animation:build-story-fill var(--story-duration,3200ms) linear forwards; }
@keyframes build-story-fill{ to{ width:100%; } }
@media (prefers-reduced-motion:reduce){ .build-story-bar{ display:none; } }

.build-frame{
  position:absolute; top:52px; left:0; right:0; bottom:0; padding:20px 30px 26px; opacity:0; transition:opacity .5s ease;
  display:flex; flex-direction:column; gap:14px;
}
.build-frame.is-active{ opacity:1; }
.build-line{ height:16px; border-radius:6px; }
.build-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; flex:1; }
.build-block{ border-radius:16px; position:relative; }

/* --- Squelette de mini-site partagé (nav + hero + cartes) : gris pointillé au
   wireframe, coloré ensuite — c'est le même gabarit qui se remplit, pas des
   rectangles abstraits sans rapport avec un vrai site. --- */
.bw-nav{ display:flex; align-items:center; gap:10px; height:22px; }
.bw-dash{ height:8px; border-radius:4px; background:var(--surface-hover); border:1px dashed var(--border); }
.bw-hero{ height:64px; border-radius:12px; background:var(--surface-hover); border:1px dashed var(--border); }

.bd-nav{ display:flex; align-items:center; gap:10px; height:22px; }
.bd-logo{ width:16px; height:16px; border-radius:6px; background:var(--accent); flex:none; }
.bd-link{ width:34px; height:7px; border-radius:4px; background:var(--ink-mute); opacity:.3; }
.bd-btn{ margin-left:auto; width:58px; height:18px; border-radius:var(--radius-full); background:var(--accent); }
.bd-hero{ height:88px; border-radius:12px; padding:16px; display:flex; flex-direction:column; justify-content:center; gap:8px; background:linear-gradient(135deg,var(--sky),var(--lavender)); }
.bd-hero-line{ height:9px; border-radius:5px; background:rgba(255,255,255,.85); }
.bd-hero-cta{ margin-top:4px; width:78px; height:16px; border-radius:var(--radius-full); background:var(--ink); opacity:.9; }

.build-frame--wireframe .build-block{ background:var(--surface-hover); border:1px dashed var(--border); }

.build-frame--design .build-block:nth-child(1){ background:var(--sage); }
.build-frame--design .build-block:nth-child(2){ background:var(--lavender); }
.build-frame--design .build-block:nth-child(3){ background:var(--sky); }

/* --- Développement : même écran, une barre de chargement traverse le haut,
   les cartes "respirent" comme si elles se construisaient --- */
.build-frame--dev .build-block:nth-child(1){ background:var(--sage); }
.build-frame--dev .build-block:nth-child(2){ background:var(--lavender); }
.build-frame--dev .build-block:nth-child(3){ background:var(--sky); }
.build-frame--dev .build-block{ animation:buildPulse 1.8s ease-in-out infinite; }
.build-frame--dev .build-block:nth-child(1){ animation-delay:0s; }
.build-frame--dev .build-block:nth-child(2){ animation-delay:.2s; }
.build-frame--dev .build-block:nth-child(3){ animation-delay:.4s; }
.build-loading-bar{ position:absolute; top:0; left:0; height:2.5px; background:var(--accent); box-shadow:0 0 8px 1px var(--accent-dim); animation:build-loading 1.6s ease-in-out infinite; }
@keyframes build-loading{ 0%{ width:0; opacity:1; } 70%{ width:100%; opacity:1; } 100%{ width:100%; opacity:0; } }
@keyframes buildPulse{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* --- Optimisation : même écran + une coche de validation par carte --- */
.build-frame--opt .build-block:nth-child(1){ background:var(--sage); }
.build-frame--opt .build-block:nth-child(2){ background:var(--lavender); }
.build-frame--opt .build-block:nth-child(3){ background:var(--sky); }
.build-check{
  position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px -4px rgba(0,0,0,.3);
  opacity:0; transform:scale(.4); animation:build-check-pop .4s var(--ease-spring) forwards;
}
.build-check svg{ width:11px; height:11px; color:var(--accent); }
.build-block:nth-child(1) .build-check{ animation-delay:.15s; }
.build-block:nth-child(2) .build-check{ animation-delay:.4s; }
.build-block:nth-child(3) .build-check{ animation-delay:.65s; }
@keyframes build-check-pop{ to{ opacity:1; transform:scale(1); } }

@media (prefers-reduced-motion:reduce){
  .build-frame--dev .build-block{ animation:none; }
  .build-loading-bar{ display:none; }
  .build-check{ opacity:1; transform:scale(1); animation:none; }
}

/* --- Étape 0 : idée (avant même le wireframe) --- */
.build-frame--idea{ align-items:flex-start; justify-content:center; }
.build-idea-bulb{ font-size:2.6rem; margin-bottom:6px; animation:buildPulse 2.6s ease-in-out infinite; }
.build-line--dashed{ background:transparent; border:1.5px dashed var(--border); }
@media (prefers-reduced-motion:reduce){ .build-idea-bulb{ animation:none; } }

/* --- Étape 6 : résultat final — le même écran (nav + hero), désormais complet,
   avec un petit repère de résultat qui flotte dessus et rencontre ses visiteurs.
   Garde exactement le gabarit des étapes précédentes pour que les 6 écrans
   se lisent comme UNE seule transformation continue, pas 6 scènes séparées. --- */
.build-frame--clients{ justify-content:center; gap:22px; }
.build-final-hero{ position:relative; }
.build-stat-chip{
  position:absolute; top:-14px; right:-12px; width:38px; height:38px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center; color:var(--accent);
  box-shadow:0 10px 22px -8px rgba(46,43,39,.35); border:1px solid var(--border-soft);
  animation:build-chip-pop .5s var(--ease-spring) .25s both;
}
.build-stat-chip svg{ width:17px; height:17px; }
@keyframes build-chip-pop{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .build-stat-chip{ animation:none; } }
.build-clients-row{ display:flex; align-items:center; justify-content:center; }
.build-avatar{ width:44px; height:44px; border-radius:50%; border:3px solid var(--bg-elevated); margin-left:-14px; box-shadow:0 2px 6px rgba(46,43,39,.12); }
.build-avatar:first-child{ margin-left:0; }
.build-avatar-more{ margin-left:10px; font-size:.85rem; color:var(--ink-mute); }

.build-labels{ display:flex; gap:12px; margin-top:22px; justify-content:center; flex-wrap:wrap; }
.build-labels button{
  font-family:inherit; font-size:.82rem; color:var(--ink-mute); padding:7px 16px; border-radius:var(--radius-full);
  background:transparent; border:1px solid var(--border-soft); cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.build-labels button:hover{ border-color:var(--accent); color:var(--ink); }
.build-labels button.is-active{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
@media (max-width:640px){ .build-stage{ height:460px; } .build-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PROOF — chiffres réels + retours illustratifs
   ========================================================================== */
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.proof-cell{ background:var(--bg-elevated); padding:var(--space-7) var(--space-6); border:1px solid var(--border-soft); border-radius:var(--radius-md); transform-style:preserve-3d; }
.proof-cell:nth-child(1){ box-shadow:0 22px 44px -26px rgba(143,174,141,.7); }
.proof-cell:nth-child(2){ box-shadow:0 22px 44px -26px rgba(207,195,232,.7); }
.proof-cell:nth-child(3){ box-shadow:0 22px 44px -26px rgba(235,196,204,.7); }
.proof-cell b{ display:block; font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.4rem); font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.proof-cell span{ color:var(--ink-mute); font-size:.9rem; }

.disclaimer-note{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-mute); margin-top:var(--space-5); }
.disclaimer-note svg{ flex:none; width:18px; height:18px; }

.quote-marquee-wrap{ margin-top:var(--space-7); position:relative; }
.quote-marquee-wrap::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; z-index:0;
  background:repeating-linear-gradient(to right, var(--border) 0 6px, transparent 6px 14px);
  opacity:.6; pointer-events:none;
}
.quote-row{ display:flex; gap:18px; width:max-content; position:relative; z-index:1; }
.quote-card{
  width:340px; flex:none; background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:24px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--soft-shadow);
  position:relative; animation:bubbleFloat var(--bubble-dur,5s) ease-in-out infinite;
}
.quote-card::after{
  content:""; position:absolute; left:36px; bottom:-9px; width:18px; height:18px;
  background:var(--bg-elevated); border-right:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  transform:rotate(45deg); border-radius:0 0 4px 0;
}
.quote-row .quote-card:nth-child(1){ --bubble-dur:5.4s; animation-delay:0s; }
.quote-row .quote-card:nth-child(2){ --bubble-dur:6.2s; animation-delay:.4s; }
.quote-row .quote-card:nth-child(3){ --bubble-dur:4.8s; animation-delay:.9s; }
.quote-row .quote-card:nth-child(4){ --bubble-dur:5.8s; animation-delay:.2s; }
@keyframes bubbleFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.quote-card p{ font-size:.94rem; color:var(--ink-dim); line-height:1.55; }
.quote-card .who{ font-size:.78rem; color:var(--ink-mute); }
@media (prefers-reduced-motion:reduce){ .quote-card{ animation:none; } }

/* ==========================================================================
   RÉALISATIONS — teaser (renvoie vers l'exemple d'audit)
   ========================================================================== */
.showcase-teaser{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft);
  padding:var(--space-8); display:flex; flex-direction:column; justify-content:space-between; gap:60px; min-height:420px;
  background:linear-gradient(160deg, var(--bg-elevated), var(--bg-soft));
  box-shadow:var(--soft-shadow);
}
.showcase-teaser::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:linear-gradient(var(--border-soft) 1px, transparent 1px), linear-gradient(to right, var(--border-soft) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(circle at 70% 30%, black, transparent 70%);
}
.showcase-teaser > *{ position:relative; z-index:1; }
.showcase-teaser-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.showcase-teaser h3{ font-family:var(--font-display); font-size:clamp(1.8rem,4vw,3.2rem); font-weight:500; max-width:16ch; letter-spacing:-.005em; }

/* --- Éventail de vraies captures (secteurs), pour que le teaser ne soit
   plus uniquement du texte --- */
.showcase-teaser-stack{
  position:absolute; right:var(--space-8); top:50%; transform:translateY(-50%);
  width:220px; height:150px; z-index:1;
}
.showcase-teaser-stack img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:var(--radius-md); border:1px solid var(--border-soft); box-shadow:var(--shadow-lift);
  transition:transform .5s var(--ease-spring);
}
.showcase-teaser-stack img:nth-child(1){ transform:rotate(-7deg) translate(-18px,6px); z-index:1; }
.showcase-teaser-stack img:nth-child(2){ transform:rotate(4deg) translate(10px,-4px); z-index:2; }
.showcase-teaser-stack img:nth-child(3){ transform:rotate(-2deg) translate(-4px,-14px); z-index:3; }
.showcase-teaser:hover .showcase-teaser-stack img:nth-child(1){ transform:rotate(-11deg) translate(-30px,10px); }
.showcase-teaser:hover .showcase-teaser-stack img:nth-child(2){ transform:rotate(7deg) translate(18px,-2px); }
.showcase-teaser:hover .showcase-teaser-stack img:nth-child(3){ transform:rotate(-2deg) translate(-4px,-22px); }
@media (max-width:900px){
  .showcase-teaser-stack{ position:relative; right:auto; top:auto; transform:none; width:100%; height:120px; margin-bottom:var(--space-5); }
  .showcase-teaser-stack img:nth-child(1){ transform:rotate(-6deg) translate(-14px,4px); }
  .showcase-teaser-stack img:nth-child(2){ transform:rotate(3deg) translate(8px,-2px); }
  .showcase-teaser-stack img:nth-child(3){ transform:rotate(-1deg) translate(-2px,-8px); }
}

/* --- Aperçu Growthline Intelligence : un vrai faux rapport d'audit construit
   en HTML/CSS (jamais une image générée avec un client/nom fictif dedans) —
   site analysé à gauche, score + catégories + recommandations à droite. --- */
#intelligence .showcase-teaser{ min-height:0; gap:var(--space-6); }
.intel-mock{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  overflow:hidden; box-shadow:var(--shadow-soft);
}
.intel-mock-head{ display:flex; align-items:center; gap:7px; padding:14px 18px; border-bottom:1px solid var(--border-soft); }
.intel-mock-head .dot{ width:8px; height:8px; border-radius:50%; }
.intel-mock-tag{ margin-left:auto; font-size:.68rem; color:var(--ink-mute); border:1px solid var(--border-soft); border-radius:var(--radius-full); padding:4px 10px; }
.intel-mock-body{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:760px){ .intel-mock-body{ grid-template-columns:1fr; } }
.intel-mock-site{ padding:24px; border-right:1px solid var(--border-soft); display:flex; flex-direction:column; gap:14px; }
@media (max-width:760px){ .intel-mock-site{ border-right:none; border-bottom:1px solid var(--border-soft); } }
.intel-mock-site-nav{ display:flex; gap:8px; }
.intel-mock-site-nav span{ width:26px; height:6px; border-radius:3px; background:var(--surface-hover); }
.intel-mock-site-visual{ flex:1; min-height:130px; border-radius:12px; overflow:hidden; }
.intel-mock-site-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.intel-mock-results{ padding:24px; display:flex; flex-direction:column; gap:18px; }
.intel-mock-score{ display:flex; align-items:center; gap:16px; }
.intel-mock-score b{ font-family:var(--font-display); font-size:1.7rem; font-weight:600; display:block; line-height:1; }
.intel-mock-score b span{ font-size:.95rem; font-weight:500; color:var(--ink-mute); }
.intel-mock-tag--warn{
  display:inline-block; margin-top:6px; font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:#B8862F; background:#FFF1D6; padding:3px 9px; border-radius:var(--radius-full);
}
.intel-mock-cats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.intel-mock-cat{ display:flex; justify-content:space-between; align-items:center; padding:9px 12px; background:var(--bg); border-radius:10px; font-size:.82rem; color:var(--ink-dim); }
.intel-mock-cat b{ font-family:var(--font-display); color:var(--ink); }
.intel-mock-recos{ border-top:1px solid var(--border-soft); padding-top:14px; }
.intel-mock-recos-label{ display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); margin-bottom:8px; }
.intel-mock-reco{
  position:relative; font-size:.85rem; padding:6px 0 6px 18px; color:var(--ink-dim);
  opacity:0; transform:translateX(-8px); transition:opacity .5s ease, transform .5s ease;
  transition-delay:calc(var(--d) * .15s);
}
.intel-mock-reco::before{ content:""; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:#ffc27a; }
.intel-mock.is-live .intel-mock-reco{ opacity:1; transform:translateX(0); }
@media (prefers-reduced-motion:reduce){ .intel-mock-reco{ opacity:1; transform:none; transition:none; } }

/* ==========================================================================
   CTA FINAL (inversé)
   ========================================================================== */
/* ==========================================================================
   AUDIT (formulaire local, index.html#audit)
   ========================================================================== */
.audit-panel{
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:var(--space-9) var(--space-8); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:center;
  box-shadow:var(--soft-shadow);
}
.audit-panel-head .lede{ margin-top:16px; max-width:40ch; }
.audit-form{ display:flex; flex-direction:column; gap:14px; }
.audit-field{ display:flex; flex-direction:column; gap:8px; }
.audit-field label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); font-weight:600; }
.audit-field input{
  height:54px; padding:0 20px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-family:var(--font-body); font-size:1rem;
  transition:border-color .3s ease, background .3s ease;
}
.audit-field input::placeholder{ color:var(--ink-mute); }
.audit-field input:focus{ outline:none; border-color:var(--accent-line); background:var(--surface-hover); }
.audit-submit{ width:100%; margin-top:6px; }
.audit-note{ margin-top:14px; font-size:.82rem; color:var(--ink-mute); }

/* --- Confirmation de demande de rendez-vous (contact.html) --- */
.form-confirm{ text-align:center; padding:var(--space-6) 0 var(--space-4); animation:form-confirm-in .5s var(--ease-spring) both; }
@keyframes form-confirm-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.form-confirm-check{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  animation:form-confirm-pop .5s var(--ease-spring) .15s both;
}
.form-confirm-check svg{ width:26px; height:26px; }
@keyframes form-confirm-pop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.form-confirm-title{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; }
.form-confirm-recap{ margin-top:8px; color:var(--ink-dim); font-size:.95rem; }
.form-confirm-steps{ max-width:360px; margin:var(--space-6) auto 0; }
.form-confirm-step{ display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--ink-mute); padding:8px 0; text-align:left; }
.form-confirm-step.is-done{ color:var(--ink); font-weight:600; }
.form-confirm-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--border); }
.form-confirm-step.is-done .form-confirm-dot{ background:var(--accent); box-shadow:0 0 0 4px var(--accent-dim); }
.form-confirm-step.is-pending .form-confirm-dot{ animation:form-confirm-pulse 1.6s ease-in-out infinite; }
@keyframes form-confirm-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }
.form-confirm .audit-note{ max-width:44ch; margin-left:auto; margin-right:auto; }
#bookingConfirmReset{ margin-top:var(--space-5); }
@media (prefers-reduced-motion:reduce){ .form-confirm, .form-confirm-check, .form-confirm-dot{ animation:none; } }

/* --- État de chargement des formulaires (mini spinner sur le bouton) --- */
.btn-spinner{
  display:none; width:15px; height:15px; border-radius:50%; flex:none;
  border:2px solid rgba(0,0,0,.25); border-top-color:currentColor;
  animation:tool-spin .7s linear infinite;
}
.btn.is-loading{ pointer-events:none; opacity:.85; }
.btn.is-loading .btn-spinner{ display:inline-block; }
.btn.is-loading .arrow{ display:none; }
.form-status{ margin-top:12px; font-size:.85rem; min-height:1.3em; }
.form-status.is-success{ color:var(--accent-text); }
.form-status.is-error{ color:#ff8f8f; }
@media (max-width:900px){
  .audit-panel{ grid-template-columns:1fr; padding:var(--space-7) var(--space-5); gap:var(--space-6); }
}

/* ==========================================================================
   OUTIL D'AUDIT LOCAL (outil-audit.html)
   ========================================================================== */
.tool-card{
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:var(--space-7) var(--space-6); margin-bottom:var(--space-7);
}
.tool-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tool-form-grid .audit-field.full{ grid-column:1/-1; }
@media (max-width:640px){ .tool-form-grid{ grid-template-columns:1fr; } }

.tool-loading{ display:flex; flex-direction:column; align-items:center; gap:20px; padding:var(--space-8) 0; text-align:center; }
.tool-loading-ring{
  width:60px; height:60px; border-radius:50%; border:3px solid var(--border-soft); border-top-color:var(--accent);
  animation:tool-spin 1s linear infinite;
}
@keyframes tool-spin{ to{ transform:rotate(360deg); } }
.tool-loading-text{ color:var(--ink-dim); font-size:.98rem; max-width:44ch; transition:opacity .25s ease; min-height:1.4em; }
.tool-loading-note{ color:var(--ink-mute); font-size:.82rem; max-width:46ch; }
@media (prefers-reduced-motion:reduce){ .tool-loading-ring{ animation:none; border-top-color:var(--border-soft); } }

.tool-error{
  background:rgba(255,110,110,.08); border:1px solid rgba(255,110,110,.3); color:#ff8f8f;
  border-radius:var(--radius-md); padding:18px 20px; font-size:.92rem; margin-bottom:var(--space-6);
}

.tool-legend{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:var(--space-6); }
.tool-legend-item{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:16px 18px; }
.tool-legend-item b{ display:block; font-family:var(--font-display); font-size:.92rem; margin-bottom:4px; }
.tool-legend-item span{ color:var(--ink-mute); font-size:.85rem; }

.tool-severity-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--space-7); }
.tool-severity-chip{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-dim); border:1px solid var(--border-soft); border-radius:var(--radius-full); padding:6px 14px; }
.tool-severity-chip i{ width:8px; height:8px; border-radius:50%; flex:none; }
.tool-severity-chip.strength i{ background:var(--accent); }
.tool-severity-chip.critical i{ background:#ff8f8f; }
.tool-severity-chip.important i{ background:#ffc27a; }
.tool-severity-chip.opportunity i{ background:#8fb4ff; }

.slot-toggle{ display:inline-flex; gap:6px; padding:4px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-full); }
.slot-toggle-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 20px 8px 12px; border-radius:var(--radius-full); font-size:.9rem; font-weight:600; color:var(--ink-dim); transition:background .3s ease, color .3s ease; }
.slot-toggle-icon{ width:22px; height:22px; object-fit:contain; }
.slot-toggle-btn.is-active{ background:var(--accent); color:var(--accent-ink); }
@media (max-width:480px){ .slot-toggle{ display:flex; width:100%; } .slot-toggle-btn{ flex:1; text-align:center; padding:10px 12px; } }

/* ==========================================================================
   GROWTHLINE INTELLIGENCE — démo interactive (index.html#intelligence)
   Simulation locale uniquement : aucune vraie analyse n'est effectuée ici,
   voir le disclaimer dans le HTML.
   ========================================================================== */
.intel-demo-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:var(--space-6); }
.intel-demo-label{ font-size:.86rem; color:var(--ink-mute); font-weight:600; }
.intel-demo-card{ min-height:340px; }
.intel-demo-scan{ display:flex; flex-direction:column; align-items:center; gap:20px; padding:var(--space-8) 0; text-align:center; }
.intel-demo-scan .tool-loading-ring{ width:52px; height:52px; }
.intel-demo-scan-text{ color:var(--ink-dim); font-size:.96rem; min-height:1.4em; transition:opacity .25s ease; }
.intel-demo-fade-in{ animation:intel-fade-in .5s ease both; }
@keyframes intel-fade-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .intel-demo-fade-in{ animation:none; } }

.tool-summary{ display:flex; align-items:baseline; gap:32px; flex-wrap:wrap; margin-bottom:var(--space-6); }

.cta-final{ background:var(--inverse-bg); color:var(--inverse-ink); border-radius:var(--radius-lg); margin:0 var(--container-pad); padding:var(--space-9) var(--space-8); position:relative; overflow:hidden; }
.cta-final-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:30px; }
.cta-final h2{ font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; font-size:clamp(2.2rem,5.6vw,4.4rem); max-width:16ch; line-height:1.08; }
.cta-final .eyebrow{ color:rgba(246,239,222,.6); }
.cta-final .eyebrow::before{ background:var(--accent-bright); box-shadow:0 0 10px 2px var(--accent-dim); }
.cta-final-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.cta-final .btn{ border-color:rgba(246,239,222,.25); color:var(--inverse-ink); }
.cta-final .btn:hover{ background:rgba(246,239,222,.08); }
.cta-final .btn-solid{ background:var(--accent); color:#fff; border-color:var(--accent); }
.cta-final .btn-solid:hover{ background:var(--accent-bright); border-color:var(--accent-bright); }
/* --- Badge circulaire tournant (façon "tampon") --- */
.spin-badge{ position:relative; width:118px; height:118px; flex:none; }
.spin-badge-ring{ width:100%; height:100%; animation:spin-badge-turn 16s linear infinite; }
.spin-badge-ring text{ font-family:var(--font-accent); font-size:15px; font-weight:600; letter-spacing:.4px; fill:var(--ink-mute); }
.spin-badge-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.spin-badge-center svg{ width:24px; height:24px; color:var(--ink-dim); }
@keyframes spin-badge-turn{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spin-badge-ring{ animation:none; } }
.cta-final .spin-badge{ position:absolute; left:28px; bottom:28px; z-index:1; }
.cta-final .spin-badge-ring text{ fill:rgba(246,239,222,.55); }
.cta-final .spin-badge-center svg{ color:var(--inverse-ink); }
@media (max-width:768px){ .cta-final .spin-badge{ display:none; } }

/* --- Variante du badge tournant : coin du dashboard hero --- */
.signal-card-wrap{ position:relative; }
.spin-badge--corner{ position:absolute; top:-22px; right:-22px; z-index:2; width:92px; height:92px; }
.spin-badge--corner .spin-badge-center--mark{
  width:34px; height:34px; margin:auto; border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-bright)); color:var(--accent-ink);
}
.spin-badge--corner .spin-badge-center--mark svg{ width:18px; height:18px; color:inherit; }
.spin-badge--corner .spin-badge-ring text{ fill:rgba(24,20,15,.55); font-size:14px; }
@media (max-width:900px){ .spin-badge--corner{ display:none; } }

/* --- Slider Avant / Après --- */
.compare-slider{
  position:relative; aspect-ratio:16/8; border-radius:var(--radius-lg); overflow:hidden;
  cursor:ew-resize; user-select:none; border:1px solid var(--border-soft); touch-action:pan-y;
  box-shadow:var(--soft-shadow);
}
.compare-after, .compare-before{ position:absolute; inset:0; }
.compare-after img{ width:100%; height:100%; object-fit:cover; object-position:center 78%; display:block; }
.compare-before{ background:var(--bg-elevated); clip-path:inset(0 50% 0 0); }
.compare-before-content{ height:100%; display:flex; flex-direction:column; justify-content:center; gap:20px; padding:0 5% 0 6%; max-width:420px; }
.compare-tag-x{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:600; font-size:clamp(.95rem,1.6vw,1.15rem); color:var(--ink-dim); }
.compare-tag-x svg{ color:#ff8f8f; flex:none; width:22px; height:22px; }
.compare-handle{ position:absolute; top:0; bottom:0; left:50%; width:0; z-index:2; pointer-events:none; }
.compare-handle::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--accent); transform:translateX(-50%); }
.compare-handle-grip{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lift); pointer-events:auto; cursor:ew-resize;
}
.compare-handle-grip svg{ width:20px; height:20px; }
.compare-label{ position:absolute; top:20px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:6px 14px; border-radius:var(--radius-full); z-index:1; }
.compare-label--before{ left:20px; background:rgba(10,10,11,.6); color:#fff; }
.compare-label--after{ right:20px; background:var(--accent); color:var(--accent-ink); }
@media (max-width:640px){
  .compare-slider{ aspect-ratio:4/5; }
  .compare-before-content{ padding:0 8% 0 8%; max-width:none; }
}

.cta-final-sticker{
  position:absolute; top:26px; right:26px; z-index:2; width:112px; height:112px;
  border-radius:50%; box-shadow:0 20px 40px -14px rgba(0,0,0,.45);
  object-fit:cover;
}
.cta-final-sticker-glow{
  position:absolute; top:26px; right:26px; z-index:1; width:112px; height:112px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(184,255,208,.5), transparent 72%);
  animation:stickerGlow 3.2s ease-in-out infinite; pointer-events:none;
}
@keyframes stickerGlow{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.35); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .cta-final-sticker-glow{ animation:none; } }
@media (max-width:768px){ .cta-final-sticker, .cta-final-sticker-glow{ display:none; } }
.cta-final-orb{
  position:absolute; width:620px; height:520px; top:-160px; right:-160px; z-index:0;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(63,143,73,.35), transparent 60%),
    radial-gradient(closest-side at 70% 60%, rgba(156,127,224,.3), transparent 60%);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{ padding:var(--space-9) 0 var(--space-6); position:relative; overflow:hidden; }
.spin-badge--footer{ position:absolute; top:var(--space-8); right:var(--container-pad); z-index:1; }
@media (max-width:900px){ .spin-badge--footer{ display:none; } }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; padding-bottom:var(--space-8); border-bottom:1px solid var(--border-soft); }
.footer-brand p{ color:var(--ink-mute); margin-top:16px; max-width:32ch; font-size:.92rem; }
.footer-col h3{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mute); margin-bottom:16px; font-weight:600; }
.footer-col a, .footer-col button{ display:block; padding:6px 0; font-size:.94rem; color:var(--ink-dim); transition:color .3s ease; }
.footer-col a:hover, .footer-col button:hover{ color:var(--ink); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:var(--space-6); flex-wrap:wrap; }
.footer-bottom .meta{ font-size:.82rem; color:var(--ink-mute); }
.footer-wordmark{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.04em; line-height:.8;
  font-size:clamp(3.4rem,13vw,10rem); color:transparent; -webkit-text-stroke:1px var(--border);
  margin-top:var(--space-8); user-select:none; white-space:nowrap; overflow:hidden;
}

/* ==========================================================================
   REVEAL UTILITIES (état initial avant animation JS)
   ========================================================================== */
[data-reveal]{ opacity:0; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; } }
.no-js [data-reveal]{ opacity:1; }

/* ==========================================================================
   RESPONSIVE — layout général (composition mobile propre, pas juste réduite)
   ========================================================================== */
@media (max-width:1080px){
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .proof-grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .hero{ padding:130px 0 60px; min-height:auto; }
  .hero-bottom{ flex-direction:column; align-items:flex-start; }
  .signal-card{ margin-left:0; max-width:100%; }
  .section{ padding:var(--space-8) 0; }
  .service-row{ grid-template-columns:1fr; row-gap:14px; }
  .service-meta{ flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
  .cta-final{ margin:0 16px; padding:var(--space-8) var(--space-5); }
}
@media (max-width:640px){
  .footer-top{ grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ==========================================================================
   PAGE HERO (pages secondaires)
   ========================================================================== */
.page-hero{ padding:150px 0 var(--space-8); }
.page-hero h1{ margin-top:16px; max-width:18ch; }
.page-hero .lede{ margin-top:22px; max-width:56ch; }

/* ==========================================================================
   TARIFS / PRICING CARDS
   ========================================================================== */
.pricing-group{ margin-bottom:var(--space-8); }
.pricing-group-label{ font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--border-soft); }
.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.pricing-grid--single{ grid-template-columns:minmax(260px,340px); }
.price-badge.is-soon{ color:var(--ink-mute); border-color:var(--border); }
.pricing-grid{ perspective:1400px; }
.price-card{
  position:relative; overflow:hidden; will-change:transform;
  border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  background:var(--bg-elevated); box-shadow:var(--soft-shadow);
  padding:30px; display:flex; flex-direction:column; gap:16px;
  transition:box-shadow .4s ease, transform .5s var(--ease-spring);
  transform-style:preserve-3d;
}
.price-card::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(46,43,39,.05), transparent 65%);
  transition:opacity .4s ease; border-radius:inherit;
}
.price-card:hover{ box-shadow:0 30px 60px -30px rgba(46,43,39,.28), 0 0 46px -18px rgba(127,169,140,.35); }
.price-card:hover::after{ opacity:1; }
.price-card.featured{ box-shadow:var(--soft-shadow), 0 0 0 2px var(--accent-line); }
.price-card.featured::after{ background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(127,169,140,.14), transparent 65%); }
.price-card-art{
  position:absolute; right:-22px; bottom:-22px; width:170px; height:170px;
  color:var(--ink); opacity:.06; pointer-events:none;
}
.price-card.featured .price-card-art{ color:var(--accent); opacity:.12; }
.price-card-art svg{ width:100%; height:100%; }
.price-card-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--ink-dim); flex:none; position:relative; z-index:1;
}
.price-card-icon svg{ width:22px; height:22px; }
.price-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; }
.price-card h3{ font-family:var(--font-display); font-size:1.15rem; font-weight:500; }
.price-badge{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); border:1px solid var(--accent-line); border-radius:var(--radius-full); padding:3px 9px; }
.price-value{ font-family:var(--font-display); font-size:2.4rem; font-weight:500; letter-spacing:-.01em; position:relative; z-index:1; }
.price-period{ font-size:.78rem; color:var(--ink-mute); margin-top:-10px; position:relative; z-index:1; }
.price-desc{ color:var(--ink-dim); font-size:.92rem; position:relative; z-index:1; }
.price-features{ display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; }
.price-features li{ display:flex; align-items:flex-start; gap:10px; font-size:.88rem; color:var(--ink-dim); }
.price-features svg{ flex:none; width:16px; height:16px; margin-top:2px; color:var(--accent); }
.price-card .btn{ margin-top:auto; position:relative; z-index:1; }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq-list{ border-top:1px solid var(--border-soft); }
.faq-item{ border-bottom:1px solid var(--border-soft); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 0; text-align:left; font-family:var(--font-display); font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:600;
}
.faq-q svg{ flex:none; width:18px; height:18px; transition:transform .4s var(--ease); color:var(--ink-mute); }
.faq-item.is-open .faq-q svg{ transform:rotate(180deg); color:var(--accent); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-a p{ padding:0 0 26px; color:var(--ink-dim); max-width:64ch; font-size:.95rem; }
.faq-a a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.faq-item.is-open .faq-a{ max-height:220px; }

@media (max-width:640px){
  .page-hero{ padding:120px 0 var(--space-6); }
}

/* ==========================================================================
   EXEMPLE D'AUDIT — score breakdown + issues (contenu honnête, exemple fictif)
   ========================================================================== */
.example-banner{
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radius-md); padding:16px 20px; margin-bottom:var(--space-7); font-size:.9rem; color:var(--ink-dim);
}
.example-banner svg{ flex:none; width:20px; height:20px; color:var(--accent); }

.score-breakdown{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:var(--space-8); }
.score-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:20px 16px; display:flex; flex-direction:column; gap:12px; }
.score-card .cat{ font-size:.78rem; color:var(--ink-mute); }
.score-card .num{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; }
.score-card .bar{ height:4px; border-radius:var(--radius-full); background:var(--surface-hover); overflow:hidden; }
.score-card .bar span{ display:block; height:100%; background:var(--accent); }

.issues-list{ display:flex; flex-direction:column; gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; }
.issue-card{ background:var(--bg); display:flex; gap:18px; padding:24px; align-items:flex-start; }
.issue-icon{ flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.issue-card.strength .issue-icon{ background:rgba(127,169,140,.16); color:var(--accent); }
.issue-card.critical .issue-icon{ background:rgba(255,110,110,.14); color:#ff8f8f; }
.issue-card.important .issue-icon{ background:rgba(255,190,110,.14); color:#ffc27a; }
.issue-card.opportunity .issue-icon{ background:rgba(120,170,255,.14); color:#8fb4ff; }
.issue-body .tag{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); }
.issue-body h2, .issue-body h3{ font-family:var(--font-display); font-size:1.02rem; font-weight:600; margin:6px 0 6px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.issue-body p{ color:var(--ink-dim); font-size:.9rem; max-width:64ch; }

@media (max-width:900px){
  .score-breakdown{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .score-breakdown{ grid-template-columns:repeat(2,1fr); }
  .issue-card{ flex-direction:column; }
}

/* ==========================================================================
   STATEMENT (citation / mission, grand format centré)
   ========================================================================== */
.statement{ text-align:center; padding:var(--space-8) 0; }
.statement .eyebrow{ justify-content:center; margin-bottom:22px; }
.statement p{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; line-height:1.15;
  font-size:clamp(1.6rem,3.6vw,3rem); max-width:22ch; margin:0 auto; color:var(--ink);
}
.statement p em{ font-style:normal; color:var(--ink-mute); }
.statement p .accent-script{
  font-family:var(--font-accent); font-style:italic; font-weight:500; color:var(--accent-ink); font-size:1em;
  background:linear-gradient(100deg, var(--sage), var(--sky) 65%); padding:0 .1em; border-radius:.25em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* ==========================================================================
   VALEURS / MÉTHODE (page à propos)
   ========================================================================== */
.value-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; }
.value-item{ background:var(--bg); padding:var(--space-7); }
.value-icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--ink-dim); margin-bottom:16px;
}
.value-icon svg{ width:22px; height:22px; }
.value-item .service-num{ display:block; margin-bottom:18px; }
.value-item h3{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; margin-bottom:10px; letter-spacing:-.01em; }
.value-item p{ color:var(--ink-dim); font-size:.95rem; max-width:46ch; }
@media (max-width:760px){ .value-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:start; }
.contact-email{
  display:inline-flex; align-items:center; gap:16px; font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.6rem,4vw,3rem); color:var(--ink); border-bottom:1.5px solid var(--border); padding-bottom:14px;
}
.contact-email svg{ width:.7em; height:.7em; transition:transform .5s var(--ease); flex:none; }
.contact-email:hover svg{ transform:translate(6px,-6px); }
.contact-topics{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.contact-topics a{
  font-size:.85rem; padding:9px 16px; border-radius:var(--radius-full); border:1px solid var(--border); color:var(--ink-dim);
  transition:border-color .3s ease, color .3s ease;
}
.contact-topics a:hover{ border-color:var(--accent-line); color:var(--accent); }
.contact-side{ display:flex; flex-direction:column; gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; }
.contact-side a{ background:var(--bg); padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:.95rem; }
.contact-side a b{ display:block; font-family:var(--font-display); font-weight:600; margin-bottom:3px; }
.contact-side a span{ color:var(--ink-mute); font-size:.82rem; }
.contact-side a svg{ flex:none; width:16px; height:16px; transition:transform .4s var(--ease); }
.contact-side a:hover svg{ transform:translate(3px,-3px); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }

/* --- Carte de localisation : compacte, s'agrandit au clic pour révéler une
   carte abstraite (rues + pâtés de maisons génériques, pas une vraie carte
   embarquée) avec un repère central. --- */
.location-card{
  position:relative; width:260px; max-width:100%; height:150px; margin-top:32px; cursor:pointer; user-select:none;
  border-radius:var(--radius-lg); background:var(--bg-elevated); border:1px solid var(--border-soft);
  overflow:hidden; box-shadow:var(--soft-shadow); transform-style:preserve-3d;
  transition:width .5s var(--ease-spring), height .5s var(--ease-spring), box-shadow .3s ease;
}
.location-card.is-expanded{ width:340px; height:280px; box-shadow:0 30px 50px -24px rgba(46,43,39,.28); }
.location-card-map{ position:absolute; inset:0; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.location-card.is-expanded .location-card-map{ opacity:1; }
.location-card-roads{ position:absolute; inset:0; width:100%; height:100%; }
.location-card-roads line{ stroke:var(--ink); opacity:.16; stroke-width:1.6; }
.location-card-roads line.minor{ opacity:.08; stroke-width:.8; }
.location-card-block{ position:absolute; border-radius:4px; background:var(--ink-mute); opacity:.14; border:1px solid var(--ink-mute); }
.location-card-pin{
  position:absolute; top:50%; left:50%; width:30px; height:30px; color:var(--accent);
  transform:translate(-50%,-62%) scale(0); transition:transform .45s var(--ease-spring) .15s;
  filter:drop-shadow(0 4px 8px rgba(127,169,140,.4));
}
.location-card.is-expanded .location-card-pin{ transform:translate(-50%,-62%) scale(1); }
.location-card-body{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:20px; }
.location-card-top{ display:flex; align-items:center; justify-content:space-between; }
.location-card-icon{ width:18px; height:18px; color:var(--accent); transition:opacity .3s ease; }
.location-card.is-expanded .location-card-icon{ opacity:0; }
.location-card-live{ display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-full); background:rgba(46,43,39,.05); font-size:.64rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); }
.location-card-live i{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px 1px var(--accent-dim); }
.location-card-bottom b{ display:block; font-family:var(--font-display); font-weight:500; font-size:.95rem; }
.location-card-coords{
  display:block; font-size:.72rem; font-family:ui-monospace,'Courier New',monospace; color:var(--ink-mute);
  max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.location-card.is-expanded .location-card-coords{ max-height:20px; opacity:1; margin-top:4px; }
.location-card-underline{ display:block; height:1px; margin-top:8px; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(.3); transform-origin:left; transition:transform .4s ease; }
.location-card:hover .location-card-underline, .location-card.is-expanded .location-card-underline{ transform:scaleX(1); }
.location-card-hint{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:.68rem; color:var(--ink-mute); opacity:0; transition:opacity .2s ease; white-space:nowrap; }
.location-card:hover .location-card-hint{ opacity:1; }
.location-card.is-expanded .location-card-hint{ opacity:0; }
.location-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ==========================================================================
   CARROUSEL PAR SECTEUR (realisations.html) — swipe mobile, reveal image
   ========================================================================== */
.sector-carousel{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:10px;
  scrollbar-width:none; -ms-overflow-style:none; margin:0 calc(var(--container-pad) * -1); padding-left:var(--container-pad); padding-right:var(--container-pad);
}
.sector-carousel::-webkit-scrollbar{ display:none; }
.sector-card{
  position:relative; flex:none; width:260px; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border-soft); cursor:pointer; scroll-snap-align:start;
}
.sector-card-face{
  position:absolute; left:14px; bottom:14px; right:14px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 16px; border-radius:var(--radius-full);
  width:fit-content; box-shadow:0 8px 20px rgba(0,0,0,.28); pointer-events:none; transition:transform .4s var(--ease);
}
.sector-card-face b{ font-family:var(--font-display); font-size:.95rem; font-weight:600; color:#F3F1EA; line-height:1.15; }
.sector-card-face span{ font-size:.66rem; color:rgba(255,255,255,.8); text-transform:uppercase; letter-spacing:.06em; }
.sector-card-image{
  position:absolute; inset:0; opacity:1; transform:scale(1);
  transition:transform .6s var(--ease);
}
.sector-card-image::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.5) 100%);
}
.sector-card-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.sector-card:hover .sector-card-image,
.sector-card.is-active .sector-card-image{ transform:scale(1.06); }
.sector-card:hover .sector-card-face,
.sector-card.is-active .sector-card-face{ transform:translateY(-4px); }
@media (max-width:640px){ .sector-card{ width:74vw; } }

.sector-card-expand{
  position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%;
  background:rgba(10,10,11,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18);
  color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.85); transition:opacity .3s ease, transform .3s var(--ease), background .3s ease;
}
.sector-card-expand svg{ width:16px; height:16px; }
.sector-card-expand:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.sector-card:hover .sector-card-expand{ opacity:1; transform:scale(1); }
@media (hover:none), (pointer:coarse){ .sector-card-expand{ opacity:1; transform:scale(1); } }

/* --- Galerie immersive : lightbox --- */
.gallery-lightbox{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.gallery-lightbox.is-open{ opacity:1; visibility:visible; }
.gallery-lightbox-backdrop{ position:absolute; inset:0; background:rgba(6,6,7,.86); backdrop-filter:blur(8px); }
.gallery-lightbox-panel{
  position:relative; z-index:1; max-width:min(880px,92vw); max-height:88vh;
  transform:scale(.94) translateY(10px); transition:transform .45s var(--ease-spring);
}
.gallery-lightbox.is-open .gallery-lightbox-panel{ transform:scale(1) translateY(0); }
.gallery-lightbox-panel img{ width:100%; max-height:74vh; object-fit:contain; border-radius:var(--radius-lg); display:block; box-shadow:var(--shadow-soft); background:var(--bg-elevated); }
.gallery-lightbox-label{ margin-top:16px; text-align:center; color:var(--ink); font-family:var(--font-display); font-size:1.1rem; font-weight:600; }
.gallery-lightbox-close{
  position:absolute; top:-48px; right:0; width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--surface); border:1px solid var(--border); color:var(--ink); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .3s ease, transform .3s var(--ease);
}
.gallery-lightbox-close:hover{ background:var(--accent); color:var(--accent-ink); transform:rotate(90deg); }

/* ==========================================================================
   EXEMPLES D'AUDITS — un seul composant réutilisable, 3 jeux de données
   injectés par JS (audits-demo.js). Même langage visuel que le mockup
   Growthline Intelligence (anneau de score, tag d'état) pour que les deux
   sections semblent appartenir au même produit.
   ========================================================================== */
.audit-case{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:var(--space-8); box-shadow:var(--soft-shadow); max-width:760px; margin:0 auto;
}
.audit-case-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:var(--space-6); }
.audit-case-navbtn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border-soft); background:var(--bg);
  color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.audit-case-navbtn:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:translateY(-1px); }
.audit-case-navbtn svg{ width:16px; height:16px; }
.audit-case-counter{ font-size:.8rem; font-weight:600; letter-spacing:.05em; color:var(--ink-mute); min-width:52px; text-align:center; }

.audit-case-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:var(--space-6); }
.audit-case-tag{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; color:var(--accent); margin-bottom:8px; }
.audit-case-id h3{ font-family:var(--font-display); font-size:1.8rem; font-weight:600; margin:0; }
.audit-case-sector{ display:block; margin-top:4px; font-size:.88rem; color:var(--ink-mute); }
.audit-case-score{ display:flex; align-items:center; gap:12px; flex:none; }
.audit-case-score svg circle:last-child{ transition:stroke-dashoffset .8s var(--ease); }
.audit-case-score b{ font-family:var(--font-display); font-size:1.7rem; font-weight:600; }
.audit-case-score span{ font-size:.95rem; color:var(--ink-mute); }

.audit-case-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:var(--space-6); }
@media (max-width:640px){ .audit-case-metrics{ grid-template-columns:1fr 1fr; } }
.audit-metric{ padding:10px 12px; background:var(--bg); border-radius:10px; }
.audit-metric span{ display:block; font-size:.72rem; color:var(--ink-mute); margin-bottom:4px; }
.audit-metric b{ font-family:var(--font-display); font-size:1.05rem; }
.audit-metric b.is-good{ color:var(--sage); }
.audit-metric b.is-warn{ color:#B8862F; }
.audit-metric b.is-bad{ color:#C2503A; }

.audit-case-diagnostic{ font-size:1.02rem; color:var(--ink-dim); line-height:1.6; margin-bottom:var(--space-6); }

.audit-case-problems{ display:flex; flex-direction:column; gap:14px; margin-bottom:var(--space-6); }
.audit-problem{ display:flex; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--border-soft); }
.audit-problem:last-child{ border-bottom:none; padding-bottom:0; }
.audit-problem-num{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--bg); color:var(--ink-mute);
  font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.audit-problem b{ display:block; font-size:.95rem; margin-bottom:3px; }
.audit-problem p{ color:var(--ink-mute); font-size:.86rem; margin:0; }

.audit-case-label{ display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-mute); margin-bottom:6px; }
.audit-case-opportunity{ margin-bottom:var(--space-6); }
.audit-case-opportunity p{ font-size:.92rem; color:var(--ink-dim); margin:0; }

.audit-case-verdict{
  margin:0 0 var(--space-6); padding:18px 22px; border-left:3px solid var(--accent); background:var(--bg);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-family:var(--font-display); font-size:1.08rem;
  font-style:italic; color:var(--ink);
}
.audit-case-priority p{ font-size:.98rem; font-weight:600; color:var(--ink); margin:0; }

.audit-case.is-switching{ opacity:0; transform:translateY(8px); }
.audit-case{ transition:opacity .3s ease, transform .3s ease; }
@media (prefers-reduced-motion:reduce){ .audit-case, .audit-case-score svg circle:last-child{ transition:none; } }