/* ═══════════════════════════════════════════════════════════════════════════
   KOBALT — agence de production créative (branche IKONIQ)

   PARTI PRIS : le site n'a aucune image ni vidéo à montrer au lancement.
   Plutôt que de laisser des aplats vides, toute la matière visuelle est
   fabriquée : grain animé, halo qui suit le curseur, typographie à l'échelle
   de l'écran, cadres de viseur, timecode vivant. Le vocabulaire est celui du
   plateau — viseur, pellicule, slate — pas celui d'un site vitrine.

   Palette : bleu Kobalt du logo, poussé jusqu'à un bleu lumineux pour la
   lumière ; noir profond légèrement bleuté ; un os chaud pour les ruptures.
   Typo : Anton (comme ikoniq.fr) massif + Manrope + mono pour les métadonnées.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --kobalt:#0047AB;
  --kobalt-vif:#1B6FFF;
  --kobalt-nuit:#06122B;
  --noir:#07070B;
  --noir-2:#0C0C12;
  --os:#F2F0EB;
  --gris:#8A8A99;
  --gris-clair:#C9C9D4;
  --filet:rgba(255,255,255,.09);
  --col:1240px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  /* Pente des coupures diagonales entre sections. */
  --biais:clamp(30px,5vw,88px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--noir);color:var(--os);
  font-family:"Manrope",system-ui,-apple-system,sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;position:relative;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--col);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ── Grain : une seule couche fixe sur toute la page, très légère ────────── */
body::after{
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.05;animation:grain 8s steps(6) infinite;will-change:transform;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,-4%)}
  30%{transform:translate(4%,-2%)} 50%{transform:translate(-2%,4%)}
  70%{transform:translate(3%,3%)} 90%{transform:translate(-4%,1%)}
}

/* Halo qui suit le curseur — la seule "lumière" du plateau. */
.halo{
  position:fixed;width:900px;height:900px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(27,111,255,.16),rgba(0,71,171,.06) 40%,transparent 68%);
  transform:translate(-50%,-50%);transition:opacity .6s;opacity:0;
  will-change:transform;filter:blur(20px);
}

h1,h2,h3,.anton{
  font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.015em;line-height:1.06;text-wrap:balance;
}

/* ── Navigation : fine, en surimpression, pas une barre blanche ──────────── */
/* Le fond ne peut pas être un dégradé : au-dessus des sections claires
   (déclaration, pied de page) il laissait passer le clair en bavure grise et
   les liens devenaient illisibles. Transparent sur le hero, opaque ensuite. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;
  transition:background .35s ease,backdrop-filter .35s ease;
}
.nav.pose{
  background:rgba(7,7,11,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.nav-in{
  max-width:var(--col);margin:0 auto;height:82px;padding:0 clamp(20px,4vw,40px);
  display:flex;align-items:center;gap:30px;
}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo-mk{height:24px;width:auto;display:block}
.nav-liens{display:flex;gap:32px;margin-left:auto;align-items:center}
.nav-liens a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-clair);position:relative;padding:6px 0;transition:color .2s;
}
.nav-liens a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--kobalt-vif);transition:right .32s cubic-bezier(.2,.7,.2,1);
}
.nav-liens a:hover{color:#fff}
.nav-liens a:hover::after{right:0}
.nav-cta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--filet);padding:11px 20px;border-radius:2px;color:#fff;
  display:inline-flex;align-items:center;gap:9px;transition:border-color .25s,background .25s;
}
.nav-cta:hover{border-color:var(--kobalt-vif);background:rgba(27,111,255,.1)}
.pastille-rec{
  width:7px;height:7px;border-radius:50%;background:#FF3B30;
  animation:clignote 1.6s ease-in-out infinite;
}
@keyframes clignote{0%,100%{opacity:1}50%{opacity:.25}}
.nav-burger{display:none;background:none;border:none;padding:8px;cursor:pointer;margin-left:auto}
.nav-burger span{display:block;width:22px;height:1.5px;background:#fff}
.nav-burger span+span{margin-top:6px}

/* ── Hero : plein écran, typographie à l'échelle de la fenêtre ───────────── */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;padding:120px 0 0;overflow:hidden;
}
/* Le mot de marque en filigrane, coupé par le bas — profondeur sans image.
   Élément réel (pas ::before) car il lui faut un transform piloté en JS :
   il défile plus lentement que le titre, ce qui masque la coupe basse en
   la faisant paraître flotter plutôt que taillée net. */
