:root{
  color-scheme:dark;
  --azur:#0a7ea4;
  --azur-fonce:#075c78;
  --azur-clair:#12333d;
  --azur-pale:rgba(10,126,164,.18);
  --cyan:#6fd6f2;
  --bg-1:#141110;
  --bg-2:#0a0b0d;
  --texte:#f2f5f6;
  --texte-attenue:rgba(242,245,246,.68);
  --verre-fond:rgba(12,16,20,.42);
  --verre-bordure:rgba(255,255,255,.1);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  background:linear-gradient(160deg,var(--bg-1) 0%,var(--bg-2) 45%,var(--azur-clair) 100%);
  background-attachment:fixed;
  color:var(--texte);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

#scene{
  position:fixed;
  inset:0;
  z-index:0;
  width:100vw;
  height:100vh;
  display:block;
}

/* NAV */
#nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:rgba(10,11,13,.38);
  border-bottom:1px solid var(--verre-bordure);
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-logo{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--cyan),var(--azur));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.nav-cta{
  font-size:14px;
  font-weight:600;
  color:var(--texte);
  text-decoration:none;
  padding:8px 18px;
  border-radius:999px;
  border:1px solid var(--verre-bordure);
  background:rgba(255,255,255,.04);
  transition:background .2s ease;
}
.nav-cta:hover{background:rgba(255,255,255,.1);}
.nav-droite{display:flex; align-items:center; gap:14px;}
.lang-switch{
  display:flex;
  gap:2px;
  padding:3px;
  border-radius:999px;
  border:1px solid var(--verre-bordure);
  background:rgba(255,255,255,.04);
}
.lang-switch a{
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--texte-attenue);
  text-decoration:none;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:6px 11px;
  border-radius:999px;
  transition:background .2s ease,color .2s ease;
}
.lang-switch a:hover{color:var(--texte);}
.lang-switch a.actif{
  color:var(--texte);
  background:linear-gradient(90deg,var(--cyan),var(--azur));
}

/* LAYOUT */
main{position:relative; z-index:1;}

.section{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:120px 24px;
  position:relative;
}

.section-anchor{height:0;}

.eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:14px;
}

h1{
  font-size:clamp(38px,7vw,76px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
  margin-bottom:22px;
}

h2{
  font-size:clamp(30px,5vw,52px);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.12;
  margin-bottom:20px;
}

.lead{
  font-size:clamp(16px,2vw,20px);
  color:var(--texte-attenue);
  line-height:1.55;
  max-width:520px;
  margin-bottom:16px;
}
.lead:last-child{margin-bottom:0;}

/* HERO */
.section-hero{justify-content:space-between; padding-top:180px;}
.hero-content{text-align:center; max-width:820px; margin:0 auto;}
.hero-content .lead{margin:0 auto 34px; max-width:560px;}
.hero-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.scroll-hint{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--texte-attenue);
  margin-bottom:24px;
}
.scroll-hint-line{
  width:1px; height:36px;
  background:linear-gradient(var(--cyan),transparent);
  animation:scrollpulse 1.8s ease-in-out infinite;
}
@keyframes scrollpulse{
  0%,100%{opacity:.3;}
  50%{opacity:1;}
}

/* TEXT-ONLY SECTIONS */
.text-block{
  max-width:560px;
  background:var(--verre-fond);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--verre-bordure);
  border-radius:24px;
  padding:40px 44px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.section-text{justify-content:center;}
.section-solution .text-block{border-color:rgba(111,214,242,.35);}

/* boîte au nombre d'or (largeur/hauteur ≈ 1,618) plutôt que carrée */
.text-block-or{
  width:min(90vw,680px);
  max-width:680px;
  padding:57px 52px;
  border-radius:20px;
}

