/* ============================================================
   ADMINISY, feuille de style commune
   Chargee par toutes les pages. Les styles propres a une page
   restent dans un bloc <style> en tete de cette page.
   ============================================================ */

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

:root{
  /* Base bleue, calee sur la norme du secteur (bleu nuit, bleu vif, panneaux clairs).
     L'orange reste la couleur d'action : c'est celle du logo, et c'est le schema
     qu'utilisent les references du marche, bouton chaud sur base froide. */
  --cream:#F1F5FD;        /* panneau bleu tres clair, ancien fond creme */
  --cream-2:#F8FAFE;      /* panneau plus clair encore */
  --sand:#E4ECFB;         /* bleu clair soutenu */
  --white:#FFFFFF;
  --ink:#0B1547;          /* bleu nuit, texte et titres */
  --ink-deep:#070E33;     /* fond des sections sombres */
  --soft:#525882;         /* texte courant */
  --dim:#9093AC;          /* texte secondaire */
  --blue:#003FDA;         /* bleu vif, liens et accents froids */
  --blue-deep:#0033B0;
  --blue-soft:#E4ECFB;
  --orange:#EE6C26;       /* action : boutons, puces, surlignage */
  --orange-deep:#D95A17;
  --orange-soft:#FDEFE3;
  --line:rgba(11,21,71,.11);
  --line-2:rgba(11,21,71,.065);
  --sh-sm:0 1px 2px rgba(11,21,71,.05), 0 6px 18px -12px rgba(11,21,71,.20);
  --sh:0 1px 3px rgba(11,21,71,.05), 0 14px 40px -18px rgba(11,21,71,.22);
  --sh-lg:0 2px 6px rgba(11,21,71,.07), 0 30px 70px -28px rgba(11,21,71,.30);
  --sh-doc:0 2px 5px rgba(11,21,71,.06), 0 22px 48px -20px rgba(11,21,71,.34);
  --sh-xl:0 4px 10px rgba(11,21,71,.08), 0 44px 100px -34px rgba(11,21,71,.40);
  --r:16px;
  --curve:52px;
  --w:1140px;
}

html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}

body{
  background:var(--cream);color:var(--ink);
  font-family:'Albert Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;font-size:16px;line-height:1.6;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;position:relative;
}
/* le voile de grain a ete retire avec le passage au bleu : la norme du secteur
   est une surface nette, sans texture */

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

.wrap{width:100%;max-width:var(--w);margin:0 auto;position:relative;z-index:3;
      padding-left:clamp(1.25rem,4vw,2rem);padding-right:clamp(1.25rem,4vw,2rem)}

/* ---------- sections arrondies empilées ---------- */
.sec{position:relative;
  padding-top:clamp(3rem,6.5vh,5rem);
  /* on ajoute la hauteur de la courbe au bas, sinon la section suivante
     remonte dessus et vient coller au contenu */
  padding-bottom:calc(clamp(3rem,6.5vh,5rem) + var(--curve))}
.rnd{border-radius:var(--curve) var(--curve) 0 0;margin-top:calc(var(--curve) * -1);
  padding-top:calc(clamp(3.5rem,7vh,5.5rem) + var(--curve));
  box-shadow:0 -18px 40px -30px rgba(11,21,71,.35)}
.sec-white{background:var(--white)}
.sec-cream{background:var(--cream)}
.sec-sand{background:var(--sand)}
.sec-ink{background:var(--ink-deep);color:#fff;overflow:hidden}
.z1{z-index:11}.z2{z-index:12}.z3{z-index:13}.z4{z-index:14}.z5{z-index:15}
.z6{z-index:16}.z7{z-index:17}.z8{z-index:18}.z9{z-index:19}.z10{z-index:20}

/* ---------- barre de progression ---------- */
.prog{position:fixed;top:0;left:0;height:3px;z-index:110;width:0;
  background:linear-gradient(90deg,var(--blue),var(--orange));
  box-shadow:0 0 12px rgba(238,108,38,.6);transition:width .1s linear}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:15px 26px;border-radius:9px;font-size:15.5px;font-weight:600;
  letter-spacing:-.01em;white-space:nowrap;position:relative;overflow:hidden;
  transition:background .18s ease,box-shadow .22s ease,transform .22s cubic-bezier(.22,.61,.36,1),
             color .18s ease,border-color .18s ease}
.btn-p{background:var(--orange);color:#fff;
  box-shadow:0 1px 2px rgba(217,90,23,.25), 0 6px 16px -10px rgba(217,90,23,.55)}
.btn-p:hover{background:var(--orange-deep);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(217,90,23,.3), 0 14px 28px -10px rgba(217,90,23,.75)}
.btn-p::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transition:left .6s ease}
.btn-p:hover::after{left:140%}
.btn-s{background:transparent;color:var(--ink);border:1.5px solid rgba(11,21,71,.22)}
.btn-s:hover{border-color:var(--ink);background:rgba(11,21,71,.04);transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:13.5px;border-radius:8px}
.btn-w{background:#fff;color:var(--ink)}
.btn-w:hover{background:var(--cream);transform:translateY(-2px)}

/* ---------- barre ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(232,238,251,.82);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease}
.nav.on{border-bottom-color:var(--line);background:rgba(232,238,251,.96)}
.nav-in{display:flex;align-items:center;gap:1.5rem;height:74px}
.nav-in>a:first-child{flex:0 0 auto}
.nav-in>a:first-child img{height:27px;width:auto;transition:transform .3s ease}
.nav-in>a:first-child:hover img{transform:scale(1.04)}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;font-size:14.5px;font-weight:500;
  color:var(--soft)}
.nav-links a{position:relative;transition:color .2s ease}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--orange);border-radius:2px;transition:right .28s cubic-bezier(.22,.61,.36,1)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.nav-cta{margin-left:auto}
@media(min-width:901px){.nav-cta{margin-left:0}}
@media(max-width:900px){.nav-links{display:none}}

/* ---------- typo ---------- */
.eyebrow{display:block;font-size:11.5px;font-weight:700;color:var(--orange);
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:1.2rem}
.sec-ink .eyebrow{color:#A9C2F7}
h1{font-size:clamp(2.05rem,4vw,3.15rem);font-weight:800;line-height:1.1;letter-spacing:-.032em;
  position:relative}

/* texture : un grain fin decoupe dans les lettres, pas un degrade.
   Le repli garde l'encre pleine si background-clip:text n'est pas supporte. */
.grainy{color:var(--ink)}

h1 .ln{display:block;opacity:0;transform:translateY(16px);
  animation:monte .85s cubic-bezier(.22,.61,.36,1) forwards}
h1 .ln:nth-child(1){animation-delay:.05s}
h1 .ln:nth-child(2){animation-delay:.16s}
h1 .ln:nth-child(3){animation-delay:.27s}
@keyframes monte{to{opacity:1;transform:none}}

/* soulignement trace a la main sous le dernier segment */
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark svg{position:absolute;left:-2%;bottom:-.22em;width:104%;height:.34em;overflow:visible}
.mark path{fill:none;stroke:var(--orange);-webkit-text-fill-color:initial;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:trace 1s cubic-bezier(.22,.61,.36,1) .85s forwards}
@keyframes trace{to{stroke-dashoffset:0}}
h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;line-height:1.12;letter-spacing:-.026em}
h3{font-size:17px;font-weight:700;letter-spacing:-.012em}
.lead{font-size:clamp(16px,1.25vw,17.5px);color:var(--soft);line-height:1.68;
  margin-top:1.5rem;max-width:34rem}
.lead b{color:var(--ink);font-weight:600}
.sec-head{max-width:38rem}
.sec-head.mid{margin:0 auto;text-align:center}
.sec-head p{font-size:15.5px;color:var(--soft);margin-top:.8rem;line-height:1.65}
.sec-ink .sec-head p,.sec-ink .lead{color:rgba(232,238,251,.72)}
.sec-ink h2{color:#fff}

/* ---------- héros ---------- */
.hero{position:relative;overflow:hidden;background:var(--cream);
  padding:clamp(3.5rem,9vh,6.5rem) 0 calc(clamp(4rem,9vh,6.5rem) + var(--curve));
  min-height:min(92vh,860px);display:flex;align-items:center}
.hero-bg{position:absolute;inset:-14% -14% -6% -14%;z-index:0;pointer-events:none;
  will-change:transform;
  background:
    radial-gradient(52% 48% at 84% 4%, rgba(0,63,218,.16) 0%, rgba(0,63,218,.05) 44%, transparent 72%),
    radial-gradient(44% 42% at 6% 88%, rgba(0,63,218,.10) 0%, transparent 66%)}

/* deux halos qui derivent lentement, pour que le fond ne soit jamais fige */
.orb{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(46px)}
.orb-a{width:34rem;height:34rem;top:-12rem;right:-10rem;
  background:radial-gradient(circle,rgba(0,63,218,.20) 0%,rgba(0,63,218,.05) 45%,transparent 70%);
  animation:derive-a 22s ease-in-out infinite}
.orb-b{width:27rem;height:27rem;bottom:-11rem;left:-8rem;
  background:radial-gradient(circle,rgba(0,63,218,.16) 0%,transparent 62%);
  animation:derive-b 28s ease-in-out infinite}
.orb-c{width:19rem;height:19rem;top:38%;left:44%;
  background:radial-gradient(circle,rgba(0,63,218,.11) 0%,transparent 66%);
  animation:derive-c 34s ease-in-out infinite}
@keyframes derive-a{0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-3.5rem,2.5rem) scale(1.09)}}
@keyframes derive-b{0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3rem,-2rem) scale(1.12)}}
@keyframes derive-c{0%,100%{transform:translate(0,0)}
  50%{transform:translate(-2.5rem,-3rem)}}

