/* ==========================================================================
   Cieva — habillage : verre dépoli, survol orange, révélations, responsive.
   Les styles de fond viennent de base.css et des attributs style du markup ;
   ce fichier ne fait que poser la couche par-dessus.
   ========================================================================== */

:root{
  --orange:#ff6a13;
  --orange-clair:#ffb27a;
  --fond:#05050a;
  --verre:rgba(255,255,255,.045);
  --verre-bord:rgba(255,255,255,.10);
  --duree:.7s;
  --courbe:cubic-bezier(.22,.68,.28,1);
}

html{scroll-behavior:smooth}
body{overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto}


/* --------------------------------------------------------------- 1. VERRE */

/* barre de navigation : verre dépoli qui se densifie au défilement */
.navbar{
  background:rgba(5,5,10,.55) !important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
body.scrolled .navbar{
  background:rgba(5,5,10,.82) !important;
  border-bottom-color:rgba(255,255,255,.07);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}

/* cartes : fond translucide + flou, au lieu du dégradé plein */
.card{
  position:relative;
  transition:border-color .35s var(--courbe),
             background .35s var(--courbe),
             box-shadow .45s var(--courbe),
             transform .45s var(--courbe);
}

/* seules les cartes neutres passent en verre ; les cartes mises en avant
   gardent leur bord et leur fond orange d'origine */
.card:not(.card-accent){
  background:var(--verre) !important;
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-color:var(--verre-bord) !important;
  transition:border-color .35s var(--courbe),
             background .35s var(--courbe),
             box-shadow .45s var(--courbe),
             transform .45s var(--courbe);
}

/* liseré de lumière sur l'arête haute — le reflet du verre */
.card:not(.card-accent)::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.85;
}


/* ------------------------------------------------------- 2. SURVOL ORANGE */

.card:not(.card-accent):hover{
  background:rgba(255,106,19,.08) !important;
  border-color:rgba(255,106,19,.55) !important;
  box-shadow:0 24px 66px rgba(255,106,19,.22),
             0 0 0 1px rgba(255,106,19,.22),
             inset 0 1px 0 rgba(255,180,120,.16);
  transform:translateY(-3px);
}

/* la carte mise en avant : son halo orange s'intensifie */
.card-accent{transition:box-shadow .45s var(--courbe), transform .45s var(--courbe)}
.card-accent:hover{
  transform:translateY(-3px);
  box-shadow:0 36px 110px rgba(255,106,19,.30) !important;
}

/* halo qui suit la souris à l'intérieur de la carte */
.card::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
             rgba(255,106,19,.26),transparent 64%);
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.card:hover::after{opacity:1}

/* le contenu de la carte passe devant les deux pseudo-éléments */
.card > *{position:relative;z-index:1}

a{transition:color .25s ease, opacity .25s ease}
a:hover{color:var(--orange-clair)}

.btn{
  position:relative;
  transition:transform .3s var(--courbe), box-shadow .35s var(--courbe),
             border-color .3s ease, background .3s ease, color .3s ease;
}
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,106,19,.45) !important;
  color:#fff;
}
.btn-p:hover{
  color:#150600 !important;
  box-shadow:0 14px 44px rgba(255,106,19,.55),0 0 0 6px rgba(255,106,19,.10) !important;
}
.btn:not(.btn-p):hover{
  background:rgba(255,106,19,.10) !important;
  box-shadow:0 10px 32px rgba(255,106,19,.16);
}

/* liens de la nav : soulignement orange qui se déploie */
nav a,
.navbar a:not(.btn){position:relative}
.navbar a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--courbe);
}
.navbar a:not(.btn):hover::after{transform:scaleX(1)}

/* champ email */
input{transition:color .25s ease}
form:focus-within{
  border-color:rgba(255,106,19,.45) !important;
  box-shadow:0 0 0 4px rgba(255,106,19,.08);
}


/* --------------------------------------------- 2 bis. MENU MOBILE */