.hero-marque{
  position:absolute;left:50%;bottom:-4vw;transform:translateX(-50%);
  font-family:"Anton",sans-serif;font-size:26vw;line-height:.7;color:#fff;
  opacity:.028;letter-spacing:-.02em;pointer-events:none;white-space:nowrap;z-index:0;
  will-change:transform;
}
.hero .wrap{position:relative;z-index:2;width:100%}

.hero-meta{
  display:flex;gap:26px;flex-wrap:wrap;align-items:center;
  color:var(--gris);margin-bottom:34px;
}
.hero-meta .sep{width:26px;height:1px;background:var(--filet)}
.hero-meta b{color:var(--kobalt-vif);font-weight:400}

.hero-titre{font-size:clamp(52px,11.5vw,178px);margin-left:-.06em;line-height:.9}
.hero-titre .ligne{display:block;overflow:hidden}
.hero-titre .ligne > span{display:block}
.hero-titre em{font-style:normal;color:var(--kobalt-vif)}
/* Contour au lieu du plein : donne de l'air et de la matière au bloc de titre. */
.hero-titre .creux{
  color:transparent;-webkit-text-stroke:1.5px rgba(242,240,235,.5);
  text-stroke:1.5px rgba(242,240,235,.5);
}

.hero-bas{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  flex-wrap:wrap;margin-top:52px;
}
.hero-sub{font-size:17px;color:var(--gris-clair);max-width:38ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.btn{
  display:inline-flex;align-items:center;gap:11px;padding:17px 30px;border-radius:2px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border:none;cursor:pointer;position:relative;overflow:hidden;transition:color .3s;
}
.btn-plein{background:var(--kobalt);color:#fff}
/* Remplissage qui monte au survol, plutôt qu'un simple changement de teinte. */
.btn-plein::before{
  content:"";position:absolute;inset:0;background:var(--kobalt-vif);
  transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.7,.2,1);z-index:0;
}
.btn-plein:hover::before{transform:translateY(0)}
.btn-plein span{position:relative;z-index:1}
.btn-ligne{background:transparent;color:var(--os);border:1px solid var(--filet)}
.btn-ligne:hover{border-color:var(--os)}

/* Indicateur de défilement */
.scroll-ind{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--gris);
}
.scroll-ind .barre{width:1px;height:46px;background:linear-gradient(180deg,var(--filet),transparent);
  position:relative;overflow:hidden}
.scroll-ind .barre::after{
  content:"";position:absolute;top:-46px;left:0;width:1px;height:46px;
  background:var(--kobalt-vif);animation:descend 2.2s ease-in-out infinite;
}
@keyframes descend{0%{top:-46px}60%,100%{top:46px}}

/* ── Bandeau défilant, à grande échelle ──────────────────────────────────── */
/* Le ruban est INCLINÉ, pas coupé : une bande taillée en biais avec du texte
   horizontal dedans se lit comme un défaut. L'angle (2.86°) est celui des
   coupures de section — arctan(0.05), puisque le biais vaut 5vw sur toute la
   largeur, donc constant quelle que soit la fenêtre. */
.ruban-piste{overflow:hidden;position:relative;z-index:2;padding:38px 0}
.ruban{
  overflow:hidden;padding:24px 0;background:var(--noir-2);
  transform:rotate(-2.86deg);
  width:112%;margin-left:-6%;
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
}
.ruban-in{display:flex;gap:0;width:max-content;animation:glisse 30s linear infinite}
.ruban-in span{
  font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(26px,4vw,50px);
  padding:0 30px;color:transparent;-webkit-text-stroke:1px rgba(242,240,235,.28);
  display:flex;align-items:center;gap:30px;letter-spacing:-.01em;
}
.ruban-in span i{font-style:normal;color:var(--kobalt-vif);-webkit-text-stroke:0;font-size:.4em}
.ruban-in span:nth-child(even){color:var(--os);-webkit-text-stroke:0}
@keyframes glisse{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ruban:hover .ruban-in{animation-play-state:paused}

/* ── Sections ────────────────────────────────────────────────────────────── */
section{position:relative;z-index:2}
.sec{padding:clamp(90px,13vh,150px) 0}
.sec-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
          flex-wrap:wrap;margin-bottom:64px}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--kobalt-vif);display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--kobalt-vif)}
