/* ==========================================================
   AES COMMUNICATION - MAQUETTE V6
   Base v5 + effets : rideau d'ouverture panthere, curseur personnalise,
   titres reveles mot par mot, images devoilees, compteurs animes,
   parallaxe, defile geant des metiers, boutons magnetiques, grain.
   ========================================================== */

:root{
  --blanc:#FFFFFF;
  --papier:#F5F5F6;
  --papier-2:#EEEEF0;
  --encre:#16191E;
  --encre-2:#212429;
  --gris:#6B7079;
  --gris-f:#3E434A;
  --bord:rgba(16,18,21,.12);
  --bord-f:rgba(16,18,21,.26);
  --bord-s:rgba(255,255,255,.14);
  --rouge:#8E1520;          /* bordeaux : depuis le 08/09/2026, tout le rouge est passe en bordeaux */
  --rouge-v:#E34453;        /* bordeaux eclairci, lisible sur fond noir (contraste 5,35) */
  --bordeaux:#8E1520;
  --bordeaux-f:#660F17;     /* bordeaux fonce, pour le survol des boutons */
  --max:1420px;
  --marge:clamp(18px,3.5vw,54px);
  --t:cubic-bezier(.19,1,.22,1);
  --disp:'Playfair Display',Georgia,serif;
  --txt:'Montserrat',system-ui,-apple-system,sans-serif;
  --rond:'Montserrat',system-ui,sans-serif;
  --img-code:url("../img/img-code.jpg");
  --img-pabourette:url("../img/img-pabourette.jpg");

  --img-erds:url("../img/img-erds.jpg");
  --img-impmenuiserie:url("../img/img-impmenuiserie.jpg");
  --img-mba:url("../img/img-mba.jpg");
  --img-manosquebox:url("../img/img-manosquebox.jpg");
  --img-lentz:url("../img/img-lentz.jpg");
  --img-albizzia:url("../img/img-albizzia.jpg");
  --img-compta:url("../img/img-compta.jpg");
  --img-designers:url("../img/img-designers.jpg");
  --img-durance:url("../img/img-durance.jpg");
  --img-alain:url("../img/img-alain.jpg");
  --ph-site:url("../img/ph-site.jpg");
  --ph-seo:url("../img/ph-seo.jpg");
  --ph-gbp:url("../img/ph-gbp.jpg");
  --ph-ecran:url("../img/ph-ecran.jpg");
  --ph-sac:url("../img/ph-sac.jpg");
  --ec-pabourette:url("../img/ecran-pabourette.jpg");
  --ec-erds:url("../img/ecran-erds.jpg");
  --ec-albizzia:url("../img/ecran-albizzia.jpg");
  --ec-lentz:url("../img/ecran-lentz.jpg");
  --ec-impmenuiserie:url("../img/ecran-impmenuiserie.jpg");
  --ec-manosquebox:url("../img/ecran-manosquebox.jpg");
  /* tete facettee du logo n.2, detouree le 02/09/2026. L'ancienne panthere
     reste disponible dans le dossier des images si besoin de revenir. */
  --img-panthere:url("../img/img-panthere-2.png");
  --patte-r:url("../img/patte-bordeaux.png");
  --patte-n:url("../img/patte.png");
  --griffes:url("../img/griffes.png");
  --panthere-m:url("../img/panthere-marche.png");
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--txt);background:var(--blanc);color:var(--gris);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--marge)}
h1,h2,h3,h4{font-family:var(--disp);color:var(--encre);line-height:1.07;letter-spacing:-.028em;font-weight:700}
.sur{font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rouge);display:inline-flex;align-items:center;gap:12px}
.sur::before{content:"";width:28px;height:1px;background:var(--rouge)}

