/* ============================================================
   STUDIO ATLAS — V3 · composants additionnels
   Chargé APRÈS css/style.css. Ne réécrit rien : n'ajoute que
   ce qui manquait au socle (audit, cartes missions, remote).
   ============================================================ */

:root{
  --atlas-blue-lite:#5B8DEF;
  --atlas-blue-deep:#1D4ED8;
}

/* ------------------------------------------------------------
   1. CTA D'ENTRÉE — champ audit à friction zéro
   ------------------------------------------------------------ */
.audit{margin:38px auto 0;max-width:560px}
.audit__label{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aluminium);font-weight:600;margin-bottom:12px
}
.audit__box{
  display:flex;align-items:center;gap:8px;
  padding:7px 7px 7px 22px;border-radius:var(--radius-pill);
  background:rgba(var(--rgb-inv),.055);
  border:1px solid rgba(var(--rgb-alu),.18);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:border-color .25s ease,background .25s ease
}
.audit__box:focus-within{
  border-color:rgba(37,99,235,.55);
  background:rgba(var(--rgb-inv),.08)
}
.audit__box input{
  flex:1;min-width:0;background:none;border:0;outline:0;
  color:var(--off-white);font-family:inherit;font-size:.98rem;padding:12px 0
}
.audit__box input::placeholder{color:rgba(var(--rgb-alu),.65)}
.audit__btn{flex:0 0 auto;padding:13px 24px;font-size:.9rem}
.audit__hint{margin-top:14px;font-size:.82rem;color:rgba(var(--rgb-alu),.75)}
@media(max-width:540px){
  .audit__box{flex-direction:column;align-items:stretch;padding:14px;border-radius:var(--radius)}
  .audit__box input{padding:8px 8px 12px;text-align:center}
  .audit__btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------------
   2. BOUTON PRIMAIRE — bordure-lumière (effet Apple)
   Surcharge volontaire de .btn--primary du socle.
   ------------------------------------------------------------ */
.btn--primary{
  background:linear-gradient(180deg,var(--atlas-blue-lite) 0%,var(--atlas-blue) 42%,var(--atlas-blue-deep) 100%);
  border-top:1px solid rgba(150,185,255,.85);
  box-shadow:0 10px 30px rgba(37,99,235,.34),inset 0 1px 0 rgba(var(--rgb-inv),.22)
}
.btn--primary:hover{
  box-shadow:0 14px 38px rgba(37,99,235,.46),inset 0 1px 0 rgba(var(--rgb-inv),.3);
  transform:translateY(-1px)
}
.btn__arrow{display:inline-block;transition:transform .12s ease-in-out}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* Bouton de carte : inversé + flèche diagonale */
.btn--card{
  padding:12px 24px;border-radius:12px;
  background:var(--off-white);color:#0A0D14;
  font-size:.87rem;font-weight:600;border:0
}
.btn--card:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.32);background:#fff}
.m__diag{display:inline-block;transform:rotate(-45deg);transition:transform .12s ease-in-out}
.btn--card:hover .m__diag{transform:rotate(-45deg) translate(2px,-2px)}

/* ------------------------------------------------------------
   3. CARTES MISSIONS — glossy, halo par palier
   ------------------------------------------------------------ */
.missions__grid--4{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:760px){.missions__grid--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.missions__grid--4{grid-template-columns:repeat(4,1fr);gap:18px}}

.m{
  position:relative;display:flex;flex-direction:column;
  padding:32px 26px 28px;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(var(--rgb-inv),.062) 0%,rgba(var(--rgb-inv),.022) 46%,rgba(var(--rgb-inv),.012) 100%);
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .35s ease
}
/* liseré de lumière en haut */
.m::before{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--m-glow,rgba(var(--rgb-inv),.55)),transparent)
}
/* halo coloré derrière le sommet */
.m::after{
  content:'';position:absolute;top:-110px;left:50%;transform:translateX(-50%);
  width:280px;height:230px;pointer-events:none;
  background:radial-gradient(circle,var(--m-halo,rgba(37,99,235,.4)),transparent 70%);
  filter:blur(46px);opacity:.6;transition:opacity .35s ease
}
.m:hover{
  transform:translateY(-6px);
  border-color:var(--m-border,rgba(37,99,235,.34));
  box-shadow:0 26px 60px rgba(0,0,0,.46)
}
.m:hover::after{opacity:1}

.m--launch{--m-halo:rgba(91,141,239,.34);--m-glow:rgba(160,195,255,.75);--m-border:rgba(91,141,239,.4);--m-accent:#7BA6F5}
.m--scale {--m-halo:rgba(37,99,235,.46);--m-glow:rgba(130,175,255,.9);--m-border:rgba(37,99,235,.55);--m-accent:#2563EB;border-color:rgba(37,99,235,.3)}
.m--orbit {--m-halo:rgba(29,78,216,.44);--m-glow:rgba(96,140,225,.8);--m-border:rgba(29,78,216,.5);--m-accent:#4F7BE0}
.m--moon  {--m-halo:rgba(200,206,214,.26);--m-glow:rgba(228,232,238,.9);--m-border:rgba(190,196,206,.42);--m-accent:#C6CBD3}

.m__flag{
  position:absolute;top:18px;right:18px;z-index:2;
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:rgba(37,99,235,.18);border:1px solid rgba(37,99,235,.4);color:#9CC0FF
}
.m__icon{
  position:relative;z-index:1;width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  background:rgba(var(--rgb-inv),.06);border:1px solid rgba(var(--rgb-inv),.1);margin-bottom:22px
}
.m__name{position:relative;z-index:1;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.m--moon .m__name{
  background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;color:transparent
}
.m__for{
  position:relative;z-index:1;margin-top:6px;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--m-accent)
}
.m__desc{position:relative;z-index:1;margin-top:16px;font-size:.92rem;font-weight:300;color:var(--aluminium);line-height:1.6}
.m__desc--strong{color:var(--off-white);font-weight:400}

/* --- numéro de palier, discret en haut à droite --- */
.m__step{
  position:absolute;top:24px;right:24px;z-index:2;
  font-size:.8rem;font-weight:800;letter-spacing:.04em;
  color:var(--m-accent);opacity:.32;transition:opacity .3s ease
}
.m:hover .m__step{opacity:.7}
.m--scale .m__step{top:56px;right:26px}

/* --- délai de livraison (les prix sont sur la page offres) --- */
.m__delay{
  position:relative;z-index:1;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:9px;
  font-size:.82rem;font-weight:500;color:var(--off-white)
}
.m__delay-dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--m-accent);box-shadow:0 0 10px var(--m-accent)
}

/* --- prix : conservé pour la page offres --- */
.m__price{position:relative;z-index:1;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.m__setup{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(var(--rgb-alu),.7);font-weight:600}
.m__setupval{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.m__setupval--hero{
  font-size:2.45rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-top:8px;
  background:linear-gradient(180deg,#FFFFFF 0%,#C9CFD8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.m--moon .m__setupval--hero{font-size:1.75rem;letter-spacing:-.03em}
.m__note{margin-top:10px;font-size:.76rem;color:rgba(var(--rgb-alu),.8)}
.m__note--push{margin-top:12px}

.m__prev{position:relative;z-index:1;margin-top:24px;font-size:.79rem;font-style:italic;color:rgba(var(--rgb-alu),.85)}
.m__list{position:relative;z-index:1;list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.m__list li{display:flex;gap:10px;font-size:.86rem;color:var(--off-white);font-weight:300;line-height:1.45}
.m__list li::before{
  content:'';flex:0 0 auto;width:15px;height:15px;margin-top:3px;border-radius:50%;
  background-color:var(--m-accent);opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' stroke='%23070A0F' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat
}

/* --- pied de carte : la vision long terme --- */
.m__after{
  position:relative;z-index:1;margin-top:26px;padding:16px 16px 16px 14px;
  display:flex;gap:12px;align-items:flex-start;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(var(--rgb-inv),.05),rgba(var(--rgb-inv),.015));
  border:1px solid rgba(var(--rgb-alu),.1)
}
.m__after-ic{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:700;color:var(--m-accent);
  background:rgba(var(--rgb-inv),.05);border:1px solid rgba(var(--rgb-inv),.09)
}
.m__after p{font-size:.79rem;line-height:1.5;color:rgba(var(--rgb-alu),.92);font-weight:300}
.m__after strong{color:var(--off-white);font-weight:600;display:block;margin-bottom:2px}

.m__cta{position:relative;z-index:1;margin-top:auto;padding-top:22px}
.m__cta .btn{width:100%;justify-content:center}

/* --- balayage de lumière au survol --- */
.m .m__shine{
  position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;overflow:hidden
}
.m .m__shine::after{
  content:'';position:absolute;top:-60%;left:-70%;width:45%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(var(--rgb-inv),.07),transparent);
  transform:rotate(18deg);transition:left .7s cubic-bezier(.25,.8,.3,1)
}
.m:hover .m__shine::after{left:130%}

/* ------------------------------------------------------------
   4. STUDIO REMOTE
   ------------------------------------------------------------ */
.remote{
  margin-top:56px;display:flex;align-items:center;justify-content:center;
  gap:18px;flex-wrap:wrap;text-align:center;
  padding:22px 30px;border-radius:var(--radius);
  background:var(--glass-bg);border:1px solid var(--line-soft);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)
}
.remote__flags{font-size:1.15rem;letter-spacing:.24em}
.remote p{font-size:.9rem;color:var(--aluminium);max-width:640px}
.remote strong{color:var(--off-white);font-weight:600}

/* ------------------------------------------------------------
   5. Accessibilité mouvement
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .m,.m::after,.btn,.btn__arrow,.m__diag{transition:none!important}
  .m:hover{transform:none}
}

/* ------------------------------------------------------------
   6. RÉALISATIONS — coverflow
   Le cylindre 3D d'origine (V2, 6 faces) devient illisible à
   4 cartes : les latérales se retrouvent à 90°, donc de profil.
   On garde l'esprit (profondeur, drag, rotation) avec un
   coverflow : rotation partielle, cartes toujours lisibles.
   ------------------------------------------------------------ */
.cflow{position:relative;margin-top:56px;padding-bottom:46px}
.cflow__stage{
  position:relative;height:520px;perspective:1600px;
  display:flex;align-items:center;justify-content:center;
  cursor:grab;overflow:hidden
}
.cflow__stage:active{cursor:grabbing}
.cflow__track{position:relative;width:340px;height:470px;transform-style:preserve-3d}

.r3card{
  position:absolute;left:0;top:0;width:340px;height:470px;
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  background:linear-gradient(180deg,rgba(var(--rgb-inv),.07),rgba(var(--rgb-inv),.02));
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 22px 60px rgba(0,0,0,.5);
  transition:transform .55s cubic-bezier(.25,.8,.3,1),opacity .55s ease,filter .55s ease,border-color .3s ease;
  will-change:transform
}
.r3card.is-front{border-color:rgba(37,99,235,.4)}
.r3card.is-front:hover{border-color:rgba(37,99,235,.7)}
.r3card__photo{height:56%;overflow:hidden;background:var(--space-blue);position:relative;flex:0 0 auto}
.r3card__photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,10,15,.85) 100%)}
.r3card__photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.r3card__info{padding:20px 22px 22px;display:flex;flex-direction:column;gap:7px;flex:1;border-top:1px solid var(--line-soft)}
.r3card__type{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--atlas-blue-lite)}
.r3card__name{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.r3card__scope{font-size:.79rem;font-weight:300;line-height:1.5;color:var(--aluminium)}
.r3card__link{margin-top:auto;font-size:.79rem;font-weight:600;color:var(--off-white);display:inline-flex;align-items:center;gap:7px}

.cflow__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:40;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(12,18,30,.8);border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  color:var(--off-white);font-size:1.6rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,border-color .2s ease,color .2s ease
}
.cflow__nav:hover{border-color:rgba(37,99,235,.5);color:var(--atlas-blue-lite);transform:translateY(-50%) scale(1.08)}
.cflow__prev{left:8px}.cflow__next{right:8px}
.cflow__hint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:.78rem;color:rgba(var(--rgb-alu),.7)}
.rea-more{margin-top:34px;display:flex;justify-content:center}

@media(max-width:899px){
  .cflow__stage{height:430px;perspective:1200px}
  .cflow__track{width:250px;height:390px}
  .r3card{width:250px;height:390px;border-radius:var(--radius)}
  .r3card__photo{height:52%}
  .r3card__name{font-size:1.02rem}
  .r3card__scope{font-size:.73rem}
  .cflow__nav{width:40px;height:40px;font-size:1.3rem}
  .cflow__prev{left:-4px}.cflow__next{right:-4px}
}

/* ============================================================
   8. ATLAS COCKPIT — arbre d'agents + colonne de lecture
   Le visuel signature. Construit en HTML/CSS/SVG : léger,
   animable, responsive, modifiable sans repasser par un designer.
   ============================================================ */
.cpk{display:grid;gap:48px;grid-template-columns:1fr;align-items:center}
@media(min-width:1024px){.cpk{grid-template-columns:1.08fr .92fr;gap:64px}}

/* ---------- l'arbre ---------- */
.tree{
  position:relative;width:100%;aspect-ratio:600/520;
  border-radius:var(--radius-lg);overflow:hidden;
  background:
    radial-gradient(680px 420px at 50% 8%,rgba(37,99,235,.16),transparent 62%),
    linear-gradient(180deg,rgba(var(--rgb-inv),.045),rgba(var(--rgb-inv),.012));
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 26px 70px rgba(0,0,0,.45)
}
.tree__links{position:absolute;inset:0;width:100%;height:100%}
.lnk{
  fill:none;stroke:rgba(var(--rgb-alu),.28);stroke-width:1.4;
  stroke-dasharray:5 7;
  animation:flow 3.4s linear infinite;
  transition:stroke .4s ease,opacity .4s ease
}
@keyframes flow{to{stroke-dashoffset:-48}}
/* branche mise en avant */
.tree[data-focus="core"] .lnk--core,
.tree[data-focus="pro"] .lnk--pro,
.tree[data-focus="pro"] .lnk--core,
.tree[data-focus="perso"] .lnk--perso,
.tree[data-focus="perso"] .lnk--core,
.tree[data-focus="all"] .lnk{stroke:var(--atlas-blue);opacity:1}
.tree[data-focus="pro"] .lnk--perso,
.tree[data-focus="perso"] .lnk--pro,
.tree[data-focus="core"] .lnk--pro,
.tree[data-focus="core"] .lnk--perso{opacity:.22}

/* ---------- les nœuds ---------- */
.node{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  display:flex;align-items:center;gap:9px;
  padding:9px 14px 9px 9px;border-radius:14px;white-space:nowrap;
  background:rgba(12,18,30,.82);
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 10px 26px rgba(0,0,0,.42);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,opacity .35s,box-shadow .35s
}
.node__ic{
  width:30px;height:30px;flex:0 0 auto;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
  background:rgba(var(--rgb-inv),.06);border:1px solid rgba(var(--rgb-inv),.09)
}
.node__txt{display:flex;flex-direction:column;line-height:1.25}
.node__txt b{font-size:.79rem;font-weight:700;letter-spacing:-.01em;color:var(--off-white)}
.node__txt i{font-size:.66rem;font-style:normal;color:var(--aluminium);font-weight:300}