h2{font-size:clamp(34px,6.4vw,86px)}
h2 .creux{color:transparent;-webkit-text-stroke:1.5px rgba(242,240,235,.42)}
.intro{color:var(--gris);font-size:16.5px;max-width:40ch}

/* ── Formats : cadres de viseur, pas des cartes ──────────────────────────── */
.slates{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filet)}
@media (max-width:900px){.slates{grid-template-columns:1fr}}
.slate{
  background:var(--noir);padding:44px 34px 40px;position:relative;
  transition:background .4s cubic-bezier(.2,.7,.2,1);min-height:340px;
  display:flex;flex-direction:column;overflow:hidden;
}
.slate::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 110%,rgba(27,111,255,.18),transparent 60%);
  opacity:0;transition:opacity .45s;
}
.slate:hover{background:var(--noir-2)}
.slate:hover::before{opacity:1}
/* Sur mobile il n'y a pas de survol : le JS ajoute .au-centre à la carte la
   plus proche du milieu de l'écran pendant le défilement — même effet, déclenché
   autrement. */
.slate.au-centre{background:var(--noir-2)}
.slate.au-centre::before{opacity:1}
/* Coins de viseur — le motif de cadrage, repris de l'outil interne IKONIQ. */
.slate .viseur{position:absolute;inset:16px;pointer-events:none;opacity:0;transition:opacity .4s}
.slate:hover .viseur,.slate.au-centre .viseur{opacity:1}
.slate .viseur i{position:absolute;width:14px;height:14px;border:1.5px solid var(--kobalt-vif)}
.slate .viseur i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.slate .viseur i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.slate .viseur i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.slate .viseur i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.slate-n{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--gris);
  margin-bottom:auto;position:relative;z-index:1;
}
.slate h3{font-size:clamp(24px,2.6vw,34px);margin:40px 0 14px;position:relative;z-index:1;line-height:1.08}
.slate p{color:var(--gris);font-size:15.5px;line-height:1.6;position:relative;z-index:1}

/* ── Déclaration pleine largeur, en os ───────────────────────────────────── */
.declaration{
  background:var(--os);color:var(--noir);position:relative;z-index:3;
  padding:calc(clamp(90px,14vh,160px) + var(--biais)) 0;
  clip-path:polygon(0 var(--biais),100% 0,100% calc(100% - var(--biais)),0 100%);
  margin:calc(var(--biais) * -1) 0;
}
.declaration .eyebrow{color:var(--kobalt)}
.declaration .eyebrow::before{background:var(--kobalt)}
.declaration p{
  font-family:"Anton",sans-serif;text-transform:uppercase;line-height:1.12;
  font-size:clamp(30px,5.2vw,68px);letter-spacing:-.015em;max-width:18ch;
}
.declaration p em{font-style:normal;color:var(--kobalt)}
.declaration .signe{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#6A6A78;margin-top:48px;max-width:none;line-height:1.6;
}

/* ── Appel à l'action : plein écran, dramatique ──────────────────────────── */
.final{
  padding:clamp(100px,18vh,190px) 0;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,rgba(0,71,171,.32),transparent 62%);
}
.final h2{font-size:clamp(38px,8.4vw,124px);margin-bottom:26px}
.final p{color:var(--gris-clair);max-width:44ch;margin:0 auto 44px;font-size:17px}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{max-width:860px}
.faq details{border-top:1px solid var(--filet)}
.faq details:last-of-type{border-bottom:1px solid var(--filet)}
.faq summary{
  cursor:pointer;list-style:none;padding:30px 0;display:flex;justify-content:space-between;
  gap:24px;align-items:center;font-size:clamp(17px,2vw,22px);font-weight:700;
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--kobalt-vif)}
.faq summary .plus{
  flex:0 0 auto;width:26px;height:26px;position:relative;
}
.faq summary .plus::before,.faq summary .plus::after{
  content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;
  background:var(--kobalt-vif);transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq summary .plus::after{transform:rotate(90deg)}
.faq details[open] summary .plus::after{transform:rotate(0)}
.faq .rep{padding:0 0 30px;color:var(--gris);max-width:64ch}

/* ── Pied de page : rupture en clair, le mot de marque à pleine largeur ──── */
.pied{
  background:var(--os);color:var(--noir);position:relative;z-index:3;
  padding:calc(90px + var(--biais)) 0 0;overflow:hidden;
  clip-path:polygon(0 var(--biais),100% 0,100% 100%,0 100%);
  margin-top:calc(var(--biais) * -1);
}
.pied-cols{
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:56px;
}
.pied-cols h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#6A6A78;margin-bottom:20px;font-weight:400;
}
.pied-cols ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.pied-cols a{font-size:16px;color:var(--noir);transition:color .2s}
.pied-cols a:hover{color:var(--kobalt)}

