/* ============================================================
   ANIMAL SHADOW · FOR BRANDS + MEDIA KIT
   ============================================================
   Feuille commune aux deux pages B2B. Extraite le 2026-09-26 : la page
   portait 196 Ko de CSS EN LIGNE, soit 45 % de ses 440 Ko, donc rien
   n'etait mis en cache d'une visite a l'autre.

   CE QUI A DISPARU, et qui ne doit pas revenir : glassmorphism,
   backdrop-filter (62 occurrences), glass-card, glowPulse, scanlines,
   orbs flottants, mesh anime, shimmer, border-glow, neon. C'etait un
   habillage SaaS/gaming pose sur une direction artistique qui n'en
   demandait pas, et une brand manager y lit "template", pas "studio".

   CE QUI REMPLACE : du noir profond, de grandes typographies, des filets
   nets, de la photographie reelle, des espaces larges. Un magazine, pas
   un tableau de bord. Les seuls effets conserves sont ceux qui servent
   la lecture : une revelation au defilement et un etat au survol.
   ============================================================ */

.b2b{
  --b-noir:#0a0a0a;
  --b-encre:#0e0e0e;
  --b-papier:#f4f2ed;      /* off-white, pas blanc pur : moins violent sur noir */
  --b-texte:#c9c5bd;
  --b-gris:#8a8780;
  --b-rouge:#ae0000;
  --b-rouge-clair:#e0403a;
  --b-or:#cda85c;
  --b-filet:rgba(244,242,237,.14);
  --b-filet-fort:rgba(244,242,237,.28);
  --ff-t:'Benzin','Oswald',sans-serif;
  --ff-e:'Oswald',sans-serif;
  --ff-c:'Montserrat',system-ui,sans-serif;
  background:var(--b-noir);
  color:var(--b-texte);
  font-family:var(--ff-c);
  -webkit-font-smoothing:antialiased;
}

/* ---- neutralisation des regles d'element du bundle -------------------
   Depuis le 2026-09-27 cette page charge aussi css/styles.bundle.css, pour
   qu'elle cesse d'etre la seule page publique hors du système du site. Le
   bundle apporte deux regles d'ELEMENT qui traversent .b2b, parce que cette
   feuille ne les déclare pas : p{margin-bottom:1.2em} et
   h1..h6{letter-spacing:.02em}. Mesure au rendu le 2026-09-27 : quatre
   familles de paragraphes gagnaient 17 a 19 px de marge basse, et les h2/h3
   gagnaient 0,3 a 0,8 px d'interlettrage. Le rythme vertical de cette page
   n'est pas celui du site, c'est un parti pris de mise en page magazine.

   POURQUOI :where() ET PAS .b2b p. Une regle .b2b p pese 0,1,1, donc elle
   ecraserait aussi les classes de cette feuille qui posent VOLONTAIREMENT une
   marge (.b2b__lead et les autres pesent 0,1,0), et on remplacerait un ecart
   par un plus grave. :where() ne compte pas : .b2b :where(p) pese 0,1,0, donc
   il bat la regle d'element du bundle (0,0,1) et perd contre toute classe
   posee plus bas dans ce fichier. C'est exactement le comportement voulu.

   Sans le bundle, cas de forbrands-work, ces deux lignes ne changent rien :
   les valeurs y sont déjà celles-là. --------------------------------------- */
.b2b :where(p){margin-bottom:0}
.b2b :where(h2,h3){letter-spacing:normal}

/* ---- grille et rythme ------------------------------------------------ */
.b2b__wrap{width:min(1180px,100% - 2.4rem);margin-inline:auto}
.b2b section{padding:clamp(3.2rem,7vw,6rem) 0;border-top:1px solid var(--b-filet)}
.b2b section:first-of-type{border-top:0}

/* Le numero de section et son intitule : le marqueur editorial du site,
   garde parce qu'il donne la personnalite magazine sans un seul neon. */
.b2b__num{
  display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.6rem;
  font-family:var(--ff-e);font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--b-gris);
}
.b2b__num b{color:var(--b-rouge-clair);font-weight:600}
.b2b__num::after{content:"";flex:1;height:1px;background:var(--b-filet)}