.node--root{
  padding:12px 20px 12px 12px;border-color:rgba(37,99,235,.45);
  box-shadow:0 14px 40px rgba(37,99,235,.3)
}
.node--root .node__ic{width:36px;height:36px;font-size:1.1rem;background:rgba(37,99,235,.18);border-color:rgba(37,99,235,.4)}
.node--root .node__txt b{font-size:.9rem}
.node--branch .node__ic{background:rgba(var(--rgb-inv),.07)}
.node--leaf{padding:7px 12px 7px 7px}
.node--leaf .node__ic{width:26px;height:26px;font-size:.85rem}
.node--leaf .node__txt b{font-size:.72rem}

/* mise en avant selon le bloc actif */
.tree[data-focus="pro"] .node[data-branch="perso"],
.tree[data-focus="perso"] .node[data-branch="pro"],
.tree[data-focus="core"] .node:not([data-branch="core"]){opacity:.3}
.tree[data-focus="core"] .node--root,
.tree[data-focus="pro"] .node--pro,
.tree[data-focus="perso"] .node--perso{
  border-color:rgba(37,99,235,.55);box-shadow:0 14px 40px rgba(37,99,235,.28);transform:translate(-50%,-50%) scale(1.05)
}
.tree__cap{margin-top:16px;font-size:.78rem;color:rgba(var(--rgb-alu),.72);font-style:italic;text-align:center}

/* ---------- colonne de lecture ---------- */
.cpk__steps{display:flex;flex-direction:column;gap:12px}
.cstep{
  display:flex;gap:16px;align-items:flex-start;text-align:left;
  padding:20px 22px;border-radius:var(--radius);cursor:pointer;
  background:transparent;border:1px solid transparent;
  font-family:inherit;color:inherit;
  transition:background .3s ease,border-color .3s ease,transform .3s ease
}
.cstep:hover{background:rgba(var(--rgb-inv),.03);border-color:var(--line-soft)}
.cstep.is-active{
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(var(--rgb-inv),.02));
  border-color:rgba(37,99,235,.32)
}
.cstep__k{
  flex:0 0 auto;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  color:var(--aluminium);opacity:.55;padding-top:3px;transition:color .3s,opacity .3s
}
.cstep.is-active .cstep__k{color:var(--atlas-blue);opacity:1}
.cstep__b{display:flex;flex-direction:column;gap:6px}
.cstep__b strong{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;color:var(--off-white)}
.cstep__b span{font-size:.88rem;font-weight:300;line-height:1.55;color:var(--aluminium)}
.cpk__cta{margin-top:22px;padding-top:26px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cpk__cta-sub{font-size:.82rem;color:rgba(var(--rgb-alu),.8);font-weight:300}

@media(max-width:1023px){
  .tree{aspect-ratio:600/560}
  .node__txt i{display:none}
  .node{padding:7px 11px 7px 7px}
  .node__ic{width:26px;height:26px;font-size:.82rem}
  .node__txt b{font-size:.7rem}
  .node--root .node__ic{width:30px;height:30px}
  .node--root .node__txt b{font-size:.78rem}
  .cpk__cta{align-items:stretch}
  .cpk__cta .btn{justify-content:center}
}
@media(max-width:560px){
  .node--leaf .node__txt{display:none}
  .node--leaf{padding:7px}
}
@media (prefers-reduced-motion:reduce){
  .lnk{animation:none}
  .node,.cstep{transition:none}
}

/* ============================================================
   9. AUDIT GRATUIT — page de résultat
   ============================================================ */
.audit-page{padding-top:0}
.ares{padding:140px 0 var(--section-pad);position:relative;min-height:70vh}
.ares::before{
  content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:900px;height:520px;pointer-events:none;
  background:radial-gradient(circle,rgba(37,99,235,.2),transparent 65%);filter:blur(90px)
}
.ares__head{position:relative;text-align:center;max-width:820px;margin:0 auto 56px}
.ares__title{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-top:14px}
.ares__title em{font-style:italic;font-weight:400;color:var(--atlas-blue)}
.ares__lead{margin-top:18px;color:var(--aluminium);font-weight:300}

/* --- score global --- */
.ascore{
  position:relative;display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;
  max-width:760px;margin:0 auto 56px;padding:28px 32px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(var(--rgb-inv),.055),rgba(var(--rgb-inv),.015));
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)
}
.ascore__ring{
  --p:0;flex:0 0 auto;width:112px;height:112px;border-radius:50%;
  display:flex;align-items:baseline;justify-content:center;gap:2px;
  background:conic-gradient(var(--ring,#2563EB) calc(var(--p)*1%),rgba(var(--rgb-alu),.12) 0);
  position:relative
}
.ascore__ring::after{content:'';position:absolute;inset:7px;border-radius:50%;background:#0A0E16}
.ascore__ring.is-good{--ring:#34D399}.ascore__ring.is-warn{--ring:#FBBF24}.ascore__ring.is-bad{--ring:#F87171}
.ascore__val{position:relative;z-index:1;font-size:2.1rem;font-weight:800;letter-spacing:-.04em;padding-top:34px}
.ascore__unit{position:relative;z-index:1;font-size:.8rem;color:var(--aluminium);padding-top:52px}
.ascore__txt{flex:1;min-width:240px}
.ascore__txt strong{display:block;font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.ascore__txt p{font-size:.9rem;color:var(--aluminium);font-weight:300;line-height:1.55}

/* --- cartes agents --- */
.agrid{position:relative;display:grid;gap:18px;grid-template-columns:1fr;max-width:1100px;margin:0 auto}
@media(min-width:700px){.agrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.agrid{grid-template-columns:repeat(3,1fr)}}

.acard{
  padding:24px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(var(--rgb-inv),.05),rgba(var(--rgb-inv),.015));
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  animation:acIn .5s cubic-bezier(.2,.7,.3,1) backwards
}
@keyframes acIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.acard.is-good{border-color:rgba(52,211,153,.28)}
.acard.is-warn{border-color:rgba(251,191,36,.28)}
.acard.is-bad{border-color:rgba(248,113,113,.3)}
.acard__top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.acard__ic{
  width:40px;height:40px;flex:0 0 auto;border-radius:12px;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--rgb-inv),.06);border:1px solid rgba(var(--rgb-inv),.09)
}
.acard__id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.acard__id strong{font-size:.98rem;font-weight:700;letter-spacing:-.02em}
.acard__id span{font-size:.73rem;color:var(--aluminium);font-weight:300}
.acard__score{flex:0 0 auto;display:flex;align-items:baseline;gap:1px}
.acard__score b{font-size:1.4rem;font-weight:800;letter-spacing:-.03em}
.acard__score i{font-size:.7rem;font-style:normal;color:var(--aluminium)}
.acard.is-good .acard__score b{color:#34D399}
.acard.is-warn .acard__score b{color:#FBBF24}
.acard.is-bad  .acard__score b{color:#F87171}

.acard__list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.acard__list li{position:relative;padding-left:26px;font-size:.84rem;font-weight:300;line-height:1.5;color:var(--off-white)}
.acard__list li::before{
  position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800
}
.acard__list li.ok::before{content:'✓';background:rgba(52,211,153,.16);color:#34D399}
.acard__list li.ko::before{content:'!';background:rgba(248,113,113,.16);color:#F87171}
.acard__list li.ko{color:var(--aluminium)}
/* .info : une limite de NOTRE outil (quota PageSpeed epuise, par exemple),
   pas un defaut du site audite. Ni vert ni rouge : un « i » neutre, sinon on
   fait passer notre panne pour un reproche adresse au visiteur. */
.acard__list li.info::before{content:'i';background:rgba(var(--rgb-alu),.16);color:var(--aluminium)}
.acard__list li.info{color:var(--aluminium);font-style:italic}

/* squelette de chargement */
.acard__spin{
  display:block;width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(var(--rgb-alu),.2);border-top-color:var(--atlas-blue);
  animation:aspin .8s linear infinite
}
@keyframes aspin{to{transform:rotate(360deg)}}
.acard__skel{padding-left:0!important;height:11px;border-radius:5px;
  background:linear-gradient(90deg,rgba(var(--rgb-inv),.05),rgba(var(--rgb-inv),.1),rgba(var(--rgb-inv),.05));
  background-size:200% 100%;animation:askel 1.3s ease-in-out infinite}
.acard__skel::before{display:none!important}
.acard__skel:nth-child(2){width:82%}.acard__skel:nth-child(3){width:64%}
@keyframes askel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* erreur */
.aerr{max-width:560px;margin:0 auto;text-align:center;padding:40px 28px;
  border-radius:var(--radius);background:var(--glass-bg);border:1px solid var(--line-soft)}
.aerr p{color:var(--aluminium);margin-bottom:22px}

/* --- la suite --- */
.anext{margin-top:72px}
.anext__card{
  max-width:760px;margin:0 auto;padding:44px 40px;text-align:center;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(37,99,235,.12),rgba(var(--rgb-inv),.02));
  border:1px solid rgba(37,99,235,.24);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)
}
.anext__card h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:12px auto 0;max-width:22ch}
.anext__lead{margin:18px auto 30px;max-width:560px;color:var(--aluminium);font-weight:300;font-size:.95rem;line-height:1.6}
.anext__lead strong{color:var(--off-white);font-weight:600}
.anext__form{display:flex;flex-direction:column;gap:14px;align-items:center;max-width:480px;margin:0 auto}
.anext__row{display:flex;gap:12px;width:100%;flex-wrap:wrap}
.anext__row input{
  flex:1;min-width:180px;padding:14px 18px;border-radius:var(--radius-pill);
  background:rgba(var(--rgb-inv),.055);border:1px solid rgba(var(--rgb-alu),.18);
  color:var(--off-white);font-family:inherit;font-size:.95rem;outline:0;
  transition:border-color .25s,background .25s
}
.anext__row input:focus{border-color:rgba(37,99,235,.55);background:rgba(var(--rgb-inv),.08)}
.anext__row input::placeholder{color:rgba(var(--rgb-alu),.6)}
.anext__form .btn{width:100%;justify-content:center}
.anext__legal{font-size:.75rem;color:rgba(var(--rgb-alu),.65)}
.anext__ok{padding:20px;border-radius:var(--radius);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3)}
.anext__or{display:flex;align-items:center;gap:14px;margin:30px auto;max-width:340px;color:rgba(var(--rgb-alu),.5);font-size:.78rem}
.anext__or::before,.anext__or::after{content:'';flex:1;height:1px;background:var(--line-soft)}
.anext__sub{margin-top:14px;font-size:.82rem;color:rgba(var(--rgb-alu),.75);font-weight:300}
@media(max-width:600px){.anext__card{padding:32px 22px}}

/* ============================================================
   10. LE JOURNAL
   ============================================================ */
.jrn{padding:150px 0 var(--section-pad);position:relative}
.jrn::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:860px;height:460px;pointer-events:none;
  background:radial-gradient(circle,rgba(37,99,235,.16),transparent 65%);filter:blur(90px)}
.jrn__head{position:relative;max-width:760px;margin:0 auto 44px;text-align:center}
.jrn__head h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-top:14px}
.jrn__head h1 em{font-style:italic;font-weight:400;color:var(--atlas-blue)}
.jrn__lead{margin-top:20px;color:var(--aluminium);font-weight:300;line-height:1.65}

.jrn__cats{position:relative;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:48px}
.jcat{
  padding:9px 18px;border-radius:var(--radius-pill);cursor:pointer;
  font-family:inherit;font-size:.83rem;font-weight:500;
  background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--aluminium);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:background .25s,border-color .25s,color .25s
}
.jcat:hover{color:var(--off-white);border-color:rgba(var(--rgb-alu),.25)}
.jcat.is-active{background:rgba(37,99,235,.16);border-color:rgba(37,99,235,.45);color:var(--off-white)}

.jrn__grid{position:relative;display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:700px){.jrn__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.jrn__grid{grid-template-columns:repeat(3,1fr)}}

.jpost{position:relative}
.jpost__link{
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--rgb-inv),.05),rgba(var(--rgb-inv),.015));
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .35s
}
.jpost__link:hover{transform:translateY(-5px);border-color:rgba(37,99,235,.4);box-shadow:0 22px 54px rgba(0,0,0,.42)}
.jpost__img{aspect-ratio:16/9;overflow:hidden;background:var(--space-blue)}
.jpost__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.jpost__link:hover .jpost__img img{transform:scale(1.04)}
.jpost__body{padding:22px;display:flex;flex-direction:column;gap:9px;flex:1}
.jpost__cat{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--atlas-blue-lite)}
.jpost__title{font-size:1.12rem;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.jpost__excerpt{font-size:.86rem;font-weight:300;line-height:1.55;color:var(--aluminium)}
.jpost__meta{margin-top:auto;padding-top:12px;font-size:.74rem;color:rgba(var(--rgb-alu),.7)}

/* état vide */
.jempty{
  position:relative;max-width:620px;margin:0 auto;text-align:center;
  padding:56px 40px;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(37,99,235,.1),rgba(var(--rgb-inv),.02));
  border:1px solid rgba(37,99,235,.2);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)
}
.jempty__ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:18px;font-size:1.5rem;margin-bottom:22px;
  background:rgba(var(--rgb-inv),.06);border:1px solid rgba(var(--rgb-inv),.1);
  background-image:none;color:var(--atlas-blue-lite)
}
/* Visuel de l'etat vide (14/08) — remplace la pastille ✎.
   L'image est un portrait (1122x1402) : on la borne en LARGEUR, pas en hauteur,
   et height:auto garde le ratio. Les attributs width/height du HTML ne servent
   qu'a reserver la place au chargement, sinon le texte sauterait sous elle. */
.jempty__visuel{
  display:block;margin:0 auto 26px;
  width:min(260px,62%);height:auto;
  border-radius:14px;
  border:1px solid rgba(var(--rgb-inv),.12);
  box-shadow:0 18px 44px rgba(0,0,0,.5)
}
.jempty h2{font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.03em}
.jempty p{margin-top:16px;color:var(--aluminium);font-weight:300;font-size:.93rem;line-height:1.65}
.jempty__form{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap;justify-content:center}
.jempty__form input{
  flex:1;min-width:220px;padding:13px 20px;border-radius:var(--radius-pill);
  background:rgba(var(--rgb-inv),.055);border:1px solid rgba(var(--rgb-alu),.18);
  color:var(--off-white);font-family:inherit;font-size:.93rem;outline:0;
  transition:border-color .25s,background .25s
}
.jempty__form input:focus{border-color:rgba(37,99,235,.55);background:rgba(var(--rgb-inv),.08)}
.jempty__form input::placeholder{color:rgba(var(--rgb-alu),.6)}
.jempty__legal{margin-top:14px;font-size:.76rem;color:rgba(var(--rgb-alu),.6)}
.jempty__ok{margin-top:20px;padding:16px;border-radius:var(--radius-sm);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);font-size:.9rem}