/* halo doux qui suit le curseur */
.spot{position:absolute;z-index:0;pointer-events:none;width:30rem;height:30rem;
  border-radius:50%;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(255,255,255,.55) 0%,transparent 62%);
  transform:translate(-50%,-50%);will-change:transform}
.hero:hover .spot{opacity:1}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2.5rem,5.5vw,4.5rem);
  align-items:center;width:100%}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:3rem}}

/* les quatre services, en pastilles dans le héros */
.svc-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.1rem}
.svc-pill{display:inline-flex;align-items:center;gap:.55rem;background:var(--white);
  border:1px solid var(--line);border-radius:11px;padding:.7rem 1.1rem;
  font-size:14.5px;font-weight:600;box-shadow:var(--sh-sm);
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease}
.svc-pill:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.svc-pill svg{width:15px;height:15px;stroke:var(--orange);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:2.4rem}
.cta-note{font-size:13.5px;color:var(--dim);line-height:1.45}

/* presse dans le héros */
.hero-press{margin-top:2.8rem;padding-top:2rem;border-top:1px solid var(--line)}
.hp-lbl{font-size:11px;font-weight:700;color:var(--dim);text-transform:uppercase;
  letter-spacing:.13em;margin-bottom:.9rem}
.hp-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:1.1rem}
/* quatre logos par ligne : la deuxieme ligne (DH, Classic 21) se centre sous les quatre */
.hp-logos>span{flex:0 0 25%;justify-content:center}
.hp-logos a,.hp-logos span{display:inline-flex;align-items:center;
  transition:transform .22s cubic-bezier(.22,.61,.36,1),filter .22s ease,opacity .22s ease}
.hp-logos img{height:21px;width:auto;opacity:.82;filter:saturate(.85)}
.hp-logos a:hover img{opacity:1;filter:saturate(1)}
.hp-logos a:hover{transform:translateY(-2px)}
@media(max-width:520px){.hp-logos img{height:17px}.hp-logos{row-gap:.9rem}}

/* ---------- visuel 3D du héros ---------- */
.stage3d{position:relative;perspective:1500px;perspective-origin:55% 45%;
  min-height:490px;display:grid;place-items:center}
@media(max-width:960px){.stage3d{min-height:380px;margin-top:1rem}}
.deck{position:relative;width:min(100%,420px);height:440px;
  transform-style:preserve-3d;transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform}
.doc{position:absolute;left:50%;top:50%;width:238px;border-radius:15px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--sh-doc);padding:1.1rem 1.2rem;
  transform-style:preserve-3d;will-change:transform;
  animation:float 7s ease-in-out infinite}
.doc:nth-child(1){transform:translate(-50%,-50%) translate3d(-84px,-132px,10px) rotate(-6deg);
  animation-delay:0s}
.doc:nth-child(2){transform:translate(-50%,-50%) translate3d(62px,-46px,70px) rotate(3.5deg);
  animation-delay:.9s}
.doc:nth-child(3){transform:translate(-50%,-50%) translate3d(-78px,52px,40px) rotate(-2.5deg);
  animation-delay:1.8s}
.doc:nth-child(4){transform:translate(-50%,-50%) translate3d(70px,142px,100px) rotate(5deg);
  animation-delay:2.7s}
@keyframes float{0%,100%{margin-top:0}50%{margin-top:-9px}}
.doc-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.doc-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(160deg,#EDF2FD,#D8E4FA);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset}
.doc-ic svg{width:14px;height:14px;stroke:var(--orange-deep);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.doc-t{display:block;font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.doc-s{display:block;font-size:11px;color:var(--dim);margin-top:.15rem;line-height:1.3}
.bar{height:7px;border-radius:99px;background:var(--cream);margin-bottom:.4rem}
.bar.w80{width:80%}.bar.w60{width:60%}.bar.w45{width:45%}
.doc-tagOk{display:inline-flex;align-items:center;gap:.35rem;margin-top:.55rem;font-size:10.5px;
  font-weight:700;color:#1E8E5A;background:#E6F6EE;border-radius:20px;padding:3px 9px}
.doc-tagWarn{display:inline-flex;align-items:center;gap:.35rem;margin-top:.55rem;font-size:10.5px;
  font-weight:700;color:var(--orange-deep);background:var(--orange-soft);border-radius:20px;
  padding:3px 9px}
@media(prefers-reduced-motion:reduce){.doc{animation:none}}

/* ---------- mur médias ---------- */
.ms-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:.85rem;margin-top:2rem}
@media(max-width:980px){.ms-logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.ms-logos{grid-template-columns:repeat(2,1fr)}}
.mlogo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  background:var(--cream-2);border:1px solid var(--line);border-radius:12px;
  padding:1.3rem .9rem;min-height:112px;text-align:center;position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease,border-color .25s ease}
.mlogo::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .25s ease;
  background:linear-gradient(160deg,rgba(0,63,218,.06),transparent 60%)}
.mlogo{cursor:default}

.mlogo img{height:30px;width:auto;max-width:100%;object-fit:contain;position:relative}
.mlogo .dt{font-size:11px;color:var(--dim);position:relative}

/* ---------- services ---------- */
.poles{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.2rem}
@media(max-width:980px){.poles{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.poles{grid-template-columns:1fr}}
.pole{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem;position:relative;overflow:hidden;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease}
.pole::after{content:'';position:absolute;inset:auto -30% -60% auto;width:170px;height:170px;
  border-radius:50%;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(circle,rgba(238,108,38,.16),transparent 70%)}
.pole:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.pole:hover::after{opacity:1}
.pole .num{position:absolute;top:1.1rem;right:1.2rem;font-size:2.4rem;font-weight:800;
  color:rgba(238,108,38,.11);letter-spacing:-.04em;line-height:1}
.pole .ic{width:42px;height:42px;border-radius:12px;position:relative;
  background:linear-gradient(160deg,#EDF2FD,#D8E4FA);display:grid;place-items:center;
  margin-bottom:1rem;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 14px -8px rgba(217,90,23,.5)}
.pole .ic svg{width:19px;height:19px;stroke:var(--orange-deep);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pole p{font-size:13.8px;color:var(--soft);margin-top:.4rem;line-height:1.55;position:relative}
.pole ul{margin-top:.9rem;display:flex;flex-direction:column;gap:.4rem;position:relative}
.pole ul li{font-size:12.5px;color:var(--dim);padding-left:.95rem;position:relative}
.pole ul li::before{content:'';position:absolute;left:0;top:.55em;width:4px;height:4px;
  border-radius:50%;background:var(--orange);opacity:.6}

/* ---------- rdv ---------- */
.rdv-sec{position:relative;overflow:hidden}
.rdv-bg{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform;
  background:radial-gradient(44% 48% at 97% 20%, rgba(0,63,218,.14) 0%, transparent 66%)}
.rdv-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(1.75rem,3.5vw,3.25rem);
  align-items:start}
@media(max-width:940px){.rdv-grid{grid-template-columns:1fr}}
.tick{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--orange-soft);
  display:grid;place-items:center;margin-top:.12rem;border:1px solid rgba(238,108,38,.18)}
.tick svg{width:11px;height:11px;stroke:var(--orange);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.assure{display:flex;flex-direction:column;gap:.8rem;margin-top:1.6rem}
.assure li{display:flex;align-items:flex-start;gap:.7rem;font-size:14.5px;color:var(--ink)}
.assure i{font-style:normal;color:var(--soft)}

/* carte fondateur, désormais ici et plus dans le héros */
.founder{margin-top:1.9rem;background:var(--white);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--sh);
  display:grid;grid-template-columns:118px 1fr}
@media(max-width:400px){.founder{grid-template-columns:1fr}}
.founder-img{position:relative;background:var(--orange-soft);min-height:150px}
.founder-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 18%}
.founder-tx{padding:1.15rem 1.25rem}
.founder-tx .n{font-size:14.5px;font-weight:700}
.founder-tx .r{font-size:12.5px;color:var(--orange);font-weight:600;margin-top:.1rem}
.founder-tx p{font-size:13px;color:var(--soft);line-height:1.55;margin-top:.6rem}

.cal-card{background:var(--white);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh-xl);overflow:hidden}
.cal-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1.25rem 1.5rem;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#F7FAFE,var(--white))}
.cal-head h3{font-size:16.5px}
.cal-head p{font-size:13px;color:var(--soft);margin-top:.15rem}
.cal-head .free{font-size:13px;color:var(--soft);white-space:nowrap}
.cal-head .free b{color:var(--orange);font-weight:700}
.cal-body{height:min(66vh,620px);min-height:480px;position:relative}
#cal-inline{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch}
#cal-inline iframe{width:100%!important;min-height:100%!important;border:0}
@media(max-width:940px){.cal-body{height:560px}}

/* ---------- étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem;position:relative;transition:transform .25s cubic-bezier(.22,.61,.36,1),
  box-shadow .25s ease}
.step:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.step .k{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:9px;background:var(--orange);color:#fff;font-size:13px;font-weight:800;
  margin-bottom:.9rem;box-shadow:0 6px 14px -8px rgba(217,90,23,.7)}
.step p{font-size:13.8px;color:var(--soft);margin-top:.4rem;line-height:1.55}

/* ---------- bandeau WhatsApp dans les services ---------- */
.wa-strip{margin-top:1.7rem;background:var(--cream-2);border:1px solid var(--line);
  border-radius:var(--r);padding:1.4rem 1.5rem;display:flex;align-items:center;gap:1.2rem}
