/* ==========================================================================
   SECOND UNIVERS — thème de l'univers accrochage & masquage, À L'INTÉRIEUR du site
   Votre entreprise. Charge par-dessus ve.css : ne redéfinit PAS les composants,
   il ne fait que reteinter (sombre + accent vert) via `body.univers2`.
   Aucune structure nouvelle : mêmes grilles, mêmes espacements, mêmes cartes.
   ========================================================================== */
body.univers2{
  --blue:#3faf5c;          /* accent (vert industriel maîtrisé) */
  --blue-600:#4cc06b;
  --blue-050:#132019;
  --ink:#eef4ef;           /* texte principal sur fond sombre */
  --ink-2:#a7b7ac;
  --ink-3:#7d8c82;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.2);
  --bg:#080d0a;
  --bg-soft:#0d1510;
  --dark:#05080600;        /* (non utilisé directement, surfaces overridées) */
  background:#080d0a;color:var(--ink);
}
/* sections */
.univers2 .section{background:#080d0a;color:var(--ink);}
.univers2 .section--soft{background:#0d1510;}
.univers2 .section--dark{background:#05090699;}
.univers2 .shead h2,.univers2 h1,.univers2 h2,.univers2 h3,.univers2 h4{color:#f3f8f4;}
.univers2 .shead p,.univers2 .lead{color:var(--ink-2);}
.univers2 .eyebrow,.univers2 .phero__eyebrow{color:#6fdc8e;}
/* ===== HEADER DÉDIÉ À L'UNIVERS SECOND UNIVERS — distinct, toujours visible, identitaire vert.
   Fond vert-sombre translucide permanent (jamais transparent), liseré vert d'accent en
   haut, flou constant : il reste net et lisible sur toute la hauteur de scroll. ===== */
/* Header ADAPTATIF : transparent en haut de page (au-dessus du héros), il gagne son
   fond vert-sombre flouté dès qu'on scrolle. Le logo bascule clair↔foncé selon la
   luminosité de la section derrière lui (piloté par motion.js -> classe .hdr--onlight). */
.univers2 .hdr{background:transparent;border-bottom:1px solid transparent;box-shadow:none;
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;}
/* fine ligne d'accent verte = signature visuelle de l'autre univers (visible une fois posé) */
.univers2 .hdr::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  transition:opacity .35s ease;background:linear-gradient(90deg,transparent,rgba(45,212,138,.75),transparent);}
.univers2 .hdr.hdr--scrolled{background:rgba(6,13,9,.92);border-bottom:1px solid rgba(45,212,138,.20);
  backdrop-filter:saturate(1.35) blur(15px);-webkit-backdrop-filter:saturate(1.35) blur(15px);
  box-shadow:0 8px 30px rgba(0,0,0,.44);}
.univers2 .hdr.hdr--scrolled::before{opacity:1;}
.univers2 .hdr__nav a{color:#eaf4ee;text-shadow:0 1px 10px rgba(0,0,0,.5);}
.univers2 .hdr__nav a:hover,.univers2 .hdr__nav a[aria-current="page"]{color:#7fe3a6;}
.univers2 .hdr__burger,.univers2 .hdr__back{color:#eaf4ee;}

/* --- logo Second univers : deux variantes, une seule visible selon le fond --- */
.univers2 .hdr__logo--hg img{height:38px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));}
.univers2 .hdr__logo--hg .lg-hg-dark{display:none;}
.univers2 .hdr__logo--hg .lg-hg-light{display:block;}

/* --- état « au-dessus d'une section CLAIRE » : logo foncé + textes foncés pour le contraste --- */
.univers2 .hdr--onlight .hdr__logo--hg .lg-hg-light{display:none;}
.univers2 .hdr--onlight .hdr__logo--hg .lg-hg-dark{display:block;}
.univers2 .hdr--onlight .hdr__logo--hg img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.18));}
.univers2 .hdr--onlight .hdr__nav a{color:#123a24;text-shadow:none;}
.univers2 .hdr--onlight .hdr__nav a:hover,.univers2 .hdr--onlight .hdr__nav a[aria-current="page"]{color:#1f8a4c;}
.univers2 .hdr--onlight .hdr__burger,.univers2 .hdr--onlight .hdr__back{color:#123a24;}
.univers2 .hdr__logo .lg-blue{display:none;}
.univers2 .hdr__logo .lg-white{display:block;}
/* buttons */
.univers2 .btn--ghost{border-color:rgba(255,255,255,.24);color:#e6efe8;}
.univers2 .btn--primary,.univers2 .btn--primary:hover{color:#0b140e;}
.univers2 .btn--ghost:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.05);}
/* cards */
.univers2 .card{background:#0e1712;border-color:rgba(255,255,255,.08);}
.univers2 a.card:hover{border-color:rgba(63,175,92,.5);box-shadow:0 20px 46px rgba(0,0,0,.55);}
.univers2 .card h3{color:#f3f8f4;}
.univers2 .card p{color:var(--ink-2);}
.univers2 .card__ico{background:rgba(63,175,92,.15);color:var(--blue);}
.univers2 .mcard__img{background:#0d1510;}

/* Cartes « Vue d'ensemble » avec photo d'ambiance en tête (pleine largeur, recadrée).
   Le picto flotte en badge sur le bas de l'image ; titre + texte en dessous. */
/* Cartes « Vue d'ensemble » : l'image occupe TOUTE la carte, le texte est en
   surimpression en bas sur un voile dégradé. */
.univers2 .card--photo{padding:0;overflow:hidden;position:relative;display:flex;flex-direction:column;
  min-height:clamp(330px,44vh,420px);}
.univers2 .card--photo .card__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0c1a12;}
.univers2 .card--photo .card__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.univers2 .card--photo:hover .card__media img{transform:scale(1.06);}
/* voile dégradé bas : lisibilité du texte sans masquer l'image */
.univers2 .card--photo .card__media::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(to top,rgba(6,12,8,.96) 3%,rgba(6,12,8,.7) 26%,rgba(6,12,8,.18) 50%,transparent 72%);}
/* texte poussé en bas, au-dessus de l'image */
.univers2 .card--photo .card__body{position:relative;z-index:4;margin-top:auto;padding:20px 24px 24px;
  display:flex;flex-direction:column;}
.univers2 .card--photo .card__ico{margin-bottom:12px;position:relative;z-index:4;
  background:#3faf5c;color:#0b140e;box-shadow:0 10px 26px rgba(0,0,0,.5);}
.univers2 .card--photo h3{color:#fff;}
.univers2 .card--photo p{color:rgba(233,244,236,.82);}
.univers2 .card--photo .link-arrow{margin-top:12px;color:#6fdc8e;font-weight:600;}
a.card--photo{text-decoration:none;color:inherit;cursor:pointer;}
/* brand chips + criteria */
.univers2 .brand{background:#0e1712;border-color:rgba(255,255,255,.1);color:#dbe7dd;}
.univers2 .brand:hover{border-color:rgba(63,175,92,.55);color:#8be6a3;}
.univers2 .criteria{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.09);}
.univers2 .criteria > div{background:#0e1712;}
.univers2 .criteria h3,.univers2 .criteria h4{color:#f3f8f4;} .univers2 .criteria p{color:var(--ink-2);}
/* page hero */
.univers2 .phero{background:#060a07;}
.univers2 .phero__glow{background:radial-gradient(90% 75% at 12% 0%, rgba(63,175,92,.28), transparent 60%);}
.univers2 .phero p{color:var(--ink-2);}
.univers2 .phero__media{background:#0b120d;}
.univers2 .phero__crumb .crumb a,.univers2 .phero__crumb .crumb span[aria-current]{color:rgba(230,239,232,.72);}
.univers2 .phero__crumb .crumb span[aria-current]{color:#fff;}
/* CTA band */
.univers2 .ctaband{background:#060a07;}
.univers2 .ctaband__glow{background:radial-gradient(80% 75% at 50% 0%, rgba(63,175,92,.32), transparent 62%);}
.univers2 .ctaband p{color:var(--ink-2);}
/* FAQ */
.univers2 .faq,.univers2 .faq__item{border-color:rgba(255,255,255,.1);}
.univers2 .faq__q{color:#f3f8f4;} .univers2 .faq__a p{color:var(--ink-2);}
/* footer accent (already dark) */
.univers2 .foot__col h4{color:#6fdc8e;}

/* ---- local sub-navigation ---- */
.hnav{position:sticky;top:57px;z-index:90;background:rgba(6,10,7,.9);
  backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid rgba(255,255,255,.08);}
.hnav__in{max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,40px);
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.hnav__in::-webkit-scrollbar{display:none;}
.hnav a{flex:0 0 auto;padding:13px 14px;color:#c3d2c7;text-decoration:none;font-size:13px;
  font-weight:500;letter-spacing:.02em;white-space:nowrap;border-bottom:2px solid transparent;
  transition:color var(--motion-fast),border-color var(--motion-fast);}
.hnav a:hover{color:#eef4ef;}
.hnav a[aria-current="page"]{color:#6fdc8e;border-bottom-color:#3faf5c;}

/* ---- hero (mother page) — large, cinematic, typographic ---- */
/* Héros plein écran : l'image couvre tout, le texte est posé dessus à gauche. */
.hhero{position:relative;overflow:hidden;background:#050806;color:#eef4ef;
  min-height:clamp(560px,90vh,940px);display:flex;align-items:center;}
.hhero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% center;z-index:0;display:block;}
/* dégradé de lisibilité : sombre à gauche (sous le texte) -> transparent à droite (on voit l'image) */
.hhero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,8,6,.94) 0%,rgba(5,8,6,.82) 26%,rgba(5,8,6,.5) 50%,rgba(5,8,6,.2) 74%,rgba(5,8,6,.06) 100%),
             linear-gradient(0deg,rgba(5,8,6,.5) 0%,transparent 32%);}
.hhero__glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(55% 80% at 88% 16%, rgba(63,175,92,.20), transparent 55%);}
.hhero__in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;width:100%;
  padding:clamp(80px,15vh,170px) clamp(20px,5vw,40px);}
.hhero__content{max-width:600px;}
.hhero__eyebrow{color:#6fdc8e;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;}
.hhero h1{font-family:var(--font-display);font-style:italic;color:#fff;margin:16px 0 20px;
  font-size:clamp(2.6rem,6vw,5rem);line-height:1;text-shadow:0 2px 40px rgba(0,0,0,.5);}
.hhero h1 .g{color:#4cc06b;font-style:italic;}
.hhero p{color:#cfdcd3;font-size:clamp(15px,1.5vw,18.5px);max-width:44ch;text-shadow:0 1px 18px rgba(0,0,0,.6);}
.hhero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
@media (max-width:860px){
  .hhero{min-height:82vh;}
  .hhero__bg{object-position:62% center;}
  .hhero__scrim{background:linear-gradient(90deg,rgba(5,8,6,.9) 0%,rgba(5,8,6,.7) 55%,rgba(5,8,6,.35) 100%),
                linear-gradient(0deg,rgba(5,8,6,.75) 0%,rgba(5,8,6,.15) 45%,transparent 70%);}
}

/* "3 univers" pillar cards with media */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);}
@media (max-width:820px){ .pillars{grid-template-columns:1fr;} }
.pillar{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;
  background:#0e1712;border:1px solid rgba(255,255,255,.08);text-decoration:none;color:inherit;
  transition:border-color var(--motion-base),transform var(--motion-base) var(--ease-premium),box-shadow var(--motion-base);}
.pillar:hover{border-color:rgba(63,175,92,.5);transform:translateY(-4px);box-shadow:0 24px 54px rgba(0,0,0,.55);}
/* Une seule image source (triptyque) — chaque carte n'affiche que son tiers via background-position.
   background-size:316% => largeur image = 3,16x la carte : chaque scène remplit la carte sans déformation,
   et les séparateurs du triptyque tombent hors cadre. */
.pillar__img{aspect-ratio:4/3;position:relative;overflow:hidden;background-color:#0a120d;
  background-image:url(../img/univers2-triptych.webp);background-repeat:no-repeat;
  background-size:316% auto;background-position:var(--crop,50%) calc(44% + var(--py,0%));
  transition:transform .7s var(--ease-premium),filter .7s var(--ease-premium);will-change:transform,background-position;}
/* Desktop : SCÈNE COMPLÈTE — le cadre épouse le ratio d'une scène du triptyque et
   bg-size:300% fait tenir la scène entière dans la carte : on voit tout l'objet et son
   contexte (crochet suspendu à sa barre), sans zoom ni rognage. Cartes centrées =>
   la section entière tient dans un écran. */
@media (min-width:821px){
  .pillars{grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;gap:clamp(20px,2.6vw,34px);}
  .pillar__img{aspect-ratio:500/760;max-height:52vh;background-size:300% auto;
    background-position:var(--crop,50%) center;}
  .pillar__body{padding:18px 20px 20px;}
  .pillar__body p{font-size:13px;}
}
/* balayages échelonnés : les trois scènes se révèlent l'une après l'autre */
.pillar:nth-child(2) .pillar__img.reveal-clip{transition-delay:.14s;}
.pillar:nth-child(3) .pillar__img.reveal-clip{transition-delay:.28s;}
.pillar--hook    .pillar__img{--crop:0%;}
.pillar--suspend .pillar__img{--crop:50%;}
.pillar--mask    .pillar__img{--crop:100%;}
/* fusion photo -> corps de carte (dégradé sombre) */
.pillar__img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,13,10,0) 42%,rgba(8,13,10,.5) 80%,#0e1712 100%);}
/* hover premium : zoom très léger + luminosité + vert un peu plus présent */
.pillar:hover .pillar__img{transform:scale(1.04);filter:brightness(1.08) saturate(1.06);}
/* carte active (Suspension) : un peu plus présente */
.pillar--active{border-color:rgba(63,175,92,.42);box-shadow:0 18px 46px rgba(0,0,0,.5);}
.pillar--active .pillar__img{filter:brightness(1.05) contrast(1.05);}
.pillar--active .pillar__img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(63,175,92,.28),inset 0 -40px 60px rgba(63,175,92,.06);}
@media (prefers-reduced-motion:reduce){ .pillar:hover .pillar__img{transform:none;} }
.pillar__body{padding:24px 24px 26px;}
.pillar__body .k{color:#6fdc8e;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.pillar__body h3{margin:10px 0 8px;color:#f3f8f4;font-size:1.3rem;}
.pillar__body p{color:var(--ink-2);font-size:14px;}
.pillar__body .link-arrow{margin-top:16px;}

/* process steps */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);overflow:hidden;}
@media (max-width:820px){ .steps{grid-template-columns:1fr;} }
.step{background:#0b120d;padding:28px 26px;}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-display);font-style:italic;
  color:#3faf5c;font-size:1.8rem;display:block;margin-bottom:10px;}
.step h3,.step h4{color:#f3f8f4;font-size:1.05rem;margin-bottom:6px;}
.step p{color:var(--ink-2);font-size:13.5px;}

/* ===== Fond animé « vivant » — univers uniquement ===== */
#animbg{position:fixed;inset:0;z-index:0;pointer-events:none;}
body.univers2{background:#04120c;}
/* le contenu passe au-dessus de la toile.
   IMPORTANT : on NE touche PAS au header ni à la sous-nav — ils doivent rester
   STICKY (constamment visibles) avec leur z-index élevé (100 / 90), au-dessus du héros.
   Les mettre en position:relative les décrochait (ils défilaient et le héros les recouvrait). */
body.univers2 main,body.univers2 .foot{position:relative;z-index:1;}
/* header + sous-nav Second univers : toujours collés en haut, au-dessus de tout le contenu */
body.univers2 .hdr{position:sticky;top:0;z-index:120;}
body.univers2 .hnav{position:sticky;z-index:110;}
/* sections légèrement translucides -> le fond vert respire derrière, texte toujours lisible */
body.univers2 .section{background:rgba(8,13,10,.44);}
body.univers2 .section--soft{background:rgba(11,17,13,.4);}
@media (prefers-reduced-motion:reduce){ #animbg{display:none;} }

/* Bouton de bascule d'univers dans le header — clair, invitant, distinct */
.univers2 .hdr__universe--back{color:#eaf7f0;border:1px solid rgba(120,160,255,.55);
  background:rgba(31,95,214,.14);}
.univers2 .hdr__universe--back:hover{background:rgba(31,95,214,.28);border-color:#6f9bff;}
.univers2 .hdr__universe--back svg{color:#9bc0ff;}
/* la barre de sous-navigation suit le nouveau header (accent vert cohérent) */
.univers2 .hnav{background:rgba(6,13,9,.9);border-bottom-color:rgba(45,212,138,.14);}

/* ---- Navigation cliquable Second univers : sous-familles & filtres à deux niveaux ---- */
/* Cartes « sous-familles » entièrement cliquables (toute la carte est un lien). */
.card--link{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.card--link:hover{transform:translateY(-3px);}
.card--link .link-arrow{margin-top:auto;}
.card__count{color:var(--ink-3);font-size:13px;margin-top:6px;font-weight:500;}
.univers2 .card--link .card__count{color:#7aa892;}

/* Sous-familles : 2ᵉ niveau de filtres, révélé quand une famille est active. */
.univers2 .cfilter--sub{font-size:12px;padding:6px 12px;border-style:dashed;
  border-color:rgba(45,212,138,.42);color:#6f9c85;background:rgba(45,212,138,.06);}
.univers2 .cfilter--sub span{color:#7aa892;}
.univers2 .cfilter--sub:hover{border-style:solid;border-color:#2dd48a;color:#189b63;}
.univers2 .cfilter--sub.on{background:#189b63;color:#0b140e;border-style:solid;border-color:#189b63;}
.univers2 .cbadge--univers2{color:#6fdc8e;}
.univers2 .cfilter--all.on span,.univers2 .cfilter--sub.on span{color:#0b140e;}
.univers2 .cfilter--sub.on span{color:rgba(255,255,255,.82);}

/* ---- Vraies photos produit (fabricant) — panneaux « studio » premium ----
   Les photos ont un fond blanc + bandeaux de marque (verts OU violets selon les gammes).
   On les pose sur un panneau blanc dégradé, coins arrondis, ombre douce + liseré, et on
   dissout les bandeaux de marque (haut/bas) par un fondu blanc : rendu uniforme et haut de
   gamme, produit centré comme sur une fiche studio. Un seul style partagé : .hgo-photo. */
.hgo-photo{position:relative;overflow:hidden;border-radius:16px;background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 20px 48px rgba(0,0,0,.42);}
.hgo-photo img{width:100%;height:100%;object-fit:contain;padding:clamp(14px,2.8vw,30px);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);}
/* survol : léger zoom produit (effet premium « inspection ») */
.hgo-photo:hover img,.card--link:hover .hgo-photo img,.pillar:hover .hgo-photo img{transform:scale(1.05);}

/* Héros de page famille : grand panneau produit carré.
   PLEIN CADRE : l'image couvre TOUTE la carte (object-fit:cover, sans marge) — le produit
   remplit le panneau, support du reflet holographique animé. Les miniatures de sous-familles
   et les piliers gardent, eux, le rendu « studio » centré (contain). */
.univers2 .phero__media--photo{aspect-ratio:1/1;}
.univers2 .phero__media--photo.hgo-photo img{object-fit:cover;padding:0;}
@media (max-width:820px){ .univers2 .phero__media--photo{aspect-ratio:4/3;} }

/* Miniature réelle en tête des cartes sous-familles */
.card__thumb{aspect-ratio:4/3;margin-bottom:14px;}

/* Piliers de la home Second univers : mêmes panneaux studio carrés que le héros. On neutralise le
   fond triptyque générique et l'overlay de base ; le panneau blanc de .hgo-photo prend le relais. */
.univers2 .pillar--photo .pillar__img{aspect-ratio:1/1;}
.univers2 .pillar--photo .pillar__img img{position:absolute;inset:0;}
/* on retire les overlays sombres/verts (prévus pour l'ancien visuel plein cadre) qui
   teinteraient le panneau blanc, et on évite le double-zoom (panneau + image). */
.univers2 .pillar--photo .pillar__img::after,
.univers2 .pillar--photo .pillar__img::before{display:none;}
.univers2 .pillar--photo:hover .pillar__img{transform:none;filter:none;}
.univers2 .pillar--photo.pillar--active .pillar__img{filter:none;}
@media (max-width:820px){ .univers2 .pillar--photo .pillar__img{aspect-ratio:1/1;} }

/* ===== Formulaire de contact Second univers : lisible sur fond sombre, accents verts ===== */
.univers2 .field label{color:#e9f4ee;}
.univers2 .field .req{color:#2dd48a;}
.univers2 .field .hint{color:rgba(233,244,238,.5);}
.univers2 .field input:focus,.univers2 .field select:focus,.univers2 .field textarea:focus{
  border-color:#2dd48a;box-shadow:0 0 0 3px rgba(45,212,138,.18);}
.univers2 .consent{color:rgba(233,244,238,.72);}
/* Champs à fond blanc -> texte SOMBRE (sinon --ink clair de = texte invisible) */
.univers2 .field input,.univers2 .field select,.univers2 .field textarea{color:#0f1b30;}
.univers2 .field input::placeholder,.univers2 .field textarea::placeholder{color:#8a97a5;}