/* ==========================================================================
   ND Motion Studio
   DA éditoriale : filets plutôt que boîtes, typo qui hiérarchise, chiffres
   en monospace (la matière même du produit), blanc inégal, une seule rupture
   noire. Voir 03-MARQUE/AUDIT-DA-ANTI-IA.md pour les 17 marqueurs évités.
   ========================================================================== */

:root{
  --yellow:#FFE990;
  --gold:#C9A227;
  --ink:#0E0D0E;
  --ink-2:#3E3C3E;
  --ink-3:#777477;
  --paper:#FCFCFB;
  --rule:#1a1a1a1a;
  --rule-strong:#0E0D0E;
  --orange:#FF6B00;

  --max:1140px;
  --pad:clamp(1.15rem,4vw,2.5rem);
  --display:'Archivo',Impact,sans-serif;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Le bandeau de lancement est collant : sans cette marge, un lien
     d'ancre amène le titre visé juste en dessous, et il reste caché. */
  scroll-padding-top:7.5rem;
}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-size:18px;line-height:1.55;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
hr{border:0;border-top:1px solid var(--rule);margin:0}
/* Lu par les lecteurs d'écran, invisible à l'œil : la description longue
   d'un schéma, qui n'a pas à être affichée deux fois. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:680px}

/* Sections de longueur volontairement inégale */
.s{padding-block:4.5rem}
.s--tight{padding-block:2.25rem}
.s--tall{padding-block:7rem}
@media(max-width:700px){.s{padding-block:3rem}.s--tall{padding-block:4rem}}

/* ---------- Typographie ---------- */
.display{
  font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;line-height:.92;letter-spacing:-.025em;
  color:var(--ink);margin:0;
}
.d1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
.d2{font-size:clamp(1.8rem,3.8vw,2.8rem)}
.d3{font-size:clamp(1.5rem,3vw,2.1rem)}

h2,h3,h4{font-family:var(--sans);color:var(--ink);margin:0 0 .5em;letter-spacing:-.018em;line-height:1.2}
h2{font-size:1.5rem;font-weight:700}
h3{font-size:1.08rem;font-weight:700}
p{margin:0 0 1.15em;max-width:66ch}
.big{font-size:clamp(1.12rem,2vw,1.35rem);line-height:1.5;color:var(--ink-2)}
.small{font-size:.9rem}
.dim{color:var(--ink-3)}
strong,b{color:var(--ink);font-weight:600}

/* Petites capitales : remplace les badges pilules */
.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 1.4rem;
}
.eyebrow b{color:var(--orange);font-weight:500}

/* Le surlignage jaune — la signature de la marque, seul usage du jaune */
.mk{background:var(--yellow);color:var(--ink);padding:.02em .18em;
    box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Chiffres en monospace : la matière du produit */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}

/* ---------- Boutons : rectangulaires, francs ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
  padding:1.1rem 2rem;border:1.5px solid var(--ink);border-radius:2px;
  cursor:pointer;text-decoration:none;transition:background .12s,color .12s;
}
.btn:hover{background:transparent;color:var(--ink);text-decoration:none}
.btn--out{background:transparent;color:var(--ink)}
.btn--out:hover{background:var(--ink);color:var(--paper)}
.btn--wide{width:100%}
.btn--lg{font-size:1.12rem;padding:1.3rem 2.4rem}
.on-dark .btn{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.on-dark .btn:hover{background:transparent;color:var(--yellow)}
/* MODE "vitrine" : le bouton existe, il ne mène nulle part. */
.btn--bientot,.btn--bientot:hover{opacity:.5;cursor:default;pointer-events:none;
  background:var(--ink);color:var(--paper)}
.on-dark .btn--bientot{background:var(--yellow);color:var(--ink)}

/* ---------- Filets plutôt que cartes ---------- */
.rows{border-top:1px solid var(--rule)}
.row{border-bottom:1px solid var(--rule);padding:1.5rem 0;display:grid;gap:.4rem 1.6rem}
@media(min-width:820px){
  .row{grid-template-columns:4.5rem 1fr 9rem;align-items:baseline}
  .row--2col{grid-template-columns:4.5rem 1fr}
}
.row .idx{font-family:var(--mono);font-size:.82rem;color:var(--ink-3);letter-spacing:.04em}
.row .val{font-family:var(--mono);font-size:.95rem;color:var(--ink);white-space:nowrap}
@media(min-width:820px){.row .val{text-align:right}}
.row h3{margin:0 0 .25rem}
.row p{margin:0;font-size:.95rem;color:var(--ink-3);max-width:58ch}
.row--total{border-bottom:2px solid var(--rule-strong);border-top:2px solid var(--rule-strong);
            padding:1.1rem 0;font-weight:600}
.row--total h3,.row--total .val{color:var(--ink);font-size:1.05rem}

