/* ==========================================================================
   Aloa Agency, site v2 : le tunnel complet sous la DA Nuit Lagon.
   Une seule famille de marque (Bricolage : display, étiquettes, chiffres),
   Schibsted Grotesk en texte courant. Un seul accent : le corail.
   Deux courbes de mouvement pour tout le site, jamais d'autres.
   ========================================================================== */

:root{
  --nuit:#0A1628; --nuit2:#0D1D33; --nuit3:#122642;
  --creme:#F5F0E8; --gris:#8B9AAE;
  --corail:#FF6B4A;
  --marq-bleu:#4A7CFF; --marq-vert:#22D07A; --rose:#FF3B6B;

  --titres:"Bricolage Grotesque",system-ui,sans-serif;
  --corps:"Schibsted Grotesk",system-ui,sans-serif;

  --sortie:cubic-bezier(.22,1,.36,1);
  --rebond:cubic-bezier(.34,1.56,.5,1);

  --fond-grille:
    linear-gradient(rgba(245,240,232,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,240,232,.045) 1px, transparent 1px);
  --ardoise-filtre:brightness(0) invert(34%) sepia(18%) saturate(680%) hue-rotate(177deg);
}

*{box-sizing:border-box}
html{overflow-x:clip;scroll-padding-top:86px}
body{
  margin:0;background:var(--nuit);color:var(--creme);
  font-family:var(--corps);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  /* La couleur de la zone traversée : corail chez Design, bleu chez Boost,
     vert chez Management. Le fil et le curseur la suivent. */
  --zone:var(--corail);
}
/* Les attributs width/height des images (poses pour reserver la place et
   eviter que le chargement differe ne casse le calcul des scenes) s'appliquent
   en PIXELS quand le CSS ne fixe qu'une largeur : sans height:auto, une image
   de 2368 px de haut le reste. */
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--titres);letter-spacing:-.04em}
a{color:inherit}
::selection{background:var(--corail);color:var(--nuit)}
:focus-visible{outline:2px solid var(--corail);outline-offset:3px;border-radius:4px}

.centre{max-width:1220px;margin:0 auto;padding:0 4.5vw}

/* La voix des étiquettes : Bricolage capitales espacées */
.label{font-family:var(--titres);font-weight:600;font-size:11.5px;
       letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.label b{color:var(--corail);font-weight:600}
.pt{color:var(--corail)}

/* L'accent de la marque : l'étiquette surlignée */
.etiq{display:inline-block;background:var(--creme);color:var(--nuit);
      padding:.04em .3em .12em;border-radius:.22em;transform:rotate(-1.4deg);
      box-shadow:0 .4em 1.2em rgba(0,0,0,.4)}
/* La même étiquette dans les titres de section : l'ADN du hero partout */
.etiq--h2{font-size:.85em;white-space:nowrap}

/* ==================== Grain + barre de progression + curseur ==================== */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,2%)}
  20%{transform:translate(2%,-4%)}30%{transform:translate(-4%,-2%)}
  40%{transform:translate(3%,4%)}50%{transform:translate(-2%,3%)}
  60%{transform:translate(4%,-3%)}70%{transform:translate(-3%,-4%)}
  80%{transform:translate(2%,2%)}90%{transform:translate(-4%,3%)}}

.fil{position:fixed;left:0;top:0;height:3px;width:100%;z-index:95;background:var(--zone);
     transform-origin:0 50%;transform:scaleX(0);transition:background .6s ease}
@supports (animation-timeline: scroll()){
  .fil{animation:fil linear both;animation-timeline:scroll(root)}
  @keyframes fil{to{transform:scaleX(1)}}
}
/* Le logo aloa qui voyage au bout du fil de progression */
.fil-logo{position:fixed;left:0;top:3px;z-index:95;pointer-events:none;
          transform:translateX(-100%);
          font-family:var(--titres);font-weight:800;font-size:10px;line-height:1;
          letter-spacing:-.02em;color:var(--nuit);background:var(--zone);
          padding:3px 8px 4px;border-radius:0 0 8px 8px;
          transition:background .6s ease}
.fil-logo i{font-style:normal;color:var(--creme)}
@supports (animation-timeline: scroll()){
  .fil-logo{animation:fil-logo linear both;animation-timeline:scroll(root)}
  @keyframes fil-logo{to{left:100%}}
}

.curseur{position:fixed;left:0;top:0;z-index:99;pointer-events:none;
         width:14px;height:14px;border-radius:50%;background:var(--zone);display:none;
         transition:width .3s var(--sortie),height .3s var(--sortie),background .6s ease}
.curseur span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
              font-family:var(--titres);font-weight:700;font-size:11px;letter-spacing:.08em;
              text-transform:uppercase;color:var(--nuit);opacity:0;transition:opacity .2s;
              white-space:nowrap}
.curseur.grand{width:66px;height:66px}
.curseur.grand span{opacity:1}
@media (pointer:fine){
  .curseur{display:block}
  body{cursor:none}
  a,button,summary{cursor:none}
}

/* Les caustiques : la lumière du lagon la nuit */
.caustique{position:absolute;border-radius:50%;filter:blur(90px);opacity:.13;
           pointer-events:none;z-index:0}
.caustique--bleue{width:46vmax;height:46vmax;
  background:radial-gradient(closest-side,#1E4A70,transparent 70%);
  animation:derive 26s ease-in-out infinite alternate}
.caustique--corail{width:34vmax;height:34vmax;opacity:.07;
  background:radial-gradient(closest-side,rgba(255,107,74,.65),transparent 70%);
  animation:derive 32s ease-in-out infinite alternate-reverse}
@keyframes derive{from{transform:translate(0,0) scale(1)}to{transform:translate(4%,6%) scale(1.08)}}

/* ==================== Boutons ==================== */
.btn{display:inline-flex;align-items:center;gap:11px;border-radius:100px;
     padding:15px 26px;font-weight:700;font-size:15.5px;text-decoration:none;
     font-family:var(--corps);border:none;position:relative;white-space:nowrap;
     transition:transform .35s var(--rebond),box-shadow .35s var(--sortie)}
.btn--plein{background:var(--corail);color:var(--nuit);
            box-shadow:0 14px 40px rgba(255,107,74,.3)}
.btn--plein::after{content:"";position:absolute;inset:0;border-radius:100px;
                   border:2px solid var(--corail);animation:onde 2.6s var(--sortie) infinite}
@keyframes onde{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.24)}}
.btn--plein:hover{transform:scale(1.05);box-shadow:0 20px 54px rgba(255,107,74,.42)}
.btn--ligne{background:transparent;color:var(--creme);
            border:1.5px solid rgba(245,240,232,.3)}