.wa-ic{width:38px;height:38px;border-radius:10px;background:var(--ink);display:grid;
  place-items:center;flex:0 0 auto}
.wa-ic svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.wa-tx b{display:block;font-size:15px;font-weight:700;letter-spacing:-.014em}
.wa-tx span{display:block;font-size:13.8px;color:var(--soft);line-height:1.55;margin-top:.25rem}
.wa-link{margin-left:auto;flex:0 0 auto;font-size:14px;font-weight:600;color:var(--orange);
  white-space:nowrap;position:relative}
.wa-link::after{content:'';position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;
  background:var(--orange);transition:right .28s cubic-bezier(.22,.61,.36,1)}
.wa-link:hover::after{right:0}
@media(max-width:780px){.wa-strip{flex-direction:column;align-items:flex-start;gap:1rem}
  .wa-link{margin-left:0}}

/* ---------- methode : la conversation et la mise en route ---------- */
.flow{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:start;margin-top:2.2rem}
@media(max-width:920px){.flow{grid-template-columns:1fr;gap:2.6rem}}

.flow-pts{display:flex;flex-direction:column;gap:1.2rem}
.flow-pt{display:flex;gap:.85rem;align-items:flex-start}
.flow-pt>.tick{margin-top:.2rem}
.flow-pt b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.014em}
.flow-pt i{display:block;font-style:normal;font-size:14px;color:var(--soft);
  line-height:1.58;margin-top:.2rem}

/* le telephone */
.phone-w{display:flex;flex-direction:column;align-items:center;gap:.95rem}
.phone{width:min(325px,100%);background:var(--white);border:1px solid var(--line);
  border-radius:28px;box-shadow:var(--sh-lg);overflow:hidden;
  transform:rotate(-1.1deg);transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.phone:hover{transform:rotate(0deg) translateY(-5px)}
.ph-top{display:flex;align-items:center;gap:.65rem;padding:1rem 1.05rem;
  border-bottom:1px solid var(--line-2);background:var(--cream-2)}
.ph-av{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:0 0 auto}
.ph-n{font-size:13.5px;font-weight:700;line-height:1.25}
.ph-s{font-size:11.5px;color:var(--orange);font-weight:600;margin-top:.04rem}
.ph-wa{margin-left:auto;width:17px;height:17px;flex:0 0 auto;opacity:.5}
.ph-body{padding:1.05rem .95rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;
  background:var(--white)}
.day{align-self:center;font-size:10.5px;font-weight:600;color:var(--dim);
  background:var(--cream);border-radius:20px;padding:.22rem .75rem;margin:.35rem 0 .15rem}
.msg{max-width:84%;font-size:12.8px;line-height:1.52;padding:.6rem .72rem;border-radius:13px}
.msg .t{display:block;font-size:9.8px;color:var(--dim);margin-top:.28rem;text-align:right;
  font-variant-numeric:tabular-nums}
.msg.anc{align-self:flex-start;background:var(--cream-2);border:1px solid var(--line-2);
  border-bottom-left-radius:4px}
.msg.cli{align-self:flex-end;background:var(--orange-soft);
  border:1px solid rgba(238,108,38,.15);border-bottom-right-radius:4px}

/* le vocal */
.vo{display:flex;align-items:center;gap:.55rem;min-width:168px}
.vo-play{width:23px;height:23px;border-radius:50%;background:var(--orange);flex:0 0 auto;
  display:grid;place-items:center}
.vo-play svg{width:8px;height:8px;fill:#fff;margin-left:1px}
.wave{display:flex;align-items:center;gap:2px;height:18px;flex:1 1 auto}
.wave i{display:block;width:2px;border-radius:2px;background:rgba(11,21,71,.26);height:8px}
.wave i:nth-child(3n+2){height:13px}
.wave i:nth-child(4n){height:5px}
.wave i:nth-child(5n+1){height:17px}
.vo-d{font-size:10.5px;color:var(--dim);flex:0 0 auto;font-variant-numeric:tabular-nums}

/* la photo envoyee */
.ph-img{display:flex;flex-direction:column;gap:.34rem;background:var(--sand);
  border:1px solid rgba(11,21,71,.07);border-radius:9px;padding:.75rem .8rem}
.ph-img i{display:block;height:4px;border-radius:3px;background:rgba(11,21,71,.13);width:100%}
.ph-img i:nth-child(1){width:54%;height:6px;background:rgba(11,21,71,.22)}
.ph-img i:nth-child(4){width:72%}
.ph-img i:nth-child(5){width:44%}
.ph-cap{display:block;font-size:11.4px;color:var(--soft);margin-top:.42rem}
.phone-cap{font-size:12px;color:var(--dim);text-align:center;max-width:20rem;line-height:1.5}

/* la mise en route */
.flow-note{margin-top:1.9rem;background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--orange);border-radius:12px;padding:1.15rem 1.3rem}
.flow-note b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.012em}
.flow-note span{display:block;font-size:13.8px;color:var(--soft);line-height:1.58;
  margin-top:.3rem}

.mise{margin-top:clamp(2.6rem,5vh,3.6rem);padding-top:clamp(2rem,4vh,2.8rem);
  border-top:1px solid var(--line)}
.mise-h{font-size:clamp(1.15rem,2.1vw,1.42rem);font-weight:800;letter-spacing:-.021em;
  line-height:1.2}
.mise-p{font-size:14.5px;color:var(--soft);margin-top:.6rem;line-height:1.6;max-width:40rem}
.mise .steps{margin-top:1.6rem}

/* ---------- chiffres ---------- */
.sec-ink .ink-bg{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform;
  background:radial-gradient(52% 62% at 84% 100%, rgba(0,63,218,.45) 0%, transparent 68%)}
.sec-ink .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E")}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
@media(max-width:900px){.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.kpis{grid-template-columns:1fr}}
.kpi{background:rgba(255,255,255,.055);border:1px solid rgba(232,238,251,.14);
  border-radius:14px;padding:1.5rem;position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),background .25s ease}
.kpi::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,238,251,.32),transparent)}
.kpi:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
.kpi .v{font-size:clamp(1.8rem,3.3vw,2.3rem);font-weight:800;color:#fff;letter-spacing:-.035em;
  line-height:1;font-variant-numeric:tabular-nums}
.kpi .v em{font-style:normal;color:var(--orange);font-size:.58em;margin-left:.15rem}
.kpi .l{font-size:12.5px;color:rgba(232,238,251,.62);margin-top:.6rem;line-height:1.45}

/* ---------- métiers ---------- */
.tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.tag{font-size:13.5px;font-weight:500;color:var(--ink);background:var(--cream-2);
  border:1px solid var(--line);border-radius:9px;padding:.6rem 1rem;
  transition:transform .2s ease,border-color .2s ease,background .2s ease}
.tag:hover{transform:translateY(-2px);border-color:rgba(238,108,38,.35);background:var(--white)}
.zones{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.75rem,3.5vw,3rem);
  align-items:center;margin-top:.5rem}
@media(max-width:880px){.zones{grid-template-columns:1fr}}
.zone-list{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.2rem;margin-top:1.5rem}
.zone-list li{display:flex;align-items:center;gap:.55rem;font-size:14.5px;color:var(--ink)}
.zone-list svg{width:13px;height:13px;stroke:var(--orange);fill:none;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.zone-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem;box-shadow:var(--sh)}
.zone-card h3{margin-bottom:.6rem}
.zone-card p{font-size:14px;color:var(--soft);line-height:1.6}

/* ---------- avis ---------- */
.avi{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);padding:1.6rem;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:.9rem;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease}

.stars{display:flex;gap:2px}
.stars svg{width:12px;height:12px;fill:#F5A623}
.avi .stars svg{width:13px;height:13px}
.avi p{font-size:14px;color:var(--ink);line-height:1.6;flex:1}
.avi .who-l{display:flex;flex-direction:column;padding-top:.85rem;border-top:1px solid var(--line-2)}
.avi .who-l b{font-size:13.5px;font-weight:700}
.avi .who-l span{font-size:12.5px;color:var(--soft);margin-top:.1rem}

/* ---------- réseaux ---------- */
.social-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.75rem,3.5vw,3rem);
  align-items:center;margin-top:2rem}
@media(max-width:900px){.social-grid{grid-template-columns:1fr}}
.gcard{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;
  box-shadow:var(--sh-sm)}
.gcard-top{display:flex;align-items:center;gap:.8rem}
.gcard-g{width:34px;height:34px;flex:0 0 auto}
.gcard-score{font-size:2.1rem;font-weight:800;letter-spacing:-.035em;line-height:1}
.gcard-sub{font-size:12.5px;color:var(--soft);margin-top:.2rem}
.gcard .stars{margin-top:.9rem}
.gcard .stars svg{width:16px;height:16px}
.gcard p{font-size:13.5px;color:var(--soft);line-height:1.55;margin-top:.9rem}
.gcard a.gl{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:13px;
  font-weight:600;color:var(--orange)}