.jrn__cta{margin-top:80px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.jrn__cta p{color:var(--aluminium);font-weight:300}
@media(max-width:600px){.jempty{padding:40px 24px}}

/* ============================================================
   11. VISUELS — fond du hero + fond de la section Cockpit
   Animations très légères : le mouvement doit se sentir, pas se voir.
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block;
  transform:scale(1.06);
  animation:heroDrift 26s ease-in-out infinite alternate;
  will-change:transform
}
/* zoom lent du fond mobile : le mouvement doit se sentir, pas se voir */
@keyframes heroZoomXP{
  from{transform:scale(1)}
  to  {transform:scale(1.05)}
}
@keyframes heroZoom{
  from{transform:scale(1.02)}
  to  {transform:scale(1.14)}
}
@keyframes heroDrift{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to  {transform:scale(1.11) translate3d(0,-1.6%,0)}
}
/* voile : le texte doit rester lisible quoi qu'il arrive */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(760px 520px at 50% 42%,rgba(7,10,15,.42),transparent 72%),
    linear-gradient(180deg,rgba(7,10,15,.9) 0%,rgba(7,10,15,.62) 26%,rgba(7,10,15,.72) 62%,rgba(7,10,15,.97) 100%)
}
.hero__content,.hero .container{position:relative;z-index:2}
.hero__glow--blue{z-index:1;opacity:.5}
.hero__cta-mobile{display:none}
@media(max-width:760px){
  /* ═══ HERO MOBILE — le bureau Atlas devient l'interface ═══
     Le visuel fait 853x1844, soit un ratio de 0.4626. Un iPhone 375x812 est a
     0.4618 : en calant le hero sur la hauteur de l'ecran, l'image tient donc
     entiere, sans rognage, et ses icones restent exactement a leur place.
     Positions mesurees sur le fichier : icone Cockpit centree a 33.6 % de la
     largeur, icone Missions Web a 66.5 %, toutes deux entre 75.8 % et 86.1 %
     de la hauteur. Les deux boutons du hero viennent s'y poser : ils gardent
     leur libelle pour les lecteurs d'ecran, mais c'est l'image qui l'affiche.
     Ils sont inverses au passage — dans le HTML Missions precede Cockpit,
     alors que sur le bureau Cockpit est a gauche. */
  .hero{height:100svh;min-height:0;padding:0;overflow:hidden}
  /* Le fond s'arrete 0,8 % avant le bas du hero. Les paliers precedents
     laissaient une bande noire sous la barre des taches : 52 px a 7 %, 22 px
     a 3 %. A 0,8 % il reste 6 px, juste de quoi eviter que la barre touche le
     bord.
     Les reperes du bureau ne dependent pas de cette valeur : ils sont
     recalcules en JS a partir des dimensions reelles de l'image. */
  .hero__bg{bottom:0.8%}
  .hero__bg img{
    object-fit:cover;object-position:center bottom;opacity:.92;
    /* Pas de zoom ici : les icones du bureau servent de boutons. L'image qui
       s'agrandit deplace les icones alors que les zones cliquables, elles, ne
       bougent pas — mesure a l'appui, 150px de decalage avec un scale 1.05.
       L'alignement passe avant l'effet. */
    animation:none;transform:none
  }
  /* Le Bliss en plein jour est lumineux : 173 de luminance sous le champ
     d'audit, soit 2,24:1 pour du texte blanc — illisible. Le voile est donc
     degressif : fort la ou vit le texte, presque nul sur les icones et la
     barre des taches, qui sont deja sombres. Contrastes obtenus : 12,05:1 sur
     le titre, 11,19:1 sur le sous-titre, 7,04:1 sur le champ d'audit. */
  .hero__veil{background:linear-gradient(180deg,
    rgba(7,10,15,.64) 0%,
    rgba(7,10,15,.60) 40%,
    rgba(7,10,15,.48) 62%,
    rgba(7,10,15,.14) 74%,
    rgba(7,10,15,.12) 88%,
    rgba(7,10,15,.12) 100%)}
  .hero__figure{display:none}

  /* specificite renforcee : .container.hero__content.hero__content--left
     imposait position:relative et une hauteur de 570px, ce qui faussait tous
     les pourcentages des boutons. */
  .hero .container.hero__content.hero__content--left{
    position:absolute;inset:0;z-index:2;height:100%;max-width:none;
    display:block;padding:clamp(96px,13svh,124px) 20px 0;text-align:center
  }
  .hero__badge{margin-bottom:clamp(8px,1.4svh,14px)}
  .hero__content h1{font-size:clamp(1.7rem,7.8vw,2.35rem);line-height:1.05;margin-bottom:clamp(8px,1.3svh,12px)}
  .hero__sub{font-size:clamp(.82rem,2svh,.9rem);line-height:1.5;margin-bottom:clamp(10px,1.6svh,16px)}
  .hero__domains{display:none}
  .audit{margin:0 auto;max-width:340px}
  /* la mention "Vitesse, SEO, visibilite dans les IA" est masquee sur telephone :
     elle prenait 36px pile entre le champ d'audit et le CTA, qui se
     chevauchaient de 42px. L'information reste sur grand ecran. */
  .audit__hint{display:none}

  /* les deux icones du bureau, rendues cliquables */
  .hero__buttons{
    position:absolute;left:0;right:0;top:0;height:100%;
    display:block;margin:0;padding:0;gap:0;pointer-events:none
  }
  .hero__buttons > *{pointer-events:auto}

  /* le CTA unique, cale juste au-dessus des icones du bureau.
     Selecteur renforce : il porte aussi la classe .btn, donc la regle des
     zones tactiles ci-dessous le prenait et l'etirait sur toute la hauteur. */
  /* CTA en verre depoli : la matiere vient du fond, pas d'un aplat.
     Pose a 68,5 %, juste au-dessus des icones qui commencent a 74,6 %. */
  .hero__buttons a.hero__cta-mobile{
    display:inline-flex;align-items:center;justify-content:center;
    position:absolute;top:61.5%;left:50%;
    transform:translateX(-50%);white-space:nowrap;
    width:auto;height:auto;padding:15px 34px;font-size:.95rem;font-weight:600;
    color:var(--ink-hi);letter-spacing:.01em;
    background:rgba(var(--rgb-inv),.14);
    border:1px solid rgba(var(--rgb-inv),.34);
    border-radius:var(--radius-pill);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 8px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(var(--rgb-inv),.45);
    transition:background .25s ease,transform .2s ease
  }
  .hero__buttons a.hero__cta-mobile:active{background:rgba(var(--rgb-inv),.24);transform:translateX(-50%) scale(.97)}
  .hero__buttons a.hero__cta-mobile span{opacity:1}
  .hero__buttons .btn{
    position:absolute;top:0;height:100%;padding:0;min-width:0;
    background:none;border:0;box-shadow:none;backdrop-filter:none;
    border-radius:10px;transition:background .2s ease
  }
  .hero__buttons .btn:active{background:rgba(37,99,235,.22)}
  .hero__buttons .btn span{opacity:0}        /* le libelle est dans l'image */
  /* les deux icones du bureau, en zones tactiles */
  .hero__buttons .btn:nth-of-type(1){top:69.4%;height:9.5%;left:55.9%;width:20.9%}  /* Missions Web */
  .hero__buttons .btn:nth-of-type(2){top:69.4%;height:9.5%;left:21.9%;width:23.1%}  /* Cockpit */

  /* les avis passent SOUS les icones : sur la version precedente ils
     tombaient pile sur ATLAS COCKPIT et MISSIONS WEB. */
  .hero__social-proof{
    display:flex;position:absolute;left:0;right:0;top:80.5%;
    flex-direction:column;align-items:center;gap:6px;margin:0;padding:0 18px
  }
  .hero__avatars img{width:26px;height:26px}
  .hero__social-text{font-size:.7rem;line-height:1.3;text-align:center}
}

/* ═══ Ecrans courts (iPhone SE, 8, mini) ═══
   Le CTA est desormais colle aux icones du bureau, dont la position depend du
   rognage de l'image : sur un viewport court, il remonte et percute le champ
   d'audit — 87px de chevauchement mesures a 430x745.
   Le seuil est a 830px parce que Safari sur iPhone renvoie un svh de 650 a
   800px selon l'appareil et l'etat des barres : c'est la hauteur reelle du
   hero, pas celle de l'ecran. */
@media (max-width:760px) and (max-height:830px){
  .hero .container.hero__content.hero__content--left{padding-top:88px}
  .hero__badge{margin-bottom:6px;transform:scale(.9)}
  .hero__content h1{font-size:1.5rem;margin-bottom:6px}
  .hero__sub{font-size:.78rem;line-height:1.42;margin-bottom:8px}
  .audit__label{font-size:.62rem;letter-spacing:.14em;margin-bottom:8px}
  .audit__box{padding:5px 5px 5px 14px}
  .audit__box input{font-size:.85rem;padding:9px 0}
  .audit__btn{padding:10px 16px;font-size:.8rem}
  .hero__buttons a.hero__cta-mobile{padding:12px 26px;font-size:.86rem}
  .hero__avatars img{width:22px;height:22px}
  .hero__social-text{font-size:.64rem}
}

/* --- fond de la section Cockpit : le carnet, en texture --- */
/* `hidden` ferait de cette section un conteneur de defilement : le schema
   qu'elle contient calerait son animation sur elle au lieu de la fenetre.
   `clip` coupe pareil sans creer ce conteneur. */
.cockpit{position:relative;overflow:hidden;overflow:clip}
.cockpit__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cockpit__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 62%;
  opacity:.13;filter:grayscale(.35) contrast(1.05);
  transform:scale(1.04);
  animation:cpkDrift 34s ease-in-out infinite alternate
}
@keyframes cpkDrift{from{transform:scale(1.04)}to{transform:scale(1.09)}}
.cockpit__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--obsidian) 0%,rgba(7,10,15,.72) 34%,rgba(7,10,15,.8) 66%,var(--obsidian) 100%)
}
.cockpit .container{position:relative;z-index:1}

/* --- fluidité générale : le reveal devient plus doux --- */
.reveal{transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}

@media (prefers-reduced-motion:reduce){
  .hero__bg img,.cockpit__bg img{animation:none}
}

/* --- promesse du hero : les mots marquants, comme le "demain" du H1 --- */
.hero__sub em{
  font-style:italic;font-weight:400;color:var(--atlas-blue);
  position:relative;white-space:nowrap
}
.hero__sub em::after{
  content:'';position:absolute;left:2%;right:2%;bottom:-2px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.55),transparent);
  transform:scaleX(0);transform-origin:center;
  animation:emLine 1s cubic-bezier(.22,.7,.3,1) forwards
}
.hero__sub em:nth-of-type(1)::after{animation-delay:.7s}
.hero__sub em:nth-of-type(2)::after{animation-delay:1.15s}
@keyframes emLine{to{transform:scaleX(1)}}
.hero__sub{font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.65;max-width:680px}
@media (prefers-reduced-motion:reduce){.hero__sub em::after{animation:none;transform:scaleX(1)}}

/* ============================================================
   12. PAGE COCKPIT — galaxie d'agents, rituels, value stacking
   ============================================================ */
.cpk-hero{min-height:88vh}
.cpk-hero .hero__bg img{opacity:.45;filter:grayscale(.2)}
/* Logo Cockpit — page Cockpit uniquement (backlog item 7, 14/08).
   Le fichier source n'a AUCUNE transparence : c'est une image pleine, fond sombre
   a halo lumineux. Poser tel quel dessinait un rectangle flottant sur le hero.
   mask-image fond les bords vers le transparent : le halo se diffuse dans
   l'obsidian au lieu de s'arreter net. Les deux masques sont necessaires —
   le radial adoucit les coins, le lineaire empeche une arete en bas.
   height:auto obligatoire : les width/height du HTML ne servent qu'a reserver
   la place au chargement (anti-CLS), sans ca l'image serait etiree. */
/* Le logo Cockpit est monte dans le header le 14/08 (il cassait le hero).
   Il remplace le logo officiel, PAGE COCKPIT UNIQUEMENT — d'ou le prefixe
   body.page-cockpit, qui garantit qu'aucune autre page n'est touchee.
   Traite en pastille : le fichier n'a pas de transparence (fond opaque a
   halo), un detourage en mask-image bavait en tache grise sur fond clair.
   La pastille est deja sa forme sur les reseaux, et elle tient sur tout fond. */
body.page-cockpit .logo__icon img{
  border-radius:26%;
  border:1px solid rgba(var(--rgb-inv),.16);
  box-shadow:0 2px 8px rgba(0,0,0,.5)
}
.cpk-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px}
.cpk-proof span{
  font-size:.8rem;color:var(--aluminium);padding:8px 16px;border-radius:var(--radius-pill);
  background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur)
}
.cpk-proof strong{color:var(--off-white);font-weight:700}