.b2b h1,.b2b h2,.b2b h3{font-family:var(--ff-t);font-weight:700;
  text-transform:uppercase;color:var(--b-papier);line-height:1.02;text-wrap:balance}
.b2b h1{font-size:clamp(2rem,6.2vw,4.4rem);letter-spacing:-.01em}
.b2b h2{font-size:clamp(1.5rem,3.6vw,2.6rem);margin-bottom:1rem}
.b2b h3{font-size:clamp(1.05rem,1.9vw,1.35rem)}
.b2b p{font-size:clamp(.94rem,1.1vw,1.02rem);line-height:1.68;max-width:66ch}
.b2b__lead{font-size:clamp(1rem,1.5vw,1.18rem);color:#ddd9d1;max-width:58ch}

/* ---- boutons --------------------------------------------------------- */
.b2b__cta,.b2b__cta2{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff-e);font-weight:600;font-size:.82rem;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  padding:1rem 1.7rem;border-radius:2px;min-height:48px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.b2b__cta{background:var(--b-rouge);color:#fff;border:1px solid var(--b-rouge)}
.b2b__cta:hover{background:#c50000;border-color:#c50000}
.b2b__cta2{background:transparent;color:var(--b-papier);border:1px solid var(--b-filet-fort)}
.b2b__cta2:hover{border-color:var(--b-papier)}
.b2b__cta:focus-visible,.b2b__cta2:focus-visible{outline:2px solid var(--b-or);outline-offset:3px}
.b2b__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ---- 01 hero --------------------------------------------------------- */
/* section.b2b-hero et non .b2b-hero : .b2b section pese 0,1,1 et ecrasait donc
   ce padding-top, qui pese 0,1,0. Consequence mesuree le 2026-09-27 sur
   téléphone : padding-top calcule a 51,2 px pour un en-tete fixe de 73 px, donc
   le surtitre passait SOUS l'en-tete au chargement. Le défaut existait aussi à
   768 px, et pas au-dela de 1100 px, ce qui explique qu'il soit passe inapercu.
   Rien a voir avec le bundle : mesure identique avec et sans lui.

   Le clamp d'origine est remplace par une valeur fixe de 1,5 rem, choisie pour
   que le rendu DESKTOP ne bouge pas d'un pixel : il valait 96 px avant (6 rem,
   la borne haute du clamp de .b2b section), il vaut 72 + 24 = 96 px après. Seuls
   le téléphone et la tablette changent, et c'est precisement ce qu'on repare. */
.b2b section.b2b-hero{position:relative;overflow:hidden;
  padding-top:calc(var(--as-nav-h,72px) + 1.5rem);
  padding-bottom:clamp(2.6rem,6vw,4.6rem)}
.b2b-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:end}
@media(max-width:900px){.b2b-hero__grid{grid-template-columns:1fr}}
.b2b-hero__kicker{font-family:var(--ff-e);font-size:.7rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--b-or);margin-bottom:1.3rem}
.b2b-hero__sub{margin-top:1.4rem}
.b2b-hero__sectors{margin-top:1.5rem;font-family:var(--ff-e);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--b-gris)}
.b2b-hero__ph{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--b-filet)}
.b2b-hero__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:grayscale(.32) contrast(1.06) brightness(.82)}
/* Le masthead : la seule fioriture, et elle est typographique. */
.b2b-hero__mast{position:absolute;left:0;bottom:0;right:0;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:.7rem .9rem;background:linear-gradient(180deg,transparent,rgba(10,10,10,.92));
  font-family:var(--ff-e);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--b-gris)}

/* ---- 02 bandeau de preuves ------------------------------------------- */
.b2b-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b-filet)}
@media(max-width:820px){.b2b-proof{grid-template-columns:repeat(2,1fr)}}
.b2b-proof__c{background:var(--b-noir);padding:clamp(1.1rem,2.4vw,1.7rem)}
.b2b-proof__v{font-family:var(--ff-t);font-size:clamp(1.5rem,3.4vw,2.3rem);
  font-weight:700;color:var(--b-papier);line-height:1}
.b2b-proof__l{margin-top:.5rem;font-family:var(--ff-e);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--b-gris)}