/* ---------- engagements ---------- */
.eng{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
@media(max-width:880px){.eng{grid-template-columns:1fr}}
.en{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease}
.en:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.en .ic{width:40px;height:40px;border-radius:11px;background:var(--orange-soft);display:grid;
  place-items:center;margin-bottom:.9rem}
.en .ic svg{width:18px;height:18px;stroke:var(--orange-deep);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.en p{font-size:13.8px;color:var(--soft);margin-top:.4rem;line-height:1.55}

/* ---------- faq ---------- */
.faq{max-width:46rem;margin-top:1.8rem}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.15rem 0;font-size:15.5px;font-weight:600;letter-spacing:-.012em;
  transition:color .2s ease}
summary:hover{color:var(--orange-deep)}
summary::-webkit-details-marker{display:none}
summary .pl{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--orange-soft);
  color:var(--orange);display:grid;place-items:center;font-size:15px;font-weight:600;line-height:1;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);border:1px solid rgba(238,108,38,.16)}
details[open] summary .pl{transform:rotate(135deg)}
details p{font-size:14.5px;color:var(--soft);line-height:1.65;padding:0 2.5rem 1.2rem 0}

/* ---------- final ---------- */
.final{background:var(--ink-deep);border-radius:22px;padding:clamp(2.25rem,5vw,3.5rem);
  display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center;overflow:hidden;
  position:relative;box-shadow:var(--sh-xl)}
@media(max-width:820px){.final{grid-template-columns:1fr}}
.final::before{content:'';position:absolute;right:-14%;bottom:-60%;width:36rem;height:24rem;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,63,218,.42) 0%,transparent 66%)}
.final h2{color:#fff;position:relative;z-index:2}
.final p{font-size:15px;color:rgba(232,238,251,.75);margin-top:.8rem;line-height:1.6;
  max-width:30rem;position:relative;z-index:2}
.final-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;position:relative;
  z-index:2}
@media(min-width:821px){.final-cta{align-items:flex-end}}
.final-cta a.mail{font-size:13.5px;color:rgba(232,238,251,.65)}
.final-cta a.mail:hover{color:#fff}

/* ---------- pied ---------- */
footer{background:var(--ink-deep);color:rgba(232,238,251,.6);padding:4rem 0 2.25rem;
  position:relative;z-index:20}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
@media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.f-grid{grid-template-columns:1fr}}
.f-about img{height:26px;opacity:.9;filter:brightness(0) invert(1);margin-bottom:1.15rem}
.f-about p{font-size:13.5px;line-height:1.6;max-width:22rem}
.f-h{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:1rem}
.f-col a,.f-col span{display:block;font-size:13.5px;color:rgba(232,238,251,.6);
  padding:.28rem 0;transition:color .2s ease,padding-left .2s ease}
.f-col a:hover{color:#fff;padding-left:.2rem}
.f-legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(232,238,251,.14);
  display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:12.5px;color:rgba(232,238,251,.45)}
.f-legal a{color:rgba(232,238,251,.6)}
.f-legal a:hover{color:#fff}

/* ---------- cookies ---------- */
.ck{position:fixed;left:1rem;bottom:1rem;z-index:200;width:min(560px,calc(100% - 2rem));
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px -20px rgba(20,26,33,.5);padding:1.3rem 1.45rem;
  transform:translateY(180%);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.ck.show{transform:translateY(0)}
.ck h4{font-size:14.5px;font-weight:700;margin-bottom:.4rem}
.ck p{font-size:13px;color:var(--soft);line-height:1.55}
.ck p a{color:var(--orange);font-weight:600}
.ck-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.ck-btns button{font:inherit;font-size:13.5px;font-weight:600;padding:10px 17px;border-radius:9px;
  cursor:pointer;border:1.5px solid transparent;transition:background .18s ease,border-color .18s ease}
.ck-acc{background:var(--orange);color:#fff}
.ck-acc:hover{background:var(--orange-deep)}
.ck-ref{background:transparent;color:var(--ink);border-color:rgba(11,21,71,.22)}
.ck-ref:hover{border-color:var(--ink)}
/* sur mobile la banniere doit rester discrete : elle masquait le bouton principal */
@media(max-width:640px){
  .ck{left:.6rem;bottom:.6rem;width:calc(100% - 1.2rem);padding:.95rem 1.05rem;border-radius:13px}
  .ck h4{font-size:13.5px;margin-bottom:.25rem}
  .ck p{font-size:12px;line-height:1.45}
  .ck-btns{margin-top:.75rem;gap:.45rem;flex-wrap:nowrap}
  .ck-btns button{flex:1;padding:9px 10px;font-size:12.5px;white-space:nowrap}
}

/* ---------- apparition ---------- */
.fx{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.fx.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .fx{opacity:1;transform:none;transition:none}
  .pole:hover,.mlogo:hover,.reel:hover,.step:hover,.kpi:hover,.avi:hover,.en:hover,
  .btn:hover,.tag:hover{transform:none}
  .deck{transform:none!important}
  .orb{animation:none}
  h1 .ln{opacity:1;transform:none;animation:none}
  .mark path{stroke-dashoffset:0;animation:none}
  .spot{display:none}
}

/* ============================================================
   PAGES INTERIEURES
   Tout ce qui suit ne sert pas a la page d'accueil.
   ============================================================ */

/* ---------- menu mobile ---------- */
.burger{display:none;margin-left:auto;width:40px;height:40px;border:0;background:transparent;
  cursor:pointer;padding:9px;border-radius:9px;transition:background .2s ease}
.burger:hover{background:rgba(11,21,71,.05)}
.burger span{display:block;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .2s ease}
.burger span+span{margin-top:5px}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none;position:fixed;inset:74px 0 auto 0;z-index:99;background:var(--cream);
  border-bottom:1px solid var(--line);box-shadow:var(--sh);padding:1rem 0 1.6rem;
  max-height:calc(100vh - 74px);overflow-y:auto}
.mnav.on{display:block}
.mnav a{display:block;font-size:16px;font-weight:600;padding:.85rem 0;
  border-bottom:1px solid var(--line-2);letter-spacing:-.012em}
.mnav a.sub{font-size:14.5px;font-weight:500;color:var(--soft);padding:.6rem 0 .6rem 1rem}
.mnav .btn{margin-top:1.2rem;width:100%}
@media(max-width:900px){.burger{display:block}.nav-cta{display:none}}

/* ---------- fil d'ariane ---------- */
.fil{font-size:12.5px;color:var(--dim);display:flex;flex-wrap:wrap;gap:.4rem;
  margin-bottom:1.5rem}
.fil a{color:var(--soft)}
.fil a:hover{color:var(--orange)}
.fil span{color:var(--dim)}

/* ---------- en-tete de page interieure ---------- */
.phero{background:var(--cream);position:relative;overflow:hidden;
  padding:clamp(2.2rem,5vh,3.4rem) 0 calc(clamp(3rem,6vh,4.5rem) + var(--curve))}
.phero::before{content:'';position:absolute;inset:-30% -20% auto -20%;height:150%;z-index:0;
  pointer-events:none;
  background:radial-gradient(46% 52% at 88% 8%, rgba(0,63,218,.13) 0%, transparent 68%),
             radial-gradient(38% 44% at 4% 92%, rgba(0,63,218,.09) 0%, transparent 64%)}
.phero h1{font-size:clamp(1.9rem,3.5vw,2.85rem);max-width:20ch}
.phero .lead{max-width:40rem}
.phero-in{max-width:46rem}
.phero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

/* ---------- blocs de contenu generiques ---------- */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
@media(max-width:880px){.g3{grid-template-columns:1fr}}
@media(max-width:700px){.g2{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.sec-white .card{background:var(--cream-2)}
.card h3{margin-bottom:.5rem}
.card p{font-size:14px;color:var(--soft);line-height:1.6}
.card .num{display:block;font-size:11.5px;font-weight:700;color:var(--orange);
  letter-spacing:.12em;margin-bottom:.7rem}
.card ul{margin-top:.9rem;display:flex;flex-direction:column;gap:.42rem}
.card ul li{position:relative;padding-left:1.1rem;font-size:13.5px;color:var(--soft);
  line-height:1.5}
.card ul li::before{content:'';position:absolute;left:0;top:.52em;width:5px;height:5px;
  border-radius:50%;background:var(--orange)}
.card .plus{display:inline-block;margin-top:1.1rem;font-size:13.5px;font-weight:600;
  color:var(--orange)}
.card .plus::after{content:' \2192';transition:margin-left .2s ease}
.card:hover .plus::after{margin-left:.2rem}

/* ---------- encadre ---------- */
.note{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:12px;padding:1.3rem 1.5rem;margin:1.9rem 0}
.sec-white .note{background:var(--cream-2)}
.note b{display:block;font-size:15px;font-weight:700;letter-spacing:-.013em;margin-bottom:.35rem}
.note p{font-size:14px;color:var(--soft);line-height:1.62}
.note.dk{background:var(--ink-deep);border-color:rgba(255,255,255,.1);
  border-left-color:var(--orange)}
.note.dk b{color:#fff}
.note.dk p{color:rgba(232,238,251,.75)}

/* ---------- liste a coches ---------- */
.chk{display:flex;flex-direction:column;gap:.85rem;margin-top:1.6rem}
.chk li{display:flex;align-items:flex-start;gap:.75rem;font-size:14.8px;line-height:1.55}
.chk li b{font-weight:700}
.chk li i{font-style:normal;color:var(--soft);display:block;font-size:14px;margin-top:.1rem}
.chk .no{background:rgba(11,21,71,.06)}
.chk .no svg{stroke:var(--soft)}

/* ---------- tableau ---------- */
.tab{width:100%;border-collapse:collapse;margin-top:1.7rem;font-size:14.5px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sec-white .tab{background:var(--cream-2)}
.tab th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dim);font-weight:700;padding:.95rem 1.15rem;border-bottom:1px solid var(--line)}
.tab td{padding:.95rem 1.15rem;border-bottom:1px solid var(--line-2);color:var(--soft);
  vertical-align:top;line-height:1.55}
.tab tr:last-child td{border-bottom:0}
.tab td:first-child{color:var(--ink);font-weight:600}
.tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- tarifs ---------- */
.tarifs{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:2.2rem}
@media(max-width:1020px){.tarifs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.tarifs{grid-template-columns:1fr}}
.tf{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.4rem;display:flex;flex-direction:column;position:relative;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease}
.tf:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.tf.reco{border-color:rgba(238,108,38,.4);box-shadow:var(--sh)}
.tf .rec{position:absolute;top:-9px;left:1.4rem;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--orange);
  padding:.2rem .6rem;border-radius:5px}
.tf .nom{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange)}
.tf .prix{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin-top:.7rem;line-height:1}
.tf .prix em{font-style:normal;font-size:.9rem;font-weight:600;color:var(--dim)}
.tf .htva{font-size:12px;color:var(--dim);margin-top:.3rem}
.tf .vol{font-size:14.5px;font-weight:600;margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid var(--line)}
.tf ul{margin-top:.85rem;display:flex;flex-direction:column;gap:.45rem;flex:1 1 auto}
.tf ul li{position:relative;padding-left:1.1rem;font-size:13.5px;color:var(--soft);
  line-height:1.5}
.tf ul li::before{content:'';position:absolute;left:0;top:.5em;width:5px;height:5px;
  border-radius:50%;background:var(--orange)}
.tf .btn{margin-top:1.4rem;width:100%}

/* ---------- articles ---------- */
.prose{max-width:44rem;font-size:16.5px;line-height:1.75;color:var(--ink)}
.prose>*+*{margin-top:1.15rem}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.72rem);margin-top:2.8rem;letter-spacing:-.022em}
.prose h3{font-size:1.12rem;margin-top:2rem}
.prose p{color:var(--soft)}
.prose p b,.prose li b{color:var(--ink);font-weight:650}
.prose ul,.prose ol{margin-left:0;display:flex;flex-direction:column;gap:.55rem}
.prose ul li{position:relative;padding-left:1.35rem;color:var(--soft)}
.prose ul li::before{content:'';position:absolute;left:.3rem;top:.68em;width:5px;height:5px;
  border-radius:50%;background:var(--orange)}