.btn--ligne:hover{border-color:var(--creme);transform:scale(1.04)}
.btn--creme{background:var(--creme);color:var(--nuit)}
.btn--creme:hover{transform:scale(1.05);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.btn .fleche{width:26px;height:26px;border-radius:50%;display:inline-flex;flex:none;
             align-items:center;justify-content:center;font-size:13px;
             background:rgba(10,22,40,.16)}
.btn--ligne .fleche{background:rgba(245,240,232,.12)}
.btn--petit{padding:11px 20px;font-size:14px}

/* ==================== Navigation ==================== */
.nav{position:fixed;left:0;right:0;top:0;z-index:80;display:flex;align-items:center;
     justify-content:space-between;padding:14px 4.5vw;
     background:rgba(10,22,40,0);border-bottom:1px solid transparent;
     transition:background .35s ease,border-color .35s ease}
.nav--fond{background:rgba(10,22,40,.86);
           -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
           border-bottom-color:rgba(245,240,232,.07)}
.nav__logo img{height:20px;width:auto;filter:brightness(0) invert(1);display:block}
.nav__liens{display:flex;align-items:center;gap:26px;font-size:14px}
.nav__liens a{color:rgba(245,240,232,.8);text-decoration:none;transition:color .2s}
.nav__liens a:hover{color:var(--creme)}

/* Les trois services en boutons, toujours à portée : les mêmes étiquettes que
   le hero, en petit, et celle de la zone traversée s'allume à sa couleur
   (demande Tom 26/09 : aller directement à Design, Boost, Management). */
.nav__services{display:flex;gap:8px}
.nav__liens .nav__svc{font-family:var(--titres);font-weight:800;letter-spacing:-.01em;
                      padding:6px 12px 7px;border-radius:10px;color:var(--creme);
                      border:1.5px solid rgba(245,240,232,.18);background:rgba(10,22,40,.35);
                      transition:background .3s ease,color .3s ease,border-color .3s ease}
.nav__liens .nav__svc:hover{border-color:rgba(245,240,232,.45)}
.nav__svc i{font-style:normal}
.nav__svc--d i{color:var(--corail)}
.nav__svc--b i{color:var(--marq-bleu)}
.nav__svc--m i{color:var(--marq-vert)}
.nav__liens .nav__svc.actif{color:var(--nuit);border-color:transparent}
.nav__liens .nav__svc.actif i{color:var(--nuit)}
.nav__svc--d.actif{background:var(--corail)}
.nav__svc--b.actif{background:var(--marq-bleu)}
.nav__svc--m.actif{background:var(--marq-vert)}
@media(max-width:1100px){.nav__liens{gap:18px}}

/* Au téléphone et à la tablette, les autres liens disparaissent et les trois
   services passent sur une deuxième rangée, qui n'arrive qu'une fois les blocs
   du hero passés : là-haut, ces blocs font déjà le travail. La nav est fixe,
   la rangée qui s'ouvre ne pousse donc rien dans la page. */
@media(max-width:900px){
  html{scroll-padding-top:136px}
  .nav{flex-wrap:wrap}
  .nav__liens{order:3;flex-basis:100%;justify-content:center;
              max-height:0;overflow:hidden;opacity:0;visibility:hidden;
              transition:max-height .35s var(--sortie),margin-top .35s var(--sortie),
                         opacity .3s ease,visibility 0s linear .35s}
  .nav .nav__liens>a{display:none}
  .nav--services .nav__liens{max-height:64px;margin-top:8px;opacity:1;visibility:visible;
                             transition:max-height .35s var(--sortie),margin-top .35s var(--sortie),
                                        opacity .3s ease}
  .nav__services{width:100%;justify-content:center}
  .nav__liens .nav__svc{justify-content:center;flex:1 1 0;max-width:150px;font-size:14px}
}

/* ==================== Hero ==================== */
.hero{position:relative;padding:15vh 4.5vw 0;text-align:center;overflow:hidden;
      background:
        radial-gradient(74% 62% at 50% 0%, #16304F 0%, transparent 62%),
        linear-gradient(180deg,var(--nuit),var(--nuit))}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--fond-grille);background-size:112px 112px;
  mask-image:radial-gradient(80% 74% at 50% 30%, #000 34%, transparent 82%);
  -webkit-mask-image:radial-gradient(80% 74% at 50% 30%, #000 34%, transparent 82%)}
.hero__coeur{position:relative;z-index:2}
.hero .caustique--bleue{right:-16vmax;top:-14vmax}
.hero .caustique--corail{left:-12vmax;top:30%}

.avis{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;
      color:rgba(245,240,232,.72);margin-bottom:20px;
      border:1px solid rgba(245,240,232,.16);border-radius:100px;padding:7px 15px}
.avis .etoiles{color:var(--corail);letter-spacing:1px}

.hero h1{font-size:clamp(34px,5.2vw,68px);line-height:1.08;font-weight:800;
         margin:0 auto 6px;max-width:24ch}
.hero h1 .suj{transition:opacity .32s ease}
/* Les visuels insérés dans le titre */
.lot{display:inline-flex;align-items:center;vertical-align:-.22em;margin:0 .12em}
.lot img{width:.98em;height:1.18em;object-fit:cover;border-radius:9px;
         border:3px solid var(--creme);box-shadow:0 10px 26px rgba(0,0,0,.42);
         margin-left:-.26em}
.lot img:first-child{margin-left:0;transform:rotate(-7deg)}
.lot img:nth-child(2){transform:rotate(3deg) translateY(-.04em);z-index:2;position:relative}
.lot img:nth-child(3){transform:rotate(8deg)}
/* Au telephone le titre passe sur trois lignes serrees : les vignettes, hautes de
   1,18em et inclinees, mordaient sur le mot du dessus (vu le 08/09). On les
   rapetisse et on desserre l'interligne juste ce qu'il faut. */
@media(max-width:600px){
  .hero h1{line-height:1.2}
  .lot{vertical-align:-.16em;margin:0 .1em}
  .lot img{width:.72em;height:.86em;border-radius:7px}
}
/* La bande : la machine tape dedans */
.bande{display:inline-block;background:var(--creme);color:var(--nuit);
       padding:.05em .34em .13em;border-radius:14px;transform:rotate(-1.4deg);
       box-shadow:0 18px 44px rgba(0,0,0,.42);min-width:5.4em;text-align:left;
       margin-top:.14em}
.bande .caret{display:inline-block;width:4px;height:.85em;vertical-align:-.06em;
              background:var(--accent,#FF6B4A);margin-left:3px;border-radius:2px;
              animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
/* Les blocs services */
.blocs{display:flex;gap:14px;margin:30px 0 0;flex-wrap:wrap;justify-content:center;
       position:relative;z-index:2}
.bloc{font-family:var(--titres);font-weight:800;font-size:clamp(14px,1.6vw,19px);
      letter-spacing:-.02em;padding:.5em .85em .6em;border-radius:14px;
      color:var(--creme);border:2px solid rgba(245,240,232,.16);
      background:rgba(10,22,40,.4);text-decoration:none;
      transition:all .45s var(--rebond)}
.bloc i{font-style:normal}
.bloc--d{transform:rotate(-2deg)} .bloc--d i{color:var(--corail)}
.bloc--b{transform:rotate(1.2deg)} .bloc--b i{color:var(--marq-bleu)}
.bloc--m{transform:rotate(-1deg)} .bloc--m i{color:var(--marq-vert)}
.bloc.on{color:var(--nuit);border-color:transparent}
.bloc--d.on{background:var(--corail);transform:rotate(-2deg) scale(1.08);
            box-shadow:0 16px 40px rgba(255,107,74,.4)}
.bloc--d.on i{color:var(--nuit)}
.bloc--b.on{background:var(--marq-bleu);transform:rotate(1.2deg) scale(1.08);
            box-shadow:0 16px 40px rgba(74,124,255,.4)}
.bloc--b.on i{color:var(--nuit)}
.bloc--m.on{background:var(--marq-vert);transform:rotate(-1deg) scale(1.08);
            box-shadow:0 16px 40px rgba(34,208,122,.4)}
.bloc--m.on i{color:var(--nuit)}
.burst{position:absolute;width:7px;height:7px;border-radius:50%;z-index:3;
       pointer-events:none;animation:burst .85s ease-out forwards}
@keyframes burst{from{opacity:1;transform:translate(0,0) scale(1)}
                 to{opacity:0;transform:translate(var(--bx),var(--by)) scale(.3)}}

.hero .sous{color:rgba(245,240,232,.68);font-size:clamp(15px,1.6vw,18px);
            line-height:1.55;max-width:52ch;margin:22px auto 22px}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero__garantie{margin:16px 0 0;font-size:13px;color:var(--gris)}
.hero__garantie b{color:var(--creme)}

/* Le fleuve de production */
/* Retour Tom 07/09 : le ruban allait trop vite, les cartes etaient coupees par
   le cadre (inclinaison + hauteur fixe), ce n'etait pas beau. Plus d'inclinaison,
   un cadre qui laisse les deux rangees entieres, deux fois moins vite. */
.ruban-cadre{position:relative;z-index:2;overflow:hidden;margin:22px -4.5vw 0;
  padding:14px 0 26px;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ruban{display:flex;flex-direction:column;gap:12px;width:100%}
.ruban__piste{display:flex;width:max-content;animation:ruban-defile 110s linear infinite}
.ruban__piste--droite{animation-duration:124s;animation-direction:reverse}
.ruban:hover .ruban__piste{animation-play-state:paused}
.ruban__serie{display:flex;gap:12px;padding-right:12px}
.ruban__carte{position:relative;flex:none;height:200px;border-radius:14px;
              overflow:hidden;box-shadow:0 14px 34px rgba(3,7,16,.4)}
@media(min-width:901px){.ruban__carte{height:250px}}
.ruban__carte img{display:block;height:100%;width:auto}
@media(prefers-reduced-motion:reduce){.ruban__piste{animation:none}}
/* Au telephone, 24 cartes du bandeau se chargeaient d'entree pour un decor qui
   defile (596 Ko, mesure le 08/09). On en garde une sur deux : la boucle reste
   juste puisque les deux series sont amputees de la meme facon. */
@media(max-width:600px){.ruban__carte:nth-child(2n){display:none}}
@keyframes ruban-defile{to{transform:translateX(-50%)}}
.pastille{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;
          background:rgba(10,17,32,.85);border:1px solid rgba(255,107,74,.25);
          border-radius:100px;padding:5px 10px;font-size:12px}
.coeur{width:12px;height:12px;flex:none;fill:var(--rose)}
.pastille .coeur{animation:bat 2.4s ease-in-out infinite}
.compte{font-variant-numeric:tabular-nums;font-weight:600;color:var(--creme)}
@keyframes bat{0%,100%{transform:scale(1)}18%{transform:scale(1.32)}36%{transform:scale(1)}}

/* ==================== Confiance : logos clients ==================== */
.confiance{background:#fff;color:var(--nuit);padding:26px 0 30px}
.confiance__intro{margin:0 0 16px;font-size:13.5px;color:#5C6B80;text-align:center;
                  padding:0 4.5vw}
.marquee-logos{overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-logos__piste{display:flex;width:max-content;animation:defile-logos 30s linear infinite}
.marquee-logos:hover .marquee-logos__piste{animation-play-state:paused}
.marquee-logos ul{display:flex;align-items:center;gap:52px;margin:0;padding:0 26px;list-style:none}
.marquee-logos li{display:flex;align-items:center;gap:52px;white-space:nowrap}
.marquee-logos li::after{content:"";width:6px;height:6px;border-radius:50%;
                         background:var(--corail);opacity:.55;flex:none}
@keyframes defile-logos{to{transform:translateX(calc(-100% / 3))}}
.logo-client{display:block;width:auto;filter:var(--ardoise-filtre);opacity:.55;
             transition:opacity .3s}
.marquee-logos li:hover .logo-client{opacity:.9}
.logo-client--sodiva{height:26px}
.logo-client--decathlon{height:26px}
.logo-client--picard{height:30px;
  filter:grayscale(1) sepia(.2) saturate(520%) hue-rotate(177deg) brightness(.9)}
.logo-client--wuling{height:27px}
.logo-client--osb{height:26px}
.logo-client--faaa{height:30px}
.logo-client--mot{filter:none;font-family:var(--titres);font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:21px;line-height:1;letter-spacing:-.015em;
  padding-right:.06em;color:#47586F}
.logo-client--mot2{font-style:normal;font-size:15px;letter-spacing:.01em;
  text-transform:none;opacity:.75}

/* ==================== Structure des sections ==================== */
section{position:relative}
.sect{padding:14vh 0 6vh}
.sect__tete{margin-bottom:40px;max-width:900px}
.sect__tete .label{display:block;margin-bottom:16px}
.sect__tete h2{font-size:clamp(30px,4.4vw,58px);line-height:1.02;font-weight:800;margin:0 0 18px}
.sect__tete .note{color:var(--gris);font-size:16.5px;line-height:1.7;max-width:60ch;margin:0}
.sect__tete .note b{color:var(--creme)}

/* Reveals */
.rev{opacity:0;transform:translateY(30px)}
.fini .rev{opacity:1;transform:none}

/* ==================== 02 Le problème ==================== */
.probleme{min-height:100svh;display:flex;align-items:center;overflow:hidden;
          position:relative}
.probleme .caustique--corail{right:-10vmax;bottom:-8vmax;left:auto}
/* Le coeur porte le decor : tout ce qui flotte est ancre sur la colonne de texte,
   jamais sur la fenetre. La marge disponible decide du regime, pas le hasard. */
.probleme__coeur{--pad:4.5vw;max-width:1000px;margin:0 auto;padding:0 var(--pad);
                 position:relative;z-index:3}
.probleme__ligne{font-family:var(--titres);font-weight:800;font-style:normal;
  font-size:clamp(24px,3.6vw,48px);line-height:1.2;letter-spacing:-.035em;
  margin:0 0 .55em}
/* Le texte s'écrit au scroll. Les mots pas encore allumés restent VISIBLES en
   filigrane : a zéro, l'écran était entièrement vide et on croyait le site fini
   (retour Tom 08/09). On voit le paragraphe arriver, il se colore au scroll. */
.probleme__ligne .mot{opacity:.16;display:inline-block;font-style:normal;
                      transform:translateY(6px);
                      transition:opacity .3s var(--sortie),transform .3s var(--sortie)}
.probleme__ligne .mot.lu{opacity:1;transform:translateY(0)}
/* Les etiquettes du hero, tamponnees en plein duel */
.probleme__ligne .etiq{font-size:.94em;margin:0 .06em}
/* Le tampon garde son effet d'arrivee, mais sans deborder : a 1,6 puis a 1,14 il
   mordait encore sur les lignes voisines au telephone (vu le 08/09). Il arrive
   maintenant a sa taille, l'effet vient de la rotation et du rebond. */
.probleme__ligne .mot--stamp{transform:scale(1.02) rotate(2.5deg);
                             transition:opacity .2s ease,transform .4s var(--rebond)}
.probleme__ligne .mot--stamp.lu{transform:scale(1) rotate(-1.4deg)}
.probleme__ligne .mot--corail{background:var(--corail);color:var(--nuit)}
.probleme__ligne .mot--corail .pt{color:var(--nuit)}
.probleme__ligne .rouge{color:var(--corail)}
.probleme__fin{margin:34px 0 0;font-size:17px;color:var(--gris);opacity:0;
               transform:translateY(14px);
               transition:opacity .5s var(--sortie),transform .5s var(--sortie)}
.probleme__fin.la{opacity:1;transform:none}
.probleme__fin b{color:var(--creme)}

/* Les applications : l'environnement du sujet.
   Regime par defaut (sous 1100px) : une rangee posee au-dessus du constat, dans
   le flux, donc aucun recouvrement possible. Au-dela, elles reprennent leur vol
   dans les marges de la colonne, jamais dessus. */
.probleme__apps{display:flex;align-items:center;gap:clamp(13px,3.2vw,26px);
                margin:0 0 clamp(16px,2.6vh,28px)}
.appli{position:relative;flex:none;z-index:2;opacity:0;
       transform:scale(.3) rotate(-8deg)}
.appli.pop{opacity:1;transform:scale(1) rotate(0);
           transition:opacity .3s ease,transform .5s var(--rebond)}
.appli svg{display:block;width:100%;height:auto;
           filter:drop-shadow(0 14px 30px rgba(3,7,16,.55))}
.appli--messenger{width:clamp(38px,4.6vw,50px)}
.appli--instagram{width:clamp(40px,4.9vw,54px)}
.appli--whatsapp{width:clamp(36px,4.4vw,48px)}
.appli--facebook{width:clamp(34px,4.2vw,46px)}
@keyframes flotte{from{margin-top:0}to{margin-top:-16px}}
.appli__badge{position:absolute;top:-7px;right:-9px;min-width:22px;height:22px;
              border-radius:100px;background:#FF3B30;color:#fff;font-weight:700;
              font-size:12px;display:flex;align-items:center;justify-content:center;
              padding:0 6px;font-variant-numeric:tabular-nums;
              box-shadow:0 6px 16px rgba(255,59,48,.45);
              font-family:var(--corps)}
/* A partir de 1100px la gouttiere est assez large pour accueillir une icone :
   --ec mesure l'ecart au texte et grandit avec l'ecran. */
@media(min-width:1100px){
  .probleme__apps{display:block;margin:0}
  .appli{position:absolute;--ec:clamp(16px,(100vw - 1060px)*.18,86px)}
  .appli--messenger{right:calc(100% - var(--pad) + var(--ec));top:-4%;
                    width:58px;animation:flotte 7s ease-in-out infinite alternate}
  .appli--instagram{left:calc(100% - var(--pad) + var(--ec));top:7%;
                    width:64px;animation:flotte 8.5s ease-in-out infinite alternate-reverse}
  .appli--whatsapp{right:calc(100% - var(--pad) + var(--ec));bottom:14%;
                   width:52px;animation:flotte 6.5s ease-in-out infinite alternate}
  .appli--facebook{left:calc(100% - var(--pad) + var(--ec));bottom:6%;
                   width:48px;animation:flotte 9s ease-in-out infinite alternate-reverse}
}

/* Les notifications qui tombent, et que personne ne lit.
   Elles vivent dans le flux, sous le constat : c'est la seule maniere de garantir
   qu'elles ne mangent jamais une ligne de texte, quelle que soit la fenetre. */
.probleme__notifs{display:flex;flex-wrap:wrap;gap:12px;
                  margin:clamp(16px,2.6vh,30px) 0 0}
.notif{position:relative;flex:1 1 250px;max-width:340px;z-index:4;display:flex;
       gap:11px;align-items:center;background:rgba(16,26,44,.92);
       border:1px solid rgba(245,240,232,.14);border-radius:16px;
       padding:11px 16px 11px 12px;box-shadow:0 22px 54px rgba(3,7,16,.6);
       opacity:0;transform:translateX(28px)}
.notif.la{opacity:1;transform:none;
          transition:opacity .4s ease,transform .55s var(--rebond)}
.notif__ic{width:32px;height:32px;flex:none}
.notif__ic svg{width:100%;height:100%}
.notif__txt{font-size:13px;line-height:1.4}
.notif__txt b{font-weight:700}
.notif__txt em{display:block;font-style:normal;font-size:11px;color:var(--gris)}
/* Fenetres basses : le constat reste entier dans l'ecran epingle */
@media(max-height:780px){
  .probleme__ligne{font-size:clamp(21px,2.9vw,38px);margin-bottom:.42em}
  .probleme__notifs{gap:10px;margin-top:14px}
  .notif{padding:8px 13px 8px 10px}
  .notif__ic{width:28px;height:28px}
  .probleme__fin{margin-top:20px}
}

/* ==================== Sections services : socle commun ==================== */
.service{overflow:hidden;position:relative}
/* Chaque zone baigne dans la couleur de son service */
.service--design::before,.service--boost::before,.service--management::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.service--design::before{background:radial-gradient(64% 46% at 50% 0%,rgba(255,107,74,.09),transparent 62%)}
.service--boost::before{background:radial-gradient(64% 46% at 50% 0%,rgba(74,124,255,.11),transparent 62%)}
.service--management::before{background:radial-gradient(64% 46% at 50% 0%,rgba(34,208,122,.1),transparent 62%)}
.service .centre{position:relative;z-index:1}
/* Le point de l'étiquette prend la couleur du service */
.service--boost .etiq--h2 .pt{color:var(--marq-bleu)}
.service--management .etiq--h2 .pt{color:var(--marq-vert)}
.service--boost .sect__tete .label b{color:var(--marq-bleu)}
.service--management .sect__tete .label b{color:var(--marq-vert)}
.service__marq{display:inline-flex;align-items:center;gap:10px}
.service__marq i{width:11px;height:11px;border-radius:50%;font-style:normal;flex:none}
.service--design .service__marq i{background:var(--corail)}
.service--boost .service__marq i{background:var(--marq-bleu)}
.service--management .service__marq i{background:var(--marq-vert)}
.service__pied{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:44px}
.service__inclus{font-size:13.5px;color:var(--gris)}
.service__inclus b{color:var(--creme)}

/* ==================== 03 Design : LA SIGNATURE, le mois qui se remplit ==================== */
.scene{height:100svh;display:flex;align-items:center;position:relative;overflow:hidden}
.scene .caustique--bleue{right:-18vmax;top:-16vmax}
.mois__coeur{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
             text-align:center;z-index:1;transition:opacity .5s ease}
.mois.plein .mois__coeur{opacity:.14}
.mois__titre{font-size:clamp(44px,7vw,96px);font-weight:800;line-height:.98;
             letter-spacing:-.045em;margin:14px 0 12px}
.mois__sous{color:var(--gris);font-size:15.5px;margin:0}
.mois__compteur{position:absolute;right:4vw;bottom:5svh;z-index:8;text-align:right;background:rgba(10,22,40,.55);backdrop-filter:blur(8px);border:1px solid rgba(245,240,232,.12);border-radius:16px;padding:14px 18px}
.mois__nb{display:block;font-family:var(--titres);font-weight:800;
          font-size:clamp(40px,5.6vw,76px);letter-spacing:-.04em;line-height:1;
          font-variant-numeric:tabular-nums}
.mois__sur{font-family:var(--titres);font-weight:600;font-size:12px;
           letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
/* Chaque visuel du mois se tamponne a sa place */
/* Le collage rapide : chaque visuel se tamponne a sa place, anneau resserre et SUR */
.mois__train{display:contents}
.mois__v{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;z-index:2;
         aspect-ratio:4/5;opacity:0;
         transform:rotate(var(--r)) scale(1.45) translateY(-14px);
         transition:opacity .22s ease,transform .5s var(--rebond)}
.mois__v--story{aspect-ratio:9/15}
.mois__v.pose{opacity:1;transform:rotate(var(--r)) scale(1)}
.mois__v img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;
             box-shadow:0 22px 55px rgba(3,7,16,.6)}
/* La grammaire v5 des textes poses : kicker + accroche + pastille, en un bloc,
   tailles en cqi (suivent la tuile), scrim leger + text-shadow, jamais sur le sujet */
.mois__v{container-type:inline-size}
.pv3{position:absolute;z-index:2;left:7cqi;top:6cqi;right:7cqi;
     display:flex;flex-direction:column;align-items:flex-start;gap:1.6cqi}
.pv3--bg{top:auto;bottom:7cqi}
.pv3--hc{align-items:center;text-align:center}
.pv3 em{font-style:normal;font-family:var(--corps);font-weight:700;
        font-size:4.4cqi;letter-spacing:.15em;text-transform:uppercase;
        color:#FFD9CC;text-shadow:0 .3cqi 1cqi rgba(4,10,20,.5)}
.pv3 b{font-family:var(--titres);font-weight:800;font-size:9.6cqi;
       line-height:1.05;letter-spacing:-.02em;color:#fff;
       text-shadow:0 .4cqi 1.2cqi rgba(4,10,20,.55)}
.pv3 b i{font-style:normal;color:#FFD9CC}
.pv3__pas{margin-top:1.2cqi;background:var(--corail);color:var(--nuit);
          font-family:var(--titres);font-weight:700;font-size:5.4cqi;
          padding:1.8cqi 4cqi;border-radius:100cqi;transform:rotate(-2deg)}
.pv3__cta{margin-top:1.2cqi;background:rgba(245,240,232,.95);color:var(--nuit);
          font-weight:700;font-size:5cqi;padding:1.8cqi 4.2cqi;
          border-radius:100cqi}
@media(max-width:900px){
  .mois__v{width:calc(var(--w) * 2.1)}
  .mois__v--xl{display:none}
}
/* Les tuiles typographiques du mur : avis client et promo, facon affiche */
.mois__typo{width:100%;aspect-ratio:4/5;border-radius:12px;overflow:hidden;
            display:flex;flex-direction:column;justify-content:center;gap:.55em;
            padding:11%;font-family:var(--titres);
            box-shadow:0 22px 55px rgba(3,7,16,.6)}
.mois__typo--avis{background:var(--corail);color:var(--nuit)}
.mois__typo--avis i{font-style:normal;font-size:clamp(8px,.8vw,12px);letter-spacing:.18em}
.mois__typo b{font-weight:800;font-size:clamp(10px,1.05vw,16px);line-height:1.18;
              letter-spacing:-.02em}
.mois__typo em{font-style:normal;font-size:clamp(7px,.7vw,10px);opacity:.72;
               font-family:var(--corps)}
.mois__typo--promo{background:var(--creme);color:var(--nuit)}
.mois__typo--promo .pt{color:var(--corail)}
.mois__typo sup{font-size:.6em}
/* Les couches POSEES qui font d'une photo un POST : accroche, prix, CTA.
   La meme grammaire que nos vraies campagnes. */
.mois__v--post::after{content:"";position:absolute;left:0;right:0;top:0;height:38%;
  border-radius:12px 12px 0 0;z-index:1;
  background:linear-gradient(180deg,rgba(4,10,20,.24),transparent)}
.mois__v--voile-bas::after{top:auto;bottom:0;border-radius:0 0 12px 12px;
  background:linear-gradient(0deg,rgba(4,10,20,.26),transparent)}
.pv{position:absolute;z-index:2}
.pv--acc{left:8%;top:6%;right:8%;color:#fff;font-family:var(--titres);font-weight:800;
         font-size:clamp(11px,1vw,15px);line-height:1.12;letter-spacing:-.02em;
         text-shadow:0 1px 10px rgba(4,10,20,.6)}
.pv--acc i{font-style:normal;color:#FFD9CC}
.pv--prix{right:8%;bottom:12%;background:var(--corail);color:var(--nuit);
          font-family:var(--titres);font-weight:700;font-size:clamp(8px,.72vw,11px);
          padding:3px 8px;border-radius:100px;white-space:nowrap;
          transform:rotate(-2deg)}
.pv--cta{right:8%;bottom:12%;background:rgba(245,240,232,.95);color:var(--nuit);
         font-weight:700;font-size:clamp(8px,.7vw,10.5px);padding:3px 9px;
         border-radius:100px;white-space:nowrap;font-family:var(--corps)}
.mois__banniere{position:absolute;left:50%;top:50%;transform:translate(-50%,-38%);
                z-index:7;text-align:center;opacity:0;
                transition:opacity .4s ease,transform .5s var(--rebond)}
.mois__banniere.la{opacity:1;transform:translate(-50%,-50%)}
.mois__banniere .etiq{font-family:var(--titres);font-weight:800;
                      font-size:clamp(24px,3.4vw,44px);letter-spacing:-.035em}
.mois__banniere .label{display:block;margin-top:12px}
@media(max-width:900px){
  .mois__compteur{top:auto;bottom:20svh;right:6vw}
  .mois__titre{font-size:clamp(36px,10vw,52px)}
}
.scene__grille{display:grid;grid-template-columns:.9fr 1.3fr;gap:4vw;align-items:center;
               width:100%;max-width:1220px;margin:0 auto;padding:0 4.5vw}
@media(max-width:900px){
  .scene__grille{grid-template-columns:1fr;gap:20px;align-content:center}
}
.etapes{display:flex;flex-direction:column;gap:4.5vh;position:relative;z-index:5}
.etape-s{opacity:.16;transform:translateX(-12px)}
.etape-s .label{margin-bottom:8px;display:block}
.etape-s h3{font-size:clamp(26px,3.6vw,50px);font-weight:800;line-height:1;margin:0}
.etape-s p{color:var(--gris);font-size:15px;line-height:1.6;max-width:30ch;margin:10px 0 0}
.etape-s.active{opacity:1}
@media(max-width:900px){
  .etapes{flex-direction:row;gap:16px}
  .etape-s h3{font-size:19px}
  .etape-s p{display:none}
}
.camera{position:relative;height:min(70svh,620px);z-index:2}
.train{position:absolute;left:0;top:0;height:100%;display:flex;gap:4vw;
       will-change:transform;transform-origin:0 50%}
.carte-b{position:relative;height:100%;aspect-ratio:4/5;flex:none;border-radius:20px;
         background:var(--creme);box-shadow:0 44px 100px rgba(3,7,16,.7)}
.carte-b__fond{position:absolute;inset:0;border-radius:20px;overflow:hidden;
  background-image:linear-gradient(rgba(10,22,40,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,22,40,.06) 1px,transparent 1px);
  background-size:36px 36px}
/* La revelation au balayage : la barre de lumiere descend, l'image existe derriere */
.carte-b__revele{position:absolute;inset:0;border-radius:20px;overflow:hidden;
                 clip-path:inset(0 0 100% 0)}
.carte-b__revele img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carte-b__barre{position:absolute;left:3%;right:3%;top:0;height:3px;border-radius:3px;
                z-index:4;opacity:0;
                background:linear-gradient(90deg,transparent,var(--corail) 30%,#FFD9CC 50%,var(--corail) 70%,transparent);
                filter:drop-shadow(0 0 14px rgba(255,107,74,.85))}
.carte-b__gen{position:absolute;right:12px;top:12px;z-index:4;background:rgba(10,22,40,.88);
              border:1px solid rgba(255,107,74,.4);border-radius:100px;padding:6px 12px;
              opacity:0;transition:opacity .3s ease;font-variant-numeric:tabular-nums}
.carte-b__gen b{color:var(--corail);font-weight:600}
.carte-b__gen.voir{opacity:1}
.carte-b__acc{position:absolute;left:8%;top:7%;right:8%;margin:0;color:#fff;z-index:3;
              font-family:var(--titres);font-weight:800;
              font-size:clamp(18px,2.1vw,28px);line-height:1.08;letter-spacing:-.02em;
              text-shadow:0 2px 22px rgba(4,10,20,.65)}
.carte-b__acc .accent{color:#9CC8FF}
.caret-b{display:inline-block;width:3.5px;height:.9em;vertical-align:-.06em;
         background:var(--corail);margin-left:3px;border-radius:2px;opacity:0}
.caret-b.tape{opacity:1;animation:caret .7s steps(2) infinite}
.tampon{opacity:0;transform:scale(1.5) rotate(-3deg)}
.tampon.pose{opacity:1;transform:scale(1) rotate(0);
             transition:transform .34s var(--rebond),opacity .18s ease}
.carte-b__metier{position:absolute;left:0;right:0;bottom:-40px;text-align:center;
                 opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s var(--sortie)}
.carte-b__metier.la{opacity:1;transform:none}
.souris{position:absolute;z-index:6;width:26px;height:26px;opacity:0;
        filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));will-change:transform}
.souris svg{width:100%;height:100%}
.clic{position:absolute;z-index:5;width:44px;height:44px;border-radius:50%;
      border:3px solid var(--corail);opacity:0;pointer-events:none}
.scene__final{position:absolute;left:50%;bottom:5.5svh;transform:translateX(-50%) translateY(14px);
              text-align:center;opacity:0;z-index:7;white-space:nowrap}
.scene__final h3{font-size:clamp(22px,3.2vw,42px);font-weight:800;margin:0}
.scene__caption{position:absolute;left:50%;top:4svh;transform:translateX(-50%);white-space:nowrap}

/* ==================== Les secteurs : la liste des métiers ==================== */
/* La strategie par metier : onglets + bande de 3 posts qui se repondent */
.strat{margin-bottom:8vh}
/* Dix categories dans un seul selecteur : sur ordinateur elles se rangent en
   deux lignes visibles d'un coup, au doigt elles glissent en une rangee. */
.strat__onglets{display:flex;gap:10px;flex-wrap:nowrap;margin-bottom:30px;
                overflow-x:auto;scroll-snap-type:x proximity;
                scrollbar-width:none;-webkit-overflow-scrolling:touch;
                padding-bottom:4px;
                -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
                mask-image:linear-gradient(90deg,#000 88%,transparent)}
.strat__onglets::-webkit-scrollbar{display:none}
.strat__onglets button{flex:none;scroll-snap-align:start;min-height:44px}
@media(min-width:901px){
  .strat__onglets{flex-wrap:wrap;overflow:visible;row-gap:9px;
                  -webkit-mask-image:none;mask-image:none}
}
.strat__onglets button{appearance:none;border:1.5px solid rgba(245,240,232,.22);
                       background:transparent;color:var(--gris);cursor:pointer;
                       font-family:var(--titres);font-weight:700;letter-spacing:-.01em;
                       font-size:clamp(13px,1.1vw,15.5px);padding:10px 18px;border-radius:100px;
                       transition:color .25s,border-color .25s,background .25s,transform .3s var(--rebond)}
.strat__onglets button:hover{color:var(--creme);border-color:rgba(245,240,232,.5);
                             transform:translateY(-2px)}
.strat__onglets button.actif{background:var(--corail);border-color:transparent;
                             color:var(--nuit)}
.strat__bande{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;transition:opacity .25s}
/* Pendant le chargement d'une categorie (moins d'une seconde), la bande se voile
   au lieu de changer par morceaux */
.strat--charge .strat__bande{opacity:.45}
@media(max-width:900px){.strat__bande{grid-template-columns:1fr;max-width:420px}}
.strat__post{margin:0;display:flex;flex-direction:column;gap:11px}
.strat__tag{font-size:11.5px}
.strat__tag,.strat__pourquoi{padding-left:2px}
.strat__visu{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
             box-shadow:0 24px 55px rgba(3,7,16,.5)}
.strat__visu>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.strat__visu--nu::after{display:none}
.strat__visu::after{content:"";position:absolute;left:0;right:0;top:0;height:44%;z-index:1;
                    background:linear-gradient(180deg,rgba(4,10,20,.55),transparent)}
/* Les couches posees, en plus grand que sur le mur (les cartes sont larges) */
.strat__visu .pv--prix{font-size:clamp(10px,.95vw,14px);padding:5px 11px}
.strat__visu .pv--cta{font-size:clamp(9.5px,.9vw,13px);padding:5px 12px}
/* La typo affiche des posts vitrines : capitales serrees, accent tamponne */
.pv2{position:absolute;z-index:2;margin:0;color:#fff;font-family:var(--titres);
     font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
     font-size:clamp(17px,1.8vw,26px);line-height:1.06;
     text-shadow:0 2px 14px rgba(4,10,20,.55)}
.pv2 i{font-style:normal;display:inline-block;background:var(--corail);color:var(--nuit);
       padding:.02em .24em .1em;border-radius:.18em;transform:rotate(-1.5deg);
       text-shadow:none}
.pv2--hg{left:7%;top:6%;right:7%}
.pv2--hc{left:7%;top:7%;right:7%;text-align:center}
.pv2--bg{left:7%;bottom:8%;right:7%}
/* Le prix ou le CTA peut monter en haut a droite quand l'accroche est en bas */
.pv--hd{bottom:auto;top:6%}
/* Le voile suit l'accroche : en haut par defaut, en bas quand elle descend */
.strat__visu--vb::after{top:auto;bottom:0;height:46%;
  background:linear-gradient(0deg,rgba(4,10,20,.6),transparent)}
.strat__pourquoi{font-size:13px;color:var(--gris);line-height:1.5}
.strat__pourquoi b{color:var(--creme);font-weight:700}
/* Mention de demonstration : elle doit se lire, elle dit que la marque est fictive */
.strat__demo{display:block;margin-top:18px;opacity:.72;font-size:11.5px}
/* La liste d'univers a fusionne avec les onglets : un seul selecteur. */
.univers__services{display:block;margin-top:26px;opacity:.6}

/* ==================== Un mois avec Aloa : la revue de crea ====================
   Huit visuels PRETS, un a la fois, en grand, sans interface : les tirages
   se posent en pile comme sur la table d'un directeur artistique. */
.revue{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;
       gap:2vw;padding:0 5vw}
.revue__gauche{position:static;transform:none;left:auto;top:auto;
               text-align:left;max-width:34ch;justify-self:end}
.revue .mois__titre{font-size:clamp(34px,4.6vw,74px)}
.revue__cpt{margin-top:26px;font-family:var(--titres);font-weight:800;
            letter-spacing:-.04em;display:flex;align-items:baseline;gap:6px}
.revue__cpt b{font-size:clamp(40px,4.6vw,72px);color:var(--creme);
              font-variant-numeric:tabular-nums}
.revue__cpt i{font-style:normal;font-size:clamp(16px,1.6vw,24px);color:var(--gris)}

.revue__pile{position:relative;height:min(78svh,760px);align-self:center}
.revue__v{position:absolute;left:50%;top:50%;height:100%;aspect-ratio:3/4;
          margin:0;transform:translate(-50%,-50%);
          border-radius:18px;overflow:hidden;container-type:inline-size;
          box-shadow:0 34px 80px rgba(3,7,16,.55);
          opacity:0;transition:transform .65s var(--sortie),opacity .45s ease}
.revue__v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* En attente : hors table. Posee : au centre. Dans la pile : decalee,
   tournee, sans son texte, comme des tirages empiles. */
.revue__v[data-etat="pose"]{transform:translate(-50%,-50%);opacity:1;z-index:5}
.revue__v[data-etat="pose"] .stx{opacity:1;transform:none}
.revue__v[data-etat="pose"] .stx--penche{transform:rotate(-3deg)}
.revue__v[data-etat="pile"]{opacity:1;z-index:1}
.revue__v[data-etat="pile"] .stx{opacity:0}
.revue__v[data-pile="1"]{transform:translate(-52.5%,-50%) rotate(-3deg) scale(.965)}
.revue__v[data-pile="2"]{transform:translate(-47.5%,-49%) rotate(2.2deg) scale(.94)}
.revue__v[data-pile="3"]{transform:translate(-50%,-51%) rotate(-1.2deg) scale(.92)}
.revue__v[data-pile="vieux"]{opacity:0 !important;
          transform:translate(-50%,-50%) scale(.9)}

@media(max-width:900px){
  .revue{display:block;padding:0}
  .revue__gauche{position:absolute;left:5vw;right:5vw;top:11svh;z-index:6;
                 max-width:none;justify-self:auto}
  .revue .mois__titre{font-size:clamp(30px,9vw,44px)}
  .revue .mois__sous{display:none}
  .revue__cpt{margin-top:8px}
  .revue__cpt b{font-size:34px}
  .revue__cpt i{font-size:15px}
  .revue__pile{height:100svh}
  .revue__v{height:auto;width:86vw;aspect-ratio:4/5;top:57%}
}

/* ==================== La grammaire poster : typo DERRIERE le produit ====================
   Mecanique des references de Tom : le mot geant passe derriere le sujet
   (fond complet + mot + calque detoure par-dessus), pastille prix, CTA pilule. */
/* Recette ref-042 (A01) : titre en display noir capitales, ~40 % de la
   hauteur, derriere le sujet detoure */
.poster__mot{position:absolute;left:0;right:0;text-align:center;top:13cqi;
             z-index:2;margin:0;font-family:"Archivo Black",var(--titres);
             font-weight:400;letter-spacing:-.03em;font-size:15.2cqi;line-height:.92;
             color:#FFF3EC;pointer-events:none}
.poster__calque{position:absolute;inset:0;width:100%;height:100%;
                object-fit:cover;z-index:3;pointer-events:none}
.poster__pas{position:absolute;right:7cqi;top:34cqi;z-index:4;
             background:#FFD24A;color:#1B2A3F;font-family:var(--titres);
             font-weight:800;font-size:5.6cqi;letter-spacing:-.01em;
             padding:3.4cqi 4.6cqi;border-radius:100cqi;
             transform:rotate(6deg);box-shadow:0 3cqi 8cqi rgba(60,20,5,.25)}
.poster__cta{position:absolute;left:50%;bottom:6cqi;transform:translateX(-50%);
             z-index:4;background:#1B2A3F;color:#FFF3EC;
             font-family:var(--titres);font-weight:700;font-size:4.6cqi;
             padding:2.8cqi 6cqi;border-radius:100cqi}
/* L'accroche discrete en coin, mecanique BARN'S : petite, assurée */
.stx--discret{top:6cqi;left:7cqi;right:30cqi;gap:1.2cqi}
.stx--discret b{font-size:6.2cqi;line-height:1.08}
.stx--discret em{font-size:3.2cqi}
/* Le mot derriere en encre foncee pour les fonds clairs */
.poster__mot--fonce{color:#1B2A3F;opacity:.92}
.poster__mot--pt{font-size:12.5cqi;top:15cqi}
.poster__pas--vert{background:#BFE8D2;color:#0F3D2E;right:auto;left:7cqi;top:auto;bottom:8cqi;
                   transform:rotate(-4deg)}
/* Le sticker opaque : il porte son fond, aucune zone calme requise */
.stick{position:absolute;left:6cqi;top:6cqi;z-index:3;max-width:70cqi;
       background:#F5F0E8;color:#1B2A3F;border-radius:3.4cqi;
       padding:3.6cqi 4.6cqi;transform:rotate(-2deg);
       box-shadow:0 2cqi 7cqi rgba(10,22,40,.28)}
.stick em{display:block;font-style:normal;font-family:var(--corps);font-weight:700;
          font-size:3.1cqi;letter-spacing:.12em;text-transform:uppercase;
          color:#B04B2F;margin-bottom:1cqi}
.stick b{font-family:"Archivo Black",var(--titres);font-weight:400;
         font-size:6.6cqi;line-height:1.06;letter-spacing:-.01em}
.stick--bas{top:auto;bottom:7cqi;transform:rotate(1.6deg)}

/* La variante recette : display noir en capitales (whitelist aloa) */
.stx--caps b{font-family:"Archivo Black",var(--titres);font-weight:400;
             font-size:9.4cqi;line-height:1.04;letter-spacing:-.01em}
/* Ancre haut-gauche validee par place_text (score 82, sans scrim) */
.stx--mesure-hg{top:7cqi;left:7cqi;right:34cqi;align-items:flex-start}

/* ==================== Les visuels de story : typo de marque, en grand ====================
   Chaque story est un visuel PRET A PUBLIER : accroche Bricolage posee dans
   l'espace calme de l'image, kicker et sous-ligne en appui. Les tailles
   suivent l'ecran (cqi). */
.stx{position:absolute;left:8cqi;right:8cqi;z-index:3;
     display:flex;flex-direction:column;gap:2cqi;
     opacity:0;transform:translateY(3cqi);
     transition:opacity .3s ease,transform .45s var(--sortie)}
.stx.vue{opacity:1;transform:none}
.stx em{font-style:normal;font-family:var(--titres);font-weight:700;
        font-size:3.8cqi;letter-spacing:.16em;text-transform:uppercase;
        color:#FFD9CC;text-shadow:0 1px 10px rgba(4,10,20,.5)}
.stx b{font-family:var(--titres);font-weight:800;letter-spacing:-.03em;
       font-size:10.5cqi;line-height:1.02;color:#fff;
       text-shadow:0 2px 22px rgba(4,10,20,.55)}
.stx i{font-style:normal;font-family:var(--corps);font-weight:600;
       font-size:4.2cqi;color:#fff;opacity:.94;
       text-shadow:0 1px 10px rgba(4,10,20,.55)}
/* La sous-ligne d'engagement porte une pastille : c'est un bouton de story */
.stx--centre-haut i,.stx--haut-gauche i{align-self:flex-start}
.stx--centre-haut{top:13%;text-align:center;align-items:center}
.stx--centre-haut i{align-self:center;background:rgba(255,255,255,.16);
                    border:1px solid rgba(255,255,255,.5);border-radius:100cqi;
                    padding:2.2cqi 4.5cqi;backdrop-filter:blur(6px)}
.stx--haut-gauche{top:14%;align-items:flex-start}
.stx--bas-gauche{bottom:16%;align-items:flex-start}
.stx--penche{transform:translateY(3cqi) rotate(-3deg)}
.stx--penche.vue{transform:rotate(-3deg)}

/* ==================== 04 Boost v2 : le post qui décolle, en trois temps ==================== */
.b2{position:relative;display:grid;grid-template-columns:.9fr 1fr 1fr;gap:3.5vw;
    align-items:center;min-height:560px;padding:40px 34px 54px;
    background:radial-gradient(80% 100% at 60% 20%,#122645 0%,var(--nuit2) 70%);
    border:1px solid rgba(74,124,255,.18);border-radius:22px}
@media(max-width:900px){.b2{grid-template-columns:1fr;gap:24px;padding:22px 18px 40px}}
.b2__caption{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;white-space:nowrap;z-index:6}
@media(max-width:900px){.b2__caption{display:none}}
.b2__mots{display:flex;flex-direction:column;gap:4vh}
.b2__mot{opacity:.16;transform:translateX(-12px);
         transition:opacity .4s ease,transform .4s var(--sortie)}
.b2__mot.actif{opacity:1;transform:none}
.b2__mot .label{display:block;margin-bottom:6px}
.b2__mot h3{font-size:clamp(22px,2.6vw,38px);font-weight:800;line-height:1;margin:0}
.b2__mot p{color:var(--gris);font-size:14px;line-height:1.55;max-width:26ch;margin:8px 0 0}
@media(max-width:900px){
  .b2__mots{flex-direction:row;gap:14px}
  .b2__mot h3{font-size:17px}
  .b2__mot p{display:none}
}
/* La vraie carte Instagram, en clair */
.bpost{background:#fff;color:#050505;border-radius:16px;overflow:hidden;
       box-shadow:0 30px 70px rgba(3,7,16,.6);max-width:340px;margin:0 auto}
.bpost__tete{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:13px}
.bpost__ava{width:30px;height:30px;border-radius:50%;flex:none;display:flex;
            align-items:center;justify-content:center;color:#fff;font-weight:800;
            font-size:11px;font-family:var(--titres);
            background:conic-gradient(#F9CE34,#EE2A7B,#6228D7,#F9CE34)}
.bpost__points{margin-left:auto;color:#65676B;letter-spacing:1px;font-weight:700}
.bpost__visu{position:relative;aspect-ratio:4/5;overflow:hidden}
.bpost__visu img{width:100%;height:100%;object-fit:cover;display:block}
.bpost__acc{position:absolute;left:8%;top:7%;color:#fff;font-family:var(--titres);
            font-weight:800;font-size:clamp(17px,1.8vw,24px);letter-spacing:-.02em;
            text-shadow:0 2px 18px rgba(4,10,20,.6)}
.bpost__acc span{color:#FFD9CC}
/* Quand les notifications tombent, l'accroche s'efface : deux textes empiles
   au meme endroit, ça ne se lit pas */
.bpost__acc{transition:opacity .4s ease,transform .5s var(--sortie)}
.b2--sonne .bpost__acc{opacity:0;transform:translateY(-8px)}
.bpost__actions{display:flex;gap:14px;align-items:center;padding:10px 12px 4px;
                color:#050505}
.bpost__actions svg{width:23px;height:23px}
.bpost__coeurzone{position:relative;display:inline-flex}
#bIcCoeur{fill:none;stroke:#050505;stroke-width:1.8;transition:fill .3s,stroke .3s}
.b2--feu #bIcCoeur{fill:#FF3B6B;stroke:#FF3B6B}
/* Les coeurs qui JAILLISSENT du bouton quand ça décolle */
.b2__vol{position:absolute;left:6px;top:0;font-style:normal;color:#FF3B6B;
         font-size:15px;opacity:0;pointer-events:none;
         transition:opacity .2s ease,transform .9s var(--sortie)}
.b2--feu .b2__vol{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.25);
                  transition-delay:calc(var(--i,0) * 1s)}
.b2--feu .b2__vol{animation:coeur-vol 1.6s ease-out infinite}
.b2__vol:nth-child(2){animation-delay:0s}
.b2__vol:nth-child(3){animation-delay:.4s}
.b2__vol:nth-child(4){animation-delay:.8s}
.b2__vol:nth-child(5){animation-delay:1.2s}
@keyframes coeur-vol{0%{opacity:0;transform:translate(0,0) scale(.5)}
  18%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.25)}}
.b2:not(.b2--feu) .b2__vol{animation:none}
.bpost__stats{padding:2px 12px 12px;font-size:13px;display:flex;gap:12px}
.bpost__stats span{color:#65676B}
/* Le temps 1 : le vrai bouton Booster, puis le vide */
/* Le telephone sonne : les messages tombent sur le post pendant le pilotage,
   le badge grimpe en coherence avec le compteur du moniteur */
.b2__post{position:relative}
/* La pile de notifications iOS : elle se remplit PAR LE HAUT, la derniere
   arrivee pousse les precedentes vers le bas (colonne inversee + hauteur animee). */
/* Elles se posent juste sous l'en-tete du compte : on garde le repere
   « c'est VOTRE page », comme une notification qui tombe sur l'ecran. */
.bpost__notifs{position:absolute;left:9px;right:9px;top:47px;z-index:7;
               display:flex;flex-direction:column-reverse;pointer-events:none}
.bnotif{display:flex;align-items:center;gap:9px;overflow:hidden;
        background:rgba(252,252,253,.74);color:#0B0B0F;
        -webkit-backdrop-filter:blur(22px) saturate(180%);
        backdrop-filter:blur(22px) saturate(180%);
        border:.5px solid rgba(255,255,255,.5);
        border-radius:17px;padding:0 12px;
        box-shadow:0 10px 26px rgba(6,10,18,.26);
        max-height:0;margin-bottom:0;opacity:0;
        transform:translateY(-12px) scale(.96);transform-origin:50% 0;
        transition:opacity .3s ease,max-height .45s var(--sortie),
                   margin-bottom .45s var(--sortie),
                   padding .45s var(--sortie),transform .5s var(--rebond)}
.bnotif.voir{max-height:70px;margin-bottom:7px;padding:9px 12px;
             opacity:1;transform:none}
.bnotif__ic{width:26px;height:26px;flex:none}
.bnotif__ic svg{width:100%;height:100%;display:block;
                border-radius:7px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.bnotif__corps{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.bnotif__app{display:flex;align-items:baseline;font-family:var(--corps);
             font-size:9.5px;font-weight:600;letter-spacing:.02em;
             text-transform:uppercase;color:rgba(11,11,15,.5)}
.bnotif__app em{font-style:normal;margin-left:auto;font-size:9.5px;
                text-transform:none;letter-spacing:0;color:rgba(11,11,15,.45);
                white-space:nowrap}
.bnotif__msg{font-size:12px;line-height:1.25;color:#0B0B0F;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnotif__msg b{font-weight:700}
.bpost__msgzone{position:relative;display:inline-flex}
.bpost__badge{position:absolute;right:-8px;top:-7px;background:#FF3B30;color:#fff;
              font-family:var(--titres);font-size:9.5px;font-weight:700;
              border-radius:100px;min-width:16px;height:16px;padding:0 4px;
              display:flex;align-items:center;justify-content:center;
              opacity:0;transform:scale(.4);
              transition:opacity .3s ease,transform .4s var(--rebond)}
.bpost__badge.voir{opacity:1;transform:scale(1)}

.b2__booster{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:14px}
.b2__booster-btn{background:#0866FF;color:#fff;font-weight:700;font-size:13.5px;
                 padding:11px 26px;border-radius:8px;
                 transition:opacity .4s ease,transform .4s var(--sortie)}
.b2__booster-vide{font-family:var(--titres);font-weight:800;letter-spacing:-.03em;
                  font-size:clamp(20px,2.2vw,30px);color:var(--creme);
                  opacity:0;transform:translateY(10px);
                  transition:opacity .5s ease,transform .5s var(--sortie)}
.b2__booster-vide b{color:var(--marq-bleu)}
/* Une fois la publication partie : le bouton s'efface, la question reste */
.b2--parti .b2__booster-btn{opacity:.18;transform:scale(.94)}
.b2--parti .b2__booster-vide{opacity:1;transform:none}
/* Quand le pilotage commence, la question a fait son travail : elle s'efface */
.b2--pilote .b2__booster{opacity:0;transform:translateY(8px);
                         transition:opacity .5s ease,transform .5s var(--sortie)}
/* ==================== Le moniteur : un seul objet vivant a droite ====================
   Il ne singe pas une interface Facebook : c'est un instrument dans la DA du site.
   Tout y est pilote par le meme scroll que le post, d'ou le couplage. */
.b2__droite{position:relative}
.moni{position:relative;background:rgba(7,15,29,.6);
      border:1px solid rgba(74,124,255,.24);border-radius:18px;padding:17px 18px 16px;
      box-shadow:0 26px 60px rgba(3,7,16,.45)}
.moni__tete{display:flex;align-items:center;justify-content:space-between;gap:10px;
            padding-bottom:11px;border-bottom:1px solid rgba(245,240,232,.09)}
/* Ou l'argent est reellement depense. On montre les plateformes, on ne
   revendique aucun partenariat : le badge Meta Business Partner est reserve
   aux agences certifiees. */
.moni__ou{display:inline-flex;align-items:center;gap:8px;flex:none}
.moni__ou svg{width:15px;height:15px;display:block;flex:none}
.moni__gauche{display:flex;align-items:center;gap:9px;min-width:0}
.moni__t{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
         color:var(--gris);white-space:nowrap}
.moni__etat{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
            border-radius:100px;padding:4px 10px;white-space:nowrap;
            background:rgba(245,240,232,.08);color:var(--gris);
            transition:background .5s ease,color .5s ease,box-shadow .5s ease}
.moni--on .moni__etat{background:var(--marq-bleu);color:#fff;
                      box-shadow:0 0 0 4px rgba(74,124,255,.16)}

/* Les vues : le chiffre EST la hauteur de la courbe, il ne bouge pas tout seul */
.moni__vues{display:flex;align-items:baseline;gap:9px;margin-top:13px}
.moni__vues b{font-family:var(--titres);font-weight:800;letter-spacing:-.045em;
              font-size:clamp(29px,3.2vw,44px);line-height:.95;color:var(--creme);
              font-variant-numeric:tabular-nums}
.moni__vues span{font-size:11.5px;color:var(--gris);line-height:1.25;max-width:10ch}

.moni__courbe{position:relative;height:106px;margin:6px 0 2px;
              background:linear-gradient(rgba(245,240,232,.055) 1px,transparent 1px) 0 0/100% 26px}
.moni__courbe svg{width:100%;height:100%;display:block}
.moni__aire{fill:url(#moniGrad)}
.moni__ligne{fill:none;stroke:var(--marq-bleu);stroke-width:2.6;stroke-linecap:round;
             vector-effect:non-scaling-stroke}
/* La seconde courbe : le prix, qui descend pendant que les resultats montent */
.moni__cout{fill:none;stroke:rgba(245,240,232,.5);stroke-width:1.7;stroke-linecap:round;
            vector-effect:non-scaling-stroke}
.moni__jours{display:flex;align-items:center;justify-content:space-between;margin-top:4px;
              padding-top:6px;border-top:1px solid rgba(245,240,232,.07)}
.moni__jours span{font-size:9.5px;letter-spacing:.07em;color:rgba(245,240,232,.4)}
.moni__jours i{width:3px;height:3px;border-radius:50%;background:rgba(245,240,232,.2)}
.moni__leg{display:flex;gap:14px;margin-top:7px}
.moni__leg span{position:relative;padding-left:15px;font-size:10px;color:var(--gris);
                line-height:1.3}
.moni__leg span::before{content:"";position:absolute;left:0;top:5px;width:10px;height:2px;
                        border-radius:2px}
.moni__leg-v::before{background:var(--marq-bleu)}
.moni__leg-c::before{background:rgba(245,240,232,.5)}
.moni__pt{position:absolute;left:0;top:95%;width:11px;height:11px;border-radius:50%;
          margin:-5.5px 0 0 -5.5px;background:var(--creme);opacity:0;
          box-shadow:0 0 0 3px rgba(74,124,255,.85),0 0 22px 5px rgba(74,124,255,.5)}

/* L'argent qui part vraiment : une jauge qui se remplit, un prix qui tombe */
.moni__bud{margin-top:11px;padding-top:11px;border-top:1px solid rgba(245,240,232,.09)}
.moni__bud-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
             margin-bottom:7px}
.moni__bud-h>span{font-size:9.5px;font-weight:700;letter-spacing:.11em;
                  text-transform:uppercase;color:var(--gris)}
.moni__bud-h>b{font-family:var(--titres);font-weight:800;letter-spacing:-.02em;
               font-size:13.5px;color:var(--creme);font-variant-numeric:tabular-nums;
               white-space:nowrap}
.moni__bud-p{display:block;height:9px;border-radius:5px;background:rgba(245,240,232,.09);
             overflow:hidden}
.moni__bud-p b{display:block;height:100%;width:0;border-radius:5px;
               background:linear-gradient(90deg,rgba(74,124,255,.45),var(--marq-bleu))}
.moni__cout-l{margin-top:9px;font-size:11.5px;color:var(--gris);line-height:1.5}
.moni__cout-av{color:rgba(245,240,232,.7);font-weight:700;white-space:nowrap;
               position:relative;transition:color .5s ease}
.moni--on .moni__cout-av{color:rgba(245,240,232,.42)}
.moni__cout-av::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;
                      background:rgba(245,240,232,.5);border-radius:2px;
                      transform:scaleX(0);transform-origin:left;
                      transition:transform .55s var(--sortie)}
.moni--on .moni__cout-av::after{transform:scaleX(1)}
.moni__cout-ap{color:var(--marq-bleu);font-weight:800;white-space:nowrap;
               font-variant-numeric:tabular-nums;opacity:0;
               transition:opacity .5s ease}
.moni--on .moni__cout-ap{opacity:1}

/* Ou part l'argent : deux barres, elles s'echangent le budget */
.moni__rep{margin-top:11px;padding-top:11px;border-top:1px solid rgba(245,240,232,.09)}
.moni__rep-t{display:block;font-size:9.5px;font-weight:700;letter-spacing:.11em;
             text-transform:uppercase;color:var(--gris);margin-bottom:9px}
.moni__b{margin-bottom:8px}
/* Le verdict est ecrit a cote de la barre : sans lui, deplacer l'argent
   d'une ligne a l'autre ne veut rien dire pour un commercant. */
.moni__b-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
           margin-bottom:4px}
.moni__b-h>span{font-size:11.5px;color:rgba(245,240,232,.74);line-height:1.3}
.moni__b-h>em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.03em;
              white-space:nowrap;color:var(--marq-bleu);opacity:0;
              transform:translateX(-4px);
              transition:opacity .5s ease,transform .5s var(--sortie)}
.moni--on .moni__b-h>em{opacity:1;transform:none}
.moni__b--fil .moni__b-h>em{color:rgba(245,240,232,.45)}
.moni__b--fil .moni__b-h>span{color:rgba(245,240,232,.5)}
.moni__b-p{height:8px;border-radius:5px;background:rgba(245,240,232,.09);
           overflow:hidden;display:block}
.moni__b-p b{display:block;height:100%;width:0;border-radius:5px;
             background:linear-gradient(90deg,rgba(74,124,255,.5),var(--marq-bleu))}
.moni__b--fil .moni__b-p b{background:linear-gradient(90deg,rgba(245,240,232,.22),rgba(245,240,232,.44))}
.moni__geste{display:block;font-style:normal;font-size:11px;font-weight:700;
             letter-spacing:.04em;color:var(--marq-bleu);margin-top:3px;
             opacity:0;transform:translateX(-8px);
             transition:opacity .4s ease,transform .5s var(--sortie)}
.moni--on .moni__geste{opacity:1;transform:none}

/* La recolte : ce qui tombe pendant que ca tourne */
.moni__cpts{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
            margin-top:11px;padding-top:11px;overflow:hidden;
            border-top:1px solid rgba(245,240,232,.09)}
.moni__c{display:flex;flex-direction:column;gap:1px;position:relative}
.moni__c b{font-family:var(--titres);font-weight:800;letter-spacing:-.035em;
           font-size:clamp(17px,1.9vw,24px);line-height:1;color:var(--creme);
           font-variant-numeric:tabular-nums}
.moni__c span{font-size:10.5px;color:var(--gris)}
.moni__coeurs{position:absolute;left:2px;bottom:0;width:56px;height:42px;
              pointer-events:none;display:block}
.moni__coeur{position:absolute;bottom:0;font-style:normal;font-size:12px;
             color:#FF3B6B;opacity:0}

/* La place de la décision est RÉSERVÉE dès le départ. Le bloc s'ouvrait de 0 à
   85 px à la fin de la scène : la grille étant centrée, le post et les mots d'à
   côté descendaient d'un coup de 30 px pendant que le moniteur remontait (constat
   Tom 26/09 : « ça sautille quand je m'arrête de scroller »). Le titre attend en
   veille, la phrase s'allume ; plus rien ne change de taille. */
.moni__dec{margin-top:11px;padding-top:11px;border-top:1px solid rgba(245,240,232,.09)}
.moni__dec>span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.11em;
                text-transform:uppercase;color:var(--marq-bleu);margin-bottom:5px;
                opacity:.3;transition:opacity .5s ease}
.moni__dec b{font-size:13px;line-height:1.5;font-weight:600;color:var(--creme);
             opacity:0;transition:opacity .6s ease}
.moni__dec.voir>span,.moni__dec.voir b{opacity:1}
/* Portables : pendant l'epinglage, la scene doit tenir entiere sous la nav.
   On resserre les marges, la courbe et la carte ; on ne retire rien. */
@media(min-width:901px) and (max-height:880px){
  .b2{padding:24px 30px 42px}
  .bpost{max-width:300px}
  .moni{padding:13px 16px 12px}
  .moni__courbe{height:78px}
  .moni__bud,.moni__rep,.moni__cpts,.moni__dec{margin-top:8px;padding-top:8px}
}
@media(max-width:900px){
  .moni__courbe{height:86px}
  .moni__b-h>span{font-size:11px}
}

/* Les messages qui tombent */
.b2__notif{display:flex;flex-direction:column;background:rgba(16,26,44,.94);
           border:1px solid rgba(74,124,255,.4);border-radius:14px;padding:10px 14px;
           margin-top:12px;font-size:13px;opacity:0;transform:translateX(30px);
           transition:opacity .4s ease,transform .5s var(--rebond)}
.b2__notif.voir{opacity:1;transform:none}
.b2__notif em{font-style:normal;font-size:11px;color:var(--gris)}

/* ==================== 04 Boost : la courbe qui décolle (ancien, conservé) ==================== */
.boost__scene{position:relative;display:grid;grid-template-columns:230px 1fr;gap:26px;
              align-items:center;background:radial-gradient(80% 100% at 66% 26%,#122645 0%,var(--nuit2) 70%);
              border:1px solid rgba(245,240,232,.09);border-radius:22px;
              padding:30px;min-height:480px}
@media(max-width:860px){.boost__scene{grid-template-columns:1fr;padding:20px}}
.bp{width:218px;background:#000;border-radius:14px;overflow:hidden;
    border:1px solid rgba(245,240,232,.14);box-shadow:0 26px 60px rgba(3,7,16,.65)}
@media(max-width:860px){.bp{display:none}}
.bp__tete{display:flex;align-items:center;gap:8px;padding:8px 10px}
.bp__ava{width:24px;height:24px;border-radius:50%;padding:2px;flex:none;
         background:conic-gradient(#F9CE34,#EE2A7B,#6228D7,#F9CE34)}
.bp__ava i{display:flex;width:100%;height:100%;border-radius:50%;background:#123;
           font-style:normal;font-size:9px;font-weight:800;color:#fff;
           align-items:center;justify-content:center}
.bp__nom{font-size:10.5px;font-weight:700;color:#fff}
.bp__img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.bp__pied{padding:8px 10px;font-size:10.5px;color:#fff;display:flex;gap:10px;
          font-variant-numeric:tabular-nums}
.bp__pied b{color:var(--rose)}
.gr{position:relative;background:rgba(11,20,36,.86);border:1px solid rgba(74,124,255,.25);
    border-radius:18px;padding:20px 22px 46px;box-shadow:0 30px 70px rgba(3,7,16,.6);
    min-height:420px}
.gr__t{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:12px}
.gr__lab{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gris)}
.gr__lab b{color:var(--marq-bleu)}
.btn-boost{background:var(--marq-bleu);color:#fff;font-weight:800;font-size:13px;
           border-radius:100px;padding:9px 20px;display:flex;align-items:center;gap:8px;
           box-shadow:0 14px 36px rgba(74,124,255,.4);flex:none}
.btn-boost i{font-style:normal;font-size:14px}
.gr__cpt{position:absolute;right:22px;top:56px;text-align:right;z-index:3}
.gr__cpt .v{font-family:var(--titres);font-weight:800;font-size:26px;
            letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gr__cpt .l{font-size:9.5px;color:var(--gris)}
.gr__zone{position:absolute;left:22px;right:22px;top:104px;bottom:52px}
.gr__svg{width:100%;height:100%;overflow:visible}
.gr__axe{stroke:rgba(245,240,232,.12);stroke-width:1}
.gr__jours{position:absolute;left:0;right:0;bottom:-26px;display:flex;
           justify-content:space-between;font-size:9.5px;color:var(--gris)}
.gr__ligne{fill:none;stroke:var(--marq-bleu);stroke-width:2.5;stroke-linecap:round;
           stroke-dasharray:100;stroke-dashoffset:100;
           filter:drop-shadow(0 0 8px rgba(74,124,255,.55))}
.gr__aire{fill:url(#aireBoost);opacity:0}
.gr__badge{position:absolute;left:32%;top:26%;z-index:6;background:rgba(10,22,40,.94);
           border:1.5px solid var(--marq-bleu);border-radius:100px;padding:7px 15px;
           font-size:11.5px;white-space:nowrap;transform:scale(0) rotate(-3deg)}
.gr__badge b{color:var(--marq-bleu)}
.gr__avant{position:absolute;left:6%;top:56%;font-size:10.5px;color:var(--gris);opacity:0}
.gr__coeur{position:absolute;color:var(--rose);font-size:13px;opacity:0;z-index:7}
.gr__com{position:absolute;z-index:8;background:rgba(16,24,40,.95);
         border:1px solid rgba(245,240,232,.15);border-radius:10px 10px 10px 3px;
         padding:5px 9px;font-size:10px;opacity:0}
.gr__com b{color:var(--marq-bleu)}
.boost__bandeau{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:10;
                background:rgba(10,22,40,.94);border:1px solid rgba(74,124,255,.45);
                border-radius:100px;padding:9px 20px;font-size:12.5px;white-space:nowrap;opacity:0}
.boost__bandeau b{color:var(--marq-bleu)}

/* ==================== L'agent Aloa en personne ==================== */
#management .sect__tete{position:relative;z-index:2}
@media(min-width:901px){
  #management .sect__tete{padding-right:clamp(140px,16vw,210px);max-width:none}
}
.agent3d{position:absolute;right:0;bottom:-46px;width:clamp(110px,12vw,160px);
         z-index:5;opacity:0;
         animation:agent-respire 4.5s ease-in-out infinite}
.agent3d.la{opacity:1}
/* La respiration vit sur le conteneur : l'image reste libre pour l'inclinaison GSAP */
@keyframes agent-respire{0%,100%{margin-bottom:0}50%{margin-bottom:8px}}
.agent3d__img{width:100%;display:block;position:relative;z-index:2;
              filter:drop-shadow(0 30px 50px rgba(3,7,16,.55));
              transform-origin:50% 100%;will-change:transform}
.agent3d__socle{position:absolute;left:14%;right:14%;bottom:-8px;height:22px;
                border-radius:50%;background:rgba(3,7,16,.5);filter:blur(9px);z-index:1}
.agent3d__nom{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);
              z-index:3;background:rgba(10,22,40,.88);border:1px solid rgba(34,208,122,.45);
              border-radius:100px;padding:6px 12px;white-space:nowrap;color:var(--creme)}
/* Sa bulle : la grammaire Messenger, il vous parle vraiment */
.agent3d__bulle{position:absolute;right:92%;top:16%;z-index:3;min-width:180px;
                max-width:220px;background:#fff;color:#050505;font-size:12.5px;
                line-height:1.45;border-radius:16px 16px 4px 16px;padding:12px 15px;
                box-shadow:0 18px 44px rgba(3,7,16,.5);opacity:0;transform:scale(.6);
                transform-origin:100% 80%;
                transition:opacity .25s ease,transform .4s var(--rebond)}
.agent3d__bulle.voir{opacity:1;transform:scale(1)}
.agent3d__bulle .caret-b{background:var(--marq-vert)}
@media(max-width:900px){
  .agent3d{position:relative;right:auto;bottom:auto;margin:18px 0 6px;
           width:150px}
  .agent3d__bulle{right:auto;left:96%;border-radius:16px 16px 16px 4px;
                  transform-origin:0 80%;min-width:180px}
}

/* ==================== Le mur des conversations de Teiki ==================== */
.controle{position:relative;border-radius:22px;margin:10px 0 26px;
          border:1px solid rgba(34,208,122,.22);padding:64px 18px 46px;
          background:
            linear-gradient(rgba(245,240,232,.035) 1px,transparent 1px),
            linear-gradient(90deg,rgba(245,240,232,.035) 1px,transparent 1px),
            radial-gradient(70% 90% at 50% 0%,#12352A 0%,var(--nuit2) 70%);
          background-size:44px 44px,44px 44px,auto}
.controle__compteur{position:absolute;left:18px;top:16px;z-index:3;
  background:rgba(10,22,40,.85);border:1px solid rgba(34,208,122,.4);
  border-radius:100px;padding:8px 14px;font-size:13px;color:var(--creme)}
.controle__compteur b{font-family:var(--titres);font-weight:800;font-size:17px;
  font-variant-numeric:tabular-nums}
.controle__compteur .ok{color:var(--marq-vert);font-weight:600}
/* Cinq vraies mini-fenetres de conversation, qui vivent en boucle */
.controle__mur{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
               align-items:start}
@media(max-width:1020px){.controle__mur{grid-template-columns:repeat(2,1fr)}
  .mini-conv:nth-child(5){display:none}}
/* Hauteur FIGEE, pas un minimum : les bulles qui se deplient faisaient varier
   la carte, donc la section, donc la hauteur du document. Le navigateur
   compensait en bougeant le scroll : la page montait et descendait toute seule
   (constat Tom 21/09). Le fil defile maintenant a l'interieur d'un cadre fixe. */
.mini-conv{background:#fff;color:#050505;border-radius:14px;padding:10px 11px;
           box-shadow:0 18px 44px rgba(3,7,16,.5);height:200px;
           display:flex;flex-direction:column;gap:7px}
.mini-conv:nth-child(2){transform:translateY(14px)}
.mini-conv:nth-child(4){transform:translateY(18px)}
.mini-conv:nth-child(3){transform:translateY(6px)}
.mini-conv__t{display:flex;align-items:center;gap:6px;font-size:11.5px;
              padding-bottom:6px;border-bottom:1px solid #F0F0F0}
.mini-conv__t svg{width:16px;height:16px;flex:none}
.mini-conv__ok{margin-left:auto;font-style:normal;color:#188038;font-weight:700;
               font-size:10.5px;opacity:0;transition:opacity .3s ease}
.mini-conv.repondu .mini-conv__ok{opacity:1}
/* Le fil : les bulles arrivent une a une, les anciennes remontent et se
   replient, comme un vrai fil de messagerie qui defile */
.mini-conv__fil{display:flex;flex-direction:column;gap:0;height:120px;
                justify-content:flex-end;overflow:hidden}
.mcb{max-height:0;margin:0;opacity:0;overflow:hidden;
     font-size:11.5px;line-height:1.35;padding:0 9px;
     transition:max-height .4s var(--sortie),margin .4s var(--sortie),
                padding .4s var(--sortie),opacity .3s ease,transform .35s var(--sortie);
     transform:translateY(6px)}
.mcb.voir{max-height:64px;margin-bottom:6px;padding:6px 9px;opacity:1;transform:none}
.mcb.vieille{max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;opacity:0}
.mcb--q{align-self:flex-start;background:#F0F0F0;color:#050505;
        border-radius:12px 12px 12px 3px;max-width:95%}
.mcb--r{align-self:flex-end;background:#0084FF;color:#fff;
        border-radius:12px 12px 3px 12px;max-width:95%}
.mini-conv__tape{align-self:flex-end;display:none;gap:3px;background:#E7F0FF;
                 border-radius:12px 12px 3px 12px;padding:7px 9px}
.mini-conv__tape.la{display:flex}
.mini-conv__tape i{width:4.5px;height:4.5px;border-radius:50%;background:#0084FF;
                   font-style:normal;animation:pt3 .9s ease infinite}
.mini-conv__tape i:nth-child(2){animation-delay:.14s}
.mini-conv__tape i:nth-child(3){animation-delay:.28s}
.controle__ticket{position:absolute;right:16px;bottom:-14px;z-index:4;display:flex;
  gap:10px;align-items:center;background:rgba(16,32,24,.96);color:var(--creme);
  border:1px solid rgba(34,208,122,.55);border-radius:14px;padding:10px 14px;
  font-size:12.5px;opacity:0;transform:translateX(40px);
  transition:opacity .4s ease,transform .5s var(--rebond)}
.controle__ticket.voir{opacity:1;transform:none}
.controle__ticket svg{width:20px;height:20px;color:var(--marq-vert);flex:none}
.controle__ticket em{display:block;font-style:normal;font-size:11px;color:var(--gris)}
.controle__legende{position:absolute;left:18px;bottom:14px;z-index:3;
  background:rgba(10,22,40,.8);border-radius:100px;padding:7px 13px}
@media(max-width:860px){
  .controle{padding:60px 12px 46px}
  .controle__ticket{display:none}
}

/* ==================== 05 Management : l'iPhone jour et nuit ==================== */
.mgmt__scene{position:relative;display:grid;
             grid-template-columns:.9fr minmax(240px,330px) 1.1fr;
             gap:3vw;align-items:center;min-height:560px;
             background:radial-gradient(80% 100% at 30% 30%,#0F2030 0%,var(--nuit2) 70%);
             border:1px solid rgba(245,240,232,.09);border-radius:22px;padding:34px}
@media(max-width:1020px){.mgmt__scene{grid-template-columns:1fr;padding:20px}}
/* La colonne d'annotations : ce que l'IA fait, replique par replique */
.m3n{display:flex;flex-direction:column;gap:14px;position:relative;z-index:5}
.m3n__titre{margin-bottom:4px}
.m3n__note{border-left:3px solid rgba(34,208,122,.5);padding:2px 0 4px 14px;
           opacity:.14;transform:translateX(-10px);
           transition:opacity .4s ease,transform .4s var(--sortie)}
.m3n__note.voir{opacity:1;transform:none}
.m3n__note b{display:block;font-family:var(--titres);font-weight:700;
             font-size:15.5px;letter-spacing:-.02em;margin:2px 0 4px}
.m3n__note p{margin:0;color:var(--gris);font-size:13px;line-height:1.55;max-width:30ch}
.m3n__num{color:var(--marq-vert)}
@media(max-width:1020px){
  .m3n{flex-direction:row;flex-wrap:wrap;gap:10px}
  .m3n__titre{width:100%}
  .m3n__note{flex:1 1 40%}
  .m3n__note p{display:none}
}
/* Le jour et la nuit sont des ETATS pilotés par le scroll, plus une boucle */
.ciel{position:absolute;inset:0;z-index:0;opacity:1;border-radius:22px;
      background:radial-gradient(80% 100% at 30% 30%,#1A3550 0%,transparent 70%);
      transition:opacity 1s ease}
.mgmt--nuit .ciel{opacity:0}
.mgmt__caption{position:absolute;right:22px;bottom:14px;white-space:nowrap;z-index:6}
@media(max-width:860px){.mgmt__caption{display:none}}
.tel3{position:relative;height:min(62svh,540px);aspect-ratio:1347/2754;z-index:5;
      margin:0 auto}
.tel3__png{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.tel3__ecran{position:absolute;left:5.48%;right:5.63%;top:2.69%;bottom:2.69%;
             border-radius:11.5% / 5.3%;overflow:hidden;background:#080D18;z-index:2;
             display:flex;flex-direction:column}
.m3__tete{display:flex;align-items:center;gap:8px;padding:26px 12px 10px;
          border-bottom:1px solid rgba(245,240,232,.08);background:#0B1220}
.m3__ava{width:30px;height:30px;border-radius:50%;flex:none;position:relative;
         background:linear-gradient(140deg,#FFC79A,#FF6B4A);color:var(--nuit);
         font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;
         font-family:var(--titres);overflow:visible}
.m3__ava--img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.m3__ava::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;
                border-radius:50%;background:var(--marq-vert);border:2px solid #0B1220}
.m3__qui{flex:1;min-width:0}
.m3__nom{font-size:12.5px;font-weight:700}
.m3__etat{font-size:9.5px;color:var(--marq-vert);display:flex;align-items:center;gap:4px}
.m3__etat i{font-style:normal;width:6px;height:6px;border-radius:50%;background:var(--marq-vert);
            animation:pulse3 1.8s ease infinite;flex:none}
@keyframes pulse3{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.m3__heure{flex:none;font-size:10px;color:var(--gris);font-variant-numeric:tabular-nums;
           display:flex;align-items:center;gap:4px;position:relative}
.m3__heure .jour{transition:opacity .6s ease}
.m3__heure .nuit{position:absolute;right:0;opacity:0;white-space:nowrap;
                 transition:opacity .6s ease}
.mgmt--nuit .m3__heure .jour{opacity:0}
.mgmt--nuit .m3__heure .nuit{opacity:1}
.m3__fil{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:0;
         padding:12px 11px;overflow:hidden;
         -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 100%);
         mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 100%)}
/* Une bulle masquee ne doit pas occuper sa place, sinon le fil est trop haut
   des le depart et on ne voit jamais ni le debut ni la fin de l'echange.
   En la repliant, le fil grandit au fil du scroll et les anciennes remontent
   hors de l'ecran, exactement comme sur un vrai telephone. */
.m3__fil>[data-beat],.m3__fil>[data-tape]{
  flex:none;                      /* sans ca le flex ECRASE les bulles au lieu
                                     de laisser le fil deborder par le haut */
  max-height:0;margin-bottom:0;overflow:hidden;
  transition:max-height .55s var(--sortie),margin-bottom .55s var(--sortie),
             opacity .35s ease,transform .35s var(--sortie)}
.m3__fil>[data-beat].voir,.m3__fil>[data-tape].voir{max-height:300px;margin-bottom:7px}
/* Les bulles sont des ETATS : elles apparaissent quand le scroll les atteint */
.m3__b{max-width:86%;padding:8px 11px;font-size:12px;line-height:1.4;opacity:0;
       transform:translateY(10px);
       transition:opacity .35s var(--sortie),transform .35s var(--sortie)}
.m3__b.voir{opacity:1;transform:none}
.m3__b--in{align-self:flex-start;background:#1E2A3D;border-radius:15px 15px 15px 4px}
.m3__b--ia{align-self:flex-end;background:#0A7CFF;color:#fff;border-radius:15px 15px 4px 15px}
.m3__b--ia .sig{display:block;font-size:8.5px;opacity:.75;margin-top:3px}
.m3__tape{align-self:flex-end;display:none;gap:3px;padding:8px 11px;
          background:rgba(10,124,255,.25);border-radius:15px 15px 4px 15px}
.m3__tape.voir{display:flex}
.m3__tape i{width:5px;height:5px;border-radius:50%;background:#7FB2FF;font-style:normal;
            animation:pt3 .9s ease infinite}
.m3__tape i:nth-child(2){animation-delay:.14s}
.m3__tape i:nth-child(3){animation-delay:.28s}
@keyframes pt3{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.m3__badge-nuit{position:absolute;left:50%;bottom:-3%;transform:translateX(-50%);z-index:4;
                background:rgba(10,22,40,.9);border:1px solid rgba(34,208,122,.4);
                border-radius:100px;padding:5px 12px;font-size:10px;white-space:nowrap;
                color:var(--gris)}
.m3__badge-nuit b{color:var(--marq-vert)}
.m3d{position:relative;z-index:6}
.m3d__carte{background:rgba(11,20,36,.92);border:1px solid rgba(245,240,232,.12);
            border-radius:16px;padding:15px 17px;margin-bottom:12px;opacity:0;
            transform:translateX(22px);
            transition:opacity .45s var(--sortie),transform .45s var(--sortie);
            box-shadow:0 20px 50px rgba(3,7,16,.5)}
.m3d__carte.voir{opacity:1;transform:none}
.m3d__carte--ia{border-color:rgba(34,208,122,.4)}
.m3d__carte--mail{border-color:rgba(34,208,122,.4);position:relative}
.m3d__t{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.12em;
        text-transform:uppercase;color:var(--gris);margin-bottom:10px;font-weight:700;
        font-family:var(--titres)}
.m3d__t b{color:var(--marq-vert)}
.iabloc{display:flex;gap:13px;align-items:center}
.mascotte{width:74px;height:74px;flex:none;border-radius:20px;object-fit:cover;
          box-shadow:0 12px 30px rgba(3,7,16,.5),0 0 0 2px rgba(34,208,122,.35)}
.iabloc .qui2{font-size:14.5px;font-weight:700}
.iabloc .sous2{font-size:11.5px;color:var(--gris);margin-top:2px}
.iabloc .sous2 b{color:var(--marq-vert)}
/* La fiche lead : trois blocs qui se lisent d'un regard, pas quatre lignes
   de formulaire. Ce qui compte : qui, quand, pourquoi. */
.lead__coche,.lead__id em,.lead__rdv em,.lead__mot em{
  font-style:normal;color:var(--marq-vert);font-weight:800;
  opacity:0;transform:scale(.4);
  transition:opacity .3s ease,transform .4s var(--rebond)}
.lead__id em.voir,.lead__rdv em.voir,.lead__mot em.voir{opacity:1;transform:scale(1)}
.lead__id{position:relative;padding:12px 0 13px;
          border-bottom:1px solid rgba(245,240,232,.1)}
.lead__id>b{display:block;font-family:var(--titres);font-weight:800;
            letter-spacing:-.03em;font-size:clamp(19px,2vw,25px);line-height:1.05}
.lead__tel{display:block;margin-top:3px;font-family:var(--titres);font-weight:700;
           font-size:15px;letter-spacing:.02em;color:var(--marq-vert);
           font-variant-numeric:tabular-nums}
.lead__id em,.lead__rdv em{position:absolute;right:0;top:12px;font-size:15px}
.lead__rdv{position:relative;display:flex;align-items:center;gap:14px;
           padding:13px 0;border-bottom:1px solid rgba(245,240,232,.1)}
.lead__quand{flex:none;font-size:11px;line-height:1.25;color:var(--gris);
             text-transform:uppercase;letter-spacing:.09em}
.lead__quand b{display:block;font-family:var(--titres);font-weight:800;
               letter-spacing:-.03em;font-size:26px;line-height:1;
               text-transform:none;color:var(--marq-vert)}
.lead__quoi{font-size:13px;line-height:1.45}
.lead__mot{position:relative;margin:12px 0 0;padding-right:22px;
           font-size:12.5px;line-height:1.55;color:var(--gris);font-style:italic}
.lead__mot::before{content:"\201C"}
.lead__mot::after{content:"\201D"}
.lead__mot em{position:absolute;right:0;top:2px;font-size:14px;font-style:normal}
/* Le composer : l'agent redige l'e-mail sous le scroll */
.compose{background:#101B2E;border:1px solid rgba(245,240,232,.12);border-radius:12px;
         overflow:hidden;transition:opacity .5s ease,transform .5s var(--sortie)}
.compose.envoye{opacity:.28;transform:scale(.97)}
.compose__ligne{display:flex;gap:10px;padding:8px 12px;font-size:12px;
                border-bottom:1px solid rgba(245,240,232,.08)}
.compose__ligne span{color:var(--gris);width:38px;flex:none}
.compose__ligne b{font-weight:600}
.compose__corps{padding:10px 12px;font-size:12.5px;line-height:1.55;min-height:74px;
                color:rgba(245,240,232,.92);display:grid}
/* Le corps garde dès le départ la hauteur du message COMPLET : un double
   invisible du texte final occupe la case, la frappe s'écrit par-dessus. Sans
   lui, le cadre gagnait une ligne en cours de frappe et la colonne, centrée,
   bougeait sous les yeux (26/09). */
.compose__corps>span{grid-area:1/1}
.compose__plein{visibility:hidden}
.compose__pied{display:flex;align-items:center;justify-content:space-between;
               padding:8px 12px;border-top:1px solid rgba(245,240,232,.08)}
.compose__apps{display:flex;gap:8px;align-items:center}
.compose__apps svg{width:18px;height:18px;display:block}
.compose__envoyer{background:var(--marq-vert);color:var(--nuit);font-weight:700;
                  font-size:12px;border-radius:100px;padding:6px 14px;
                  transition:transform .25s var(--rebond)}
.compose.envoye .compose__envoyer{transform:scale(.9)}
/* La notification qui tombe dans la boite du commercial */
.mail-toast{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;
            display:flex;gap:10px;align-items:center;background:rgba(16,26,44,.97);
            border:1px solid rgba(34,208,122,.45);border-radius:14px;padding:10px 14px;
            box-shadow:0 20px 50px rgba(3,7,16,.65);opacity:0;transform:translateY(16px);
            transition:opacity .4s ease,transform .5s var(--rebond)}
.mail-toast.voir{opacity:1;transform:none}
.mail-toast svg{width:24px;height:24px;flex:none}
.mail-toast b{font-size:12.5px;display:block}
.mail-toast em{font-style:normal;font-size:11px;color:var(--gris);display:block}

/* ==================== 06 Process : la liste des corvees tamponnees ==================== */
.corvees{padding:2vh 0 0}
.corvees__caption{display:block;margin-bottom:2vh;opacity:.7}
/* Deux colonnes : la liste qui se raye a gauche, ce qu'on vous enleve a droite */
.corvees__corps{display:grid;grid-template-columns:1.35fr .65fr;gap:5vw;align-items:start}
@media(max-width:900px){.corvees__corps{grid-template-columns:1fr;gap:36px}}
.corvees__compte{position:sticky;top:22vh;text-align:left}
.corvees__nb{display:block;font-family:var(--titres);font-weight:800;letter-spacing:-.05em;
             font-size:clamp(80px,11vw,168px);line-height:.85;color:var(--corail);
             font-variant-numeric:tabular-nums}
.corvees__nb-l{display:block;font-family:var(--titres);font-weight:800;
               letter-spacing:-.03em;font-size:clamp(19px,2.2vw,30px);
               line-height:1.15;margin-top:10px}
.corvees__nb-s{display:block;color:var(--gris);font-size:14.5px;line-height:1.6;
               margin-top:14px;max-width:26ch}
.corvees__liste{list-style:none;margin:0;padding:0}
.corvee{padding:.5vh 0;opacity:0;transform:translateY(16px);
        transition:opacity .35s ease,transform .45s var(--sortie)}
.corvee.voir{opacity:1;transform:none}
.corvee__txt{position:relative;display:inline-block;
             font-family:var(--titres);font-weight:800;letter-spacing:-.03em;
             font-size:clamp(22px,3.1vw,42px);line-height:1.12;color:var(--creme);
             transition:color .4s ease}
/* La rayure qui traverse la corvee une fois tamponnee */
.corvee__txt::after{content:"";position:absolute;left:-1.5%;right:-1.5%;top:56%;
                    height:.055em;border-radius:.06em;background:var(--corail);
                    box-shadow:0 0 0 .012em rgba(10,22,40,.55);
                    transform:scaleX(0);transform-origin:0 50%;
                    transition:transform .4s var(--sortie) .08s}
/* Barre, mais lisible : le texte reste presque plein, c'est la rayure qui parle */
.corvee.tamponnee .corvee__txt{color:rgba(245,240,232,.72)}
.corvee.tamponnee .corvee__txt::after{transform:scaleX(1)}
/* Le tampon aloa. qui claque sur la ligne */
/* Le tampon se pose APRES le texte, jamais dessus : on doit lire la corvée */
.corvee__tampon{position:absolute;left:calc(100% + .35em);top:50%;z-index:2;
                font-family:var(--titres);font-weight:800;letter-spacing:-.02em;
                font-size:.62em;line-height:1;background:var(--corail);color:var(--nuit);
                padding:.1em .38em .2em;border-radius:.2em;
                box-shadow:0 .3em 1em rgba(3,7,16,.45);
                opacity:0;transform:translateY(-50%) rotate(var(--tr,-5deg)) scale(1.7);
                transition:opacity .16s ease,transform .32s var(--rebond)}
.corvee__tampon i{font-style:normal;color:var(--creme)}
.corvee.tamponnee .corvee__tampon{opacity:1;
                transform:translateY(-50%) rotate(var(--tr,-5deg)) scale(1)}
/* La seule ligne qui reste : dire oui */
.corvees__fin{margin-top:3.5vh;opacity:0;transform:translateY(18px);
              transition:opacity .45s ease,transform .55s var(--sortie)}
.corvees__fin.voir{opacity:1;transform:none}
.corvees__reste{display:block;margin-bottom:14px}
.corvees__oui{margin:0 0 18px;font-family:var(--titres);font-weight:800;
              letter-spacing:-.035em;font-size:clamp(34px,4.6vw,64px);line-height:1}
.corvees__oui .etiq{transform:rotate(-1.8deg)}
.corvees__sub{margin:0;color:var(--gris);font-size:15.5px;line-height:1.7;max-width:52ch}
.corvees__sub b{color:var(--creme)}
@media(max-width:820px){
  .corvee{padding:.7vh 0}
  .corvees__fin{margin-top:4vh}
}

/* ==================== 07 Preuve : rivière + formats ==================== */
.riviere{overflow:hidden;padding:2vh 0 4vh;display:flex;flex-direction:column;gap:16px}
.riviere__rangee{overflow:hidden}
.riviere__piste{display:flex;width:max-content;animation:coule 214s linear infinite}
.riviere__piste--inverse{animation:coule 176s linear infinite reverse}
.riviere:hover .riviere__piste{animation-play-state:paused}
.riviere__serie{display:flex;flex:none}
.riviere__item{position:relative;flex:none;margin:0 16px 0 0;
               transition:transform .45s var(--sortie)}
.riviere__item img{height:min(32svh,300px);width:auto;border-radius:14px;display:block;
                   box-shadow:0 18px 44px rgba(3,7,16,.5)}
.riviere__item:hover{transform:scale(1.05) rotate(.6deg)}
/* Les etiquettes de nom sont retirees : les visuels portent deja leurs marques
   (decision Tom 25/08). Les noms restent dans le bandeau logos et l'intro. */
.riviere__tag{display:none}
@keyframes coule{to{transform:translateX(-50%)}}

.formats{display:grid;grid-template-columns:.62fr 1fr 1.5fr;grid-template-rows:auto auto;
         gap:20px;align-items:start;margin-top:8vh}
@media(max-width:980px){.formats{grid-template-columns:1fr 1fr}}
.format{margin:0;display:flex;flex-direction:column;gap:12px}
.format>.label{font-size:10.5px}
.format--story{grid-row:span 2}
.story{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;
       box-shadow:0 24px 60px rgba(3,7,16,.55)}
.story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story__barres{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:5px;z-index:2}
.story__barres i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.4)}
.story__barres .pleine{background:var(--creme);transform-origin:0 50%;
                       animation:story-t 6s linear infinite}
@keyframes story-t{0%{transform:scaleX(0)}30%,100%{transform:scaleX(1)}}
.story__tete{position:absolute;left:10px;top:22px;display:flex;gap:8px;align-items:center;z-index:2}
.story__ava{width:28px;height:28px;border-radius:50%;
            background:linear-gradient(135deg,var(--corail),#FFB39F);
            border:2px solid rgba(245,240,232,.8)}
.story__nom{width:74px;height:9px;border-radius:5px;background:rgba(245,240,232,.7)}
.story__acc{position:absolute;left:9%;top:16%;right:9%;margin:0;color:#fff;z-index:2;
            font-family:var(--titres);font-weight:800;
            font-size:clamp(17px,1.6vw,24px);line-height:1.1;letter-spacing:-.02em;
            text-shadow:0 2px 20px rgba(4,10,20,.65)}
.story__acc .accent{color:#9CC8FF}
.story__swipe{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:2;
              background:rgba(245,240,232,.94);color:var(--nuit);font-weight:700;
              font-size:11.5px;padding:8px 15px;border-radius:100px;white-space:nowrap}
.carrousel{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
           box-shadow:0 24px 60px rgba(3,7,16,.55)}
.carrousel__train{display:flex;height:100%;width:300%}
.carrousel__slide{position:relative;width:33.333%;height:100%;flex:none}
.carrousel__slide img{width:100%;height:100%;object-fit:cover;display:block}
/* Le voile qui garantit la lisibilite de l'accroche posee, meme sur image claire */
.carrousel__slide::before{content:"";position:absolute;left:0;right:0;top:0;height:40%;
  z-index:1;background:linear-gradient(180deg,rgba(4,10,20,.55),transparent)}
.carrousel__cap{z-index:2}
/* Le texte est POSE sur le fond, comme dans nos vraies campagnes */
.carrousel__cap{position:absolute;left:9%;top:8%;right:9%;color:#fff;
                font-family:var(--titres);font-weight:800;
                font-size:clamp(16px,1.5vw,22px);line-height:1.12;letter-spacing:-.02em;
                text-shadow:0 2px 18px rgba(4,10,20,.6)}
.carrousel__cap b{color:#FFD9CC}
.carrousel__points{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
                   display:flex;gap:7px;z-index:2}
.carrousel__points i{width:7px;height:7px;border-radius:50%;background:rgba(245,240,232,.4);
                     transition:background .3s,transform .3s}
.carrousel__points .actif{background:var(--creme);transform:scale(1.3)}
/* Le carrousel enchasse dans un vrai post Instagram */
.ig-post{background:#FFFFFF;border-radius:16px;overflow:hidden;
         box-shadow:0 24px 60px rgba(3,7,16,.55)}
.ig-post .carrousel{border-radius:0;box-shadow:none}
.ig-post__tete{display:flex;align-items:center;gap:8px;padding:10px 12px;color:#050505}
.ig-post__tete .ig-tete__ava{border-color:rgba(0,0,0,.06)}
.ig-post__tete b{font-size:11.5px;font-weight:700}
.ig-post__tete .ig-tete__points{margin-left:auto;font-weight:700;letter-spacing:1px;color:#050505}
.carrousel__cpt{position:absolute;right:10px;top:10px;z-index:2;
                background:rgba(4,10,20,.62);color:#fff;font-weight:600;
                font-size:10px;padding:4px 9px;border-radius:100px;
                font-variant-numeric:tabular-nums}
.ig-post__pied{display:flex;align-items:center;gap:12px;padding:10px 12px 2px}
.ig-post__pied svg{width:20px;height:20px;flex:none}
.ig-post__aime{margin-left:auto;color:#050505;font-size:11px;font-weight:700}
.ig-post__legende{margin:0;padding:4px 12px 12px;color:#050505;font-size:11px;line-height:1.45;
                  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-post__legende b{font-weight:700;margin-right:4px}
.panneau{position:relative;border-radius:18px;overflow:hidden;
         box-shadow:0 24px 60px rgba(3,7,16,.55)}
.panneau__scene{display:block;width:100%}
.panneau__affiche{position:absolute;left:53.8%;top:12.6%;width:30.9%;height:48.2%;
                  object-fit:cover;transform:rotate(-1.2deg) skewY(-1.4deg);
                  box-shadow:inset 0 0 20px rgba(0,0,0,.15)}
.totem{position:relative;border-radius:18px;overflow:hidden;
       box-shadow:0 24px 60px rgba(3,7,16,.55)}
.totem__scene{display:block;width:100%}
.totem__affiche{position:absolute;left:15.8%;top:19%;width:23.6%;height:38.4%;
                object-fit:cover;transform:skewY(1.2deg);filter:brightness(1.08)}
.format--banniere{grid-column:3}
@media(max-width:980px){.format--banniere{grid-column:span 2}}
.banniere{position:relative;aspect-ratio:21/7;border-radius:16px;overflow:hidden;
          box-shadow:0 24px 60px rgba(3,7,16,.55)}
.banniere img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banniere__nav{position:absolute;left:14px;top:12px;display:flex;gap:6px;z-index:2}
.banniere__nav i{width:9px;height:9px;border-radius:50%;background:rgba(245,240,232,.55)}
.formats__aussi{margin-top:26px}

/* ==================== La preuve : un visuel, partout ====================
   Une seule campagne (la canette de l'univers aloa) qui voyage de support en
   support sous le scroll. UN support a la fois, en grand : c'est une scene,
   pas une planche contact. */
.uvp__tete{margin:11vh 0 5vh}
.uvp__titre{font-family:var(--titres);font-weight:800;letter-spacing:-.035em;
            font-size:clamp(26px,3.4vw,46px);line-height:1.04;margin:0}
.uvp{position:relative;display:grid;grid-template-columns:.85fr 1.4fr;gap:3.5vw;
     align-items:center;min-height:600px;padding:40px 38px 54px;
     background:radial-gradient(80% 100% at 62% 30%,#13233E 0%,var(--nuit2) 72%);
     border:1px solid rgba(245,240,232,.1);border-radius:22px}
@media(max-width:900px){.uvp{grid-template-columns:1fr;gap:20px;padding:22px 18px 40px;
                             min-height:0}}
.uvp__caption{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;
              white-space:nowrap;z-index:6}
@media(max-width:900px){.uvp__caption{display:none}}

/* La colonne des temps */
.uvp__temps{display:flex;flex-direction:column;gap:2.6vh}
.uvp__t{opacity:.15;transform:translateX(-12px);
        transition:opacity .4s ease,transform .4s var(--sortie)}
.uvp__t.actif{opacity:1;transform:none}
.uvp__t .label{display:block;margin-bottom:4px}
.uvp__t h3{font-family:var(--titres);font-weight:800;letter-spacing:-.03em;
           font-size:clamp(17px,1.75vw,26px);line-height:1.05;margin:0}
/* Les quatre légendes restent en place, pâles comme leur titre, et l'étape
   active s'allume. Avant, seule la légende active s'affichait : à chaque étape
   la précédente se refermait d'un coup et tout remontait de 44 px, et la
   colonne, centrée, changeait de hauteur à l'arrivée dans la scène (26/09).
   Deux lignes réservées pour chacune, quelle que soit sa longueur. */
.uvp__t p{color:var(--gris);font-size:12.5px;line-height:1.5;max-width:24ch;
          margin:6px 0 0;min-height:3em}
@media(max-width:900px){
  .uvp__temps{flex-direction:row;flex-wrap:wrap;gap:10px 14px}
  .uvp__t h3{font-size:13px}
  .uvp__t h3 br{display:none}
  .uvp__t .label,.uvp__t p{display:none !important}
}

/* La scene : les supports empiles au centre, un seul visible */
.uvp__scene{position:relative;height:min(66svh,620px)}
@media(max-width:900px){.uvp__scene{height:min(58svh,470px)}}
.uvp__sup{position:absolute;inset:0;display:flex;align-items:center;
          justify-content:center;opacity:0;transform:translateY(26px) scale(.96);
          pointer-events:none;
          transition:opacity .45s ease,transform .6s var(--sortie)}
.uvp__sup.actif{opacity:1;transform:none;pointer-events:auto}
/* Celui qui vient de partir remonte doucement, pour donner le sens du voyage */
.uvp__sup.passe{opacity:0;transform:translateY(-30px) scale(.97)}

/* Chaque support a sa taille naturelle dans la scene */
.uvp__sup--tel .fmt-tel{height:100%;max-height:600px;width:auto;
                        aspect-ratio:1347/2754}
.uvp__sup--post .ig-post{width:min(340px,84%)}
.uvp__sup--nav .navig{width:min(760px,96%)}
/* Les supports imprimes sont PHOTOGRAPHIES deja habilles : le visuel est dans
   l'image, on ne colle plus un aplat par-dessus un support vierge. */
.uvp__photo{height:100%;width:auto;max-width:100%;object-fit:contain;
            border-radius:14px;box-shadow:0 30px 70px rgba(3,7,16,.6)}

/* L'etiquette de format : elle nomme le support en cours, et reste lisible
   au telephone ou la colonne de gauche se reduit a des pilules. */
.uvp__etiq{position:absolute;left:0;top:0;z-index:6;display:flex;align-items:baseline;
           gap:9px;background:rgba(10,22,40,.82);border:1px solid rgba(245,240,232,.16);
           border-radius:100px;padding:7px 15px;
           -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.uvp__etiq b{font-family:var(--titres);font-weight:800;font-size:13px;
             letter-spacing:-.01em;color:var(--creme)}
.uvp__etiq i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;
             color:var(--gris)}
@media(max-width:900px){
  /* Au telephone elle remonte dans la marge : elle ne doit jamais couvrir le
     support, et la dimension reste sur la colonne, pas sur l'etiquette. */
  .uvp__scene{margin-top:32px}
  .uvp__etiq{left:50%;transform:translateX(-50%);top:-32px;padding:5px 14px;
             white-space:nowrap}
  .uvp__etiq b{font-size:12px}
  .uvp__etiq i{display:none}
}



/* Les accroches par support : le 4x3 ecrit petit dans son espace calme a
   gauche, la story remonte au-dessus de la canette */


/* Le pouce qui tient le flyer reste DEVANT l'imprime : le masque vient
   de la detection de peau dans le plan redresse. */


/* Les accroches par support : le 4x3 ecrit petit dans son espace calme a
   gauche, la story remonte au-dessus de la canette */
.uvp__sup--tel .fmt-tel__acc{top:12.5%}

/* Le visuel du post, avec son accroche posee */
.uvp__post-visu{position:relative;aspect-ratio:4/5;overflow:hidden}
.uvp__post-visu img{width:100%;height:100%;object-fit:cover;display:block}
.uvp__post-acc{position:absolute;left:8%;top:7%;color:#fff;font-family:var(--titres);
               font-weight:800;font-size:clamp(17px,1.6vw,24px);letter-spacing:-.02em;
               line-height:1.08;text-shadow:0 2px 18px rgba(4,10,20,.55)}
.uvp__post-acc i{font-style:normal;color:#FFD9CC}

/* La story dans le vrai telephone (meme geometrie que la scene Management) */
.fmt-tel{position:relative;aspect-ratio:1347/2754;width:100%}
.fmt-tel__png{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.fmt-tel__ecran{position:absolute;left:5.48%;right:5.63%;top:2.69%;bottom:2.69%;
                border-radius:11.5% / 5.3%;overflow:hidden;background:#080D18;z-index:2}
.fmt-tel__ecran>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fmt-tel__ecran .story__barres{top:7%}
.fmt-tel__acc{position:absolute;left:9%;top:19%;right:9%;margin:0;color:#fff;z-index:2;
              font-family:var(--titres);font-weight:800;
              font-size:clamp(15px,1.4vw,21px);line-height:1.1;letter-spacing:-.02em;
              text-shadow:0 2px 20px rgba(4,10,20,.65)}
.fmt-tel__acc .accent{color:#9CC8FF}
/* Le bandeau "voir plus" d'une story : un chevron au-dessus d'un texte fin,
   pas un gros bouton de site web. */
.fmt-tel__swipe{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);z-index:3;
                display:flex;flex-direction:column;align-items:center;gap:2px;
                color:#fff;font-weight:600;font-size:9.5px;letter-spacing:.02em;
                white-space:nowrap;text-shadow:0 1px 8px rgba(4,10,20,.7)}
.fmt-tel__swipe i{font-style:normal;font-size:12px;line-height:.7;opacity:.95;
                  animation:swipe-h 1.9s ease-in-out infinite}
@keyframes swipe-h{0%,100%{transform:translateY(0);opacity:.95}
                   50%{transform:translateY(-3px);opacity:.6}}
/* Sans voiles, le chrome blanc disparait sur une photo claire */
.story__voile-h,.story__voile-b{position:absolute;left:0;right:0;z-index:1;
                                pointer-events:none}
.story__voile-h{top:0;height:26%;
                background:linear-gradient(180deg,rgba(4,10,20,.5),rgba(4,10,20,0))}
.story__voile-b{bottom:0;height:24%;
                background:linear-gradient(0deg,rgba(4,10,20,.45),rgba(4,10,20,0))}
/* Chrome Instagram de la story : en-tete compte + barre de reponse, pour que ca crie Instagram */
.ig-tete{position:absolute;left:4.5%;right:4.5%;top:9.5%;z-index:2;
         display:flex;align-items:center;gap:7px;color:#fff;
         text-shadow:0 1px 10px rgba(4,10,20,.6)}
.ig-tete__ava{width:24px;height:24px;border-radius:50%;flex:none;overflow:hidden;
              background:#F0C9BC;border:1.5px solid rgba(255,255,255,.85)}
.ig-tete__ava img{width:100%;height:100%;object-fit:cover;display:block}
.ig-tete b{font-size:11px;font-weight:700;letter-spacing:.01em}
.ig-tete em{font-style:normal;font-size:10.5px;opacity:.75}
.ig-tete__points{margin-left:auto;font-weight:700;letter-spacing:1px;opacity:.9}
.ig-reponse{position:absolute;left:4.5%;right:4.5%;bottom:3.5%;z-index:2;
            display:flex;align-items:center;gap:10px}
.ig-reponse__champ{flex:1;border:1.2px solid rgba(255,255,255,.65);border-radius:100px;
                   padding:8px 13px;color:rgba(255,255,255,.85);font-size:10.5px;
                   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-reponse svg{width:19px;height:19px;flex:none;
                filter:drop-shadow(0 1px 6px rgba(4,10,20,.5))}
/* Les mises en situation : scene reelle + visuel pose par homographie */
.insitu{position:relative;border-radius:16px;overflow:hidden;
        box-shadow:0 26px 60px rgba(3,7,16,.55)}
.insitu__scene{display:block;width:100%}
.cpin{position:absolute;left:0;top:0;width:100px;height:100px;
      transform-origin:0 0;overflow:hidden;background:#0A1628;
      backface-visibility:hidden}
.cpin>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cpin__voile{position:absolute;left:0;right:0;top:0;height:42%;
             background:linear-gradient(180deg,rgba(4,10,20,.5),transparent)}
.cpin__acc{position:absolute;left:7%;top:6.5%;right:12%;margin:0;color:#fff;
           font-family:var(--titres);font-weight:800;font-size:11px;
           line-height:1.1;letter-spacing:-.025em;
           text-shadow:0 1px 10px rgba(4,10,20,.5)}
/* Le prix ne porte plus de pastille pleine et ne se pose JAMAIS sur le produit :
   une ligne fine, tenue dans la marge du support (regle Tom : la typo ne monte
   jamais sur le sujet de la photo). */
.cpin__prix{position:absolute;left:7%;bottom:7%;color:#fff;white-space:nowrap;
            font-family:var(--titres);font-weight:700;font-size:6.5px;
            letter-spacing:.05em;padding-top:3px;
            border-top:1px solid rgba(255,255,255,.5);
            text-shadow:0 1px 6px rgba(4,10,20,.55)}
/* Quand le bas de l'image est occupe, le prix remonte sous l'accroche */
.cpin__prix--haut{bottom:auto;top:22%}
/* La dalle de l'ecran est bien plus allongee que la photo : on recadre
   sur le cornet plutot qu'au centre, sinon il sort du cadre. */
.cpin--totem>img{object-position:45% 46%}
.cpin--totem .cpin__acc{top:5%;font-size:9.5px}
/* Fond clair et uni : encre foncee, pas de voile. Plus elegant qu'un degrade noir. */
.cpin--clair .cpin__voile{display:none}
.cpin--clair .cpin__acc{color:#1B2A3F;text-shadow:none}
.cpin--clair .cpin__acc i{color:#B04B2F}
.cpin--clair .cpin__prix{color:#1B2A3F;border-top-color:rgba(27,42,63,.38);
                         text-shadow:none}
/* ---- L'imprime doit prendre la lumiere de la scene ----
   Un visuel pose a plat sur une photo se repere tout de suite. On rejoue donc
   par-dessus, en fondu, l'ombrage reel du support (releve sur la photo puis
   redresse par homographie) quand il existe, et une lumiere reconstituee quand
   la surface photographiee est uniforme. Le grain raccorde la nettete du
   visuel a celle de la photo. */
.cpin__ombre{position:absolute;inset:0;z-index:5;pointer-events:none;
             background-size:100% 100%;background-repeat:no-repeat;
             mix-blend-mode:multiply}


/* Le grain, sur tous les supports */
.cpin::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
             background:url(img/scenes/grain.png) repeat;background-size:96px 96px;
             mix-blend-mode:overlay;opacity:.5}

/* Le 4x3 : structure vectorielle, visuel eclaire dans la nuit */
.pan{position:relative;padding-bottom:40px}
.pan__cadre{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;
            border:7px solid #2A3648;background:#000;
            box-shadow:0 30px 70px rgba(3,7,16,.6),0 0 60px rgba(245,240,232,.06)}
.pan__cadre>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pan__acc{position:absolute;left:6%;top:7%;margin:0;color:#fff;
          font-family:var(--titres);font-weight:800;
          font-size:clamp(17px,1.7vw,26px);letter-spacing:-.02em;
          text-shadow:0 2px 18px rgba(4,10,20,.7)}
.accent2{color:#FFD9CC}
/* Les spots qui eclairent le panneau la nuit */
.pan__lueur{position:absolute;left:0;right:0;top:0;height:40%;
            background:linear-gradient(180deg,rgba(245,240,232,.14),transparent)}
.pan__pied{position:absolute;bottom:0;width:10px;height:44px;background:#232F42;
           border-radius:0 0 3px 3px}
.pan__pied--g{left:22%}
.pan__pied--d{right:22%}
/* L'oriflamme vectorielle */
.oriflamme{width:100%;height:auto;display:block;
           filter:drop-shadow(0 22px 44px rgba(3,7,16,.55))}
/* Le totem vectoriel */
.totem2{position:relative;padding-bottom:26px}
.totem2__ecran{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
               border:6px solid #1A2434;background:#000;
               box-shadow:0 26px 60px rgba(3,7,16,.6),inset 0 0 30px rgba(0,0,0,.4)}
.totem2__ecran img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.totem2__base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
              width:70%;height:26px;background:linear-gradient(180deg,#1A2434,#121B2B);
              border-radius:0 0 10px 10px}
/* La banniere dans sa fenetre de navigateur */
.navig{border-radius:14px;overflow:hidden;border:1px solid rgba(245,240,232,.14);
       box-shadow:0 26px 60px rgba(3,7,16,.55);background:#0F1B2E}
.navig__barre{display:flex;align-items:center;gap:6px;padding:9px 12px}
.navig__barre i{width:9px;height:9px;border-radius:50%;background:rgba(245,240,232,.28);
                font-style:normal}
.navig__barre i:first-child{background:#FF5F57}
.navig__barre i:nth-child(2){background:#FEBC2E}
.navig__barre i:nth-child(3){background:#28C840}
.navig__url{margin-left:10px;flex:1;background:rgba(245,240,232,.08);border-radius:7px;
            padding:4px 12px;font-size:11px;color:var(--gris)}
/* La nav du mini-site : logo rond, liens, bouton corail, pour lire "un site" en une seconde */
.navig__nav{display:flex;align-items:center;gap:10px;padding:8px 12px;
            background:#FDFBF7;color:#1A1F2B}
.navig__logo{width:16px;height:16px;border-radius:50%;flex:none;
             background:linear-gradient(135deg,var(--corail),#FFB39F)}
.navig__nav b{font-size:10px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.navig__nav em{font-style:normal;font-size:9px;opacity:.62;white-space:nowrap}
.navig__nav em:first-of-type{margin-left:auto}
.navig__btn{background:var(--corail);color:#fff;font-weight:700;font-size:9px;
            padding:5px 10px;border-radius:100px;white-space:nowrap}
.navig__hero{position:relative;aspect-ratio:16/7;overflow:hidden}
.navig__hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.navig__contenu{position:absolute;left:6%;bottom:10%;z-index:2}
.navig__acc{margin:0 0 8px;color:#fff;font-family:var(--titres);font-weight:800;
            font-size:clamp(16px,1.6vw,24px);letter-spacing:-.02em;
            text-shadow:0 2px 18px rgba(4,10,20,.7)}
.navig__cta{display:inline-block;background:var(--creme);color:var(--nuit);
            font-weight:700;font-size:12px;border-radius:100px;padding:7px 15px}

/* ==================== 08 Prix ==================== */
.prix{background:linear-gradient(180deg,var(--nuit),var(--nuit2) 30%,var(--nuit2))}
.prix__ancrage{display:inline-block;background:rgba(255,107,74,.08);
               border:1px solid rgba(255,107,74,.35);border-radius:14px;
               padding:14px 20px;font-size:14.5px;color:var(--creme);margin:0 0 40px}
.prix__ancrage b{color:var(--corail)}
.prix__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:980px){.prix__grille{grid-template-columns:1fr}}
.carte-prix{border-radius:22px;padding:28px 26px;border:1px solid rgba(245,240,232,.12);
            background:var(--nuit);display:flex;flex-direction:column;gap:13px}
.carte-prix__nom{font-family:var(--titres);font-weight:800;font-size:22px;letter-spacing:-.03em}
.carte-prix__montant{font-family:var(--titres);font-weight:800;
                     font-size:clamp(32px,3.2vw,42px);letter-spacing:-.045em;line-height:1}
.carte-prix__montant small{font-size:11px;font-weight:600;letter-spacing:.12em;
                           text-transform:uppercase;display:block;margin-top:9px;
                           color:var(--gris)}
.carte-prix ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;
               gap:9px;font-size:14px;line-height:1.5}
.carte-prix li{display:flex;gap:10px;align-items:flex-start}
.carte-prix li::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
                       background:var(--corail);margin-top:7px}
.carte-prix--b li::before{background:var(--marq-bleu)}
.carte-prix--m li::before{background:var(--marq-vert)}
.prix__grille .carte-prix:first-child{border-color:rgba(255,107,74,.32)}
.carte-prix--b{border-color:rgba(74,124,255,.32)}
.carte-prix--m{border-color:rgba(34,208,122,.32)}
.carte-prix__pied{margin-top:auto;padding-top:14px;font-size:10.5px;font-weight:600;
                  letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
/* La vedette : le bundle */
.carte-bundle{position:relative;margin-top:22px;background:var(--creme);color:var(--nuit);
              border-radius:24px;padding:34px 34px 30px;transform:rotate(-.6deg);
              box-shadow:0 34px 90px rgba(3,7,16,.6),0 0 0 6px rgba(255,107,74,.16);
              display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center}
@media(max-width:860px){.carte-bundle{grid-template-columns:1fr}}
.carte-bundle .badge-eco{position:absolute;top:-16px;right:26px;background:var(--corail);
              color:var(--nuit);font-family:var(--titres);font-weight:700;font-size:13px;
              padding:8px 14px;border-radius:100px;transform:rotate(1.6deg);
              box-shadow:0 10px 26px rgba(255,107,74,.4)}
.carte-bundle__nom{font-family:var(--titres);font-weight:800;font-size:clamp(24px,2.6vw,34px);
                   letter-spacing:-.035em;margin:0 0 8px}
.carte-bundle__montant{font-family:var(--titres);font-weight:800;
                       font-size:clamp(40px,4.6vw,62px);letter-spacing:-.045em;line-height:1}
.carte-bundle__montant .barre{text-decoration:line-through;color:#8B95A3;font-size:.44em;
                              font-weight:600;vertical-align:.6em;margin-right:.15em}
.carte-bundle__montant small{font-size:11px;font-weight:600;letter-spacing:.12em;
                             text-transform:uppercase;display:block;margin-top:10px;color:#5E6B7E}
.carte-bundle ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
                 gap:10px;font-size:15px;line-height:1.5}
.carte-bundle li{display:flex;gap:10px;align-items:flex-start}
.carte-bundle li i{font-style:normal;width:11px;height:11px;border-radius:50%;flex:none;
                   margin-top:6px}
.carte-bundle__pied{grid-column:1 / -1;display:flex;gap:18px;align-items:center;
                    flex-wrap:wrap;border-top:1px solid rgba(10,22,40,.12);padding-top:20px}
.carte-bundle__garantie{font-size:12px;font-weight:600;letter-spacing:.1em;
                        text-transform:uppercase;color:#5E6B7E}

/* ==================== 09 FAQ : doctrine epinglee a gauche, questions numerotees a droite ==================== */
.faq2{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.faq2__gauche{position:sticky;top:14vh}
.faq2__gauche .label{display:block;margin-bottom:16px}
.faq2__gauche h2{font-size:clamp(30px,3.6vw,50px);line-height:1.08;font-weight:800;margin:0 0 22px}
.faq2__doctrine{margin:0 0 28px;color:var(--gris);font-size:15.5px;line-height:1.7;max-width:38ch}
.faq2__doctrine b{color:var(--creme)}
/* Les trois mots de la methode, tamponnes aux couleurs des trois services */
.faq2__mots{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.faq2__mot{display:inline-block;font-family:var(--titres);font-weight:800;
           font-size:clamp(18px,1.7vw,24px);letter-spacing:-.02em;color:var(--nuit);
           padding:.06em .45em .16em;border-radius:.24em;
           box-shadow:0 .4em 1.2em rgba(0,0,0,.4)}
.faq2__mot--a{background:var(--corail);transform:rotate(-1.6deg)}
.faq2__mot--b{background:#4A7CFF;transform:rotate(1.1deg) translateX(14px)}
.faq2__mot--c{background:#22D07A;transform:rotate(-.8deg) translateX(4px)}
@media(max-width:980px){
  .faq2{grid-template-columns:1fr;gap:36px}
  .faq2__gauche{position:static}
  .faq2__mots{flex-direction:row;flex-wrap:wrap}
  .faq2__mot--b,.faq2__mot--c{transform:none}
}
.faq__item{border-bottom:1px solid rgba(245,240,232,.12)}
.faq__item summary{list-style:none;display:flex;gap:18px;
                   align-items:center;padding:22px 0;font-family:var(--titres);
                   font-weight:700;font-size:clamp(16px,1.8vw,20px);letter-spacing:-.02em;
                   transition:color .25s}
.faq__item summary:hover{color:var(--corail)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__num{flex:none;font-family:var(--titres);font-weight:700;font-size:12px;
          letter-spacing:.14em;color:var(--corail);font-variant-numeric:tabular-nums;
          transform:translateY(2px)}
.faq__item summary i{font-style:normal;flex:none;margin-left:auto;
                     width:30px;height:30px;border-radius:50%;
                     border:1.5px solid rgba(245,240,232,.3);display:flex;align-items:center;
                     justify-content:center;font-size:15px;
                     transition:transform .35s var(--rebond),background .3s,color .3s}
.faq__item[open] summary i{transform:rotate(45deg);background:var(--corail);
                           border-color:transparent;color:var(--nuit)}
.faq__item p{margin:0 0 22px;padding-left:38px;color:var(--gris);
             font-size:15.5px;line-height:1.7;max-width:60ch}
.faq__item p b{color:var(--creme)}
/* La reponse glisse en douceur a l'ouverture */
.faq__item[open] p{animation:faq-ouvre .45s var(--sortie, ease) both}
@keyframes faq-ouvre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ==================== 10 CTA final ==================== */
.final{position:relative;overflow:hidden;padding:16vh 4.5vw;text-align:center}
.final__fond{position:absolute;inset:-4%;z-index:0;display:grid;
             grid-template-columns:repeat(7,1fr);gap:12px;filter:blur(9px) brightness(.4);
             transform:rotate(-2deg)}
.final__fond img{width:100%;height:100%;object-fit:cover;border-radius:12px;min-height:30vh}
.final__carte{position:relative;z-index:2;max-width:760px;margin:0 auto;
              background:rgba(10,22,40,.88);border:1px solid rgba(245,240,232,.14);
              -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
              border-radius:26px;padding:52px 40px 44px}
.final__carte h2{font-size:clamp(28px,4vw,50px);line-height:1.05;font-weight:800;margin:0 0 16px}
.final__texte{color:var(--gris);font-size:16.5px;line-height:1.7;max-width:46ch;margin:0 auto 26px}
.final__texte b{color:var(--creme)}
.final__garantie{margin:18px 0 0;font-size:12.5px;color:var(--gris)}

/* ==================== Pied ==================== */
.pied{border-top:1px solid rgba(245,240,232,.12);padding:40px 4.5vw 46px}
.pied__haut{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
            align-items:flex-start;max-width:1220px;margin:0 auto 26px}
.pied__logo{height:20px;width:auto;filter:brightness(0) invert(1)}
.pied__baseline{color:var(--gris);font-size:13.5px;margin:10px 0 0}
.pied__liens{display:flex;gap:22px;font-size:13.5px;flex-wrap:wrap}
.pied__liens a{color:rgba(245,240,232,.75);text-decoration:none}
.pied__liens a:hover{color:var(--creme)}
/* Le lien vers les mentions legales : lisible, cible tactile suffisante */
.pied__legal{color:var(--gris);text-decoration:none;border-bottom:1px solid rgba(139,154,174,.4);
             padding-bottom:2px;min-height:auto;transition:color .25s,border-color .25s}
.pied__legal:hover{color:var(--creme);border-color:var(--creme)}
.pied__bas{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
           max-width:1220px;margin:0 auto}

/* ==========================================================================
   Management : les VRAIES interfaces, en clair.
   L'écran = Messenger côté client (ses messages en bleu à droite, l'agent en
   gris à gauche). Les cartes = design Gmail / fiche contact, sur fond blanc.
   Ces règles surchargent les bases sombres plus haut.
   ========================================================================== */
.tel3__ecran{background:#FFFFFF;color:#050505}
/* L'en-tete passe SOUS l'ile dynamique du telephone, tout sur une ligne */
.m3__tete{background:#FFFFFF;border-bottom:1px solid #E4E6EB;
          padding:11.5% 9px 7px;gap:6px;align-items:center}
.m3__retour{width:18px;height:18px;flex:none}
.m3__ic{width:17px;height:17px;flex:none}
.m3__qui{flex:1;min-width:0}
.m3__nom{color:#050505;font-size:10.5px;white-space:nowrap;overflow:hidden;
         text-overflow:ellipsis;display:block}
.m3__etat{color:#65676B;font-size:8.5px;white-space:nowrap}
.m3__b--agent .sig{display:block;font-size:8.5px;margin-top:3px;opacity:1}
.m3__etat i{background:#31A24C;animation:none}
.m3__heure{color:#65676B;font-size:9px}
.m3__fil{gap:6px;padding:10px 9px 6px}
/* Le rang agent : mini avatar + bulle, comme dans Messenger */
.m3__rang{display:flex;gap:6px;align-items:flex-end;max-width:88%;opacity:0;
          transform:translateY(10px);
          transition:opacity .35s var(--sortie),transform .35s var(--sortie)}
.m3__rang.voir{opacity:1;transform:none}
.m3__rang[data-tape]{transition:none}
.m3__mini{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none}
.m3__rang .m3__b{opacity:1;transform:none;transition:none;max-width:100%}
.m3__b--client{align-self:flex-end;background:#0084FF;color:#fff;
               border-radius:18px 18px 4px 18px}
.m3__b--agent{background:#F0F0F0;color:#050505;border-radius:18px 18px 18px 4px}
.m3__b--agent .sig{color:#65676B;opacity:1}
.m3__tape{background:#F0F0F0;border-radius:18px 18px 18px 4px;display:flex}
.m3__rang[data-tape]{display:none}
.m3__rang[data-tape].voir{display:flex}
.m3__tape i{background:#90949C}
/* La barre de saisie Messenger */
.m3__saisie{display:flex;align-items:center;gap:7px;padding:7px 10px 24px;
            background:#FFFFFF;border-top:1px solid #E4E6EB}
.m3__saisie svg{width:19px;height:19px;flex:none}
.m3__champ{flex:1;background:#F0F2F5;color:#65676B;border-radius:100px;
           padding:6px 12px;font-size:12px}
/* Les cartes de droite passent en clair */
.m3d__carte{background:#FFFFFF;border-color:#E4E6EB;color:#1C1E21}
.m3d__t{color:#65676B}
.m3d__t b{color:#0B57D0}
.m3d__carte--ia{border-color:#E4E6EB}
.iabloc .qui2{color:#1C1E21}
.iabloc .sous2{color:#65676B}
.iabloc .sous2 b{color:#188038}
.lead__id,.lead__rdv{border-bottom-color:#EBEDF0}
.lead__id>b,.lead__quoi{color:#1C1E21}
.lead__tel,.lead__quand b{color:#188038}
.lead__quand{color:#65676B}
.lead__mot{color:#65676B}
.lead__id em,.lead__rdv em,.lead__mot em{color:#188038}
/* Le composer facon Gmail */
.compose{background:#FFFFFF;border:1px solid #E0E0E0;border-radius:10px;
         box-shadow:0 10px 30px rgba(0,0,0,.18)}
.compose__entete{background:#202124;color:#fff;font-size:12px;font-weight:600;
                 padding:8px 12px;display:flex;justify-content:space-between;
                 align-items:center}
.compose__entete i{font-style:normal;color:#9AA0A6;letter-spacing:2px}
.compose__ligne{border-bottom:1px solid #EEEEEE;color:#5F6368}
.compose__ligne span{color:#5F6368}
.compose__ligne b{color:#202124;font-weight:500}
.compose__corps{color:#202124}
.compose__pied{border-top:1px solid #EEEEEE}
.compose__envoyer{background:#0B57D0;color:#fff}
.mail-toast{background:#FFFFFF;border:1px solid #E0E0E0;color:#202124;
            box-shadow:0 20px 50px rgba(3,7,16,.45)}
.mail-toast b{color:#202124}
.mail-toast em{color:#5F6368}
.m3d__carte--mail{border-color:#E4E6EB}
.m3d__carte--mail .m3d__t b{color:#0B57D0}
/* En-tete du lead : la provenance Messenger */
.lead__prov{display:flex;align-items:center;gap:8px;margin-bottom:8px;
            font-size:11.5px;color:#65676B}
.lead__prov svg{width:16px;height:16px;flex:none}
.lead__prov b{color:#1C1E21}
.lead__init{width:34px;height:34px;border-radius:50%;flex:none;background:#0084FF;
            color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;
            justify-content:center;font-family:var(--titres)}

/* ==================== Mouvement réduit ==================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rev{opacity:1;transform:none}
  .probleme__ligne .mot{opacity:1;transform:none}
  .probleme__ligne .mot--stamp{transform:rotate(-1.4deg)}
  .probleme__fin{opacity:1;transform:none}
  .appli{opacity:1;transform:none}
  .notif{opacity:1;transform:none}
  .etape-s{opacity:1}
  .tampon{opacity:1;transform:none}
  .carte-b__metier{opacity:1;transform:none}
  .m3__b,.m3d__carte{opacity:1;transform:none}
  .gr__aire{opacity:.5}
  .gr__ligne{stroke-dashoffset:0}
  .gr__badge{transform:scale(1)}
  .gr__avant,.boost__bandeau,.gr__coeur,.gr__com{opacity:1}
  .lead__id em,.lead__rdv em,.lead__mot em{opacity:1;transform:scale(1)}
  .mail-toast{opacity:1;transform:none}
  .corvee,.corvees__fin{opacity:1;transform:none}
  .corvee__tampon{opacity:1;transform:translateY(-50%) rotate(var(--tr,-5deg)) scale(1)}
  .corvee__txt::after{transform:scaleX(1)}
}
/* Etats finaux quand le mouvement est reduit (classe posee par le JS) */
.fini .m3__b,.fini .m3d__carte,.fini .m3__rang:not([data-tape]){opacity:1;transform:none}
.fini .lead__id em,.fini .lead__rdv em,.fini .lead__mot em{opacity:1;transform:scale(1)}
.fini .mail-toast{opacity:1;transform:none}
.fini .corvee,.fini .corvees__fin{opacity:1;transform:none}
.fini .mini-conv .mcb:nth-last-child(-n+3){max-height:64px;margin-bottom:6px;
  padding:6px 9px;opacity:1;transform:none}
.fini .mini-conv__ok{opacity:1}
.fini .corvee__tampon{opacity:1;transform:translateY(-50%) rotate(var(--tr,-5deg)) scale(1)}
.fini .corvee__txt::after{transform:scaleX(1)}
.fini .b2__mot,.fini .b2__notif,.fini .moni__dec{opacity:1;transform:none}
.fini .bnotif,.fini .bpost__badge{opacity:1;transform:none}
  .fini .bnotif{max-height:70px;margin-bottom:7px;padding:9px 12px}
.fini .uvp__t{opacity:1;transform:none}
.fini .moni__geste{opacity:1;transform:none}
.fini .controle__pill,.fini .controle__ticket{opacity:1;transform:none}
.fini .m3n__note{opacity:1;transform:none}

/* Les publications de la revue sont desormais des visuels generes (gen-bake) :
   plus de gabarit HTML, plus de typo posee. Voir img/posts/mois-01..10.webp (sélection du 29/09). */
/* ==========================================================================
   Passe mobile : ce qui coute cher au doigt et ne se voit pas sur un ecran
   de 390 px. Le grain couvre 4 fois la surface de l'ecran, les caustiques
   sont des flous de 90 px repeints a chaque frame : les deux sautent.
   ========================================================================== */
@media(max-width:900px){
  .grain{display:none}
  .caustique{display:none}

  /* Cibles tactiles : rien sous 44 px de haut dans la navigation. */
  .nav a,.nav__liens a,.pied__liens a{min-height:44px;display:inline-flex;align-items:center}
  .nav__logo{min-height:44px;display:inline-flex;align-items:center;width:max-content;
             margin-right:12px}
  .nav__logo img{height:17px}
  .nav__cta,.btn{min-height:46px}

  /* Retour tactile : sans survol, l'appui doit se voir. */
  a,button,.btn,.pill,[role="button"]{-webkit-tap-highlight-color:transparent}
  a:active,button:active,.btn:active,.pill:active{transform:scale(.97)}

  /* Encoches et barres systeme. */
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .nav{padding-top:max(10px,env(safe-area-inset-top))}
  .pv__lg{width:26cqi !important}
  /* Les trois moments : libelle court, pas de retour a la ligne. */
  .pv__mom div{padding:1.5cqi 2.4cqi;gap:1.6cqi}
  .pv__mom b{font-size:3.2cqi;min-width:12cqi}
  .pv__mom span{font-size:3cqi}
  .pv--life .pv__prix small{font-size:2.8cqi}
}

/* ==========================================================================
   Mobile : l'argumentaire ne disparait plus.
   Sur les trois scenes (Boost, Management, supports imprimes), les titres
   d'etape passent en rangee et leur phrase explicative etait masquee : le
   visiteur au telephone perdait l'argument de vente. On la sort du flux et
   on affiche celle de l'etape ACTIVE, pleine largeur, sous la rangee.
   ========================================================================== */
@media(max-width:900px){
  .b2__legende{margin:0 0 14px;color:var(--gris);font-size:14.5px;line-height:1.5;
    min-height:44px}
  .b2__mot p{display:none}

  /* Supports imprimes : les six etapes s'affichent en rangee et leurs six
     paragraphes se superposeraient. Ici le titre porte deja le sens
     (« En story, des le matin », « Sur le flyer, en main ») : on grossit le
     titre au lieu d'ajouter une legende qui ne tiendrait pas.  */
  .uvp__t h3{font-size:15px;line-height:1.15}
  .uvp__t.actif h3{color:var(--creme)}

  /* Le sous-titre de la revue tient en deux lignes : il n'y a pas de raison
     de le cacher, c'est lui qui annonce les huit angles. */
  .revue .mois__sous{display:block;font-size:14px;line-height:1.45;margin-top:6px}
}
@media(max-width:1020px){
  /* Les quatre notes s'affichent ENSEMBLE : pas de legende unique possible.
     Mais les passer en colonne les faisait tenir 469 px au lieu de 171, ce qui
     poussait le telephone de la demonstration hors de l'ecran : on garde donc
     deux colonnes, et on resserre le texte pour que les phrases tiennent. */
  .m3n{flex-direction:row;flex-wrap:wrap;gap:10px 16px}
  .m3n__titre{width:100%}
  .m3n__note{flex:1 1 42%;min-width:0}
  .m3n__note b{font-size:14px;line-height:1.2}
  .m3n__note p{display:block;max-width:none;font-size:12.5px;line-height:1.4;margin-top:3px}
}

/* La conclusion de la scene des publications, au telephone.
   La banniere « Votre mois est pret » est centree sur la scene : en desktop la
   pile est decalee a droite, elle ne genait pas. Au telephone la carte occupe
   le centre, les deux se superposaient et devenaient illisibles. La pile
   s'efface donc quand la conclusion arrive. */
@media(max-width:900px){
  .revue:has(.mois__banniere.la) .revue__pile{opacity:0;transition:opacity .45s ease}
  .mois__banniere{width:84vw}
  /* Le sous-titre reactive poussait le compteur sous la carte : le compteur
     remonte a droite du titre, la ou il y a de la place. */
  .revue__gauche{top:13svh;padding-right:82px}
  .revue__cpt{position:absolute;right:0;top:22px;margin-top:0;flex-direction:column;
              align-items:flex-end;gap:0}
  .revue__cpt b{font-size:30px;line-height:1}
  .revue__cpt i{font-size:13px}
  .revue .mois__sous{font-size:13.5px}
}

/* La pastille du nom de l'agent est centree sur son socle et ne peut pas
   revenir a la ligne : au telephone elle depassait du cadre par la gauche. */
@media(max-width:1020px){
  .agent3d__nom{font-size:10.5px;padding:5px 10px;letter-spacing:.06em;
                max-width:88vw;white-space:normal;text-align:center;line-height:1.3}
}

/* Deux formats intermediaires que la mise en page telephone ne couvrait pas.
   Tablette en portrait : la carte fait 86vw, soit 660 px de haut de plus qu'un
   telephone, et remontait sur le titre de la scene. Petit telephone : la
   legende de demonstration depassait du cadre. */
@media(min-width:600px) and (max-width:900px){
  .revue__v{width:56vw;top:60%}
  .revue__gauche{top:9svh}
}
@media(max-width:400px){
  .scene__caption{font-size:9.5px;letter-spacing:.1em;left:4vw;right:4vw;
                  transform:none;white-space:normal;line-height:1.4;text-align:left}
}

/* Scene Management sur un ecran COURT. Sous 1020 px la scene passe en une
   seule colonne : le titre, les quatre notes et le telephone s'empilent. Sur
   une fenetre de moins de 860 px de haut, le telephone sortait du cadre et la
   conversation, qui est la demonstration elle-meme, restait invisible quel que
   soit le scroll. On rend au telephone la hauteur reellement disponible. */
@media(max-width:1020px) and (max-height:880px){
  .tel3{height:min(52svh,430px)}
  .mgmt__scene{min-height:0;padding:16px 20px}
}

/* ==================== Le formulaire de qualification (section rendez-vous) ====================
   Retour Tom 08/09 : le bouton ouvrait la messagerie, on ne savait rien du visiteur. Il
   qualifie maintenant en quatre champs et trois cases. Envoi par Netlify Forms, aucun
   serveur a maintenir. Coordonnees affichees en dessous pour qui prefere appeler. */
.fq{margin:8px auto 0;max-width:560px;text-align:left}
.fq__piege{position:absolute;left:-9999px}
.fq__grille{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.fq__grille{grid-template-columns:1fr}}
.fq__champ{margin:14px 0 0;display:flex;flex-direction:column;gap:7px}
.fq__grille .fq__champ{margin:0}
.fq label{font-family:var(--titres);font-weight:700;font-size:13.5px;color:var(--creme);
          display:flex;align-items:center;gap:8px}
.fq__ob{font-family:var(--corps);font-weight:600;font-size:10.5px;letter-spacing:.06em;
        text-transform:uppercase;color:var(--corail);opacity:.9}
.fq input[type=text],.fq input[type=email],.fq input[type=tel],.fq select,.fq textarea{
  font:inherit;font-size:15px;color:var(--creme);background:rgba(10,22,40,.55);
  border:1.5px solid rgba(245,240,232,.18);border-radius:12px;padding:13px 15px;
  min-height:48px;width:100%;transition:border-color .25s,background .25s}
.fq textarea{min-height:92px;resize:vertical;line-height:1.55}
.fq input::placeholder,.fq textarea::placeholder{color:rgba(139,154,174,.75)}
.fq input:focus,.fq select:focus,.fq textarea:focus{outline:none;border-color:var(--corail);
  background:rgba(10,22,40,.8)}
.fq select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.fq select option{background:var(--nuit2);color:var(--creme)}
.fq__bloc{border:0;padding:0;margin:22px 0 0}
.fq__bloc legend{font-family:var(--titres);font-weight:700;font-size:13.5px;color:var(--creme);padding:0}
.fq__aide{display:block;font-size:12.5px;color:var(--gris);margin:5px 0 11px}
.fq__cases{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px){.fq__cases{grid-template-columns:1fr}}
.fq__case{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
          background:rgba(10,22,40,.55);border:1.5px solid rgba(245,240,232,.18);
          border-radius:12px;padding:13px 15px;min-height:48px;transition:border-color .25s,background .25s}
.fq__case:hover{border-color:rgba(245,240,232,.42)}
.fq__case input{appearance:none;flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;
                border:1.5px solid rgba(245,240,232,.4);background:transparent;cursor:pointer;
                transition:background .2s,border-color .2s;position:relative}
.fq__case input:checked{background:var(--corail);border-color:var(--corail)}
.fq__case input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--nuit);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.fq__case:has(input:checked){border-color:var(--corail);background:rgba(255,107,74,.1)}
.fq__case span{font-family:var(--titres);font-weight:700;font-size:14px;color:var(--creme);line-height:1.25}
.fq__case i{display:block;font-style:normal;font-family:var(--corps);font-weight:400;
            font-size:12.5px;color:var(--gris);margin-top:3px}
.fq__envoi{margin-top:24px;width:100%;justify-content:center;border:0;cursor:pointer;font:inherit;
           font-family:var(--titres);font-weight:800}
.fq__mentions{margin:14px 0 0;font-size:12px;color:var(--gris);line-height:1.55;text-align:center}
.fq__mentions a{color:var(--gris);text-decoration:underline}
.fq__mentions a:hover{color:var(--creme)}
.fq__direct{margin:26px auto 0;display:flex;align-items:center;justify-content:center;
            gap:10px 18px;flex-wrap:wrap}
.fq__direct-t{font-family:var(--titres);font-weight:600;font-size:11.5px;letter-spacing:.16em;
              text-transform:uppercase;color:var(--gris)}
.fq__direct a{color:var(--creme);font-family:var(--titres);font-weight:700;font-size:15.5px;
              text-decoration:none;border-bottom:1.5px solid var(--corail);padding-bottom:2px;
              min-height:44px;display:inline-flex;align-items:center}
.fq__direct a:hover{color:var(--corail)}

/* Un mois avec Aloa, téléphone et tablette : la carte prend la place qui reste SOUS le texte.
   Taillée sur la largeur (86vw) et centrée à 57 % de la hauteur, elle remontait sur le titre
   dès que l'écran était large pour sa hauteur (constat Tom 29/09, 474x900 et 900x800).
   Désormais la pile occupe le reste de la colonne et la carte se règle sur sa hauteur. */
@media(max-width:900px){
  .revue{display:flex;flex-direction:column;height:100svh}
  .revue__gauche{position:relative;top:auto;left:auto;right:auto;margin:13svh 5vw 0;flex:none}
  .revue__pile{flex:1 1 auto;align-self:stretch;width:100%;height:auto;min-height:0;container-type:size;margin-bottom:max(3svh,16px)}
  .revue__v{top:50%;width:auto;aspect-ratio:4/5;height:min(calc(100cqh - 28px),calc(90cqw * 1.25))}
}

/* ==================== Les personnages : la loupe sur Manon, les clips de Moea ====================
   On ne décrit pas le réalisme, on le fait vérifier. La lentille grossit trois fois
   le portrait haute définition, chargé seulement à l'approche de la section. */
.perso__grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center}
.perso__loupe{position:relative;margin:0;border-radius:18px;overflow:hidden;cursor:none;
              width:100%;max-width:calc(78svh * .75);justify-self:center;
              box-shadow:0 30px 70px rgba(3,7,16,.55);touch-action:pan-y;user-select:none}
/* Un voile sous la légende : sur le débardeur blanc, elle ne se lisait plus */
.perso__loupe::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;pointer-events:none;
                     background:linear-gradient(to top,rgba(6,12,24,.72),rgba(6,12,24,0))}
.perso__leg{z-index:2}
.perso__lentille{z-index:3}
.perso__loupe img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.perso__lentille{position:absolute;left:0;top:0;width:clamp(120px,15vw,190px);aspect-ratio:1;border-radius:50%;
                 transform:translate(-50%,-50%);pointer-events:none;opacity:0;
                 background-color:var(--nuit2);background-repeat:no-repeat;
                 border:2px solid rgba(245,240,232,.85);
                 box-shadow:0 18px 40px rgba(3,7,16,.55),inset 0 0 0 1px rgba(10,22,40,.35);
                 transition:opacity .25s ease}
.perso__loupe.active .perso__lentille{opacity:1}
.perso__leg{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
            font-size:13px;color:var(--creme);text-shadow:0 1px 12px rgba(0,0,0,.6);pointer-events:none}
.perso__leg b{font-family:var(--titres);font-weight:800;font-size:16px}
.perso__aide--doigt{display:none}
@media(pointer:coarse){.perso__aide--souris{display:none}.perso__aide--doigt{display:inline}.perso__loupe{cursor:auto}}
.perso__titre{display:block;margin:0 0 14px}
.perso__prises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.perso__prise{margin:0;position:relative;border-radius:10px;overflow:hidden;background:var(--nuit2);
              box-shadow:0 16px 40px rgba(3,7,16,.45)}
.perso__prise img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.perso__prise figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 7px;
                         font-size:12px;font-weight:600;color:var(--creme);letter-spacing:.02em;
                         background:linear-gradient(to top,rgba(6,12,24,.8),rgba(6,12,24,0))}
.perso__mention{display:block;margin-top:28px;color:var(--gris);opacity:.85}
@media(max-width:900px){
  .perso__grille{grid-template-columns:1fr}
  .perso__loupe{max-width:min(520px,100%)}
  .perso__prises{gap:6px}
}

/* Titres éclatés : un mot ne se coupe jamais (voir anim.js, SplitText words,chars) */
.eclate-mot{display:inline-block;white-space:nowrap}

/* Formulaire : les questions de qualification (budget, démarrage) respirent comme les autres blocs */
.fq__champ + .fq__grille{margin-top:22px}