.badge{position:fixed;left:14px;bottom:14px;z-index:999;background:var(--encre);color:#fff;padding:7px 13px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;pointer-events:none;border-radius:4px}

/* ---------- LOGO : panthere + AES en lettres rondes ---------- */
.logo{display:flex;align-items:center;gap:11px}
.logo .fauve{
  width:clamp(40px,3.4vw,50px);flex:0 0 auto;aspect-ratio:444/316;
  background:var(--img-panthere) no-repeat center/contain;
  transition:transform .5s var(--t);
}
.logo:hover .fauve{transform:translateX(-3px) scale(1.05)}
.logo .mot{display:block;line-height:1}
.logo .mot b{
  display:block;font-family:var(--rond);font-weight:800;font-size:clamp(24px,2.2vw,30px);
  letter-spacing:.004em;line-height:1;
  /* degrade repris du logo : rouge en haut, fonce en bas */
  /* degrade bordeaux vers noir, echantillonne dans le logo n.2 (#8E1520 -> #2E3935) */
  background:linear-gradient(178deg,#7A0040 0%,#5C2438 44%,#332E2F 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.logo .mot em{
  display:block;font-family:var(--disp);font-style:normal;font-weight:600;
  font-size:clamp(8px,.72vw,9.5px);letter-spacing:.30em;color:var(--encre);
  margin-top:3px;text-transform:uppercase;
}
.logo .mot em i{font-style:normal;color:var(--bordeaux)}
.sombre .logo .mot em{color:#fff}
.sombre .logo .mot em i{color:var(--rouge-v)}
.sombre .logo .mot b{background:linear-gradient(178deg,#E34453 0%,#993366 38%,#FFFFFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sombre .logo .fauve{filter:invert(1) hue-rotate(180deg) saturate(1.85) brightness(1.42) contrast(1.08)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;padding:16px 28px;border-radius:99px;font-family:var(--txt);font-size:13px;font-weight:600;letter-spacing:.06em;border:1px solid var(--bordeaux);color:var(--bordeaux);background:transparent;cursor:pointer;position:relative;overflow:hidden;transition:color .45s var(--t),border-color .45s var(--t),transform .45s var(--t)}
.btn i{position:absolute;inset:0;background:var(--bordeaux);transform:translateY(101%);transition:transform .5s var(--t);z-index:1}
.btn span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:11px}
.btn:hover{color:#fff;border-color:var(--bordeaux)}
.btn:hover i{transform:translateY(0)}
.btn-r{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn-r i{background:var(--bordeaux-f)}
.btn-r:hover{color:#fff;border-color:var(--bordeaux-f)}
.btn-c{border-color:var(--rouge-v);color:var(--rouge-v)}
.btn-c i{background:var(--rouge-v)}
.btn-c:hover{color:#fff;border-color:var(--rouge-v)}
.btn-sm{padding:12px 22px;font-size:12.5px}

/* ---------- En-tete en pilule flottante ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px var(--marge) 0}
.header .barre{
  max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:26px;
  height:74px;padding:0 14px 0 18px;border-radius:99px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--bord);transition:background .5s var(--t),box-shadow .5s var(--t);
}
.header.pose .barre{background:rgba(255,255,255,.96);box-shadow:0 12px 40px -22px rgba(16,18,21,.5)}
.nav{display:flex;align-items:center;gap:4px}
.nav li{list-style:none}
.nav a{display:block;padding:9px 15px;border-radius:99px;font-size:14px;font-weight:500;color:var(--gris-f);transition:color .3s,background .3s}
.nav a:hover{color:var(--encre);background:rgba(16,18,21,.06)}
.cta-h{display:flex;align-items:center;gap:12px}
.tel-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--encre)}
.tel-h svg{width:19px;height:19px;color:var(--rouge)}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--bord-f);background:none;cursor:pointer;place-items:center}
.burger i{display:block;width:16px;height:1.5px;background:var(--encre);position:relative;border-radius:2px}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--encre);border-radius:2px}
.burger i::before{top:-5px}.burger i::after{top:5px}
@media(max-width:1120px){.nav,.tel-h{display:none}.burger{display:grid}}
@media(max-width:560px){.cta-h .btn{display:none}.header .barre{height:64px}}

/* ==========================================================
   HERO clair, avec panneau sombre pour les telephones
   ========================================================== */
.hero{position:relative;padding:clamp(120px,15vh,170px) 0 clamp(50px,7vw,90px);background:var(--blanc);overflow:hidden}
/* griffures en accent derriere le titre */
.hero::after{content:"";position:absolute;left:-5%;top:14%;width:min(44vw,600px);aspect-ratio:1100/1172;
  background:var(--griffes) no-repeat center/contain;opacity:.10;pointer-events:none;z-index:1;
  transform:rotate(-8deg)}
@media(max-width:1000px){.hero::after{opacity:.07;left:-18%;top:6%}}
.hero::before{content:"";position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(90deg,rgba(16,18,21,.045) 1px,transparent 1px);background-size:calc(100%/6) 100%;
  mask-image:linear-gradient(180deg,transparent,#000 30%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,transparent)}
.hero-grille{position:relative;z-index:3;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.5vw,64px);align-items:center}
@media(max-width:1000px){.hero-grille{grid-template-columns:1fr;gap:40px}}

.hero .sur{margin-bottom:22px}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.7rem);font-weight:800;margin-bottom:22px;min-height:2.1em}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .l b{display:block;font-weight:800;transform:translateY(105%);transition:transform 1s var(--t)}
.hero.go h1 .l:nth-child(2) b{transition-delay:.08s}
.hero.go h1 .l b{transform:translateY(0)}
.hero h1 .rg{color:var(--rouge)}
.hero p.ch{font-size:clamp(1rem,1.3vw,1.14rem);color:var(--gris);max-width:520px;margin-bottom:32px;opacity:0;transform:translateY(18px);transition:all .8s var(--t) .35s}
.hero.go p.ch{opacity:1;transform:none}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;opacity:0;transform:translateY(18px);transition:all .8s var(--t) .46s}
.hero.go .hero-act{opacity:1;transform:none}
.hero-preuve{display:flex;flex-wrap:wrap;gap:28px;margin-top:38px;padding-top:8px;opacity:0;transition:opacity .8s var(--t) .6s}
.hero.go .hero-preuve{opacity:1}
.hero-preuve div b{display:block;font-family:var(--disp);font-size:clamp(2.1rem,3vw,2.8rem);font-weight:800;color:var(--bordeaux);letter-spacing:-.04em;line-height:1}
.hero-preuve div span{font-size:12px;color:var(--gris);letter-spacing:.05em}

/* Panneau sombre qui porte les telephones */
.scene{
  position:relative;border-radius:26px;overflow:hidden;background:var(--encre);
  padding:clamp(28px,3.4vw,50px) clamp(16px,2vw,30px) clamp(46px,4vw,64px);
  box-shadow:0 40px 90px -40px rgba(16,18,21,.55);
}
.scene::before{content:"";position:absolute;inset:0;background:var(--img-code) no-repeat center/cover;opacity:.26}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,18,21,.55),rgba(16,18,21,.86))}
/* ==========================================================
   LA SCENE D'ACCUEIL : cinq ecrans clients en perspective
   Tout est en CSS 3D, il n'y a ni video ni bibliotheque.
   Chaque ecran porte ses coordonnees dans des variables, ce qui
   permet d'animer l'entree sans reecrire cinq fois le transform.
   ========================================================== */
.ecrans{
  position:relative;z-index:3;
  height:clamp(268px,31vw,412px);
  perspective:1600px;perspective-origin:50% 46%;
}
.ecrans-in{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.2,.8,.3,1);will-change:transform;
}
.ec{
  --x:0%;--y:0%;--z:0px;--ry:0deg;--rz:0deg;--o:1;
  position:absolute;left:50%;top:50%;
  width:clamp(170px,23vw,302px);aspect-ratio:4/3;
  transform-style:preserve-3d;cursor:pointer;text-decoration:none;
  opacity:0;
  transform:translate(-50%,-50%) translate3d(var(--x),calc(var(--y) + 44px),calc(var(--z) - 280px)) rotateY(var(--ry)) rotateZ(var(--rz));
  transition:opacity 1.1s var(--t),transform 1.3s var(--t),filter .55s var(--t);
}
.hero.go .ec{
  opacity:var(--o);
  transform:translate(-50%,-50%) translate3d(var(--x),var(--y),var(--z)) rotateY(var(--ry)) rotateZ(var(--rz));
}
/* les cinq positions de l'eventail */
.ec-1{--x:-104%;--y:-17%;--z:-350px;--ry:27deg;--rz:-6.5deg;--o:.5;z-index:1;filter:brightness(.6)}
.ec-2{--x:-54%;--y:9%;--z:-160px;--ry:18deg;--rz:-2deg;--o:.88;z-index:2;filter:brightness(.87)}
.ec-3{--x:2%;--y:-3%;--z:80px;--ry:-4deg;--rz:.8deg;--o:1;z-index:5}
.ec-4{--x:56%;--y:13%;--z:-175px;--ry:-16deg;--rz:3.2deg;--o:.84;z-index:2;filter:brightness(.84)}
.ec-5{--x:106%;--y:-11%;--z:-330px;--ry:-25deg;--rz:4deg;--o:.52;z-index:1;filter:brightness(.62)}
.hero.go .ec-3{transition-delay:.18s}
.hero.go .ec-2,.hero.go .ec-4{transition-delay:.32s}
.hero.go .ec-1,.hero.go .ec-5{transition-delay:.46s}
/* le flottement est porte par l'enfant : on ne peut pas cumuler
   deux transformations sur un meme element */
.ec-in{
  display:block;width:100%;height:100%;
  border-radius:clamp(9px,1vw,15px);background:#22262C;padding:clamp(3px,.4vw,6px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 68px -22px rgba(0,0,0,.92);
  animation:flotte 7.5s ease-in-out infinite;
  transition:box-shadow .5s var(--t);
}
.ec-1 .ec-in{animation-delay:-2.6s}
.ec-2 .ec-in{animation-delay:-1.3s}
.ec-4 .ec-in{animation-delay:-3.9s}
.ec-5 .ec-in{animation-delay:-5.2s}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ec-ecran{
  position:relative;display:block;width:100%;height:100%;overflow:hidden;
  border-radius:clamp(6px,.72vw,11px);background:#fff;
}
.ec-vue{
  position:absolute;inset:0 0 auto;height:calc(100% - clamp(22px,2.4vw,33px));
  background-size:cover;background-position:top center;
}
.ec-nom{
  position:absolute;left:0;right:0;bottom:0;height:clamp(22px,2.4vw,33px);
  display:flex;align-items:center;gap:6px;padding:0 clamp(7px,.8vw,12px);
  background:var(--blanc);border-top:1px solid var(--bord);
}
.ec-nom b{
  font-family:var(--disp);font-weight:700;color:var(--encre);letter-spacing:-.02em;
  font-size:clamp(7.5px,.72vw,11px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ec-nom i{
  font-style:normal;font-size:clamp(5.5px,.5vw,7.5px);letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris);white-space:nowrap;margin-left:auto;
}
.ec-nom s{
  text-decoration:none;flex:0 0 auto;width:clamp(13px,1.35vw,19px);height:clamp(13px,1.35vw,19px);
  border-radius:50%;background:var(--rouge);display:grid;place-items:center;margin-left:auto;
}
.ec-nom s svg{width:56%;height:56%;color:#fff}
/* reflet de vitre */
.ec-in::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 72%,rgba(255,255,255,.07) 100%);
}
.ec-in{position:relative}
/* au survol, l'ecran vient au premier plan */
.ec:hover{filter:none !important;z-index:9;
  transform:translate(-50%,-50%) translate3d(var(--x),calc(var(--y) - 12px),calc(var(--z) + 96px)) rotateY(calc(var(--ry) * .45)) rotateZ(calc(var(--rz) * .45))}
.ec:hover .ec-in{box-shadow:0 42px 84px -20px rgba(0,0,0,.95),0 0 0 1px rgba(102,0,51,.5)}
.ec:focus-visible{outline:2px solid var(--rouge-v);outline-offset:6px}
@media(max-width:820px){
  .ec-1,.ec-5{display:none}
  .ec-2{--x:-62%;--z:-120px;--ry:15deg}
  .ec-4{--x:62%;--z:-120px;--ry:-15deg}
  .ec{width:clamp(168px,40vw,240px)}
  .ecrans{height:clamp(230px,44vw,300px)}
}
@media(prefers-reduced-motion:reduce){
  .ec-in{animation:none}
  .ecrans-in{transition:none}
}
.tels{position:relative;z-index:3;display:flex;justify-content:center;align-items:flex-end;gap:clamp(5px,1vw,15px)}
.tel{
  position:relative;flex:0 0 auto;min-width:0;
  /* largeurs en pourcentage : les trois tiennent toujours dans le cadre */
  width:29%;max-width:180px;aspect-ratio:9/16.6;
  border-radius:clamp(16px,1.9vw,26px);background:#22262C;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 26px 56px -20px rgba(0,0,0,.9);
  padding:4px;opacity:0;transform:translateY(34px);
  transition:opacity 1s var(--t),transform 1.1s var(--t);
}
.hero.go .tel{opacity:1;transform:translateY(0)}
.hero.go .tel-1{transition-delay:.30s}
.hero.go .tel-2{transition-delay:.42s}
.hero.go .tel-3{transition-delay:.54s}
.tel-1,.tel-3{margin-bottom:clamp(14px,2.4vw,34px)}
.tel-2{z-index:3;width:33%;max-width:204px}
.tel-ecran{position:relative;width:100%;height:100%;border-radius:clamp(13px,1.6vw,22px);overflow:hidden;background:#fff}
/* Chaque ecran affiche une mini fiche projet : la capture entiere, non rognee,
   et surtout le nom du client en clair. */
.tel-vue{
  position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--t);
  background:#fff;display:flex;flex-direction:column;
}
.tel-vue.on{opacity:1}
.tel{cursor:pointer}
.tel-shot{
  width:100%;aspect-ratio:860/484;flex:0 0 auto;
  background-size:cover;background-position:top center;
}
.tel-fiche{flex:1;display:flex;flex-direction:column;padding:clamp(8px,.85vw,13px);gap:clamp(2px,.25vw,4px);min-height:0}
.tel-fiche .nm{
  font-family:var(--disp);font-weight:700;color:var(--encre);
  letter-spacing:-.022em;line-height:1.14;font-size:clamp(9px,.88vw,12.5px);
}
.tel-fiche .vl{font-size:clamp(6.5px,.56vw,8.5px);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.tel-fiche .tg{display:flex;flex-wrap:wrap;gap:4px;margin-top:clamp(5px,.5vw,8px)}
.tel-fiche .tg i{
  font-style:normal;font-size:clamp(6px,.5vw,7.5px);letter-spacing:.06em;text-transform:uppercase;
  background:var(--papier);border:1px solid var(--bord);color:var(--gris);
  padding:3px 6px;border-radius:99px;white-space:nowrap;
}
.tel-fiche .go{
  margin-top:auto;background:var(--rouge);color:#fff;text-align:center;border-radius:99px;
  padding:clamp(5px,.52vw,8px);font-size:clamp(6.5px,.55vw,8.5px);
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.encoche{position:absolute;top:0;left:50%;transform:translateX(-50%);width:36%;height:clamp(10px,1.2vw,16px);background:#16191D;border-radius:0 0 11px 11px;z-index:4}
.tel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 74%,rgba(255,255,255,.08) 100%)}
.tel-credit{position:absolute;left:0;right:0;bottom:clamp(16px,1.8vw,24px);z-index:4;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ==========================================================
   SECTIONS
   ========================================================== */
.sec{padding:clamp(70px,10vw,140px) 0;position:relative}
.gris{background:var(--papier)}
.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(32px,4.5vw,58px)}
.tete h2{font-size:clamp(1.9rem,4.2vw,3.5rem);margin-top:18px;max-width:16ch}
.tete p{color:var(--gris);max-width:44ch;margin-top:14px}

/* Prestations */
.presta{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px)}
@media(max-width:1000px){.presta{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.presta{grid-template-columns:1fr}}
.pr{
  position:relative;background:var(--blanc);border:1px solid var(--bord);border-radius:16px;
  overflow:hidden;isolation:isolate;
  transition:transform .6s var(--t),border-color .5s var(--t),box-shadow .5s var(--t);
}
.pr-in{padding:clamp(22px,2.2vw,32px)}
/* photo en tete de carte, a la place des pictos */
.pr-ph{
  width:100%;aspect-ratio:1.9;background-size:cover;background-position:center;
  filter:grayscale(.22) brightness(.92);
  transition:filter .7s var(--t),transform 1.2s var(--t);
}
.pr-3 .pr-ph,.pr-4 .pr-ph,.pr-5 .pr-ph{aspect-ratio:1.55}
.pr:hover .pr-ph{filter:none;transform:scale(1.035)}

/* ---------- Section prestations sur fond noir ---------- */
.noir{background:var(--encre)}
.noir .tete h2{color:#fff}
.noir .tete p{color:var(--rouge-v)}
.noir .btn{border-color:var(--rouge-v);color:var(--rouge-v)}
.noir .btn i{background:var(--rouge-v)}
.noir .btn:hover{color:#fff;border-color:var(--rouge-v)}
.noir .pr{background:#15181D;border-color:rgba(255,255,255,.11)}
.noir .pr::after{background:#1C2027}
.noir .pr:hover{border-color:rgba(255,255,255,.28);box-shadow:0 26px 54px -30px rgba(0,0,0,.9)}
.noir .pr h3{color:#fff}
.noir .pr p{color:rgba(255,255,255,.60)}
.noir .pr li{color:rgba(255,255,255,.84)}
/* numeros et tirets en rouge */
.noir .pr .num,.noir .pr:hover .num{color:var(--rouge-v)}
.noir .pr li::before{opacity:1}
.noir .pr .lien{color:#fff;border-color:rgba(255,255,255,.28)}
.noir .pr:hover .lien{border-color:var(--rouge-v)}
.pr-1,.pr-2{grid-column:span 3}
.pr-3,.pr-4,.pr-5{grid-column:span 2}
@media(max-width:1000px){.pr{grid-column:span 1 !important}.pr-1{grid-column:span 2 !important}}
@media(max-width:620px){.pr-1{grid-column:span 1 !important}}
.pr::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--rouge);transition:width .7s var(--t);z-index:3}
.pr:hover::before{width:100%}
.pr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--papier);transition:height .6s var(--t);z-index:-1}
.pr:hover::after{height:100%}
.pr:hover{transform:translateY(-6px);border-color:var(--bord-f);box-shadow:0 26px 50px -30px rgba(16,18,21,.4)}
.pr .num{font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--gris);display:block;margin-bottom:22px;transition:color .5s var(--t)}
.pr:hover .num{color:var(--rouge)}
.pr .ic{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;border:1px solid var(--bord);margin-bottom:22px;transition:border-color .5s var(--t),transform .6s var(--t),background .5s var(--t)}
.pr:hover .ic{border-color:var(--rouge);background:rgba(102,0,51,.07);transform:translateY(-3px)}
.pr .ic svg{width:23px;height:23px;color:var(--encre);transition:color .5s var(--t)}
.pr:hover .ic svg{color:var(--rouge)}
.pr h3{font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:12px}
.pr p{font-size:14.8px;color:var(--gris);margin-bottom:20px}
.pr ul{margin-bottom:22px}
.pr li{list-style:none;font-size:14px;color:var(--gris-f);padding-left:26px;position:relative;margin-bottom:8px}
/* la puce est l'empreinte de patte, pas un tiret */
.pr li::before{content:"";position:absolute;left:0;top:4px;width:13px;height:13px;background:var(--patte-r) no-repeat center/contain;opacity:.9}
.lien{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--encre);padding-bottom:6px;border-bottom:1px solid var(--bord-f);transition:gap .45s var(--t),border-color .45s var(--t)}
.pr:hover .lien{gap:16px;border-color:var(--rouge)}
.prix{position:absolute;top:22px;right:22px;background:var(--rouge);color:#fff;font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:99px;z-index:3}

/* Realisations */
.trav{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,26px)}
@media(max-width:760px){.trav{grid-template-columns:1fr}}
.tr{position:relative;display:block;border-radius:16px;overflow:hidden;background:var(--papier-2);border:1px solid var(--bord);padding:12px}
.tr-img{aspect-ratio:16/10;border-radius:10px;background-color:#fff;background-size:100% auto;background-position:top center;transition:background-size 1.1s var(--t),filter .7s var(--t);filter:grayscale(.15) brightness(.97)}
.tr:hover .tr-img{background-size:104% auto;filter:none}
.tr-voile{position:absolute;inset:12px;border-radius:10px;background:linear-gradient(180deg,transparent 45%,rgba(16,18,21,.92));pointer-events:none}
.tr-txt{position:absolute;left:12px;right:12px;bottom:12px;padding:clamp(20px,2.2vw,30px);display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.tr-txt h3{color:#fff;font-size:clamp(1.05rem,1.5vw,1.35rem);margin-bottom:6px;transform:translateY(6px);transition:transform .55s var(--t)}
.tr:hover .tr-txt h3{transform:translateY(0)}
.tr-txt p{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);opacity:0;transform:translateY(8px);transition:all .55s var(--t) .05s}
.tr:hover .tr-txt p{opacity:1;transform:none}
.tr-fl{width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1px solid var(--bord-s);display:grid;place-items:center;color:#fff;transform:scale(.7);opacity:0;transition:all .55s var(--t)}
.tr:hover .tr-fl{opacity:1;transform:scale(1);background:var(--rouge);border-color:var(--rouge)}
.tr-fl svg{width:16px;height:16px}

/* Bureaux */
.bureaux{display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(28px,4.5vw,64px);align-items:center}
@media(max-width:860px){.bureaux{grid-template-columns:1fr;gap:30px}}
.totem{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--bord);background:var(--papier);aspect-ratio:3/4;max-width:400px}
.totem .ph{position:absolute;inset:0;background:var(--img-durance) no-repeat center/cover;transition:transform 1.2s var(--t)}
.totem:hover .ph{transform:scale(1.05)}
.bureaux h2{font-size:clamp(1.7rem,3.6vw,2.8rem);margin:18px 0 20px;max-width:18ch}
.bureaux p{color:var(--gris);margin-bottom:16px}
.adresses{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px;padding-top:6px}
@media(max-width:620px){.adresses{grid-template-columns:1fr}}
.adresses b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);margin-bottom:9px;font-weight:600}
.adresses span{font-size:14.5px;color:var(--gris-f);line-height:1.55}

/* Agence */
.agence{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:900px){.agence{grid-template-columns:1fr;gap:34px}}
.portrait{position:relative;border-radius:18px;overflow:hidden;background:var(--papier-2);border:1px solid var(--bord);aspect-ratio:1;max-width:440px}
.portrait .ph{position:absolute;inset:0;background:var(--img-alain) no-repeat center/cover}
.portrait .nom{position:absolute;left:0;bottom:0;z-index:3;padding:20px;background:linear-gradient(0deg,rgba(255,255,255,.96),rgba(255,255,255,0));right:0}
.portrait .nom b{display:block;font-family:var(--disp);font-size:1.3rem;color:var(--encre);letter-spacing:-.03em}
.portrait .nom span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge)}
.agence h2{font-size:clamp(1.7rem,3.6vw,2.8rem);margin:18px 0 22px}
.agence p{color:var(--gris);margin-bottom:16px}
.agence p.brouillon{border-left:2px solid var(--rouge);padding-left:16px;color:var(--gris-f);font-size:15px}
.agence .sign{display:flex;flex-wrap:wrap;gap:26px;margin-top:28px;padding-top:6px}
.agence .sign div b{display:block;font-family:var(--disp);font-size:1.5rem;color:var(--encre);letter-spacing:-.035em;line-height:1}
.agence .sign div span{font-size:12px;color:var(--gris)}

/* Methode */
.meth{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}
@media(max-width:900px){.meth{grid-template-columns:1fr}}
.meth-img{border-radius:18px;overflow:hidden;aspect-ratio:3/2;background:var(--img-designers) no-repeat center/cover;border:1px solid var(--bord)}
.et{display:flex;gap:20px;padding:22px 0;transition:padding-left .5s var(--t)}
.et:hover{padding-left:10px}
.et:last-child{border-bottom:0}
.et b{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--rouge);flex:0 0 34px;padding-top:3px}
.et h3{font-size:1.12rem;margin-bottom:6px}
.et p{font-size:14.5px;color:var(--gris)}