.prose ol{counter-reset:n}
.prose ol li{position:relative;padding-left:2.1rem;color:var(--soft);counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:.12em;width:1.45rem;
  height:1.45rem;border-radius:7px;background:var(--orange-soft);color:var(--orange-deep);
  font-size:12px;font-weight:700;display:grid;place-items:center}
.prose a{color:var(--orange-deep);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
.prose blockquote{border-left:3px solid var(--orange);padding:.2rem 0 .2rem 1.3rem;
  font-size:1.05rem;color:var(--ink);font-weight:500}
.prose .tab{font-size:14px}

.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;font-size:13px;
  color:var(--dim);margin-top:1.4rem}
.art-meta .pt{width:3px;height:3px;border-radius:50%;background:var(--dim)}
.art-cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange);background:var(--orange-soft);
  border-radius:5px;padding:.25rem .55rem}

.som{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.5rem;margin:2rem 0}
.som b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.8rem}
.som ol{counter-reset:s;display:flex;flex-direction:column;gap:.5rem}
.som li{counter-increment:s;font-size:14.5px}
.som a{color:var(--soft);font-weight:500}
.som a:hover{color:var(--orange-deep)}

.srcs{font-size:13px;color:var(--dim);line-height:1.6;margin-top:2.6rem;padding-top:1.4rem;
  border-top:1px solid var(--line)}
.srcs a{color:var(--soft);text-decoration:underline}
.srcs b{display:block;color:var(--ink);font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:.5rem}

/* ---------- liste du blog ---------- */
.bl{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.2rem}
@media(max-width:760px){.bl{grid-template-columns:1fr}}
.bc{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem;display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease}
.bc:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.bc h3{font-size:1.12rem;line-height:1.3;margin:.85rem 0 .5rem;letter-spacing:-.018em}
.bc p{font-size:14px;color:var(--soft);line-height:1.6;flex:1 1 auto}
.bc .art-meta{margin-top:1.1rem}
.bc.mise{grid-column:1 / -1;background:var(--ink-deep)}
.bc.mise h3{color:#fff;font-size:clamp(1.25rem,2.4vw,1.6rem)}
.bc.mise p{color:rgba(232,238,251,.75);font-size:15px;max-width:44rem}
.bc.mise .art-meta{color:rgba(232,238,251,.5)}
.bc.mise .art-cat{background:rgba(238,108,38,.2);color:#A9C2F7}

/* ---------- articles lies ---------- */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem}
@media(max-width:880px){.rel{grid-template-columns:1fr}}
.rl{background:var(--cream-2);border:1px solid var(--line);border-radius:13px;padding:1.25rem}
.rl:hover{border-color:rgba(238,108,38,.35)}
.rl span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange)}
.rl h4{font-size:14.5px;font-weight:650;line-height:1.4;margin-top:.5rem;letter-spacing:-.012em}

/* ---------- bandeau de rappel ---------- */
.band{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem 1.8rem;margin-top:2.4rem;display:flex;align-items:center;gap:1.4rem;
  flex-wrap:wrap}
.sec-white .band{background:var(--cream-2)}
.band div{flex:1 1 20rem}
.band b{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em}
.band p{font-size:14px;color:var(--soft);margin-top:.3rem;line-height:1.55}

/* lien de menu correspondant a la page en cours */
.nav-links a.act{color:var(--ink);font-weight:600}
.nav-links a.act::after{right:0}

/* dans une carte en colonne, l'etiquette ne doit pas s'etirer sur toute la largeur */
.bc .art-cat,.phero .art-cat{align-self:flex-start}
.phero .art-cat{display:inline-block}

/* la carte de service devient un lien : on annonce la suite en bas de carte */
.pole-plus{display:inline-block;margin-top:1.1rem;font-size:13.5px;font-weight:600;
  color:var(--orange);position:relative}
.pole-plus::after{content:' \2192';display:inline-block;transition:transform .22s ease}
.pole:hover .pole-plus::after{transform:translateX(3px)}

/* liens dans les reponses de FAQ */
details p a{color:var(--orange-deep);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}

/* ============================================================
   PHOTOS DE TERRAIN
   Les fichiers vivent dans assets/photos/. Pour changer une image,
   il suffit de remplacer le fichier en gardant le meme nom.
   ============================================================ */

/* photos de chantier en fond des cartes du heros */
.hero-scene{position:absolute;inset:3% -2% 3% 6%;z-index:0;display:grid;
  grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:10px;
  border-radius:26px;overflow:hidden;box-shadow:var(--sh-lg)}
.hero-scene img{width:100%;height:100%;object-fit:cover;display:block}
.hero-scene img:first-child{grid-row:1 / 3}
/* voile bleu nuit : les cartes blanches doivent rester lisibles par-dessus */
.hero-scene::after{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(7,14,51,.34),rgba(7,14,51,.12) 55%,rgba(0,63,218,.18))}
.stage3d .deck{z-index:2}
@media(max-width:960px){.hero-scene{inset:0}}

/* la mosaique de metiers */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;margin-top:2.8rem}
@media(max-width:1000px){.mosaic{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.mosaic{grid-template-columns:1fr 1fr;gap:.6rem}}
.mo{position:relative;border-radius:14px;overflow:hidden;background:var(--blue-soft);
  box-shadow:var(--sh-sm)}
.mo::before{content:'';display:block;padding-top:124%}
.mo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.mo:hover img{transform:scale(1.05)}
.mo b{position:absolute;left:.7rem;bottom:.7rem;z-index:2;font-size:12.5px;font-weight:650;
  color:#fff;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(7,14,51,.6)}
.mo::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;z-index:1;
  background:linear-gradient(to top,rgba(7,14,51,.62),transparent)}

/* bandeau photo large, pour couper une page */
.photo-band{position:relative;border-radius:var(--r);overflow:hidden;margin-top:2.2rem;
  box-shadow:var(--sh)}
.photo-band::before{content:'';display:block;padding-top:34%}
.photo-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-band .pb-tx{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.6rem 1.8rem;
  background:linear-gradient(to top,rgba(7,14,51,.82),transparent);color:#fff}
.photo-band .pb-tx b{display:block;font-size:clamp(17px,2vw,22px);font-weight:700;
  letter-spacing:-.02em}
.photo-band .pb-tx span{display:block;font-size:14px;color:rgba(232,238,251,.85);margin-top:.25rem}


/* ============================================================
   DEFILEMENT CONTINU DES AVIS
   Chaque piste contient deux fois la meme liste : on la translate
   de la moitie de sa largeur, ce qui boucle sans a-coup.
   ============================================================ */
.marquee{overflow:hidden;margin-top:1.1rem;padding:.4rem 0 .8rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.sec-head+.marquee,.wrap+.marquee{margin-top:2rem}
.marquee-track,.marquee-dup{display:flex;gap:1rem;width:max-content}
.marquee-track{animation:defile 90s linear infinite}
.marquee-dup{padding-left:1rem}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:100s}
.marquee.slow .marquee-track{animation-duration:70s}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee .avi{width:340px;flex:0 0 auto}
@media(max-width:600px){.marquee .avi{width:280px}}
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none}
  .marquee-dup{display:none}
}