/* --- la galaxie --- */
.galaxy{
  position:relative;width:100%;aspect-ratio:900/620;margin:0 auto;max-width:960px;
  border-radius:var(--radius-lg);overflow:hidden;
  background:
    radial-gradient(600px 380px at 50% 50%,rgba(37,99,235,.2),transparent 66%),
    radial-gradient(900px 520px at 20% 88%,rgba(29,78,216,.14),transparent 70%),
    linear-gradient(180deg,#080C14,#05070C);
  border:1px solid var(--glass-border);box-shadow:0 30px 80px rgba(0,0,0,.5)
}
.galaxy__stars{
  position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 78% 22%,#cfe0ff,transparent),
    radial-gradient(1px 1px at 34% 76%,#fff,transparent),radial-gradient(1px 1px at 62% 62%,#bcd4ff,transparent),
    radial-gradient(1px 1px at 88% 74%,#fff,transparent),radial-gradient(1px 1px at 24% 44%,#dbe7ff,transparent),
    radial-gradient(1px 1px at 52% 12%,#fff,transparent),radial-gradient(1px 1px at 8% 62%,#cfe0ff,transparent);
  animation:twinkle 5.5s ease-in-out infinite alternate
}
@keyframes twinkle{from{opacity:.32}to{opacity:.62}}
.galaxy__links{position:absolute;inset:0;width:100%;height:100%}
.gl{fill:none;stroke:rgba(var(--rgb-alu),.16);stroke-width:1.3;stroke-dasharray:4 8;
  animation:flowG 4s linear infinite;transition:stroke .45s ease,opacity .45s ease,stroke-width .45s}
@keyframes flowG{to{stroke-dashoffset:-48}}
.galaxy[data-loop="all"] .gl{stroke:rgba(37,99,235,.4)}
.galaxy[data-loop="money"] .gl--money,.galaxy[data-loop="client"] .gl--client,
.galaxy[data-loop="human"] .gl--human,.galaxy[data-loop="body"]  .gl--body{
  stroke:var(--atlas-blue);stroke-width:2;opacity:1;filter:drop-shadow(0 0 6px rgba(37,99,235,.7))}
.galaxy:not([data-loop="all"]) .gl{opacity:.12}
.galaxy:not([data-loop="all"]) .gl--money,.galaxy:not([data-loop="all"]) .gl--client,
.galaxy:not([data-loop="all"]) .gl--human,.galaxy:not([data-loop="all"]) .gl--body{opacity:.12}
.galaxy[data-loop="money"] .gl--money,.galaxy[data-loop="client"] .gl--client,
.galaxy[data-loop="human"] .gl--human,.galaxy[data-loop="body"] .gl--body{opacity:1}

.gnode{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 14px;border-radius:14px;white-space:nowrap;
  background:rgba(10,16,26,.86);border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,opacity .4s,box-shadow .4s
}
.gnode__ic{font-size:1.15rem;line-height:1}
.gnode b{font-size:.74rem;font-weight:700;color:var(--off-white)}
.gnode i{font-size:.62rem;font-style:normal;color:var(--aluminium);font-weight:300}
.gnode--core{padding:14px 20px;border-color:rgba(37,99,235,.5);box-shadow:0 16px 44px rgba(37,99,235,.34)}
.gnode--core .gnode__ic{font-size:1.5rem}
.gnode--core b{font-size:.88rem}
.galaxy:not([data-loop="all"]) .gnode{opacity:.26}
.galaxy[data-loop="money"] .gnode[data-loop="money"],.galaxy[data-loop="client"] .gnode[data-loop="client"],
.galaxy[data-loop="human"] .gnode[data-loop="human"],.galaxy[data-loop="body"]  .gnode[data-loop="body"],
.galaxy:not([data-loop="all"]) .gnode--core{
  opacity:1;border-color:rgba(37,99,235,.6);transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 16px 44px rgba(37,99,235,.32)}

/* --- les boucles --- */
.loops{margin-top:44px}
.loops__intro{text-align:center;max-width:640px;margin:0 auto 28px;color:var(--aluminium);font-weight:300;line-height:1.6}
.loops__intro strong{color:var(--off-white);font-weight:700}
.loops__grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.loops__grid{grid-template-columns:repeat(2,1fr)}}
.loop{
  display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;
  padding:22px;border-radius:var(--radius);font-family:inherit;color:inherit;
  background:rgba(var(--rgb-inv),.025);border:1px solid var(--line-soft);
  transition:background .3s,border-color .3s,transform .3s
}
.loop:hover,.loop.is-active{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.35);transform:translateY(-2px)}
.loop__dot{width:8px;height:8px;border-radius:50%;background:var(--atlas-blue);box-shadow:0 0 10px var(--atlas-blue)}
.loop strong{font-size:.98rem;font-weight:700;letter-spacing:-.02em}
.loop span:not(.loop__dot){font-size:.85rem;font-weight:300;line-height:1.55;color:var(--aluminium)}
.loops__note{margin-top:24px;text-align:center;font-size:.83rem;font-style:italic;color:rgba(var(--rgb-alu),.8)}

/* --- la mémoire --- */
.mem{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.mem__bubble{padding:18px 22px;border-radius:var(--radius);font-size:.93rem;line-height:1.6}
.mem__bubble--you{align-self:flex-end;max-width:82%;background:rgba(var(--rgb-inv),.06);border:1px solid var(--glass-border);border-bottom-right-radius:6px}
.mem__bubble--bot{align-self:flex-start;max-width:92%;background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(var(--rgb-inv),.02));border:1px solid rgba(37,99,235,.3);border-bottom-left-radius:6px;color:var(--off-white)}
.mem__out{margin-top:18px;text-align:center;font-weight:600;color:var(--off-white)}

/* --- rituels --- */
.rit{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.rit{grid-template-columns:repeat(2,1fr)}.rit__card--wide{grid-column:1/-1}}
.rit__card{padding:28px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(var(--rgb-inv),.05),rgba(var(--rgb-inv),.015));border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur)}
.rit__cmd{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.06em;padding:7px 14px;border-radius:var(--radius-pill);background:rgba(37,99,235,.14);border:1px solid rgba(37,99,235,.3);color:#9CC0FF;margin-bottom:16px}
.rit__card h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:10px}
.rit__card p{font-size:.9rem;font-weight:300;line-height:1.6;color:var(--aluminium)}

/* --- value stacking --- */
.stack{list-style:none;padding:0;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.stack li{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--radius-sm);background:rgba(var(--rgb-inv),.03);border:1px solid var(--line-soft)}
.stack__ic{font-size:1.15rem;flex:0 0 auto}
.stack__what{flex:1;font-size:.92rem;font-weight:300;color:var(--off-white)}
.stack__price{font-size:.92rem;font-weight:700;color:var(--aluminium);white-space:nowrap}
.stack__price i{font-style:normal;font-weight:400;font-size:.78rem;opacity:.7}
.stack__out{max-width:620px;margin:26px auto 0;text-align:center;color:var(--off-white);font-weight:500;line-height:1.65}

.cpk-plans{margin-top:8px}
@media(min-width:1180px){.cpk-plans{grid-template-columns:repeat(3,1fr);max-width:1080px;margin-inline:auto}}
.cpk-plans .m__setupval--hero s{font-size:.9rem;font-weight:500;color:rgba(var(--rgb-alu),.6);margin-right:8px;-webkit-text-fill-color:rgba(var(--rgb-alu),.6)}
.cpk-plans .m__then{margin-top:10px}
.cpk-plans .m__mrr{font-size:1.5rem}
.cpk-plans__note{max-width:640px;margin:36px auto 0;text-align:center;font-size:.85rem;color:rgba(var(--rgb-alu),.8);font-weight:300;line-height:1.6}

.techstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.techstrip span{font-size:.82rem;color:var(--aluminium);padding:9px 18px;border-radius:var(--radius-pill);background:var(--glass-bg);border:1px solid var(--glass-border)}

/* --- le robot dans le header --- */
.header__bot{width:34px;height:34px;border-radius:10px;overflow:hidden;display:none;flex:0 0 auto;
  border:1px solid var(--glass-border);background:rgba(var(--rgb-inv),.04)}
.header__bot video{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
@media(min-width:1024px){.header__bot{display:block}}

@media (prefers-reduced-motion:reduce){
  .gl,.galaxy__stars{animation:none}
  .header__bot video{display:none}
}

/* ============================================================
   13. GLOBE — les zones où on opère
   Sphère CSS + pins positionnés en lat/lon, rotation au drag.
   ============================================================ */
.globe-block{
  margin-top:72px;display:grid;gap:44px;grid-template-columns:1fr;align-items:center;
  padding:44px 40px;border-radius:var(--radius-lg);
  background:linear-gradient(140deg,rgba(37,99,235,.09),rgba(var(--rgb-inv),.015));
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)
}
@media(min-width:900px){.globe-block{grid-template-columns:1fr .85fr;gap:56px}}
.globe-block__txt h3{font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-.03em;line-height:1.12;margin-top:12px}
.globe-block__txt h3 em{font-style:italic;font-weight:400;color:var(--atlas-blue)}
.globe-block__txt p{margin-top:16px;color:var(--aluminium);font-weight:300;font-size:.93rem;line-height:1.65}
.globe-block__list{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:10px}
.globe-block__list li{display:flex;align-items:center;gap:11px;font-size:.9rem;font-weight:500;cursor:default;transition:color .25s}
.globe-block__list li i{font-style:normal;font-weight:300;color:rgba(var(--rgb-alu),.75);font-size:.82rem}
.globe-block__list li.is-hot{color:var(--off-white)}
.gz__dot{width:8px;height:8px;border-radius:50%;background:var(--atlas-blue);box-shadow:0 0 0 0 rgba(37,99,235,.6);animation:gzPing 2.6s infinite}
@keyframes gzPing{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5)}70%{box-shadow:0 0 0 8px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}

.globe-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.globe{
  /* ⚠️ --rot est SANS UNITÉ (un nombre de degrés, pas une valeur `deg`).
     Il sert à la fois en angle (les pins) et en longueur (le défilement
     de la texture) : `calc(-20deg * -1.6)` rend un angle, ce que
     background-position refuse — la déclaration était donc jetée et la
     Terre restait figée pendant que les pins tournaient. */
  --rot:0;
  --gsize:min(300px,72vw);
  --earth-tex:url('../assets/earth-equirect.webp');
  position:relative;width:var(--gsize);aspect-ratio:1;
  cursor:grab;touch-action:pan-y;perspective:900px;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent
}
.globe:active{cursor:grabbing}
.globe__sphere{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  /* océan profond, pas un trou noir : la sphère doit vivre même sans texture */
  background:radial-gradient(circle at 32% 28%,#1E3A66 0%,#12213C 44%,#070C16 100%);
  box-shadow:
    inset -14px -10px 38px rgba(0,0,0,.6),
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(37,99,235,.28),
    0 0 34px rgba(37,99,235,.18)
}
/* --- La Terre (12/08) -----------------------------------------------
   Texture équirectangulaire déroulée horizontalement : c'est elle qui
   donne la rotation. Le fichier `assets/earth-equirect.webp` est à
   fournir (cf. liste des visuels) — tant qu'il est absent, la sphère
   dégradée + la trame des méridiens restent visibles, rien ne casse.  */
.globe__map{
  position:absolute;inset:0;border-radius:50%;
  background-image:var(--earth-tex,none);
  background-repeat:repeat-x;
  background-size:auto 100%;
  /* 1 tour complet = 360deg de --rot ; la texture défile d'une largeur */
  background-position:calc(var(--rot) * (var(--gsize) / 180) - var(--gsize) / 2) center;
  opacity:.92;
  mask-image:radial-gradient(circle at 50% 50%,#000 68%,transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 68%,transparent 80%)
}
/* la trame des méridiens : elle reste, en surcouche discrète (DA tech) */
.globe__grid{
  position:absolute;inset:0;border-radius:50%;opacity:.55;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(37,99,235,.32) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,rgba(var(--rgb-alu),.14) 0 1px,transparent 1px 30px);
  background-size:340px 100%,100% 100%;
  background-position:calc(var(--rot) * (var(--gsize) / 180)) 0,0 0;
  mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 62%,transparent 78%)
}
/* l'ombre sphérique : c'est elle qui empêche le disque de paraître plat */
.globe__shade{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 30% 26%,rgba(var(--rgb-inv),.14) 0%,transparent 40%),
    radial-gradient(circle at 74% 80%,rgba(0,0,0,.55) 0%,transparent 56%);
  /* liseré d'atmosphère sur le limbe */
  box-shadow:inset 0 0 22px rgba(91,141,239,.3)
}
.globe__glow{
  position:absolute;inset:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 56%,rgba(37,99,235,.22) 66%,transparent 76%);
  filter:blur(6px)
}
/* les pins : position calculée depuis lat/lon + la rotation courante */
.gpin{
  --gsize:min(300px,72vw);
  opacity:var(--vis,1);transition:opacity .25s linear;
  position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;
  /* le pin disparaît quand il passe derrière la sphère */
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* ⚠️ Les pins suivaient une VRAIE projection sphérique (sin de la
     latitude) alors que la texture est une carte PLATE posée sur un
     disque : à 47° de latitude, la sphère place le pin à 0,73 rayon
     quand la carte met la France à 0,52. D'où des pays trop hauts et
     trop écartés. Les pins adoptent donc la même projection linéaire
     que la texture — le relief vient de l'ombrage, pas du calcul.
     --dx et --dy sont posés par le JS (ratios de -1 à 1). */
  transform:translate(-50%,-50%)
    translate(calc(var(--dx,0) * var(--gsize,300px) / 2),
              calc(var(--dy,0) * var(--gsize,300px) / 2))
}
/* le drapeau du pays, avec l'onde du point qui pulse derrière lui */
.gpin i{
  position:relative;display:block;font-style:normal;
  font-size:19px;line-height:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.85))
}
.gpin i::before{
  content:'';position:absolute;left:50%;top:50%;
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:var(--atlas-blue);box-shadow:0 0 12px rgba(37,99,235,.9),0 0 0 0 rgba(37,99,235,.55);
  animation:gzPing 2.6s infinite;z-index:-1
}
.gpin b{
  position:absolute;left:24px;top:-1px;font-size:.68rem;font-weight:700;white-space:nowrap;
  padding:3px 8px;border-radius:6px;background:rgba(10,16,26,.9);border:1px solid var(--glass-border);
  color:var(--off-white);opacity:0;transition:opacity .3s
}
.gpin.is-hot i{transform:scale(1.25);transition:transform .25s}
.gpin.is-hot i::before{background:#fff;box-shadow:0 0 16px #fff}
.gpin.is-hot b,.globe:hover .gpin b{opacity:1}
.globe__hint{font-size:.76rem;color:rgba(var(--rgb-alu),.6)}

@media (prefers-reduced-motion:reduce){.gz__dot,.gpin i{animation:none}}

/* ============================================================
   14. BANDES DE LOGOS — mieux qu'une ligne grise
   ============================================================ */
.proof{position:relative;padding:34px 0}
.proof__label{
  display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--aluminium);margin-bottom:26px
}
.proof__label::before,.proof__label::after{
  content:'';width:min(90px,12vw);height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.55),transparent)
}
.proof--warm .proof__label{color:#C9D6F5}
.proof--warm .proof__label::before,.proof--warm .proof__label::after{
  background:linear-gradient(90deg,transparent,rgba(91,141,239,.8),transparent)}
.proof__marquee{
  position:relative;padding:16px 0;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(var(--rgb-inv),.035),rgba(var(--rgb-inv),.008));
  border:1px solid var(--line-soft)
}
.proof--warm .proof__marquee{
  background:linear-gradient(180deg,rgba(37,99,235,.09),rgba(var(--rgb-inv),.01));
  border-color:rgba(37,99,235,.22)
}
/* --- Boîte optique uniforme (12/08) ---------------------------------
   Les logos vont du carré (ratio 1) au bandeau très large (ratio 3,45).
   Avec une simple hauteur fixe, un carré rendait 36×36 quand DESIGN+
   rendait 124×36 : quatre fois plus de surface. On borne donc les DEUX
   dimensions et on centre — chaque logo occupe la même case.            */
.proof__track img{
  width:118px;height:54px;max-width:none;
  object-fit:contain;object-position:center;
  filter:grayscale(1) brightness(1.7);opacity:.55;
  transition:filter .35s ease,opacity .35s ease,transform .35s ease
}
.proof__track img:hover{filter:grayscale(0) brightness(1);opacity:1;transform:scale(1.08)}

/* --- 2e bande « Ils nous font déjà confiance » : silhouettes blanches ---
   Le halo blanc precedent ne suffisait pas : il dessinait un contour autour
   de logos qui restaient noirs a l'interieur. Mesure des fichiers (13/08) :
   MGA luminance 44 avec 100 % de pixels noirs, DESIGN+ 17 avec 88 %,
   Artisan Benoit et 84 City autour de 86 — soit 4 des 8 invisibles sur
   l'obsidian #070A0F.
   On les passe donc tous en silhouette blanche : brightness(0) ecrase vers
   le noir, invert(1) le retourne en blanc, en conservant la transparence.
   Uniforme, lisible, et le meme traitement pour les 8 — un melange
   couleur/monochrome se verrait comme un defaut.
   (La 1re bande, elle, garde ses couleurs : demande Theo.)             */
.proof--warm .proof__track img{
  /* filter:none annule le grayscale(1) brightness(1.7) de la regle generale
     .proof__track img — sans ca, Snoop et 84 City restent en niveaux de gris. */
  filter:none;
  opacity:.95;
  width:148px;height:60px;
  transition:transform .3s ease,opacity .3s ease
}
/* Seuls les logos monochromes sombres passent en blanc. Un filtre applique a
   toute la bande transformait Snoop en tache et 84 City en disque plein :
   ces deux-la sont colores et detailles (saturation 0.91 et 0.43).
   Mesure du 13/08 — les deux marques ci-dessous sont des traces quasi noirs
   (MGA 0.19 de saturation pour 44 de luminance, DESIGN+ 0.07 pour 17) :
   invisibles sur l'obsidian, parfaits en blanc.

   20/08 — Artisan Benoit RETIRE de is-mono. La moyenne de saturation (0.29)
   masquait sa vraie structure : c'est un ecusson vert fonce avec un monogramme
   B dore DESSINE DESSUS, pas un trace monochrome. Aplati en blanc pur, l'ecusson
   devenait une tache pleine et le B disparaissait dedans — blanc sur blanc.
   Regle a retenir : is-mono ne vaut que pour un logo d'UNE seule couleur.
   Des qu'il y a deux tons imbriques, l'aplatissement detruit le dessin. */