/* Le logo occupe toute la largeur du conteneur : c'est la signature de la
   page, pas une vignette. Le SVG s'adapte, donc pas de taille en dur. */
.pied-mk-wrap{width:112%;margin:0 -6%;display:block;line-height:0}
.pied-mk{width:100%;height:auto;display:block}

.pied-bas{
  border-top:1px solid rgba(10,10,20,.14);margin-top:26px;padding:24px 0;
  display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#6A6A78;
}
.pied-bas a{color:var(--kobalt);transition:opacity .2s}
.pied-bas a:hover{opacity:.65}


/* ── Révélations ─────────────────────────────────────────────────────────── */
.js .rev{opacity:0;transform:translateY(30px);
         transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.js .rev.vu{opacity:1;transform:none}
/* Les lignes de titre montent depuis leur propre masque : l'effet "rideau". */
.js .hero-titre .ligne > span{transform:translateY(105%);
  transition:transform 1s cubic-bezier(.16,.84,.3,1)}
.js .hero-titre.vu .ligne > span{transform:translateY(0)}
.js .hero-titre .ligne:nth-child(2) > span{transition-delay:.09s}
.js .hero-titre .ligne:nth-child(3) > span{transition-delay:.18s}

a:focus-visible,summary:focus-visible,.btn:focus-visible,.nav-cta:focus-visible{
  outline:2px solid var(--kobalt-vif);outline-offset:4px}

@media (max-width:860px){
  .nav-liens{display:none}
  .nav-liens.ouvert{
    display:flex;position:fixed;inset:82px 0 auto;flex-direction:column;gap:0;
    background:var(--noir-2);border-bottom:1px solid var(--filet);padding:10px 0;
  }
  .nav-liens.ouvert a{padding:16px clamp(20px,4vw,40px)}
  .nav-burger{display:block}
  .nav-cta{display:none}
  .hero-bas{flex-direction:column;align-items:flex-start}
  .hero-marque{font-size:44vw}
}

/* ── Accessoires flottants : décor de plateau dispersé sur les côtés ─────
   Visibles à toutes les largeurs — sur mobile le clap disparaît (trois
   objets en fond sur un petit écran, ça surcharge) mais la caméra et le
   micro restent, en plus petit, pour qu'on les devine quand même. Chaque
   accessoire a sa propre vitesse de parallax (data-vitesse, lue en JS) :
   elles défilent moins vite que la page, ce qui crée l'écart de profondeur
   qui donne l'impression de flottement. Le va-et-vient (oscillation) est un
   second mouvement, indépendant, posé sur l'image elle-même — la div porte
   le parallax, l'image porte le flottement. */
.props{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.prop{position:absolute;will-change:transform}
/* Gros plans de fond, pas des vignettes : on n'en voit jamais l'objet en
   entier, juste un fragment reconnaissable qui se fond dans le noir —
   couleur d'origine gardée (pas de teinte, pas de niveaux de gris), juste
   assourdie par l'opacité et un souffle de flou. */
.prop img{
  height:auto;display:block;opacity:.16;filter:blur(1px) saturate(.85);
}
.prop-camera img{width:min(58vw,760px)}
.prop-micro img{width:min(50vw,660px)}
.prop-clap img{width:min(54vw,700px)}
@media (max-width:900px){
  .prop-clap{display:none}
  .prop-camera img{width:min(70vw,420px)}
  .prop-micro img{width:min(62vw,360px)}
}
/* L'animation reste sur l'image, jamais sur .prop : le JS écrit le
   transform de parallax directement sur .prop, et un style inline écrase
   toute animation posée sur le même élément. */
.prop-camera img{animation:flotte-a 9s ease-in-out infinite}
.prop-micro img{animation:flotte-b 11s ease-in-out infinite}
.prop-clap img{animation:flotte-c 10s ease-in-out infinite}
@keyframes flotte-a{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-22px) rotate(2deg)}}
@keyframes flotte-b{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(18px) rotate(-3deg)}}
@keyframes flotte-c{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(4deg)}}
/* ── Offres : trois colonnes, la centrale mise en avant ──────────────────── */
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filet);margin-top:56px}
@media (max-width:980px){.offres{grid-template-columns:1fr}}
.offre{
  background:var(--noir);padding:40px 30px 38px;display:flex;flex-direction:column;
  position:relative;transition:background .4s cubic-bezier(.2,.7,.2,1);
}
.offre:hover{background:var(--noir-2)}
/* L'offre du milieu est celle qu'on pousse : fond déjà éclairci et filet bleu
   en haut, plutôt qu'un badge « populaire » qui ferait pub. */