/* bande de preuve sociale, sans titre */
.proof{padding-top:calc(clamp(2.4rem,5vh,3.4rem) + var(--curve));
  padding-bottom:calc(clamp(2.2rem,4.5vh,3rem) + var(--curve))}
.gbadge{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap}
.gbadge .gcard-score{font-size:1.9rem}
.gbadge .stars svg{width:17px;height:17px}
.gbadge .gcard-sub{margin:0;font-size:13.5px}
.chip{display:inline-flex;align-items:center;gap:.6rem;flex:0 0 auto;white-space:nowrap;
  background:var(--cream-2);border:1px solid var(--line);border-radius:999px;
  padding:.65rem 1.1rem;box-shadow:var(--sh-sm)}
.chip b{font-size:14px;font-weight:650;color:var(--ink)}
.chip i{font-style:normal;font-size:12.5px;color:var(--dim)}
.chip .stars svg{width:11px;height:11px}

/* ---------- unite de credit ---------- */
.credits{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:2rem}
@media(max-width:900px){.credits{grid-template-columns:repeat(2,1fr)}}
.cr{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;
  display:flex;flex-direction:column}
.cr-n{font-size:2.2rem;font-weight:800;letter-spacing:-.035em;color:var(--blue);line-height:1}
.cr-u{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;
  margin-top:.3rem}
.cr b{font-size:15.5px;font-weight:700;margin-top:1rem;letter-spacing:-.012em}
.cr i{font-style:normal;font-size:13.5px;color:var(--soft);line-height:1.5;margin-top:.25rem}
.entreprise{font-size:14px;color:var(--soft);margin-top:1.4rem;text-align:center}
.entreprise a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   PHOTOS DANS LES EN-TETES DES PAGES INTERIEURES
   Le texte s'aligne desormais sur la barre de navigation, la photo
   se place a droite. Sous 1080 px, elle passe sous le texte.
   ============================================================ */
.phero-in{max-width:var(--w)}
.phero-in>*{max-width:44rem}
.phero-ph{position:absolute;top:50%;right:clamp(1.25rem,4vw,2rem);width:min(290px,25vw);
  max-width:none;transform:translateY(-44%) rotate(2.5deg);border-radius:20px;overflow:hidden;
  border:5px solid #fff;box-shadow:var(--sh-lg);background:var(--blue-soft);z-index:3}
.phero-ph::before{content:'';display:block;padding-top:120%}
.phero-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:1080px){
  .phero-ph{position:relative;top:auto;right:auto;width:100%;transform:none;margin-top:2rem;
    border-width:0;border-radius:var(--r)}
  .phero-ph::before{padding-top:52%}
}

/* ---------- photos dans les sections de l'accueil ---------- */
.sec-ink .ink-photo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;opacity:.16;mix-blend-mode:luminosity}
.faq-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,5vw,4rem);
  align-items:start}
.faq-wrap .faq{max-width:none}
.faq-ph{position:sticky;top:110px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);
  margin-top:1.8rem;background:var(--blue-soft)}
.faq-ph::before{content:'';display:block;padding-top:125%}
.faq-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.faq-wrap{grid-template-columns:1fr}.faq-ph{display:none}}
.final{isolation:isolate}
.final .final-photo{position:absolute;inset:0;z-index:0;background-size:cover;
  background-position:center 35%;opacity:.3}
.final>div{position:relative;z-index:2}

/* ============================================================
   RYTHME ET TEXTURE (23/09/2026)
   Le scroll alternait blanc et bleu tres clair : trop plat.
   On fait maintenant alterner quatre ambiances bien distinctes :
   clair net (blanc), clair texture (quadrillage de plan),
   bleu vif (grain + photo), sombre photo. Chaque changement
   de section se voit.
   ============================================================ */
:root{
  --vif:#0B45E6;
  --vif-2:#0033B0;
  --vif-3:#0A1F86;
  /* grain fin et sombre, pour les fonds clairs */
  --grain-fin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .08 0 0 0 0 .28 0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* ---------- clair texture : grain fin, sans motif ---------- */
.sec-cream{background:#EAF1FE}
.sec-cream::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;background-image:var(--grain-fin);background-size:160px 160px;opacity:.3}

/* ---------- blanc : un halo discret en haut a droite, pour ne pas etre plat ---------- */
.sec-white::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:var(--grain-fin) 0 0/160px 160px,
             radial-gradient(40% 50% at 100% 0%,rgba(11,69,230,.07),transparent 70%),
             radial-gradient(30% 40% at 0% 100%,rgba(238,108,38,.05),transparent 70%);
  opacity:.45}

/* ---------- bleu vif ---------- */
.sec-blue{color:#fff;overflow:hidden;
  background:linear-gradient(140deg,var(--vif) 0%,var(--vif-2) 52%,var(--vif-3) 100%)}
.sec-blue::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);opacity:.1;mix-blend-mode:overlay;border-radius:inherit}
.sec-blue .bgph,.sec-dark .bgph{position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;overflow:hidden}
.sec-blue .bgph img,.sec-dark .bgph img{width:100%;height:100%;object-fit:cover}
.sec-blue .bgph img{opacity:.2;mix-blend-mode:luminosity}
.sec-blue .bgph::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,69,230,.9) 0%,rgba(0,51,176,.55) 55%,rgba(10,31,134,.35) 100%)}
.sec-blue .glow{position:absolute;z-index:0;pointer-events:none;width:38rem;height:38rem;
  border-radius:50%;right:-12rem;top:-14rem;filter:blur(30px);
  background:radial-gradient(circle,rgba(238,108,38,.38) 0%,rgba(238,108,38,.08) 45%,transparent 70%)}