.proof--warm .proof__track img.is-mono{filter:brightness(0) invert(1)}
.proof--warm .proof__track img:hover{transform:scale(1.07);opacity:1}

/* --- 1re bande : les logos gardent leurs couleurs (demande Théo) --- */
.proof:not(.proof--warm) .proof__track img{
  filter:none;opacity:.9;
  transition:opacity .3s ease,transform .3s ease
}
.proof:not(.proof--warm) .proof__track img:hover{opacity:1;transform:scale(1.08)}

/* ============================================================
   15. Correctifs d'audit — classes utilisées sans règle
   ============================================================ */
/* FAQ en <details> natif (cockpit, missions) */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--rgb-inv),.045),rgba(var(--rgb-inv),.012));
  border:1px solid var(--glass-border);
  transition:border-color .3s ease
}
.faq-item[open]{border-color:rgba(37,99,235,.32)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-size:.98rem;font-weight:600;letter-spacing:-.01em;color:var(--off-white);
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';flex:0 0 auto;font-size:1.3rem;font-weight:300;color:var(--atlas-blue);
  transition:transform .3s ease
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{background:rgba(var(--rgb-inv),.02)}
.faq-item p{padding:0 24px 22px;font-size:.9rem;font-weight:300;line-height:1.65;color:var(--aluminium)}

/* Process en 4 étapes */
.steps{display:grid;gap:18px;grid-template-columns:1fr;counter-reset:step}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}

/* Le « / mois » à côté des prix */
.m__per{font-size:.85rem;color:var(--aluminium);font-weight:400}

/* Colonne visuelle du cockpit sur l'accueil */
.cpk__visual{position:relative;min-width:0}

/* Carte Enterprise du cockpit */
.cpk-plans__ent{--m-halo:rgba(91,141,239,.3);--m-glow:rgba(160,195,255,.7);--m-border:rgba(91,141,239,.42);--m-accent:#7BA6F5}
.cpk-plans__ent .m__name{background:none;-webkit-text-fill-color:var(--off-white);color:var(--off-white)}

/* Footer simplifié (audit, cockpit, journal) */
.footer__inner{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:32px 0;text-align:center
}
.footer__copy{font-size:.85rem;color:var(--aluminium);font-weight:300}
.footer__copy a{color:var(--aluminium);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.footer__copy a:hover{color:var(--off-white)}

/* Utilitaires réellement utilisés */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.process__cta{text-align:center;margin-top:56px}

/* ============================================================
   17. Médias de cartes — Process & Valeurs (12/08/2026)
   Les deux sections étaient signalées faibles : Process en texte
   seul, Valeurs en icônes SVG seules. L'image devient la tête de
   carte, à fleur de bord. Elle remplace l'icône, elle ne s'y ajoute
   pas — deux signes visuels sur une même carte se neutralisent.
   ============================================================ */
.card__media{
  margin:-28px -24px 6px;               /* annule le padding de la carte */
  border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden;position:relative;
  aspect-ratio:16/10;background:var(--space-blue)
}
.card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);
  transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .5s ease
}
/* liseré bas : raccorde l'image au corps de la carte */
.card__media::after{
  content:'';position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,10,15,.72))
}
.step-card:hover .card__media img,
.value-card:hover .card__media img{transform:scale(1.09)}

/* Le média entre au scroll un peu après le texte de sa carte */
.reveal .card__media img{transform:scale(1.14);filter:brightness(.75)}
.reveal.is-revealed .card__media img{transform:scale(1.02);filter:brightness(1)}

.value-card{text-align:left}            /* le centrage n'a plus de sens avec une image */

@media (max-width:640px){
  .card__media{aspect-ratio:16/9}
}

/* ============================================================
   18. Hero Cockpit en diptyque (12/08/2026)
   Deux images qui se répondent : à gauche le tas de téléphones
   morts, à droite le robot qui bosse. C'est le avant/après du
   Cockpit raconté par le fond, pas par un texte de plus.
   ============================================================ */
.hero__bg--split{display:grid;grid-template-columns:1fr 1fr}
.hero__bg--split img{
  width:100%;height:100%;object-fit:cover;
  animation:none;transform:none            /* pas de drift : la couture bougerait */
}
.hero__bg--split img:first-child{object-position:60% center}
.hero__bg--split img:last-child{object-position:40% center}
/* la couture centrale : sans elle, deux photos collées se voient */
.hero__bg--split::after{
  content:'';position:absolute;top:0;bottom:0;left:50%;width:16%;
  transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(7,10,15,.92) 46%,rgba(7,10,15,.92) 54%,transparent)
}
.cpk-hero .hero__bg--split img{opacity:.55;filter:grayscale(.15)}
/* voile renforcé : le texte est centré, il passe pile sur la couture */
.cpk-hero .hero__veil{
  background:
    radial-gradient(700px 480px at 50% 44%,rgba(7,10,15,.72),transparent 74%),
    linear-gradient(180deg,rgba(7,10,15,.92) 0%,rgba(7,10,15,.68) 28%,rgba(7,10,15,.74) 62%,rgba(7,10,15,.98) 100%)
}
@media (max-width:760px){
  /* en mobile on ne garde que le robot : le tas de téléphones devient illisible */
  .hero__bg--split{grid-template-columns:1fr}
  .hero__bg--split img:first-child{display:none}
  .hero__bg--split::after{display:none}
}

/* ============================================================
   19. Hero accueil — texte à gauche, robot à droite (12/08/2026)
   Le hero était centré. Le passage en deux colonnes laisse la
   moitié droite au robot joueur d'échecs.
   ⚠️ Sa photo a un fond bleu-gris, pas obsidian : il est détouré
   au masque (dégradé) sur ses bords gauche et bas, sinon on verrait
   un rectangle de photo collé sur la page.
   ============================================================ */
.hero__figure{
  position:absolute;z-index:1;pointer-events:none;
  top:0;bottom:0;right:0;width:min(46%,720px);
  display:flex;align-items:flex-end;justify-content:flex-end
}
.hero__figure img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  opacity:.9;
  filter:saturate(.75) contrast(1.04);
  -webkit-mask-image:
     linear-gradient(90deg,transparent 0%,#000 34%,#000 100%),
     linear-gradient(180deg,transparent 0%,#000 16%,#000 74%,transparent 100%);
  mask-image:
     linear-gradient(90deg,transparent 0%,#000 34%,#000 100%),
     linear-gradient(180deg,transparent 0%,#000 16%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect
}

.hero__content--left{
  text-align:left;
  max-width:1180px;
  margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,58%) 1fr
}
.hero__content--left > *{grid-column:1}
.hero__content--left .hero__badge{margin-inline:0}
.hero__content--left .hero__sub{margin-inline:0;max-width:min(100%,560px)}
.hero__content--left .audit{margin-inline:0;max-width:min(100%,560px)}
.hero__content--left .hero__buttons{justify-content:flex-start}
.hero__content--left .hero__social-proof{justify-content:flex-start}

/* le halo bleu se recale derrière le robot plutôt qu'au centre */
.hero:has(.hero__figure) .hero__glow--blue{right:4%;top:0}

@media (max-width:1024px){
  /* sous 1024 le robot mangerait le texte : on repasse au hero centré */
  .hero__figure{display:none}
  .hero__content--left{
    text-align:center;display:block;max-width:900px
  }
  .hero__content--left .hero__badge,
  .hero__content--left .hero__sub,
  .hero__content--left .audit{margin-inline:auto}
  .hero__content--left .hero__buttons,
  .hero__content--left .hero__social-proof{justify-content:center}
}

/* ============================================================
   20. Retours Théo du 12/08 (soir)
   ============================================================ */

/* --- Le coureur, en bas du menu burger ------------------------------
   Il n'existait qu'en desktop (.header__bot, masqué sous 1024px). En
   mobile la barre se réduit au burger, donc il disparaissait : il
   reprend sa course au pied du menu ouvert.                          */
.mobile-nav__runner{
  margin-top:auto;padding-top:28px;
  display:flex;justify-content:center;align-items:flex-end;
  position:relative
}
.mobile-nav__runner::before{        /* le sol sur lequel il court */
  content:'';position:absolute;left:12%;right:12%;bottom:16px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.5),transparent)
}
.mobile-nav__runner video{
  width:78px;height:78px;object-fit:cover;display:block;opacity:.92;
  border-radius:16px;
  animation:runnerPace 5.5s ease-in-out infinite alternate
}
@keyframes runnerPace{           /* il traverse doucement l'espace du bas */
  from{transform:translateX(-26%)}
  to  {transform:translateX(26%)}
}
@media(min-width:1024px){.mobile-nav__runner{display:none}}

/* --- Hero accueil : plus court, et le robot recadré ------------------ */
.hero:has(.hero__figure){
  /* la barre flottante descend a ~72px : on garde ~34px d'air sous elle,
     pas 78. Le hero demarrait trop bas et le haut de page sonnait vide. */
  min-height:auto;padding:clamp(84px,8.4vw,106px) 0 clamp(56px,6vw,78px)
}
.hero__figure img{
  object-position:center 16%;      /* on coupe le bas, pas la tête */
  animation:robotFloat 9s ease-in-out infinite alternate
}
/* Les pièces d'échecs sont incrustées dans la photo : on ne peut pas les
   animer une par une. Le flottement de l'ensemble suffit à les faire
   léviter, puisqu'elles sont déjà en suspension dans l'image. */
@keyframes robotFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(0,-2.2%,0) scale(1.018)}
}

/* --- Hero Cockpit : le fond doit se voir ---------------------------- */
.cpk-hero .hero__bg--split img{opacity:.82;filter:grayscale(0) contrast(1.06) brightness(1.06)}
.cpk-hero .hero__veil{
  background:
    radial-gradient(660px 420px at 50% 46%,rgba(7,10,15,.72),transparent 76%),
    linear-gradient(180deg,rgba(7,10,15,.82) 0%,rgba(7,10,15,.34) 30%,rgba(7,10,15,.44) 64%,rgba(7,10,15,.96) 100%)
}

@media (prefers-reduced-motion:reduce){
  .hero__figure img,.mobile-nav__runner video{animation:none}
}

/* ============================================================
   21. 2e passe hero + capture du cockpit (12/08, tard)
   ============================================================ */

/* --- Le robot remonte : on coupe en haut, plus en bas --- */
.hero__figure img{object-position:center 34%}

/* --- Le texte va chercher plus de largeur ---------------------------
   58% laissait une bande morte entre la colonne et le robot, et les
   titres cassaient trop tôt. 66% + un sous-titre plus large. */
.hero__content--left{grid-template-columns:minmax(0,66%) 1fr}
.hero__content--left .hero__sub{max-width:min(100%,660px)}
.hero__content--left .audit{max-width:min(100%,640px)}

/* --- La capture du cockpit remplace l'arbre HTML --------------------
   L'image porte deja son propre cadre d'ecran : pas de carte autour,
   juste un halo qui la raccroche au fond obsidian. */
.cpk__shot{margin:0;position:relative}
.cpk__shot img{
  width:100%;height:auto;display:block;border-radius:18px;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.6))
}
.cpk__shot::after{
  content:'';position:absolute;inset:-8% -6% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 46%,rgba(37,99,235,.22),transparent 72%);
  filter:blur(18px)
}

/* ============================================================
   22. Arbre d'agents v2 — la photo générée est retirée (12/08)
   Théo : « je veux plus la photo ChatGPT, ça fait trop IA ».
   Retour au HTML, mais en plus riche : 10 agents au lieu de 6,
   chacun avec ses outils réellement branchés. Les marques sont
   dessinées en SVG monochrome — pas de logo importé, pas de
   requête externe, et ça reste dans la DA (aluminium + un bleu).
   ============================================================ */
.tree--v2{
  position:relative;display:flex;flex-direction:column;gap:0;
  padding:26px 22px 20px;border-radius:22px;
  background:linear-gradient(180deg,rgba(37,99,235,.07),rgba(var(--rgb-inv),.012));
  border:1px solid rgba(37,99,235,.2)
}

/* --- Marco --- */
.tree__root{
  display:flex;align-items:center;gap:14px;align-self:center;
  padding:14px 22px 14px 16px;border-radius:16px;
  background:linear-gradient(180deg,rgba(37,99,235,.22),rgba(37,99,235,.07));
  border:1px solid rgba(37,99,235,.5);
  box-shadow:0 0 34px rgba(37,99,235,.28)
}
.tree__root-ic{width:26px;height:26px;flex:none;fill:none;stroke:var(--atlas-blue);stroke-width:1.6}
.tree__root-ic .ln{stroke:var(--off-white);opacity:.75}
.tree__root-txt b{display:block;font-size:1.02rem;font-weight:700;color:var(--off-white)}
.tree__root-txt i{display:block;font-style:normal;font-size:.76rem;color:var(--aluminium)}

/* --- La fourche vers les deux coachs --- */
.tree__split{position:relative;height:34px;margin:0 auto;width:min(72%,420px)}
.tree__split span{position:absolute;background:rgba(37,99,235,.5)}
.tree__split span:nth-child(1){left:50%;top:0;width:1px;height:17px}
.tree__split span:nth-child(2){left:0;right:0;top:17px;height:1px}
.tree__split span:nth-child(3){left:0;top:17px;width:1px;height:17px;
  box-shadow:calc(min(72vw,420px) - 1px) 0 0 rgba(37,99,235,.5)}

/* --- Les deux colonnes --- */
.tree__cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.branch{
  border-radius:16px;padding:14px 12px 12px;
  background:linear-gradient(180deg,rgba(var(--rgb-inv),.045),rgba(var(--rgb-inv),.012));
  border:1px solid var(--line-soft)
}
.branch--perso{border-color:rgba(var(--rgb-alu),.22)}
.branch__head{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.branch__head b{display:block;font-size:.95rem;font-weight:700;color:var(--off-white)}
.branch__head i{display:block;font-style:normal;font-size:.72rem;color:var(--aluminium);line-height:1.4}
.branch__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

/* --- Un agent --- */
.ag{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:9px 10px;border-radius:11px;
  background:rgba(var(--rgb-inv),.035);border:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,transform .25s ease
}
.ag:hover{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.35);transform:translateX(2px)}
.ag__ic{width:19px;height:19px;flex:none;fill:none;stroke:var(--atlas-blue);stroke-width:1.5;opacity:.95}
.ag__ic .ln{stroke:var(--off-white);opacity:.6}
.ag__txt b{display:block;font-size:.83rem;font-weight:600;color:var(--off-white);line-height:1.25}
.ag__txt i{display:block;font-style:normal;font-size:.7rem;color:var(--aluminium);line-height:1.35}
.ag__tools{display:flex;gap:5px;flex:none}
.ag__tool{
  width:17px;height:17px;fill:none;stroke:var(--aluminium);stroke-width:1.35;
  opacity:.6;transition:opacity .25s ease,stroke .25s ease
}
.ag__tool .ln{stroke:var(--aluminium)}
.ag:hover .ag__tool{opacity:1;stroke:var(--off-white)}