/* ---- 03 marques ------------------------------------------------------ */
.b2b-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--b-filet)}
.b2b-brands__c{background:var(--b-noir);padding:1.3rem .9rem;text-align:center;
  font-family:var(--ff-t);font-weight:700;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;color:#9d9990;transition:color .2s ease}
.b2b-brands__c:hover{color:var(--b-papier)}

/* ---- 04 objectifs ---------------------------------------------------- */
.b2b-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2vw,1.3rem)}
@media(max-width:900px){.b2b-goals{grid-template-columns:1fr}}
.b2b-goal{border:1px solid var(--b-filet);padding:clamp(1.4rem,2.6vw,2rem);
  display:flex;flex-direction:column;transition:border-color .2s ease}
.b2b-goal:hover{border-color:var(--b-filet-fort)}
.b2b-goal__n{font-family:var(--ff-e);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--b-rouge-clair);margin-bottom:.9rem}
.b2b-goal h3{margin-bottom:.7rem}
.b2b-goal p{font-size:.9rem;flex:1}
.b2b-goal ul{list-style:none;margin:1.1rem 0 0;padding:0;
  font-family:var(--ff-e);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--b-gris);line-height:2}

/* ---- 05 campagnes ---------------------------------------------------- */
.b2b-cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.6rem)}
@media(max-width:820px){.b2b-cases{grid-template-columns:1fr}}
.b2b-case{border:1px solid var(--b-filet);text-decoration:none;display:block;
  transition:border-color .2s ease}
.b2b-case:hover{border-color:var(--b-filet-fort)}
.b2b-case__ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}
.b2b-case__ph img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.2) brightness(.86);transition:filter .4s ease,transform .8s cubic-bezier(.16,.84,.44,1)}
.b2b-case:hover .b2b-case__ph img{filter:grayscale(0) brightness(1);transform:scale(1.03)}
.b2b-case__body{padding:clamp(1.1rem,2.2vw,1.5rem)}
.b2b-case__brand{font-family:var(--ff-t);font-weight:700;font-size:1.15rem;
  text-transform:uppercase;color:var(--b-papier)}
.b2b-case__prod{margin-top:.35rem;font-size:.86rem;color:var(--b-gris);max-width:none}
.b2b-case__foot{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--b-filet);
  font-family:var(--ff-e);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.b2b-case__views{color:var(--b-or)}
.b2b-case__go{color:var(--b-papier)}

/* ---- listes de faits (droits, capacites, brand safety) --------------- */
.b2b-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.4rem)}
@media(max-width:820px){.b2b-cols{grid-template-columns:1fr}}
.b2b-col h3{font-size:.8rem;font-family:var(--ff-e);letter-spacing:.18em;
  color:var(--b-or);margin-bottom:.9rem}
.b2b-list{list-style:none;margin:0;padding:0}
.b2b-list li{padding:.5rem 0 .5rem 1.1rem;position:relative;
  border-bottom:1px solid var(--b-filet);font-size:.9rem}
.b2b-list li::before{content:"";position:absolute;left:0;top:1.05em;
  width:5px;height:1px;background:var(--b-rouge-clair)}

/* ---- temoignages ----------------------------------------------------- */
.b2b-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem)}
@media(max-width:900px){.b2b-quotes{grid-template-columns:1fr}}
.b2b-quote{border-left:2px solid var(--b-rouge);padding:.3rem 0 .3rem 1.2rem}
.b2b-quote p{font-size:1rem;color:#ddd9d1;font-style:normal}
.b2b-quote cite{display:block;margin-top:.8rem;font-family:var(--ff-e);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--b-gris);font-style:normal}
/* Les signaux de confiance ne sont PAS des temoignages : ils se lisent
   comme des faits, pas comme des citations mises en scene. */
.b2b-signals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--b-filet);margin-top:clamp(1.6rem,3vw,2.4rem)}
@media(max-width:900px){.b2b-signals{grid-template-columns:1fr}}
.b2b-signal{background:var(--b-noir);padding:1.2rem}
.b2b-signal b{display:block;font-family:var(--ff-t);font-size:.9rem;
  text-transform:uppercase;color:var(--b-papier);margin-bottom:.4rem}
.b2b-signal span{font-size:.86rem;color:var(--b-gris)}