/* état de départ des blocs à "effet de scroll" : cachés avant leur déclenchement par l'IntersectionObserver */
[data-effet-scroll="aspiration"]{
  opacity:0;
  transform:scale(.15);
  filter:blur(30px);
}
[data-effet-scroll="aspiration"].declenche{
  animation:aspiration-in .9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes aspiration-in{
  0%{opacity:0; transform:scale(.15); filter:blur(30px);}
  55%{opacity:1; transform:scale(1.06); filter:blur(0);}
  78%{transform:scale(.97);}
  100%{opacity:1; transform:scale(1); filter:blur(0);}
}

/* ============ BLOC SOLUTION : le carnet s'envole et vient se ranger dans le téléphone ============ */
.solution-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
}
.phone-mockup{
  position:relative;
  width:220px;
  height:472px;
  border-radius:38px;
  padding:10px;
  background:linear-gradient(160deg,#1c1f22,#0a0b0d);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  opacity:0;
  transform:scale(.85);
}
.phone-notch{
  position:absolute;
  top:10px; left:50%;
  transform:translateX(-50%);
  width:70px; height:18px;
  background:#0a0b0d;
  border-radius:10px;
  z-index:2;
}
.phone-screen{
  position:relative;
  width:100%; height:100%;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(160deg,var(--bg-1),var(--bg-2) 55%,var(--azur-clair));
}
/* une "vue" = un écran plein cadre à l'intérieur du téléphone ; plusieurs vues superposées
   permettent de simuler une navigation (glissement) entre deux écrans de l'app */
.phone-vue{
  position:absolute; top:0; left:0; right:0; bottom:32px;
  padding:34px 16px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.phone-ui{opacity:0; transform:translateY(10px);}

/* barre de navigation persistante en bas de l'écran, commune à toutes les vues d'un même téléphone */
.phone-navbar{
  position:absolute; left:0; right:0; bottom:0; height:32px;
  display:flex; align-items:center; justify-content:space-around;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(10,11,13,.6);
  border-radius:0 0 28px 28px;
}
.phone-navtab{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:6px; color:var(--texte-attenue);
}
.phone-navtab-point{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25);}
.phone-navtab-actif{color:var(--cyan);}
.phone-navtab-actif .phone-navtab-point{background:var(--cyan); box-shadow:0 0 6px rgba(111,214,242,.7);}
.phone-logo{font-size:13px; font-weight:800; color:var(--cyan); letter-spacing:-.02em;}
.phone-greeting{font-size:11px; color:var(--texte-attenue);}
.phone-tile{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.phone-tile-titre{font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--cyan);}
.phone-tile-ligne{font-size:10.5px; color:var(--texte-attenue); line-height:1.3;}

/* icônes qui convergent depuis les 4 coins vers l'écran du téléphone (carnet=rapports, silhouette=clients,
   document coché=contrats, goutte=assistant technique/dosages) — même point d'arrivée, départs différents */
.icone-envol{
  position:absolute;
  width:50px; height:50px;
  color:var(--cyan);
  top:46%; left:50%;
  margin:-25px 0 0 -25px;
  opacity:0;
  filter:drop-shadow(0 0 10px rgba(111,214,242,.6));
  z-index:3;
}

.solution-visual.declenche .phone-mockup{ animation:phone-in .7s cubic-bezier(.2,.9,.3,1) forwards; }
.solution-visual.declenche .icone-carnet{ animation:vol-carnet 1.6s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.15s; }
.solution-visual.declenche .icone-client{ animation:vol-client 1.55s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.35s; }
.solution-visual.declenche .icone-contrat{ animation:vol-contrat 1.6s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.55s; }
.solution-visual.declenche .icone-goutte{ animation:vol-goutte 1.55s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.75s; }
.solution-visual.declenche .phone-screen{ animation:phone-glow .6s ease-out forwards; animation-delay:2.2s; }
.solution-visual.declenche .phone-ui-1{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.4s; }
.solution-visual.declenche .phone-ui-2{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.55s; }
.solution-visual.declenche .phone-ui-3{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.7s; }
.solution-visual.declenche .phone-ui-4{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.85s; }
.solution-visual.declenche .phone-navcard{ animation:phone-ui-in .45s ease-out forwards; }
.solution-visual.declenche .phone-navcard:nth-child(1){ animation-delay:3s; }
.solution-visual.declenche .phone-navcard:nth-child(2){ animation-delay:3.08s; }
.solution-visual.declenche .phone-navcard:nth-child(3){ animation-delay:3.16s; }
.solution-visual.declenche .phone-navcard:nth-child(4){ animation-delay:3.24s; }
.solution-visual.declenche .phone-navcard:nth-child(5){ animation-delay:3.32s; }
.solution-visual.declenche .phone-navcard:nth-child(6){ animation-delay:3.4s; }
.solution-visual.declenche .phone-navbar{ animation:phone-ui-in .45s ease-out forwards; animation-delay:3.5s; }

/* petite grille de navigation façon écran d'accueil, sous les blocs "Prochains passages"/"Travaux urgents" */
.phone-nav-grille{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:2px; }
.phone-navcard{
  opacity:0; transform:translateY(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:8px 4px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-size:8px; color:var(--texte-attenue); text-align:center; line-height:1.15;
}
.phone-navcard-point{
  width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--azur));
}

@keyframes phone-in{ from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);} }
@keyframes phone-ui-in{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@keyframes phone-glow{ 0%{box-shadow:none;} 40%{box-shadow:0 0 0 3px rgba(111,214,242,.5), inset 0 0 40px rgba(111,214,242,.5);} 100%{box-shadow:none;} }
@keyframes vol-carnet{
  0%{opacity:0; transform:translate(-160px,-110px) rotate(-35deg) scale(1.4);}
  18%{opacity:1;}
  70%{opacity:1; transform:translate(0,0) rotate(-4deg) scale(1);}
  100%{opacity:0; transform:translate(4px,2px) rotate(10deg) scale(.2);}
}
@keyframes vol-client{
  0%{opacity:0; transform:translate(170px,-120px) rotate(32deg) scale(1.3);}
  18%{opacity:1;}
  70%{opacity:1; transform:translate(0,0) rotate(4deg) scale(1);}
  100%{opacity:0; transform:translate(-4px,2px) rotate(-10deg) scale(.2);}
}
@keyframes vol-contrat{
  0%{opacity:0; transform:translate(-160px,130px) rotate(-25deg) scale(1.3);}
  18%{opacity:1;}
  70%{opacity:1; transform:translate(0,0) rotate(-4deg) scale(1);}
  100%{opacity:0; transform:translate(4px,-2px) rotate(8deg) scale(.2);}
}
@keyframes vol-goutte{
  0%{opacity:0; transform:translate(160px,120px) rotate(28deg) scale(1.3);}
  18%{opacity:1;}
  70%{opacity:1; transform:translate(0,0) rotate(4deg) scale(1);}
  100%{opacity:0; transform:translate(-4px,-2px) rotate(-8deg) scale(.2);}
}

/* ============ BLOC CLIENTS : le téléphone entre en faisant un tour complet (rotateY 360°),
   puis les icônes convergent, puis la recherche se tape seule et filtre la liste ============ */
.clients-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
  perspective:1400px;
}
.phone-recherche{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px; margin-bottom:2px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}
.phone-ic-loupe{width:14px; height:14px; color:var(--texte-attenue); flex-shrink:0;}
.phone-recherche-texte{
  display:inline-block; overflow:hidden; white-space:nowrap;
  width:0; font-size:10.5px; color:var(--texte);
}
.phone-curseur{
  display:inline-block; width:2px; height:11px; margin-left:2px; vertical-align:-1px;
  background:var(--cyan);
  animation:clignoter 1s steps(1) infinite;
}
@keyframes clignoter{ 50%{opacity:0;} }
.phone-client-row{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
}
.phone-avatar{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--cyan),var(--azur));
  color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.phone-client-nom{font-size:10.5px; color:var(--texte);}