/* --- Le pied : système actif --- */
.tree__foot{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:14px 0 0;font-size:.72rem;color:var(--aluminium);letter-spacing:.04em
}
.tree__dot{width:7px;height:7px;border-radius:50%;background:#31C48D;
  box-shadow:0 0 0 0 rgba(49,196,141,.55);animation:agPing 2.4s ease-out infinite}
@keyframes agPing{70%{box-shadow:0 0 0 7px rgba(49,196,141,0)}100%{box-shadow:0 0 0 0 rgba(49,196,141,0)}}

/* --- Mise au point par les blocs 01→04 de la colonne droite --- */
.tree--v2[data-focus="pro"] .branch--perso,
.tree--v2[data-focus="perso"] .branch--pro{opacity:.42;filter:saturate(.6)}
.tree--v2 .branch{transition:opacity .35s ease,filter .35s ease}

@media (max-width:560px){
  .tree__cols{grid-template-columns:1fr}
  .tree__split{display:none}
  .ag__tools{display:none}
  .tree--v2{padding:20px 14px 16px}
}

/* --- Le badge du hero épouse son texte --- */
.hero__content--left .hero__badge{justify-self:start;width:-moz-fit-content;width:fit-content}

/* ============================================================
   23. Cockpit v3 — le visuel doit VENDRE (12/08, retour Théo)
   « couleurs, emojis iPhone, WhatsApp, Gmail, ChatGPT »
   Les emojis sont natifs (donc Apple sur Mac/iOS) et les 14 marques
   sont des SVG vectoriels aux couleurs officielles, écrits ici :
   aucune requête externe, aucun fichier binaire, rendu net à toute
   taille. Au repos les logos sont en retrait ; au survol d'un agent
   sa ligne s'allume et ses outils reprennent leurs couleurs.
   ============================================================ */
.cpv{
  border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(15,26,48,.92),rgba(7,10,15,.96));
  border:1px solid rgba(37,99,235,.24);
  box-shadow:0 26px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(var(--rgb-inv),.05)
}
/* barre de titre facon appli */
.cpv__bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;border-bottom:1px solid rgba(var(--rgb-inv),.07);
  background:rgba(var(--rgb-inv),.03)
}
.cpv__brand{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--aluminium)}
.cpv__live{display:flex;align-items:center;gap:7px;font-size:.68rem;color:var(--aluminium)}
.cpv__dot{width:7px;height:7px;border-radius:50%;background:#31C48D;
  box-shadow:0 0 0 0 rgba(49,196,141,.6);animation:cpvPing 2.4s ease-out infinite}
@keyframes cpvPing{70%{box-shadow:0 0 0 8px rgba(49,196,141,0)}100%{box-shadow:0 0 0 0 rgba(49,196,141,0)}}

/* Marco */
.cpv__boss{
  display:flex;align-items:center;gap:13px;margin:16px 16px 4px;
  padding:12px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(37,99,235,.26),rgba(37,99,235,.08));
  border:1px solid rgba(37,99,235,.5);box-shadow:0 0 32px rgba(37,99,235,.24)
}
.cpv__boss-e{font-size:1.5rem;line-height:1}
.cpv__boss-n b{display:block;font-size:1rem;font-weight:700;color:var(--off-white)}
.cpv__boss-n i{display:block;font-style:normal;font-size:.74rem;color:var(--aluminium)}

/* fourche */
.cpv__cols{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px 18px;
  position:relative
}
.cpv__cols::before{
  content:'';position:absolute;left:50%;top:0;width:1px;height:14px;
  background:rgba(37,99,235,.45)
}
.cpv__br{
  border-radius:14px;padding:12px 10px;
  background:rgba(var(--rgb-inv),.032);border:1px solid var(--line-soft);
  transition:opacity .35s ease,filter .35s ease
}
.cpv__br header{display:grid;grid-template-columns:auto 1fr;gap:0 9px;align-items:center;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line-soft)}
.cpv__br header span{font-size:1.15rem;grid-row:span 2}
/* le compteur d'agents n'a de sens que quand la branche peut se replier */
.cpv__count{display:none}
.cpv__br header b{font-size:.9rem;font-weight:700;color:var(--off-white)}
.cpv__br header i{font-style:normal;font-size:.68rem;color:var(--aluminium)}
.cpv__br ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}

/* une ligne agent */
.agv{
  display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;
  padding:8px 9px;border-radius:11px;
  background:rgba(var(--rgb-inv),.03);border:1px solid transparent;
  transition:background .22s ease,border-color .22s ease
}
.agv__e{font-size:1.15rem;line-height:1;grid-row:span 2}
.agv__n b{display:block;font-size:.82rem;font-weight:600;color:var(--off-white);line-height:1.25}
.agv__n i{display:block;font-style:normal;font-size:.69rem;color:var(--aluminium);line-height:1.35}
/* les outils sont replies au repos, ils se deploient au survol */
.agv__tools{
  grid-column:2;display:flex;gap:6px;align-items:center;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s cubic-bezier(.22,.7,.3,1),opacity .25s ease,margin-top .3s ease
}
.agv__t{width:19px;height:19px;flex:none;filter:saturate(.9)}
.agv:hover,.agv:focus-within{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.42)}
.agv:hover .agv__tools,.agv:focus-within .agv__tools{max-height:30px;opacity:1;margin-top:6px}

/* les blocs 01→04 continuent de piloter la mise en avant */
.cpv[data-focus="pro"] .cpv__br--perso,
.cpv[data-focus="perso"] .cpv__br--pro{opacity:.34;filter:saturate(.5)}

@media (max-width:620px){
  .cpv__cols{grid-template-columns:1fr}
  .cpv__cols::before{display:none}

  /* --- Les branches se replient : onze agents empiles font un mur --- */
  .cpv__br header{
    cursor:pointer;position:relative;
    padding-right:52px;               /* place pour le compteur et le chevron */
    min-height:44px;align-content:center
  }
  .cpv__br header::after{             /* chevron */
    content:'';position:absolute;right:8px;top:50%;
    width:8px;height:8px;margin-top:-6px;
    border-right:2px solid var(--aluminium);border-bottom:2px solid var(--aluminium);
    transform:rotate(45deg);transform-origin:center;
    transition:transform .25s ease,border-color .25s ease
  }
  .cpv__br.is-open header::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--atlas-blue-lite,#5B8DEF)}
  .cpv__count{
    position:absolute;right:28px;top:50%;transform:translateY(-50%);
    min-width:19px;height:19px;padding:0 5px;border-radius:99px;
    display:grid;place-items:center;
    font-size:.66rem;font-weight:700;color:var(--aluminium);
    background:rgba(var(--rgb-inv),.07);border:1px solid var(--line-soft)
  }
  .cpv__br.is-open .cpv__count{color:var(--ink-hi);background:rgba(37,99,235,.28);border-color:rgba(37,99,235,.4)}

  .cpv__br ul{display:none}
  .cpv__br.is-open ul{display:flex;animation:cpvOpen .22s ease}
  @keyframes cpvOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

  /* la mise en sourdine de l'autre branche n'a plus de sens une fois replie */
  .cpv[data-focus="pro"] .cpv__br--perso,
  .cpv[data-focus="perso"] .cpv__br--pro{opacity:1;filter:none}
  /* en tactile il n'y a pas de survol : les outils restent ouverts */
  .agv__tools{max-height:30px;opacity:1;margin-top:6px}
}

/* ============================================================
   24. Rangées de logos sur les 2 cartes + espacement resserré
   ============================================================ */
.pcl{
  display:flex;flex-direction:column;gap:9px;
  margin:14px 0 16px;padding-top:14px;
  border-top:1px solid var(--line-soft)
}
.pcl__k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--aluminium);opacity:.8}
.pcl__l-wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pcl__l{
  width:26px;height:26px;flex:none;
  filter:grayscale(.55) saturate(.8);opacity:.7;
  transition:filter .3s ease,opacity .3s ease,transform .3s ease
}
.pillar-card:hover .pcl__l{filter:none;opacity:1}
.pcl__l:hover{transform:scale(1.18)}

/* --- Trop d'air dans « Deux systèmes » : on resserre ---------------- */
.pillars{padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(48px,6vw,72px)}
.pillars .section__head{margin-bottom:clamp(26px,3.4vw,40px)}
.pillars .pillar-card{padding:26px 24px 24px}

/* ============================================================
   25. CTA final — la ligne d'horizon (12/08)
   L'image fait 6:1 : la ligne de lumière est à ~60% de sa hauteur,
   avec son reflet sous elle. On l'ancre EN BAS de la section pour
   qu'elle serve de sol aux deux boutons — le regard finit sur la
   lumière, pas sur du noir.
   ============================================================ */
.cta-final--horizon{
  overflow:hidden;
  padding-top:clamp(64px,8vw,96px);
  padding-bottom:clamp(96px,12vw,150px);   /* de la place pour l'horizon */
  background:var(--obsidian)
}
.cta-final__bg{
  position:absolute;left:0;right:0;bottom:0;z-index:0;pointer-events:none;
  height:min(56%,300px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%,#000 100%);
  mask-image:linear-gradient(180deg,transparent,#000 34%,#000 100%)
}
.cta-final__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 46%;
  display:block;opacity:.95
}
/* halo bleu qui remonte derrière le titre, pour relier l'image au texte */
.cta-final--horizon::before{
  content:'';position:absolute;left:50%;bottom:14%;z-index:0;pointer-events:none;
  width:min(900px,90%);height:340px;transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 100%,rgba(37,99,235,.24),transparent 72%);
  filter:blur(10px)
}
.cta-final--horizon .container{position:relative;z-index:1}
/* les boutons se posent juste au-dessus de la ligne */
.cta-final--horizon .cta-final__buttons{margin-top:clamp(28px,3.4vw,40px)}
.cta-final--horizon .cta-final__sub{margin-top:20px}

@media (max-width:760px){
  .cta-final__bg{height:min(46%,190px)}
  .cta-final--horizon{padding-bottom:clamp(78px,20vw,110px)}
}

/* ============================================================
   26. Le trou entre le Process et le CTA final (12/08)
   Trois espacements s'empilaient : la marge du bouton (56), le
   padding bas de la section (140 au desktop) et le padding haut
   du CTA (96) — soit ~292px de vide. Depuis le retrait de la
   section Valeurs, les deux blocs se touchent directement, donc
   l'empilement se voit.
   ============================================================ */
/* ⚠️ Le resserrement ne vaut QUE pour l'accueil, ou la section Valeurs a
   ete retiree et ou les deux blocs se touchent. Sur les autres pages le
   CTA garde sa respiration : le selecteur cible le CTA qui SUIT #process. */
#process{padding-bottom:clamp(44px,5.5vw,68px)}
.process__cta{margin-top:clamp(28px,3.4vw,38px)}
#process + .cta-final--horizon{padding-top:clamp(44px,5.5vw,68px)}

/* ============================================================
   27. Cockpit — la page respirait trop (13/08)
   A 1440px, --section-pad vaut 140px en haut ET en bas. Ailleurs
   ca va : les sections portent des grilles, des cartes, du volume.
   Ici une section sur deux ne contient qu'un titre et un
   paragraphe — 280px de padding autour de 3 lignes, plus les 56px
   du section__head : le lecteur traverse des ecrans vides entre
   deux idees. On resserre, sur cette page seulement.
   ============================================================ */
.page-cockpit .section{padding:clamp(56px,6.4vw,92px) 0}
/* Le bloc visuel sous le header n'ajoute pas son propre vide en bas : la
   section suivante apporte deja son padding haut. Regle posee ici et non
   dans style.css, parce que `.page-cockpit .section` ci-dessus est plus
   specifique — un simple `.viz-solo` s'y ferait ecraser sans bruit. */
.page-cockpit .viz-solo{ padding-top:clamp(28px,3.6vw,52px); padding-bottom:0 }
.page-cockpit .viz-solo + .section{ padding-top:clamp(36px,4.4vw,60px) }
.page-cockpit .section__head{margin-bottom:clamp(30px,3.4vw,44px)}
/* une section qui ne porte QUE son titre n'a pas besoin de sa marge basse :
   le padding de section suffit deja a la separer de la suivante */
.page-cockpit .container > .section__head:only-child{margin-bottom:0}
/* le hero garde sa hauteur, mais pas 100px de vide sous ses badges */
.page-cockpit .cpk-hero{padding-bottom:clamp(48px,6vw,76px)}

/* ============================================================
   28. Cockpit — ce que l'agent LIVRE (13/08)
   Sur l'accueil, le survol deploie les outils de l'agent : c'est
   descriptif, ca dit avec quoi il travaille. Ici, sur la page qui
   doit convertir, on montre ce qu'il vous ENLEVE DES MAINS.
   La bulle emprunte a iMessage : coin inferieur gauche pointu,
   fond bleu, apparition qui pousse depuis ce coin.
   ============================================================ */
.page-cockpit .agv--has-say{cursor:pointer}
.page-cockpit .agv--has-say .agv__n{position:relative}

.agv__say{
  display:block;position:relative;margin:9px 0 2px 0;padding:9px 14px 10px;
  max-width:30ch;border-radius:18px 18px 18px 5px;   /* le coin pointu d'iMessage */
  background:linear-gradient(180deg,#2b7cff,#1d63e6);
  color:var(--ink-hi);font-size:.83rem;line-height:1.45;font-weight:400;letter-spacing:-.005em;
  box-shadow:0 6px 18px rgba(29,99,230,.32);
  transform-origin:0 100%;                            /* elle pousse depuis le coin */
  opacity:0;transform:scale(.7) translateY(6px);
  max-height:0;padding-top:0;padding-bottom:0;margin-top:0;
  overflow:hidden;pointer-events:none;
  transition:opacity .2s ease, transform .34s cubic-bezier(.3,1.35,.5,1),
             max-height .3s ease, padding .3s ease, margin .3s ease;
}
.agv.is-saying .agv__say{
  opacity:1;transform:scale(1) translateY(0);
  max-height:140px;padding-top:9px;padding-bottom:10px;margin-top:9px;
}
/* la petite queue de la bulle */
.agv__say::after{
  content:'';position:absolute;left:-5px;bottom:0;width:12px;height:16px;
  background:#1d63e6;border-bottom-right-radius:14px;
  -webkit-mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px);
          mask:radial-gradient(circle at 0 0,transparent 12px,#000 12.5px);
}
/* trois points d'attente, une fraction de seconde avant le texte */
.agv.is-typing .agv__say{opacity:1;transform:scale(1);max-height:34px;padding:9px 16px;margin-top:9px;color:transparent}
.agv.is-typing .agv__say::before{
  content:'';position:absolute;left:16px;top:50%;width:34px;height:6px;transform:translateY(-50%);
  background:radial-gradient(circle 3px at 3px 3px,rgba(var(--rgb-inv),.9) 99%,transparent 0) 0 0/12px 6px repeat-x;
  animation:sayDots .9s infinite steps(3)
}
@keyframes sayDots{0%{opacity:.35}50%{opacity:.95}100%{opacity:.35}}

/* l'agent qui parle passe devant, les autres s'effacent un peu */
.page-cockpit .cpv:has(.agv.is-saying) .agv:not(.is-saying){opacity:.55;transition:opacity .25s}
.page-cockpit .agv.is-saying{transform:translateY(-1px)}

.tree__hint{
  text-align:center;margin:18px auto 0;max-width:520px;
  font-size:.84rem;color:var(--atlas-blue,#3b82f6);font-weight:500
}
.tree__hint::before{content:'👆 ';filter:grayscale(1) opacity(.7)}

@media (prefers-reduced-motion:reduce){
  .agv__say{transition:opacity .15s}
  .agv.is-typing .agv__say::before{animation:none}
}

/* ============================================================
   29. Plus de scroll horizontal sur telephone (13/08)
   Mesure faite dans un vrai cadre de 390px : 4 pages sur 7
   defilaient de 20px sur le cote, la page Audit de 255px.
   Deux causes, aucune legitime : le tiroir du menu mobile qui
   attend hors ecran a droite, et des pseudo-elements decoratifs
   qui depassent. Aucun contenu ne vit au-dela du bord droit, donc
   on coupe — sur html, pas sur body, pour ne pas casser sticky.
   ============================================================ */
/* Uniquement sur html : « clip » sur body creerait un contexte de
   rognage qui pourrait couper le menu mobile et le bandeau cookies,
   qui sont tous les deux en position:fixed. */
html{overflow-x:hidden}

/* ══════════════════════════════════════════════════════════════
   AUDIT — le debrief des 4 agents (13/08, revu le 13/08 au soir)
   Ils ne sont plus en vignettes dans des cartes : ils se tiennent
   debout, cote a cote, et chacun parle dans une bulle posee
   au-dessus de sa tete — la queue pointe vers lui, comme dans une
   conversation iMessage. Les bulles arrivent l'une apres l'autre.
   ══════════════════════════════════════════════════════════════ */
.brief{margin-top:clamp(48px,6vw,80px)}
.brief__head{text-align:center;max-width:620px;margin:0 auto clamp(30px,4vw,48px)}
.brief__head h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:10px 0 8px;letter-spacing:-.02em}
.brief__head p{color:var(--aluminium);font-weight:300;font-size:.98rem}

.brief__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,22px);
  align-items:end;
}