/* ---- process --------------------------------------------------------- */
.b2b-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b-filet)}
@media(max-width:820px){.b2b-steps{grid-template-columns:repeat(2,1fr)}}
.b2b-step{background:var(--b-noir);padding:1.3rem 1.1rem}
.b2b-step b{display:block;font-family:var(--ff-t);font-size:1.6rem;
  color:var(--b-rouge-clair);line-height:1;margin-bottom:.7rem}
.b2b-step h3{font-size:.95rem;margin-bottom:.4rem}
.b2b-step p{font-size:.85rem}

/* ---- FAQ ------------------------------------------------------------- */
.b2b-faq details{border-bottom:1px solid var(--b-filet)}
.b2b-faq summary{cursor:pointer;padding:1.1rem 0;list-style:none;
  font-family:var(--ff-t);font-weight:700;font-size:1rem;text-transform:uppercase;
  color:var(--b-papier);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.b2b-faq summary::-webkit-details-marker{display:none}
.b2b-faq summary::after{content:"+";color:var(--b-rouge-clair);font-family:var(--ff-e);flex:0 0 auto}
.b2b-faq details[open] summary::after{content:"\2013"}
.b2b-faq summary:focus-visible{outline:2px solid var(--b-or);outline-offset:3px}
.b2b-faq p{padding:0 0 1.2rem;font-size:.94rem}

/* ---- note de bas de section ------------------------------------------ */
.b2b-note{margin-top:1.4rem;font-size:.78rem;color:var(--b-gris);max-width:70ch}

/* ---- revelation au defilement ---------------------------------------- */
/* Un seul effet, le meme partout : le contenu monte de douze pixels en
   apparaissant. Pas de fade-in-up sur chaque element, qui est justement le
   tell le plus repandu des pages generees. */
/* L'etat masque est conditionne a .js-rv, que le script pose sur <html> des
   qu'il demarre. Sans cette condition, une revelation qui ne se declenche pas
   (script en echec, observateur capricieux, bloc a la limite du seuil) laisse
   du contenu a opacity:0, donc INVISIBLE. Constate en testant : le bloc des
   campagnes restait masque alors qu'il etait a l'ecran.
   Une animation ne doit jamais etre ce qui decide si un texte existe. */
.js-rv .b2b-rv{opacity:0;transform:translateY(12px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.16,.84,.44,1)}
.js-rv .b2b-rv.is-vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-rv .b2b-rv{opacity:1;transform:none;transition:none}
  .b2b-case__ph img,.b2b-hero__ph img{transition:none}
}

/* ---- CTA collant sur telephone --------------------------------------- */
.b2b-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.96);border-top:1px solid var(--b-filet);
  display:none}
.b2b-sticky .b2b__cta{width:100%;justify-content:center}
@media(max-width:820px){.b2b-sticky{display:block}
  .b2b{padding-bottom:5rem}}

/* ---- navigation B2B --------------------------------------------------- */
/* Six entrees, pas vingt. Une brand manager qui evalue une production n'a
   rien a faire dans le coaching ou la boutique. */
.b2bnav{position:fixed;top:0;left:0;right:0;z-index:70;background:rgba(10,10,10,.94);
  border-bottom:1px solid var(--b-filet,rgba(244,242,237,.14))}
.b2bnav__in{width:min(1180px,100% - 2.4rem);margin-inline:auto;
  display:flex;align-items:center;gap:1.4rem;min-height:72px}