.burger{
  display:none;
  margin-left:auto;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  border-radius:12px;
  border:1px solid var(--verre-bord);
  background:var(--verre);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  transition:border-color .3s ease, background .3s ease;
}
.burger:hover{border-color:rgba(255,106,19,.45);background:rgba(255,106,19,.10)}
.burger span{
  display:block;width:17px;height:1.5px;border-radius:2px;background:#fff;
  transition:transform .32s var(--courbe), opacity .2s ease;
}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.menu-mobile{
  position:fixed;
  top:64px;left:12px;right:12px;
  z-index:49;
  display:flex;flex-direction:column;gap:2px;
  padding:14px;
  border-radius:20px;
  border:1px solid var(--verre-bord);
  background:rgba(10,9,15,.86);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  opacity:0;transform:translateY(-10px);
  transition:opacity .3s var(--courbe), transform .3s var(--courbe);
}
.menu-mobile[hidden]{display:none}
.menu-mobile.ouvert{opacity:1;transform:none}
.menu-mobile a{
  padding:13px 12px;
  border-radius:12px;
  font-size:15px;font-weight:400;
  color:rgba(255,255,255,.78);
  transition:background .25s ease, color .25s ease;
}
.menu-mobile a:hover,.menu-mobile a:focus-visible{
  background:rgba(255,106,19,.10);color:#fff;
}
.menu-mobile .menu-cta{
  margin-top:8px;text-align:center;
  background:var(--orange);color:#150600 !important;font-weight:600;
  border-radius:100px;
  box-shadow:0 10px 30px rgba(255,106,19,.4);
}


/* ------------------------------------------------- 3. TITRES FANTÔMES */

.sec{position:relative}
.ghost{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:center;
  pointer-events:none;user-select:none;
  overflow:hidden;
  z-index:0;
}
.ghost span{
  display:block;
  font-size:clamp(72px,13vw,190px);
  font-weight:600;
  letter-spacing:-.05em;
  line-height:1;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.055);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 78%);
  -webkit-background-clip:text;background-clip:text;
  transform:translateY(var(--ghost-y,0px));
  will-change:transform;
}
.sec > .wrap{position:relative;z-index:1}


/* ------------------------------------------------------ 4. RÉVÉLATIONS */

@media (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity var(--duree) var(--courbe),
               transform var(--duree) var(--courbe);
    transition-delay:var(--d,0ms);
  }
  .reveal.in{opacity:1;transform:none}

  /* les mockups arrivent de plus loin, avec une bascule légère */
  .wide.reveal{
    transform:translateY(48px) scale(.965);
  }
  .wide.reveal.in{transform:none}
}

/* lueur orange qui monte sous les mockups quand ils apparaissent */
.wide{position:relative}
.sec:not(.sec-hero) .wide.in::before{
  content:"";
  position:absolute;left:6%;right:6%;bottom:-10%;height:34%;
  background:radial-gradient(ellipse at 50% 100%,
             rgba(255,106,19,.30),rgba(255,106,19,0) 70%);
  filter:blur(28px);
  opacity:0;animation:lueur 1.4s var(--courbe) .25s forwards;
  pointer-events:none;z-index:-1;
}
@keyframes lueur{to{opacity:1}}


/* -------------------------------------------------------- 5. RESPONSIVE */

/* --- tablette large : on resserre les gouttières --- */
@media (max-width:1180px){
  .wrap{padding-left:24px !important;padding-right:24px !important}
  .t-h1{font-size:clamp(40px,6.4vw,72px) !important}
  .t-h2{font-size:clamp(28px,4.2vw,42px) !important}
}

/* --- tablette : les grilles de 3 et 4 passent à 2 --- */
@media (max-width:980px){
  .sec{padding-top:68px !important}
  .g3,.g4{grid-template-columns:repeat(2,1fr) !important}
  .gx{grid-template-columns:1fr !important}
  .ghost span{font-size:clamp(56px,15vw,120px)}

  /* les mockups larges sont réduits au lieu de déborder.
     Le hero est exclu : son arc et son tableau de bord sont positionnés en
     absolu les uns par rapport aux autres, on les met à l'échelle en bloc. */
  .sec:not(.sec-hero) .wide{
    width:100% !important;
    max-width:100% !important;
    left:auto !important;
    transform:none !important;
    position:relative !important;
    top:auto !important;
  }

  .hero-visu{
    height:390px !important;
    transform:scale(.7);
    transform-origin:top center;
  }
}