.bagent{
  display:flex;flex-direction:column;align-items:center;gap:0;
  min-width:0;position:relative
}

/* ── La bulle ── */
.bagent__bubble{
  position:relative;width:100%;margin-bottom:16px;padding:14px 16px 15px;
  border-radius:20px 20px 20px 6px;
  background:linear-gradient(180deg,#2b7cff,#1d63e6);
  color:var(--ink-hi);box-shadow:0 8px 24px rgba(29,99,230,.3);
  transform-origin:0 100%;
  opacity:0;transform:scale(.72) translateY(10px);
  animation:bubbleIn .5s cubic-bezier(.3,1.3,.5,1) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes bubbleIn{to{opacity:1;transform:none}}
/* la queue, qui pointe vers l'agent en dessous */
.bagent__bubble::after{
  content:'';position:absolute;left:14px;bottom:-9px;width:18px;height:12px;
  background:#1d63e6;
  clip-path:polygon(0 0,100% 0,22% 100%)
}
/* le verdict reprend le code des 5 analyses, sur la bulle */
.bagent__verdict{
  display:inline-block;margin-bottom:7px;padding:3px 9px;border-radius:99px;
  font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(var(--rgb-inv),.2);color:var(--ink-hi)
}
.bagent__verdict b{font-weight:800}
.bagent--good .bagent__bubble{background:linear-gradient(180deg,#16a34a,#128040)}
.bagent--good .bagent__bubble::after{background:#128040}
.bagent--bad  .bagent__bubble{background:linear-gradient(180deg,#dc2626,#b31c1c)}
.bagent--bad  .bagent__bubble::after{background:#b31c1c}

.bagent__say{margin:0;font-size:.86rem;line-height:1.5;font-weight:400}
.bagent__do{
  margin:9px 0 0;padding-top:9px;border-top:1px solid rgba(var(--rgb-inv),.22);
  font-size:.78rem;line-height:1.45;color:rgba(var(--rgb-inv),.88);
  display:flex;gap:6px
}
.bagent__do::before{content:'→';flex:0 0 auto;opacity:.8}

/* ── Les constats reels remontes par audit.php (14/08) ──────────────
   Ils s'intercalent entre la phrase de l'agent et sa recommandation.
   Volontairement sobres : c'est de la donnee, pas du discours. La bulle
   a un fond colore (vert/orange/rouge), donc pas de couleur ici — juste
   un leger voile et une puce, sinon ca vibre. */
.bagent__faits{
  list-style:none;margin:9px 0 0;padding:8px 10px;
  border-radius:8px;background:rgba(0,0,0,.16);
  display:flex;flex-direction:column;gap:5px
}
.bagent__faits li{
  font-size:.74rem;line-height:1.4;color:rgba(var(--rgb-inv),.94);
  padding-left:13px;position:relative
}
.bagent__faits li::before{
  content:'';position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:rgba(var(--rgb-inv),.6)
}
.bagent__faits-plus{opacity:.72;font-style:italic}
.bagent__faits-plus::before{display:none}
@media(max-width:760px){ .bagent__faits li{font-size:.72rem} }

/* ── L'agent, debout ── */
.bagent__fig{
  width:auto;max-width:100%;height:clamp(160px,19vw,250px);
  object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));
  opacity:0;animation:figIn .6s ease forwards;animation-delay:calc(var(--d,0ms) - 160ms)
}
@keyframes figIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* le sol : une ligne de lumiere sous leurs pieds */
.brief__grid::after{
  content:'';grid-column:1/-1;height:1px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.4) 20%,rgba(59,130,246,.4) 80%,transparent)
}

.bagent__id{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:12px;text-align:center}
.bagent__id b{font-size:.92rem;color:var(--ink-hi);letter-spacing:-.01em}
.bagent__id span{font-size:.7rem;color:var(--text-3,#6b7280);text-transform:uppercase;letter-spacing:.07em}

.brief__note{
  margin:26px auto 0;max-width:560px;text-align:center;
  font-size:.83rem;color:var(--text-3,#6b7280);line-height:1.55
}

/* ── Telephone : deux par ligne, puis la bulle a cote ── */
@media(max-width:820px){
  .brief__grid{grid-template-columns:repeat(2,1fr);gap:26px 14px}
  .bagent__fig{height:clamp(150px,32vw,200px)}
  .bagent__say{font-size:.82rem}
}
@media(max-width:520px){
  .brief__grid{grid-template-columns:1fr;gap:8px}
  /* en colonne unique, l'agent se met a cote de sa bulle */
  .bagent{
    flex-direction:row;align-items:flex-end;gap:12px;
    padding-bottom:16px;border-bottom:1px solid rgba(var(--rgb-inv),.07)
  }
  .bagent:last-child{border-bottom:0}
  .bagent__fig{height:132px;flex:0 0 auto;order:1}
  .bagent__bubble{order:2;margin-bottom:0;border-radius:20px 20px 6px 20px}
  .bagent__bubble::after{left:auto;right:14px;bottom:-9px;clip-path:polygon(0 0,100% 0,78% 100%)}
  .bagent__id{order:3;display:none}
  .brief__grid::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  .bagent__bubble,.bagent__fig{animation:none;opacity:1;transform:none}
}

/* ============================================================
   30. Missions — carrousel sur telephone (13/08)
   Sur ordinateur les 4 missions se comparent d'un coup d'oeil,
   la grille reste. Sur telephone elles s'empilaient sur 4 ecrans :
   on glisse plutot d'une mission a l'autre, en boucle. Les fleches
   restent discretes — c'est le doigt qui commande, elles ne font
   que dire que ca bouge.
   ============================================================ */
.mslider{position:relative}
.mslider__nav{display:none}
.mslider__dots{display:none}

@media(max-width:759px){
  .mslider{margin:0 -20px;padding:0 20px}

  #mTrack{
    display:flex;gap:14px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px 0 6px;
  }
  #mTrack::-webkit-scrollbar{display:none}
  #mTrack > .m{
    flex:0 0 84%;               /* on voit le bord de la suivante : ca invite a glisser */
    scroll-snap-align:center;
    margin:0;
  }

  /* Les fleches : posees sur les bords, presque transparentes */
  .mslider__nav{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:44%;transform:translateY(-50%);z-index:3;
    width:34px;height:34px;padding:0;cursor:pointer;
    border-radius:50%;
    background:rgba(7,10,15,.72);
    border:1px solid rgba(var(--rgb-alu),.26);
    color:var(--off-white,#F5F5F7);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    opacity:.55;transition:opacity .2s,background .2s
  }
  .mslider__nav:active{opacity:1;background:rgba(37,99,235,.9);border-color:transparent}
  .mslider__nav svg{width:15px;height:15px}
  .mslider__nav--prev{left:4px}
  .mslider__nav--next{right:4px}

  /* Les points : ou on en est dans les 4 */
  .mslider__dots{
    display:flex;justify-content:center;gap:7px;margin-top:16px
  }
  .mslider__dots b{
    width:6px;height:6px;border-radius:50%;background:rgba(var(--rgb-alu),.3);
    transition:width .25s,background .25s
  }
  .mslider__dots b.is-on{width:18px;border-radius:99px;background:var(--atlas-blue,#2563EB)}
}

/* --- Temoignages en carrousel, TELEPHONE UNIQUEMENT (T4, 14/08) ---------
   Sur ordinateur, .temoignages__grid garde sa grille 3 colonnes (style.css) :
   les 3 avis se lisent d'un coup, un slider y perdrait de la preuve sociale.
   Les cartes prennent 88 % au lieu des 84 % des missions : un temoignage est
   plus haut que large, on veut moins de rognage lateral et juste assez de
   bord visible pour donner envie de glisser. */
@media(max-width:759px){
  #tTrack{
    display:flex;gap:14px;
    grid-template-columns:none;      /* annule la grille de style.css */
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px 0 6px;
  }
  #tTrack::-webkit-scrollbar{display:none}
  #tTrack > .testi-card{
    flex:0 0 88%;
    scroll-snap-align:center;
    margin:0;
  }

  /* --- Methode « 4 etapes » en carrousel, telephone uniquement (14/08) ---
     Sur ordinateur la grille 4 colonnes reste : les etapes se lisent comme
     une sequence de gauche a droite, un slider casserait cette lecture.
     84 % comme les missions — 4 cartes, on veut le bord de la suivante bien
     visible pour signaler qu'il y a une suite. */
  #pTrack{
    display:flex;gap:14px;
    grid-template-columns:none;      /* annule la grille de style.css */
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:4px 0 6px;
  }
  #pTrack::-webkit-scrollbar{display:none}
  #pTrack > .step-card{
    flex:0 0 84%;
    scroll-snap-align:center;
    margin:0;
  }
}

@media (prefers-reduced-motion:reduce){
  #mTrack,#tTrack,#pTrack{scroll-behavior:auto}
}

/* ============================================================
   14. PAGE COCKPIT — blocs réalignés sur la landing de Zied
   Fondateur · Le fossé · Ancrage prix · Garantie · Coffre SSD
   ============================================================ */

.section--tight{padding-block:clamp(28px,5vw,48px)}

/* --- Fondateur : d'où vient le produit --- */
.founder{
  max-width:760px;margin:0 auto;padding:38px clamp(22px,4vw,44px);
  border-radius:var(--radius-lg);
  background:linear-gradient(140deg,rgba(37,99,235,.08),rgba(var(--rgb-inv),.015));
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)
}
.founder p{color:var(--off-white);font-weight:300;line-height:1.75;margin:0 0 18px}
.founder p:last-of-type{margin-bottom:0}
.founder strong{font-weight:600;color:var(--ink-hi)}
.founder__sign{
  margin-top:26px!important;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:.9rem;color:var(--aluminium);font-weight:500
}
.founder__sign i{font-style:normal;font-weight:300;opacity:.75}

/* --- Le fossé : deux colonnes qui s'opposent --- */
.gap-grid{
  display:grid;gap:18px;grid-template-columns:1fr;align-items:stretch;
  max-width:1000px;margin:0 auto
}
.gap-col{
  padding:28px clamp(20px,3vw,30px);border-radius:var(--radius);
  border:1px solid var(--line-soft);background:rgba(var(--rgb-inv),.025)
}
.gap-col h3{
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 18px;font-weight:600
}
.gap-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.gap-col li{
  font-size:.93rem;font-weight:300;line-height:1.55;
  padding-left:26px;position:relative
}
.gap-col--without{opacity:.82}
.gap-col--without h3{color:var(--aluminium)}
.gap-col--without li{color:var(--aluminium)}
.gap-col--without li::before{
  content:"×";position:absolute;left:6px;top:-1px;
  color:rgba(var(--rgb-alu),.55);font-size:1.05rem;line-height:1.5
}
.gap-col--with{
  border-color:rgba(37,99,235,.28);
  background:linear-gradient(150deg,rgba(37,99,235,.10),rgba(var(--rgb-inv),.02))
}
.gap-col--with h3{color:var(--atlas-blue-lite,#5B8DEF)}
.gap-col--with li{color:var(--off-white)}
.gap-col--with li::before{
  content:"✓";position:absolute;left:4px;top:0;
  color:var(--atlas-blue-lite,#5B8DEF);font-size:.86rem;font-weight:700
}
.gap-col--with strong{font-weight:600;color:var(--ink-hi)}
.gap-arrow{
  display:none;align-self:center;font-size:1.4rem;
  color:rgba(37,99,235,.7);padding:0 2px
}
.gap-kicker{
  max-width:620px;margin:34px auto 0;text-align:center;
  color:var(--off-white);font-weight:300;line-height:1.7
}
.gap-kicker strong{font-weight:600;color:var(--ink-hi)}

@media(min-width:900px){
  .gap-grid{grid-template-columns:1fr auto 1fr;gap:14px}
  .gap-arrow{display:block}
}

/* --- Ancrage prix, en sortie du calcul --- */
.anchor-price{
  max-width:340px;margin:30px auto 0;text-align:center;
  padding:22px 26px;border-radius:var(--radius);
  border:1px solid rgba(37,99,235,.3);
  background:linear-gradient(150deg,rgba(37,99,235,.12),rgba(var(--rgb-inv),.02))
}
.anchor-price__from{
  margin:0;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aluminium);font-weight:500
}
.anchor-price__val{margin:8px 0 6px;font-size:1.9rem;font-weight:700;color:var(--ink-hi);line-height:1.1}
.anchor-price__val s{
  font-size:1rem;font-weight:500;color:rgba(var(--rgb-alu),.6);margin-right:10px;
  -webkit-text-fill-color:rgba(var(--rgb-alu),.6)
}
.anchor-price__val b{font-weight:800}
.anchor-price__note{margin:0;font-size:.82rem;color:var(--aluminium);font-weight:300}
.stack__out--last{margin-top:30px;font-weight:300;color:var(--aluminium)}
.stack__out--last strong{font-weight:600;color:var(--off-white)}

/* --- Garantie 30 jours --- */
.guarantee{
  max-width:720px;margin:0 auto;display:flex;align-items:center;gap:20px;
  padding:24px clamp(20px,3vw,32px);border-radius:var(--radius);
  border:1px solid rgba(37,99,235,.28);
  background:linear-gradient(140deg,rgba(37,99,235,.11),rgba(var(--rgb-inv),.02))
}
.guarantee__seal{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;font-size:1.1rem;font-weight:700;color:var(--ink-hi);
  background:var(--grad-blue);box-shadow:0 6px 20px rgba(37,99,235,.35)
}
.guarantee__body{min-width:0}
.guarantee__title{
  margin:0 0 5px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aluminium);font-weight:500
}
.guarantee__line{margin:0;color:var(--off-white);font-weight:300;line-height:1.5;font-size:.98rem}
.guarantee__line b{font-weight:600;color:var(--ink-hi)}
.guarantee__dot{color:rgba(37,99,235,.8);margin:0 8px;font-weight:700}
@media(max-width:560px){
  .guarantee{flex-direction:column;text-align:center;gap:14px}
  .guarantee__dot{display:block;margin:4px 0}
}

/* --- Le coffre : votre vie dans un SSD --- */
.vault{
  display:grid;gap:32px;grid-template-columns:1fr;align-items:center;
  max-width:980px;margin:0 auto;padding:clamp(26px,4vw,44px);
  border-radius:var(--radius-lg);
  background:linear-gradient(140deg,rgba(37,99,235,.09),rgba(var(--rgb-inv),.015));
  border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)
}
.vault__text p{color:var(--off-white);font-weight:300;line-height:1.75;margin:0 0 16px}
.vault__text p:last-child{margin-bottom:0}
.vault__text strong{font-weight:600;color:var(--ink-hi)}
.vault__lead{font-size:1.12rem;font-weight:500!important}
.vault__media{margin:0;text-align:center}
.vault__media img{
  width:100%;max-width:300px;height:auto;display:block;margin:0 auto;
  border-radius:var(--radius);border:1px solid var(--glass-border);
  box-shadow:0 18px 50px rgba(0,0,0,.45)
}
.vault__media figcaption{
  margin-top:16px;display:flex;flex-direction:column;gap:4px;
  font-size:.85rem;color:var(--aluminium);font-weight:300
}
.vault__media figcaption b{font-size:.92rem;font-weight:600;color:var(--off-white)}
@media(min-width:860px){
  .vault{grid-template-columns:1.15fr .85fr;gap:44px}
  .vault__media img{max-width:270px}
}

/* --- Hero : la ligne des domaines --- */
.hero__domains{
  margin:14px auto 0;max-width:640px;text-align:center;
  font-size:.88rem;font-weight:300;color:var(--aluminium);letter-spacing:.01em
}

/* --- Bannière punch : ce n'est pas vous le problème --- */
.punch{
  max-width:760px;margin:48px auto 0;text-align:center;
  padding:34px clamp(22px,4vw,44px);border-radius:var(--radius-lg);
  border:1px solid rgba(37,99,235,.26);
  background:linear-gradient(150deg,rgba(37,99,235,.11),rgba(var(--rgb-inv),.015))
}
.punch__top{
  margin:0;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--aluminium);font-weight:500
}
.punch__hit{
  margin:10px 0 18px;font-size:clamp(1.5rem,4vw,2.1rem);font-weight:700;
  color:var(--ink-hi);line-height:1.15;letter-spacing:-.02em
}
.punch__body{margin:0;color:var(--off-white);font-weight:300;line-height:1.75}
.punch__body strong{font-weight:600;color:var(--ink-hi)}

/* --- Mémoire : étiquettes perso / business --- */
.mem__tag{
  margin:22px 0 10px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--aluminium);font-weight:600
}
.mem__tag:first-child{margin-top:0}

/* Comparatif : on réutilise .cmp-wrap / .cmp de pages.css (composant maison). */

/* --- Parcours : la 5e carte n'est pas une étape, c'est ce qui reste après --- */
.step-card--after{
  border-radius:var(--radius);
  border:1px solid rgba(37,99,235,.28);
  background:linear-gradient(140deg,rgba(37,99,235,.10),rgba(var(--rgb-inv),.015));
  flex-direction:row;align-items:center;gap:22px
}
.step-card__badge{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;font-size:1.35rem;font-weight:700;color:var(--ink-hi);
  background:var(--grad-blue);box-shadow:0 6px 20px rgba(37,99,235,.32)
}
.step-card__body{min-width:0}
.step-card--after h3{margin-bottom:6px}
@media(min-width:700px){
  .step-card--after{grid-column:1/-1;margin-top:6px}
}
@media(max-width:560px){
  .step-card--after{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ============================================================
   16. Page Cockpit — le salar en fond du hero, PARTOUT (14/08)
   Etait limite au telephone depuis le 13/08. Theo tranche le 14/08 :
   le diptyque disparait, l'ordinateur prend la meme image que le tel.
   Un seul fond a tenir au lieu de deux, et la couture centrale du split
   (qui imposait un voile renforce sous le texte) n'existe plus.

   La photo est claire de bout en bout : mesuree entre 125 et 177 de
   luminance, soit 2,14:1 a 4,14:1 pour du texte blanc — illisible telle
   quelle. Opacite 80 % et voile de 66 % en haut a 34 % en bas : les
   contrastes remontent entre 9,59:1 et 12,42:1, et le carnet reste
   lisible en bas ou aucun texte du hero ne passe.
   ============================================================ */
.cpk-hero .hero__bg--split{display:none}
.cpk-hero__salt{display:block;position:absolute;inset:0;z-index:0;overflow:hidden}
/* selecteur renforce : .cpk-hero .hero__bg img imposait opacity .45 */
.cpk-hero .hero__bg.cpk-hero__salt img{
  width:100%;height:100%;object-fit:cover;object-position:center 62%;
  opacity:.8;filter:none;display:block
}
/* Voile recalibre le 14/08. L'ancienne courbe tombait a .34 en bas au motif
   qu'« aucun texte du hero ne passe » la : c'etait faux. Mesure au navigateur,
   la ligne des domaines occupe 75-77 % de la hauteur du hero, les boutons
   77-83 %, et la barre de preuve 87-91 % — tout ca sur le carnet, la zone la
   plus claire de la photo (luminance 177).
   A .34 le composite tombait a 120, soit 4,4:1 pour du texte blanc : sous le
   seuil AA de 4,5:1. A .62 il tombe a 74, soit ~8,9:1. On garde le carnet
   visible, on rend le texte lisible. */
.cpk-hero .hero__veil{
  background:linear-gradient(180deg,
    rgba(7,10,15,.70) 0%,
    rgba(7,10,15,.64) 35%,
    rgba(7,10,15,.58) 60%,
    rgba(7,10,15,.62) 82%,
    rgba(7,10,15,.68) 100%)
}
/* L'image source est un portrait 900x1200. En paysage, object-fit:cover
   coupe donc massivement en hauteur : on remonte le cadrage pour garder
   le sujet, la ou le telephone descendait a 62 % pour montrer le carnet. */
@media(min-width:761px){
  .cpk-hero .hero__bg.cpk-hero__salt img{object-position:center 48%}
}

/* ============================================================
   Accueil épuré — 20/08/2026 (demande Théo, reprise du retour Timour
   sur tryholo : « l'espace, le peu de texte »).
   Les 4 missions de l'accueil passent de cartes détaillées à des TUILES :
   nom, promesse, délai, prix, lien. Le détail complet reste sur /missions,
   qu'elles dupliquaient intégralement — 296 mots sur 1 967 px, zéro visuel.
   ============================================================ */
.m__tile-price{
  font-size:1.55rem; font-weight:700; letter-spacing:-.015em;
  color:var(--ink-hi); margin:20px 0 2px;
}
.m__tile-note{
  font-size:.82rem; color:rgba(var(--rgb-alu),.92);
  margin:0 0 18px;
}

/* Expertises rappelées en bas à gauche du pied de page.
   SEO et GEO sont les canaux qu'on alimente, Ads ceux qu'on pilote. */
.footer__exp{
  margin-top:12px; font-size:.79rem; line-height:1.7;
  color:rgba(var(--rgb-alu),.9); letter-spacing:.015em;
}

/* ============================================================
   PREUVE CHIFFRÉE — 20/08/2026
   4 chiffres sous le hero, façon tryholo. Sobre : le chiffre porte,
   pas la décoration. Les compteurs s'animent une seule fois, à l'entrée
   dans le champ de vision.
   ============================================================ */
.stats{ padding:clamp(44px,6vw,72px) 0 clamp(28px,4vw,44px) }
.stats__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,40px); align-items:start;
}
.stat{ text-align:center; position:relative }
/* ⚠️ PAS de font-variant-numeric:tabular-nums : les chiffres tabulaires de
   Plus Jakarta Sans sont a chasse fixe, ils sortaient du rythme du site.

   20/08 — deuxieme passe. Le premier reglage (graisse 800, tracking -.045em,
   signes bleus rapetisses) faisait « affiche », pas Studio Atlas. Les chiffres
   reprennent maintenant EXACTEMENT le traitement des titres de section :
   graisse 700, tracking -.03em, une seule encre. Les signes + % x sont a la
   meme graisse que les chiffres, juste un cran plus petits : ils font partie
   du nombre, ils ne le decorent pas. */
.stat__val{
  display:flex; align-items:baseline; justify-content:center; gap:0;
  font-size:clamp(2.05rem,4.1vw,2.95rem);   /* 20/08 : descendu d'un cran, demande Theo */
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--ink-hi);
  font-variant-numeric:proportional-nums lining-nums;
}
.stat__num{ display:inline-block; text-align:center }
.stat__num[data-to],
.stat__num--roll{ min-width:1.05ch }          /* pas de saut de largeur pendant l'animation */
.stat__sign{
  font-size:.68em;
  font-weight:700;
  color:inherit;                               /* plus de bleu : une seule encre */
  letter-spacing:-.03em;
}
.stat__num[data-suffix]::after{
  content:attr(data-suffix); font-size:.42em; vertical-align:super;
  margin-left:.04em; font-weight:700; letter-spacing:0;
}
.stat__lab{
  margin:10px auto 0; max-width:230px;
  font-size:.86rem; line-height:1.45; color:rgba(var(--rgb-alu),.95);
}
.stats__note{
  margin:14px auto 0; text-align:center;   /* rapproche des chiffres (20/08) */
  font-size:.74rem; color:rgba(var(--rgb-alu),.75);
}