.b2bnav__logo{font-family:'Benzin','Oswald',sans-serif;font-weight:800;font-size:1rem;
  letter-spacing:.02em;text-transform:uppercase;color:#f4f2ed;text-decoration:none;white-space:nowrap}
.b2bnav__links{display:flex;gap:1.5rem;margin-left:auto}
.b2bnav__links a{font-family:'Oswald',sans-serif;font-size:.74rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#8a8780;text-decoration:none;
  transition:color .18s ease}
.b2bnav__links a:hover{color:#f4f2ed}
.b2bnav__cta{font-family:'Oswald',sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:#fff;background:#ae0000;
  text-decoration:none;padding:.72rem 1.15rem;border-radius:2px;white-space:nowrap}
.b2bnav__cta:hover{background:#c50000}
.b2bnav a:focus-visible,.b2bnav button:focus-visible{outline:2px solid #cda85c;outline-offset:3px}
.b2bnav__burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;padding:0}
.b2bnav__burger span{display:block;height:2px;background:#f4f2ed;width:22px;margin-inline:auto}
.b2bnav__mob{display:none;flex-direction:column;gap:.2rem;padding:.6rem 1.2rem 1.2rem;
  border-top:1px solid var(--b-filet,rgba(244,242,237,.14))}
.b2bnav__mob a{font-family:'Oswald',sans-serif;font-size:.86rem;letter-spacing:.1em;
  text-transform:uppercase;color:#c9c5bd;text-decoration:none;padding:.7rem 0}
.b2bnav__mob .b2bnav__cta{margin-top:.6rem;text-align:center;color:#fff}
@media(max-width:900px){
  .b2bnav__links,.b2bnav__in>.b2bnav__cta{display:none}
  .b2bnav__burger{display:flex}
  .b2bnav__mob[hidden]{display:none}
  .b2bnav__mob:not([hidden]){display:flex}
}

/* ---- formulaire ------------------------------------------------------ */
.b2b-form{margin-top:2.2rem;max-width:860px}
.b2b-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.b2b-form__step{border:0;border-top:1px solid var(--b-filet);padding:1.6rem 0 0;margin:0 0 1.8rem}
.b2b-form__step legend{font-family:var(--ff-e);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--b-or);padding:0 .8rem 0 0}
.b2b-form__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.2rem}
@media(max-width:700px){.b2b-form__grid{grid-template-columns:1fr}}
.b2b-form label{display:block;font-family:var(--ff-e);font-size:.7rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--b-gris);margin-bottom:.45rem}
.b2b-form input,.b2b-form select,.b2b-form textarea{
  width:100%;background:#0e0e0e;border:1px solid var(--b-filet);color:var(--b-papier);
  font-family:var(--ff-c);font-size:.94rem;padding:.8rem .9rem;border-radius:2px;min-height:48px}
.b2b-form textarea{min-height:130px;resize:vertical}
.b2b-form input:focus,.b2b-form select:focus,.b2b-form textarea:focus{
  outline:2px solid var(--b-or);outline-offset:1px;border-color:transparent}
.b2b-form__full{margin-top:1rem}
.b2b-form__rgpd{font-size:.78rem;color:var(--b-gris);margin:0 0 1.4rem;max-width:66ch}
/* Soulignement explicite : le bundle pose a{text-decoration:none}, et ce lien
   légal n'a aucun autre indice qu'il est cliquable. Mesuré le 2026-09-27 :
   c'était le seul lien de la page a perdre son soulignement en branchant le
   bundle. Les liens du credit footer, eux, l'ont déjà par .b2b-foot__credit a. */
.b2b-form__rgpd a{color:var(--b-or);text-decoration:underline;text-underline-offset:.16em}
.b2b-form__etat{margin-top:1rem;font-size:.9rem;color:var(--b-or);min-height:1.4em}

/* ---- pied de page B2B ------------------------------------------------ */
.b2b-foot{border-top:1px solid var(--b-filet);padding-top:clamp(2.4rem,5vw,3.4rem)}
.b2b-foot__in{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;
  padding-bottom:2rem}
.b2b-foot__brand{font-family:var(--ff-t);font-weight:800;font-size:1rem;
  text-transform:uppercase;color:var(--b-papier)}
.b2b-foot__base{font-size:.85rem;color:var(--b-gris);margin-top:.4rem;max-width:36ch}
.b2b-foot__nav,.b2b-foot__soc{display:flex;flex-direction:column;gap:.5rem}
.b2b-foot__nav a,.b2b-foot__soc a{font-family:var(--ff-e);font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--b-gris);text-decoration:none}
.b2b-foot__nav a:hover,.b2b-foot__soc a:hover{color:var(--b-papier)}
.b2b-foot__credit{border-top:1px solid var(--b-filet);padding:1.2rem 0 2.4rem;
  font-size:.74rem;color:var(--b-gris)}
.b2b-foot__credit a{color:var(--b-gris);text-decoration:underline}
.b2b-foot__credit a:hover{color:var(--b-papier)}
.b2b-foot a:focus-visible{outline:2px solid var(--b-or);outline-offset:3px}

/* ---- audience, reprise du partial partage ---------------------------- */
.b2b .audience__empty{font-size:.95rem;color:var(--b-gris);max-width:62ch}