/* ---------- Rupture noire (une seule dans la page) ---------- */
.on-dark{background:var(--ink);color:#CFCCCF}
/* Les couleurs de texte du thème clair doivent être neutralisées ici,
   sinon un .big ou un <p> reste en gris foncé sur fond noir. */
.on-dark p,.on-dark .big,.on-dark li,.on-dark td{color:#CFCCCF}
.on-dark .display,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark strong,.on-dark b{color:var(--paper)}
.on-dark .dim,.on-dark .small.dim,.on-dark p.dim{color:#9A959A}
.on-dark .eyebrow{color:#9A959A}
.on-dark .num,.on-dark code{color:var(--paper)}
.on-dark code{background:#ffffff14}
.on-dark .note{border-left-color:var(--yellow);color:#CFCCCF}
.on-dark a{color:var(--yellow)}
.on-dark .strike{color:#847F84}
.on-dark hr,.on-dark .rows,.on-dark .row{border-color:#ffffff1f}

/* ---------- Le prix ---------- */
/* align-items:start — le prix doit être en haut, à hauteur du visuel produit.
   Avec 'end', la colonne de gauche était poussée en bas de la plus haute. */
.pricing{display:grid;gap:2.5rem;align-items:start}
@media(min-width:860px){.pricing{grid-template-columns:1fr 1fr}}
.strike{
  font-family:var(--display);font-style:italic;font-weight:900;
  font-size:clamp(2.4rem,5vw,3.6rem);color:var(--ink-3);
  text-decoration:line-through;text-decoration-thickness:.06em;line-height:1;
}
.now{
  font-family:var(--display);font-style:italic;font-weight:900;
  font-size:clamp(4.2rem,11vw,8rem);color:var(--ink);line-height:.85;letter-spacing:-.04em;
}
.now sup{font-size:.34em;vertical-align:.9em;letter-spacing:0}
.saving{display:inline-block;background:var(--yellow);color:var(--ink);
        font-family:var(--mono);font-size:.88rem;padding:.35rem .6rem;margin-top:1rem}

/* ---------- Grilles ---------- */
.cols{display:grid;gap:2.4rem}
@media(min-width:800px){.cols--2{grid-template-columns:1fr 1fr}.cols--3{grid-template-columns:repeat(3,1fr)}}
.aside{display:grid;gap:2.5rem}
@media(min-width:880px){.aside{grid-template-columns:1fr 340px}}

/* ---------- En-tête : statique, filet simple ---------- */
header{border-bottom:1px solid var(--rule);background:var(--paper)}
header .wrap{display:flex;align-items:center;justify-content:space-between;
             padding-block:1rem;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.brand img{height:34px;width:auto}
.brand span{font-family:var(--display);font-weight:900;font-style:italic;color:var(--ink);
            font-size:.92rem;text-transform:uppercase;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
nav.menu{display:flex;align-items:center;gap:1.4rem;font-size:.9rem}
nav.menu a{color:var(--ink-2);text-decoration:none}
nav.menu a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}
nav.menu a[aria-current]{color:var(--ink);font-weight:600}
.menu .sep{color:var(--rule);user-select:none}

/* ---------- Prérequis : filet jaune, pas de boîte teintée ---------- */
.note{border-left:3px solid var(--gold);padding:.15rem 0 .15rem 1.1rem;
      font-size:.95rem;color:var(--ink-2);max-width:62ch}

/* ---------- Visuels : l'image s'affiche dès qu'elle existe,
     sinon un cadre indique quoi y déposer (voir 08-ASSETS-DEMO) ---------- */
.v{position:relative;margin:0;background:#F2F1EF;overflow:hidden;border-radius:2px}
.v img{width:100%;height:100%;object-fit:cover;display:block}
.v.is-empty{border:1px dashed var(--line-dash,#C9C6C3);display:flex;align-items:center;justify-content:center}
.v.is-empty img{display:none}
.v.is-empty::after{
  content:attr(data-spec);font-family:var(--mono);font-size:.72rem;line-height:1.7;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  text-align:center;padding:1.5rem;white-space:pre-line;max-width:44ch;
}
.on-dark .v{background:#1b1a1b}
.on-dark .v.is-empty{border-color:#443f44}
.on-dark .v.is-empty::after{color:#847F84}
.v--wide{aspect-ratio:16/9}
.v--4x3{aspect-ratio:4/3}
.v--sq{aspect-ratio:1/1}

/* ---------- Logos clients : à gauche, pas de trust-bar centrée ---------- */
.clients{display:flex;flex-wrap:wrap;gap:1rem 1.45rem;align-items:center}
/* Pas de désaturation : elle fait disparaître les logos clairs ou colorés
   (La Boutique Officielle, Madabel, Argania). Une opacité légère suffit à
   les faire reculer sans les effacer. */
.clients img{height:22px;width:auto;opacity:.8;transition:opacity .15s}
.clients img:hover{opacity:1}

/* ---------- Fondateur ---------- */
.founder{display:grid;gap:2rem}
@media(min-width:760px){.founder{grid-template-columns:280px 1fr;gap:3rem}}
.founder img{width:100%;border-radius:2px}
/* Au téléphone, la colonne fait toute la largeur : le portrait montait à
   390 px de haut et tenait un demi-écran avant la première phrase. */
@media(max-width:759px){
  .founder img{max-width:190px;height:auto}
}

/* ---------- Pied ---------- */
footer{border-top:1px solid var(--rule);padding-block:3rem;font-size:.86rem;color:var(--ink-3)}
footer a{color:var(--ink-2)}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-bottom:1.4rem}

/* ---------- Cookies : refuser aussi visible qu'accepter (CNIL) ---------- */
#cookie{position:fixed;inset:auto 0 0 0;z-index:100;background:var(--ink);color:#CFCCCF;
        padding:1.1rem var(--pad);display:none;border-top:1px solid #ffffff1f}
#cookie.on{display:block}
#cookie .inner{max-width:var(--max);margin-inline:auto;display:flex;flex-wrap:wrap;gap:1rem;
               align-items:center;justify-content:space-between}
#cookie p{margin:0;font-size:.88rem;max-width:58ch}
#cookie .acts{display:flex;gap:.6rem;flex-wrap:wrap}
#cookie button{font-family:var(--sans);font-weight:600;font-size:.88rem;padding:.7rem 1.3rem;
               border-radius:2px;cursor:pointer;border:1.5px solid #6c686c;background:transparent;color:#fff}
#cookie button:hover{border-color:#fff}

/* ---------- Pages légales ---------- */
.legal{max-width:720px}
.legal h1{font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;
          font-size:clamp(1.9rem,4.5vw,2.6rem);color:var(--ink);line-height:.95;margin:0 0 1.5rem}
.legal h2{font-size:1.2rem;margin-top:2.4rem}
.legal h3,.legal h4{font-size:1rem;margin-top:1.7rem}
.legal table{width:100%;border-collapse:collapse;margin:1.3rem 0;font-size:.88rem}
.legal th,.legal td{border-bottom:1px solid var(--rule);padding:.65rem .5rem;text-align:left;vertical-align:top}
.legal th{color:var(--ink);font-weight:600;border-bottom-color:var(--rule-strong)}
.legal pre{overflow-x:auto;white-space:pre-wrap;font-family:var(--mono);font-size:.82rem;
           background:#F2F1EF;padding:1rem;border-radius:2px}
.legal blockquote{margin:1.3rem 0;border-left:3px solid var(--gold);padding-left:1.1rem}
.legal code{font-family:var(--mono);font-size:.88em}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Signe de la page d'accueil, pleine largeur ---------- */
.mark-band{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
           padding:2.5rem 0;margin-top:3rem;background:#F6F5F3}
.mark-band svg{width:100%;max-width:960px;margin-inline:auto}
.mark-band .cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
                text-transform:uppercase;color:var(--ink-3);text-align:center;margin:1.4rem 0 0}

/* ---------- Grille boutique ---------- */
.tiles{display:grid;gap:2.5rem 2rem}
@media(min-width:680px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{text-decoration:none;color:inherit;display:block}
.tile:hover{text-decoration:none}
.tile:hover .v{outline:1.5px solid var(--ink);outline-offset:3px}
.tile-h{display:flex;align-items:baseline;gap:.7rem;margin-top:1rem;
        padding-bottom:.6rem;border-bottom:1px solid var(--rule)}
.tile-h h3{margin:0;flex:1}
.tile-h .val{font-family:var(--mono);font-size:.92rem;color:var(--ink)}
.tile p{margin:.7rem 0 0;font-size:.92rem;color:var(--ink-3);max-width:none}
.tile .saving{margin-top:.8rem}

/* ---------- Bloc de qualification : pour qui, et pour qui pas ---------- */
.qual{display:grid;gap:2rem;border-top:1px solid var(--rule-strong);
      border-bottom:1px solid var(--rule-strong);padding:2.2rem 0;margin-top:2rem}
@media(min-width:780px){.qual{grid-template-columns:1fr 1fr;gap:3rem}}
.qual h3{font-size:1rem;margin-bottom:1rem}
.qual ul{list-style:none;margin:0;padding:0}
.qual li{position:relative;padding-left:1.6rem;margin-bottom:.7rem;font-size:.97rem;color:var(--ink-2)}
.qual li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:.9rem}
.qual .yes li::before{content:"✓";color:#3F8F4F}
.qual .no  li::before{content:"✕";color:#B04A3F}
.qual .no li{color:var(--ink-3)}

/* ---------- Comparatif natif / pré-rendu ----------
   Le seuil doit être le MÊME que celui de .row (820px), sinon la 4e colonne
   déborde sur une ligne implicite entre les deux points de rupture. */
.row--nat .val--l{text-align:left;white-space:normal;font-size:.9rem}
@media(min-width:820px){
  .row--nat{grid-template-columns:3.4rem 1fr 11rem 11rem}
}
@media(max-width:819px){
  .row--nat .val--l{font-size:.86rem;line-height:1.45}
  .row--nat .val--l.dim::before{content:"Pré-rendu : ";color:var(--ink-3)}
  .row--nat .val--l:not(.dim)::before{content:"Cet agent : ";color:var(--ink-3)}
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE — c'est là qu'arrive le trafic Instagram.
   Corrige : en-tête qui se chevauche, nav qui déborde, CTA qui casse.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* En-tête : le mot-marque disparaît, le logo suffit et reste cliquable */
  .brand span{display:none}
  .brand img{height:30px}
  header .wrap{padding-block:.8rem;gap:.8rem}
  nav.menu{gap:.85rem;font-size:.85rem}
  nav.menu .sep{display:none}

  /* Le prix ne doit jamais se détacher de son libellé */
  .btn{font-size:.98rem;padding:1rem 1.4rem;text-align:center}
  .btn--lg{font-size:1rem;padding:1.1rem 1.5rem}

  /* Le sur-titre tient sur une ligne */
  .eyebrow{font-size:.62rem;letter-spacing:.11em}

  /* Le prix géant ne déborde pas */
  .now{font-size:clamp(3.4rem,17vw,5rem)}
  .strike{font-size:clamp(1.9rem,8vw,2.6rem)}

  /* Le signe de la page d'accueil respire moins */
  .mark-band{padding:1.6rem 0;margin-top:2rem}
}

/* Très petits écrans : on garde « Boutique » et la langue, rien d'autre */
@media (max-width: 400px) {
  nav.menu a[href*="#offre"]{display:none}
  .btn--lg{font-size:.95rem;padding:1rem 1.1rem}
}

/* ══════════════════════════════════════════════════════════════════
   MODE LISTE D'ATTENTE
   ══════════════════════════════════════════════════════════════════ */
.wl-band{background:var(--ink);color:#CFCCCF;padding:.9rem 0;font-size:.93rem}
.wl-band strong{color:var(--yellow)}
.wl-band .wrap{max-width:var(--max)}

.waitlist{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch;max-width:520px;margin:0}
.waitlist input{
  flex:1 1 220px;min-width:0;padding:1rem 1.1rem;font:inherit;font-size:1rem;
  border:1.5px solid var(--ink);border-radius:2px;background:var(--paper);color:var(--ink);
}
.waitlist input::placeholder{color:var(--ink-3)}
.waitlist input:focus{outline:2px solid var(--gold);outline-offset:1px}
.waitlist button{flex:0 0 auto;cursor:pointer}
.waitlist .wl-msg{flex:1 0 100%;margin:.2rem 0 0;font-size:.9rem;min-height:1.3em}
.waitlist .wl-msg.ok{color:#2F7A43}
.waitlist .wl-msg.ko{color:#B04A3F}
.waitlist.done input,.waitlist.done button{display:none}
.waitlist.done .wl-msg{font-size:1.05rem;font-weight:600;color:var(--ink)}

.on-dark .waitlist input{background:transparent;border-color:#5a575a;color:var(--paper)}
.on-dark .waitlist input::placeholder{color:#847F84}
.on-dark .waitlist .wl-msg.ok{color:#8FD6A3}

@media(max-width:560px){
  .waitlist{flex-direction:column}
  .waitlist button{width:100%}
  /* En colonne, la base flex de 220 px s'applique à la HAUTEUR : le champ
     devenait un pavé. On lui rend sa hauteur naturelle. */
  .waitlist input{flex:0 0 auto;width:100%}
}

/* ---------- Accroche : le texte et le trait de lumière Resolve × Claude ----------
   Sous 960 px l'image passe dessous : en colonne étroite elle écraserait le titre,
   qui est l'élément que la page doit vendre en premier. */
.hero{display:grid;gap:2.4rem;align-items:center;position:relative}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:4rem}
  /* Avec la bande-annonce, la colonne de droite devient plus haute que le
     texte : centrer ferait descendre le bouton d'achat sous la ligne de
     flottaison. On aligne alors les deux colonnes par le haut. */
  .hero:has(.enc){align-items:start}
}
[data-tilt]{perspective:820px;position:relative}

/* La face qui bascule. Le conteneur porte la perspective et les variables,
   l'enfant porte la rotation : deux cartes peuvent ainsi s'incliner sur la
   même page sans se marcher dessus. */
.tilt-face{
  position:relative;z-index:1;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
/* Pendant le survol on suit la souris : la transition longue d'au-dessus
   donnerait un mouvement en retard d'une demi-seconde. */
[data-tilt].is-tilting .tilt-face{transition:transform .07s linear}
@media (prefers-reduced-motion:reduce){
  .tilt-face,[data-tilt].is-tilting .tilt-face{transition:none;transform:none}
}

/* La lueur derrière l'image. Pas un fond coloré plaqué sur la page : les couleurs
   sont celles de l'illustration elle-même, très diluées, comme si sa lumière
   débordait sur le papier. Le blanc cassé du site reste le fond. */
.hero-art::before{
  content:"";position:absolute;inset:-18% -12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 52% at 27% 50%, rgba(45,140,255,.22), transparent 70%),
    radial-gradient(34% 44% at 20% 68%, rgba(255,210,40,.20), transparent 70%),
    radial-gradient(30% 40% at 36% 72%, rgba(255,70,70,.16), transparent 70%),
    radial-gradient(46% 56% at 76% 50%, rgba(226,119,60,.26), transparent 70%);
  filter:blur(44px);opacity:.85;
  transition:opacity .5s ease, transform .5s ease;
}
.hero-art.is-tilting::before{opacity:1;transform:scale(1.04)}
.hero-art img{width:100%;height:auto;display:block}
@media (prefers-reduced-motion:reduce){
  .hero-art::before,.hero-art.is-tilting::before{transition:none;transform:none}
}

/* ---------- L'ambiance lumineuse de la page d'accueil ----------
   Le fond reste l'écru du site : ce qu'on ajoute, c'est la lumière de
   l'illustration qui déborde dessus. Quatre taches très diluées, fortement
   floutées, qui s'éteignent avant la fin du premier écran.

   Volontairement discret. Un grand dégradé coloré en haut de page est le
   cliché numéro un des sites générés : ici on veut sentir une présence, pas
   voir un fond. */
.s--hero{
  position:relative;isolation:isolate;
  /* Les deux couches décoratives débordent volontairement de la section pour
     que la lumière paraisse venir de l'extérieur. Sans découpe, elles élargissent
     la page et provoquent un défilement horizontal — flagrant au téléphone. */
  overflow:clip;
}
@supports not (overflow:clip){ .s--hero{overflow:hidden} }
.s--hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-6rem calc(50% - 50vw) auto;height:min(132%, 980px);
  background:
    radial-gradient(38% 46% at 72% 34%, rgba(226,119,60,.20), transparent 68%),
    radial-gradient(32% 40% at 58% 46%, rgba(45,140,255,.15), transparent 70%),
    radial-gradient(30% 36% at 66% 62%, rgba(255,205,45,.16), transparent 70%),
    radial-gradient(26% 32% at 50% 22%, rgba(255,233,144,.22), transparent 72%);
  filter:blur(70px);
  -webkit-mask-image:linear-gradient(#000 58%, transparent 97%);
          mask-image:linear-gradient(#000 58%, transparent 97%);
}
/* Au téléphone la colonne est étroite : la lueur passerait derrière le titre
   et abîmerait le contraste du texte noir. On la réduit et on l'éclaircit. */
@media (max-width:720px){
  .s--hero::before{height:min(80%,620px);filter:blur(56px);opacity:.55}
}

/* ---------- Le halo doré, derrière l'ambiance ----------
   Une couronne, pas une tache : transparent au centre, doré sur l'anneau,
   éteint au bord. C'est ce qui donne la profondeur — la lumière semble venir
   de derrière l'illustration au lieu d'être posée dessus.
   Couche encore en dessous (z-index -2) pour passer sous les taches de couleur. */
.s--hero::after{
  content:"";position:absolute;z-index:-2;pointer-events:none;
  top:-12rem;left:50%;width:min(1180px, 108vw);aspect-ratio:1;
  transform:translateX(calc(-50% + 20%));
  background:
    radial-gradient(circle,
      transparent 26%,
      rgba(255,221,130,.30) 44%,
      rgba(243,186,74,.20) 56%,
      transparent 74%),
    radial-gradient(circle, rgba(255,240,196,.26) 0%, transparent 52%);
  filter:blur(90px);
  -webkit-mask-image:linear-gradient(#000 62%, transparent 94%);
          mask-image:linear-gradient(#000 62%, transparent 94%);
}
@media (max-width:960px){
  /* Sans colonne de droite, le halo se recentre sous le titre. */
  .s--hero::after{transform:translateX(-50%);width:min(860px,120vw);filter:blur(72px);opacity:.6}
}
@media (prefers-reduced-motion:reduce){.s--hero::after{opacity:.5}}

/* ---------- Le cadre « une IA travaille ici » ----------
   La lueur orangée que les agents affichent au bord de l'écran quand ils pilotent
   la machine. Ici elle encadre la page d'accueil : le visiteur comprend avant
   d'avoir lu que quelque chose d'automatique est à l'œuvre.

   Fixe, derrière tout, et surtout `pointer-events:none` — sans ça elle avalerait
   les clics sur toute la page. */
.cadre{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  box-shadow:
    inset 0 0 0 1.5px rgba(217,119,87,.42),
    inset 0 0 26px rgba(217,119,87,.20),
    inset 0 0 90px rgba(217,119,87,.10);
  animation:cadre-respire 6s ease-in-out infinite;
}
@keyframes cadre-respire{
  0%,100%{opacity:.62}
  50%    {opacity:1}
}
/* Une bordure qui pulse en continu est fatigante sur un petit écran tenu à la main. */
@media (max-width:720px){
  .cadre{box-shadow:inset 0 0 0 1px rgba(217,119,87,.34), inset 0 0 18px rgba(217,119,87,.14)}
}
@media (prefers-reduced-motion:reduce){
  .cadre{animation:none;opacity:.7}
}

/* ---------- Le bandeau « Claude using DaVinci Resolve » ----------
   Repris de ce qu'affichent les agents quand ils pilotent une machine. Posé sous
   l'illustration, il dit en trois mots ce que fait le produit.

   L'illustration remonte un peu pour lui laisser la place : sans ça le bloc
   descendait sous le bouton et cassait l'alignement des deux colonnes. */
.hero-art img{margin-top:-1.4rem}
.agent{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:.5rem;
  margin:1.1rem auto 0;padding:.4rem .8rem .4rem .65rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:#9A4F2E;background:rgba(217,119,87,.09);
  border:1px solid rgba(217,119,87,.30);border-radius:999px;
  white-space:nowrap;
}
.hero-art{display:flex;flex-direction:column;align-items:center}
/* Le téléphone déborde du cadre de l'illustration : on lui réserve la place
   en bas, sinon il recouvre le bandeau « Claude using DaVinci Resolve ». */
@media (min-width:960px){ .hero-art{margin-bottom:3.4rem} }
.agent-pt{
  width:6px;height:6px;border-radius:50%;background:#D97757;
  box-shadow:0 0 0 0 rgba(217,119,87,.55);
  animation:agent-bat 2.2s ease-out infinite;flex:none;
}
@keyframes agent-bat{
  0%  {box-shadow:0 0 0 0 rgba(217,119,87,.55)}
  70% {box-shadow:0 0 0 7px rgba(217,119,87,0)}
  100%{box-shadow:0 0 0 0 rgba(217,119,87,0)}
}
@media (prefers-reduced-motion:reduce){ .agent-pt{animation:none} }

/* ---------- La banque d'assets, dépliable ----------
   Fermée par défaut : la page produit doit se lire d'un trait. Celui qui veut
   vérifier l'étendue du catalogue l'ouvre, les autres ne la voient pas. */
.bq{margin-top:1.6rem;border-top:1px solid var(--rule)}
.bq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 0;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);
}
.bq summary::-webkit-details-marker{display:none}
.bq summary:hover{color:var(--ink)}
.bq summary::after{content:"+";font-size:1rem;color:var(--ink-3)}
.bq[open] summary::after{content:"–"}
.bq-c{
  font-size:.7rem;padding:.1rem .45rem;border-radius:3px;
  background:rgba(217,119,87,.12);color:#9A4F2E;
}
.bq-in{padding-bottom:1rem}
.bq-l{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;
  padding:.7rem 0;border-top:1px solid var(--rule);
}
@media (min-width:620px){
  .bq-l{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:1.4rem;align-items:baseline}
  .bq-q{grid-column:1 / -1}
}
.bq-n{font-weight:600;font-size:.95rem}
.bq-v{font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.bq-q{font-size:.82rem;color:var(--ink-3)}
.bq-q:empty,.bq-v:empty{display:none}

/* ---------- Le surtitre : ce que c'est, avant ce que ça promet ----------
   Placé au-dessus du titre et non à côté du logo : dans la colonne de droite,
   il passerait sous le titre au téléphone — donc lu en second, l'inverse du but. */
.surtitre{
  margin:0 0 .7rem;
  font-size:clamp(1.05rem,2.4vw,1.45rem);
  font-weight:700;letter-spacing:-.01em;line-height:1.25;
  color:var(--ink);
}

/* ══════════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL — rythme des sections

   Le problème corrigé ici : cinq sections d'affilée construites pareil
   (titre pleine largeur, puis des filets). Même bien dessinée, la page
   donnait l'impression de se répéter. Chaque section a maintenant SA
   forme — colonne double, relevé, temps numérotés, face-à-face,
   respiration, pochettes — sans sortir de la DA : des filets, pas des
   boîtes, et une seule rupture noire.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- Double colonne : le titre tient le bord gauche ---------- */
.split{display:grid;gap:2rem}
@media(min-width:920px){
  .split{grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:4.5rem;align-items:start}
  .split-t{position:sticky;top:2.5rem}
}

/* ---------- Entrée de lexique : le terme, ses valeurs en dessous ----------
   Une colonne de valeurs alignée à droite déborde dès que la colonne se
   resserre — et se lit de toute façon moins bien qu'une définition. */
.row--lex h3{margin:0;font-weight:400;color:var(--ink-2)}
.lex-v{display:block;margin-top:.35rem;font-family:var(--mono);
       font-size:.86rem;color:var(--ink-3);letter-spacing:-.01em}
.row--total.row--lex h3{font-weight:700;color:var(--ink)}
.lex-v--mk{color:var(--ink);background:var(--yellow);display:inline-block;
           padding:.05em .3em;margin-top:.45rem}
.split-t p{max-width:34ch;color:var(--ink-3)}
.on-dark .split-t p{color:#9A959A}

/* ---------- Relevé chiffré (section noire) ---------- */
.ledger{border-top:1px solid #ffffff2e}
.ledger-l{display:grid;gap:.25rem 1.5rem;padding:1.15rem 0;
          border-bottom:1px solid #ffffff1f;align-items:baseline}
@media(min-width:620px){.ledger-l{grid-template-columns:1fr auto}}
.ledger-l .lg-n{font-size:1.02rem;color:#CFCCCF}
.ledger-l .lg-v{font-family:var(--mono);font-size:.86rem;color:#847F84}
@media(min-width:620px){.ledger-l .lg-v{text-align:right}}
.ledger-l--us{border-bottom:2px solid var(--yellow)}
.ledger-l--us .lg-n{color:var(--paper);font-weight:700}
.ledger-l--us .lg-v{color:var(--yellow)}

/* ---------- Trois temps numérotés ---------- */
.steps{counter-reset:st;margin-top:2.5rem;border-top:1px solid var(--rule)}
.step{display:grid;gap:.3rem 1.6rem;padding:1.6rem 0;border-bottom:1px solid var(--rule)}
@media(min-width:760px){.step{grid-template-columns:4.5rem 1fr}}
.step::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;
  color:var(--gold);padding-top:.35rem;
}
.step p{margin:0;max-width:62ch}
.punch{margin-top:2.2rem;max-width:40ch;font-size:clamp(1.25rem,2.6vw,1.6rem);
       line-height:1.35;color:var(--ink)}

/* ---------- Face-à-face natif / pré-rendu ---------- */
.vs{display:grid;gap:2rem;margin-top:2.6rem}
@media(min-width:820px){.vs{grid-template-columns:1fr 1fr;gap:3.5rem}}
.vs-c{border-top:2px solid var(--rule);padding-top:1.2rem}
.vs-c--new{border-top-color:var(--gold)}
.vs-c p{margin:0;font-size:.98rem;max-width:46ch}

/* ---------- Respiration : la seule section sans liste ---------- */
.breath{border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);
        background:#F4F2EC}
.breath .note{background:transparent}

/* ---------- Pochettes sur la page d'accueil ----------
   Variante seulement : en boutique, la même colonne porte le prix, qui doit
   rester lisible et noir. Ici elle porte un repère, qui doit s'effacer. */
.tiles--mod .tile-h .idx{font-family:var(--mono);font-size:.82rem;color:var(--ink-3)}
.tiles--mod .tile-h .val{font-size:.8rem;color:var(--ink-3);white-space:nowrap}
@media(max-width:679px){.tiles--mod .tile-h .val{display:none}}

/* ══════════════════════════════════════════════════════════════════
   LES ENCARTS MÉDIA

   Quatre emplacements : la bande-annonce sous les deux logos, deux
   « téléphones » au format 9/16, et une illustration large dans la
   section « natif ». Aucun ne s'affiche tant que son fichier n'existe
   pas — build.py les omet purement et simplement.

   Le cadre reste sobre : un filet, un coin à peine arrondi, l'ombre
   portée la plus discrète possible. La carte 3D suffit à donner le
   relief, le cadre n'a pas à en rajouter.
   ══════════════════════════════════════════════════════════════════ */
.enc{margin:0;display:flex;flex-direction:column;align-items:center}
.enc-cadre{
  position:relative;width:100%;overflow:hidden;background:#131213;
  border-radius:3px;box-shadow:0 1px 2px rgba(14,13,14,.10),0 10px 30px rgba(14,13,14,.13);
}
.enc-m{width:100%;height:100%;object-fit:cover;display:block}
.enc--16x9 .enc-cadre{aspect-ratio:16/9}
.enc--9x16 .enc-cadre{aspect-ratio:9/16}
.enc figcaption{
  margin-top:.85rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--ink-3);text-align:center;max-width:30ch;line-height:1.5;
}
.on-dark .enc figcaption{color:#847F84}

/* ---------- Le bouton de lecture ----------
   Posé au centre, il disparaît dès que la lecture commence (main.js rend
   alors les contrôles natifs : inutile de réécrire un lecteur complet). */
.enc-play{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  border:0;background:rgba(14,13,14,.18);cursor:pointer;
  transition:background .2s ease;
}
.enc-play:hover{background:rgba(14,13,14,.30)}
.enc-play:focus-visible{outline:2px solid var(--yellow);outline-offset:-4px}
.enc-play span{
  width:clamp(44px,14%,62px);aspect-ratio:1;border-radius:50%;
  background:var(--paper);box-shadow:0 2px 14px rgba(14,13,14,.35);
  display:block;position:relative;transition:transform .2s ease;
}
.enc-play:hover span{transform:scale(1.07)}
.enc-play span::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:.42em 0 .42em .68em;
  border-color:transparent transparent transparent var(--ink);font-size:16px;
}
.enc.is-playing .enc-play{display:none}

/* ---------- Le cadre « téléphone » ----------
   Une coque, pas une maquette d'iPhone : un liseré sombre, des coins
   francs et le petit trait du haut-parleur. Assez pour qu'on lise
   « vertical, fait pour les réseaux » sans tomber dans le gadget. */
.enc--phone .enc-cadre{
  border-radius:1.9rem;padding:7px;background:#17161a;
  box-shadow:0 1px 2px rgba(14,13,14,.14),0 14px 34px rgba(14,13,14,.20),
             inset 0 0 0 1px rgba(255,255,255,.07);
}
.enc--phone .enc-m{border-radius:1.45rem}
.enc--phone .enc-cadre::before{
  content:"";position:absolute;z-index:3;top:13px;left:50%;transform:translateX(-50%);
  width:26%;height:4px;border-radius:999px;background:rgba(255,255,255,.22);
}
.enc--phone .enc-play{border-radius:1.45rem;inset:7px;width:auto;height:auto}
.enc--phone{width:100%;max-width:300px;margin-inline:auto}

/* ---------- Texte à gauche, encart à droite ---------- */
.avec-enc{display:grid;gap:2.8rem}
@media(min-width:900px){
  .avec-enc{grid-template-columns:minmax(0,1fr) 300px;gap:4rem;align-items:center}
}
/* Sans encart (fichier absent), la colonne de texte reprend toute la
   largeur et retrouve sa longueur de ligne de lecture. */
.avec-enc>:only-child{max-width:72ch}
.breath .avec-enc>:only-child{max-width:680px;margin-inline:auto}

/* ---------- L'illustration large de la section « natif » ---------- */
.enc--large{margin-top:3rem}
.enc--large .enc-cadre{max-width:100%}

/* ---------- L'accroche : le téléphone, le signe en dessous ----------
   Deux objets indépendants, chacun avec sa propre perspective et sa propre
   inclinaison au survol. Les réunir dans une seule planche les faisait
   bouger ensemble : on sentait le carton derrière, et l'effet se
   retournait contre lui-même. */
.hero-art--duo{
  display:flex;flex-direction:column;align-items:center;gap:1.7rem;
}
.hero-art--duo::before{display:none}   /* la lueur passe sur le signe */

.art-tel,.art-signe{width:100%;display:flex;justify-content:center}

/* Le téléphone : trois quarts, comme une photo produit. La tranche droite
   vient vers l'œil, l'appareil penche un peu, il est posé en avant du
   plan. Rien ne bouge tant qu'on ne le survole pas : c'est sa position
   de repos, et l'inclinaison du survol s'y ajoute par-devant. */
.hero-art--duo .enc--phone{max-width:244px}
.hero-art--duo .enc{
  margin:0;
  transform:
    rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1))
    translateX(13%) translateZ(48px) rotateY(-19deg) rotateZ(5deg);
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
[data-tilt].is-tilting .enc{transition:transform .07s linear}
/* L'ombre tombe à gauche, du côté opposé à la tranche éclairée, large et
   douce : c'est elle qui décolle l'appareil du papier. */
.hero-art--duo .enc .enc-cadre{
  box-shadow:-14px 26px 50px -12px rgba(14,13,14,.34),
             0 2px 5px rgba(14,13,14,.14),
             inset 0 0 0 1px rgba(255,255,255,.09);
}
/* Un reflet le long de la tranche qui vient vers nous : sans lui, la
   rotation se lit comme une image penchée, pas comme un objet. */
.hero-art--duo .enc .enc-cadre::after{
  content:"";position:absolute;z-index:4;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(258deg,
    rgba(255,255,255,.26) 0%, rgba(255,255,255,.07) 5%,
    transparent 16%, transparent 92%, rgba(255,255,255,.05) 100%);
}

/* Le signe et son bandeau : plus petits qu'avant, centrés sur la colonne.
   C'est lui qui tient l'axe, le téléphone est ce qui s'en écarte. */
.art-signe .tilt-face{
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;width:100%;
}
.hero-art--duo .signe{width:100%;max-width:318px;height:auto;margin-inline:auto}
.hero-art--duo .agent{margin:0}

/* La lueur suit le signe, d'où vient la lumière de l'illustration. */
.art-signe{position:relative}
.art-signe::before{
  content:"";position:absolute;inset:-46% -24%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 52% at 27% 50%, rgba(45,140,255,.22), transparent 70%),
    radial-gradient(34% 44% at 20% 68%, rgba(255,210,40,.20), transparent 70%),
    radial-gradient(30% 40% at 36% 72%, rgba(255,70,70,.16), transparent 70%),
    radial-gradient(46% 56% at 76% 50%, rgba(226,119,60,.26), transparent 70%);
  filter:blur(44px);opacity:.85;
  transition:opacity .5s ease, transform .5s ease;
}
.art-signe.is-tilting::before{opacity:1;transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .art-signe::before,.art-signe.is-tilting::before{transition:none;transform:none}
}

@media (max-width:959px){
  .hero-art--duo .enc--phone{max-width:216px}
  .hero-art--duo .signe{max-width:286px}
  /* Écran étroit : moins de décalage, sinon le téléphone frôle le bord. */
  .hero-art--duo .enc{
    transform:
      rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1))
      translateX(6%) translateZ(28px) rotateY(-15deg) rotateZ(4deg);
  }
}

/* ---------- Maquette : l'emplacement encore vide ----------
   Pointillé, transparent, et il dit lui-même ce qu'il attend. Visible
   uniquement tant que ENCARTS_VIDES vaut True dans build.py. */
.enc-cadre--vide{
  background:transparent;border:1px dashed #BFB9B0;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.45rem;padding:1.2rem;text-align:center;
  font-family:var(--mono);color:var(--ink-3);
}
.enc--phone .enc-cadre--vide{border-radius:1.9rem}
.ev-n{font-size:.78rem;color:var(--ink-2);letter-spacing:.02em;word-break:break-all}
.ev-f{font-size:.72rem;letter-spacing:.08em}
.ev-q{font-size:.68rem;line-height:1.5;max-width:22ch;color:#9a958d}
.on-dark .enc-cadre--vide{border-color:#55505a}

/* ══════════════════════════════════════════════════════════════════
   TARIF DE LANCEMENT

   Le barré n'est jamais un ancien prix : c'est le prix normal, celui qui
   s'appliquera après le lancement. Tout ce qui annonce la réduction porte
   la classe .promo, pour que main.js puisse tout retirer d'un coup à
   l'échéance. Ce qui reste alors est le prix réellement encaissé.
   ══════════════════════════════════════════════════════════════════ */
/* Le bandeau suit le défilement : l'offre ne doit pas disparaître dès le
   premier écran. Il reste au-dessus de l'en-tête, qui n'est pas collant. */
.promo-band{
  position:sticky;top:0;z-index:70;
  background:var(--ink);color:var(--paper);font-size:.9rem;
  padding-top:env(safe-area-inset-top,0px);
}
.promo-band .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.4rem 1.1rem;padding-block:.75rem;text-align:center;
}
.pm-t{font-weight:700;letter-spacing:-.01em}
.pm-c{color:#CFCCCF}
.pm-c .strike,.pm-c strong:first-of-type{color:#847F84;text-decoration:line-through}
.pm-prix{color:var(--yellow);text-decoration:none!important}
.pm-h{
  font-family:var(--mono);font-size:.84rem;font-weight:500;letter-spacing:.06em;
  color:var(--ink);background:var(--yellow);padding:.24rem .6rem;border-radius:2px;
  /* Chiffres de largeur fixe : sans ça le compteur tressaute à chaque
     seconde et attire l'œil pour une mauvaise raison. */
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pm-h:empty{display:none}
.promo-band a{color:var(--paper);white-space:nowrap}
/* Au téléphone, le bandeau est collant : chaque ligne qu'il prend est une
   ligne volée au contenu. On garde le compteur et le prix, on laisse
   tomber la phrase explicative et le lien, que la navigation porte déjà. */
/* Au téléphone, deux lignes et pas trois. En flex, le compteur se
   retrouvait coincé en bout de première ligne et se faisait tronquer ;
   en grille, chaque ligne a sa paire : le titre et le prix en haut, le
   compteur et le bouton en dessous. */
@media(max-width:680px){
  .promo-band{font-size:.78rem}
  .promo-band .wrap{
    display:grid;grid-template-columns:auto auto;
    justify-content:center;align-items:center;
    column-gap:.7rem;row-gap:.35rem;padding-block:.55rem;
  }
  .pm-long{display:none}
  .pm-h{font-size:.76rem;padding:.2rem .5rem}
  .pm-cta{font-size:.78rem;padding:.38rem .8rem .38rem 1.65rem}
  .pm-cta::before{left:.62rem;width:7px;height:7px;margin-top:-3.5px}
}
/* Sous 370 px, les deux colonnes ne tiennent plus : le titre prend sa
   ligne, le prix rejoint le compteur. */
@media(max-width:369px){
  .pm-t{grid-column:1/-1;text-align:center}
}

/* ---------- Le bloc de prix ---------- */
.prix{margin-top:1.4rem}
.prix-l{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem}
.prix .strike{font-size:clamp(1.3rem,3vw,1.8rem);line-height:1}
.now--s{font-size:clamp(2.6rem,6vw,3.6rem)}
.remise{
  display:inline-block;background:var(--ink);color:var(--yellow);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
  padding:.3rem .55rem;border-radius:2px;white-space:nowrap;
}
.on-dark .remise{background:var(--yellow);color:var(--ink)}

/* ══════════════════════════════════════════════════════════════════
   FICHE PRODUIT — pochette à gauche, bloc d'achat à droite
   ══════════════════════════════════════════════════════════════════ */
.fiche{display:grid;gap:2.2rem;margin-top:1.4rem}
@media(min-width:900px){
  .fiche{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:3.5rem;align-items:start}
  .fiche-img{position:sticky;top:1.5rem}
}
.fiche-img{border-radius:3px}

.puces{list-style:none;margin:1.6rem 0 1.8rem;padding:0;border-top:1px solid var(--rule)}
.puces li{
  position:relative;padding:.85rem 0 .85rem 1.9rem;
  border-bottom:1px solid var(--rule);font-size:.95rem;color:var(--ink-3);
}
.puces li::before{
  content:"✓";position:absolute;left:0;top:.85rem;
  font-family:var(--mono);font-size:.92rem;color:#3F8F4F;
}
.puces strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:.15rem}

.confiance{
  display:grid;gap:.5rem 1rem;margin-top:1.6rem;padding-top:1.2rem;
  border-top:1px solid var(--rule);
  font-size:.8rem;color:var(--ink-3);
}
@media(min-width:520px){.confiance{grid-template-columns:repeat(3,1fr)}}
.confiance span{position:relative;padding-left:1.1rem;line-height:1.4}
.confiance span::before{
  content:"";position:absolute;left:0;top:.42em;width:6px;height:6px;
  border-radius:50%;background:var(--gold);
}

/* ---------- Le bandeau défilant ----------
   Une seule piste doublée : quand la première moitié sort à gauche, la
   seconde est exactement à sa place, et la boucle ne saute pas. */
.defile{
  overflow:hidden;background:var(--ink);color:var(--paper);
  padding-block:.8rem;white-space:nowrap;
}
.df-piste{display:inline-flex;gap:1.6rem;align-items:center;animation:df 38s linear infinite}
.df-piste span{font-size:.86rem;letter-spacing:.01em}
.df-p{color:var(--gold)}
@keyframes df{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.defile:hover .df-piste{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.df-piste{animation:none}}

/* ---------- La barre d'achat collante ----------
   Elle n'apparaît qu'une fois le bloc d'achat du haut sorti de l'écran :
   avant, elle ferait doublon avec le bouton qu'on est en train de lire. */
.barre-achat{
  position:fixed;z-index:60;inset:auto 0 0 0;
  background:rgba(252,252,251,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.barre-achat.on{transform:translateY(0)}
.barre-achat .wrap{
  display:flex;align-items:center;gap:1rem;padding-block:.7rem;
}
.barre-achat img{width:42px;height:auto;border-radius:2px;flex:none}
.ba-n{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-p{display:flex;align-items:baseline;gap:.45rem;margin-left:auto;white-space:nowrap}
.ba-p .strike{font-size:.92rem}
.ba-p strong{font-size:1.1rem}
.barre-achat .btn{flex:none;padding:.8rem 1.4rem;font-size:.95rem}
@media(max-width:720px){
  .barre-achat img,.ba-n{display:none}
  .barre-achat .ba-p{margin-left:0}
  .barre-achat .btn{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.barre-achat{transition:none}}

/* ══════════════════════════════════════════════════════════════════
   LE KIT MÉDIA — vignettes et lecteurs

   Deux objets, deux comportements. La VIGNETTE tourne en boucle, muette,
   sans contrôles : c'est une image qui bouge. Le LECTEUR a le son et les
   contrôles du navigateur, et ne part jamais tout seul.

   Aucune vidéo ne se télécharge avant d'être à l'écran (preload="none" +
   data-src posé par main.js). Une page de module en porte douze : chargées
   d'emblée, ce serait trente mégaoctets avant la première lecture.
   ══════════════════════════════════════════════════════════════════ */
.vgs{display:grid;gap:1.4rem}
@media(min-width:560px){.vgs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.vgs{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.vgs{grid-template-columns:repeat(4,1fr)}}

.vg{margin:0}
.vg-v{
  width:100%;aspect-ratio:var(--ar,9/16);object-fit:cover;display:block;
  background:#131213;border-radius:3px;
  box-shadow:0 1px 2px rgba(14,13,14,.10),0 8px 22px -8px rgba(14,13,14,.22);
}
.vg figcaption{display:block;margin-top:.7rem}
.vg-n{display:block;font-weight:700;font-size:.95rem;color:var(--ink);letter-spacing:-.01em}
.vg-d{display:block;margin-top:.2rem;font-size:.86rem;color:var(--ink-3);line-height:1.45}
.vg-val{
  display:block;margin-top:.35rem;
  font-family:var(--mono);font-size:.72rem;color:var(--gold);letter-spacing:.01em;
}
/* Sur une page de module, les vignettes sont une preuve, pas un catalogue :
   on allège la légende pour que la grille se lise d'un coup d'œil. */
.vgs--mod .vg-d{display:none}

/* ---------- Le lecteur ---------- */
.lect{margin:0}
.lect video{
  width:100%;aspect-ratio:var(--ar,16/9);display:block;background:#131213;
  border-radius:3px;box-shadow:0 2px 5px rgba(14,13,14,.12),0 18px 40px -14px rgba(14,13,14,.28);
}
.lect--carre{max-width:520px}
/* Le format téléphone : sans plafond, une vidéo 9:16 fait deux écrans
   de haut dans une colonne large. */
.lect--vertical{max-width:330px}
.lect--vertical video{aspect-ratio:9/16}

/* ---------- La liste complète des compétences ---------- */
.cp-g{margin-bottom:2rem}
.cp-g .eyebrow b{color:var(--gold);font-weight:500;margin-left:.3rem}
.cp-l{display:grid;gap:.9rem;border-top:1px solid var(--rule);padding-top:1rem}
@media(min-width:760px){.cp-l{grid-template-columns:repeat(2,1fr);gap:1.1rem 2.4rem}}
.cp{padding-bottom:.9rem;border-bottom:1px solid var(--rule)}
.cp-n{display:block;font-weight:600;font-size:.94rem;color:var(--ink)}
.cp-d{display:block;margin-top:.15rem;font-size:.86rem;color:var(--ink-3);line-height:1.45}
.cp-v{display:block;margin-top:.3rem;font-family:var(--mono);font-size:.72rem;color:var(--gold)}

/* ══════════════════════════════════════════════════════════════════
   L'ACCROCHE — la bande-annonce, seule

   Plus de logo, plus de coque, plus d'inclinaison : la vidéo, son
   bandeau, rien d'autre. Elle démarre d'elle-même avec le son au plus
   bas, et le bouton pour la faire taire est au même endroit et à la
   même taille sur téléphone comme sur ordinateur.
   ══════════════════════════════════════════════════════════════════ */
.hero-film{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.film{position:relative;margin:0;width:100%;max-width:330px}
.film-v{
  width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#131213;
  border-radius:4px;
  box-shadow:0 2px 6px rgba(14,13,14,.14),0 22px 48px -16px rgba(14,13,14,.32);
}
/* Le bouton de son : assez grand pour le pouce, assez discret pour ne
   pas manger l'image. Posé en bas à droite, là où on le cherche. */
.film-son{
  position:absolute;right:.6rem;bottom:.6rem;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .8rem .5rem .6rem;cursor:pointer;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;
  color:var(--paper);background:rgba(14,13,14,.62);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  backdrop-filter:blur(8px);transition:background .2s ease;
}
.film-son:hover{background:rgba(14,13,14,.82)}
.film-son:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.film-ic{
  width:16px;height:16px;flex:none;border-radius:2px;
  background:currentColor;
  /* haut-parleur dessiné en masque : pas d'image à charger */
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;
  --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a6.8 6.8 0 0 1 0 13.4v2.1a8.9 8.9 0 0 0 0-17.6z'/%3E%3C/svg%3E");
}
.film-son[aria-pressed="true"] .film-ic{
  --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 9v6h4l5 4V5L8 9H4zm15.1 3 2.4-2.4-1.1-1.1L18 10.9l-2.4-2.4-1.1 1.1 2.4 2.4-2.4 2.4 1.1 1.1 2.4-2.4 2.4 2.4 1.1-1.1z'/%3E%3C/svg%3E");
}
@media(max-width:560px){
  .film{max-width:280px}
  .film-son{right:.5rem;bottom:.5rem;padding:.55rem .75rem .55rem .55rem}
  .film-lb{display:none}      /* au doigt, l'icône suffit et reste large */
}
@media(prefers-reduced-motion:reduce){.film-v{animation:none}}

/* ══════════════════════════════════════════════════════════════════
   GALERIE PRODUIT — pochette et avant / après
   ══════════════════════════════════════════════════════════════════ */
.gal-vues{position:relative}
.gal-vue{margin:0;display:none}
.gal-vue.is-on{display:block}
.gal-vue--film video{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#131213;
  border-radius:3px;
}
/* La vue verticale : Motion Design n'a pas d'avant / après carré, il a
   des scènes en 9:16. Plafonnée, centrée, et jamais recadrée : une scène
   de motion design rognée ne montre plus sa composition. */
.gal-vue--v video{
  max-width:300px;margin-inline:auto;aspect-ratio:9/16;object-fit:contain;
}
.gal-min{display:flex;gap:.7rem;margin-top:.8rem}
.gal-m{
  flex:1 1 0;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;
  padding:0;border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--ink-3);
}
.gal-m img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;
  outline:1.5px solid transparent;outline-offset:2px;transition:outline-color .15s;
}
.gal-m.is-on{color:var(--ink)}
.gal-m.is-on img{outline-color:var(--ink)}
.gal-m:hover img{outline-color:var(--rule-strong)}
.gal-m:focus-visible img{outline-color:var(--gold)}

/* ══════════════════════════════════════════════════════════════════
   BOUTIQUE — l'avant / après au survol de la pochette
   ══════════════════════════════════════════════════════════════════ */
.tile--film .v{position:relative}
.tile-film{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.tile--film:hover .tile-film,
.tile--film:focus-visible .tile-film{opacity:1}
/* Au doigt il n'y a pas de survol : la vidéo part quand la vignette
   entre dans l'écran, et c'est main.js qui s'en charge. */
.tile-film.is-on{opacity:1}

/* ---------- La vidéo de vente, posée dans la section bibliothèque ---------- */
.lect--large{margin-top:2.2rem}
.lect-lg{
  margin-top:.8rem;font-size:.86rem;color:var(--ink-3);line-height:1.5;max-width:60ch;
}
.lect-lg strong{color:var(--ink)}

/* ---------- Grille mixte 9:16 / 16:9 ----------
   Une horizontale occupe deux colonnes. Sans ça, à côté d'une verticale
   deux fois plus haute que large, elle a l'air d'une chute. */
.vgs{grid-auto-flow:dense}
@media(min-width:560px){.vg--large{grid-column:span 2}}

/* ---------- Le bouton du bandeau de lancement ----------
   Un lien souligné se lit comme une note de bas de page. Celui-ci doit
   se voir : c'est le seul appel à l'action au-dessus de la ligne de
   flottaison, avant même le titre. */
.pm-cta{
  position:relative;
  display:inline-block;padding:.42rem 1rem .42rem 1.9rem;border-radius:999px;
  background:var(--yellow);color:var(--ink)!important;
  font-weight:700;font-size:.86rem;letter-spacing:-.01em;
  text-decoration:none!important;white-space:nowrap;
  transition:transform .15s ease;
  animation:pm-halo 1.8s ease-in-out infinite;
}
/* Le gyrophare. Un point rouge et son onde, à gauche du libellé.
   Un battement toutes les 1,8 s : assez pour attirer l'œil, loin des
   trois clignotements par seconde au-delà desquels on déclenche des
   crises photosensibles (WCAG 2.3.1). */
.pm-cta::before{
  content:"";position:absolute;left:.78rem;top:50%;margin-top:-4px;
  width:8px;height:8px;border-radius:50%;background:#E0241A;
  box-shadow:0 0 0 0 rgba(224,36,26,.75);
  animation:pm-gyro 1.8s ease-out infinite;
}
@keyframes pm-gyro{
  0%  {box-shadow:0 0 0 0 rgba(224,36,26,.75);background:#E0241A}
  55% {box-shadow:0 0 0 9px rgba(224,36,26,0); background:#FF5E52}
  100%{box-shadow:0 0 0 0 rgba(224,36,26,0);  background:#E0241A}
}
@keyframes pm-halo{
  0%,100%{box-shadow:0 0 0 0 rgba(255,233,144,0)}
  55%    {box-shadow:0 0 20px -2px rgba(255,233,144,.70)}
}
/* Au survol on arrête de clignoter : la personne a vu, inutile d'insister. */
.pm-cta:hover{transform:translateY(-1px);animation-play-state:paused;
              box-shadow:0 4px 14px -4px rgba(255,233,144,.55)}
.pm-cta:hover::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .pm-cta,.pm-cta::before{animation:none}
}
.pm-cta:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
@media(max-width:680px){.promo-band .pm-cta{display:inline-block}}

/* Dernières heures : le compteur passe au premier plan. Ce n'est pas un
   artifice — l'échéance est réelle, elle approche vraiment. */
.promo-band.is-urgent .pm-h{
  background:var(--orange);color:var(--paper);font-weight:700;
  animation:pm-bat 2.4s ease-in-out infinite;
}
@keyframes pm-bat{0%,100%{opacity:1}50%{opacity:.72}}
@media(prefers-reduced-motion:reduce){.promo-band.is-urgent .pm-h{animation:none}}

/* ---------- La section tarif : l'argument à gauche, la preuve à droite ---------- */
.tarif{display:grid;gap:2.6rem;margin-top:2rem}
@media(min-width:960px){.tarif{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center}}
.tarif .punch{max-width:30ch}

/* La vidéo de présentation, dans la section « Je l'ai d'abord fait pour moi ».
   Elle n'apparaît que si le fichier existe. */
.lect--pres video{border-radius:3px}

/* ---------- Le liseré orange de l'accroche ----------
   Le même orange que le bandeau « Claude using DaVinci Resolve », avec
   son halo. La vidéo et son étiquette appartiennent ainsi au même objet,
   au lieu de se côtoyer. */
.film{
  border-radius:6px;
  box-shadow:0 0 0 1px rgba(217,119,87,.45),
             0 0 0 5px rgba(217,119,87,.10),
             0 0 42px -6px rgba(217,119,87,.45);
}
.film-v{border-radius:4px}

/* ---------- Le bandeau qui descend ----------
   Au chargement il apparaît au centre de la vidéo, puis rejoint sa place
   sous elle. On ne le voit qu'une fois, à l'arrivée. */
.hero-film .agent{--y:0px; transform:translateY(var(--y))}
.hero-film.is-poser .agent{
  animation:agent-descend 4.4s cubic-bezier(.19,1,.22,1) .3s both,
            agent-lueur   4.4s linear .3s both;
}
/* Il arrive net au centre de la vidéo, tient trois secondes, puis rejoint
   sa place. Le maintien est le temps de lire les quatre mots. */
@keyframes agent-descend{
  0%     {transform:translateY(calc(-50% - var(--mi, 170px))) scale(.70); opacity:0; filter:blur(7px)}
  7%     {transform:translateY(calc(-50% - var(--mi, 170px))) scale(1.20); opacity:1; filter:blur(0)}
  12%    {transform:translateY(calc(-50% - var(--mi, 170px))) scale(.96)}
  16%    {transform:translateY(calc(-50% - var(--mi, 170px))) scale(1.04)}
  20%    {transform:translateY(calc(-50% - var(--mi, 170px))) scale(1)}
  68%    {transform:translateY(calc(-50% - var(--mi, 170px))) scale(1); opacity:1; filter:blur(0)}
  100%   {transform:translateY(0) scale(1); opacity:1; filter:blur(0)}
}
@keyframes agent-lueur{
  0%,4%   {box-shadow:0 0 0 0 rgba(217,119,87,0)}
  8%      {box-shadow:0 0 30px 5px rgba(217,119,87,.55)}
  26%,68% {box-shadow:0 0 15px 0 rgba(217,119,87,.26)}
  100%    {box-shadow:0 0 0 0 rgba(217,119,87,0)}
}
/* L'onde de choc du moment où il apparaît. */
.hero-film .agent::before{
  content:"";position:absolute;inset:-3px;border-radius:999px;
  border:1px solid rgba(217,119,87,.75);opacity:0;pointer-events:none;
}
.hero-film.is-poser .agent::before{animation:agent-onde 1s ease-out .58s 2 both}
@keyframes agent-onde{
  from{transform:scale(1);   opacity:.8}
  to  {transform:scale(1.85);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-film.is-poser .agent,
  .hero-film.is-poser .agent::before{animation:none}
}

/* ---------- Les chiffres du produit ----------
   Tous vérifiables dans la bibliothèque livrée. Aucun n'est estimé. */
.chiffres{
  display:grid;gap:1.4rem 2rem;margin:2.2rem 0 2.6rem;
  padding:1.4rem 0;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule);
}
@media(min-width:620px){.chiffres{grid-template-columns:repeat(4,1fr)}}
.ch-n{
  display:block;font-family:var(--display);font-style:italic;font-weight:900;
  font-size:clamp(2rem,4.4vw,2.9rem);line-height:1;color:var(--ink);letter-spacing:-.02em;
}
.ch-l{display:block;margin-top:.3rem;font-size:.84rem;color:var(--ink-3);line-height:1.35}

/* ---------- Les familles de livrables ---------- */
.vit-f{margin-top:2.6rem}
.vit-t{margin-bottom:1rem}
.vit-t b{color:var(--gold);font-weight:400;margin-left:.4rem;letter-spacing:.02em}

/* ---------- Le logigramme du bloc tarif ----------
   SVG écrit à la main : rien à télécharger, du vrai texte dedans, et il
   suit les couleurs du site. Les tailles sont en unités SVG, donc il se
   met à l'échelle sans jamais devenir illisible. */
/* ══════════════════════════════════════════════════════════════════
   LES LOGIGRAMMES

   En HTML, pas en SVG. Un SVG se met à l'échelle de son conteneur :
   sur un téléphone, ces deux schémas tombaient à huit pixels de corps,
   illisibles. Ici le texte reste du texte — il se recompose, il suit la
   taille de caractère choisie dans le navigateur, et il se sélectionne.
   ══════════════════════════════════════════════════════════════════ */
.logi{margin:0}
.lg{list-style:none;margin:0;padding:0}
.lg-e{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .9rem;
  align-items:start;
  border:1px solid var(--rule-strong);border-radius:3px;
  padding:.85rem 1rem;
}
.lg-e--plat{grid-template-columns:minmax(0,1fr)}
.lg-e--mur{background:rgba(14,13,14,.035)}
.lg-e--or{border:1.5px solid var(--gold);background:rgba(201,162,39,.07)}
.lg-e--v{border-color:#2F7A43}
.lg-e--c{grid-template-columns:minmax(0,1fr);text-align:center}
.lg-k{
  font-family:var(--mono);font-size:.76rem;line-height:1.5;
  color:var(--ink-3);letter-spacing:.06em;white-space:nowrap;
}
.lg-k--or{color:var(--gold)}
.lg-h{margin:0;font-size:1rem;font-weight:700;color:var(--ink);line-height:1.3}
.lg-h--o{color:var(--orange)}
.lg-p{margin:.2rem 0 0;font-size:.88rem;color:var(--ink-3);line-height:1.45}

/* Le plafond : un trait orange en pointillé sous l'étape qui bloque. */
.lg-mk{
  margin:.75rem 0 0;padding-top:.5rem;
  border-top:2px dashed var(--orange);
  font-family:var(--mono);font-size:.68rem;color:var(--orange);letter-spacing:.1em;
}

/* La flèche entre deux étapes : un trait et sa pointe, en CSS. */
.lg-fl{position:relative;height:26px}
.lg-fl::before{
  content:"";position:absolute;left:50%;top:0;bottom:7px;width:1px;
  background:var(--rule-strong);
}
.lg-fl::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:0;height:0;border:5px solid transparent;
  border-top:7px solid var(--rule-strong);border-bottom:0;
}
.lg-duo{display:grid;gap:.7rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:420px){.lg-duo{grid-template-columns:minmax(0,1fr)}}

/* ---------- La chute du logigramme ----------
   Le taux horaire est la conclusion : il s'allume en vert billet, au
   centre, posé sur un halo qui respire. Pas de flèche : une flèche qui
   suit une courbe se décale au moindre changement de largeur, et ça se
   voit tout de suite. */
.lg-som{
  position:relative;margin:1.7rem 0 0;text-align:center;
  font-family:var(--display);font-style:italic;font-weight:900;
  font-size:clamp(1.5rem,6vw,1.95rem);line-height:1.08;
  letter-spacing:-.02em;color:#1F8A4C;
  opacity:0;transform:translateY(8px) scale(.94);
}
.lg-som-p,.lg-som-g{display:block}
.lg-halo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:86%;height:86%;border-radius:999px;background:#1F8A4C;
  filter:blur(16px);opacity:0;z-index:-1;
}
.logi.is-vu .lg-som{animation:lg-allume .55s cubic-bezier(.22,.61,.36,1) .35s forwards}
.logi.is-vu .lg-halo{animation:lg-halo 2.8s ease-in-out .55s infinite}
@keyframes lg-halo{0%,100%{opacity:.10}50%{opacity:.26}}
@keyframes lg-allume{to{opacity:1;transform:translateY(0) scale(1)}}

/* ---------- La pile des couches ----------
   Même vocabulaire, avec une couche dessinée en creux : c'est elle qui
   manque partout, et c'est elle que le skill vient remplir. */
.lc-top,.lc-ko{
  text-align:center;font-family:var(--mono);letter-spacing:.1em;
}
.lc-top{font-size:.7rem;color:var(--orange)}
.lc-ko{margin-top:.2rem;font-size:.72rem;color:var(--ink-3)}
.lc-trou{
  border:1.5px dashed var(--orange);background:rgba(217,119,87,.05);
  animation:lc-respire 2.6s ease-in-out infinite;
}
.lc-q{
  font-family:var(--display);font-style:italic;font-weight:900;
  font-size:2.1rem;line-height:1;color:var(--orange);opacity:.5;
}
@keyframes lc-respire{0%,100%{opacity:1}50%{opacity:.5}}
.lc-plug{margin-top:1.3rem;opacity:0;transform:translateY(10px)}
.logi.is-vu .lc-plug{animation:lg-allume .6s cubic-bezier(.22,.61,.36,1) .5s forwards}

@media(prefers-reduced-motion:reduce){
  .lg-som,.lc-plug{opacity:1;transform:none}
  .lg-halo{opacity:.14}
  .logi.is-vu .lg-som,.logi.is-vu .lg-halo,
  .logi.is-vu .lc-plug,.lc-trou{animation:none}
}

/* ---------- Les secteurs ----------
   Huit encarts au format vertical. Ceux qui n'ont pas encore leur
   exemple affichent un cadre en attente : mieux qu'une image d'illustration
   générique, qui ferait croire à un rendu du skill. */
.secteurs{display:grid;gap:1.2rem}
@media(min-width:520px){.secteurs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:800px){.secteurs{grid-template-columns:repeat(4,1fr)}}
.sec{margin:0}
.sec .vg-v,.sec-vide{
  width:100%;aspect-ratio:var(--ar,9/16);display:block;border-radius:3px;
}
.sec .vg-v{object-fit:cover;background:#131213}
.sec-vide{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed #C7C1B8;background:transparent;
  font-family:var(--mono);font-size:.68rem;color:var(--ink-3);
  letter-spacing:.06em;text-align:center;padding:1rem;
}
.sec figcaption{display:block;margin-top:.6rem}
.sec-n{display:block;font-weight:700;font-size:.92rem;color:var(--ink)}
.sec-d{display:block;margin-top:.15rem;font-size:.8rem;color:var(--ink-3);line-height:1.4}

/* ---------- Le bloc d'offre : la DA du bandeau de lancement ----------
   Même gyrophare, même jaune, pour qu'on reconnaisse l'offre annoncée en
   haut de page au moment où on arrive sur le prix. */
.offre{background:#F4F2EC;border-top:1px solid var(--rule-strong)}
.offre-eye{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.2rem;
  padding:.4rem .9rem .4rem .7rem;border-radius:999px;
  background:var(--ink);color:var(--yellow);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
}
.offre-pt{
  width:8px;height:8px;border-radius:50%;background:#E0241A;flex:none;
  box-shadow:0 0 0 0 rgba(224,36,26,.75);animation:pm-gyro 1.8s ease-out infinite;
}
@media(prefers-reduced-motion:reduce){.offre-pt{animation:none}}
.offre .strike{font-size:clamp(1.6rem,4vw,2.4rem)}
.offre .now{font-size:clamp(4rem,11vw,6.4rem)}

/* ---------- Le fil directeur ----------
   Une phrase entre deux sections, assez grosse pour être lue par
   quelqu'un qui fait défiler vite. C'est ce qui empêche la page de se
   lire comme une suite de blocs sans rapport. */
.fil{padding-block:2.6rem}
.fil-p{
  margin:0;max-width:30ch;
  font-family:var(--display);font-style:italic;font-weight:900;
  text-transform:uppercase;letter-spacing:-.015em;line-height:1.08;
  font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--ink);
}
.fil-p::before{
  content:"";display:block;width:46px;height:3px;background:var(--gold);
  margin-bottom:1.1rem;
}

/* ---------- Les douze, au même format que les secteurs ----------
   Un seul gabarit d'encart sur toute la section : les familles et les
   secteurs se lisent comme une même grille, pas comme deux blocs. */
/* La vitrine n'est pas une grille mais une ligne qui se replie.

   En grille, une famille de six vignettes donnait 4 + 2 et laissait deux
   cases vides à droite ; une famille d'une seule en laissait trois. Et
   une vidéo horizontale, deux fois moins haute qu'une verticale, creusait
   un blanc sous elle quand les deux se retrouvaient sur la même rangée.

   Ici chaque famille annonce son nombre de colonnes (--c, calculé au
   build selon ce qu'elle contient), les largeurs s'en déduisent, et la
   dernière rangée se centre au lieu de laisser un trou sur la droite. */
.vgs--mini{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1.5rem .9rem;--c:2;
}
@media(min-width:720px){ .vgs--mini{--c:3} }
@media(min-width:1000px){ .vgs--mini{--c:4} }
.vgs--mini > .vg{
  flex:0 1 calc((100% - (var(--c) - 1) * .9rem) / var(--c));
  min-width:0;
}
/* Une horizontale vaut deux colonnes, gouttière comprise. */
.vgs--mini > .vg--large{
  flex:0 1 calc(2 * ((100% - (var(--c) - 1) * .9rem) / var(--c)) + .9rem);
}
@media(max-width:999px){
  .vgs--mini > .vg--large{flex:0 1 100%}
}
@media(max-width:719px){
  .vgs--mini{gap:1.1rem .8rem}
}
.vgs--mini .vg-n{font-size:.88rem}
.vgs--mini .vg-d{font-size:.78rem}
.vgs--mini .vg-val{font-size:.68rem}

/* ---------- L'encart d'un secteur ---------- */
.sec-c{position:relative}
.sec-n2{
  position:absolute;right:.5rem;top:.5rem;z-index:2;
  padding:.18rem .45rem;border-radius:999px;
  background:rgba(14,13,14,.62);color:var(--paper);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;
  backdrop-filter:blur(6px);
}
.sec-n2::after{content:" clips"}

/* ---------- La chute, en deux lignes ---------- */
.lg-som--p{font-size:21px}
.lg-som--g{font-size:31px}

/* ══════════════════════════════════════════════════════════════════
   LE TÉLÉPHONE D'ABORD

   La page se lit d'abord sur un écran de 390 pixels. Ce bloc vient en
   dernier pour qu'il gagne sur tout le reste, et il corrige quatre
   choses que le confort de l'écran large masquait :

   1. Les grilles s'empilaient en une seule colonne. Vingt vidéos
      verticales à pleine largeur, c'étaient quinze mille pixels de
      défilement pour une seule section. Elles passent à deux colonnes.
   2. Le titre d'accroche avait un interlignage inférieur à sa hauteur
      de caractère : les lignes se touchaient.
   3. Plus rien ne descend sous onze pixels.
   4. Tout ce qui se touche fait au moins quarante-quatre pixels de
      haut, la largeur d'un pouce.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 719px) {

  /* ---- 1. Deux colonnes plutôt qu'une ---- */
  .vgs,.secteurs,.tiles,.tiles--mod{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .8rem}
  .vg--large{grid-column:span 2}
  /* La valeur technique sous chaque vignette passe à la ligne dix fois
     dans une colonne de 170 px : on la garde pour les écrans larges. */
  .vgs .vg-val{display:none}
  .vg-n{font-size:.9rem;line-height:1.25}
  .vg-d{font-size:.8rem;line-height:1.4}
  .sec-n{font-size:.86rem}
  .sec-d{font-size:.76rem}
  .confiance{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* ---- 2. Les titres respirent ---- */
  .display{line-height:1.02}
  .d1{font-size:clamp(2.05rem,9.5vw,3rem)}
  .d2{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  .d3{font-size:clamp(1.4rem,6vw,1.9rem)}
  /* Le surlignage jaune a besoin d'air pour ne pas se chevaucher. */
  .mk{padding:.04em .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .chute{font-size:clamp(1.45rem,7vw,1.9rem);max-width:none}
  .fil-p{font-size:clamp(1.3rem,6vw,1.7rem);line-height:1.15}
  .punch{font-size:clamp(1.15rem,5vw,1.4rem)}

  /* ---- 3. Le plancher typographique ---- */
  .eyebrow{font-size:.7rem;letter-spacing:.09em}
  .small,.dim,.note,.agent,.cp-d,.cp-v,.ev-q,.lg-p{font-size:.84rem}
  .lg-k,.lc-top,.lc-ko{font-size:.72rem}
  .agent{font-size:.74rem}

  /* ---- 4. Ce qui se touche fait 44 px ---- */
  nav.menu a,footer a,.lect-lien,.gal-o{
    display:inline-flex;align-items:center;min-height:44px;
  }
  nav.menu{gap:.2rem .9rem}
  .pm-cta{min-height:40px;display:inline-flex!important;align-items:center}
  .film-son{min-height:44px;min-width:44px}
  .btn,.btn--lg{min-height:52px;display:inline-flex;align-items:center;justify-content:center}
  .waitlist input{min-height:52px}

  /* ---- Le bandeau collant ne mange pas l'écran ---- */
  .promo-band .wrap{padding-block:.5rem}
  .pm-h{font-size:.8rem;padding:.2rem .5rem}

  /* ---- Les blocs côte à côte s'empilent proprement ---- */
  .avec-enc,.tarif,.split,.vs,.pricing{gap:2rem}
  .enc--9x16{max-width:300px;margin-inline:auto}
  .logi{margin-top:.6rem}
  .lg-e{padding:.8rem .85rem}
  .lg-e--or,.lc-trou{padding:.8rem .85rem}
  /* Une étiquette en toutes lettres (« CE SKILL ») mange la largeur si
     elle reste dans sa colonne : on la pose au-dessus. */
  .lc-plug{grid-template-columns:minmax(0,1fr)}
  .lc-plug .lg-k{margin-bottom:.35rem}

  /* ---- Les sections raccourcissent ---- */
  .s{padding-block:2.6rem}
  .s--tall{padding-block:3.4rem}
  .s--tight{padding-block:1.8rem}
  .fil{padding-block:2rem}
}

/* Les très petits écrans : on descend à une colonne pour les pochettes,
   qui portent un titre, un numéro et un pitch. Les vignettes vidéo, elles,
   restent à deux : ce sont des images, elles se lisent même petites. */
@media (max-width: 379px) {
  .tiles,.tiles--mod{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Une capture d'interface, ouvrable en grand ----------
   Le graphe Fusion est la preuve que rien n'est cuit. Réduit à la largeur
   d'un téléphone il ne se lit plus : on le rend ouvrable, et on le signale
   par une loupe plutôt que par une ligne de texte de plus. */
.enc-ouvrir{display:block;position:relative;text-decoration:none}
.enc-loupe{
  position:absolute;right:.6rem;bottom:.6rem;width:34px;height:34px;
  border-radius:50%;background:rgba(14,13,14,.72);
  border:1px solid rgba(255,255,255,.22);
}
.enc-loupe::before,.enc-loupe::after{content:"";position:absolute;background:#FCFCFB}
.enc-loupe::before{left:9px;top:16px;width:16px;height:1.5px}
.enc-loupe::after{left:16px;top:9px;width:1.5px;height:16px}
.enc-ouvrir:hover .enc-loupe{background:var(--ink)}
.enc-ouvrir:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:719px){
  .enc-loupe{width:40px;height:40px;right:.5rem;bottom:.5rem}
  .enc-loupe::before{left:11px;top:19px;width:18px}
  .enc-loupe::after{left:19px;top:11px;height:18px}
}

/* ---------- La galerie : la barre de filtres ----------
   Deux cent cinquante vidéos sur une page, ça ne se parcourt pas : ça se
   filtre. Les boutons portent leur compte, pour qu'on sache ce qu'on va
   ouvrir avant de cliquer. */
.gf-barre{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin:2.2rem 0 2rem;padding-bottom:1.4rem;
  border-bottom:1px solid var(--rule);
}
.gf{
  display:inline-flex;align-items:center;gap:.45rem;min-height:40px;
  padding:.45rem .9rem;border:1px solid var(--rule-strong);border-radius:999px;
  background:transparent;color:var(--ink-2);cursor:pointer;
  font-family:var(--sans);font-size:.88rem;font-weight:600;letter-spacing:-.01em;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.gf b{
  font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--ink-3);
}
.gf:hover{border-color:var(--ink)}
.gf.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gf.is-on b{color:var(--yellow)}
.gf:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:719px){
  .gf-barre{gap:.4rem;margin:1.6rem 0 1.4rem}
  .gf{min-height:44px;font-size:.82rem;padding:.4rem .75rem}
}

/* ---------- Le carrousel des pochettes ----------
   Pleine largeur, lent, en boucle. La piste porte deux fois la même
   suite et se décale de la moitié de sa largeur : la seconde copie
   arrive pile où la première est partie, donc aucune saccade.

   La marge est sur la pochette, pas en `gap` sur la piste : avec un gap,
   la moitié de la piste tomberait au milieu d'une gouttière et la boucle
   sauterait d'un cran à chaque tour. */
.carr-s{padding-block:1.6rem 2.6rem;overflow:hidden}
.carr-lb{margin:0 0 1rem}
.carr{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.carr-piste{
  display:flex;width:max-content;
  animation:carr 70s linear infinite;
}
.carr-i{
  flex:0 0 232px;margin-right:1.3rem;text-decoration:none;display:block;
}
.carr-i img{
  width:100%;aspect-ratio:4/3;object-fit:contain;display:block;
  transition:transform .25s ease;
}
.carr-n{
  display:block;margin-top:.1rem;text-align:center;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--ink-3);text-transform:uppercase;
}
.carr-n b{color:var(--gold);font-weight:400;margin-right:.3rem}
/* On s'arrête au survol : sinon la pochette qu'on vise se dérobe. */
.carr:hover .carr-piste{animation-play-state:paused}
.carr-i:hover img{transform:translateY(-4px) scale(1.03)}
.carr-i:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@keyframes carr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:719px){
  .carr-s{padding-block:1.2rem 2rem}
  .carr-i{flex:0 0 164px;margin-right:.9rem}
  .carr-n{font-size:.62rem}
}
/* Mouvement réduit : la bande ne défile plus, elle se fait balayer à la
   main. Le défilement horizontal reste possible, rien n'est perdu. */
@media(prefers-reduced-motion:reduce){
  .carr{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .carr-piste{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL · la mise en page d'octobre
   Même charte que le reste du site : papier, encre, surlignage jaune,
   Archivo italique, filets plutôt que boîtes. Seule la disposition change.
   ══════════════════════════════════════════════════════════════════════ */

/* En-tête de l'accueil : le bouton du pack à la place du menu */
nav.menu a.head-cta{display:inline-flex;min-height:0;padding:.55rem .85rem;font-size:.84rem;margin-left:.4rem;
  white-space:nowrap;color:var(--paper);text-decoration:none}
nav.menu a.head-cta:hover{color:var(--paper);text-decoration:none;background:var(--ink-2)}

/* Accroche */
.acc-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;position:relative}
.acc-hero-t{min-width:0}
.acc-h1{max-width:17ch}
.acc-lead{margin:1.2rem 0 0;max-width:40ch}
.acc-cap{display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0 0;max-width:52ch;
  font-size:.86rem;line-height:1.45;color:var(--ink-3)}
.acc-cap::before{content:"";flex:none;width:7px;height:7px;margin-top:.45em;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 3px rgba(255,107,0,.16);animation:acc-rec 1.6s ease-in-out infinite}
.acc-cap strong{color:var(--ink-2)}
@keyframes acc-rec{50%{opacity:.35}}
.acc-cta{margin-top:1.1rem}
.acc-reas{margin:.8rem 0 0;font-family:var(--mono);font-size:.74rem;line-height:1.6;color:var(--ink-3)}
.acc-reas span{white-space:nowrap}

/* La capture des nœuds, avec un liseré orange Resolve */
.acc-screen{margin:0;min-width:0}
.acc-screen-c{display:block;border:2px solid var(--orange);border-radius:6px;overflow:hidden;background:#1b1a1b;
  box-shadow:0 22px 44px -22px rgba(255,107,0,.45),0 2px 6px rgba(14,13,14,.10)}
.acc-screen-c img{display:block;width:100%;height:auto}
.acc-screen figcaption{display:flex;flex-direction:column;align-items:center}
.acc-screen .agent{margin:1rem auto 0}
.acc-screen .acc-cap{margin:.8rem 0 0}

@media (min-width:960px){
  .acc-hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:3.2rem;align-items:center}
  .acc-h1{font-size:clamp(2.4rem,3.8vw,3.4rem)}
}

/* Les sections de l'accueil : un filet au-dessus, comme partout */
.acc-s{border-top:1px solid var(--rule)}

/* Le calcul */
.acc-formule{margin:2rem 0 0;max-width:24ch;font-family:var(--display);font-style:italic;font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.08;font-size:clamp(1.6rem,4.6vw,3rem);color:var(--ink)}
.acc-formule i{font:700 1em/1 var(--sans);font-style:normal;color:var(--gold);padding:0 .1em}
.acc-levs{display:grid;gap:0;margin-top:2.4rem;border-top:1.5px solid var(--rule-strong)}
.acc-lev{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.acc-lev-a{font:700 1.9rem/1 var(--sans);color:var(--gold)}
.acc-lev-h{font-size:clamp(1.4rem,3vw,1.9rem);margin:.5rem 0 0}
.acc-lev p:last-child{margin:.7rem 0 0;max-width:46ch}
.acc-fin{margin:2.2rem 0 0;font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.5rem,3.6vw,2.4rem);color:var(--ink)}
@media (min-width:820px){
  .acc-levs{grid-template-columns:1fr 1fr;column-gap:3rem}
}

/* Comment ça marche */
.acc-how{display:grid;gap:2.4rem;margin-top:2.4rem}
.acc-steps{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--rule-strong)}
.acc-steps li{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--rule)}
.acc-steps h3{margin:0;font-size:1.08rem;color:var(--ink)}
.acc-steps p{margin:.35rem 0 0;font-size:.98rem}
.acc-n{font-family:var(--mono);font-size:.8rem;color:var(--gold);letter-spacing:.04em;padding-top:.2rem}
.acc-film{margin:0}
@media (min-width:900px){ .acc-how{grid-template-columns:.9fr 1.1fr;gap:3.6rem;align-items:center} }

/* Pourquoi pas Claude tout seul */
.acc-why{display:grid;gap:2.4rem}
.acc-pile{display:grid;gap:.5rem;max-width:560px}
.acc-couche{display:grid;grid-template-columns:2.4rem 1fr;gap:.2rem 1rem;padding:1.1rem 1.2rem;
  border:1px solid var(--rule-strong);border-radius:2px;background:var(--paper)}
.acc-couche .acc-n{grid-row:span 2;align-self:center}
.acc-couche b{color:var(--ink);font-size:1.02rem}
.acc-couche span:last-child{font-size:.92rem;color:var(--ink-3)}
.acc-couche--or{background:var(--yellow);border-color:var(--yellow)}
.acc-couche--or .acc-n,.acc-couche--or span:last-child{color:var(--ink-2)}
@media (min-width:900px){
  .acc-why{grid-template-columns:1fr 1fr;gap:4rem;align-items:end}
  .acc-couche--or{transform:translateX(1.2rem)}
}

/* Ce que l'agent a déjà monté : une bande par module.
   Les vidéos sont à hauteur égale et gardent leur format ; sur téléphone
   la bande défile au doigt au lieu d'empiler six grilles. */
.acc-mods{display:grid;gap:3.4rem;margin-top:2.8rem}
.acc-mod-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .9rem;padding-top:1rem;border-top:1.5px solid var(--rule-strong)}
.acc-mod-t{margin:0;font-family:var(--display);font-style:italic;font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(1.35rem,3.2vw,1.9rem);color:var(--ink)}
.acc-star{align-self:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--orange);color:#fff;padding:.3rem .45rem;border-radius:2px}
.acc-mod-c{flex-basis:100%;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.acc-mod-p{margin:.8rem 0 0;max-width:62ch}
.vgs--strip{--h:340px;display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:1.3rem calc(var(--pad) * -1) 0;padding:0 var(--pad) .8rem;scroll-padding-left:var(--pad);scrollbar-width:thin}
.vgs--strip > .vg{flex:0 0 auto;scroll-snap-align:start}
.vgs--strip .vg-v{height:var(--h);width:auto}
.vgs--strip figcaption{width:0;min-width:100%}
.vgs--strip .vg-d{display:none}
.acc-lien{display:inline-block;margin-top:.3rem;font-size:.92rem}
.acc-tot{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.8rem;margin-top:3rem;padding:1.4rem 0;
  border-top:1.5px solid var(--rule-strong);border-bottom:1px solid var(--rule)}
.acc-tot .display{font-size:clamp(1.8rem,4.4vw,3rem)}

/* L'offre */
.acc-off{display:grid;gap:2.6rem;margin-top:2.4rem}
.acc-off-note{margin:.8rem 0 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.acc-garantie{margin-top:1.6rem}
.acc-recu{list-style:none;margin:0;padding:1.2rem 1.2rem;border:1px dashed var(--ink-3);border-radius:2px;
  font-family:var(--mono);font-size:.86rem}
.acc-recu li{display:flex;align-items:baseline;gap:.6rem;padding:.5rem 0;color:var(--ink-2)}
.acc-recu i{flex:1;border-bottom:1px dotted var(--ink-3);transform:translateY(-.25em);opacity:.6}
.acc-recu b{font-weight:500;color:var(--ink)}
.acc-recu-inc span,.acc-recu-inc b{color:var(--ink-3)!important}
.acc-recu-tot{margin-top:.5rem;padding-top:1rem!important;border-top:1px solid var(--rule)}
.acc-recu-tot b{color:var(--ink-3)}
.acc-recu-pack span,.acc-recu-pack b{font-weight:700;color:var(--ink);font-size:1rem}
.acc-recu-pack b{background:var(--yellow);padding:0 .25em}
.acc-inc{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--rule-strong)}
.acc-inc li{padding:.75rem 0 .75rem 1.6rem;border-bottom:1px solid var(--rule);position:relative}
.acc-inc li::before{content:"+";position:absolute;left:.2rem;font-family:var(--mono);color:var(--gold);font-weight:700}
@media (min-width:900px){
  .acc-off{grid-template-columns:1fr 1fr;gap:3rem 4rem}
  .acc-off-inc{grid-column:1/-1}
  .acc-inc{columns:2;column-gap:3rem}
  .acc-inc li{break-inside:avoid}
}

/* Les logos clients sont rangés sous la présentation, dans .founder :
   la règle de la photo (largeur 100 %) ne doit pas les agrandir. */
.founder .clients img{width:auto;max-width:none;height:22px;border-radius:0}

/* Lisibilité des blocs « calcul » et « comment ça marche » :
   intitulés plus grands et plus foncés, texte des étapes à la taille du corps. */
.acc-s .eyebrow{font-size:.8rem;color:var(--ink-2)}
.acc-lev .eyebrow{font-size:.8rem;color:var(--ink-2)}
.acc-lev p:last-child{color:var(--ink);font-size:1.08rem;line-height:1.55}
.acc-steps h3{font-size:1.22rem}
.acc-steps p{font-size:1.06rem;color:var(--ink-2);line-height:1.55}
.acc-steps .acc-n{font-size:.9rem}
.acc-film .acc-cap{font-size:.95rem;color:var(--ink-2)}
.acc-fin{max-width:24ch}

/* Le prix du pack : le barré réel des six modules, puis le prix et l'économie */
.acc-prix-avant{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;margin:0}
.acc-prix-avant span{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.acc-prix-avant s{font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(2.2rem,6vw,3.4rem);
  line-height:1;color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--orange);
  text-decoration-thickness:.11em}
.acc-prix-now{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin:.4rem 0 0}
.acc-prix-now .now{color:var(--ink)}
.acc-eco{display:inline-flex;flex-direction:column;align-items:flex-start;padding:.55rem .8rem .5rem;
  background:var(--yellow);color:var(--ink);transform:rotate(-3deg);
  font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1}
.acc-eco small{font-family:var(--mono);font-style:normal;font-weight:500;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;margin-top:.25rem}
.acc-solo{background:transparent;color:var(--ink);min-height:0;padding:.85rem 1.2rem;font-size:.95rem}
.acc-solo:hover{background:var(--ink);color:var(--paper)}
.acc-ba-s{color:var(--ink-3);text-decoration-color:var(--orange);text-decoration-thickness:2px;font-size:.9em}
nav.menu a.head-gal{display:none}
@media (min-width:760px){ nav.menu a.head-gal{display:inline} }
header .brand img{flex:none}

/* Rythme de la page d'accueil : chaque section s'ouvre sur un filet noir et
   une barre or ; deux fonds papier teinté et une seule rupture sombre. */
.acc-s{border-top:1px solid var(--rule-strong);padding-block:3.6rem}
@media (min-width:900px){ .acc-s{padding-block:5.6rem} }
.acc-s > .wrap > .eyebrow:first-child::before,
.acc-s > .wrap > div > .eyebrow:first-child::before{
  content:"";display:block;width:46px;height:3px;background:var(--gold);margin-bottom:1rem}
.acc-tint{background:#F4F2EC}
.acc-dark{border-top:0}
.acc-dark .eyebrow::before{background:var(--yellow)}
.acc-dark .acc-couche{background:#1b1a1b;border-color:#ffffff2e}
.acc-dark .acc-couche b{color:var(--paper)}
.acc-dark .acc-couche span:last-child{color:#9A959A}
.acc-dark .acc-couche--or{background:var(--yellow);border-color:var(--yellow)}
.acc-dark .acc-couche--or b,.acc-dark .acc-couche--or .acc-n{color:var(--ink)}
.acc-dark .acc-couche--or span:last-child{color:var(--ink-2)}
.acc-dark .acc-n{color:var(--yellow)}
.carr-s{border-top:1px solid var(--rule-strong)}

/* La capture en apesanteur : légèrement tournée, elle flotte doucement */
.acc-screen{perspective:1600px}
.acc-screen-c{transform:rotateY(-6deg) rotateX(3deg);animation:acc-flotte 7s ease-in-out infinite;
  box-shadow:0 46px 60px -34px rgba(14,13,14,.45),0 22px 44px -22px rgba(255,107,0,.40),0 2px 6px rgba(14,13,14,.10)}
@keyframes acc-flotte{
  0%,100%{transform:rotateY(-6deg) rotateX(3deg) translateY(0)}
  50%    {transform:rotateY(-4deg) rotateX(2deg) translateY(-12px)}
}
@media (min-width:960px){
  .acc-screen{margin-right:calc(var(--pad) * -.5)}
  .acc-screen-c{transform:rotateY(-10deg) rotateX(4deg);animation-name:acc-flotte-l}
  @keyframes acc-flotte-l{
    0%,100%{transform:rotateY(-10deg) rotateX(4deg) translateY(0)}
    50%    {transform:rotateY(-8deg) rotateX(3deg) translateY(-14px)}
  }
}
@media (prefers-reduced-motion:reduce){ .acc-screen-c{animation:none} }

/* Pour qui, et les questions dépliables */
.acc-fit{display:grid;gap:2rem;margin-top:2.2rem}
.acc-fit h3{margin:0 0 .4rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.acc-fit ul{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--rule-strong)}
.acc-fit li{padding:.7rem 0;border-bottom:1px solid var(--rule);font-size:.98rem}
.acc-fit-no li{color:var(--ink-3)}
.acc-fit-no h3{color:var(--ink-3)}
@media (min-width:820px){ .acc-fit{grid-template-columns:1fr 1fr;gap:3.4rem} }
.acc-faq{margin-top:1.6rem;border-top:1.5px solid var(--rule-strong)}
.acc-faq details{border-bottom:1px solid var(--rule)}
.acc-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;
  padding:1.1rem 0;font-weight:600;color:var(--ink);font-size:1.02rem}
.acc-faq summary::-webkit-details-marker{display:none}
.acc-faq summary::after{content:"+";flex:none;font-family:var(--mono);font-weight:500;color:var(--gold);font-size:1.2rem;line-height:1}
.acc-faq details[open] summary::after{content:"−"}
.acc-faq p{margin:0 0 1.2rem;max-width:66ch}

.acc-final{border-top:1px solid var(--rule)}
.acc-final .display{max-width:16ch}

@media (max-width:719px){
  .vgs--strip{--h:270px}
  .vgs--strip .vg-val{display:none}
  .acc-mod-h{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){ .acc-cap::before{animation:none} }


/* ══════════════════════════════════════════════════════════════════════
   L'OFFRE D'OUVERTURE · 48 H
   Une urgence réelle, sur une échéance réelle : tout disparaît à BONUS_FIN.
   ══════════════════════════════════════════════════════════════════════ */
html.urg-pre .pm-live{display:none}
html:not(.urg-pre) .pm-pre{display:none}
.urg-pt{display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF3B30;flex:none;
  box-shadow:0 0 0 0 rgba(255,59,48,.6);animation:urg-bat 1.4s ease-out infinite}
@keyframes urg-bat{0%{box-shadow:0 0 0 0 rgba(255,59,48,.6)}70%{box-shadow:0 0 0 9px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

/* Le bandeau */
.promo-band.urg{background:var(--ink);color:var(--paper)}
.promo-band.urg .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem 1rem;
  padding-block:.7rem;text-align:center}
.urg .pm-t{font-family:var(--mono);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--yellow);font-weight:700}
.urg .pm-c{color:#E9E6E9}
.urg .pm-c s{color:#8F8A8F;margin-left:.2rem}
.urg .pm-h{font-family:var(--mono);font-weight:700;background:var(--yellow);color:var(--ink);padding:.28rem .65rem;border-radius:2px}
.urg .pm-cta{color:var(--ink)!important;background:var(--paper);padding:.3rem .8rem;border-radius:2px;font-weight:600;text-decoration:none}
.urg.is-urgent .pm-h{background:#FF3B30;color:#fff}

/* La pastille au-dessus du bouton de l'accroche */
.urg-chip{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 .9rem;padding:.55rem .85rem;
  background:var(--ink);color:var(--paper);border-radius:2px;font-size:.9rem;font-weight:600}
.urg-chip b{font-family:var(--mono);color:var(--yellow);font-weight:700;letter-spacing:.02em}
.acc-cta{display:flex;flex-direction:column;align-items:flex-start}

/* Le bloc « Spécial 48 h » de l'offre */
.acc-urg{margin:0 0 1.8rem;padding:1.3rem 1.3rem 1.2rem;background:var(--ink);color:var(--paper);border-radius:3px;
  box-shadow:0 18px 40px -22px rgba(14,13,14,.55)}
.acc-urg-t{display:flex;align-items:center;gap:.6rem;margin:0;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--yellow);font-weight:700}
.acc-urg-cpt{display:flex;gap:.5rem;margin:1rem 0 0}
.acc-urg-cpt span{display:flex;flex-direction:column;align-items:center;min-width:4.4rem;padding:.6rem .5rem .5rem;
  background:#ffffff14;border-radius:3px}
.acc-urg-cpt b{font-family:var(--display);font-style:italic;font-weight:900;font-size:2.6rem;line-height:1;color:var(--paper)}
.acc-urg-cpt small{margin-top:.3rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#9A959A}
.acc-urg-p{margin:1rem 0 0;color:#CFCCCF;font-size:.98rem;line-height:1.5}
.acc-urg-p strong{color:var(--yellow)}

/* Le reçu, le dernier appel, la barre d'achat */
.acc-recu-bonus span,.acc-recu-bonus b{color:var(--ink)!important;font-weight:700}
.acc-recu-bonus b s{color:var(--ink-3);font-weight:400;margin-right:.3rem}
.acc-fin-urg{margin:1.4rem 0 0;font-size:1.05rem;color:var(--ink-2)}
.acc-fin-urg b{font-family:var(--mono);color:var(--ink);background:var(--yellow);padding:.1rem .4rem}
.acc-ba-cpt{display:flex;flex-direction:column;line-height:1.15;font-family:var(--mono);font-size:.68rem;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em}
.acc-ba-cpt b{font-size:.95rem;color:#E0301E;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){ .urg-pt{animation:none} }

/* Corrections du bandeau d'ouverture : rien de barré sauf la valeur,
   et sur téléphone deux lignes compactes qui ne restent pas collées en haut
   (la barre d'achat du bas porte déjà le compteur). */
.urg .pm-c strong{color:#E9E6E9;text-decoration:none}
.urg .pm-cta{padding:.3rem .8rem .3rem 1.6rem}
@media (max-width:680px){
  .promo-band.urg{position:relative;top:auto}
  .promo-band.urg .wrap{gap:.3rem .7rem;padding-block:.55rem}
  .promo-band.urg .pm-cta{display:none!important}
  .urg .pm-t{font-size:.7rem}
  .urg .pm-c{font-size:.78rem}
}


/* ══════════════════════════════════════════════════════════════════════
   LES LANGUES
   ══════════════════════════════════════════════════════════════════════ */
.langues{position:relative}
.langues summary{list-style:none;cursor:pointer;font-weight:600;color:var(--ink);padding:.3rem .2rem}
.langues summary::-webkit-details-marker{display:none}
.langues summary::after{content:"▾";margin-left:.3rem;font-size:.75em;color:var(--ink-3)}
.langues-l{position:absolute;right:0;top:calc(100% + .4rem);z-index:60;min-width:11rem;padding:.4rem;
  background:var(--paper);border:1px solid var(--rule-strong);border-radius:2px;box-shadow:0 14px 30px -12px rgba(14,13,14,.35)}
nav.menu .langues-l a{display:flex;gap:.6rem;padding:.45rem .6rem;border-radius:2px;color:var(--ink-2);white-space:nowrap}
nav.menu .langues-l a:hover{background:#F4F2EC;text-decoration:none}
.langues-l a b{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);width:1.6rem}
.langues-l a[aria-current] b{color:var(--orange)}

/* Japonais et coréen : Archivo n'a pas ces écritures. Les titres passent
   dans une grotesque du système, droite (une italique synthétique sur des
   idéogrammes est illisible), et les lignes se coupent entre les mots. */
html:lang(ja) body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",var(--sans)}
html:lang(ko) body{font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",var(--sans)}
html:lang(ja) .display,html:lang(ko) .display,
html:lang(ja) .acc-formule,html:lang(ko) .acc-formule,
html:lang(ja) .acc-fin,html:lang(ko) .acc-fin,
html:lang(ja) .acc-mod-t,html:lang(ko) .acc-mod-t{
  font-family:inherit;font-style:normal;font-weight:800;letter-spacing:0;line-height:1.25}
html:lang(ja) .display,html:lang(ja) p,html:lang(ja) li{word-break:auto-phrase;line-break:strict}
html:lang(ko) .display,html:lang(ko) p,html:lang(ko) li{word-break:keep-all}

/* Une colonne de grille ne doit jamais s'élargir sur son contenu : en
   japonais une phrase entière peut être insécable et pousser la page hors
   de l'écran. */
.acc-lev{grid-template-columns:2.6rem minmax(0,1fr)}
.acc-steps li{grid-template-columns:2.6rem minmax(0,1fr)}
.acc-couche{grid-template-columns:2.4rem minmax(0,1fr)}
.acc-lev > div,.acc-steps li > div{min-width:0}

/* ══════════════════════════════════════════════════════════════════════
   APERÇUS ANIMÉS
   assets/js/anim.js (repris de la bibliothèque du kit) dessine les
   compétences sans vidéo dans un <canvas>. Il lit ces couleurs sur :root :
   ce sont celles de la charte, rien de nouveau à l'écran.
   ══════════════════════════════════════════════════════════════════════ */
:root{--bg:#FCFCFB;--muted:#6E6B6E;--line:#E3E1DD;--surface:#F3F2EE;--card:#FFFFFF;
  --hl:#FFE990;--on-hl:#0E0D0E;--accent:#FF6B00;--thumb:#E9E7E2}
.vg-a{background:var(--thumb)}
/* Dans les bandes de l'accueil, une vignette horizontale à la hauteur d'une
   verticale ferait 600 px de large : on la ramène à 62 % de la hauteur. */
.vgs--strip{align-items:flex-start}
.vgs--strip > .vg--large .vg-v{height:calc(var(--h) * .62)}
/* Sur une page module, un aperçu animé horizontal tient dans une colonne :
   sur deux, douze schémas feraient six rangées géantes. */
@media(min-width:560px){.vgs--mod > .vg--anim{grid-column:auto}}
/* Une bande de vignettes défile dans son module : sans min-width:0, l'article
   (élément de grille) prenait la largeur de toute la bande et la page entière
   débordait sur téléphone. */
.acc-mods > .acc-mod{min-width:0}

/* ══════════════════════════════════════════════════════════════════════
   GUIDE D'INSTALLATION  (/installation/)
   ══════════════════════════════════════════════════════════════════════ */
.inst-avant{margin:1.2rem 0 0;padding-left:1.2rem;line-height:1.6}
.inst-avant li{margin:.35rem 0}
.inst-etape{border-top:1px solid var(--rule)}
.inst-etape p{max-width:62ch}
.inst-fig{margin:1.6rem 0}
.inst-fig img{display:block;width:100%;height:auto;border-radius:8px;
  box-shadow:0 1px 2px rgba(14,13,14,.10),0 10px 26px -10px rgba(14,13,14,.30)}
.inst-fig--etroit{max-width:420px}
.inst-fig figcaption{margin-top:.6rem;font-size:.86rem;color:var(--ink-3);line-height:1.45}
.inst-code code{display:inline-block;font-family:var(--mono);font-size:1rem;color:var(--ink);
  background:var(--yellow);padding:.45rem .8rem;border-radius:4px}
.inst-liste{margin:1rem 0 0;padding-left:1.3rem;line-height:1.55;max-width:62ch}
.inst-liste li{margin:.45rem 0}
.inst-etape code,.inst-avant code{font-family:var(--mono);font-size:.88em}

/* Motion Design & 3D a deux bandes sur l'accueil : chacune porte un petit titre. */
.acc-bande-t{margin:1.6rem 0 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
.acc-bande-t + .vgs--strip{margin-top:.7rem}