.offre-phare{background:var(--noir-2)}
.offre-phare::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--kobalt-vif)}
.offre-nom{font-family:"Anton",sans-serif;font-size:clamp(22px,2.4vw,30px);letter-spacing:.01em;margin-bottom:8px}
.offre-accroche{color:var(--gris);font-size:15px;line-height:1.5;min-height:2lh}
.offre-prix{display:flex;flex-direction:column;gap:6px;margin:30px 0 24px}
.offre-prix .mono{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.offre-prix b{font-family:"Anton",sans-serif;font-size:clamp(30px,3.6vw,44px);font-weight:400;letter-spacing:.01em;line-height:1}
.offre-phare .offre-prix b{color:var(--kobalt-vif)}
.offre-cta{width:100%;justify-content:center;margin-bottom:34px}
.offre-bloc{border-top:1px solid var(--filet);padding-top:18px;margin-top:18px}
.offre-bloc:first-of-type{margin-top:auto}
.offre-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:10px}
.offre-bloc p{color:var(--gris-clair);font-size:14.5px;line-height:1.5}
.offre-bloc ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.offre-bloc li{
  color:var(--gris-clair);font-size:14.5px;line-height:1.45;padding-left:18px;position:relative;
}
.offre-bloc li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-left:1.5px solid var(--kobalt-vif);border-bottom:1.5px solid var(--kobalt-vif);
  transform:rotate(-45deg);
}