/* --- la barre se replie dès que les liens commencent à serrer --- */
@media (max-width:900px){
  .navbar > div{gap:12px !important;padding:0 24px !important}
  .nav-links{display:none !important}
  .burger{display:flex}
  .navbar .btn-p{display:none !important}
}

/* --- mobile --- */
@media (max-width:700px){
  .wrap{padding-left:18px !important;padding-right:18px !important}
  .sec{padding-top:56px !important;padding-bottom:0 !important}
  .g3,.g4,.gx{grid-template-columns:1fr !important;gap:14px !important}

  .t-h1{font-size:clamp(32px,9vw,44px) !important;line-height:1.1 !important}
  .t-h2{font-size:clamp(25px,6.4vw,32px) !important;line-height:1.16 !important}
  .t-h3{font-size:17px !important}

  .card{padding:20px 18px !important}

  /* la carte mise en avant ne doit plus se décaler vers le haut */
  .card[style*="translateY(-12px)"]{transform:none !important}

  .btn{padding:10px 16px !important;font-size:12.5px !important}

  /* formulaire de contact : le bouton passe sous le champ */
  form{
    flex-direction:column !important;
    align-items:stretch !important;
    border-radius:16px !important;
    padding:8px !important;
    gap:8px !important;
  }
  form input{padding:12px 14px !important}
  form button{width:100% !important}

  /* mockup dashboard : on autorise le défilement latéral plutôt que l'écrasement */
  .wide{overflow-x:auto !important;-webkit-overflow-scrolling:touch}

  /* le visuel du hero (arc + tableau de bord) est mis à l'échelle en bloc,
     sinon il déborde de plusieurs centaines de pixels */
  .hero-visu{
    height:190px !important;
    margin-top:-6px !important;
    transform:scale(.55);
    transform-origin:top center;
  }
  /* le tableau de bord est illisible à cette largeur : on ne garde que l'arc.
     Le même écran est montré en grand dans la section Produits. */
  .hero-visu div[style*="width:980px"]{display:none !important}

  .ghost span{font-size:clamp(44px,17vw,86px)}
}

/* --- très petit écran --- */
@media (max-width:400px){
  .t-h1{font-size:29px !important}
  .card{padding:17px 15px !important}
}

/* --- accessibilité --- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important}
  .ghost span{transform:none !important}
}


/* ------------------------------------- 6. VISUELS ANIMÉS (vidéos IA) */

/* Une vidéo générée par IA n'a pas de fond transparent. Générée sur fond
   noir, le mode « screen » rend ce noir invisible : seul l'objet lumineux
   reste. Voir PROMPTS-IA.md. */
.objet-3d{
  display:block;
  width:100%;
  height:auto;
  mix-blend-mode:screen;
  pointer-events:none;
  opacity:.92;
  /* les bords du cadre vidéo se fondent dans la page : si le modèle a laissé
     des particules ou un fond pas tout à fait noir, le rectangle ne se voit
     plus. */
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 76%);
  mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 76%);
}

/* le fond du hero se place derrière le contenu, pleine largeur */
/* Lever de soleil filmé, en fond de section. Un léger flou lisse les bandes
   de compression que la vidéo produit sur les dégradés sombres. */