.sec-blue h2,.sec-blue h3{color:#fff}
.sec-blue .eyebrow{color:#FFB48A}
.sec-blue .lead,.sec-blue .sec-head p{color:rgba(236,242,255,.84)}
.sec-blue .lead b{color:#fff}
.sec-blue .assure li{color:#fff}
.sec-blue .assure i{color:rgba(236,242,255,.75)}
.sec-blue .tick{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.sec-blue .tick svg{stroke:#fff}
/* les cartes blanches posees sur le bleu gardent leur encre */
.sec-blue .founder,.sec-blue .cal-card,.sec-blue .avi,.sec-blue .card,.sec-blue .tf,
.sec-blue .en,.sec-blue .note,.sec-blue .cr,.sec-blue .zone-card,.sec-blue .step{color:var(--ink)}
.sec-blue .card h3,.sec-blue .tf h3,.sec-blue .en h3,.sec-blue .step h3,
.sec-blue .zone-card h3,.sec-blue .cal-card h3{color:var(--ink)}
.sec-blue .card,.sec-blue .step,.sec-blue .cr{background:#fff;border-color:transparent;
  box-shadow:0 20px 50px -24px rgba(3,10,50,.6)}
.sec-blue .avi{border-color:transparent;box-shadow:0 18px 44px -22px rgba(3,10,50,.65)}
.sec-blue .founder{border-color:transparent}
.sec-blue .cal-card{box-shadow:0 40px 90px -30px rgba(3,10,50,.75)}
.sec-blue .chk li{color:#fff}
.sec-blue .chk li i{color:rgba(236,242,255,.78)}
.sec-blue .tab{background:#fff;color:var(--ink)}
.sec-blue a.plus,.sec-blue .entreprise a{color:#FFB48A}
.sec-blue .entreprise{color:rgba(236,242,255,.8)}
.sec-blue .btn-s{color:#fff;border-color:rgba(255,255,255,.45)}
.sec-blue .btn-s:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.sec-blue details{border-color:rgba(255,255,255,.18)}
.sec-blue summary:hover{color:#FFB48A}
.sec-blue details p{color:rgba(236,242,255,.8)}

/* ---------- sombre photo : une grande photo de terrain, voilee de bleu nuit ---------- */
.sec-dark{background:var(--ink-deep);color:#fff;overflow:hidden}
.sec-dark .bgph img{opacity:.55}
.sec-dark .bgph::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,14,51,.96) 0%,rgba(7,14,51,.82) 45%,rgba(7,14,51,.45) 100%),
             linear-gradient(0deg,rgba(7,14,51,.85),transparent 45%)}
.sec-dark::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);opacity:.08;mix-blend-mode:overlay;border-radius:inherit}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .eyebrow{color:#FFB48A}
.sec-dark .sec-head p{color:rgba(236,242,255,.75)}
/* engagements en verre depoli sur la photo */
.sec-dark .en{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sec-dark .en:hover{background:rgba(255,255,255,.11);box-shadow:none}
.sec-dark .en p{color:rgba(236,242,255,.74)}
.sec-dark .en .ic{background:var(--orange)}
.sec-dark .en .ic svg{stroke:#fff}

/* ---------- les sections sombres existantes gagnent du relief ---------- */
.sec-ink::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);opacity:.08;mix-blend-mode:overlay;border-radius:inherit}
.sec-ink .ink-bg{background:
  radial-gradient(55% 70% at 88% 100%,rgba(11,69,230,.7) 0%,transparent 68%),
  radial-gradient(40% 50% at 0% 0%,rgba(238,108,38,.2) 0%,transparent 70%)}
.sec-ink .ink-photo{opacity:.24}
.kpi .v{background:linear-gradient(180deg,#fff 30%,#BFD2FF);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.kpi .v em{-webkit-text-fill-color:var(--orange)}
.kpi{border-top:2px solid rgba(238,108,38,.7)}

/* ---------- heros : plus de bleu, un fond qui a du caractere ---------- */
.hero{background:linear-gradient(170deg,#E3ECFF 0%,#F1F5FD 55%,#FFFFFF 100%)}
.hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain-fin);background-size:160px 160px;opacity:.3}
.orb-a{background:radial-gradient(circle,rgba(11,69,230,.34) 0%,rgba(11,69,230,.08) 45%,transparent 70%)}
.orb-b{background:radial-gradient(circle,rgba(238,108,38,.22) 0%,transparent 62%)}
.hero-scene{box-shadow:0 40px 80px -30px rgba(7,14,51,.55)}
.hero-scene::after{background:linear-gradient(135deg,rgba(7,14,51,.3),rgba(7,14,51,.05) 55%,rgba(11,69,230,.35))}

/* ---------- cartes de services : une photo en tete, un liseré qui s'allume ---------- */
.pole{padding-top:0;display:flex;flex-direction:column;background:#fff;
  box-shadow:0 1px 2px rgba(11,21,71,.05),0 16px 36px -22px rgba(11,21,71,.35)}
.pole-ph{position:relative;margin:0 -1.6rem 1.2rem;height:132px;overflow:hidden}
.pole-ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.pole-ph::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,14,51,.05),rgba(7,14,51,.45))}
.pole:hover .pole-ph img{transform:scale(1.06)}
.pole .num{top:.9rem;right:1rem;z-index:2;color:#fff;opacity:.9;font-size:1.9rem;
  text-shadow:0 2px 12px rgba(7,14,51,.5)}
.pole .ic{margin-top:-2.6rem;z-index:2;background:#fff;
  box-shadow:0 10px 24px -10px rgba(7,14,51,.5)}
.pole::before{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--vif),var(--orange));transform:scaleX(0);
  transform-origin:left;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.pole:hover::before{transform:scaleX(1)}
.pole .pole-plus{margin-top:auto;padding-top:1.1rem}

/* ---------- bandeau de photos qui defile, legerement incline ---------- */
.rail{padding-top:calc(clamp(2.2rem,5vh,3.2rem) + var(--curve));
  padding-bottom:calc(clamp(2.2rem,5vh,3.2rem) + var(--curve));overflow:hidden}
.rail-tilt{transform:rotate(-2.2deg);margin:0 -3rem;position:relative;z-index:3}
.rail .marquee{-webkit-mask-image:none;mask-image:none;margin:0;padding:.5rem 0}
.rail .marquee-track{animation-duration:60s}
.rail .marquee+.marquee{margin-top:.9rem}
.rph{position:relative;flex:0 0 auto;width:250px;height:176px;border-radius:14px;overflow:hidden;
  box-shadow:0 16px 36px -18px rgba(7,14,51,.55)}
.rph img{width:100%;height:100%;object-fit:cover}
.rph b{position:absolute;left:.75rem;bottom:.65rem;z-index:2;font-size:12.5px;font-weight:650;
  color:#fff;text-shadow:0 1px 8px rgba(7,14,51,.7)}
.rph::after{content:'';position:absolute;inset:auto 0 0 0;height:50%;
  background:linear-gradient(to top,rgba(7,14,51,.6),transparent)}
.rph.tx{display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem 1.2rem;
  background:linear-gradient(140deg,var(--vif),var(--vif-3));color:#fff}
.rph.tx::after{display:none}
.rph.tx strong{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.rph.tx span{font-size:12.5px;color:rgba(236,242,255,.8);margin-top:.4rem;line-height:1.4}
.rph.or{background:linear-gradient(140deg,#F07A36,var(--orange-deep))}
@media(max-width:600px){.rph{width:190px;height:140px}}

/* ---------- carte finale : bleu vif plutot que bleu nuit ---------- */
.final{background:linear-gradient(135deg,var(--vif) 0%,var(--vif-2) 55%,var(--vif-3) 100%)}
.final::before{background:radial-gradient(circle,rgba(238,108,38,.45) 0%,transparent 66%)}
.final .final-photo{opacity:.22;mix-blend-mode:luminosity}
.final::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);opacity:.1;mix-blend-mode:overlay}

/* ---------- en-tete des pages interieures : bleu vif et photo ---------- */
.phero{background:linear-gradient(140deg,var(--vif) 0%,var(--vif-2) 55%,var(--vif-3) 100%);color:#fff}
.phero::before{background:
  radial-gradient(46% 60% at 92% 0%,rgba(238,108,38,.32) 0%,transparent 68%)}
.phero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);opacity:.1;mix-blend-mode:overlay}
.phero h1{color:#fff}
.phero .grainy{color:#fff}
.phero .lead{color:rgba(236,242,255,.85)}
.phero .lead b{color:#fff}
.phero .eyebrow{color:#FFB48A}
.phero .fil,.phero .fil span{color:rgba(236,242,255,.6)}
.phero .fil a{color:rgba(236,242,255,.85)}
.phero .fil a:hover{color:#fff}
.phero .btn-s{color:#fff;border-color:rgba(255,255,255,.45)}
.phero .btn-s:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.phero .art-meta{color:rgba(236,242,255,.7)}
.phero .art-meta .pt{background:rgba(236,242,255,.6)}
.phero .art-cat{background:rgba(255,255,255,.14);color:#fff}
.phero .mark path{stroke:var(--orange)}
.phero-ph{border-color:rgba(255,255,255,.9);box-shadow:0 40px 80px -30px rgba(3,10,50,.7)}
.phero-ph{animation:pose 1s cubic-bezier(.22,.61,.36,1) both .15s}
@keyframes pose{from{opacity:0;transform:translateY(-38%) rotate(6deg)}}
@media(max-width:1080px){.phero-ph{animation:none}}

/* ---------- details ---------- */
.mo{box-shadow:0 18px 40px -22px rgba(7,14,51,.55)}
.mo b{font-size:13px}
.tag:hover{border-color:var(--vif);color:var(--vif)}
.zone-card{border-top:3px solid var(--vif)}
.step .k{background:linear-gradient(140deg,var(--vif),var(--vif-3));
  box-shadow:0 8px 18px -8px rgba(11,69,230,.7)}
.tf.reco{border:2px solid var(--vif);box-shadow:0 30px 60px -28px rgba(11,69,230,.55)}
.tf.reco .rec{background:var(--vif)}
.cr{border-top:3px solid var(--vif)}
.card .num{color:var(--vif)}
.en .ic{background:linear-gradient(140deg,#FFE6D6,var(--orange-soft))}
@media(prefers-reduced-motion:reduce){.rail .marquee-track{animation:none}.phero-ph{animation:none}}

/* contenus des pages interieures poses sur les sections bleues et sombres */
.sec-blue .band,.sec-dark .band,.sec-dark .card,.sec-dark .step,.sec-dark .note,
.sec-dark .tab,.sec-blue .mlogo,.sec-dark .mlogo{color:var(--ink)}
.sec-dark .card h3,.sec-dark .step h3{color:var(--ink)}
.sec-dark .card,.sec-dark .step{background:#fff;border-color:transparent}
.sec-dark .chk li{color:#fff}
.sec-dark .chk li i{color:rgba(236,242,255,.74)}
.sec-dark .tick{background:rgba(238,108,38,.2);border-color:rgba(238,108,38,.45)}
.sec-blue .chk .no,.sec-dark .chk .no{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.sec-blue .chk .no svg,.sec-dark .chk .no svg{stroke:#fff}
.sec-blue .prose,.sec-blue .prose p{color:rgba(236,242,255,.86)}
.sec-blue .prose b{color:#fff}
.sec-blue .mlogo .dt{color:var(--dim)}
.sec-blue .mlogo,.sec-dark .mlogo{background:#fff;border-color:transparent}

/* ============================================================
   MENU A SOUS-CATEGORIES
   Ordinateur : le panneau s'ouvre au survol ou au clavier (focus).
   Tablette tactile : premier tap ouvre, second tap suit le lien (site.js).
   Mobile (900 px et moins) : groupes repliables dans le panneau.
   ============================================================ */
.nav-links{align-items:center}
.dd{position:relative}
.dd-t{display:inline-flex;align-items:center;gap:.28rem}
.chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.dd-t .chev{opacity:.55}
.dd:hover .dd-t .chev,.dd:focus-within .dd-t .chev,.dd.open .dd-t .chev{transform:rotate(180deg);opacity:1}
.dd:hover .dd-t,.dd.open .dd-t{color:var(--ink)}
/* le panneau commence juste sous le lien : la marge haute sert de pont pour la souris */
.dd-m{position:absolute;top:100%;left:50%;padding-top:18px;z-index:120;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .2s ease,transform .25s cubic-bezier(.22,.61,.36,1),visibility 0s linear .25s}
.dd:hover .dd-m,.dd:focus-within .dd-m,.dd.open .dd-m{opacity:1;visibility:visible;
  transform:translate(-50%,0);transition-delay:0s}
.dd-r .dd-m{left:auto;right:-1.2rem;transform:translateY(8px)}
.dd-r:hover .dd-m,.dd-r:focus-within .dd-m,.dd-r.open .dd-m{transform:none}
.dd-in{width:330px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:.5rem;
  box-shadow:0 2px 6px rgba(11,21,71,.06),0 28px 60px -22px rgba(11,21,71,.4);
  display:flex;flex-direction:column}
.dd-in::before{content:'';position:absolute;top:12px;left:50%;width:12px;height:12px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg)}
.dd-r .dd-in::before{left:auto;right:2.6rem}
.nav-links .dd-in a{display:flex;align-items:flex-start;gap:.75rem;padding:.7rem .75rem;
  border-radius:11px;color:var(--ink);transition:background .18s ease}
.nav-links .dd-in a::after{display:none}
.nav-links .dd-in a:hover,.nav-links .dd-in a:focus-visible{background:#EEF3FE;outline:none}
.nav-links .dd-in a.on{background:#EEF3FE}
.dd-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(160deg,#EDF2FD,#D8E4FA);transition:background .18s ease}
.dd-ic svg{width:16px;height:16px;fill:none;stroke:var(--vif);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s ease}
.nav-links .dd-in a:hover .dd-ic{background:var(--vif)}
.nav-links .dd-in a:hover .dd-ic svg{stroke:#fff}
.dd-in b{display:block;font-size:14px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.dd-in i{display:block;font-style:normal;font-size:12.5px;color:var(--soft);line-height:1.4;
  margin-top:.12rem;font-weight:400}
.nav-links .dd-in a.dd-all{display:block;margin-top:.3rem;padding:.75rem .75rem .6rem;
  border-top:1px solid var(--line-2);border-radius:0 0 11px 11px;font-size:13.5px;
  font-weight:600;color:var(--orange-deep)}
.nav-links .dd-in a.dd-all::after{content:' \2192';display:inline;position:static;
  background:none;height:auto}
.nav-links .dd-in a.dd-all:hover{background:transparent;color:var(--orange)}
/* entre 900 et 1100 px, la barre est serree : on resserre les liens */
@media(max-width:1100px) and (min-width:901px){.nav-links{gap:1.15rem;font-size:14px}}

/* ---------- menu mobile en groupes repliables ---------- */
.mg{border-bottom:1px solid var(--line-2)}
.mg-h{display:flex;align-items:center}
.mnav .mg-h a{flex:1 1 auto;border-bottom:0}
.mg-t{flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;border-radius:10px;
  display:grid;place-items:center;color:var(--soft);cursor:pointer;margin-right:-.5rem}
.mg-t:hover{background:rgba(11,21,71,.05)}
.mg-t .chev{width:18px;height:18px}
.mg.open .mg-t .chev{transform:rotate(180deg)}
.mg-s{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.22,.61,.36,1)}
.mg-s>*{overflow:hidden}
.mg.open .mg-s{grid-template-rows:1fr}
.mg-s{overflow:hidden}
.mg:not(.open) .mg-s a{visibility:hidden}
.mg-s a.sub{border-bottom:0;border-left:2px solid rgba(11,69,230,.15);margin-left:.2rem;
  padding:.55rem 0 .55rem 1rem}
.mg-s a.sub:last-child{margin-bottom:.7rem}
.mnav a[aria-current="page"]{color:var(--vif);border-left-color:var(--vif);font-weight:650}
@media(prefers-reduced-motion:reduce){.dd-m,.mg-s,.chev{transition:none}}

/* le bouton du panneau mobile heritait du display:block des liens */
.mnav a.btn{display:flex;justify-content:center;text-align:center;border-bottom:0}

/* bloc rendez-vous sur fond sombre, comme la section des chiffres */
.rdv-sec.sec-ink .rdv-bg{display:none}
.rdv-sec.sec-ink .lead b{color:#fff}
.rdv-sec.sec-ink .assure li{color:#fff}
.rdv-sec.sec-ink .assure i{color:rgba(236,242,255,.72)}
.rdv-sec.sec-ink .tick{background:rgba(238,108,38,.2);border-color:rgba(238,108,38,.45)}
.rdv-sec.sec-ink .founder,.rdv-sec.sec-ink .cal-card{color:var(--ink);border-color:transparent}
.rdv-sec.sec-ink .cal-card h3{color:var(--ink)}
.rdv-sec.sec-ink .cal-card{box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.rdv-sec.sec-ink .card{color:var(--ink)}
.rdv-sec.sec-ink .ink-photo{opacity:.1}
.sec-ink .fil,.sec-ink .fil span{color:rgba(236,242,255,.55)}
.sec-ink .fil a{color:rgba(236,242,255,.85)}
.sec-ink .fil a:hover{color:#fff}

/* ============================================================
   BOUTONS ET APPELS A L'ACTION : degrade de la barre de progression
   Bleu intense vers orange. Au survol, le degrade glisse vers l'orange.
   ============================================================ */
:root{--cta:linear-gradient(100deg,#0B45E6 0%,#4B50D4 22%,#C1605A 55%,#EE6C26 75%,#F5894A 100%)}
.btn-p,.ck-acc{background:var(--cta);background-size:135% 100%;background-position:0% 50%;
  color:#fff;border:0;
  box-shadow:0 1px 2px rgba(11,69,230,.25),0 10px 22px -12px rgba(11,69,230,.6),0 10px 24px -14px rgba(238,108,38,.55);
  transition:background-position .45s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease,
             transform .22s cubic-bezier(.22,.61,.36,1)}
.btn-p:hover,.ck-acc:hover{background:var(--cta);background-size:135% 100%;background-position:100% 50%;
  box-shadow:0 2px 4px rgba(11,69,230,.25),0 16px 30px -12px rgba(11,69,230,.55),0 16px 32px -14px rgba(238,108,38,.7)}
.btn-p:focus-visible,.btn-w:focus-visible,.btn-s:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* bouton blanc (sur fond bleu) : le degrade passe dans le texte */
.btn-w{background:#fff}
.btn-w:hover{background:#fff}
.btn-w>*,.btn-w{-webkit-text-fill-color:transparent;background-image:var(--cta),linear-gradient(#fff,#fff);
  background-clip:text,padding-box;-webkit-background-clip:text,padding-box;background-size:100% 100%}
.btn-w{box-shadow:0 12px 28px -14px rgba(3,10,50,.6)}

/* bouton secondaire : le contour prend le degrade au survol */
.btn-s{border:1.5px solid rgba(11,21,71,.22);background:transparent}
.btn-s:hover{border-color:transparent;
  background:linear-gradient(var(--white),var(--white)) padding-box,var(--cta) border-box}
.phero .btn-s:hover,.sec-blue .btn-s:hover{color:var(--ink)}

/* liens d'action en texte : degrade dans les lettres */
.pole-plus,.card .plus,a.plus,.wa-link,.nav-links .dd-in a.dd-all,.rl span{
  background:var(--cta);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--orange)}
.wa-link::after{background:var(--cta)}
.pole-plus::after,.card .plus::after,.nav-links .dd-in a.dd-all::after{-webkit-text-fill-color:var(--orange)}
.sec-blue a.plus,.sec-dark a.plus{background:none;-webkit-text-fill-color:#FFB48A}

/* badges d'appel : recommande */
.tf .rec{background:var(--cta)}
.tf.reco{border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--cta) border-box}

/* barre de progression : meme degrade, pour que tout parle la meme langue */
.prog{background:var(--cta)}
@media(prefers-reduced-motion:reduce){.btn-p,.ck-acc{transition:none}}

/* ============================================================
   BOUTONS SUR FOND COLORE : version blanche
   Sur les fonds bleu vif, sombres et photo, le bouton principal passe
   en blanc avec le texte en degrade ; le degrade plein reste reserve
   aux fonds blancs et bleu clair.
   ============================================================ */
.phero .btn-p,.sec-blue .btn-p,.sec-dark .btn-p,.sec-ink .btn-p,.final .btn-p,.bc.mise .btn-p,
.phero .btn-p:hover,.sec-blue .btn-p:hover,.sec-dark .btn-p:hover,.sec-ink .btn-p:hover,
.final .btn-p:hover,.bc.mise .btn-p:hover{
  background-image:var(--cta),linear-gradient(#fff,#fff);
  -webkit-background-clip:text,padding-box;background-clip:text,padding-box;
  background-size:100% 100%;background-position:0 0;
  -webkit-text-fill-color:transparent;color:var(--vif);
  box-shadow:0 12px 28px -14px rgba(3,10,50,.6)}
.phero .btn-p::after,.sec-blue .btn-p::after,.sec-dark .btn-p::after,.sec-ink .btn-p::after,
.final .btn-p::after,.bc.mise .btn-p::after{display:none}
.phero .btn-p:hover,.sec-blue .btn-p:hover,.sec-dark .btn-p:hover,.sec-ink .btn-p:hover,
.final .btn-p:hover,.bc.mise .btn-p:hover,.btn-w:hover{
  box-shadow:0 18px 36px -14px rgba(3,10,50,.7)}

/* ---------- bouton de la barre du haut : vide, contour et texte en degrade ---------- */
.nav .nav-cta,.nav .nav-cta:hover{
  background-image:var(--cta),linear-gradient(transparent,transparent);
  -webkit-background-clip:text,padding-box;background-clip:text,padding-box;
  background-size:100% 100%;background-position:0 0;
  -webkit-text-fill-color:transparent;color:var(--vif);border:0;box-shadow:none}
.nav .nav-cta:hover{background-image:var(--cta),linear-gradient(rgba(11,69,230,.07),rgba(238,108,38,.07));
  transform:translateY(-1px)}
.nav .nav-cta::after{display:none}
.nav .nav-cta::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--cta);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* ---------- barre du haut et panneau mobile : blanc texture, comme les sections blanches ---------- */
.nav,.nav.on{background:rgba(255,255,255,.94)}
.nav::before,.mnav::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--grain-fin) 0 0/160px 160px;opacity:.45}
.nav-in{position:relative;z-index:1}
.mnav{background:#fff}
.mnav>.wrap{position:relative;z-index:1}