/* ── Brief express : formulaire en pop-up, pas une page de contact ───────── */
.brief-overlay{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(4,4,8,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px;
}
.brief-overlay.ouvert{display:flex}
.brief-modal{
  width:100%;max-width:720px;max-height:90vh;background:var(--noir);border:1px solid var(--filet);
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  animation:brief-entree .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes brief-entree{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.brief-fermer{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid var(--filet);
  background:transparent;color:#fff;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,color .25s;
}
.brief-fermer:hover{border-color:var(--kobalt-vif);color:var(--kobalt-vif)}
.brief-tete{padding:26px 60px 22px 28px;border-bottom:1px solid var(--filet);flex:none}
.brief-eyebrow{color:var(--kobalt-vif);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.brief-progress{display:flex;align-items:center;gap:16px}
.brief-progress .mono{font-size:11px;color:var(--gris);letter-spacing:.06em;white-space:nowrap}
.brief-barre{flex:1;height:2px;background:var(--filet);position:relative}
.brief-barre-r{position:absolute;inset:0 auto 0 0;width:20%;background:var(--kobalt-vif);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.brief-corps{padding:34px 28px;overflow-y:auto;flex:1;min-height:280px}
.brief-etape{display:none}
.brief-etape.active{display:block;animation:brief-etape-entree .32s ease}
@keyframes brief-etape-entree{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.brief-etape h3{font-size:clamp(20px,3vw,26px);line-height:1.25;margin-bottom:26px;max-width:34ch}
.brief-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.brief-choix{grid-template-columns:1fr}}
.brief-opt{
  text-align:left;padding:16px 18px;border:1px solid var(--filet);background:transparent;color:var(--gris-clair);
  font-family:inherit;font-size:15px;cursor:pointer;transition:border-color .25s,background .25s,color .25s;
}
.brief-opt:hover{border-color:var(--kobalt-vif)}
.brief-opt.selectionne{border-color:var(--kobalt-vif);background:rgba(27,111,255,.12);color:#fff}
.brief-champs{display:flex;flex-direction:column;gap:20px}
.brief-champs label{display:flex;flex-direction:column;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.brief-champs input,.brief-champs textarea{
  background:transparent;border:none;border-bottom:1px solid var(--filet);color:#fff;
  font-family:"Manrope",sans-serif;font-size:16px;padding:10px 2px;text-transform:none;letter-spacing:normal;
}
.brief-champs input:focus,.brief-champs textarea:focus{outline:none;border-color:var(--kobalt-vif)}
.brief-champs textarea{resize:vertical;min-height:70px}
.brief-pied{display:flex;justify-content:space-between;gap:14px;padding:20px 28px;border-top:1px solid var(--filet);flex:none}
.brief-pied .btn{flex:none}
.brief-pied #briefPrecedent.masque{visibility:hidden}
.brief-pied #briefSuivant:disabled{opacity:.35;cursor:not-allowed}
.brief-pied.masque{display:none}
/* overflow:hidden : le loader 3D (translateZ/preserve-3d) déborde d'un
   simple overflow-y:auto sur un ancêtre — même comportement que la
   carrousel 3D de SKILL, il faut le contenir explicitement ici. */
.brief-merci{text-align:center;padding:30px 0 6px;overflow:hidden}
.brief-merci-texte h3{margin-bottom:12px}
.brief-merci-texte p{color:var(--gris-clair);max-width:46ch;margin:0 auto 26px}
.brief-envoi{color:var(--gris);margin-top:8px}

/* Animation d'envoi — CSS isométrique repris d'un loader Uiverse, reteinté
   aux couleurs KOBALT et préfixé (kbl-) pour ne jamais entrer en collision
   avec d'autres classes .box/.ground de la page. */
.kbl-loader{
  --duree:3s;--bleu:#1B6FFF;--bleu-clair:#5C93FF;--bleu-transp:rgba(27,111,255,0);
  width:200px;height:230px;position:relative;transform-style:preserve-3d;
  transform:scale(.78);margin:0 auto;
}
.kbl-loader:before,.kbl-loader:after{
  --r:20.5deg;content:"";width:320px;height:140px;position:absolute;right:32%;bottom:-11px;
  background:var(--noir);transform:translateZ(200px) rotate(var(--r));
  animation:kbl-mask var(--duree) linear forwards infinite;
}
.kbl-loader:after{--r:-20.5deg;right:auto;left:32%}
.kbl-ground{
  position:absolute;left:-50px;bottom:-120px;transform-style:preserve-3d;
  transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}
.kbl-ground div{
  transform:rotateX(90deg) rotateY(0deg) translate(-48px,-120px) translateZ(100px) scale(0);
  width:200px;height:200px;
  background:linear-gradient(45deg,var(--bleu) 0%,var(--bleu) 50%,var(--bleu-clair) 50%,var(--bleu-clair) 100%);
  transform-style:preserve-3d;animation:kbl-ground var(--duree) linear forwards infinite;
}
.kbl-ground div:before,.kbl-ground div:after{
  --rx:90deg;--ry:0deg;--x:44px;--y:162px;--z:-50px;content:"";width:156px;height:300px;opacity:0;
  background:linear-gradient(var(--bleu),var(--bleu-transp));position:absolute;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x),var(--y)) translateZ(var(--z));
  animation:kbl-ground-shine var(--duree) linear forwards infinite;
}
.kbl-ground div:after{--rx:90deg;--ry:90deg;--x:0;--y:177px;--z:150px}
.kbl-box{--x:0;--y:0;position:absolute;animation:var(--duree) linear forwards infinite;transform:translate(var(--x),var(--y))}
.kbl-box div{
  background-color:var(--bleu);width:48px;height:48px;position:relative;transform-style:preserve-3d;
  animation:var(--duree) ease forwards infinite;transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
}
.kbl-box div:before,.kbl-box div:after{
  --rx:90deg;--ry:0deg;--z:24px;--y:-24px;--x:0;content:"";position:absolute;background-color:inherit;
  width:inherit;height:inherit;transform:rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x),var(--y)) translateZ(var(--z));
  filter:brightness(var(--b,1.2));
}
.kbl-box div:after{--rx:0deg;--ry:90deg;--x:24px;--y:0;--b:1.4}
.kbl-box0{--x:-220px;--y:-120px;left:58px;top:78px;animation-name:kbl-move0}
.kbl-box0 div{animation-name:kbl-scale0}
.kbl-box1{--x:-260px;--y:120px;left:25px;top:90px;animation-name:kbl-move1}
.kbl-box1 div{animation-name:kbl-scale1}
.kbl-box2{--x:120px;--y:-190px;left:58px;top:34px;animation-name:kbl-move2}
.kbl-box2 div{animation-name:kbl-scale2}
.kbl-box3{--x:280px;--y:-40px;left:91px;top:90px;animation-name:kbl-move3}
.kbl-box3 div{animation-name:kbl-scale3}
.kbl-box4{--x:60px;--y:200px;left:58px;top:102px;animation-name:kbl-move4}
.kbl-box4 div{animation-name:kbl-scale4}
.kbl-box5{--x:-220px;--y:-120px;left:25px;top:46px;animation-name:kbl-move5}
.kbl-box5 div{animation-name:kbl-scale5}
.kbl-box6{--x:-260px;--y:120px;left:91px;top:46px;animation-name:kbl-move6}
.kbl-box6 div{animation-name:kbl-scale6}
.kbl-box7{--x:-240px;--y:200px;left:58px;top:57px;animation-name:kbl-move7}
.kbl-box7 div{animation-name:kbl-scale7}
@keyframes kbl-move0{12%{transform:translate(var(--x),var(--y))}25%,52%{transform:translate(0,0)}80%{transform:translate(0,-32px)}90%,100%{transform:translate(0,188px)}}
@keyframes kbl-scale0{6%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0)}14%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1)}}
@keyframes kbl-move1{16%{transform:translate(var(--x),var(--y))}29%,52%{transform:translate(0,0)}80%{transform:translate(0,-32px)}90%,100%{transform:translate(0,188px)}}
@keyframes kbl-scale1{10%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0)}18%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1)}}
@keyframes kbl-move2{20%{transform:translate(var(--x),var(--y))}33%,52%{transform:translate(0,0)}80%{transform:translate(0,-32px)}90%,100%{transform:translate(0,188px)}}
@keyframes kbl-scale2{14%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0)}22%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1)}}
@keyframes kbl-move3{24%{transform:translate(var(--x),var(--y))}37%,52%{transform:translate(0,0)}80%{transform:translate(0,-32px)}90%,100%{transform:translate(0,188px)}}
@keyframes kbl-scale3{18%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0)}26%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1)}}
@keyframes kbl-move4{28%{transform:translate(var(--x),var(--y))}41%,52%{transform:translate(0,0)}80%{transform:translate(0,-32px)}90%,100%{transform:translate(0,188px)}}
@keyframes kbl-scale4{22%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0)}30%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1)}}
@keyframes kbl-move5{32%{transform:translate(var(--x),var(--y))}45%,52%{transform:translate(0,0)}80%{transform:translate(0,-32px)}90%,100%{transform:translate(0,188px)}}
@keyframes kbl-scale5{26%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0)}34%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1)}}
@keyframes kbl-move6{36%{transform:translate(var(--x),var(--y))}49%,52%{transform:translate(0,0)}80%{transform:translate(0,-32px)}90%,100%{transform:translate(0,188px)}}
@keyframes kbl-scale6{30%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0)}38%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1)}}
@keyframes kbl-move7{40%{transform:translate(var(--x),var(--y))}53%,52%{transform:translate(0,0)}80%{transform:translate(0,-32px)}90%,100%{transform:translate(0,188px)}}
@keyframes kbl-scale7{34%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0)}42%,100%{transform:rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1)}}
@keyframes kbl-ground{0%,65%{transform:rotateX(90deg) rotateY(0deg) translate(-48px,-120px) translateZ(100px) scale(0)}75%,90%{transform:rotateX(90deg) rotateY(0deg) translate(-48px,-120px) translateZ(100px) scale(1)}100%{transform:rotateX(90deg) rotateY(0deg) translate(-48px,-120px) translateZ(100px) scale(0)}}
@keyframes kbl-ground-shine{0%,70%{opacity:0}75%,87%{opacity:.2}100%{opacity:0}}
@keyframes kbl-mask{0%,65%{opacity:0}66%,100%{opacity:1}}
@media (max-width:480px){.kbl-loader{transform:scale(.5)}}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
  body::after{animation:none}
  .ruban-in{animation:none}
  .js .rev{opacity:1;transform:none}
  .js .hero-titre .ligne > span{transform:none}
  .halo{display:none}
  .props{display:none}
}