.objet-3d.fond-section{
  position:absolute;
  left:50%;
  bottom:-6%;
  width:130%;
  max-width:none;
  transform:translateX(-50%);
  height:auto;
  z-index:0;
  opacity:.5;
  filter:blur(1.5px);
  -webkit-mask-image:radial-gradient(ellipse 62% 100% at 50% 60%,#000 26%,transparent 72%);
  mask-image:radial-gradient(ellipse 62% 100% at 50% 60%,#000 26%,transparent 72%);
}

@media (prefers-reduced-motion:reduce){
  .objet-3d{display:none}
}


/* ---------------------------------- 7. PLACEMENT DES VISUELS ANIMÉS */

/* Décor de section : posé sur le côté, derrière le contenu, jamais au
   milieu de la lecture. Retiré sous 1100px, où il n'y a plus la place. */
.visuel{
  position:absolute;
  /* décalage fixe : sur une section haute, un pourcentage ferait descendre
     l'objet au milieu du contenu */
  top:44px;
  width:clamp(220px,22vw,340px);
  z-index:0;
  opacity:.75;
  pointer-events:none;
}
.visuel-droite{right:-1%}
.visuel-gauche{left:-1%}

@media (max-width:1100px){
  .visuel{display:none}
}

/* L'onde vocale est un objet allongé : masque horizontal plutôt que
   circulaire, sinon ses extrémités sont rognées. */
.visuel.large{width:clamp(300px,30vw,460px)}
.visuel.large .objet-3d{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}


/* ============================================================
   8. LE HERO SE TRANSFORME PENDANT QU'ON DESCEND
   --p va de 0 (haut de page) à 1 (hero presque sorti), calculé
   en JavaScript à chaque défilement.
   ============================================================ */

.sec-hero{--p:0}

/* l'arc solaire enfle et remonte : on passe devant lui */
.sec-hero .arc{
  transform:translateX(-50%) translateY(calc(var(--p) * -300px))
            scale(calc(1 + var(--p) * 0.55)) !important;
  transform-origin:50% 0;
  will-change:transform;
  /* la source de lumière suit le point qui glisse sur la courbe */
  background:radial-gradient(circle at var(--lpc,50%) 0%,
             rgba(255,132,40,.5) 0%,
             rgba(255,90,20,.14) 9%,
             rgba(255,90,20,.03) 18%,
             rgba(0,0,0,0) 26%) !important;
}

/* le halo blanc du sommet suit, un peu plus vite */
/* Le point lumineux : il ne monte pas tout droit, il glisse le long de la
   courbe du globe. --lx et --ly sont calculés en JavaScript à partir de
   l'angle parcouru. */
.sec-hero .halo{
  transform:translateX(calc(-50% + var(--lx,0px)))
            translateY(calc(var(--ly,0px) + var(--p) * -340px))
            scale(calc(1 + var(--p) * 1.5)) !important;
  transform-origin:50% 100%;
  opacity:calc(1 - var(--p) * 0.4);
  will-change:transform;
}



/* le tableau de bord reste immobile : c'est le seul élément fixe du hero,
   tout le reste (arc, halo, texte) défile autour de lui. */
.sec-hero .mock-hero{
  transform:translateX(-50%) !important;
  transform-origin:50% 0;
}

/* le texte d'accueil s'efface et monte pendant qu'on le quitte */
.sec-hero > .wrap{
  opacity:calc(1 - var(--p) * 1.5);
  transform:translateY(calc(var(--p) * -90px));
  will-change:transform,opacity;
}

@media (prefers-reduced-motion:reduce){
  .sec-hero .arc,.sec-hero .halo,
  .sec-hero .mock-hero,.sec-hero > .wrap{
    transform:translateX(-50%) !important;
    opacity:1 !important;
  }
  .sec-hero > .wrap{transform:none !important}
}

/* Sous 900px l'arc filmé est trop large pour que son cadre se fonde :
   on garde le seul arc dessiné, qui suffit à cette taille. */
@media (max-width:900px){
  .objet-3d.fond-section{display:none}
}


/* L'arc du hero respire : dégradé calculé par le navigateur, donc lisse.
   Une vidéo compressée à sa place cassait le dégradé en bandes. */
@keyframes souffle{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
}
@media (prefers-reduced-motion:no-preference){
  .sec-hero .arc{animation:souffle 7s ease-in-out infinite}
  .sec-hero .halo{animation:souffle 7s ease-in-out infinite .4s}
}

/* La sphère orbitale remplit tout son cadre : fondu elliptique sur les
   quatre bords, sinon le rectangle de la vidéo se voit. */
.visuel.orbe{width:clamp(300px,32vw,480px)}
.visuel.orbe .objet-3d{
  -webkit-mask-image:radial-gradient(ellipse 50% 58% at 50% 50%,#000 34%,transparent 80%);
  mask-image:radial-gradient(ellipse 50% 58% at 50% 50%,#000 34%,transparent 80%);
}


/* ============================================================
   9. GALERIE D'APPLICATIONS
   Des cartes claires et colorées au milieu d'un site sombre :
   c'est le contraste qui les fait exister.
   ============================================================ */

.apps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin:0 0 52px;
}

.app{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
  color:#12121a;
  transition:transform .5s var(--courbe), box-shadow .5s var(--courbe);
}

/* le fond clair, propre à chaque application */
.app::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:var(--fond-app);
}

.app-sielo{--fond-app:linear-gradient(150deg,#eef4f8,#cfe0ea 55%,#a9c6d8);
           --a:#1b6ea8; --b:#4fb0d8}
.app-vela {--fond-app:linear-gradient(150deg,#f2f7ee,#d8ebd2 55%,#b2d8b6);
           --a:#2f7a45; --b:#7fc98a}
.app-lyra {--fond-app:linear-gradient(150deg,#f6f0f8,#e6d6ee 55%,#cdb4e2);
           --a:#6b3f9e; --b:#b98ada}
.app-hote {--fond-app:linear-gradient(150deg,#fdf1ec,#f8d9cd 55%,#f2b9a3);
           --a:#b5502c; --b:#f09a72}

/* trois formes floues composent un visuel abstrait, sans image à charger */
.app-visu{position:absolute;inset:0;z-index:1;overflow:hidden}
.app-visu span{
  position:absolute;
  border-radius:50%;
  filter:blur(var(--flou,18px));
  transition:transform 1.1s var(--courbe);
}
.app-visu .f1{
  width:64%;aspect-ratio:1;left:12%;top:16%;
  background:radial-gradient(circle at 35% 30%,var(--b),var(--a) 70%);
  --flou:2px;
  box-shadow:0 26px 60px rgba(0,0,0,.16);
}
.app-visu .f2{
  width:38%;aspect-ratio:1;right:6%;bottom:24%;
  background:radial-gradient(circle at 40% 35%,#fff,var(--b) 78%);
  --flou:1px;opacity:.92;
}
.app-visu .f3{
  width:120%;height:46%;left:-10%;bottom:-14%;
  border-radius:44% 56% 50% 50%;
  background:linear-gradient(120deg,var(--a),transparent 72%);
  --flou:26px;opacity:.5;
}

/* le petit bouton en coin, comme sur la référence */
.app-fleche{
  position:absolute;top:14px;right:14px;z-index:3;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#1b1b24;
  transition:background .3s ease, color .3s ease, transform .35s var(--courbe);
}
.app-fleche svg{width:13px;height:13px;display:block}

/* l'étiquette : repliée au repos, elle se déploie au survol */
.app-tag{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:3;
  display:block;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  transform:translateY(calc(100% + 10px));
  opacity:0;
  transition:transform .5s var(--courbe), opacity .35s ease;
}
.app-nom{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em}
.app-metier{display:block;margin-top:2px;font-size:11.5px;color:rgba(20,20,30,.6)}
.app-phrase{
  display:block;margin-top:8px;font-size:12.5px;line-height:1.5;
  color:rgba(20,20,30,.72);
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--courbe);
}

/* au repos, seul le nom dépasse ; au survol, tout se déplie */
.app-tag{transform:translateY(calc(100% - 44px));opacity:1}
.app:hover .app-tag,.app:focus-visible .app-tag{transform:translateY(0)}
.app:hover .app-phrase,.app:focus-visible .app-phrase{max-height:70px}

.app:hover,.app:focus-visible{
  transform:translateY(-8px);
  box-shadow:0 30px 70px rgba(0,0,0,.45),
             0 0 0 1px rgba(255,255,255,.10);
}
.app:hover .app-visu .f1{transform:scale(1.07) translateY(-6px)}
.app:hover .app-visu .f2{transform:scale(1.12) translate(-8px,-10px)}
.app:hover .app-fleche{background:#12121a;color:#fff;transform:rotate(0) scale(1.06)}

@media (max-width:980px){
  .apps{grid-template-columns:repeat(2,1fr) !important}
}

/* Sur écran tactile il n'y a pas de survol : l'étiquette est déjà dépliée. */
@media (hover:none){
  .app-tag{transform:translateY(0)}
  .app-phrase{max-height:70px}
}

@media (max-width:700px){
  .apps{grid-template-columns:1fr !important;gap:14px !important;margin-bottom:34px}
  .app{aspect-ratio:16/10}
  /* pas de survol au doigt : l'étiquette est dépliée d'emblée */
  .app-tag{transform:translateY(0)}
  .app-phrase{max-height:70px}
  .app-visu .f1{width:42%;left:auto;right:8%;top:10%}
  .app-visu .f2{width:24%;right:44%;bottom:16%}
}

/* la carte est un lien : le survol orange du site rendrait le titre illisible
   sur ce fond clair */
.app:hover,.app:focus-visible,.app:hover .app-nom{color:#12121a}


/* ============================================================
   10. L'ARC FILMÉ, PILOTÉ PAR LE DÉFILEMENT
   La vidéo ne joue pas toute seule : sa position de lecture suit
   la descente. Tu remontes, elle revient en arrière.
   ============================================================ */

.arc-video{
  position:absolute;
  left:50%;
  /* l'arc occupe le tiers bas du cadre filmé : on remonte la vidéo pour que
     cet arc tombe là où était l'arc dessiné */
  top:-352px;
  width:112%;
  max-width:none;
  height:auto;
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none;
  /* pas de mix-blend-mode ici : le conteneur du hero forme un contexte de
     composition isolé, le mode « screen » s'y annule et la vidéo
     disparaît entièrement. Le fond de la vidéo est noir pur, celui de la
     page presque : seul le fondu des bords est nécessaire. */
  /* franc à l'arrivée sur la page, plus discret quand le tableau de bord
     remonte et a besoin d'être lisible */
  opacity:calc(.78 - var(--p,0) * .34);
  -webkit-mask-image:radial-gradient(ellipse 70% 52% at 50% 74%,#000 52%,transparent 92%);
  mask-image:radial-gradient(ellipse 70% 52% at 50% 74%,#000 52%,transparent 92%);
}

/* l'arc dessiné en CSS laisse la place : deux arcs superposés se
   contrarient, et le dégradé de la vidéo suffit ici puisqu'il est seul */
.sec-hero:has(.arc-video) .arc,
.sec-hero:has(.arc-video) .halo{display:none}

@media (max-width:900px){
  .arc-video{width:220%}
}

@media (prefers-reduced-motion:reduce){
  .arc-video{display:none}
  .sec-hero:has(.arc-video) .arc,
  .sec-hero:has(.arc-video) .halo{display:block}
}


/* ============================================================
   11. TABLEAU DE BORD DU HERO — trois produits qui se relaient
   Sielo, Vela puis Lyra. Chacun apporte sa couleur : c'est le
   seul bloc du site qui n'est pas orange. Rien n'est cliquable,
   mais le survol des pastilles laisse croire que ça l'est.
   ============================================================ */

.db{font-size:13px;color:#fff}

/* --- barre de titre --- */
.db-barre{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}
.db-pastilles{display:flex;gap:6px}

/* chaque pastille porte un produit : éteinte, elle est grise ; celle du
   produit affiché s'allume dans sa couleur. */
.db-pastille{
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.14);
  display:block;position:relative;
  cursor:pointer;
  transition:background .45s var(--courbe), box-shadow .45s var(--courbe),
             transform .25s var(--courbe);
}
.db-pastille.est-actif{
  background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* faux bouton : au survol il se soulève et s'éclaircit, sans rien déclencher */
.db-pastille:hover{transform:scale(1.25);background:color-mix(in srgb, var(--accent) 70%, #fff)}
.db-pastille i{
  position:absolute;inset:-6px;
  border-radius:50%;
  display:block;
}

.db-onglets{position:relative;display:inline-block;min-width:250px;height:14px}
.db-onglet{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-size:11.5px;color:rgba(255,255,255,.4);
  opacity:0;transform:translateY(4px);
  transition:opacity .5s var(--courbe), transform .5s var(--courbe);
}
.db-onglet.est-visible{opacity:1;transform:none}

.db-etat{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  font-size:10.5px;color:rgba(255,255,255,.4);
}
.db-etat i{
  width:6px;height:6px;border-radius:50%;
  background:#3fb950;box-shadow:0 0 0 3px rgba(63,185,80,.16);
  display:block;
}

/* --- les trois vues empilées : une seule visible, fondu entre elles --- */
.db-vues{position:relative;min-height:392px}
.db-vue{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transform:translateY(8px);
  transition:opacity .55s var(--courbe), transform .55s var(--courbe),
             visibility 0s linear .55s;
}
.db-vue.est-visible{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .55s var(--courbe), transform .55s var(--courbe),
             visibility 0s;
}

.db-corps{display:grid;grid-template-columns:170px 1fr 232px;min-height:392px}

/* --- colonne de gauche --- */
.db-nav{
  border-right:1px solid rgba(255,255,255,.06);
  padding:14px 10px;
  display:flex;flex-direction:column;gap:3px;
  background:rgba(255,255,255,.012);
}
.db-nav-titre{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.35);padding:8px 10px 5px;
}
.db-nav-titre + .db-nav-titre,
.db-nav-item + .db-nav-titre{padding-top:14px}
.db-nav-item{
  display:flex;align-items:center;gap:9px;
  padding:6px 10px;border-radius:6px;
  font-size:13px;color:rgba(255,255,255,.55);
}
.db-nav-item.est-actif{background:rgba(255,255,255,.07);color:#fff}
.db-puce{
  width:6px;height:6px;border-radius:2px;display:block;
  background:currentColor;opacity:.5;
}
.db-nav-item.est-actif .db-puce{opacity:1}

/* --- colonne centrale --- */
.db-centre{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.db-entete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.db-titre{font-size:15px;font-weight:500}
.db-badge{
  font-size:10.5px;padding:3px 8px;border-radius:100px;
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6);
}
.db-lignes{display:flex;flex-direction:column;gap:6px}
.db-ligne{
  display:grid;grid-template-columns:52px 1fr 96px 88px;
  gap:12px;align-items:center;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.07);border-radius:8px;
  background:rgba(255,255,255,.03);
  font-size:13px;
}
.db-heure{font-size:11.5px;color:rgba(255,255,255,.4)}
.db-qui{
  display:flex;align-items:center;gap:8px;min-width:0;
  color:rgba(255,255,255,.7);font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.db-jeton{
  width:20px;height:20px;border-radius:50%;
  color:#0a0a12;font-size:9.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.db-ligne .db-badge{text-align:center}
.db-jauge{
  height:5px;border-radius:3px;
  background:rgba(255,255,255,.08);
  overflow:hidden;display:block;
}
.db-jauge > span{display:block;height:100%;border-radius:3px}

/* --- colonne de droite --- */
.db-cote{
  border-left:1px solid rgba(255,255,255,.06);
  padding:16px 14px;
  display:flex;flex-direction:column;gap:14px;
  background:rgba(255,255,255,.012);
}
.db-vignette{
  height:96px;border-radius:8px;
  border:1px solid rgba(255,255,255,.07);
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.03);
}
.db-grille{
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 16px,
             linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/16px 100%,
             rgba(255,255,255,.03);
}
.db-route{
  position:absolute;left:14%;top:60%;
  width:66%;height:2px;border-radius:2px;
  transform:rotate(-16deg);display:block;
}
.db-point{
  position:absolute;width:8px;height:8px;border-radius:50%;display:block;
}
.db-plan{position:absolute;height:9px;border-radius:3px;display:block;opacity:.85}
.db-onde{
  position:absolute;bottom:50%;width:3px;border-radius:2px;
  transform:translateY(50%);display:block;opacity:.9;
}

.db-info{
  display:flex;justify-content:space-between;gap:10px;
  font-size:12.5px;padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.55);
}
.db-info b{color:#fff;font-weight:400}
.db-action{
  text-align:center;font-size:12.5px;font-weight:600;
  padding:10px;border-radius:8px;color:#0a0a12;
  cursor:pointer;
  transition:filter .3s var(--courbe), transform .3s var(--courbe);
}
.db-action:hover{filter:brightness(1.12);transform:translateY(-1px)}

/* --- adaptation aux petits écrans --- */
@media (max-width:900px){
  .db-corps{grid-template-columns:1fr}
  .db-nav,.db-cote{display:none}
  .db-vues,.db-corps{min-height:0}
}


/* --------------------------------------------- 12. LOGO DE LA BARRE */

/* Le logo remplace le carré orange et le mot écrit en dur. Il est donné
   large : c'est la première chose qu'on voit du site. */
.marque{display:flex;align-items:center;flex:none}
.marque img{
  height:64px;width:auto;display:block;
  transition:opacity .3s var(--courbe);
}
.marque:hover img{opacity:.82}

@media (max-width:900px){
  .marque img{height:52px}
}
@media (max-width:700px){
  .marque img{height:44px}
}

/* le pied de page reprend le même logo, en plus petit */
.marque-pied{height:40px;width:auto;display:block}
@media (max-width:700px){.marque-pied{height:34px}}


/* --------------------------------- 14. BANDEAU DES ENSEIGNES CLIENTES */

/* Le filet qui le séparait de l'accroche coupait la page en deux sans rien
   apporter : la section se lit très bien sans lui. */
.enseignes{border-top:none !important}

/* Il tournait en 46 s : il fallait attendre pour voir passer les grands
   noms. Deux fois plus vite, et les noms se serrent pour qu'on en voie
   plusieurs à la fois. */
.enseignes [style*="animation:marq"]{animation-duration:26s !important}

@media (max-width:700px){
  .enseignes{padding-top:30px !important}
  .enseignes [style*="animation:marq"]{
    font-size:15px !important;
    gap:30px !important;
    animation-duration:18s !important;
    opacity:.55 !important;
  }
  .enseignes > div:first-child{margin-bottom:16px !important}

  /* la ligne « +50 applications livrées… » tombait sur le halo du fond :
     elle remonte au-dessus et gagne de l'air */
  .sec-hero > .wrap > div:last-child{
    margin-top:16px !important;
    font-size:11.5px !important;
    line-height:1.6 !important;
    /* le halo de l'arc passe juste dessous : trop pâle, la ligne devenait
       illisible sur la lumière */
    color:rgba(255,255,255,.68) !important;
  }
}


/* ============================================================
   8. CARTES DE L'ÉQUIPE — le portrait passe en fond
   ============================================================ */

/* Le fichier est net : c'est le CSS qui floute. On peut ainsi lever le flou
   au survol — la personne se révèle. Le voile posé par-dessus garde le nom
   et le rôle lisibles tant que la photo est floue. */
.membre{overflow:hidden}

.membre-photo,
.membre-voile{
  position:absolute;inset:0;
  border-radius:inherit;
  z-index:0 !important;
  pointer-events:none;
}

.membre-photo{
  background-size:cover;
  background-position:50% 26%;
  /* le flou mange les bords : on agrandit un peu pour qu'ils restent couverts */
  transform:scale(1.14);
  filter:blur(6px) saturate(108%);
  opacity:1;
  transition:filter .6s var(--courbe), transform .6s var(--courbe),
             opacity .6s var(--courbe);
}

.membre-voile{
  background:linear-gradient(168deg,
             rgba(9,5,2,.12) 0%,rgba(9,5,2,.48) 44%,rgba(9,5,2,.84) 100%);
  transition:opacity .6s var(--courbe);
}

/* au survol, la photo se pose : le flou tombe et le voile s'éclaircit */
.membre:hover .membre-photo{
  filter:blur(0) saturate(112%);
  transform:scale(1.03);
  opacity:1;
}
.membre:hover .membre-voile{
  background:linear-gradient(168deg,
             rgba(9,5,2,.06) 0%,rgba(9,5,2,.40) 46%,rgba(12,5,1,.82) 100%);
}

/* le halo orange de survol des cartes passe devant la photo */
.card.membre::after{z-index:1}

@media (prefers-reduced-motion:reduce){
  .membre-photo{transition:none}
}