.clients-visual.declenche .phone-mockup{ animation:phone-spin-in .9s cubic-bezier(.25,.8,.3,1) forwards; }
.clients-visual.declenche .phone-navbar{ animation:phone-ui-in .4s ease-out forwards; animation-delay:.95s; }
.clients-visual.declenche .icone-maison{ animation:vol-carnet 1.6s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.25s; }
.clients-visual.declenche .icone-client{ animation:vol-client 1.55s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.45s; }
.clients-visual.declenche .icone-badge{ animation:vol-contrat 1.6s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.65s; }
.clients-visual.declenche .icone-goutte{ animation:vol-goutte 1.55s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.85s; }
.clients-visual.declenche .phone-ui-1{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.5s; }
.clients-visual.declenche .phone-ui-3{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.8s; }
.clients-visual.declenche .phone-ui-4{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.95s; }
.clients-visual.declenche .phone-recherche-texte{ animation:taper-texte .7s steps(6,end) forwards; animation-delay:3.1s; }
.clients-visual.declenche .phone-client-row-fade{ animation:ligne-disparait .5s ease-out forwards; animation-delay:3.7s; }
/* la ligne "trouvée" cumule DEUX animations (apparition + halo) : elles doivent être déclarées
   ensemble dans une seule propriété "animation", sinon la règle la plus récente écrase l'autre
   au lieu de s'y ajouter, et la ligne reste invisible (bug vécu ici). */
.clients-visual.declenche .phone-ui-2.phone-client-row-trouve{
  animation:
    phone-ui-in .5s ease-out forwards 2.65s,
    ligne-trouvee .6s ease-out forwards 3.7s;
}

@keyframes phone-spin-in{
  0%{opacity:0; transform:scale(.7) rotateY(360deg);}
  55%{opacity:1;}
  100%{opacity:1; transform:scale(1) rotateY(0deg);}
}
@keyframes taper-texte{ from{width:0;} to{width:6ch;} }
@keyframes ligne-disparait{ to{opacity:.12; transform:scale(.97);} }
@keyframes ligne-trouvee{
  0%{box-shadow:none;}
  50%{box-shadow:0 0 0 1px rgba(111,214,242,.6), 0 0 16px rgba(111,214,242,.5);}
  100%{box-shadow:0 0 0 1px rgba(111,214,242,.35);}
}

/* une fois le client trouvé en surbrillance, la liste glisse à gauche et sa fiche (déjà remplie) glisse depuis la droite */
.phone-vue-fiche{ transform:translateX(100%); }
.phone-fiche-entete{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.phone-fiche-retour{ width:12px; height:12px; color:var(--cyan); flex-shrink:0; }
.phone-fiche-titre{ font-size:11px; font-weight:800; color:var(--texte); }
.phone-fiche-champ{
  display:flex; flex-direction:column; gap:1px;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.phone-fiche-label{ font-size:8px; text-transform:uppercase; letter-spacing:.03em; color:var(--cyan); font-weight:700; }
.phone-fiche-valeur{ font-size:10px; color:var(--texte); }
.phone-fiche-valeur.phone-fiche-alerte{ color:#f2a541; font-weight:700; }

.clients-visual.declenche .phone-vue-liste{ animation:vue-sort-gauche .5s ease-in forwards; animation-delay:4.4s; }
.clients-visual.declenche .phone-vue-fiche{ animation:vue-entre-droite .5s ease-out forwards; animation-delay:4.4s; }
@keyframes vue-sort-gauche{ to{ transform:translateX(-100%); opacity:.3; } }
@keyframes vue-entre-droite{ from{transform:translateX(100%);} to{transform:translateX(0);} }

/* ============ BLOC RAPPORTS : le téléphone bascule comme une page qui se retourne, puis
   jauge pH qui se remplit, checklist qui se coche, signature qui se dessine, PDF généré ============ */
.rapports-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
  perspective:1400px;
}
.phone-titre-ecran{font-size:12px; font-weight:800; color:var(--texte);}

.phone-jauge{display:flex; align-items:center; gap:6px; font-size:9px; color:var(--texte-attenue);}
.phone-jauge-barre{flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden;}
.phone-jauge-remplissage{height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--cyan),var(--azur));}
.phone-jauge-valeur{color:var(--cyan); font-weight:700;}