/* CTA sombre */
.cta{background:var(--encre)}
.cta h2{color:#fff;font-size:clamp(1.9rem,4.6vw,3.8rem);max-width:18ch;margin:18px 0 30px}
.cta-a{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:48px}
.cta-i{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-top:12px}
@media(max-width:760px){.cta-i{grid-template-columns:1fr;gap:20px}}
.cta-i b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px;font-weight:600}
.cta-i span{font-size:15px;color:rgba(255,255,255,.86);line-height:1.5}
/* le second lien de chaque prestation : maillage vers la page dediee */
.pr-liens{display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.lien-2{font-size:13px;line-height:1.4;color:var(--gris);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--bord-f);transition:color .35s var(--t),text-decoration-color .35s var(--t)}
.lien-2:hover{color:var(--rouge)}
.noir .lien-2{color:rgba(255,255,255,.58);text-decoration-color:rgba(255,255,255,.3)}
.noir .lien-2:hover{color:var(--rouge-v);text-decoration-color:var(--rouge-v)}

/* ---- le pied de page, quatre colonnes ---- */
.pied{background:var(--encre);color:rgba(255,255,255,.55);padding:clamp(46px,5vw,72px) 0 30px;font-size:13px}
.pied a{transition:color .3s var(--t)}
.pied a:hover{color:#fff}
.pied-haut{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;
  gap:clamp(26px,3.4vw,52px);padding-bottom:clamp(34px,3.6vw,50px);

}
@media(max-width:900px){.pied-haut{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pied-haut{grid-template-columns:1fr;gap:30px}}
.pied-col h4{
  font-family:var(--disp);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rouge-v);margin-bottom:18px;
}
.pied-col nav{display:flex;flex-direction:column;gap:11px}
.pied-col nav a{font-size:14px;line-height:1.35}
.pied-marque .logo{margin-bottom:18px}
.pied-marque p{font-size:14px;line-height:1.6;max-width:38ch;margin-bottom:20px}
.pied-tel{
  display:inline-flex;align-items:center;gap:10px;color:#fff;
  font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:.02em;
}
.pied-tel svg{width:21px;height:21px;color:var(--rouge-v)}
.pied-adr{font-style:normal;display:flex;flex-direction:column;gap:16px}
.pied-adr b{display:block;color:#fff;font-weight:600;font-size:13.5px;margin-bottom:4px}
.pied-adr span{font-size:13.5px;line-height:1.5}
.pied-zones{
  padding:24px 0;
  font-size:13px;line-height:1.7;color:rgba(255,255,255,.44);
}
.pied-zones b{color:rgba(255,255,255,.7);font-weight:600;margin-right:8px}
.pied .l{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:center;padding-top:24px}
.pied .l nav{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- Pastille du hero (repris de Galadrim) ---------- */
.hero .sur{
  background:rgba(102,0,51,.07);border:1px solid rgba(102,0,51,.22);
  padding:9px 17px;border-radius:99px;
}
.hero .sur::before{display:none}

/* ---------- Machine a ecrire sur la 2e ligne (repris de 6LAB) ---------- */
.hero h1 .l:nth-child(2){overflow:visible}
.hero h1 .l:nth-child(2) b{transform:none !important;min-height:1em}
.curseur{
  display:inline-block;width:4px;height:.78em;background:var(--rouge);
  margin-left:7px;vertical-align:-.04em;border-radius:1px;
  animation:clign 1s steps(1) infinite;
}
@keyframes clign{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ---------- Empreinte en filigrane dans la section agence ---------- */
#agence{position:relative;overflow:hidden}
#agence::after{
  content:"";position:absolute;right:-2%;bottom:-10%;
  width:min(36vw,440px);aspect-ratio:520/538;
  background:var(--patte-n) no-repeat center/contain;
  opacity:.045;pointer-events:none;transform:rotate(12deg);
}
@media(max-width:860px){#agence::after{opacity:.03;width:60vw}}

/* ---------- Separateur : la panthere traverse la page ---------- */
.sep-panthere{
  --sol:clamp(22px,3vw,42px);
  position:relative;height:clamp(130px,16vw,215px);overflow:hidden;
  /* aucune bordure : la panthere n'est pas dans un couloir */
  background:linear-gradient(180deg,var(--blanc) 0%,var(--blanc) 62%,var(--papier) 100%);
}
/* Pas de fausse foulee : elle avance au rythme du defilement.
   Sans JavaScript elle reste simplement centree. */
.sep-panthere span{
  position:absolute;bottom:var(--sol);left:50%;transform:translateX(-50%);
  width:clamp(230px,30vw,420px);aspect-ratio:760/314;
  will-change:transform;z-index:2;
}
.sep-panthere.anim span{left:0;transform:none}
.sep-panthere span i{
  display:block;width:100%;height:100%;
  background:var(--panthere-m) no-repeat center bottom/contain;
}
/* Le sol : un seul filet, qui s'efface a ses deux extremites plutot que
   de barrer la page d'un bord a l'autre. */
.sep-panthere::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--sol);height:1.5px;
  background:linear-gradient(90deg,transparent 0%,rgba(102,0,51,.75) 18%,var(--rouge) 50%,rgba(102,0,51,.75) 82%,transparent 100%);
}
/* l'ombre portee, qui la pose au sol au lieu de la laisser flotter */
.sep-panthere span::after{
  content:"";position:absolute;left:9%;right:9%;bottom:-5px;height:11px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(16,18,21,.26) 0%,rgba(16,18,21,0) 72%);
}
/* les empreintes qu'elle laisse derriere elle */
.pas-piste{position:absolute;left:0;right:0;bottom:var(--sol);height:0;z-index:1}
.pas-piste i{
  position:absolute;bottom:2px;width:clamp(10px,1.15vw,16px);aspect-ratio:1;
  background:var(--patte-r) no-repeat center/contain;
  opacity:0;transform:translateY(5px) scale(.7);
  transition:opacity .55s var(--t),transform .55s var(--t);
}
.pas-piste i.vu{opacity:.3;transform:none}
.pas-piste i:nth-child(2n){bottom:9px;width:clamp(8px,.95vw,13px)}
.pas-piste i:nth-child(3n){transform:translateY(5px) scale(.7) rotate(-9deg)}
.pas-piste i:nth-child(3n).vu{transform:rotate(-9deg)}
.pas-piste i:nth-child(4n){transform:translateY(5px) scale(.7) rotate(7deg)}
.pas-piste i:nth-child(4n).vu{transform:rotate(7deg)}
@media(prefers-reduced-motion:reduce){.pas-piste{display:none}}

/* ==========================================================
   PRISE DE RENDEZ-VOUS EN LIGNE
   ========================================================== */
#rdv .tete p{color:var(--bordeaux)}
.rdv-grille{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(18px,2.4vw,32px);align-items:start}
@media(max-width:900px){.rdv-grille{grid-template-columns:1fr}}
.rdv-form,.rdv-bloc{background:var(--blanc);border:1px solid var(--bord);border-radius:18px}
.rdv-form{padding:clamp(22px,2.6vw,38px)}
.rdv-etape+.rdv-etape{margin-top:clamp(24px,2.8vw,38px);padding-top:clamp(24px,2.8vw,38px)}
.rdv-etape h3{display:flex;align-items:center;gap:12px;font-size:clamp(1.02rem,1.5vw,1.28rem);margin-bottom:20px}
.rdv-etape h3 b{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--rouge);color:#fff;
  font-family:var(--txt);font-size:13px;font-weight:700;display:grid;place-items:center;
}
.rdv-champ{margin-bottom:16px}
.rdv-champ label{display:block;font-size:13px;font-weight:600;color:var(--gris-f);margin-bottom:7px}
.rdv-champ label em{font-style:normal;color:var(--rouge)}
.rdv-champ input,.rdv-champ select,.rdv-champ textarea{
  width:100%;padding:13px 15px;border-radius:12px;background:var(--papier);
  border:1px solid var(--bord);color:var(--encre);font-family:var(--txt);font-size:15px;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.rdv-champ input:focus,.rdv-champ select:focus,.rdv-champ textarea:focus{
  outline:none;border-color:var(--rouge);background:var(--blanc);box-shadow:0 0 0 4px rgba(102,0,51,.09);
}
.rdv-champ textarea{resize:vertical;min-height:96px}
.rdv-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.rdv-duo{grid-template-columns:1fr}}
.rdv-note{font-size:13.5px;color:var(--gris);margin:-6px 0 18px}
/* les creneaux */
.creneaux{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:640px){.creneaux{grid-template-columns:1fr}}
.creneau{
  text-align:left;padding:13px 15px;border-radius:12px;border:1px solid var(--bord);
  background:var(--blanc);cursor:pointer;font-family:var(--txt);
  transition:border-color .3s,background .3s,transform .3s var(--t);
}
.creneau:hover{border-color:var(--bord-f);transform:translateY(-2px)}
.creneau b{display:block;font-size:14.5px;font-weight:600;color:var(--encre);margin-bottom:3px}
.creneau span{font-size:12.5px;color:var(--gris)}
.creneau.pris{border-color:var(--rouge);background:rgba(102,0,51,.05)}
.creneau.pris span{color:var(--rouge);font-weight:600}
.creneau .proche{color:var(--rouge)}
/* colonne de droite */
.rdv-bloc{padding:clamp(20px,2.2vw,30px);margin-bottom:16px}
.rdv-bloc.rdv-tel{background:rgba(102,0,51,.05);border-color:rgba(102,0,51,.22)}
.rdv-bloc h4{font-size:1.02rem;margin-bottom:14px}
.rdv-bloc .num{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--encre);color:#fff;border-radius:12px;padding:15px;
  font-size:1.12rem;font-weight:700;font-family:var(--disp);letter-spacing:-.01em;
  transition:background .4s var(--t);
}
.rdv-bloc .num:hover{background:var(--rouge)}
.rdv-bloc ul{margin:0}
.rdv-bloc li{list-style:none;display:flex;gap:11px;font-size:14px;color:var(--gris);line-height:1.5;margin-bottom:12px}
.rdv-bloc li:last-child{margin-bottom:0}
.rdv-bloc li b{color:var(--encre);font-weight:600}
.rdv-bloc li svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:var(--rouge)}
.rdv-rgpd{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--gris);margin:20px 0}
.rdv-rgpd input{width:17px;height:17px;flex:0 0 17px;margin-top:2px;accent-color:var(--rouge)}
.rdv-envoi{
  margin-top:16px;padding:13px 16px;border-radius:12px;font-size:14px;font-weight:500;
  border:1px solid var(--bord);background:var(--papier);color:var(--gris-f);
}
.rdv-envoi.ok{background:#EAF7EE;border-color:#A8DDBA;color:#1B6B39}
.rdv-envoi.ko{background:#FDECEC;border-color:#F3B4B4;color:#96161B}
.rdv-maquette{
  margin-top:18px;font-size:12.5px;color:#8A6A12;background:#FFF8E6;
  border:1px solid #F5D98A;border-radius:10px;padding:11px 14px;
}
/* ---------- Bandeau « Ils nous font confiance » : logos clients ---------- */
.confiance{background:var(--blanc);overflow:hidden;padding:clamp(40px,5vw,68px) 0}
.confiance-tete{text-align:center;margin-bottom:clamp(26px,3.2vw,42px)}
.confiance-piste{display:flex;align-items:center;width:max-content;animation:glisse 82s linear infinite}
.confiance:hover .confiance-piste{animation-play-state:paused}
.confiance-piste a{display:inline-flex;align-items:center;flex:0 0 auto}
.confiance-piste img{
  height:clamp(36px,4.1vw,56px);width:auto;flex:0 0 auto;
  margin:0 clamp(24px,3.2vw,56px);
  filter:grayscale(1);opacity:.5;
  transition:filter .5s var(--t),opacity .5s var(--t),transform .5s var(--t);
}
.confiance-piste img:hover{filter:none;opacity:1;transform:scale(1.07)}
@media(prefers-reduced-motion:reduce){.confiance-piste{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}
.defile{background:var(--encre);overflow:hidden;padding:24px 0}
.defile-piste{display:flex;width:max-content;animation:glisse 52s linear infinite}
.defile:hover .defile-piste{animation-play-state:paused}
@keyframes glisse{to{transform:translateX(-50%)}}
.defile b{
  font-family:var(--disp);font-weight:600;font-size:clamp(.95rem,1.35vw,1.25rem);
  color:rgba(255,255,255,.58);white-space:nowrap;
  display:inline-flex;align-items:center;gap:clamp(16px,2vw,30px);
  padding-right:clamp(16px,2vw,30px);
}
.defile b::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--rouge);flex:0 0 5px}

/* ---------- Resultat sur les cartes realisations (repris de Galadrim) ----------
   Styles conserves mais INUTILISES pour l'instant : les etiquettes ont ete retirees
   en attendant de vrais chiffres clients. Pour les remettre, ajouter dans une carte :
   <span class="tr-res"><em>+40 %</em> de demandes en 6 mois</span>   */
.tr-res{
  position:absolute;top:16px;left:16px;z-index:4;max-width:calc(100% - 32px);
  background:rgba(255,255,255,.95);color:var(--encre);
  font-size:12.5px;font-weight:600;line-height:1.35;
  padding:9px 14px;border-radius:12px;
  opacity:0;transform:translateY(-8px);transition:all .55s var(--t);
}
.tr:hover .tr-res{opacity:1;transform:none}
.tr-res em{font-style:normal;color:var(--rouge)}

/* ==========================================================
   V6 : LES EFFETS
   ========================================================== */

/* --- 1. Rideau d'ouverture avec la panthere --- */
.rideau{
  position:fixed;inset:0;z-index:9999;background:transparent;
  display:grid;place-items:center;
  /* securite : meme si le JS echoue, le rideau s'efface au bout de 4 s */
  animation:secoursRideau .6s linear 5.2s forwards;
}
@keyframes secoursRideau{to{opacity:0;visibility:hidden;pointer-events:none}}
.rideau.parti{pointer-events:none}
.rideau .volet{position:absolute;left:0;right:0;height:50.5%;background:var(--encre);transition:transform 1.05s cubic-bezier(.76,0,.24,1) .35s}
.rideau .volet.haut{top:0}
.rideau .volet.bas{bottom:0}
.rideau.parti .volet.haut{transform:translateY(-101%)}
.rideau.parti .volet.bas{transform:translateY(101%)}
.rideau-in{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:22px;transition:opacity .4s var(--t)}
.rideau.parti .rideau-in{opacity:0}
.rideau .fauve-r{
  width:clamp(88px,11vw,132px);aspect-ratio:444/316;
  background:var(--img-panthere) no-repeat center/contain;
  filter:invert(1) hue-rotate(180deg) saturate(1.85) brightness(1.42) contrast(1.08);
  opacity:0;transform:translateX(26px) scale(.94);
  animation:bond 1s var(--t) .1s forwards;
}
@keyframes bond{to{opacity:1;transform:none}}
/* Le nom arrive depuis le fond, lettre par lettre : c'est l'effet n.3
   de demo-titre-3d.html, celui que Nathalie a retenu.
   Chaque lettre part de tres loin (translateZ), floue et de travers,
   puis se pose et respire doucement. */
.rideau .nom3d{
  perspective:1100px;width:100%;max-width:min(92vw,760px);
}
.rideau .s3{
  transform-style:preserve-3d;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(19px,5.2vw,54px);letter-spacing:-.03em;
  text-align:center;white-space:nowrap;line-height:1;color:#fff;
}
.rideau .s3 .lettre{
  display:inline-block;opacity:0;filter:blur(9px);
  transform:translateZ(-900px) translateY(var(--dy,-40px)) rotateX(var(--lrx,0deg)) rotateY(var(--lry,0deg)) rotateZ(var(--lrz,0deg));
  transition:opacity .6s ease calc(var(--i) * .05s),
             filter .6s ease calc(var(--i) * .05s),
             transform .95s var(--t) calc(var(--i) * .05s);
}
.rideau .s3.go .lettre{
  opacity:1;filter:none;transform:none;
  animation:respire 5s ease-in-out infinite alternate calc(var(--i) * .19s + 1.3s);
}
/* AES en blanc, COM en rouge, le reste en blanc : la charte du logo */
.rideau .s3 .lettre.rg{color:var(--rouge-v)}
.rideau .s3 .esp{display:inline-block;width:.34em}
@keyframes respire{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
.rideau .jauge{width:clamp(120px,16vw,210px);height:2px;background:rgba(255,255,255,.16);overflow:hidden}
.rideau .jauge b{display:block;height:100%;width:0;background:var(--rouge-v);animation:charge 2s cubic-bezier(.5,0,.2,1) .2s forwards}
@keyframes charge{to{width:100%}}

/* --- 2. Curseur personnalise --- */
@media (pointer:fine){
  .cur-pt,.cur-cl{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;border-radius:50%;will-change:transform}
  .cur-pt{width:6px;height:6px;background:var(--rouge);margin:-3px 0 0 -3px}
  .cur-cl{
    width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid var(--bord-f);
    transition:width .4s var(--t),height .4s var(--t),margin .4s var(--t),background .4s var(--t),border-color .4s var(--t);
    display:grid;place-items:center;
  }
  .cur-cl span{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .3s var(--t)}
  body.cur-lien .cur-cl{width:62px;height:62px;margin:-31px 0 0 -31px;background:rgba(102,0,51,.10);border-color:var(--rouge)}
  body.cur-voir .cur-cl{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--rouge);border-color:var(--rouge)}
  body.cur-voir .cur-cl span{opacity:1}
  body.cur-voir .cur-pt{opacity:0}
  body.cur-sombre .cur-cl{border-color:rgba(255,255,255,.4)}
}
@media (pointer:coarse){ .cur-pt,.cur-cl{display:none} }

/* --- 3. Titres reveles mot par mot --- */
.mot-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.mot-w i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform .85s var(--t)}
.vu .mot-w i,.mot-w.vu i{transform:none}