/* Le compteur qui défile : il tourne tant qu'on ne le touche pas. */
.stat--roll{ cursor:pointer; border-radius:16px; padding:6px 4px; transition:background .2s }
.stat--roll:hover, .stat--roll:focus-visible{ background:rgba(var(--rgb-inv),.05); outline:none }
.stat__hint{
  display:block; margin-top:6px; font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(var(--rgb-alu),.6);
  opacity:0; transition:opacity .25s;
}
.stat--roll:hover .stat__hint,
.stat--roll:focus-visible .stat__hint{ opacity:1 }
.stat__num--roll{ transition:color .2s }
.stat--roll.is-stopped .stat__num--roll{ color:var(--atlas-blue) }

@media(max-width:900px){ .stats__grid{ grid-template-columns:repeat(2,1fr); row-gap:34px } }
@media(max-width:420px){ .stats__grid{ grid-template-columns:1fr } }

/* Accessibilité : personne ne subit une animation qu'il n'a pas demandée. */
@media (prefers-reduced-motion:reduce){
  .stat__num--roll{ animation:none !important }
  .stat--roll .stat__hint{ display:none }
}

/* « Faites glisser pour explorer » retire le 20/08 (demande Théo) :
   le carrousel se comprend sans legende, et la ligne alourdissait la page. */
.cflow__hint{ display:none !important }

/* ============================================================
   Accueil — resserrage des espaces inter-sections (20/08/2026)
   Demande Théo. Même logique que la page Cockpit le 13/08 :
   à 1440 px, --section-pad vaut 140 px en haut ET en bas, soit
   280 px de vide entre deux idées. Sur un accueil qu'on vient
   d'épurer, ça donne des écrans vides à traverser.
   Scopé à .page-home : les autres pages ne bougent pas.
   ============================================================ */
.page-home .section{ padding:clamp(52px,6vw,88px) 0 }
.page-home .section__head{ margin-bottom:clamp(26px,3vw,40px) }
.page-home .stats{ padding:clamp(34px,4.4vw,54px) 0 clamp(22px,3vw,34px) }
.page-home .proof{ padding:clamp(26px,3.4vw,42px) 0 }
.page-home .cta-final{ padding:clamp(56px,6.4vw,92px) 0 }
/* une section qui ne porte que son titre n'a pas besoin de sa marge basse */
.page-home .container > .section__head:only-child{ margin-bottom:0 }

/* ═══════════════════════════════════════════════════════════════
   INSTAGRAM — mur des 3 dernieres publications  (20/08)
   Vit dans v3.css et non dans pages.css : la section sert sur l'accueil
   ET sur /realisations, or index.html ne charge pas pages.css.
   Ecrit avec --rgb-inv / --ink-hi : la section suit le theme sans
   avoir besoin d'une copie dans theme-clair.css.
   ═══════════════════════════════════════════════════════════════ */
.ig-card{
  max-width:960px;margin:0 auto;
  border:1px solid rgba(var(--rgb-inv),.10);
  border-radius:24px;
  background:rgba(var(--rgb-inv),.035);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:clamp(18px,2.4vw,28px);
  box-shadow:0 18px 44px -30px rgba(0,0,0,.45);
}
.ig-card__head{
  display:flex;align-items:center;gap:18px;
  padding-bottom:clamp(16px,2vw,22px);margin-bottom:clamp(16px,2vw,22px);
  border-bottom:1px solid rgba(var(--rgb-inv),.09);
}
.ig-card__id{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:0}
.ig-card__ava{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:rgba(var(--rgb-inv),.06);
  /* L'anneau Instagram, repris en bleu Atlas plutot qu'en degrade rose :
     on ne porte pas la DA d'une plateforme sur notre propre page. */
  box-shadow:0 0 0 2px var(--obsidian),0 0 0 4px rgba(37,99,235,.55);
}
.ig-card__ava img{width:34px;height:34px;object-fit:contain}
.ig-card__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.ig-card__who strong{font-size:1.02rem;font-weight:700;color:var(--ink-hi);letter-spacing:-.01em}
.ig-card__who span{font-size:.84rem;color:rgba(var(--rgb-inv),.58)}
.ig-card__stats{margin-left:auto;display:flex;gap:26px}
.ig-stat{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.ig-stat b{
  font-size:1.32rem;font-weight:800;color:var(--ink-hi);letter-spacing:-.02em;
  /* Pas de font-variant-numeric ici : le rendu tabulaire avait ete
     refuse le 20/08, trop technique pour la DA. */
}
.ig-stat i{font-style:normal;font-size:.73rem;text-transform:uppercase;letter-spacing:.09em;color:rgba(var(--rgb-inv),.5);margin-top:3px}
.ig-card__follow{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;font-size:.86rem}

.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ig-post{
  position:relative;display:block;aspect-ratio:1;overflow:hidden;
  border-radius:16px;border:1px solid rgba(var(--rgb-inv),.10);
  background:rgba(var(--rgb-inv),.05);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s;
}
.ig-post img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ig-post:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(0,0,0,.55)}
.ig-post:hover img{transform:scale(1.06)}
.ig-post__type{position:absolute;top:10px;right:10px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));display:grid;place-items:center}
.ig-post__foot{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;
  font-size:.76rem;font-weight:600;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));
}
@media (max-width:760px){
  .ig-card{border-radius:20px}
  .ig-card__head{flex-wrap:wrap;gap:12px}
  .ig-card__stats{margin-left:auto}
  .ig-card__follow{width:100%;justify-content:center}
  .ig-grid{gap:9px}
  .ig-post{border-radius:12px}
  .ig-post__foot{font-size:.68rem;padding:20px 8px 7px}
}