.phone-checklist{display:flex; flex-direction:column; gap:6px;}
.phone-check{display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--texte-attenue);}
.phone-check-box{
  width:11px; height:11px; border-radius:4px; flex-shrink:0;
  border:1.3px solid rgba(255,255,255,.3);
  background:transparent;
}

.phone-signature{padding:6px 8px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);}
.phone-signature-svg{width:100%; height:26px; color:var(--cyan); display:block;}
.phone-signature-trait{stroke-dasharray:220; stroke-dashoffset:220;}

.phone-tile-pdf{border:1px solid rgba(111,214,242,.3);}

.rapports-visual.declenche .phone-mockup{ animation:phone-flip-in .8s cubic-bezier(.25,.8,.3,1) forwards; }
.rapports-visual.declenche .icone-goutte{ animation:vol-goutte 1.55s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.15s; }
.rapports-visual.declenche .icone-photo{ animation:vol-client 1.55s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.35s; }
.rapports-visual.declenche .icone-checklist{ animation:vol-carnet 1.6s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.55s; }
.rapports-visual.declenche .icone-stylo{ animation:vol-contrat 1.6s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.75s; }
.rapports-visual.declenche .phone-navbar{ animation:phone-ui-in .4s ease-out forwards; animation-delay:.95s; }

.rapports-visual.declenche .phone-ui-1{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.4s; }
.rapports-visual.declenche .phone-ui-2{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.55s; }
.rapports-visual.declenche .phone-ui-3{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.7s; }
.rapports-visual.declenche .phone-ui-4{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.85s; }
.rapports-visual.declenche .phone-jauge-remplissage{ animation:jauge-remplir .6s ease-out forwards; animation-delay:2.9s; }
.rapports-visual.declenche .phone-check-1 .phone-check-box{ animation:case-remplie .3s ease-out forwards; animation-delay:3.3s; }
.rapports-visual.declenche .phone-check-2 .phone-check-box{ animation:case-alerte .3s ease-out forwards; animation-delay:3.5s; }
.rapports-visual.declenche .phone-check-3 .phone-check-box{ animation:case-remplie .3s ease-out forwards; animation-delay:3.7s; }
.rapports-visual.declenche .phone-check-1{ animation:texte-coche .3s ease-out forwards; animation-delay:3.3s; }
.rapports-visual.declenche .phone-check-2{ animation:texte-alerte .3s ease-out forwards; animation-delay:3.5s; }
.rapports-visual.declenche .phone-check-3{ animation:texte-coche .3s ease-out forwards; animation-delay:3.7s; }
.rapports-visual.declenche .phone-signature-trait{ animation:tracer-signature 1s ease-in-out forwards; animation-delay:3.9s; }
.rapports-visual.declenche .phone-ui-5{ animation:phone-ui-in .5s ease-out forwards; animation-delay:5s; }