/* --- 4. Images qui se devoilent --- */
.devoile{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.76,0,.24,1)}
.devoile.vu,.rev.vu.devoile{clip-path:inset(0 0 0 0)}
/* et si quoi que ce soit echoue, l'image reste visible au bout de 3 s */
.devoile{animation:secoursDevoile .01s linear 3s forwards}
@keyframes secoursDevoile{to{clip-path:none}}

/* --- 5. Parallaxe --- */
.para{will-change:transform}

/* --- 6. Defile geant des metiers --- */
.geant{overflow:hidden;padding:clamp(30px,4vw,56px) 0;background:var(--blanc)}
.geant-piste{display:flex;width:max-content;animation:glisse 38s linear infinite}
.geant b{
  font-family:var(--disp);font-weight:800;letter-spacing:-.04em;white-space:nowrap;
  font-size:clamp(2.2rem,7vw,6rem);line-height:1;color:var(--encre);
  display:inline-flex;align-items:center;gap:clamp(20px,3vw,52px);padding-right:clamp(20px,3vw,52px);
}
.geant b:nth-child(even){-webkit-text-stroke:1px var(--encre);color:transparent}
.geant b::after{content:"";width:clamp(9px,1vw,15px);height:clamp(9px,1vw,15px);border-radius:50%;background:var(--rouge);flex:0 0 auto}

/* --- 7. Boutons magnetiques --- */
.btn{will-change:transform}

/* --- 8. Grain : retire, le mix-blend-mode faisait disparaitre les photos --- */

/* Filet de securite : si le JavaScript ne s'execute pas, rien ne doit rester cache */
html:not(.js) .rev,
html:not(.js) .hero p.ch,
html:not(.js) .hero-act,
html:not(.js) .hero-preuve,
html:not(.js) .tel{opacity:1 !important;transform:none !important}
html:not(.js) .devoile{clip-path:none !important}
html:not(.js) .mot-w i{transform:none !important}
html:not(.js) .rideau{display:none !important}

.rev{opacity:0;transform:translateY(28px);transition:opacity .9s var(--t),transform .9s var(--t)}
.rev.vu{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .rideau{display:none}
  .devoile{clip-path:none}
  .mot-w i{transform:none}
  .geant-piste{animation:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .rev,.tel,.hero p.ch,.hero-act,.hero-preuve{opacity:1;transform:none}
  .hero h1 .l b{transform:none}
}

/* ==========================================================
   9. ASSISTANT CONVERSATIONNEL
   Chatbot scripte : arbre de dialogue ecrit a la main, aucune IA,
   aucun service exterieur. Il qualifie le visiteur puis l'oriente
   vers le telephone, la prise de rendez-vous, ou un envoi Web3Forms.
   ========================================================== */

/* --- le lanceur, en bas a droite --- */
.bot-lanceur{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:1190;
  display:flex;align-items:flex-end;gap:12px;
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--t),transform .7s var(--t);
}
.bot-lanceur.pret{opacity:1;transform:none}
.bot-accroche{
  position:relative;
  background:var(--blanc);border:1px solid var(--bord);border-radius:16px 16px 4px 16px;
  padding:12px 16px;font-size:13.5px;line-height:1.4;color:var(--encre);font-weight:500;
  box-shadow:0 18px 46px rgba(16,18,21,.16);max-width:212px;margin-bottom:5px;
  opacity:0;transform:translateY(10px) scale(.94);transform-origin:100% 100%;pointer-events:none;
  transition:opacity .55s var(--t),transform .55s var(--t);
}
.bot-accroche.on{opacity:1;transform:none;pointer-events:auto}
.bot-accroche b{
  display:block;color:var(--rouge);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px;
}
.bot-accroche i{
  position:absolute;top:-9px;right:-9px;width:23px;height:23px;border-radius:50%;
  background:var(--encre);color:#fff;font-style:normal;font-size:13px;line-height:21px;
  text-align:center;cursor:pointer;border:1px solid var(--blanc);padding:0;
}
.bot-bulle{
  position:relative;width:60px;height:60px;flex:0 0 60px;border-radius:50%;border:0;
  cursor:pointer;background:var(--rouge);color:#fff;display:grid;place-items:center;
  box-shadow:0 16px 40px rgba(102,0,51,.36);
  transition:transform .45s var(--t),background .35s var(--t);
}
.bot-bulle:hover{transform:translateY(-3px) scale(1.06);background:var(--encre)}
.bot-bulle:focus-visible{outline:2px solid var(--encre);outline-offset:4px}
.bot-bulle svg{width:27px;height:27px;grid-area:1/1;transition:opacity .3s var(--t),transform .4s var(--t)}
.bot-bulle .croix{opacity:0;transform:rotate(-90deg) scale(.7)}
.bot-lanceur.ouvert .bot-bulle .parle{opacity:0;transform:rotate(90deg) scale(.7)}
.bot-lanceur.ouvert .bot-bulle .croix{opacity:1;transform:none}
.bot-lanceur.ouvert .bot-bulle{background:var(--encre)}