@keyframes phone-flip-in{
  0%{opacity:0; transform:scale(.8) rotateX(90deg);}
  60%{opacity:1;}
  100%{opacity:1; transform:scale(1) rotateX(0deg);}
}
@keyframes jauge-remplir{ from{width:0;} to{width:68%;} }
@keyframes case-remplie{
  0%{background:transparent; border-color:rgba(255,255,255,.3); box-shadow:none; transform:scale(1);}
  50%{transform:scale(1.3);}
  100%{background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 6px rgba(111,214,242,.6); transform:scale(1);}
}
@keyframes texte-coche{ to{color:var(--texte);} }
@keyframes case-alerte{
  0%{background:transparent; border-color:rgba(255,255,255,.3); box-shadow:none; transform:scale(1);}
  50%{transform:scale(1.3);}
  100%{background:#f2a541; border-color:#f2a541; box-shadow:0 0 6px rgba(242,165,65,.6); transform:scale(1);}
}
@keyframes texte-alerte{ to{color:#f2a541; font-weight:700;} }

/* ============ BLOC ASSISTANT TECHNIQUE : des accessoires de chimie s'assemblent en tourbillon
   qui fonce vers le téléphone ; le téléphone "aspire" le tourbillon, tremble, fait un tour à 360°,
   puis affiche le volume, le bouton d'analyse et les cartes de recommandation (façon vraie app) ============ */
.assistant-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
  perspective:1400px;
}
.phone-champ-volume{
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-size:9.5px;
}
.phone-champ-label{color:var(--texte-attenue);}
.phone-champ-valeur{color:var(--texte); font-weight:700;}

.phone-btn-analyser{
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:8px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(24,180,232,.85),rgba(10,126,164,.9));
  color:#fff; font-size:9px; font-weight:700;
  box-shadow:0 4px 12px rgba(10,126,164,.4);
}
.phone-btn-analyser svg{width:11px; height:11px; flex-shrink:0;}

.phone-alerte{padding:7px 9px; border-radius:10px; border:1px solid; display:flex; flex-direction:column; gap:1px;}
.phone-alerte-titre{font-size:8.5px; font-weight:800; display:flex; align-items:center; gap:4px;}
.phone-alerte-titre svg{flex-shrink:0;}
.phone-alerte-texte{font-size:8px; line-height:1.3;}
.phone-alerte-verte{background:rgba(58,209,126,.12); border-color:rgba(58,209,126,.4);}
.phone-alerte-verte .phone-alerte-titre{color:#3ad17e;}
.phone-alerte-verte .phone-alerte-texte{color:#3ad17e; opacity:.85;}
.phone-alerte-ambre{background:rgba(242,165,65,.12); border-color:rgba(242,165,65,.4);}
.phone-alerte-ambre .phone-alerte-titre{color:#f2a541;}
.phone-alerte-ambre .phone-alerte-texte{color:#f2a541; opacity:.85;}
.phone-alerte-bleue{background:rgba(111,214,242,.1); border-color:rgba(111,214,242,.35);}
.phone-alerte-bleue .phone-alerte-titre{color:var(--cyan);}
.phone-alerte-bleue .phone-alerte-texte{color:var(--texte-attenue);}

.phone-mesures-grille{display:grid; grid-template-columns:1fr 1fr; gap:3px;}
.phone-mesure{
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 6px;
  border-radius:6px;
  background:rgba(255,255,255,.04);
  font-size:8px; color:var(--texte-attenue);
}
.phone-mesure b{color:var(--texte); font-weight:700;}

/* petites gouttes qui accompagnent le tourbillon, en plus des 3 accessoires */
.goutte-tourbillon{
  position:absolute; top:46%; left:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--cyan);
  opacity:0;
  box-shadow:0 0 6px rgba(111,214,242,.7);
}

.assistant-visual.declenche .phone-navbar{ animation:phone-ui-in .4s ease-out forwards; animation-delay:.5s; }
.assistant-visual.declenche .icone-tourbillon-1{ animation:tourbillon-1 1.7s cubic-bezier(.4,.1,.3,1) forwards; animation-delay:.2s; }
.assistant-visual.declenche .icone-tourbillon-2{ animation:tourbillon-2 1.65s cubic-bezier(.4,.1,.3,1) forwards; animation-delay:.4s; }
.assistant-visual.declenche .icone-tourbillon-3{ animation:tourbillon-3 1.7s cubic-bezier(.4,.1,.3,1) forwards; animation-delay:.6s; }
.assistant-visual.declenche .goutte-t1{ animation:tourbillon-1 1.3s cubic-bezier(.4,.1,.3,1) forwards; animation-delay:.3s; }
.assistant-visual.declenche .goutte-t2{ animation:tourbillon-2 1.25s cubic-bezier(.4,.1,.3,1) forwards; animation-delay:.5s; }
.assistant-visual.declenche .goutte-t3{ animation:tourbillon-3 1.3s cubic-bezier(.4,.1,.3,1) forwards; animation-delay:.7s; }
.assistant-visual.declenche .goutte-t4{ animation:tourbillon-1 1.25s cubic-bezier(.4,.1,.3,1) forwards; animation-delay:.9s; }

.assistant-visual.declenche .phone-mockup{ animation:phone-in .5s ease-out forwards, phone-shake-spin 1.3s ease-in-out forwards 2.1s; }
.assistant-visual.declenche .phone-screen{ animation:phone-glow .5s ease-out forwards; animation-delay:2.2s; }

.assistant-visual.declenche .phone-ui-1{ animation:phone-ui-in .45s ease-out forwards; animation-delay:3.5s; }
.assistant-visual.declenche .phone-ui-2{ animation:phone-ui-in .45s ease-out forwards; animation-delay:3.65s; }
.assistant-visual.declenche .phone-ui-3{ animation:phone-ui-in .45s ease-out forwards; animation-delay:3.85s; }
.assistant-visual.declenche .phone-ui-4{ animation:phone-ui-in .45s ease-out forwards; animation-delay:4s; }
.assistant-visual.declenche .phone-ui-5{ animation:phone-ui-in .45s ease-out forwards; animation-delay:4.15s; }
.assistant-visual.declenche .phone-ui-6{ animation:phone-ui-in .45s ease-out forwards; animation-delay:4.3s; }

@keyframes phone-shake-spin{
  0%{transform:scale(1) rotateY(0deg) translateX(0);}
  6%{transform:scale(1) rotateY(0deg) translateX(-5px);}
  12%{transform:scale(1) rotateY(0deg) translateX(5px);}
  18%{transform:scale(1) rotateY(0deg) translateX(-4px);}
  24%{transform:scale(1) rotateY(0deg) translateX(3px);}
  30%{transform:scale(1) rotateY(0deg) translateX(0);}
  100%{transform:scale(1) rotateY(360deg) translateX(0);}
}
@keyframes tourbillon-1{
  0%{opacity:0; transform:translate(-190px,-30px) rotate(0deg) scale(1.2);}
  15%{opacity:1;}
  35%{transform:translate(-100px,-100px) rotate(200deg) scale(1.05);}
  55%{transform:translate(70px,-50px) rotate(400deg) scale(.9);}
  75%{transform:translate(-25px,35px) rotate(600deg) scale(.55);}
  100%{opacity:0; transform:translate(0,0) rotate(760deg) scale(.1);}
}
@keyframes tourbillon-2{
  0%{opacity:0; transform:translate(190px,-50px) rotate(0deg) scale(1.2);}
  15%{opacity:1;}
  35%{transform:translate(110px,60px) rotate(-220deg) scale(1.05);}
  55%{transform:translate(-60px,80px) rotate(-420deg) scale(.9);}
  75%{transform:translate(30px,-30px) rotate(-620deg) scale(.55);}
  100%{opacity:0; transform:translate(0,0) rotate(-760deg) scale(.1);}
}
@keyframes tourbillon-3{
  0%{opacity:0; transform:translate(0,190px) rotate(0deg) scale(1.2);}
  15%{opacity:1;}
  35%{transform:translate(120px,90px) rotate(240deg) scale(1.05);}
  55%{transform:translate(-90px,20px) rotate(460deg) scale(.9);}
  75%{transform:translate(20px,-40px) rotate(680deg) scale(.55);}
  100%{opacity:0; transform:translate(0,0) rotate(820deg) scale(.1);}
}
@keyframes tracer-signature{ to{stroke-dashoffset:0;} }

/* ============ BLOC CONTRATS : le téléphone envoie les données vers un data center,
   qui répond en renvoyant le contrat PDF, qui atterrit sur l'écran ============ */
.contrats-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
}
.datacenter{
  position:absolute; top:6px; right:14%;
  width:52px; height:52px;
  color:var(--cyan);
  opacity:0;
  filter:drop-shadow(0 0 8px rgba(111,214,242,.4));
  z-index:2;
}
.paquet{
  position:absolute; top:46%; left:50%;
  width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:var(--cyan);
  opacity:0;
  box-shadow:0 0 8px rgba(111,214,242,.8);
  z-index:3;
}
.paquet-retour{
  position:absolute; top:6px; right:14%;
  width:30px; height:30px;
  margin:11px -15px 0 0;
  color:var(--cyan);
  opacity:0;
  filter:drop-shadow(0 0 8px rgba(111,214,242,.6));
  z-index:3;
}

.phone-pdf-apercu{
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:6px;
}
.phone-pdf-ligne{height:5px; border-radius:3px; background:rgba(255,255,255,.14);}
.phone-pdf-ligne-titre{width:60%; height:7px; background:var(--cyan); opacity:.6;}
.phone-pdf-ligne-courte{width:40%;}
.phone-pdf-signature{margin-top:4px; width:50%; height:14px; border-bottom:1.5px solid var(--cyan);}

.contrats-visual.declenche .phone-mockup{ animation:phone-in .5s ease-out forwards, phone-lance .6s ease-in-out forwards .6s; }
.contrats-visual.declenche .phone-navbar{ animation:phone-ui-in .4s ease-out forwards; animation-delay:.5s; }
.contrats-visual.declenche .datacenter{ animation:phone-ui-in .5s ease-out forwards .4s, datacenter-pulse 1.1s ease-in-out forwards 1.4s; }
.contrats-visual.declenche .paquet-aller-1{ animation:paquet-aller .8s ease-in forwards; animation-delay:.7s; }
.contrats-visual.declenche .paquet-aller-2{ animation:paquet-aller .8s ease-in forwards; animation-delay:.82s; }
.contrats-visual.declenche .paquet-aller-3{ animation:paquet-aller .8s ease-in forwards; animation-delay:.94s; }
.contrats-visual.declenche .paquet-aller-4{ animation:paquet-aller .8s ease-in forwards; animation-delay:1.06s; }
.contrats-visual.declenche .paquet-aller-5{ animation:paquet-aller .8s ease-in forwards; animation-delay:1.18s; }
.contrats-visual.declenche .paquet-retour{ animation:paquet-retour .8s ease-out forwards; animation-delay:1.9s; }
.contrats-visual.declenche .phone-screen{ animation:phone-glow .5s ease-out forwards; animation-delay:2.6s; }

.contrats-visual.declenche .phone-ui-1{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.9s; }
.contrats-visual.declenche .phone-ui-2{ animation:phone-ui-in .5s ease-out forwards; animation-delay:3.05s; }
.contrats-visual.declenche .phone-ui-3{ animation:phone-ui-in .5s ease-out forwards; animation-delay:3.3s; }

@keyframes phone-lance{
  0%{transform:rotate(0deg);}
  25%{transform:rotate(-9deg);}
  55%{transform:rotate(5deg);}
  80%{transform:rotate(-2deg);}
  100%{transform:rotate(0deg);}
}
@keyframes datacenter-pulse{
  0%{filter:drop-shadow(0 0 8px rgba(111,214,242,.4));}
  18%{filter:drop-shadow(0 0 20px rgba(111,214,242,1));}
  36%{filter:drop-shadow(0 0 8px rgba(111,214,242,.4));}
  54%{filter:drop-shadow(0 0 20px rgba(111,214,242,1));}
  72%{filter:drop-shadow(0 0 8px rgba(111,214,242,.4));}
  90%{filter:drop-shadow(0 0 20px rgba(111,214,242,1));}
  100%{filter:drop-shadow(0 0 10px rgba(111,214,242,.6));}
}
@keyframes paquet-aller{
  0%{opacity:0; transform:translate(0,0) scale(.6);}
  15%{opacity:1; transform:translate(20px,-40px) scale(1);}
  100%{opacity:0; transform:translate(78px,-172px) scale(.4);}
}
@keyframes paquet-retour{
  0%{opacity:0; transform:translate(0,0) scale(.5);}
  15%{opacity:1;}
  100%{opacity:0; transform:translate(-78px,172px) scale(1);}
}

/* ============ BLOC PAIEMENTS : cartes de synthèse + graphique + aperçu de la liste,
   même structure que le vrai écran Suivi de l'app ============ */
.paiements-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
}
.phone-stats-grille{display:grid; grid-template-columns:1fr 1fr; gap:5px;}
.phone-stat{
  display:flex; flex-direction:column; gap:2px;
  padding:6px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.04);
}
.phone-stat-label{font-size:6.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--texte-attenue);}
.phone-stat-valeur{font-size:12px; font-weight:800;}
.phone-stat-ambre{color:#f2a541; text-shadow:0 0 10px rgba(242,165,65,.65), 0 0 20px rgba(242,165,65,.3);}
.phone-stat-verte{color:#3ad17e; text-shadow:0 0 10px rgba(58,209,126,.65), 0 0 20px rgba(58,209,126,.3);}
.phone-stat-orange{color:#f2924e; text-shadow:0 0 10px rgba(242,146,78,.65), 0 0 20px rgba(242,146,78,.3);}
.phone-stat-rouge{color:#e2564f; text-shadow:0 0 10px rgba(226,86,79,.65), 0 0 20px rgba(226,86,79,.3);}

.phone-graphique{padding:7px 8px; border-radius:10px; background:rgba(255,255,255,.03);}
.phone-graphique-titre{font-size:7px; text-transform:uppercase; letter-spacing:.03em; color:var(--texte-attenue);}
.phone-barres{display:flex; align-items:flex-end; gap:4px; height:44px; margin-top:6px;}
.phone-barre{
  flex:1; height:0;
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#3ad17e,#f2a541);
}

.phone-paiement-liste{display:flex; flex-direction:column; gap:2px;}
.phone-paiement-jour{display:flex; justify-content:space-between; align-items:baseline; font-size:7.5px; font-weight:800; text-transform:uppercase; color:var(--cyan); letter-spacing:.03em; margin-top:4px;}
.phone-paiement-jour:first-child{margin-top:0;}
.phone-paiement-compte{font-size:6.5px; font-weight:600; text-transform:none; color:var(--texte-attenue); letter-spacing:0;}
.phone-paiement-ligne{display:flex; justify-content:space-between; font-size:9px; color:var(--texte-attenue); padding:2px 0;}
.phone-paiement-ligne b{color:var(--texte); font-weight:700;}

.paiements-visual.declenche .phone-mockup{ animation:phone-in .6s ease-out forwards; }
.paiements-visual.declenche .phone-navbar{ animation:phone-ui-in .4s ease-out forwards; animation-delay:.6s; }
.paiements-visual.declenche .phone-ui-1{ animation:phone-ui-in .5s ease-out forwards; animation-delay:.8s; }
.paiements-visual.declenche .phone-ui-2{ animation:phone-ui-in .5s ease-out forwards; animation-delay:1s; }
.paiements-visual.declenche .phone-barre{ animation:barre-remplir .6s ease-out forwards; animation-delay:1.3s; }
.paiements-visual.declenche .phone-ui-3{ animation:phone-ui-in .5s ease-out forwards; animation-delay:1.9s; }

@keyframes barre-remplir{ from{height:0;} to{height:var(--h);} }

/* ============ BLOC TRAVAUX : le téléphone glisse depuis le bas, la liste triée par priorité
   se remplit, puis confirmation d'ajout au calendrier ============ */
.travaux-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
}
.phone-travail-ligne{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.phone-travail-texte{font-size:9px; color:var(--texte-attenue);}
.phone-travail-badge{
  font-size:7px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding:2px 6px; border-radius:20px;
}
.phone-travail-urgent{border-color:rgba(226,86,79,.4);}
.phone-travail-urgent .phone-travail-badge{background:rgba(226,86,79,.18); color:#e2564f;}
.phone-travail-prevoir{border-color:rgba(242,165,65,.4);}
.phone-travail-prevoir .phone-travail-badge{background:rgba(242,165,65,.18); color:#f2a541;}

@keyframes phone-slide-up{
  0%{opacity:0; transform:translateY(60px) scale(.95);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
.travaux-visual.declenche .phone-mockup{ animation:phone-slide-up .7s cubic-bezier(.2,.8,.3,1) forwards; }
.travaux-visual.declenche .phone-navbar{ animation:phone-ui-in .4s ease-out forwards; animation-delay:.6s; }
.travaux-visual.declenche .icone-cle{ animation:vol-carnet 1.6s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.15s; }
.travaux-visual.declenche .icone-calendrier{ animation:vol-client 1.55s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.35s; }
.travaux-visual.declenche .icone-alerte{ animation:vol-contrat 1.6s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.55s; }
.travaux-visual.declenche .icone-coche{ animation:vol-goutte 1.55s cubic-bezier(.3,.6,.2,1) forwards; animation-delay:.75s; }

.travaux-visual.declenche .phone-ui-1{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.3s; }
.travaux-visual.declenche .phone-ui-2{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.45s; }
.travaux-visual.declenche .phone-ui-3{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.6s; }
.travaux-visual.declenche .phone-ui-4{ animation:phone-ui-in .5s ease-out forwards; animation-delay:2.75s; }
.travaux-visual.declenche .phone-ui-5{ animation:phone-ui-in .5s ease-out forwards; animation-delay:3.05s; }

/* ============ SECTION PWA : l'icône iPool atterrit sur un écran d'accueil simulé ============ */
.pwa-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:460px;
}
.phone-icones-accueil{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  padding:10px;
}
.phone-icone-app{
  width:100%; aspect-ratio:1;
  border-radius:22%;
  background:rgba(255,255,255,.08);
}
.phone-icone-ipool{
  background:linear-gradient(135deg,var(--cyan),var(--azur));
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.3);
  box-shadow:0 0 0 rgba(111,214,242,0);
}
.phone-icone-ipool-lettre{font-size:16px; font-weight:800; color:#fff;}
.phone-toast{
  margin-top:14px;
  text-align:center;
  font-size:10px; font-weight:700; color:var(--texte);
  padding:7px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  opacity:0;
}

@keyframes icone-atterrit{
  0%{opacity:0; transform:scale(2.2) translateY(-60px);}
  60%{opacity:1; transform:scale(.85) translateY(0);}
  80%{transform:scale(1.1);}
  100%{opacity:1; transform:scale(1) translateY(0); box-shadow:0 0 16px rgba(111,214,242,.6);}
}
.pwa-visual.declenche .phone-mockup{ animation:phone-in .6s ease-out forwards; }
.pwa-visual.declenche .phone-icone-ipool{ animation:icone-atterrit .7s cubic-bezier(.3,.6,.3,1) forwards; animation-delay:.9s; }
.pwa-visual.declenche .phone-toast{ animation:phone-ui-in .5s ease-out forwards; animation-delay:1.7s; }

/* FEATURES */
.feature-grid{
  width:100%;
  max-width:1100px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:40px;
}
.feature-grid .text-block{grid-column:1;}
.feature-grid-reverse .text-block{grid-column:2;}

/* PRICING */
.section-pricing{justify-content:center;}
.pricing-card{
  text-align:center;
  max-width:440px;
  background:var(--verre-fond);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(111,214,242,.35);
  border-radius:28px;
  padding:52px 44px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);
}
.pricing-card .lead{margin:0 auto 30px;}
.price{margin:8px 0 18px;}
.price-amount{
  font-size:64px;
  font-weight:800;
  letter-spacing:-.03em;
  background:linear-gradient(90deg,var(--cyan),var(--azur));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.price-period{font-size:18px; color:var(--texte-attenue); margin-left:4px;}
.pricing-note{
  margin:0 auto 24px;
  max-width:340px;
  font-size:14px;
  line-height:1.5;
  color:var(--cyan);
  border:1px solid rgba(111,214,242,.28);
  border-radius:12px;
  padding:10px 14px;
  background:rgba(111,214,242,.07);
}

/* FAQ */
.faq-block{max-width:680px; text-align:left;}
.faq-liste{margin-top:8px; display:flex; flex-direction:column; gap:12px;}
.faq-item{
  border:1px solid var(--verre-bordure);
  border-radius:14px;
  padding:4px 20px;
  background:rgba(255,255,255,.02);
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:16px 0;
  font-weight:700;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+';
  flex-shrink:0;
  font-size:22px;
  font-weight:400;
  color:var(--cyan);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{
  margin:0 0 18px;
  color:var(--texte-attenue);
  font-size:15px;
  line-height:1.6;
}

/* BUTTONS */
.btn{
  display:inline-block;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  padding:14px 30px;
  border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,rgba(24,180,232,.85) 0%,rgba(10,126,164,.9) 55%,rgba(7,92,120,.95) 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(10,126,164,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-large{padding:16px 36px; font-size:17px;}
.btn-ghost{
  color:var(--texte);
  background:rgba(255,255,255,.04);
  border:1px solid var(--verre-bordure);
}
.btn-ghost:hover{background:rgba(255,255,255,.1);}

/* FOOTER */
.footer{
  position:relative;
  z-index:1;
  text-align:center;
  padding:60px 24px 80px;
  color:var(--texte-attenue);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.footer .nav-logo{font-size:22px;}
.footer-liens{display:flex; gap:18px; font-size:13px; margin-top:4px;}
.footer-liens a{color:var(--texte-attenue); text-decoration:underline; text-underline-offset:3px;}
.footer-liens a:hover{color:var(--cyan);}

/* PAGES LÉGALES (CGU, confidentialité) : simple colonne de lecture, pas de scène 3D */
.legal-main{position:relative; z-index:1; max-width:720px; margin:0 auto; padding:160px 24px 100px;}
.legal-main h1{font-size:clamp(28px,4vw,40px); font-weight:800; letter-spacing:-.02em; margin-bottom:8px;}
.legal-main .legal-maj{color:var(--texte-attenue); font-size:14px; margin-bottom:40px;}
.legal-main h2{font-size:20px; font-weight:700; margin:36px 0 12px;}
.legal-main p, .legal-main li{color:var(--texte-attenue); font-size:15px; line-height:1.7;}
.legal-main p{margin-bottom:14px;}
.legal-main ul{margin:0 0 14px 20px;}
.legal-main li{margin-bottom:6px;}
.legal-main a{color:var(--cyan);}
.legal-retour{display:inline-block; margin-bottom:24px; color:var(--texte-attenue); font-size:14px;}
.legal-note{background:var(--verre-fond); border:1px solid var(--verre-bordure); border-radius:14px; padding:16px 18px; margin-bottom:32px; font-size:13px; color:var(--texte-attenue);}

/* REVEAL ANIMATION */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* RESPONSIVE */
@media (max-width:820px){
  .feature-grid{grid-template-columns:1fr;}
  .feature-grid .text-block,
  .feature-grid-reverse .text-block{grid-column:1; margin:0 auto;}
  .text-block{padding:32px 28px;}
  .section{padding:100px 20px;}
}