/* le halo qui pulse tant que personne n'a encore ouvert */
.bot-bulle::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--rouge);
  animation:botOnde 2.6s var(--t) infinite;pointer-events:none;
}
.bot-lanceur.ouvert .bot-bulle::after,
.bot-lanceur.vu .bot-bulle::after{display:none}
@keyframes botOnde{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(1.5);opacity:0}
}

/* --- le panneau --- */
.bot{
  position:fixed;right:clamp(14px,2vw,26px);bottom:calc(clamp(14px,2vw,26px) + 74px);z-index:1200;
  width:min(382px,calc(100vw - 28px));height:min(590px,calc(100vh - 132px));
  background:var(--blanc);border:1px solid var(--bord);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 36px 96px rgba(16,18,21,.26);
  opacity:0;transform:translateY(20px) scale(.96);transform-origin:100% 100%;pointer-events:none;
  transition:opacity .45s var(--t),transform .45s var(--t);
}
.bot.on{opacity:1;transform:none;pointer-events:auto}

.bot-tete{
  flex:0 0 auto;background:var(--encre);color:#fff;
  padding:15px 16px;display:flex;align-items:center;gap:12px;
}
.bot-tete .fauve{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:rgba(255,255,255,.09);
  display:grid;place-items:center;
}
.bot-tete .fauve b{
  display:block;width:22px;height:22px;
  background:var(--img-panthere) no-repeat center/contain;filter:invert(1) hue-rotate(180deg) saturate(1.85) brightness(1.42) contrast(1.08);
}
.bot-tete .qui{flex:1;min-width:0}
.bot-tete .qui b{display:block;font-family:var(--disp);font-size:14.5px;font-weight:600;color:#fff;line-height:1.25}
.bot-tete .qui span{display:block;font-size:11.5px;color:rgba(255,255,255,.56)}
.bot-tete button{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background .3s var(--t),border-color .3s var(--t);
}
.bot-tete button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.bot-tete button svg{width:14px;height:14px}

/* --- le fil de discussion --- */
.bot-fil{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 16px 10px;background:var(--papier);
  display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:var(--bord-f) transparent;
}
.bot-fil::-webkit-scrollbar{width:6px}
.bot-fil::-webkit-scrollbar-thumb{background:var(--bord-f);border-radius:99px}

.bot-msg{
  max-width:84%;font-size:14px;line-height:1.5;padding:11px 14px;
  animation:botEntre .5s var(--t) backwards;
}
@keyframes botEntre{from{opacity:0;transform:translateY(8px)}}
.bot-msg.lui{
  align-self:flex-start;background:var(--blanc);color:var(--gris-f);
  border:1px solid var(--bord);border-radius:16px 16px 16px 5px;
}
.bot-msg.lui b{color:var(--encre);font-weight:600}
.bot-msg.lui a{color:var(--rouge);text-decoration:underline;text-underline-offset:2px}
.bot-msg.moi{
  align-self:flex-end;background:var(--rouge);color:#fff;font-weight:500;
  border-radius:16px 16px 5px 16px;
}
.bot-msg.info{
  align-self:stretch;max-width:none;background:rgba(102,0,51,.05);
  border:1px dashed rgba(102,0,51,.28);border-radius:12px;
  color:var(--gris-f);font-size:13px;
}
.bot-msg.info b{color:var(--rouge)}

/* les trois points d'attente */
.bot-tape{
  align-self:flex-start;background:var(--blanc);border:1px solid var(--bord);
  border-radius:16px 16px 16px 5px;padding:13px 15px;display:flex;gap:5px;
}
.bot-tape i{width:6px;height:6px;border-radius:50%;background:var(--bord-f);animation:botPoint 1.3s infinite}
.bot-tape i:nth-child(2){animation-delay:.18s}
.bot-tape i:nth-child(3){animation-delay:.36s}
@keyframes botPoint{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* --- les boutons de reponse --- */
.bot-choix{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:2px 0 6px}
.bot-choix button{
  font-family:var(--txt);font-size:13.5px;font-weight:500;color:var(--encre);
  background:var(--blanc);border:1px solid var(--bord-f);border-radius:99px;
  padding:9px 15px;cursor:pointer;text-align:left;
  transition:background .3s var(--t),color .3s var(--t),border-color .3s var(--t),transform .3s var(--t);
  animation:botEntre .45s var(--t) backwards;
}
.bot-choix button:hover{background:var(--rouge);border-color:var(--rouge);color:#fff;transform:translateY(-2px)}
.bot-choix button:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}
.bot-choix button.doux{border-style:dashed;color:var(--gris)}

/* --- le pied : saisie libre, consentement ou raccourcis --- */
.bot-pied{flex:0 0 auto;border-top:1px solid var(--bord);background:var(--blanc);padding:12px 14px}
.bot-saisie{display:flex;gap:8px}
.bot-saisie input{
  flex:1;min-width:0;font-family:var(--txt);font-size:14px;color:var(--encre);
  background:var(--papier);border:1px solid var(--bord);border-radius:99px;padding:11px 15px;
  transition:border-color .3s var(--t),background .3s var(--t);
}
.bot-saisie input:focus{outline:0;border-color:var(--bord-f);background:var(--blanc)}
.bot-saisie button{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;border:0;background:var(--rouge);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .3s var(--t);
}
.bot-saisie button:hover{background:var(--encre)}
.bot-saisie button svg{width:17px;height:17px}
.bot-pied .rappel{font-size:11.5px;color:var(--gris);text-align:center;line-height:1.4}
.bot-pied .rappel a{color:var(--encre);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.bot-rgpd{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--gris);line-height:1.45;margin-bottom:10px}
.bot-rgpd input{width:16px;height:16px;flex:0 0 16px;margin-top:1px;accent-color:var(--rouge)}
.bot-rgpd a{color:var(--encre);text-decoration:underline}
.bot-envoyer{
  width:100%;font-family:var(--disp);font-size:14px;font-weight:600;color:#fff;
  background:var(--rouge);border:0;border-radius:99px;padding:13px;cursor:pointer;
  transition:background .3s var(--t);
}
.bot-envoyer:hover{background:var(--encre)}
.bot-envoyer:disabled{background:var(--bord-f);cursor:default}

.bot-num{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--encre);color:#fff;border-radius:99px;padding:13px;
  font-family:var(--disp);font-size:15.5px;font-weight:600;letter-spacing:.02em;
  transition:background .3s var(--t);
}
.bot-num:hover{background:var(--rouge)}
.bot-num svg{width:17px;height:17px}

/* --- plein ecran sur petit ecran --- */
@media(max-width:560px){
  .bot{right:0;bottom:0;width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .bot-lanceur.ouvert{opacity:0;pointer-events:none}
  .bot-accroche{max-width:172px}
}
/* si le visiteur a demande moins d'animations, on les coupe */
@media (prefers-reduced-motion: reduce){
  .bot,.bot-msg,.bot-choix button,.bot-lanceur{animation:none !important}
  .bot-bulle::after,.bot-tape i{animation:none}
}
/* et si le JavaScript ne part pas, le lanceur ne doit pas rester en fantome */
html:not(.js) .bot-lanceur,html:not(.js) .bot{display:none}

/* ---------- Retours de Nathalie, 11/09/2026 ---------- */
/* Plus de trait au-dessus des coordonnees du bloc "Parlons de votre projet" */
.cta-i{border-top:none}
/* Les intitules Accueil clients / Siege social / Ecrire passent en bordeaux */
.cta-i b{color:var(--bordeaux)}
/* Bandeau des zones : l'intitule en bordeaux, les villes en blanc, et le tout defile */
.pied-zones{display:flex;align-items:center;gap:14px;white-space:nowrap}
.pied-zones b{color:var(--bordeaux);margin:0;flex:none}
.zones-defile{overflow:hidden;flex:1 1 auto;min-width:0}
.zones-piste{display:flex;width:max-content;animation:glisse 48s linear infinite}
.zones-piste span{color:#fff;padding-right:34px}
.pied-zones:hover .zones-piste{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .zones-piste{animation:none;width:auto}
  .zones-piste span[aria-hidden]{display:none}
}
@media(max-width:760px){
  .pied-zones{flex-direction:column;align-items:flex-start;gap:8px}
  .zones-defile{width:100%}
}