@charset "UTF-8";
/* ==========================================================================
   OptoLead - V26_free-plan
   CSS extrait tel quel des blocs <style> du HTML, dans leur ordre d origine.
   ========================================================================== */

/* ---------- bloc 1  <style id="v23-fix-critical"> ---------- */
.nav-burger{ display:none; }
.mobile-menu{ display:none; }
.mobile-menu__logo{ width:30px; height:30px; }
/* aucun logo ne peut deborder de sa boite, quoi qu'il arrive */
.logo-img,
.mobile-menu__logo,
#promesse-app .contact-logo img{ max-width:100%; max-height:100%; }

/* ---------- bloc 2  <style> ---------- */
  /* --- Si tu as le vrai fichier Google Sans, décommente et ajuste le nom ---
  @font-face {
    font-family: "Google Sans";
    src: url("GoogleSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
  }
  ------------------------------------------------------------------------- */
  /* ---- Police de signature (OptoLead) ----
     "Qwigley" (OFL, Google Fonts) : manuscrit fin et très penché, esprit
     stylo proche de la signature de référence "davies". Sous-ensemble réduit
     aux lettres de "OptoLead" puis encodé en base64 -> site 100% autonome,
     aucune requête réseau (~1.6 Ko). */
  @font-face {
    font-family: "OptoLead Signature";
    src: url("fonts/optolead-signature.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  /* ====================== Variables & reset ====================== */
  :root {
    --green: #21c24a;
    --yellow: #d9d617;
    --bg: #050605;
    --fg: #f3f5f2;
    --muted: #8c918b;
    --pad: clamp(20px, 4vw, 46px);
    /* [V23] verrou de thème : la page est sombre, point.
       Le navigateur n'a plus à « adapter » quoi que ce soit. */
    color-scheme: dark;
  }
  /* [V23] ---- LOGO : couleurs figées, quel que soit le thème ----
     Trois garde-fous cumulés, car les navigateurs n'utilisent pas tous le
     même mécanisme pour forcer un mode clair/sombre :
      1) forced-color-adjust  -> ignore le mode contraste élevé de Windows ;
      2) filter:none          -> annule tout filtre d'inversion injecté ;
      3) mix-blend-mode:normal-> empêche un fond clair de teinter le sigle.
     Le logo rend donc EXACTEMENT les mêmes couleurs partout. */
  .logo-img,
  .mobile-menu__logo,
  #panel1-anim .pa1-logo-orb img,
  #panel2-anim .pa2-logo-orb img,
  #promesse-app .contact-logo img {
    forced-color-adjust: none;
    -webkit-filter: none !important;
            filter: none !important;
    mix-blend-mode: normal !important;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { height: 100%; }
  html { scroll-behavior: auto; }   /* le smooth est géré en JS (glissade) */
  html, body { overscroll-behavior: none; }  /* [scroll-tuning] pas de rebond de chaîne aux bords */
  body {
    min-height: 100%;
    background: var(--bg);
    color: var(--fg);
    font-family: "Helvetica Neue", Arial, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* ====================== Animations d'apparition (au chargement) ====================== */
  /* 1) Wordmark OPTOLEAD : fondu + légère montée, un peu plus lent */
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(48px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* 2) Bloc texte (paragraphe + bouton) : arrive de la DROITE vers la gauche */
  @keyframes slide-from-right {
    from { opacity: 0; transform: translateX(70px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  /* 3) Logo : arrive de la GAUCHE vers la droite, bien plus lentement */
  @keyframes slide-from-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* état initial : invisible avant le déclenchement */
  .anim-up, .anim-right, .anim-left {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* déclenchement quand <body> reçoit .loaded */
  /* courbe ease-out douce, commune à toutes les apparitions */
  body.loaded .anim-up {
    /* wordmark : ~0,8s (un peu plus lent qu'avant) */
    animation: fade-up 0.8s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
  }
  body.loaded .anim-right {
    /* texte + bouton : légèrement plus lent que le wordmark */
    animation: slide-from-right 0.95s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
  }
  body.loaded .anim-left {
    /* logo : bien plus lent, toujours fluide */
    animation: slide-from-left 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }

  /* ====================== Section hero ====================== */
  .hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background:
      radial-gradient(120% 90% at 50% 75%, rgba(33,194,74,0.05), transparent 60%),
      var(--bg);
  }

  /* terrain animé — vidéo de fond */
  #terrain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* remplit l'écran sans déformer */
    display: block;
    z-index: 0;
    opacity: 0.95;
  }

  /* ---- barre du haut (fixée : suit l'utilisateur sur toute la page) ---- */
  .topbar {
    position: fixed;            /* reste collée en haut pendant tout le défilement */
    top: 0; left: 0; right: 0;
    z-index: 40;                /* au-dessus du contenu, sous le menu plein écran (z:20 -> on relève le menu plus bas) */
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;        /* centré verticalement dans la barre */
    gap: clamp(16px, 4vw, 60px);
    padding: 18px var(--pad);
    /* fond transparent par défaut (sur le Hero), puis voile sombre flouté au scroll */
    background: transparent;
    transition: background .35s ease, backdrop-filter .35s ease,
                box-shadow .35s ease, padding .35s ease;
  }
  /* quand on a quitté le Hero : voile sombre + flou pour rester lisible sur les
     panneaux clairs (Image 1->4) et les sections suivantes. Classe ajoutée en JS. */
  .topbar.is-scrolled {
    background: rgba(5, 6, 5, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
            backdrop-filter: blur(14px) saturate(1.1);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.35);
    padding: 12px var(--pad);   /* barre légèrement plus compacte une fois figée */
  }
  .topbar__logo { width: 84px; height: 84px; }

  .logo-img {
    width: 100%; height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 18px;
    position: relative;
    z-index: 2;                 /* le logo reste au-dessus de l'anneau */
  }

  .topbar__logo { position: relative; }

  .nav {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 2vw, 30px);
    padding-top: 6px;
    align-items: baseline;
  }
  .nav__link {
    color: var(--fg);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color .25s, opacity .25s;
    opacity: .92;
  }
  .nav__link:hover { color: var(--green); }
  .nav__num { color: var(--muted); font-size: 9px; vertical-align: super; font-weight: 600; }

/* ============================================================
   [MEGA] MENUS DEROULANTS — Services et Tarifs.
   Un panneau descend sous la barre, RECOUVRE la page (il ne la
   pousse pas), et se lit en deux temps : a gauche l'accroche de
   la section et son bouton, a droite les sous-rubriques.

   Contrainte respectee : la mise en page de la barre a 1920px ne
   bouge pas. Le chevron est dans le lien, la pastille de survol
   est un ::before en marges negatives (hors flux), et les
   panneaux sont en position:absolute (pas de colonne de grille
   supplementaire).
   ============================================================ */
  .nav__link--mega {
    position: relative;
    display: inline-flex; align-items: baseline; gap: 7px;
  }
  /* la pastille : posee DERRIERE le texte, sans occuper de place */
  .nav__link--mega::before {
    content: "";
    position: absolute; inset: -9px -15px;
    border-radius: 999px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.08);
    opacity: 0; transform: scale(.94);
    transition: opacity .26s ease, transform .3s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }
  .nav__link--mega.is-open::before { opacity: 1; transform: scale(1); }
  .nav__link--mega.is-open { color: var(--green); }
  .nav__chev {
    width: 11px; height: 11px;
    flex: 0 0 auto; align-self: center;
    fill: none; stroke: currentColor; stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: .7;
    transition: transform .34s cubic-bezier(.2,.7,.2,1), opacity .26s ease;
  }
  .nav__link--mega:hover .nav__chev { opacity: 1; }
  .nav__link--mega.is-open .nav__chev { transform: rotate(180deg); opacity: 1; }

  /* ---- le panneau ----
     Il va d'un BORD A L'AUTRE et porte lui-meme le fond, la bordure basse
     et les coins arrondis. Auparavant c'etait .mega__inner qui les portait,
     en retrait des gouttieres : le panneau se lisait alors comme une boite
     posee SOUS la barre — filet visible sur son arete haute, et le Hero qui
     transparaissait entre les deux. Il se deroule desormais depuis la
     barre, sans couture. */
  .mega {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 5;
    background: rgba(8,10,8,.93);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
            backdrop-filter: blur(20px) saturate(1.15);
    border-bottom: 1px solid rgba(255,255,255,.09);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 34px 80px -34px rgba(0,0,0,.85);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .26s ease,
                transform .34s cubic-bezier(.2,.7,.2,1),
                visibility 0s linear .34s;
  }
  .mega.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity .26s ease, transform .34s cubic-bezier(.2,.7,.2,1);
  }
  /* .mega__inner ne fait plus que centrer le contenu, sur la meme
     gouttiere que la barre du haut : les colonnes du panneau tombent
     exactement sous celles de la navigation. */
  .mega__inner {
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    gap: clamp(24px, 2.8vw, 48px);
    max-width: 1500px; margin: 0 auto;
    padding: 30px var(--pad) 34px;
  }

  /* Panneau ouvert : la barre prend le MEME voile que lui, meme tout en
     haut de la page ou elle est normalement transparente, et son filet de
     separation s'efface. Sans cela, le panneau flottait sous une barre qui
     laissait voir le Hero au travers, et le filet du bas de barre coupait
     la jonction en deux — le « truc bizarre » visible en haut de page. */
  .topbar.has-mega {
    background: rgba(8,10,8,.93);
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
            backdrop-filter: blur(20px) saturate(1.15);
    box-shadow: none;
  }

  /* ---- colonne gauche : l'accroche de la section ---- */
  .mega__eyebrow {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 14px;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted);
  }
  .mega__eyebrow span { color: var(--green); }
  .mega__claim {
    margin: 0 0 16px;
    font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(19px, 1.45vw, 23px); font-weight: 500;
    line-height: 1.16; letter-spacing: -0.02em;
    color: var(--fg);
  }
  .mega__claim em { font-style: normal; color: var(--green); }
  .mega__all {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
    color: #e6e6e6; text-decoration: none;
    font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    transition: color .25s ease, border-color .3s ease, background .3s ease;
  }
  .mega__all:hover {
    color: #fff; border-color: rgba(39,214,81,.5); background: rgba(39,214,81,.08);
  }
  .mega__arw {
    width: 14px; height: 14px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .25s ease;
  }
  .mega__all:hover .mega__arw { transform: translateX(4px); }

  /* ---- colonne droite : les sous-rubriques, derriere un filet ---- */
  .mega__list {
    border-left: 1px solid rgba(255,255,255,.09);
    padding-left: clamp(20px, 2.4vw, 42px);
  }
  .mega__label {
    margin: 0 0 12px;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
    color: #6e736d;
  }
  .mega__link {
    position: relative;
    display: flex; align-items: flex-start; gap: 13px;
    padding: 7px 14px 7px 12px;
    margin-left: -12px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .25s ease;
  }
  .mega__link:hover { background: rgba(255,255,255,.05); }
  .mega__ic {
    width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto;
    fill: none; stroke: var(--green); stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: .85;
    transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .mega__link:hover .mega__ic { opacity: 1; transform: translateX(2px); }
  .mega__t {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 13.8px; font-weight: 500; color: var(--fg); line-height: 1.25;
    transition: color .25s ease;
  }
  .mega__link:hover .mega__t { color: #fff; }
  .mega__t em {
    font-style: normal; font-size: 11.5px; font-weight: 400;
    color: #83887f; line-height: 1.3;
  }
  .mega__link:focus-visible {
    outline: 2px solid var(--green); outline-offset: 2px;
  }

  /* ---- cascade d'apparition : le panneau d'abord, son contenu ensuite ---- */
  .mega__side, .mega__label, .mega__link {
    opacity: 0; transform: translateY(7px);
    transition: opacity .34s ease, transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .mega.is-open .mega__side,
  .mega.is-open .mega__label,
  .mega.is-open .mega__link { opacity: 1; transform: none; }
  .mega.is-open .mega__side  { transition-delay: .05s; }
  .mega.is-open .mega__label { transition-delay: .09s; }
  .mega.is-open .mega__link:nth-of-type(1) { transition-delay: .13s; }
  .mega.is-open .mega__link:nth-of-type(2) { transition-delay: .17s; }
  .mega.is-open .mega__link:nth-of-type(3) { transition-delay: .21s; }
  .mega.is-open .mega__link:nth-of-type(4) { transition-delay: .25s; }
  .mega.is-open .mega__link:nth-of-type(5) { transition-delay: .29s; }

  @media (prefers-reduced-motion: reduce) {
    .mega, .mega__side, .mega__label, .mega__link,
    .nav__chev, .nav__link--mega::before {
      transition-duration: .01ms !important; transition-delay: 0s !important;
    }
    .mega__side, .mega__label, .mega__link { transform: none; }
  }

  .topbar__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    white-space: nowrap;
  }
  .topbar__mail { font-size: 13px; letter-spacing: .05em; font-weight: 600; }
  .topbar__time { font-size: 13px; letter-spacing: .05em; color: var(--muted); font-weight: 600; }

  /* ---- Connexion : sorti de la nav, placé à droite dans la barre,
     juste à gauche du bloc e-mail + heure. La grille de .topbar
     réservait déjà une 4e colonne (auto 1fr auto auto) et centre
     verticalement ses cellules : le lien se cale donc de lui-même
     en face des deux lignes du bloc, sans toucher à la structure.
     Habillage repris du CTA du Hero (.cta) : même contour, même
     voile qui monte du bas en blanc puis vire au vert, mêmes
     durées — à l'échelle de la barre, et en ovale (pilule). */
  .topbar__login {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    border: 1px solid #3a423a;      /* même contour que les CTA du site */
    color: var(--fg);
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 11px 22px;
    border-radius: 999px;           /* ovale : pilule parfaite */
    white-space: nowrap;
    transition: color .25s ease, border-color .35s ease;
    z-index: 0;
  }
  /* le voile qui monte par le bas : blanc -> vert (identique au CTA) */
  .topbar__login::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 0;                      /* monte au survol */
    background: #ffffff;            /* commence blanc */
    z-index: -1;
    transition: height .35s ease, background .35s ease .12s;
  }
  .topbar__login:hover,
  .topbar__login:focus-visible {
    color: #04140a;
    border-color: var(--green);
  }
  .topbar__login:hover::before,
  .topbar__login:focus-visible::before {
    height: 100%;                   /* remplit tout, du bas vers le haut */
    background: var(--green);       /* vire au vert (léger délai) */
  }
  .topbar__login:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
  }
  /* le chevron : avance d'un cran au survol (transform seul = GPU) */
  .topbar__login .chev {
    display: inline-block;
    transform: translateX(0);
    transition: transform .28s cubic-bezier(0.16, 0.84, 0.3, 1);
  }
  .topbar__login:hover .chev,
  .topbar__login:focus-visible .chev { transform: translateX(4px); }
  @media (prefers-reduced-motion: reduce) {
    .topbar__login .chev { transition: none; }
    .topbar__login::before { transition: background .15s ease; }
  }

  /* ---- contenu hero ---- */
  .hero {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    padding: 0 var(--pad) clamp(24px, 4vh, 50px);
  }
  .hero a { pointer-events: auto; }

  .hero__status {
    position: absolute;
    right: var(--pad);
    top: 40%;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 600; letter-spacing: .08em;
  }
  .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 10px var(--green);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

  .hero__year {
    position: absolute;
    right: var(--pad);
    top: calc(40% - 18px);
    font-size: 13px; color: var(--muted); font-weight: 600;
  }
  .hero__year span { color: var(--green); }

  /* [V23] Le bandeau défilant a été retiré : les ~130 px qu'il occupait en
     bas de l'écran sont rendus au Hero. Le bloc descend donc franchement
     (180 px -> ~64 px du bas) et se compacte un peu : l'orbite récupère
     toute la hauteur centrale, sans que rien ne vienne la border. */
  .hero__bottom {
    position: absolute;
    left: 0; right: 0; bottom: clamp(30px, 5.5vh, 64px);
    padding: 0 var(--pad);
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 40px;
  }
  .wordmark {
    font-family: "Google Sans", "Poppins", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(46px, 11.4vw, 158px);   /* [V23] resserré : moins de hauteur prise */
    line-height: 0.82;
    font-weight: 500;            /* Google Sans Medium (au lieu de Bold) */
    letter-spacing: -0.02em;
    color: var(--fg);
    text-transform: uppercase;
  }
  .wordmark span { color: var(--green); }

  .hero__right {
    /* [AFFICHAGE] 440 -> 480px : a 440 l'accroche debordait sur une
       troisieme ligne pour un seul mot. La marge droite est un clamp,
       elle absorbe les 40px sans rien decaler d'autre. */
    max-width: 480px;
    flex-shrink: 0;
    margin-right: clamp(40px, 9vw, 170px);  /* décalé vers la gauche, loin du bord droit */
  }
  .hero__copy {
    /* [V23] légèrement resserré (20/30 -> 18.5/27) : le bloc de droite perd
       une dizaine de pixels de hauteur, l'orbite en profite. */
    font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
    font-size: 18.5px;
    line-height: 27px;
    font-weight: 500;
    margin-bottom: 24px;
    color: #e9ece8;
  }
  .cta {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 1px solid #3a423a;
    color: var(--fg); text-decoration: none;
    font-weight: 700; font-size: 15px; letter-spacing: .1em;
    text-transform: uppercase; padding: 19px 36px;   /* bouton plus grand */
    border-radius: 10px;           /* coins un peu plus arrondis */
    transition: color .25s ease, border-color .35s ease;
    z-index: 0;
  }
  /* le voile qui monte par le bas : blanc -> vert */
  .cta::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 0;                     /* monte au survol */
    background: #ffffff;           /* commence blanc */
    z-index: -1;
    transition: height .35s ease, background .35s ease .12s;
  }
  .cta:hover {
    color: #04140a;
    border-color: var(--green);
  }
  .cta:hover::before {
    height: 100%;                  /* remplit tout, du bas vers le haut */
    background: var(--green);      /* vire au vert (léger délai) */
  }

  /* ---- [V23] bandeau défilant (marquee) : SUPPRIMÉ ----
     Retiré du site sur les deux formats (il ne l'était que sur mobile).
     Tout le CSS associé — .marquee*, les globes SVG et leurs keyframes
     globeSpin / marquee — a été retiré avec lui : plus une seule règle
     ni une seule animation ne tourne pour un élément qui n'existe plus. */

  /* ===================== Panneaux d'images empilés ===================== */
  .panels {
    position: relative;
    background: var(--bg);
  }
  .panel {
    position: sticky;       /* par défaut : se colle en haut */
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* panel1 : reste collé, panel2 glisse PAR-DESSUS */
  #panel1 { z-index: 1; }
  /* panel2 : NON collé -> il défile vers le haut et révèle panel3 en dessous */
  #panel2 { position: relative; z-index: 2; }
  /* panel3 : démonstration scroll-telling (longue section, scène sticky interne).
     Son rétrécissement final est piloté par la timeline GSAP de la démo. */
  #panel3 { z-index: 3; }
  /* Fond NOIR OPAQUE garanti sur les panels image : ils recouvrent en
     permanence l'animation du panel1 (sinon elle transparaît sur les côtés,
     surtout quand l'image rétrécit). Le noir se fond avec l'arrière-plan. */
  #panel2, #panel3 { background: #000; }
  /* Le rétrécissement/assombrissement porte sur l'IMAGE, pas sur le panel :
     le panel garde son cadre plein écran noir, seule l'image bouge dedans. */
  #panel3 .panel__img {
    transition: none;
    transform-origin: center center;
    will-change: transform, filter;
  }

  .panel__img {
    width: 100%;
    height: 100%;
    object-fit: contain;    /* image entière, format d'origine, bordures noires sur les côtés */
    display: block;
  }

  /* ===================== Carré de progression (bas droite) ===================== */
  .progress-corner {
    position: fixed;
    right: clamp(18px, 2.5vw, 34px);
    bottom: clamp(18px, 2.5vw, 34px);
    width: 64px; height: 64px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 30;
    opacity: 0;                       /* caché tant qu'on n'a pas scrollé */
    transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease;
  }
  .progress-corner.show { opacity: 1; transform: translateY(0); }
  .progress-corner__svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);        /* départ du tracé en haut-gauche, sens horaire */
    overflow: visible;
  }
  .progress-corner__arrow {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--green);
    pointer-events: none;
  }

  /* ===================== Section : Le Processus ===================== */
  .panels__tail { height: 0; }

  /* ===================== Section : À propos ===================== */
  /* Fond noir + grand arc vert (bord lumineux d'un globe sombre), calé sur la
     vidéo de référence : cercle dont le centre est en bas-gauche, hors cadre.
     Centre ≈ (36% L, 141% H), rayon ≈ 70% L  (mesuré image par image). */
  .about {
    position: relative;
    background: #000;
    padding: clamp(70px, 13vh, 170px) var(--pad);
    overflow: hidden;
    isolation: isolate;            /* contient l'arc en z-index local */
  }
  /* L'arc lui-même = bord lumineux d'un globe sombre, calé EXACTEMENT sur l'image
     de référence (mesure pixel par pixel) :
       - VERT PROFOND (pas un vert vif) : pics mesurés ~rgb(40,104,53).
       - intensité MODÉRÉE : le pic de luminosité verte plafonne vers ~40% (g~104),
         et le SOMMET est quasi invisible (g~15) puis s'éclaire vers la droite/bas.
       - le trait est FIN EN HAUT puis s'ÉLARGIT / s'intensifie en descendant vers
         la DROITE de l'écran.
     GÉOMÉTRIE EN vw : centre 30vw / calc(8% + 88vw), rayon 88vw -> vrai cercle
     indépendant de la hauteur (sommet calé au niveau du haut de l'encadrement,
     jamais rogné). Mesure réf : centre 29.8%L / 139%H, rayon 86%L.

     CLÉ DU RENDU : toute la luminosité de l'arc (ligne + halo) est MODULÉE par un
     conic-gradient en MASQUE, centré sur le centre du cercle. En haut (petits
     angles) le masque est presque transparent -> trait à peine visible ; en
     tournant vers la droite et le bas, le masque s'ouvre -> l'arc s'éclaire et
     s'épaissit. C'est ce masque (et non l'empilement d'opacités) qui crée le
     dégradé du fin/discret vers le large/lumineux. */
  .about__arc {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background:
      /* 1) fine ligne lumineuse du bord (vert profond) */
      radial-gradient(88vw 88vw at 30vw calc(8% + 88vw),
        transparent calc(100% - 0.6vw),
        rgba(120,225,150,0.85) calc(100% - 0.22vw),
        rgba(55,180,95,0.30) calc(100% + 0.15vw),
        transparent calc(100% + 1.0vw)),
      /* 2) halo qui retombe vers l'intérieur (large, vert profond) */
      radial-gradient(88vw 88vw at 30vw calc(8% + 88vw),
        transparent calc(100% - 12vw),
        rgba(24,120,56,0.10) calc(100% - 7vw),
        rgba(32,155,74,0.34) calc(100% - 2vw),
        rgba(40,175,86,0.46) calc(100% - 0.4vw),
        rgba(26,125,58,0.10) calc(100% + 2vw),
        transparent calc(100% + 8vw));
    background-repeat: no-repeat;
    background-position: center;
    /* MASQUE directionnel appliqué à TOUT l'arc : sombre/transparent au sommet,
       de plus en plus opaque (révélé) vers la droite puis le bas. */
    -webkit-mask: conic-gradient(from -8deg at 30vw calc(8% + 88vw),
        transparent 0deg,
        rgba(0,0,0,0.10) 22deg,
        rgba(0,0,0,0.32) 46deg,
        rgba(0,0,0,0.62) 72deg,
        rgba(0,0,0,0.88) 96deg,
        #000 120deg,
        #000 150deg,
        rgba(0,0,0,0.55) 178deg,
        transparent 205deg);
            mask: conic-gradient(from -8deg at 30vw calc(8% + 88vw),
        transparent 0deg,
        rgba(0,0,0,0.10) 22deg,
        rgba(0,0,0,0.32) 46deg,
        rgba(0,0,0,0.62) 72deg,
        rgba(0,0,0,0.88) 96deg,
        #000 120deg,
        #000 150deg,
        rgba(0,0,0,0.55) 178deg,
        transparent 205deg);
  }

  /* ---- Voiles de continuité entre sections (fragment blend, RUN-20260717-002).
     L'arc/halo vert s'éteint progressivement avant les bords : plus de coupe nette. */
  .about#apropos{ position: relative; }
  .about#apropos::before,
  .about#apropos::after,
  #promesse-app .stats::before{
    content:""; position:absolute; left:0; right:0;
    height:clamp(120px, 14vh, 180px);
    pointer-events:none; z-index:0;
  }
  .about#apropos::before,
  #promesse-app .stats::before{
    top:0;
    background:linear-gradient(to bottom,
      #000 0%, rgba(0,0,0,0.75) 15%, rgba(0,0,0,0.40) 45%,
      rgba(0,0,0,0.12) 75%, transparent 92%, transparent 100%);
  }
  .about#apropos::after{
    bottom:0;
    background:linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,0.12) 25%, rgba(0,0,0,0.40) 55%,
      rgba(0,0,0,0.75) 85%, #000 96%, #000 100%);
  }

  .about__inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 0.92fr) 1.08fr;
    gap: clamp(36px, 6vw, 96px);
    align-items: stretch;
  }

  /* --- Colonne gauche : visuel portrait + signature --- */
  .about__media {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  /* Bloc signature animée du sigle OptoLead (remplace l'ancien placeholder
     vidéo). Carte sobre, alignée sur les tokens sombres de la page : même
     bord #20241f, même dégradé de fond, arrondi discret. L'animation SVG est
     injectée dans .about__logo-stage par le module « sillage ». */
  /* [V23] CADRE SUPPRIMÉ. Il ne reste QUE le logo :
       - plus de bordure, plus d'arrondi, plus de fond dégradé ;
       - plus de trame quadrillée (::before) ;
       - plus de liseré interne (::after).
     Le conteneur ne sert plus qu'à réserver la place et à centrer la scène ;
     il est totalement transparent, le sigle flotte sur le fond de la page.
     (Pour retrouver la carte : réactiver le bloc mis en commentaire ci-dessous.) */
  .about__video {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;            /* format portrait conservé */
    border: 0;
    background: none;
    overflow: visible;              /* les ondes du sigle ne sont plus rognées */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about__video::before,
  .about__video::after { content: none; }
  /* ---- ancien habillage « carte produit », conservé pour mémoire ----
  .about__video {
    border: 1px solid #20241f;
    border-radius: 14px;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(39,214,81,0.07), transparent 62%),
      linear-gradient(135deg, #0b0d0b 0%, #070807 60%, #050605 100%);
    overflow: hidden;
    isolation: isolate;
  }
  .about__video::before {            trame quadrillée
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 44px 44px; pointer-events: none; z-index: 0;
  }
  .about__video::after {             liseré interne
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    pointer-events: none; z-index: 3;
  }
  ------------------------------------------------------------------- */
  /* Scène de l'animation : carré centré.
     Le SVG a un viewBox de 140 dont seules les ~100 unités centrales portent
     le sigle ; le pourtour est la réserve où se déploient les ondes. On agrandit
     donc la scène (100% au lieu de 78%) pour que le sigle conserve sa taille
     apparente, la réserve transparente venant simplement mordre sur le cadre. */
  .about__logo-stage {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    aspect-ratio: 1 / 1;
    cursor: pointer;
  }
  .about__logo-stage svg { display: block; width: 100%; height: 100%; }
  /* si une vidéo réelle est fournie plus tard, elle remplit le cadre. */
  .about__video > video,
  .about__video > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
  }
  /* signature OptoLead, dans la colonne de droite, SOUS la barre grise.
     Police manuscrite penchée (Qwigley) -> esprit signature "davies".
     Descendue plus bas (grande marge) et CENTRÉE au milieu de la barre grise. */
  .about__signature {
    margin-top: clamp(40px, 7vh, 90px);
    text-align: center;            /* centrée au milieu de la barre grise */
    /* police de signature embarquée (repli cursif système si jamais indispo) */
    font-family: "OptoLead Signature", "Snell Roundhand", "Brush Script MT", cursive;
    font-size: clamp(56px, 7vw, 92px);
    font-weight: 400;
    font-style: normal;
    line-height: 0.9;
    color: var(--fg);
    letter-spacing: 0.005em;
    user-select: none;
  }

  /* --- Colonne droite : sur-titre + texte qui se blanchit au scroll --- */
  .about__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(20px, 5vh, 60px);
  }
  .about__eyebrow {
    font-family: "Google Sans", "Poppins", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: clamp(22px, 3.4vh, 40px);
  }
  /* le paragraphe : chaque mot est un <span> dont la couleur passe du gris au
     blanc au fil du scroll (piloté en JS, voir module "about reveal"). */
  .about__text {
    font-family: "Google Sans", "Poppins", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(26px, 3.2vw, 44px);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.01em;
    margin-bottom: clamp(28px, 4vh, 48px);
  }
  .about__text .word {
    /* gris au repos ; transition douce vers le blanc quand .lit est ajouté */
    color: #4b4f49;
    transition: color .25s ease;
    /* on garde l'espace après chaque mot */
  }
  .about__text .word.lit {
    color: var(--fg);
  }
  /* la petite barre grise, sous le texte */
  .about__rule {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.16);
    border: 0;
  }

  /* ---- responsive ---- */
  @media (max-width: 900px) {
    body { overflow: auto; }
    .hero-section { height: auto; min-height: 100vh; padding-bottom: 90px; }
    /* Barre fixe compacte sur mobile : logo + navigation (le bouton MENU a été
       retiré). La nav passe en ligne sous le logo et reste accessible. */
    .topbar {
      grid-template-columns: auto 1fr;
      align-items: center;
      row-gap: 8px;
      flex-wrap: wrap;
    }
    .topbar .nav {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 18px;
      grid-column: 1 / -1;
      justify-content: flex-start;
    }
    .topbar .nav__link { font-size: 13px; }
    .topbar__meta { display: none; }
    /* meta masqué + grille à 2 colonnes : Connexion rejoint la ligne
       de nav (fin de ligne) au lieu de réclamer une 4e colonne.
       Pilule légèrement resserrée pour la barre compacte. */
    .topbar__login { grid-column: 2 / -1; justify-self: end; font-size: 12px; padding: 9px 18px; }
    /* le contenu du Hero démarre sous la barre fixe.
       [adaptation mobile V17] 90px -> 170px : avec la nav repliée sur 2 lignes,
       la topbar fixe mesure ~150px ; à 90px le statut « Disponible » et la nav
       se superposaient (défaut constaté en recette sur 390px). */
    .hero { position: relative; min-height: 80vh; padding-top: 170px; }
    .hero__status, .hero__year { position: static; margin-bottom: 8px; }
    .hero__bottom { position: static; flex-direction: column; align-items: flex-start; margin-top: 30px; }

    /* À propos : colonnes empilées, visuel au-dessus du texte */
    .about__inner { grid-template-columns: 1fr; gap: 40px; }
    .about__content { padding-top: 0; }
    .about__video { aspect-ratio: 4 / 4.4; }
  }
  @media (max-width: 560px) {
    .topbar__logo { width: 64px; height: 64px; }
    .wordmark { font-size: 19vw; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dot { animation: none; }
    /* À propos : pas d'effet de scroll -> texte directement blanc */
    .about__text .word { transition: none; }
    /* apparitions désactivées : tout visible directement */
    .anim-up, .anim-right, .anim-left { opacity: 1 !important; }
    body.loaded .anim-up,
    body.loaded .anim-right,
    body.loaded .anim-left { animation: none !important; }
  }

  /* =====================================================================
     ============   SECTION PROMESSE & SUITE (fusion)   ==================
     CSS d'origine du fichier "promesse", intégralement préfixé
     par #promesse-app pour ne pas entrer en conflit avec le reste du site.
     (variables, .card, etc. sont ainsi isolées dans ce conteneur.)
     ===================================================================== */
  /* le conteneur prend la largeur pleine et hérite du fond noir */
  #promesse-app { position: relative; width: 100%; background: #000; }

#promesse-app {
    --bg:#000000;
    --txt-dim:#5a5a5a;     
    --txt-on:#ffffff;      
    --img-size: 20vw;      
    --img-radius: 22px;
  }
#promesse-app .ambient {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(120% 90% at 115% -10%,
        rgba(34,180,70,0.55) 0%,
        rgba(20,120,45,0.30) 18%,
        rgba(8,55,22,0.12) 34%,
        rgba(0,0,0,0) 55%);
    filter:saturate(1.1);
  }
@media (max-width:760px) {
#promesse-app { --img-size:62vw; }
  }
#promesse-app {
    --green:#27d651;          
    --txt-sub:#9a9a9a;         
    --grid:rgba(255,255,255,0.07);
  }
#promesse-app .stats {
    position:relative;
    z-index:2;
    min-height:62vh;
    padding:120px 6vw 90px;
    overflow:hidden;
    isolation:isolate;
  }
#promesse-app .stats .grid-floor {
    position:absolute;
    left:0; right:0; bottom:0;
    top:30%;
    z-index:-2;
    pointer-events:none;
  }
#promesse-app .stats .grid-floor svg {
    width:100%; height:100%;
    display:block;
  }
#promesse-app .stats .grid-floor line {
    stroke:rgba(39,214,81,0.22);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
  }
#promesse-app .stats .grid-floor::after {
    content:"";
    position:absolute; left:50%; bottom:-8%;
    width:120%; height:80%;
    transform:translateX(-50%);
    background:radial-gradient(60% 75% at 50% 100%,
      rgba(20,120,55,0.30) 0%,
      rgba(20,120,55,0.14) 35%,
      rgba(20,120,55,0) 70%);
    pointer-events:none;
  }
#promesse-app .stats .grid-fade {
    position:absolute; inset:0;
    background:linear-gradient(to bottom,
      #000 0%, #000 28%,
      rgba(0,0,0,0.40) 50%, rgba(0,0,0,0) 80%);
    z-index:-1;
    pointer-events:none;
  }
#promesse-app .stats-grid {
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    max-width:1200px;
    margin:0 auto;
    padding-top:70px;
    text-align:center;
  }
#promesse-app .stat { display:flex; flex-direction:column; align-items:center; }
#promesse-app .stat .label {
    font-size:18px; font-weight:600; letter-spacing:.005em;
    color:#fff; margin-bottom:38px;
    display:inline-flex; align-items:center; gap:8px;
  }
#promesse-app .stat .label .slash {
    color:var(--green); font-weight:700; font-style:italic; letter-spacing:-0.06em;
  }
#promesse-app .stat .number {
    font-size:clamp(64px,7vw,110px);
    line-height:0.9; font-weight:600; letter-spacing:-0.02em;
    color:#fff;
    display:inline-flex; align-items:flex-start; justify-content:center;
    margin-bottom:34px;
  }
#promesse-app .stat .number .accent { color:var(--green); }
#promesse-app .stat .number.score .slash-big {
    color:var(--green); font-style:italic; font-weight:600;
    letter-spacing:-0.05em; margin-right:14px;
  }
#promesse-app .stat .desc {
    font-size:16px; line-height:1.45; font-weight:500;
    color:var(--txt-sub); max-width:300px;
  }
@media (max-width:860px) {
#promesse-app .stats { padding:80px 6vw 80px; }
#promesse-app .stats-grid { grid-template-columns:1fr; gap:64px; }
#promesse-app .stat .number { margin-bottom:22px; }
#promesse-app .stat .label { margin-bottom:24px; }
  }
#promesse-app .pricing {
    position:relative;
    z-index:2;
    background:#000;
    padding:40px 6vw 160px;
    overflow:hidden;
  }
#promesse-app .pricing-title {
    text-align:center;
    font-size:clamp(40px,6vw,76px);
    font-weight:500;
    letter-spacing:-0.02em;
    color:#fff;
    margin:0 0 46px;
  }
#promesse-app .billing-toggle {
    display:flex;
    justify-content:center;
    gap:clamp(40px,8vw,120px);
    /* [PROMPT2] 90px -> 38px : les mentions de lancement occupent desormais
       cet intervalle, c'est .pricing-launch qui porte le blanc restant
       avant les cartes. */
    margin:0 auto 38px;
  }
#promesse-app .bt-opt {
    background:none; border:0; cursor:pointer;
    font-family:inherit;
    display:flex; flex-direction:column; align-items:center; gap:14px;
    padding:0;
  }
#promesse-app .bt-dot {
    width:13px; height:13px; border-radius:50%;
    border:1.5px solid #4a4a4a;
    background:transparent;
    transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
#promesse-app .bt-opt.is-active .bt-dot {
    background:var(--green);
    border-color:var(--green);
    box-shadow:0 0 10px rgba(39,214,81,.7);
  }
#promesse-app .bt-label {
    font-size:17px; font-weight:500;
    color:#7a7a7a;
    transition:color .35s ease;
    white-space:nowrap;
  }
#promesse-app .bt-opt.is-active .bt-label { color:#fff; }
#promesse-app .bt-save { color:var(--green); }
#promesse-app .plans {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    /* [V27] Les cartes ne sont plus collees : un petit interstice permet aux
       coins arrondis d'exister et donne a chaque formule sa propre silhouette. */
    gap:14px;
    max-width:1500px;
    margin:0 auto;
    position:relative;
    z-index:1;
  }
#promesse-app .plan {
    position:relative;
    padding:0;
    overflow:hidden;
    isolation:isolate;
    /* [V27] Coins adoucis + contour discret : la carte se lit comme un objet
       pose sur le noir, plus comme une colonne rectangulaire. Meme grammaire
       que la bande Free (bordure blanche tres basse, fond degrade sombre). */
    border:1px solid rgba(255,255,255,.10);
    border-radius:22px;
    background:linear-gradient(180deg,rgba(16,19,16,.50),rgba(7,9,7,.82));
    transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;
  }
/* Le contour s'eclaire legerement au survol, dans le vert de la formule.
   Volontairement limite au pointeur fin ET au bureau : sur mobile, c'est
   .is-active (le balayage) qui decide seul de l'illumination. */
@media (hover:hover) and (min-width:701px){
  #promesse-app .plan[data-plan="smart"]:hover { border-color:rgba(33,194,74,.34); }
  #promesse-app .plan[data-plan="pro"]:hover   { border-color:rgba(39,209,92,.36); }
  #promesse-app .plan[data-plan="max"]:hover   { border-color:rgba(47,221,125,.36); }
  #promesse-app .plan[data-plan="custom"]:hover{ border-color:rgba(67,230,160,.38); }
}
#promesse-app .plan-body {
    position:relative;
    z-index:3;
    padding:40px 34px 46px;
  }
#promesse-app .plan-bar {
    position:absolute; top:0; left:34px; right:34px;
    height:2px;
    background:rgba(255,255,255,.32);
    z-index:4;
    transition:background .45s ease, box-shadow .45s ease;
  }
/* La carte Pro utilise la même barre blanche que les autres cartes ;
     l'effet vert n'apparaît plus qu'au survol (voir .plan:hover .plan-glow). */
#promesse-app .plan-glow {
    position:absolute; inset:0;
    z-index:1;
    background:linear-gradient(to top,
      rgba(39,214,81,0.20) 0%,
      rgba(39,214,81,0.07) 26%,
      rgba(39,214,81,0) 52%);
    opacity:0;
    transition:opacity .5s ease;
    pointer-events:none;
  }
#promesse-app .plan:hover .plan-glow { opacity:1; }

/* ============================================================
   CRESCENDO DE COULEUR par formule (au survol).
   Toutes dans la famille verte/teal du site, mais l'intensité et
   la teinte montent graduellement : Smart (vert profond) -> Pro
   (émeraude) -> Max (teal) -> Sur-mesure (teal-menthe lumineux).
   La barre du haut prend la même couleur (avec halo) au survol,
   et le dégradé de fond monte en intensité d'une carte à l'autre.
   ============================================================ */
/* [V30] La rampe precedente DESCENDAIT de 137° a 126° — donc vers le
   jaune — pendant que la saturation montait de 70 % a 86 %. Un vert clair
   et tres sature vire a l'acide : les dernieres cartes criaient.
   Elle MONTE desormais vers la menthe (137° -> 155°), a saturation quasi
   constante (~70 %) et avec deux fois moins d'ecart de clarte. Ses deux
   extremites sont les couleurs declarees dans BRAND.md :
     Smart  = #21c24a  (--green, le vert de marque)
     Custom = #43e6a0  (--mint, reserve aux accents lumineux)
   L'intensite, elle, ne monte quasiment plus : c'est la TEINTE qui porte
   le crescendo, pas la quantite de lumiere. */
/* -- Smart : vert profond (couleur de base du site) -- */
#promesse-app .plan[data-plan="smart"] .plan-glow{
  background:linear-gradient(to top,
    rgba(33,194,74,0.20) 0%, rgba(33,194,74,0.07) 26%, rgba(33,194,74,0) 52%);
}
#promesse-app .plan[data-plan="smart"]:hover .plan-bar{
  background:#21c24a; box-shadow:0 0 14px rgba(33,194,74,.60);
}
/* -- Pro : vert franc, plus lumineux -- */
#promesse-app .plan[data-plan="pro"] .plan-glow{
  background:linear-gradient(to top,
    rgba(39,209,92,0.22) 0%, rgba(39,209,92,0.08) 26%, rgba(39,209,92,0) 54%);
}
#promesse-app .plan[data-plan="pro"]:hover .plan-bar{
  background:#27d15c; box-shadow:0 0 14px rgba(39,209,92,.58);
}
/* -- Max : vert clair -- */
#promesse-app .plan[data-plan="max"] .plan-glow{
  background:linear-gradient(to top,
    rgba(47,221,125,0.24) 0%, rgba(47,221,125,0.09) 26%, rgba(47,221,125,0) 56%);
}
#promesse-app .plan[data-plan="max"]:hover .plan-bar{
  background:#2fdd7d; box-shadow:0 0 15px rgba(47,221,125,.60);
}
/* -- Sur-mesure : vert tendre lumineux (le plus clair) -- */
#promesse-app .plan[data-plan="custom"] .plan-glow{
  background:linear-gradient(to top,
    rgba(67,230,160,0.26) 0%, rgba(67,230,160,0.10) 26%, rgba(67,230,160,0) 58%);
}
#promesse-app .plan[data-plan="custom"]:hover .plan-bar{
  background:#43e6a0; box-shadow:0 0 16px rgba(67,230,160,.62);
}
#promesse-app .plan-particles {
    position:absolute; inset:0;
    z-index:2;
    width:100%; height:100%;
    pointer-events:none;
  }
#promesse-app .plan-name {
    font-size:21px; font-weight:500; color:#fff;
    margin:0 0 40px;
  }
#promesse-app .plan-price {
    display:flex; align-items:baseline; gap:2px;
    margin:0 0 26px;
    white-space:nowrap;
  }
#promesse-app .plan-price .cur {
    font-size:clamp(30px,2.4vw,40px); font-weight:500;
    color:var(--green); margin-right:4px;
  }
#promesse-app .plan-price .amount {
    font-size:clamp(40px,3.6vw,58px); font-weight:500;
    color:#fff; letter-spacing:-0.01em;
  }
#promesse-app .plan-price .per {
    font-size:15px; color:#8a8a8a; font-weight:500;
    align-self:flex-start; margin-top:.5em; margin-left:4px;
  }
/* --- Ancien prix barre (promotion) ------------------------------------
   Rajout discret sur Smart / Pro / Max : le tarif precedent, assombri et
   raye, pose juste au-dessus du prix courant. Volontairement place EN
   DEHORS de .plan-price : ce conteneur flex doit garder son nowrap, sinon
   le "E / montant / mois" se casserait en plusieurs lignes sur une carte
   etroite. La marge negative loge la ligne dans le blanc deja present sous
   le nom de la formule (40px), fusion des marges comprise : le grand prix
   reste exactement a la meme hauteur que sur la carte Custom, qui elle n'a
   pas d'ancien prix. Rien ne bouge dans la grille. */
#promesse-app .plan-was {
    display:block;
    margin:-23px 0 6px;            /* -23 = hauteur de la ligne + interligne */
    line-height:1;
  }
#promesse-app .plan-was .was {
    position:relative;
    display:inline-flex; align-items:baseline;
    font-size:17px; font-weight:500;
    color:#5f6560;                 /* en retrait du /mois (#8a8a8a) */
    text-decoration:none;          /* le <s> garde le sens, pas le trait natif */
    transition:color .5s ease;
  }
/* La barre est un filet dessine, pas un line-through de navigateur : elle
   garde la meme epaisseur et ne disparait pas pendant le slide vertical du
   toggle Mensuel / Annuel (le .roll-next est en position absolue). */
#promesse-app .plan-was .was::after {
    content:'';
    position:absolute; left:-3px; right:-3px; top:49%;  /* centre optique des chiffres */
    height:1px;
    background:rgba(255,255,255,.30);
    transition:background .5s ease;
  }
#promesse-app .plan-was .cur {
    font-size:inherit; font-weight:inherit; color:inherit;
    margin-right:2px;
  }
#promesse-app .plan-was .amount {
    font-size:inherit; font-weight:inherit; color:inherit;
    letter-spacing:normal;
  }
/* Au survol, l'ancien prix s'eclaire avec le reste de la carte (meme
   portee que l'illumination des bordures : bureau + pointeur fin). */
@media (hover:hover) and (min-width:701px){
  #promesse-app .plan:hover .plan-was .was { color:#767c77; }
  #promesse-app .plan:hover .plan-was .was::after { background:rgba(255,255,255,.42); }
}
#promesse-app .roll {
    position:relative;
    display:inline-block;
    vertical-align:bottom;
    white-space:nowrap;
    overflow:visible;
  }
#promesse-app .roll.is-rolling { overflow:hidden; }
#promesse-app .roll .roll-cur { display:inline-block; will-change:transform,opacity; }
#promesse-app .roll .roll-next {
    position:absolute; left:0; top:0;
    display:inline-block; will-change:transform,opacity;
  }
#promesse-app .roll.is-rolling .roll-cur {
    animation:rollOut .42s cubic-bezier(.6,0,.2,1) forwards;
  }
#promesse-app .roll.is-rolling .roll-next {
    animation:rollIn .42s cubic-bezier(.6,0,.2,1) forwards;
  }
@keyframes rollOut{
    0%{ transform:translateY(0); opacity:1; filter:blur(0); }
    100%{ transform:translateY(-100%); opacity:0; filter:blur(2px); }
  }
@keyframes rollIn{
    0%{ transform:translateY(100%); opacity:0; filter:blur(2px); }
    100%{ transform:translateY(0); opacity:1; filter:blur(0); }
  }
#promesse-app .plan-desc {
    font-size:15.5px; line-height:1.5; color:#9a9a9a; font-weight:400;
    margin:0 0 32px;
    min-height:48px;
  }
/* Boutons de tarification : comportement IDENTIQUE au bouton "Démarrer maintenant"
   du Hero (.cta) — carré à coins arrondis, voile qui monte du bas en blanc puis
   vire au vert au survol. Mêmes valeurs pour toutes les formules. */
#promesse-app .plan-cta {
    position:relative;
    display:table;                 /* épouse le texte ET se centre via margin auto */
    width:auto;                    /* le cadre épouse le texte (plus pleine largeur) */
    overflow:hidden;
    border:1px solid #3a423a;
    border-radius:10px;            /* carré à coins arrondis, comme le Hero */
    background:transparent;
    color:var(--fg);
    font-family:inherit;
    font-size:13px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase;
    padding:18px 28px;             /* côtés gauche/droite (vertical inchangé) */
    cursor:pointer;
    isolation:isolate;
    margin:0 auto 40px;            /* centré horizontalement dans la carte */
    z-index:0;
    transition:color .25s ease, border-color .35s ease;
  }
#promesse-app .plan-cta > span { position:relative; z-index:2; }
/* le voile qui monte par le bas : blanc -> vert (léger délai sur la couleur) */
#promesse-app .plan-cta::before {
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:0;                      /* monte au survol */
    background:#ffffff;            /* commence blanc */
    z-index:1;
    transition:height .35s ease, background .35s ease .12s;
  }
#promesse-app .plan-cta:hover {
    color:#04140a;
    border-color:var(--green);
  }
#promesse-app .plan-cta:hover::before {
    height:100%;                   /* remplit tout, du bas vers le haut */
    background:var(--green);       /* vire au vert */
  }
#promesse-app .plan-cta:focus-visible {
    outline:2px solid var(--green);
    outline-offset:3px;
  }
#promesse-app .plan-incl {
    font-size:15px; color:#8a8a8a; font-weight:400;
    margin:0 0 26px;
  }
#promesse-app .plan-feats {
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:20px;
  }
#promesse-app .plan-feats li {
    font-size:15.5px; color:#e6e6e6; font-weight:400;
    display:flex; align-items:baseline; gap:9px;
  }
#promesse-app .plan-feats .fs {
    color:var(--green); font-weight:700; font-style:italic; letter-spacing:-0.04em;
  }

/* ============================================================
   [PROMPT2] MENTIONS DE LANCEMENT — entre le toggle et les cartes.
   Deux lignes de meme grammaire : une pastille monospace, puis la
   phrase. Contrainte volontaire : UNE mention = UNE ligne. Le
   nowrap le garantit sur bureau, et le texte a ete calibre pour
   ne jamais depasser la gouttiere ; sous 1080px la contrainte est
   relachee, sinon la ligne deborderait de l'ecran.
   ============================================================ */
#promesse-app .pricing-launch{
  position:relative; z-index:1;
  margin:0 auto clamp(46px,4.4vw,66px);
  display:flex; flex-direction:column; align-items:center;
  gap:11px;
  max-width:100%;
}
#promesse-app .pricing-launch__line{
  display:flex; align-items:center; gap:13px;
  margin:0;
  font-size:clamp(13px,1.05vw,14.5px); line-height:1.45;
  color:#9a9a9a; font-weight:400;
  white-space:nowrap;
  max-width:100%;
}
#promesse-app .pricing-launch__line b{ color:#e6e6e6; font-weight:600; }
#promesse-app .pricing-launch__tag{
  flex:0 0 auto;
  font:500 9.5px/1 "JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--green);
  border:1px solid rgba(39,214,81,.34);
  background:rgba(39,214,81,.08);
  border-radius:999px;
  padding:6px 11px 5px;
  white-space:nowrap;
}
@media (max-width:1080px){
  /* la ligne ne rentre plus : on autorise le retour a la ligne et on
     empile la pastille au-dessus du texte, centre. */
  #promesse-app .pricing-launch__line{
    flex-direction:column; gap:9px;
    white-space:normal; text-align:center;
    max-width:60ch;
  }
  #promesse-app .pricing-launch{ gap:22px; }
}

/* ============================================================
   [PROMPT2] LIEN VERS LA TARIFICATION DETAILLEE — bas de section.
   Volontairement pose SUR le halo vert : le z-index:1 le place
   au-dessus de .pricing-halo (z-index:0), sans quoi il serait
   mange par le degrade.
   ============================================================ */
#promesse-app .pricing-note{
  position:relative; z-index:1;
  max-width:1500px;
  margin:clamp(38px,3.6vw,58px) auto 0;
  display:flex; justify-content:center;
}
#promesse-app .pricing-note__link{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:10px;
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#e6e6e6; text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:14px 26px;
  transition:color .25s ease, border-color .3s ease, background .3s ease;
}
#promesse-app .pricing-note__link:hover{
  color:#fff;
  border-color:rgba(39,214,81,.48);
  background:rgba(39,214,81,.08);
}
#promesse-app .pricing-note__link .arw{ transition:transform .25s ease; }
#promesse-app .pricing-note__link:hover .arw{ transform:translateX(4px); }
#promesse-app .pricing-note__link:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
@media (max-width:660px){
  #promesse-app .pricing-launch{ gap:20px; margin-bottom:40px; }
  #promesse-app .pricing-launch__line{ font-size:13px; }
  #promesse-app .pricing-note__link{ padding:13px 22px; font-size:12px; }
}

#promesse-app .pricing-halo {
    position:absolute;
    left:50%; bottom:-160px;
    width:175vw; height:600px;
    transform:translateX(-50%);
    /* [V29] Le flou a ete retire ; son profil est desormais ECRIT dans les
       arrets du degrade. Pourquoi : cet element mesure 175vw x 600px, soit
       plus de deux millions de pixels, et un filter:blur() obligeait le
       navigateur a le rendre dans une texture puis a la convoluer. Mesure
       faite en rendu logiciel (le cas d'un appareil sans carte graphique),
       pendant un defilement agressif dans les Tarifs : le dessin passe de
       21 % a 12 % d'un coeur, et les gels d'image (>60 ms) tombent de 4 a 0.
       Un degrade radial floute reste un degrade radial : les arrets
       ci-dessous reproduisent le profil de l'ancien blur(48px).
       Ressemblance a l'image avec l'ancien rendu (SSIM) : 0,95. */
    background:radial-gradient(60% 54% at 50% 100%,
      rgba(46,240,90,0.62) 0%,
      rgba(43,224,84,0.42) 23%,
      rgba(40,216,82,0.22) 45%,
      rgba(39,214,81,0.10) 65%,
      rgba(39,214,81,0.034) 80%,
      rgba(39,214,81,0) 94%);
    z-index:0;
    pointer-events:none;
  }
#promesse-app .pricing-halo::after {
    content:"";
    position:absolute; left:50%; bottom:0;
    width:50%; height:80%;
    transform:translateX(-50%);
    /* [V29] Meme traitement pour le coeur clair. Sans flou son pic etait
       trop dur : on l'abaisse (1 -> 0,59) et on elargit le rayon, ce qui
       redonne la meme retombee douce. */
    background:radial-gradient(58% 77% at 50% 100%,
      rgba(225,255,235,0.59) 0%,
      rgba(186,254,208,0.472) 17%,
      rgba(140,251,175,0.301) 38%,
      rgba(100,249,140,0.148) 57%,
      rgba(80,247,128,0.056) 74%,
      rgba(70,245,120,0) 90%);
    pointer-events:none;
  }
@media (max-width:1200px) {
#promesse-app .plans { grid-template-columns:repeat(2,1fr); max-width:760px; }
  }
@media (max-width:660px) {
#promesse-app .plans { grid-template-columns:1fr; max-width:420px; }
#promesse-app .plan-body { padding:34px 26px 40px; }
#promesse-app .pricing { padding:30px 5vw 130px; }
  }
#promesse-app .faq {
    position:relative;
    z-index:2;
    background:#000;
    padding:40px 6vw 140px;
    overflow:hidden;
    isolation:isolate;
  }
#promesse-app .faq-glow {
    position:absolute;
    left:50%; top:-160px;
    width:175vw; height:600px;
    transform:translateX(-50%);
    /* [V29] Flou retire, profil reporte dans les arrets — voir la note
       detaillee sur .pricing-halo. */
    background:radial-gradient(60% 54% at 50% 0%,
      rgba(46,240,90,0.62) 0%,
      rgba(43,224,84,0.42) 23%,
      rgba(40,216,82,0.22) 45%,
      rgba(39,214,81,0.10) 65%,
      rgba(39,214,81,0.034) 80%,
      rgba(39,214,81,0) 94%);
    z-index:-1;
    pointer-events:none;
  }
#promesse-app .faq-glow::after {
    content:"";
    position:absolute; left:50%; top:0;
    width:50%; height:80%;
    transform:translateX(-50%);
    /* [V29] idem : pic abaisse, rayon elargi. */
    background:radial-gradient(58% 77% at 50% 0%,
      rgba(225,255,235,0.59) 0%,
      rgba(186,254,208,0.472) 17%,
      rgba(140,251,175,0.301) 38%,
      rgba(100,249,140,0.148) 57%,
      rgba(80,247,128,0.056) 74%,
      rgba(70,245,120,0) 90%);
    pointer-events:none;
  }
#promesse-app .faq-title {
    text-align:center;
    font-size:clamp(46px,6.5vw,84px);
    font-weight:500;
    letter-spacing:-0.01em;
    color:#fff;
    margin:0 0 90px;
  }
#promesse-app .faq-list {
    max-width:1000px;
    margin:0 auto;
  }
#promesse-app .faq-item {
    border-bottom:1px solid rgba(255,255,255,0.10);
  }
#promesse-app .faq-item:first-child {
    border-top:1px solid rgba(255,255,255,0.10);
  }
#promesse-app .faq-head {
    width:100%;
    background:none;
    border:0;
    cursor:pointer;
    font-family:inherit;
    display:grid;
    grid-template-columns:64px 1fr 40px;
    align-items:center;
    gap:24px;
    padding:34px 8px;
    text-align:left;
    color:#fff;
  }
#promesse-app .faq-num {
    font-size:17px; font-weight:500; color:#fff;
  }
#promesse-app .faq-q {
    font-size:clamp(15px,1.25vw,18px);
    font-weight:500;
    color:#fff;
    line-height:1.4;
  }
#promesse-app .faq-chevron {
    display:flex; align-items:center; justify-content:center;
    justify-self:end;
  }
#promesse-app .faq-chevron svg {
    width:22px; height:22px;
    stroke:rgba(255,255,255,0.75);
    transition:transform .4s cubic-bezier(.4,0,.2,1);
  }
#promesse-app .faq-item.is-open .faq-chevron svg {
    transform:rotate(180deg);
  }
#promesse-app .faq-panel {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1);
  }
#promesse-app .faq-item.is-open .faq-panel {
    grid-template-rows:1fr;
  }
#promesse-app .faq-answer {
    overflow:hidden;
  }
#promesse-app .faq-answer p {
    margin:0;
    padding:0 8px 38px 152px;   
    font-size:clamp(14px,1.05vw,15.5px);
    line-height:1.55;
    color:#c7c7c7;
    font-weight:400;
    max-width:760px;
    opacity:0;
    transform:translateY(-4px);
    transition:opacity .3s ease .06s, transform .3s ease .06s;
  }
#promesse-app .faq-item.is-open .faq-answer p {
    opacity:1;
    transform:translateY(0);
  }
@media (max-width:760px) {
#promesse-app .faq { padding:30px 5vw 110px; }
#promesse-app .faq-title { margin-bottom:60px; }
#promesse-app .faq-head { grid-template-columns:40px 1fr 28px; gap:16px; padding:26px 4px; }
#promesse-app .faq-answer p { padding-left:56px; padding-bottom:30px; }
  }
#promesse-app .faq-glow-bottom {
    position:absolute;
    left:50%; bottom:-160px;
    width:175vw; height:600px;
    transform:translateX(-50%);
    /* [V29] Flou retire, profil reporte dans les arrets — voir la note
       detaillee sur .pricing-halo. */
    background:radial-gradient(60% 54% at 50% 100%,
      rgba(46,240,90,0.62) 0%,
      rgba(43,224,84,0.42) 23%,
      rgba(40,216,82,0.22) 45%,
      rgba(39,214,81,0.10) 65%,
      rgba(39,214,81,0.034) 80%,
      rgba(39,214,81,0) 94%);
    z-index:0;
    pointer-events:none;
  }
#promesse-app .faq-glow-bottom::after {
    content:"";
    position:absolute; left:50%; bottom:0;
    width:50%; height:80%;
    transform:translateX(-50%);
    /* [V29] idem : pic abaisse, rayon elargi. */
    background:radial-gradient(58% 77% at 50% 100%,
      rgba(225,255,235,0.59) 0%,
      rgba(186,254,208,0.472) 17%,
      rgba(140,251,175,0.301) 38%,
      rgba(100,249,140,0.148) 57%,
      rgba(80,247,128,0.056) 74%,
      rgba(70,245,120,0) 90%);
    pointer-events:none;
  }
#promesse-app .contact {
    position:relative;
    z-index:2;
    background:#000;
    padding:90px 6vw 0;
    overflow:hidden;
    isolation:isolate;
  }
#promesse-app .contact-glow {
    position:absolute;
    left:50%; top:-160px;
    width:175vw; height:600px;
    transform:translateX(-50%);
    /* [V29] Flou retire, profil reporte dans les arrets — voir la note
       detaillee sur .pricing-halo. */
    background:radial-gradient(60% 54% at 50% 0%,
      rgba(46,240,90,0.62) 0%,
      rgba(43,224,84,0.42) 23%,
      rgba(40,216,82,0.22) 45%,
      rgba(39,214,81,0.10) 65%,
      rgba(39,214,81,0.034) 80%,
      rgba(39,214,81,0) 94%);
    z-index:-1;
    pointer-events:none;
  }
#promesse-app .contact-glow::after {
    content:"";
    position:absolute; left:50%; top:0;
    width:50%; height:80%;
    transform:translateX(-50%);
    /* [V29] idem : pic abaisse, rayon elargi. */
    background:radial-gradient(58% 77% at 50% 0%,
      rgba(225,255,235,0.59) 0%,
      rgba(186,254,208,0.472) 17%,
      rgba(140,251,175,0.301) 38%,
      rgba(100,249,140,0.148) 57%,
      rgba(80,247,128,0.056) 74%,
      rgba(70,245,120,0) 90%);
    pointer-events:none;
  }
#promesse-app .contact-head {
    position:relative;
    max-width:1200px;
    margin:0 auto 70px;
    min-height:190px;
  }
#promesse-app .contact-logo {
    position:absolute;
    left:0; top:0;
    width:96px; height:96px;
    display:flex; align-items:center; justify-content:center;
    background:transparent;
  }
#promesse-app .contact-logo img {
    width:100%; height:100%;
    object-fit:contain;
    position:relative; z-index:2;
    display:block;
  }
#promesse-app .contact-title {
    width:auto;
    margin-left:auto;
    margin-right:0;
    padding-right:2vw;
    text-align:right;
    white-space:nowrap;        
    font-size:clamp(36px,5vw,72px);
    font-weight:500;
    line-height:1.06;
    letter-spacing:-0.01em;
    color:#fff;
    margin:0;
    padding-top:6px;
  }
/* ══════════ [V23] SÉLECTEUR D'OBJET DU MESSAGE ══════════
   Reprise EXACTE de la grammaire du toggle Mensuel / Annuel de la section
   Tarifs : deux options côte à côte, petit rond qui s'allume en vert sur
   l'option retenue, libellé qui passe du gris au blanc. Placé entre le
   titre et le formulaire — comme le toggle des tarifs est placé entre le
   titre et les cartes qu'il pilote : on choisit AVANT de remplir. */
#promesse-app .contact-mode {
    display:flex;
    justify-content:center;
    /* [DEMO] Trois objets au lieu de deux : l'ecart se resserre pour que la
       rangee reste centree et tienne sur une ligne, sans changer la
       grammaire (pastille + libelle) du selecteur. */
    gap:clamp(26px,4.6vw,78px);
    flex-wrap:wrap;
    max-width:1200px;
    margin:0 auto 58px;
  }
#promesse-app .cm-opt {
    background:none; border:0; cursor:pointer;
    font-family:inherit;
    display:flex; flex-direction:column; align-items:center; gap:14px;
    padding:0;
    -webkit-tap-highlight-color:transparent;
  }
#promesse-app .cm-dot {
    width:13px; height:13px; border-radius:50%;
    border:1.5px solid #4a4a4a;
    background:transparent;
    transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
#promesse-app .cm-opt.is-active .cm-dot {
    background:var(--green);
    border-color:var(--green);
    box-shadow:0 0 10px rgba(39,214,81,.7);
  }
#promesse-app .cm-label {
    font-size:17px; font-weight:500;
    color:#7a7a7a;
    transition:color .35s ease;
    white-space:nowrap;
  }
#promesse-app .cm-opt.is-active .cm-label { color:#fff; }
#promesse-app .cm-opt:focus-visible {
    outline:2px solid var(--green); outline-offset:8px; border-radius:8px;
  }

/* ══════════ [V23] GRILLE DU FORMULAIRE ══════════
   Quatre cellules, dont TROIS sont communes aux deux modes : l'agencement
   ne bouge pas quand on bascule, seule la 4e change d'occupant.
     • Nom (haut gauche)  | Prénom (haut droite)
     • Email (bas gauche) | « Intéressé par » OU « SIREN/SIRET » (bas droite)
   — et le commentaire, le statut et le bouton tiennent la pleine largeur. */
#promesse-app .contact-form {
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:60px;
    row-gap:44px;
    padding-bottom:90px;
  }
#promesse-app .field--comment,
#promesse-app .field--actions,
#promesse-app .contact-status { grid-column:1 / -1; }

/* [DEMO] La note du mode « Démo détaillée » prend la 4e cellule — celle
   qui reste vide a droite d'Email quand ni « Interesse par » ni SIREN
   n'est demande. Elle occupe donc un trou du formulaire au lieu d'ajouter
   une rangee, et le bouton d'envoi remonte d'autant.
   Meme pastille monospace que les mentions de lancement des Tarifs, pour
   que le site n'invente pas un troisieme dialecte. */
/* En bloc (et non en flex) : la pastille est alors un inline-block que le
   texte suit sur la meme ligne avant de passer a la suivante. En flex, la
   pastille aurait occupe sa propre ligne et l'encadre aurait ete plus haut
   que le champ d'en face. */
#promesse-app .demo-note {
    display:block;
    margin:0;
    padding:13px 16px;
    border:1px solid rgba(39,214,81,.22);
    border-radius:14px;
    background:
      radial-gradient(130% 250% at 0% 0%, rgba(39,214,81,.11) 0%, rgba(39,214,81,.03) 40%, rgba(39,214,81,0) 70%),
      linear-gradient(180deg,rgba(17,21,17,.55),rgba(7,9,7,.75));
    font-size:13.5px; line-height:1.5; color:#9a9a9a; font-weight:400;
  }
#promesse-app .demo-note b { color:#e6e6e6; font-weight:600; }
#promesse-app .demo-note__tag {
    display:inline-block;
    vertical-align:2px;
    margin-right:10px;
    font:500 9.5px/1 "JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
    letter-spacing:.2em; text-transform:uppercase;
    color:var(--green);
    border:1px solid rgba(39,214,81,.34);
    background:rgba(39,214,81,.08);
    border-radius:999px;
    padding:6px 11px 5px;
    white-space:nowrap;
  }

/* ── Bureau : l'encadre epouse EXACTEMENT le champ Email d'en face ──
   Les deux cellules de la rangee font deja la meme hauteur (la grille
   les etire), mais l'encadre, lui, dessine un fond : sa boite descendait
   donc plus bas que le trait de saisie d'Email, et la dissymetrie se
   voyait. On le sort du calcul de hauteur (position:absolute) : la
   rangee est alors dimensionnee par le seul champ Email, et inset:0
   redonne a l'encadre cette hauteur au pixel pres.
   Reserve aux deux colonnes : sous 861px le formulaire s'empile, et une
   boite absolue s'y effondrerait sur le contenu suivant. */
@media (min-width:861px){
  #promesse-app .field--demo-note { position:relative; }
  #promesse-app .field--demo-note .demo-note {
    position:absolute; inset:0;
    /* pastille a gauche, texte a sa droite, l'ensemble centre dans la
       hauteur : deux items flex, donc le texte se replie DANS le sien
       au lieu de repousser la pastille sur une ligne a part. */
    display:flex; align-items:center; gap:12px;
    overflow:hidden;
  }
  #promesse-app .field--demo-note .demo-note__tag { margin-right:0; vertical-align:baseline; }
}

/* --- bascule d'un mode à l'autre : hauteur du bloc animée --- */
#promesse-app .contact-form.is-morphing {
    overflow:hidden;
    transition:height .58s cubic-bezier(.22,1,.36,1);
  }
/* --- champs qui entrent / sortent : fondu + très léger glissement --- */
#promesse-app .contact-form .field[data-mode] {
    transition:opacity .34s ease, transform .46s cubic-bezier(.22,1,.36,1);
  }
#promesse-app .contact-form .field.is-entering {
    opacity:0; transform:translateY(12px); pointer-events:none;
  }
#promesse-app .contact-form .field.is-leaving {
    opacity:0; transform:translateY(-8px); pointer-events:none;
  }
/* garde-fou : un champ hors mode disparaît vraiment de la grille
   (sinon la cascade pourrait rétablir un display et laisser un trou) */
#promesse-app .contact-form .field[hidden] { display:none !important; }

/* --- rangée d'action : le bouton d'envoi, seul et centré --- */
#promesse-app .field--actions {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:14px;
  }
#promesse-app .field--actions .contact-submit { min-width:min(100%,300px); }
#promesse-app .field label {
    display:block;
    font-size:16px; font-weight:500;
    color:#cfcfcf;
    margin-bottom:14px;
  }
#promesse-app .field label .req { color:var(--green); margin-left:2px; }
#promesse-app .contact-form input, #promesse-app .contact-form textarea, #promesse-app .contact-form select {
    width:100%;
    background:transparent;
    border:0;
    border-bottom:1px solid rgba(255,255,255,0.22);
    color:#fff;
    font-family:inherit;
    font-size:16px;
    padding:8px 2px 12px;
    outline:none;
    transition:border-color .3s ease, box-shadow .3s ease;
  }
#promesse-app .contact-form input::placeholder, #promesse-app .contact-form textarea::placeholder {
    color:#6f6f6f;
  }
#promesse-app .contact-form input:focus, #promesse-app .contact-form textarea:focus, #promesse-app .contact-form select:focus {
    border-bottom-color:var(--green);
    box-shadow:0 1px 0 0 var(--green);
  }
#promesse-app .contact-form textarea {
    resize:vertical;
    min-height:48px;
  }
#promesse-app .select-wrap { position:relative; }
#promesse-app .contact-form select {
    appearance:none; -webkit-appearance:none;
    cursor:pointer;
    padding-right:30px;
    color:#cfcfcf;
  }
#promesse-app .contact-form select:invalid { color:#cfcfcf; }
#promesse-app .contact-form select option { color:#111; }
#promesse-app .select-chevron {
    position:absolute; right:4px; top:50%;
    transform:translateY(-60%);
    pointer-events:none;
    display:flex;
  }
#promesse-app .select-chevron svg { width:20px; height:20px; stroke:rgba(255,255,255,0.65); }
#promesse-app .contact-submit {
    position:relative;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.55);
    background:transparent;
    color:#fff;
    font-family:inherit;
    font-size:13px; font-weight:600; letter-spacing:.06em;
    padding:17px 32px;
    cursor:pointer;
    overflow:hidden;
    isolation:isolate;
    transition:color .35s ease, border-color .35s ease;
  }
#promesse-app .contact-submit > span { position:relative; z-index:2; }
#promesse-app .contact-submit::before {
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:100%;
    background:var(--green);
    transform:translateY(101%);
    transition:transform .4s cubic-bezier(.7,0,.2,1);
    z-index:1;
  }
#promesse-app .contact-submit:hover { color:#0a0a0a; border-color:var(--green); }
#promesse-app .contact-submit:hover::before { transform:translateY(0); }
#promesse-app .contact-mail {
    color:#fff;
    font-size:18px; font-weight:500;
    text-decoration:none;
    transition:color .25s ease;
  }
#promesse-app .contact-mail:hover { color:var(--green); }
  /* Second bouton (lien mailto) : même habillage que le bouton d'envoi */
#promesse-app a.contact-submit {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    text-align:center;
  }
#promesse-app .contact-submit--ghost { border-color:rgba(255,255,255,.55); color:#fff; }
#promesse-app .contact-submit--ghost:hover { color:#0a0a0a; border-color:var(--green); }
#promesse-app .contact-submit:focus-visible { outline:2px solid var(--green); outline-offset:3px; }

  /* ---- Formulaire contact : retours visuels (statut, chargement, erreurs) ---- */
  /* message de statut sous le bouton (succès / erreur / info) */
  #promesse-app .contact-status {
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    display: none;            /* masqué tant qu'il n'y a pas de message */
  }
  #promesse-app .contact-status.is-visible { display: block; }
  #promesse-app .contact-status.is-success {
    color: #c8f7d4;
    background: rgba(39,214,81,0.10);
    border-color: rgba(39,214,81,0.45);
  }
  #promesse-app .contact-status.is-error {
    color: #ffd2d2;
    background: rgba(229,72,72,0.10);
    border-color: rgba(229,72,72,0.45);
  }
  #promesse-app .contact-status.is-info {
    color: #d7d7d7;
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.18);
  }
  /* bouton pendant l'envoi : désactivé + curseur d'attente */
  #promesse-app .contact-submit[disabled] {
    opacity: 0.6;
    cursor: progress;
  }
  /* champ invalide : la ligne du bas passe en rouge */
  #promesse-app .contact-form input.is-invalid,
  #promesse-app .contact-form textarea.is-invalid,
  #promesse-app .contact-form select.is-invalid {
    border-bottom-color: #e54848;
    box-shadow: 0 1px 0 0 #e54848;
  }
#promesse-app .site-footer {
    position:relative;
    border-top:1px solid rgba(255,255,255,0.10);
    max-width:1400px;
    margin:0 auto;
    padding:54px 0 70px;
    display:grid;
    grid-template-columns:1.7fr 1fr;
    gap:40px 30px;
    align-items:start;
  }
#promesse-app .foot-status {
    display:flex; align-items:center; gap:10px;
    font-size:12px; font-weight:600; letter-spacing:.08em;
    color:#cfcfcf;
  }
#promesse-app .foot-dot {
    width:9px; height:9px; border-radius:50%;
    background:var(--green);
    box-shadow:0 0 8px rgba(39,214,81,.8);
  }
#promesse-app .foot-col { display:flex; flex-direction:column; }
#promesse-app .foot-label {
    font-size:11px; font-weight:600; letter-spacing:.1em;
    color:#7a7a7a;
    margin-bottom:18px;
  }
#promesse-app .foot-col ul { list-style:none; margin:0; padding:0; }
#promesse-app .foot-col li { margin-bottom:6px; }
#promesse-app .foot-col a {
    font-size:clamp(24px,2.6vw,34px);
    font-weight:500;
    color:#fff;
    text-decoration:none;
    line-height:1.22;
    transition:color .25s ease;
  }
#promesse-app .foot-col a:hover { color:var(--green); }

/* Liens légaux du pied de page : plus compacts/lisibles que les gros liens MENU. */
#promesse-app .foot-col--legal ul.foot-legal { list-style:none; margin:0; padding:0; }
#promesse-app .foot-legal li { margin-bottom:12px; }
#promesse-app .foot-legal a {
    font-size:clamp(15px,1.25vw,18px);
    font-weight:500;
    line-height:1.35;
    color:#cfcfcf;
    text-decoration:none;
    transition:color .25s ease;
  }
#promesse-app .foot-legal a:hover { color:var(--green); }
#promesse-app .foot-legal a:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:3px; }

@media (max-width:860px) {
/* [V23] une seule colonne : les champs s'empilent dans l'ordre du DOM,
   identique dans les deux modes. Aucun placement à neutraliser. */
#promesse-app .contact-form { grid-template-columns:1fr; row-gap:34px; }
#promesse-app .field--actions .contact-submit { width:100%; min-width:0; }
/* [DEMO] Trois objets ne tiennent pas sur une ligne de telephone : le
   retour automatique donnait 2 + 1, avec la derniere entree seule et
   visuellement decalee. On empile donc les trois, chacune centree — la
   rangee devient une liste, ce qui se lit mieux au pouce. */
#promesse-app .contact-mode { flex-direction:column; gap:26px; margin-bottom:46px; }
#promesse-app .cm-opt { flex-direction:row; gap:12px; }
#promesse-app .cm-label { font-size:15px; white-space:normal; text-align:center; }
#promesse-app .contact-logo { position:static; margin:0 auto 26px; }
#promesse-app .contact-head { min-height:0; }
#promesse-app .contact-title { margin-left:0; }
#promesse-app .site-footer { grid-template-columns:1fr; gap:40px; }
  }

/* ===================== Animation moniteur OptoLead (panel1) ===================== */
/* Tout est préfixé .pa1- et scopé sous #panel1-anim pour éviter toute collision. */
#panel1-anim{
  --pa1-bg-deep:#071009;
  --pa1-screen:#0c1a14;
  --pa1-emerald:#2d6a4f;
  --pa1-accent:#43e6a0;
  --pa1-cream:#eef2ef;
  --pa1-muted:#8fa89c;
  --pa1-line:rgba(238,242,239,.12);
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0, rgba(0,0,0,0) 78px,
      rgba(0,0,0,.28) 78px, rgba(0,0,0,.28) 80px),
    radial-gradient(120% 120% at 50% 20%, #0b1a12 0%, var(--pa1-bg-deep) 60%, #04080600 100%),
    var(--pa1-bg-deep);
  perspective:1700px;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  color:var(--pa1-cream);
}

/* Aurora : blobs verts flous */
#panel1-anim .pa1-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
#panel1-anim .pa1-blob{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:0;
  mix-blend-mode:screen;transform:scale(.6);
}
#panel1-anim .pa1-b1{width:46vmin;height:46vmin;left:6%;top:12%;
  background:radial-gradient(circle at 30% 30%, #2d6a4f, transparent 70%);}
#panel1-anim .pa1-b2{width:40vmin;height:40vmin;right:8%;top:8%;
  background:radial-gradient(circle at 60% 40%, #43e6a0, transparent 70%);}
#panel1-anim .pa1-b3{width:52vmin;height:52vmin;left:20%;bottom:2%;
  background:radial-gradient(circle at 50% 50%, #1b4332, transparent 72%);}
#panel1-anim .pa1-b4{width:34vmin;height:34vmin;right:16%;bottom:8%;
  background:radial-gradient(circle at 40% 60%, #40916c, transparent 70%);}

/* Cartes squelettes flottantes */
/* Cartes flottantes : fondues dans le décor, subtiles, et toutes différentes */
#panel1-anim .pa1-skel{
  --pa1-op:.5;                 /* opacité finale (surchargée par carte) */
  --pa1-edge:rgba(67,230,160,.16); /* teinte de bordure (surchargée) */
  position:absolute;border-radius:16px;padding:15px;opacity:0;
  background:linear-gradient(180deg, rgba(12,26,19,.34), rgba(7,15,11,.28));
  border:1px solid var(--pa1-edge);
  backdrop-filter:blur(3px);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
  width:200px;
}
#panel1-anim .pa1-skel .pa1-bar{height:9px;border-radius:6px;
  background:linear-gradient(90deg, rgba(67,230,160,.16), rgba(238,242,239,.07));
  margin:8px 0;}
#panel1-anim .pa1-skel .pa1-bar.pa1-short{width:55%;}
#panel1-anim .pa1-skel .pa1-dot{width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg, rgba(67,230,160,.7), rgba(45,106,79,.7));margin-bottom:10px;}

/* Position + personnalité propre à chaque carte */
#panel1-anim .pa1-tl{left:3%;top:15%;  --pa1-op:.52; --pa1-edge:rgba(67,230,160,.20); --pa1-rot:-2.5deg;
  width:210px;transform:translateY(18px) rotate(-2.5deg);}
#panel1-anim .pa1-ml{left:1.5%;top:54%; --pa1-op:.4;  --pa1-edge:rgba(120,160,140,.14); --pa1-rot:1.5deg;
  width:170px;padding:13px;transform:translateY(18px) rotate(1.5deg);}
#panel1-anim .pa1-tr{right:3%;top:13%;  --pa1-op:.46; --pa1-edge:rgba(67,230,160,.14); --pa1-rot:2deg;
  width:190px;transform:translateY(18px) rotate(2deg);}
#panel1-anim .pa1-br{right:2%;bottom:11%; --pa1-op:.58; --pa1-edge:rgba(67,230,160,.24); --pa1-rot:-1.5deg;
  width:225px;transform:translateY(18px) rotate(-1.5deg);}

/* Variations de contenu pour qu'elles ne se ressemblent pas */
#panel1-anim .pa1-ml .pa1-dot{display:none;}          /* carte sans pastille */
#panel1-anim .pa1-tr .pa1-dot{width:26px;height:26px;border-radius:8px;} /* pastille carrée + petite */
#panel1-anim .pa1-br .pa1-dot{width:38px;height:38px;}                    /* pastille plus grande */
#panel1-anim .pa1-tl .pa1-bar.pa1-short{width:70%;}
#panel1-anim .pa1-br .pa1-bar.pa1-short{width:42%;}

/* Le moniteur 3D */
#panel1-anim .pa1-monitor{
  position:relative;width:min(1180px,92%);aspect-ratio:1180/800;
  transform-style:preserve-3d;opacity:0;
  transform:rotateX(6deg) rotateY(-19deg) rotateZ(2.2deg) scale(.9) translateY(40px);
}
#panel1-anim .pa1-bezel{
  position:absolute;inset:0;border-radius:22px;
  background:linear-gradient(160deg,#12241b,#0a1610 60%,#060d09);
  padding:2.2%;
  box-shadow:
    0 60px 120px rgba(0,0,0,.6),
    0 10px 30px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.05);
}
#panel1-anim .pa1-display{
  position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;
  background:radial-gradient(120% 140% at 50% 0%, #12281d 0%, var(--pa1-screen) 55%, #081410 100%);
  border:1px solid rgba(255,255,255,.05);
}
/* scanlines + reflet */
#panel1-anim .pa1-display::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  opacity:.5;mix-blend-mode:multiply;
}
#panel1-anim .pa1-display::before{
  content:"";position:absolute;top:-60%;left:-30%;width:60%;height:220%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10) 45%, transparent 60%);
  transform:rotate(8deg);pointer-events:none;
  animation:pa1-sheen 8s ease-in-out infinite;opacity:0;
}

/* Interface interne */
#panel1-anim .pa1-ui{position:absolute;inset:0;padding:clamp(14px,3%,40px);
  display:flex;flex-direction:column;z-index:2;}

/* Cartes d'arrière-plan DANS l'écran, disposées autour du texte du hero */
#panel1-anim .pa1-cards{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
#panel1-anim .pa1-card{
  --pa1-cop:.5;--pa1-cedge:rgba(67,230,160,.16);--pa1-crot:0deg;
  position:absolute;border-radius:15px;padding:16px;opacity:0;
  background:linear-gradient(180deg, rgba(12,26,19,.30), rgba(7,15,11,.24));
  border:1px solid var(--pa1-cedge);
  box-shadow:0 20px 46px rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
}
#panel1-anim .pa1-card .pa1-c-bar{height:8px;border-radius:5px;margin:7px 0;
  background:linear-gradient(90deg, rgba(67,230,160,.15), rgba(238,242,239,.06));}
#panel1-anim .pa1-card .pa1-c-bar.pa1-c-short{width:52%;}
#panel1-anim .pa1-card .pa1-c-dot{width:30px;height:30px;border-radius:50%;margin-bottom:9px;
  background:linear-gradient(135deg, rgba(67,230,160,.65), rgba(45,106,79,.65));}
#panel1-anim .pa1-card .pa1-c-dot.pa1-c-sq{border-radius:8px;width:24px;height:24px;}
#panel1-anim .pa1-card .pa1-c-dot.pa1-c-lg{width:36px;height:36px;}

/* Positions : deux à gauche, deux à droite du texte centré */
#panel1-anim .pa1-c-l1{left:3.5%;top:29%;   width:230px;--pa1-cop:.5; --pa1-cedge:rgba(67,230,160,.20);--pa1-crot:0deg;}
#panel1-anim .pa1-c-l2{left:5.5%;bottom:15%; width:185px;--pa1-cop:.38;--pa1-cedge:rgba(120,160,140,.13);--pa1-crot:0deg;}
#panel1-anim .pa1-c-r1{right:3.5%;top:25%;   width:210px;--pa1-cop:.46;--pa1-cedge:rgba(67,230,160,.14);--pa1-crot:0deg;}
#panel1-anim .pa1-c-r2{right:5%;bottom:19%;  width:245px;--pa1-cop:.56;--pa1-cedge:rgba(67,230,160,.22);--pa1-crot:0deg;}
#panel1-anim .pa1-c-l1 .pa1-c-short{width:66%;}
#panel1-anim .pa1-c-r2 .pa1-c-short{width:44%;}

/* Le texte du hero reste au-dessus et lisible */
#panel1-anim .pa1-headline{position:relative;z-index:2;}
#panel1-anim .pa1-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#panel1-anim .pa1-logo{display:flex;align-items:center;gap:11px;font-family:"Poppins","Helvetica Neue",Arial,sans-serif;
  font-weight:800;font-size:clamp(17px,1.9vw,25px);letter-spacing:-.2px;color:var(--pa1-cream);
  padding-left:clamp(6px,1.6vw,26px);
  opacity:0;transform:translateY(-8px);}
/* Wordmark bicolore facon capture : OPTO blanc + LEAD vert, capitales serrees */
#panel1-anim .pa1-logo .pa1-wm{display:inline-flex;text-transform:uppercase;line-height:1;}
#panel1-anim .pa1-logo .pa1-wm-opto{color:var(--pa1-cream);}
#panel1-anim .pa1-logo .pa1-wm-lead{color:var(--green);}
#panel1-anim .pa1-logo svg{width:1.15em;height:1.15em;display:block;}
/* Vrai logo (image) + halo tournant dans la tablette de l'image 1 */
#panel1-anim .pa1-logo-orb{width:2.1em;height:2.1em;flex:0 0 auto;display:inline-block;}
#panel1-anim .pa1-logo-orb img{width:100%;height:100%;object-fit:contain;border-radius:8px;position:relative;z-index:2;display:block;}

#panel1-anim .pa1-nav{display:flex;gap:clamp(8px,1.4vw,22px);align-items:center;
  padding:8px 16px;border-radius:999px;
  background:rgba(10,22,16,.5);border:1px solid var(--pa1-line);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(-8px);}
#panel1-anim .pa1-nav a{font-size:clamp(10px,1.05vw,13px);color:var(--pa1-muted);white-space:nowrap;
  cursor:pointer;padding:5px 11px;border-radius:999px;transition:color .2s ease, background .2s ease;
  user-select:none;text-decoration:none;display:inline-block;}
#panel1-anim .pa1-nav a:hover{color:var(--pa1-cream);background:rgba(67,230,160,.14);}
#panel1-anim .pa1-nav a.pa1-on{color:#04120b;background:linear-gradient(135deg,#43e6a0,#2d6a4f);font-weight:600;}
#panel1-anim .pa1-hero{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:clamp(10px,1.6vh,22px);padding:0 4%;}
#panel1-anim .pa1-eyebrow{font-family:"JetBrains Mono",monospace;font-size:clamp(11px,1.15vw,14px);
  letter-spacing:2px;text-transform:uppercase;color:var(--pa1-accent);
  padding:6px 14px;border:1px solid rgba(67,230,160,.35);border-radius:999px;
  opacity:0;transform:translateY(10px);}
#panel1-anim .pa1-headline{font-family:"Fraunces",serif;font-weight:500;line-height:1.05;
  font-size:clamp(30px,5.2vw,72px);max-width:16ch;color:var(--pa1-cream);}
#panel1-anim .pa1-word{display:inline-block;opacity:0;transform:translateY(18px);
  filter:blur(6px);}
#panel1-anim .pa1-sub{font-size:clamp(14px,1.55vw,20px);color:var(--pa1-muted);max-width:44ch;
  line-height:1.5;opacity:0;transform:translateY(12px);}
#panel1-anim .pa1-btn{margin-top:10px;font-size:clamp(16px,1.7vw,21px);font-weight:700;
  padding:16px 42px;border-radius:999px;color:#04120b;
  background:linear-gradient(135deg,#43e6a0,#2d6a4f);
  box-shadow:0 18px 44px rgba(67,230,160,.42), 0 0 0 1px rgba(67,230,160,.35);
  opacity:0;transform:translateY(12px) scale(.96);
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;user-select:none;
  animation:pa1-btn-pulse 2.6s ease-in-out infinite;
  transition:box-shadow .25s ease, filter .25s ease, transform .1s ease;}
/* pulsation douce pour attirer l'oeil vers le bouton */
@keyframes pa1-btn-pulse{
  0%,100%{box-shadow:0 18px 44px rgba(67,230,160,.42), 0 0 0 1px rgba(67,230,160,.35);}
  50%{box-shadow:0 20px 54px rgba(67,230,160,.62), 0 0 0 3px rgba(67,230,160,.30);}
}
/* pa1-lit = état "posé" après l'animation d'entrée, pour permettre le hover */
#panel1-anim .pa1-btn.pa1-lit{transform:translateY(0) scale(1);}
#panel1-anim .pa1-btn.pa1-lit:hover{
  filter:brightness(1.12);
  animation:none;
  box-shadow:0 22px 60px rgba(67,230,160,.7), 0 0 0 4px rgba(67,230,160,.4);}
#panel1-anim .pa1-btn.pa1-lit:active{transform:translateY(1px) scale(.99);}
#panel1-anim .pa1-btn .pa1-arrow{display:inline-block;transition:transform .25s ease;}
#panel1-anim .pa1-btn.pa1-lit:hover .pa1-arrow{transform:translateX(6px) scale(1.1);}

/* ---------- Déclenchement : animations lancées quand .pa1-play est ajouté ---------- */
#panel1-anim.pa1-play .pa1-monitor{
  animation:pa1-monitor-in 1.9s cubic-bezier(.2,.7,.2,1) .1s forwards,
            pa1-float 9s ease-in-out 2.2s infinite;
}
#panel1-anim.pa1-play .pa1-display::before{animation:pa1-sheen 8s ease-in-out 2.4s infinite;opacity:1;}
#panel1-anim.pa1-play .pa1-blob{animation:pa1-blob-in 1.4s ease forwards, pa1-drift 14s ease-in-out infinite;}
#panel1-anim.pa1-play .pa1-b1{animation-delay:.2s,1.6s;}
#panel1-anim.pa1-play .pa1-b2{animation-delay:.4s,1.8s;}
#panel1-anim.pa1-play .pa1-b3{animation-delay:.3s,1.7s;}
#panel1-anim.pa1-play .pa1-b4{animation-delay:.5s,1.9s;}
#panel1-anim.pa1-play .pa1-skel{animation:pa1-skel-in 1.2s ease forwards;}
#panel1-anim.pa1-play .pa1-tl{animation-delay:1.9s;}
#panel1-anim.pa1-play .pa1-ml{animation-delay:2.15s;}
#panel1-anim.pa1-play .pa1-tr{animation-delay:2.0s;}
#panel1-anim.pa1-play .pa1-br{animation-delay:2.3s;}
/* Cartes d'arrière-plan dans l'écran : apparition douce et décalée */
#panel1-anim.pa1-play .pa1-card{animation:pa1-card-in 1.3s ease forwards;}
#panel1-anim.pa1-play .pa1-c-l1{animation-delay:.9s;}
#panel1-anim.pa1-play .pa1-c-r1{animation-delay:1.05s;}
#panel1-anim.pa1-play .pa1-c-l2{animation-delay:1.2s;}
#panel1-anim.pa1-play .pa1-c-r2{animation-delay:1.35s;}
#panel1-anim .pa1-card{transform:translateY(14px) rotate(var(--pa1-crot));}
#panel1-anim.pa1-play .pa1-logo{animation:pa1-rise-y 1s ease .7s forwards;}
#panel1-anim.pa1-play .pa1-nav{animation:pa1-rise-y 1s ease .95s forwards;}
#panel1-anim.pa1-play .pa1-eyebrow{animation:pa1-rise 1s ease 2.4s forwards;}
#panel1-anim.pa1-play .pa1-sub{animation:pa1-rise 1s ease 3.5s forwards;}
#panel1-anim.pa1-play .pa1-btn{animation:pa1-rise 1s ease 3.75s forwards;}
#panel1-anim.pa1-play .pa1-word{animation:pa1-word-in .8s cubic-bezier(.2,.7,.2,1) forwards;}
#panel1-anim.pa1-play .pa1-w1{animation-delay:2.6s;}
#panel1-anim.pa1-play .pa1-w2{animation-delay:2.68s;}
#panel1-anim.pa1-play .pa1-w3{animation-delay:2.76s;}
#panel1-anim.pa1-play .pa1-w4{animation-delay:2.84s;}
#panel1-anim.pa1-play .pa1-w5{animation-delay:2.92s;}
#panel1-anim.pa1-play .pa1-w6{animation-delay:3.0s;}
#panel1-anim.pa1-play .pa1-w7{animation-delay:3.08s;}
#panel1-anim.pa1-play .pa1-w8{animation-delay:3.16s;}

@keyframes pa1-monitor-in{
  from{opacity:0;transform:rotateX(6deg) rotateY(-19deg) rotateZ(2.2deg) scale(.9) translateY(40px);}
  to{opacity:1;transform:rotateX(6deg) rotateY(-19deg) rotateZ(2.2deg) scale(.92) translateY(0);}
}
@keyframes pa1-float{
  0%,100%{transform:rotateX(6deg) rotateY(-19deg) rotateZ(2.2deg) scale(.92) translateY(0);}
  50%{transform:rotateX(5deg) rotateY(-17deg) rotateZ(2deg) scale(.925) translateY(-10px);}
}
@keyframes pa1-sheen{0%{transform:translateX(-40%) rotate(8deg);}60%,100%{transform:translateX(320%) rotate(8deg);}}
@keyframes pa1-blob-in{to{opacity:.55;transform:scale(1);}}
@keyframes pa1-drift{0%,100%{translate:0 0;}50%{translate:4% -4%;}}
@keyframes pa1-skel-in{to{opacity:var(--pa1-op);transform:translateY(0) rotate(var(--pa1-rot));}}
@keyframes pa1-card-in{to{opacity:var(--pa1-cop);transform:translateY(0) rotate(var(--pa1-crot));}}
@keyframes pa1-rise{to{opacity:1;transform:translateY(0);}}
@keyframes pa1-rise-y{to{opacity:1;transform:translateY(0);}}
@keyframes pa1-word-in{to{opacity:1;transform:translateY(0);filter:blur(0);}}

@media (max-width:760px){
  #panel1-anim .pa1-skel{display:none;}
  #panel1-anim .pa1-nav{display:none;}
  #panel1-anim .pa1-cards{display:none;}
}
@media (prefers-reduced-motion:reduce){
  #panel1-anim .pa1-card{opacity:var(--pa1-cop)!important;transform:rotate(var(--pa1-crot))!important;}
  #panel1-anim *,#panel1-anim *::before,#panel1-anim *::after{animation:none!important;
    opacity:1!important;filter:none!important;transform:none!important;}
  #panel1-anim .pa1-monitor{transform:rotateX(6deg) rotateY(-19deg) rotateZ(2.2deg) scale(.92)!important;}
  #panel1-anim .pa1-skel{opacity:var(--pa1-op)!important;transform:rotate(var(--pa1-rot))!important;}
}

/* ===================== ANIMATION 2 (image 2) ===================== */
#panel2-anim {
    --pa2-bg-0: #050805;
    --pa2-bg-1: #0a0f0b;
    --pa2-phone-frame: #1a1d1a;
    --pa2-phone-screen: #0a0c0a;
    --pa2-accent: #6ee85f;
    --pa2-accent-dim: #3fa832;
    --pa2-accent-glow: rgba(110, 232, 95, 0.5);
    --pa2-cream: #f4f6f3;
    --pa2-muted: #6f7a6d;
    --pa2-card: #14181400;
  }#panel2-anim .pa2-stage {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(140% 100% at 50% 120%, #0d1a0e 0%, #070c07 45%, #040604 100%);
    perspective: 1600px;
    perspective-origin: 50% 60%;
    overflow: hidden;
  }
  /* ---------- FOND : nom OPTOLEAD défilant (bandes typographiques) ---------- */
  #panel2-anim .pa2-wordmarks {
    position: absolute;
    inset: 0;
    z-index: 1;                 /* au-dessus du dégradé de fond, sous le téléphone (z-index:10) */
    overflow: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;    /* bandes empilées et centrées, sans gap */
    opacity: 0;
    animation: pa2-glowIn 2.6s ease 0.6s forwards;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  #panel2-anim .pa2-wm-row {
    position: relative;
    display: flex;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    flex: 0 0 auto;             /* hauteur = hauteur du texte, lignes collées bord à bord */
  }
  #panel2-anim .pa2-wm-track {
    display: flex;
    flex: 0 0 auto;
  }
  #panel2-anim .pa2-wm-word {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 6vh, 66px);
    line-height: 0.92;          /* bandes serrées verticalement */
    letter-spacing: -0.03em;
    padding-right: 0;           /* OPTOLEAD collés sur l'axe X */
    display: inline-block;
  }
  /* segment plein vert */
  #panel2-anim .pa2-wm-fill {
    color: var(--pa2-accent);
  }
  /* segment en contour vert (outline) */
  #panel2-anim .pa2-wm-out {
    color: transparent;
    -webkit-text-stroke: 1.6px var(--pa2-accent-dim);
    paint-order: stroke fill;
  }
  /* défilement gauche -> droite et droite -> gauche (une copie = 50% de la piste dupliquée) */
  @keyframes pa2-wm-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  @keyframes pa2-wm-rtl { from { transform: translateX(0); }    to { transform: translateX(-50%); } }

  /* sens + vitesse par ligne (les positions verticales sont gérées par le flex) */
  #panel2-anim .pa2-wm-r1 { opacity: 0.15; animation: pa2-wm-rtl 84s linear infinite; }
  #panel2-anim .pa2-wm-r2 { opacity: 0.10; animation: pa2-wm-ltr 116s linear infinite; }
  #panel2-anim .pa2-wm-r3 { opacity: 0.13; animation: pa2-wm-rtl 100s linear infinite; }
  #panel2-anim .pa2-wm-r4 { opacity: 0.09; animation: pa2-wm-ltr 128s linear infinite; }
  #panel2-anim .pa2-wm-r5 { opacity: 0.14; animation: pa2-wm-rtl 92s linear infinite; }
  #panel2-anim .pa2-wm-r6 { opacity: 0.10; animation: pa2-wm-ltr 108s linear infinite; }
  #panel2-anim .pa2-wm-r7 { opacity: 0.13; animation: pa2-wm-rtl 120s linear infinite; }
  #panel2-anim .pa2-wm-r8 { opacity: 0.09; animation: pa2-wm-ltr 96s linear infinite; }
  #panel2-anim .pa2-wm-r9 { opacity: 0.15; animation: pa2-wm-rtl 112s linear infinite; }
  #panel2-anim .pa2-wm-r10 { opacity: 0.10; animation: pa2-wm-ltr 88s linear infinite; }
  #panel2-anim .pa2-wm-r11 { opacity: 0.13; animation: pa2-wm-rtl 124s linear infinite; }
  #panel2-anim .pa2-wm-r12 { opacity: 0.09; animation: pa2-wm-ltr 104s linear infinite; }
  #panel2-anim .pa2-wm-r13 { opacity: 0.14; animation: pa2-wm-rtl 94s linear infinite; }
  #panel2-anim .pa2-wm-r14 { opacity: 0.10; animation: pa2-wm-ltr 118s linear infinite; }
  #panel2-anim .pa2-wm-r15 { opacity: 0.13; animation: pa2-wm-rtl 102s linear infinite; }
  #panel2-anim .pa2-wm-r16 { opacity: 0.09; animation: pa2-wm-ltr 126s linear infinite; }
  /* corner glow accents like the reference */
  #panel2-anim .pa2-corner-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    opacity: 0;
    animation: pa2-glowIn 3s ease 0.5s forwards;
  }
  @keyframes pa2-glowIn { to { opacity: 1; } }#panel2-anim .pa2-glow-tr { top: -12%; right: -8%; width: 46%; height: 52%;
             background: radial-gradient(circle, rgba(30,80,35,0.5), transparent 70%); }#panel2-anim .pa2-glow-bl { bottom: -18%; left: -10%; width: 50%; height: 55%;
             background: radial-gradient(circle, rgba(40,100,45,0.4), transparent 70%); }/* soft ground shadow anchoring the phone */
  #panel2-anim .pa2-ground-shadow {
    position: absolute;
    left: 50%; bottom: 3%;
    width: min(560px, 82vw); height: 90px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0,0,0,0.85), transparent 68%);
    filter: blur(26px);
    opacity: 0;
    animation: pa2-glowIn 2.2s ease 2s forwards;
    pointer-events: none;
  }/* ---------- INCRUSTATIONS (corner text) ---------- */
  #panel2-anim .pa2-label {
    position: absolute;
    color: var(--pa2-muted);
    font-size: clamp(12px, 1.3vw, 16px);
    font-weight: 500;
    opacity: 0;
    animation: pa2-fadeLabel 1.4s ease forwards;
    z-index: 30;
  }
  @keyframes pa2-fadeLabel { to { opacity: 1; } }#panel2-anim .pa2-brand {
    top: 5%; left: 3.5%;
    color: var(--pa2-cream);
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.5px;
    animation-delay: 0.3s;
  }#panel2-anim .pa2-brand .pa2-cursor { color: var(--pa2-accent); animation: pa2-blink 1.2s step-end infinite; }
  @keyframes pa2-blink { 50% { opacity: 0; } }#panel2-anim .pa2-lbl-tr1 { top: 5%;   right: 3.5%; color: #aab5a8; animation-delay: 0.9s; }#panel2-anim .pa2-lbl-tr2 { top: 9.5%; right: 3.5%; animation-delay: 1.05s; }#panel2-anim .pa2-lbl-tr3 { top: 14%;  right: 3.5%; animation-delay: 1.2s; }#panel2-anim .pa2-lbl-bl { bottom: 5%; left: 3.5%; animation-delay: 1.35s; }#panel2-anim .pa2-year {
    bottom: 4.5%; right: 3.5%;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    color: var(--pa2-muted);
    animation-delay: 1.5s;
  }#panel2-anim .pa2-year .pa2-hl { color: var(--pa2-accent); }/* ---------- 3D PHONE ---------- */
  #panel2-anim .pa2-phone-wrap {
    position: absolute;
    left: 50%;
    top: 54%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
    z-index: 10;
  }#panel2-anim .pa2-phone {
    position: relative;
    width: min(360px, 76vw);
    height: min(740px, 156vw);
    transform-style: preserve-3d;
    transform: translateY(95vh) rotateX(50deg) rotateY(-36deg) rotateZ(13deg) scale(0.9);
    animation: pa2-phoneRise 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  }

  @keyframes pa2-phoneRise {
    100% { transform: translateY(0) rotateX(16deg) rotateY(-30deg) rotateZ(6deg) scale(1); }
  }#panel2-anim .pa2-phone-float {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: pa2-phoneFloat 8s ease-in-out 3.2s infinite;
  }
  @keyframes pa2-phoneFloat {
    0%, 100% { transform: translateY(0) rotateY(0deg); }
    50%      { transform: translateY(-16px) rotateY(2deg); }
  }/* phone glow halo behind */
  #panel2-anim .pa2-phone-halo {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) translateZ(-60px);
    width: 130%; height: 90%;
    background: radial-gradient(ellipse, var(--pa2-accent-glow), transparent 65%);
    filter: blur(70px);
    opacity: 0;
    animation: pa2-haloIn 2s ease 1.6s forwards, pa2-haloPulse 5s ease-in-out 3.6s infinite;
  }
  @keyframes pa2-haloIn { to { opacity: 0.55; } }
  @keyframes pa2-haloPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.85; }
  }#panel2-anim .pa2-frame {
    position: absolute;
    inset: 0;
    border-radius: 54px;
    background: linear-gradient(150deg, #3a3f3a 0%, #1c201c 20%, #0c0e0c 52%, #262a26 100%);
    padding: 13px;
    transform: translateZ(30px);
    box-shadow:
      inset 0 3px 5px rgba(255,255,255,0.22),
      inset 3px 0 6px rgba(255,255,255,0.12),
      inset 0 -5px 10px rgba(0,0,0,0.9),
      inset -4px 0 10px rgba(0,0,0,0.85),
      0 0 0 1.5px rgba(0,0,0,0.7),
      70px 90px 130px rgba(0,0,0,0.8);
  }/* ---- extruded body: stacked shells create real 30px thickness ---- */
  #panel2-anim .pa2-body-layer {
    position: absolute;
    inset: 0;
    border-radius: 54px;
    background: linear-gradient(155deg, #40453f 0%, #212421 26%, #0e100e 55%, #2b2f2b 100%);
  }#panel2-anim .pa2-back-cover {
    background: linear-gradient(160deg, #242824 0%, #101210 45%, #080a08 100%);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.65), 40px 60px 100px rgba(0,0,0,0.6);
  }/* physical buttons protruding from the right edge */
  #panel2-anim .pa2-side-btn {
    position: absolute;
    right: -4px;
    width: 6px;
    border-radius: 3px;
    background: linear-gradient(180deg, #4d534d, #232623 60%, #131513);
    transform: translateZ(15px);
    box-shadow: 1px 2px 3px rgba(0,0,0,0.85);
  }#panel2-anim .pa2-btn-vol-up { top: 17%;   height: 6.5%; }#panel2-anim .pa2-btn-vol-down { top: 25.5%; height: 6.5%; }#panel2-anim .pa2-btn-power { top: 38%;   height: 11%; }#panel2-anim .pa2-screen {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 42px;
    overflow: hidden;
    background: linear-gradient(170deg, #10140f 0%, #0a0c0a 40%, #080a08 100%);
  }/* screen glass reflection */
  #panel2-anim .pa2-screen::before {
    content: "";
    position: absolute;
    top: 0; left: -40%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(200,255,200,0.05), transparent);
    transform: skewX(-12deg);
    z-index: 20;
    pointer-events: none;
    animation: pa2-screenSheen 7s ease-in-out 4s infinite;
  }
  @keyframes pa2-screenSheen {
    0%, 65%, 100% { left: -50%; opacity: 0; }
    75% { opacity: 1; }
    90% { left: 130%; opacity: 0; }
  }/* notch */
  #panel2-anim .pa2-notch {
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    width: 34%; height: 26px;
    background: #000;
    border-radius: 0 0 16px 16px;
    z-index: 15;
  }/* ---------- APP UI ---------- */
  #panel2-anim .pa2-app {
    position: absolute;
    inset: 0;
    padding: 46px 26px 26px;
    display: flex;
    flex-direction: column;
    z-index: 5;
  }#panel2-anim .pa2-app-el { opacity: 0; transform: translateY(16px); animation: pa2-appEl 0.9s cubic-bezier(0.16,1,0.3,1) forwards; }
  @keyframes pa2-appEl { to { opacity: 1; transform: translateY(0); } }#panel2-anim .pa2-statusbar {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 15px; font-weight: 600; color: var(--pa2-cream);
    margin-bottom: 18px;
    animation-delay: 2.4s;
  }#panel2-anim .pa2-statusbar .pa2-icons { display: flex; gap: 6px; align-items: center; }#panel2-anim .pa2-statusbar .pa2-icons span { display: inline-block; width: 16px; height: 11px; }#panel2-anim .pa2-sig { width: 17px; height: 12px;
    background: linear-gradient(90deg, var(--pa2-cream) 0 70%, rgba(244,246,243,0.35) 70%);
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 4px);
            mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 4px); }#panel2-anim .pa2-batt { width: 22px; height: 12px; border: 1.5px solid var(--pa2-cream); border-radius: 3px; position: relative; }#panel2-anim .pa2-batt::after { content:""; position:absolute; inset: 1.5px; width: 70%; background: var(--pa2-accent); border-radius: 1px; }

  /* ---- en-tête d'application : marque + statut temps réel ---- */
  #panel2-anim .pa2-apphead {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
    animation-delay: 2.5s;
  }#panel2-anim .pa2-brandline {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
    font-weight: 800; font-size: 18px; letter-spacing: -0.2px;
  }
  /* Vrai logo OptoLead (meme image que la tablette de l'image 1) */
  #panel2-anim .pa2-logo-orb { width: 1.55em; height: 1.55em; flex: 0 0 auto; display: inline-block; }
  #panel2-anim .pa2-logo-orb img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; display: block; }
  /* Wordmark bicolore identique a la tablette : OPTO creme + LEAD vert, capitales */
  #panel2-anim .pa2-wm { display: inline-flex; text-transform: uppercase; line-height: 1; }
  #panel2-anim .pa2-wm-opto { color: var(--pa2-cream); }
  #panel2-anim .pa2-wm-lead { color: var(--pa2-accent); }#panel2-anim .pa2-live {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--pa2-accent); font-size: 11px; font-weight: 600;
    background: rgba(110,232,95,0.10);
    border: 1px solid rgba(110,232,95,0.22);
    border-radius: 999px; padding: 4px 9px;
  }#panel2-anim .pa2-live i {
    width: 5px; height: 5px; border-radius: 50%; background: var(--pa2-accent);
    box-shadow: 0 0 8px var(--pa2-accent);
    animation: pa2-livePulse 2s ease-in-out 3.4s infinite;
  }
  @keyframes pa2-livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

  /* ---- titre de vue ---- */
  #panel2-anim .pa2-greet { margin-bottom: 16px; animation-delay: 2.6s; }#panel2-anim .pa2-greet-t {
    color: var(--pa2-cream); font-size: clamp(22px, 5.4vw, 27px); font-weight: 700;
    letter-spacing: -0.6px; line-height: 1.15;
  }#panel2-anim .pa2-greet-s { color: var(--pa2-muted); font-size: 13px; font-weight: 500; margin-top: 3px; }

  /* ---- trio de KPI ---- */
  #panel2-anim .pa2-kpis {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-bottom: 14px;
    animation-delay: 2.72s;
  }#panel2-anim .pa2-kpi {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 11px 8px 9px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    backdrop-filter: blur(10px);
  }#panel2-anim .pa2-kpi-v {
    color: var(--pa2-cream); font-size: 19px; font-weight: 700;
    letter-spacing: -0.4px; font-variant-numeric: tabular-nums;
  }#panel2-anim .pa2-kpi-l { color: var(--pa2-muted); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2px; }

  /* ---- carte graphique principale ---- */
  #panel2-anim .pa2-chartcard {
    background: linear-gradient(135deg, rgba(110,232,95,0.12), rgba(20,40,20,0.4));
    border: 1px solid rgba(110,232,95,0.22);
    border-radius: 20px;
    padding: 15px 15px 11px;
    margin-bottom: 18px;
    animation-delay: 2.84s;
  }#panel2-anim .pa2-chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }#panel2-anim .pa2-chart-tag { color: var(--pa2-muted); font-size: 12px; font-weight: 500; }#panel2-anim .pa2-chart-val {
    color: var(--pa2-cream); font-size: 26px; font-weight: 700; margin-top: 2px;
    letter-spacing: -0.5px; font-variant-numeric: tabular-nums;
  }#panel2-anim .pa2-chart-pct {
    color: var(--pa2-accent); font-size: 13px; font-weight: 600;
    background: rgba(110,232,95,0.12); border-radius: 8px; padding: 4px 8px;
    display: inline-flex; align-items: center; gap: 4px;
  }#panel2-anim .pa2-chart-pct svg { width: 11px; height: 11px; }#panel2-anim .pa2-chart-axis {
    display: flex; justify-content: space-between;
    color: var(--pa2-muted); font-size: 10px; font-weight: 500;
    margin-top: 6px;
  }

  /* ---- en-tête de flux ---- */
  #panel2-anim .pa2-feed-head {
    display: flex; align-items: baseline; justify-content: space-between;
    color: var(--pa2-cream); font-size: 14px; font-weight: 600;
    margin-bottom: 9px;
    animation-delay: 2.96s;
  }#panel2-anim .pa2-feed-all { color: var(--pa2-accent); font-size: 11.5px; font-weight: 600; }

  /* ---- lignes de signaux ---- */
  #panel2-anim .pa2-lead {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 10px 11px;
    margin-bottom: 7px;
    backdrop-filter: blur(10px);
  }#panel2-anim .pa2-lead-1 { animation-delay: 3.06s; }#panel2-anim .pa2-lead-2 { animation-delay: 3.16s; }#panel2-anim .pa2-lead-3 { animation-delay: 3.26s; }#panel2-anim .pa2-lead-ic {
    width: 30px; height: 30px; border-radius: 10px; flex: none;
    display: grid; place-items: center;
    background: rgba(110,232,95,0.12);
    color: var(--pa2-accent);
  }#panel2-anim .pa2-lead-ic svg { width: 15px; height: 15px; }#panel2-anim .pa2-lead-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }#panel2-anim .pa2-lead-t {
    color: var(--pa2-cream); font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }#panel2-anim .pa2-lead-s {
    color: var(--pa2-muted); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }#panel2-anim .pa2-score {
    flex: none; font-size: 12px; font-weight: 700;
    color: var(--pa2-cream); font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.06);
    border-radius: 8px; padding: 4px 7px;
  }#panel2-anim .pa2-score-hot {
    color: #06210a; background: var(--pa2-accent);
    box-shadow: 0 0 14px var(--pa2-accent-glow);
  }

  /* ---- barre d'onglets ---- */
  #panel2-anim .pa2-tabbar {
    margin-top: auto;
    display: grid; grid-template-columns: repeat(3, 1fr);
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
    animation-delay: 3.38s;
  }#panel2-anim .pa2-tab {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--pa2-muted);
  }#panel2-anim .pa2-tab svg { width: 17px; height: 17px; }#panel2-anim .pa2-tab i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.2px; }#panel2-anim .pa2-tab-on { color: var(--pa2-accent); }

  /* mini sparkline chart */
  #panel2-anim .pa2-spark { width: 100%; height: 44px; display: block; }#panel2-anim .pa2-spark path.pa2-line { fill: none; stroke: var(--pa2-accent); stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 300; stroke-dashoffset: 300;
    animation: pa2-draw 1.6s ease 3.5s forwards; }#panel2-anim .pa2-spark path.pa2-area { fill: url(#pa2-sparkgrad); opacity: 0; animation: pa2-fillArea 1s ease 4.4s forwards; }
  @keyframes pa2-draw { to { stroke-dashoffset: 0; } }
  @keyframes pa2-fillArea { to { opacity: 1; } }

  @media (prefers-reduced-motion: reduce) {#panel2-anim *, #panel2-anim *::before, #panel2-anim *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; }#panel2-anim .pa2-phone { transform: rotateX(16deg) rotateY(-30deg) rotateZ(6deg) scale(1); }#panel2-anim .pa2-app-el, #panel2-anim .pa2-live i, #panel2-anim .pa2-label, #panel2-anim .pa2-corner-glow, #panel2-anim .pa2-phone-halo, #panel2-anim .pa2-wordmarks { opacity: 1 !important; transform: none !important; }#panel2-anim .pa2-spark path.pa2-line { stroke-dashoffset: 0 !important; }#panel2-anim .pa2-spark path.pa2-area { opacity: 1 !important; }
  }

/* ---------- Déclenchement au scroll : animations en pause tant que
   #panel2-anim n'a pas la classe pa2-play (ajoutée par l'IntersectionObserver) ---------- */
#panel2-anim * { animation-play-state: paused !important; }
#panel2-anim.pa2-play * { animation-play-state: running !important; }

/* ============ Encadrements latéraux (cartes skeleton), repris de l'animation 1 ============
   4 cartes flottantes avec pastille + barres, sur les côtés, apparaissant au scroll. */
#panel2-anim .pa2-skel{
  --pa2c-op:.5;
  --pa2c-edge:rgba(67,230,160,.16);
  position:absolute;border-radius:16px;padding:15px;opacity:0;z-index:6;
  background:linear-gradient(180deg, rgba(12,26,19,.34), rgba(7,15,11,.28));
  border:1px solid var(--pa2c-edge);
  backdrop-filter:blur(3px);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
  width:200px;
}
#panel2-anim .pa2-skel .pa2-sbar{height:9px;border-radius:6px;
  background:linear-gradient(90deg, rgba(67,230,160,.16), rgba(238,242,239,.07));
  margin:8px 0;}
#panel2-anim .pa2-skel .pa2-sbar.pa2-short{width:55%;}
#panel2-anim .pa2-skel .pa2-sdot{width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg, rgba(67,230,160,.7), rgba(45,106,79,.7));margin-bottom:10px;}

/* Position + personnalité de chaque carte (identique à l'animation 1) */
#panel2-anim .pa2-tl{left:3%;top:15%;  --pa2c-op:.52; --pa2c-edge:rgba(67,230,160,.20);
  width:210px;transform:translateY(18px) rotate(-2.5deg);}
#panel2-anim .pa2-ml{left:1.5%;top:54%; --pa2c-op:.4;  --pa2c-edge:rgba(120,160,140,.14);
  width:170px;padding:13px;transform:translateY(18px) rotate(1.5deg);}
#panel2-anim .pa2-tr{right:3%;top:13%;  --pa2c-op:.46; --pa2c-edge:rgba(67,230,160,.14);
  width:190px;transform:translateY(18px) rotate(2deg);}
#panel2-anim .pa2-br{right:2%;bottom:11%; --pa2c-op:.58; --pa2c-edge:rgba(67,230,160,.24);
  width:225px;transform:translateY(18px) rotate(-1.5deg);}

/* Variations de contenu */
#panel2-anim .pa2-ml .pa2-sdot{display:none;}
#panel2-anim .pa2-tr .pa2-sdot{width:26px;height:26px;border-radius:8px;}
#panel2-anim .pa2-br .pa2-sdot{width:38px;height:38px;}
#panel2-anim .pa2-tl .pa2-sbar.pa2-short{width:70%;}
#panel2-anim .pa2-br .pa2-sbar.pa2-short{width:42%;}

/* Apparition au scroll (même keyframe que pa1-skel-in) */
@keyframes pa2-skel-in{
  from{opacity:0;transform:translateY(18px) rotate(var(--pa2c-rot,0deg));}
  to{opacity:var(--pa2c-op);transform:translateY(0) rotate(var(--pa2c-rot,0deg));}
}
#panel2-anim.pa2-play .pa2-skel{animation:pa2-skel-in 1.2s ease forwards;}
#panel2-anim.pa2-play .pa2-tl{animation-delay:.5s;}
#panel2-anim.pa2-play .pa2-tr{animation-delay:.7s;}
#panel2-anim.pa2-play .pa2-ml{animation-delay:.9s;}
#panel2-anim.pa2-play .pa2-br{animation-delay:1.1s;}

/* ===================== [perf V17] Mise en veille hors viewport =====================
   Classes posées en JS UNIQUEMENT quand le panneau concerné est invisible
   (recouvert ou hors écran) et après la fin des chorégraphies d'entrée :
   le rendu visible reste strictement identique, seules les boucles infinies
   cessent de consommer CPU/GPU quand personne ne peut les voir. */
#panel1-anim.pa1-anim-off *,
#panel1-anim.pa1-anim-off *::before,
#panel1-anim.pa1-anim-off *::after{animation-play-state:paused!important;}
/* pulse du bouton : invisible avant pa1-play (opacity:0) -> pause sans effet visuel */
#panel1-anim:not(.pa1-play) .pa1-btn{animation-play-state:paused;}
#panel2-anim.pa2-play.pa2-anim-off *,
#panel2-anim.pa2-play.pa2-anim-off *::before,
#panel2-anim.pa2-play.pa2-anim-off *::after{animation-play-state:paused!important;}
/* libère les 16 calques de bandes wordmark pendant la veille (mémoire GPU mobile) */
#panel2-anim.pa2-play.pa2-anim-off .pa2-wm-row{will-change:auto;}
/* hero entièrement recouvert (déjà visibility:hidden) : on fige le point
   de statut. [V23] Les règles marquee/globes ont disparu avec le bandeau. */
.hero-section.hcr-covered .dot{animation-play-state:paused;}
/* FAQ : une fois le reveal terminé (classe posée en JS), libère les calques
   promus des lettres — le rendu (text-shadow figé) ne change pas */
#faq.faq-settled .faq-letter{will-change:auto;}

/* ---------- bloc 3  <style> ---------- */
/* =====================================================================
   DÉMONSTRATION PLATEFORME (#panel3) — scroll-telling cinématique.
   Les écrans sont des MAQUETTES SIMPLIFIÉES (HTML/CSS, données factices)
   annotées, flottantes, avec zoom doux au survol.
   Palette du site : vert #21c24a · jaune #d9d617 · fond #050605.
   ===================================================================== */
#panel3{
  --pdg:#21c24a; --pdy:#d9d617; --pdv:#a78bfa; --pdink:#f3f5f2; --pdmut:#8c918b;
  --pdmono:"JetBrains Mono",ui-monospace,monospace;
  --pdui:"Inter","Helvetica Neue",Arial,sans-serif;
  position:relative; height:640vh; display:block; overflow:visible; padding:0;
}
.pd-stage{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  font-family:var(--pdui); color:var(--pdink);
}
.pd-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  background:linear-gradient(180deg, rgba(5,6,5,.85), transparent 9%, transparent 91%, rgba(5,6,5,.9));
}
.pd-shrink{ position:absolute; inset:0; will-change:transform,filter; }

/* ------------------------------ fond vivant ------------------------------ */
.pd-particles{ position:absolute; inset:0; width:100%; height:100%; }
.pd-gridlines{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(243,245,242,.022) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(243,245,242,.022) 0 1px, transparent 1px 64px);
  -webkit-mask-image:radial-gradient(70% 62% at 50% 46%, #000 30%, transparent 82%);
          mask-image:radial-gradient(70% 62% at 50% 46%, #000 30%, transparent 82%);
}
.pd-glow{
  position:absolute; left:58%; top:52%; width:64vmin; aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none; will-change:transform,opacity;
  background:radial-gradient(circle, rgba(33,194,74,.16), rgba(33,194,74,.045) 46%, transparent 70%);
}
/* sphère 3D d'ambiance : toujours DERRIÈRE le contenu (z:1 < layout z:2) */
.pd-sphere{ position:absolute; left:50%; top:47%; z-index:1; opacity:.85;
  pointer-events:none; will-change:transform,opacity; }

/* voile final : assombrit la scène (z:3) sans toucher l'outro (z:4) */
.pd-dim{ position:absolute; inset:0; z-index:3; background:#050605; opacity:0;
  pointer-events:none; will-change:opacity; }

/* ------------------------------ entête ------------------------------ */
.pd-head{ position:absolute; top:clamp(18px,4vh,40px); left:0; right:0;
  display:flex; justify-content:center; z-index:5; }
.pd-eyebrow{
  display:flex; align-items:center; gap:10px;
  font:500 10.5px/1 var(--pdmono); letter-spacing:.32em; text-transform:uppercase;
  color:var(--pdmut);
}
.pd-eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--pdg);
  box-shadow:0 0 10px rgba(33,194,74,.9); animation:pd-blink 2.4s infinite; }

/* ------------------------------ mise en page ------------------------------ */
.pd-layout{
  position:absolute; inset:0; z-index:2;
  display:grid; grid-template-columns:minmax(330px,420px) 1fr; align-items:center;
  gap:clamp(24px,4vw,64px); padding:0 clamp(28px,5.5vw,90px);
}

/* --------- colonne récit --------- */
.pd-copy{ position:relative; height:360px; }
.pd-chapter{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; gap:14px; opacity:0;
}
.pd-chapter[data-ch="0"]{ opacity:1; }   /* état sans JS : chapitre 1 visible */
.pd-ghost{
  position:absolute; top:-58px; left:-14px; z-index:-1; pointer-events:none;
  font:800 clamp(120px,13vw,180px)/1 "Poppins",var(--pdui);
  color:transparent; -webkit-text-stroke:1px rgba(33,194,74,.13);
}
.pd-kicker{ font:500 10.5px/1 var(--pdmono); letter-spacing:.3em; text-transform:uppercase;
  color:var(--pdg); }
.pd-title{ font:800 clamp(30px,3.1vw,45px)/1.06 "Poppins",var(--pdui); letter-spacing:.005em; }
.pd-title em{ font-style:normal; color:var(--pdg); }
.pd-text{ font:400 15px/1.68 var(--pdui); color:#b6bbb4; max-width:36ch; }
.pd-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.pd-chips span{
  padding:6px 12px; border-radius:999px; border:1px solid rgba(33,194,74,.26);
  font:500 10px/1 var(--pdmono); letter-spacing:.06em; color:#cfd4cd;
  background:rgba(33,194,74,.05);
}

/* --------- scène : maquettes flottantes --------- */
.pd-scene{ position:relative; height:100%; }
.pd-deck{ position:absolute; inset:0; }
.pd-slot{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; }
.pd-shot{
  position:relative; width:min(100%,660px); opacity:0;
  will-change:transform,opacity; backface-visibility:hidden;
  transform:translateZ(0);
}
.pd-shot[data-ch="0"]{ opacity:1; }      /* état sans JS */
.pd-shot--focus{ width:min(60%,450px); }

/* lévitation continue (active uniquement sur la maquette au premier plan) */
.pd-levit{ animation:pd-levit 6.5s ease-in-out infinite; animation-play-state:paused;
  will-change:transform; }
.pd-shot.is-front .pd-levit{ animation-play-state:running; }
.pd-shot[data-ch="1"] .pd-levit{ animation-delay:-1.8s; }
.pd-shot[data-ch="2"] .pd-levit{ animation-delay:-3.4s; }
.pd-shot[data-ch="3"] .pd-levit{ animation-delay:-5s; }

/* la carte : zoom léger et très doux au survol */
.pd-card{
  position:relative; pointer-events:none;
  padding:clamp(16px,1.6vw,22px);
  background:linear-gradient(180deg,#0c110c,#090c09);
  border:1px solid rgba(33,194,74,.2); border-radius:20px;
  box-shadow:0 34px 90px -22px rgba(0,0,0,.75), 0 70px 160px -60px rgba(33,194,74,.28);
  transition:transform .8s cubic-bezier(.22,1,.36,1), box-shadow .8s ease,
             border-color .8s ease;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.pd-shot.is-front .pd-card{ pointer-events:auto; }
.pd-shot.is-front .pd-card:hover{
  transform:scale(1.03);
  border-color:rgba(33,194,74,.42);
  box-shadow:0 44px 110px -22px rgba(0,0,0,.8), 0 80px 190px -60px rgba(33,194,74,.4);
}
.pd-glare{
  position:absolute; inset:0; border-radius:20px; pointer-events:none; z-index:2;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%);
  background-size:260% 100%; background-position:120% 0; mix-blend-mode:screen;
}

/* --------- annotations flottantes (légères explications) --------- */
.pd-float{
  position:absolute; z-index:4; display:flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px; opacity:0;
  background:rgba(10,14,10,.94); border:1px solid rgba(33,194,74,.42);
  box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 18px rgba(33,194,74,.12);
  font:500 10.5px/1.35 var(--pdmono); letter-spacing:.03em; color:var(--pdink);
  white-space:nowrap; will-change:transform,opacity;
}
.pd-float::after{ content:""; position:absolute; left:24px; width:1px; height:20px; }
.pd-float--tr{ top:-17px; right:20px; }
.pd-float--tr::after{ top:100%;
  background:linear-gradient(180deg, rgba(33,194,74,.75), transparent); }
.pd-float--bl{ bottom:-17px; left:20px; }
.pd-float--bl::after{ bottom:100%;
  background:linear-gradient(0deg, rgba(33,194,74,.75), transparent); }
.pd-dot{ width:6px; height:6px; border-radius:50%; background:var(--pdg); flex:none;
  box-shadow:0 0 9px rgba(33,194,74,.95); animation:pd-blink 2s infinite; }

/* =====================================================================
   MAQUETTES SIMPLIFIÉES (pd-m-*)
   ===================================================================== */
.pd-m-head{
  display:flex; align-items:center; gap:10px; padding-bottom:13px; margin-bottom:15px;
  border-bottom:1px solid rgba(243,245,242,.07);
  font:700 13.5px/1 "Poppins",var(--pdui); letter-spacing:.02em;
}
.pd-m-dot{ width:8px; height:8px; border-radius:50%; background:var(--pdg); flex:none;
  box-shadow:0 0 12px rgba(33,194,74,.8); }
.pd-m-head em{
  margin-left:auto; font:500 9px/1 var(--pdmono); font-style:normal;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pdg);
  padding:5px 11px; border:1px solid rgba(33,194,74,.3); border-radius:999px;
}

/* ---- 05 · tableau de bord ---- */
.pd-m-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.pd-m-kpi{ background:#0e130e; border:1px solid rgba(243,245,242,.06); border-radius:14px;
  padding:12px 12px; display:flex; flex-direction:column; gap:4px; }
.pd-m-kpi small{ font:500 8px/1.3 var(--pdmono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--pdmut); }
.pd-m-kpi strong{ font:800 26px/1 "Poppins",var(--pdui); }
.pd-m-kpi span{ font:400 9.5px/1.3 var(--pdui); color:var(--pdmut); }
.pd-m-row2{ display:grid; grid-template-columns:1.25fr 1fr; gap:11px; margin-top:11px; }
.pd-m-panel{ background:#0e130e; border:1px solid rgba(243,245,242,.06);
  border-radius:14px; padding:12px 14px; }
.pd-m-panel small{ display:block; margin-bottom:8px;
  font:500 8.5px/1.3 var(--pdmono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--pdmut); }
.pd-m-spark{ display:block; width:100%; height:86px; }
.pd-m-grid{ stroke:rgba(243,245,242,.06); stroke-dasharray:3 5; }
.pd-m-area{ fill:url(#pdSpark); opacity:0; }
.pd-m-line{ fill:none; stroke:var(--pdg); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; }
.pd-shot.is-front .pd-m-line{ animation:pd-draw 1.1s .35s cubic-bezier(.4,0,.2,1) forwards; }
.pd-shot.is-front .pd-m-area{ animation:pd-fade .7s 1s forwards; }
.pd-m-bars{ display:flex; align-items:stretch; gap:9px; height:86px; }
.pd-m-bar{ flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; gap:6px; }
.pd-m-bar i{ width:min(20px,66%); height:var(--h); min-height:3px;
  border-radius:5px 5px 2px 2px;
  background:var(--c);
  background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));
  transform:scaleY(0); transform-origin:bottom; }
.pd-shot.is-front .pd-m-bar i{
  animation:pd-growY .7s calc(.35s + var(--i)*90ms) cubic-bezier(.22,.9,.3,1.2) forwards; }
.pd-m-bar span{ font:400 7.5px/1.2 var(--pdmono); letter-spacing:.05em;
  text-transform:uppercase; color:var(--pdmut); white-space:nowrap; }

/* ---- 02 · signaux du jour ---- */
.pd-m-sig{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:14px; border-radius:14px; border:1px solid transparent;
  background:#0d110d;
}
.pd-m-sig + .pd-m-sig{ margin-top:10px; }
.pd-m-sig.is-hot{ background:rgba(33,194,74,.07); border-color:rgba(33,194,74,.32); }
.pd-m-sigic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  flex:none; background:rgba(33,194,74,.1); border:1px solid rgba(33,194,74,.26);
  color:var(--pdg); }
.pd-m-sigic svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.pd-m-sigtxt{ min-width:0; }
.pd-m-sigtxt b{ display:block; font:600 15px/1.25 var(--pdui);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-m-sigtxt i{ display:block; margin-top:3px; font:400 11.5px/1.3 var(--pdui);
  font-style:normal; color:var(--pdmut);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-m-sigsc{ text-align:right; }
.pd-m-sigsc b{ display:block; font:800 20px/1 "Poppins",var(--pdui); color:var(--pdg); }
.pd-m-sigsc time{ display:block; margin-top:3px; font:400 9px/1 var(--pdmono);
  color:var(--pdmut); }

/* ---- 01 · prospects : le score mesure l'ADÉQUATION au profil du client ----
   Lecture de la barre, identique à celle de l’application (ScoreBar) : le VERT
   est le score acquis par le prospect, le JAUNE ce que la fiche de vente du
   client lui ajoute, le VIOLET ce qu’elle lui retire. Le chiffre affiché reste
   le score d’origine ; l’écart est annoncé à part (« +6 », « −4 ») pour qu’on ne
   confonde jamais la donnée et l’appréciation. Tout est en CSS : aucun JS. */
/* minmax(0,1fr) et pas 1fr : une puce de bas de carte en nowrap suffisait
   sinon a elargir sa colonne, et les deux barres de score n'avaient plus la
   meme longueur — donc plus la meme echelle. */
.pd-m-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.pd-m-pro{ background:#0e130e; border:1px solid rgba(33,194,74,.16); border-radius:16px;
  padding:14px; display:flex; flex-direction:column; gap:10px; }
.pd-m-pro header{ display:flex; align-items:center; gap:9px; }
.pd-m-av{ width:33px; height:33px; border-radius:11px; display:grid; place-items:center;
  flex:none; background:rgba(33,194,74,.14); border:1px solid rgba(33,194,74,.35);
  color:var(--pdg); font:700 11px/1 var(--pdmono); }
.pd-m-name{ min-width:0; }
.pd-m-name b{ display:block; font:600 13.5px/1.15 var(--pdui); }
.pd-m-name i{ display:block; font:400 10px/1.2 var(--pdui); font-style:normal;
  color:var(--pdmut); margin-top:2px; }
.pd-m-badge{ margin-left:auto; padding:3.5px 9px; border-radius:999px; font-style:normal;
  font:600 8.5px/1 var(--pdmono); letter-spacing:.08em; text-transform:uppercase;
  background:rgba(33,194,74,.13); color:var(--pdg); border:1px solid rgba(33,194,74,.35); }
.pd-m-badge.is-y{ background:rgba(217,214,23,.1); color:var(--pdy);
  border-color:rgba(217,214,23,.35); }
.pd-m-pro p{ font:600 12.5px/1.3 var(--pdui); }
.pd-m-pro p i{ display:block; margin-top:2px; font:400 10px/1.2 var(--pdui);
  font-style:normal; color:var(--pdmut); }

/* --- la ligne de score : libellé, piste bicolore, chiffre, écart --- */
.pd-m-score{ display:flex; flex-direction:column; gap:7px; }
.pd-m-scoreline{ display:flex; align-items:baseline; gap:7px;
  font:500 8.5px/1 var(--pdmono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--pdmut); }
/* le libellé tient la gauche, le chiffre et son écart partent à droite */
.pd-m-scoreline>span{ margin-right:auto; }
.pd-m-score b{ font:700 13.5px/1 "Poppins",var(--pdui); color:var(--pdink);
  letter-spacing:0; }
.pd-m-delta{ display:inline-block; font:700 11px/1 var(--pdmono); font-style:normal;
  letter-spacing:0; text-transform:none; opacity:0; }
.pd-m-score.is-up .pd-m-delta{ color:var(--pdy); }
.pd-m-score.is-down .pd-m-delta{ color:var(--pdv); }
.pd-m-track{ position:relative; height:6px; border-radius:99px;
  background:rgba(243,245,242,.08); }
.pd-m-fill,.pd-m-extra{ position:absolute; top:0; bottom:0; border-radius:99px;
  transform:scaleX(0); transform-origin:left; }
.pd-m-fill{ left:0; width:var(--sc); background:linear-gradient(90deg,#1ea841,#3ae06a); }
/* l’écart : il PROLONGE la barre quand la fiche ajoute des points, il la
   ronge par la droite quand elle en retire — le sens du geste dit le signe. */
/* l’écart occupe exactement la piste : même hauteur, même axe que le vert.
   Il doit se lire comme la suite de la barre, jamais comme un curseur posé
   dessus. Le plancher évite qu’un écart de 2 ou 3 points disparaisse. */
.pd-m-extra{ left:var(--from); width:var(--w); min-width:7px; opacity:0; }
.pd-m-score.is-up .pd-m-extra{ background:linear-gradient(90deg,#d9d617,#f0ee6a);
  box-shadow:0 0 10px rgba(217,214,23,.5); }
.pd-m-score.is-down .pd-m-extra{ transform-origin:right;
  background:linear-gradient(90deg,#7c4ff0,#a78bfa);
  box-shadow:0 0 10px rgba(139,92,246,.45); }

/* --- le « cling » : quand l’écart se pose, un anneau s’ouvre et s’efface sur
   la pointe de la barre, avec un éclat au centre. Deux pseudo-éléments, rien
   d’autre : pas de nœud supplémentaire, pas de JS, composition GPU seule. --- */
.pd-m-cling{ position:absolute; top:50%; width:0; height:0; z-index:2;
  pointer-events:none; color:var(--pdy); }
.pd-m-score.is-up .pd-m-cling{ left:calc(var(--from) + var(--w)); }
.pd-m-score.is-down .pd-m-cling{ left:var(--from); color:var(--pdv); }
.pd-m-cling::before,.pd-m-cling::after{ content:""; position:absolute;
  border-radius:50%; opacity:0; }
.pd-m-cling::before{ left:-9px; top:-9px; width:18px; height:18px;
  border:1.5px solid currentColor; }
.pd-m-cling::after{ left:-3px; top:-3px; width:6px; height:6px;
  background:currentColor; box-shadow:0 0 12px currentColor; }

/* --- chorégraphie : remplissage → écart → cling → chiffre. La 2ᵉ carte suit
   un demi-temps plus tard : on lit le gain, puis la perte, jamais les deux
   en même temps. Rejouée à chaque passage de la maquette au premier plan. --- */
.pd-shot.is-front .pd-m-fill{
  animation:pd-growX .9s .45s cubic-bezier(.3,.9,.3,1) forwards; }
.pd-shot.is-front .pd-m-extra{
  animation:pd-growXin .5s 1.25s cubic-bezier(.25,.9,.3,1) forwards; }
.pd-shot.is-front .pd-m-cling::before{
  animation:pd-clingring .9s 1.5s cubic-bezier(.15,.75,.25,1) forwards; }
.pd-shot.is-front .pd-m-cling::after{
  animation:pd-clingflash 1s 1.46s cubic-bezier(.2,.8,.3,1) forwards; }
.pd-shot.is-front .pd-m-delta{
  animation:pd-deltapop .7s 1.56s cubic-bezier(.2,1.25,.35,1) forwards; }
.pd-shot.is-front .pd-m-pro:nth-child(2) .pd-m-fill{ animation-delay:.98s; }
.pd-shot.is-front .pd-m-pro:nth-child(2) .pd-m-extra{ animation-delay:1.78s; }
.pd-shot.is-front .pd-m-pro:nth-child(2) .pd-m-cling::before{ animation-delay:2.03s; }
.pd-shot.is-front .pd-m-pro:nth-child(2) .pd-m-cling::after{ animation-delay:1.99s; }
.pd-shot.is-front .pd-m-pro:nth-child(2) .pd-m-delta{ animation-delay:2.09s; }

/* --- le pied de carte porte la RAISON de l’écart : sans elle, la couleur
   ne serait qu’un effet. Jaune = ce que la fiche ajoute, violet = ce
   qu’elle retire, même code que la barre. --- */
.pd-m-pro footer{ display:flex; gap:6px; flex-wrap:wrap; }
.pd-m-pro footer span{ padding:4px 9px; border-radius:999px;
  border:1px solid rgba(243,245,242,.1);
  font:500 8.5px/1.3 var(--pdmono); color:var(--pdmut); white-space:nowrap; }
.pd-m-pro footer .is-g{ border-color:rgba(33,194,74,.4); color:var(--pdg);
  background:rgba(33,194,74,.07); }
.pd-m-pro footer .is-y{ border-color:rgba(217,214,23,.42); color:var(--pdy);
  background:rgba(217,214,23,.07); }
.pd-m-pro footer .is-v{ border-color:rgba(167,139,250,.42); color:#c8b8fd;
  background:rgba(139,92,246,.1); }

/* ---- 04 · radar ---- */
.pd-m-count{ color:var(--pdg); font-weight:700; }
.pd-m-toggle{ margin-left:auto; display:flex; gap:3px; padding:3px;
  border:1px solid rgba(243,245,242,.1); border-radius:999px; background:#0a0e0a; }
.pd-m-toggle b,.pd-m-toggle span{ padding:4px 11px; border-radius:999px;
  font:500 9px/1 var(--pdmono); letter-spacing:.06em; }
.pd-m-toggle b{ background:rgba(33,194,74,.16); color:var(--pdg); font-weight:600; }
.pd-m-toggle span{ color:var(--pdmut); }
.pd-m-rchips{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:6px; }
.pd-m-rchips span{ display:flex; align-items:center; gap:6px; padding:5px 11px;
  border-radius:999px; border:1px solid rgba(243,245,242,.1);
  font:500 9px/1 var(--pdmono); color:var(--pdmut); }
.pd-m-rchips span b{ color:var(--pdink); font-weight:600; }
.pd-m-rchips .is-on{ border-color:rgba(33,194,74,.45); color:var(--pdg);
  background:rgba(33,194,74,.07); }
.pd-m-rchips .is-on b{ color:var(--pdg); }
.pd-m-rchips .pd-dot,.pd-m-rfchips .pd-dot{ width:5px; height:5px;
  animation:none; box-shadow:0 0 6px rgba(33,194,74,.7); }
.pd-m-radarwrap{ position:relative; }
.pd-m-zoom{ position:absolute; right:2px; top:50%; transform:translateY(-38%);
  display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.pd-m-zoom i{ width:22px; height:22px; display:grid; place-items:center;
  border:1px solid rgba(243,245,242,.12); border-radius:7px; background:#0c100c;
  font:500 10px/1 var(--pdmono); font-style:normal; color:var(--pdmut); }
.pd-m-zoom i:last-child{ font-size:6.5px; }
.pd-m-radar{ display:block; width:100%; height:auto; }
.pd-m-rkm{ font:400 7px var(--pdmono); fill:rgba(140,145,139,.65); }
.pd-m-rsub{ font:400 7.5px var(--pdmono); fill:var(--pdmut); }
.pd-m-rfoot{ margin-top:8px; padding-top:10px;
  border-top:1px solid rgba(243,245,242,.06); }
.pd-m-rfoot > b{ display:block; font:700 12px/1 "Poppins",var(--pdui);
  margin-bottom:8px; }
.pd-m-rfchips{ display:flex; gap:7px; flex-wrap:wrap; }
.pd-m-rfchips span{ display:flex; align-items:center; gap:6px; padding:5px 11px;
  border-radius:999px; border:1px solid rgba(33,194,74,.3);
  font:500 9px/1 var(--pdmono); color:#cfd4cd; }
.pd-m-rhint{ margin-top:8px; font:400 9.5px/1.4 var(--pdui); color:var(--pdmut); }
.pd-m-rgrid circle{ fill:none; stroke:rgba(33,194,74,.16); stroke-dasharray:3 6; }
.pd-m-rax{ font:600 8px var(--pdmono); letter-spacing:.26em; text-transform:uppercase;
  fill:var(--pdmut); }
.pd-m-sweep path{ fill:rgba(33,194,74,.07); }
.pd-m-sweep line{ stroke:rgba(33,194,74,.5); stroke-width:1.2; }
.pd-m-rlinks line{ stroke:rgba(33,194,74,.2); stroke-width:1; }
.pd-m-node{ fill:var(--pdg); transform-box:fill-box; transform-origin:center;
  animation:pd-npulse 3.4s var(--d,0s) ease-in-out infinite;
  animation-play-state:paused; }
.pd-shot.is-front .pd-m-node{ animation-play-state:running; }
.pd-m-node.is-hi{ fill:#3ae06a; }
.pd-m-node.is-more{ fill:rgba(33,194,74,.06); stroke:var(--pdg);
  stroke-dasharray:2.5 3; stroke-width:1; }
.pd-m-halo{ fill:rgba(33,194,74,.15); transform-box:fill-box; transform-origin:center;
  animation:pd-nhalo 2.6s ease-in-out infinite; animation-play-state:paused; }
.pd-shot.is-front .pd-m-halo{ animation-play-state:running; }
.pd-m-core{ fill:var(--pdg); }
.pd-m-rlbl{ font:500 8px var(--pdmono); fill:rgba(243,245,242,.72); letter-spacing:.05em; }
.pd-m-rlbl.is-more{ font-size:7.5px; fill:var(--pdg); }
.pd-m-rlbl.is-c{ font-size:8.5px; font-weight:600; fill:var(--pdink); letter-spacing:.08em; }
/* ------------------------------ rail chapitres ------------------------------ */
.pd-rail{
  position:absolute; right:clamp(14px,2.4vw,40px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:16px; align-items:flex-end; z-index:5; opacity:0;
}
.pd-rail button{
  display:flex; align-items:center; gap:10px; background:none; border:0; padding:4px 0;
  cursor:pointer; color:var(--pdmut);
}
.pd-rail span{ font:500 10.5px/1 var(--pdui); letter-spacing:.1em; text-transform:uppercase;
  opacity:0; transform:translateX(6px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); }
.pd-rail b{ font:500 10px/1 var(--pdmono); opacity:.55;
  transition:opacity .5s cubic-bezier(.22,.61,.36,1), color .5s cubic-bezier(.22,.61,.36,1); }
.pd-rail i{ position:relative; width:30px; height:2px; border-radius:2px; overflow:hidden;
  background:rgba(243,245,242,.14); }
.pd-rail i::after{ content:""; position:absolute; inset:0; background:var(--pdg);
  box-shadow:0 0 8px rgba(33,194,74,.8);
  transform:scaleX(var(--p,0)); transform-origin:left; }
.pd-rail button:hover span{ opacity:.85; transform:none; }
.pd-rail button.is-on b{ opacity:1; color:var(--pdg); }
.pd-rail button.is-on span{ opacity:.9; transform:none; color:var(--pdink); }

/* ------------------------------ outro ------------------------------ */
.pd-outro{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; padding-bottom:9vh;
  pointer-events:none;
}
.pd-wm-wrap{
  position:relative;                       /* le halo vit ICI, hors du masque */
  font:800 clamp(54px,8.6vw,142px)/0.98 "Poppins",var(--pdui); letter-spacing:.035em;
}
.pd-wordmark{
  overflow:hidden; padding-bottom:.06em;   /* masque du lever de lettres */
  font:inherit; letter-spacing:inherit;
}
.pd-wordmark span{ display:inline-block; will-change:transform; }
.pd-wm-green{ color:var(--pdg); }          /* halo délégué au calque .pd-wm-glow */
/* halo organique : duplicat flouté du mot, FRÈRE du masque -> jamais tronqué */
.pd-wm-glow{
  position:absolute; inset:0; padding-bottom:.06em; z-index:-1;
  font:inherit; letter-spacing:inherit; white-space:nowrap;
  color:transparent; pointer-events:none; opacity:0;
  filter:blur(26px); will-change:opacity,transform;
  animation:pd-wmpulse 6s ease-in-out infinite;
}
.pd-wm-glow b{ color:var(--pdg); font-weight:inherit; }
.pd-tagline{ font:400 15px/1.5 var(--pdui); color:var(--pdmut); opacity:0; }
.pd-cta{
  pointer-events:auto; display:inline-flex; align-items:center; gap:10px; opacity:0;
  padding:14px 24px; border-radius:999px; text-decoration:none;
  background:linear-gradient(135deg,#2fe25e,#17a83f); color:#04160a;
  font:600 13px/1 var(--pdui); letter-spacing:.02em;
  box-shadow:0 16px 40px -12px rgba(33,194,74,.5);
  transition:transform .3s, box-shadow .3s;
}
.pd-cta svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .3s; }
.pd-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -12px rgba(33,194,74,.65); }
.pd-cta:hover svg{ transform:translateX(3px); }

/* ------------------------------ indice de scroll ------------------------------ */
.pd-hint{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:8px;
  font:500 10px/1 var(--pdmono); letter-spacing:.26em; text-transform:uppercase;
  color:var(--pdmut); transition:opacity .5s;
}
.pd-hint svg{ width:14px; height:14px; fill:none; stroke:var(--pdg); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; animation:pd-bounce 1.8s infinite; }
.pd-hint.is-hidden{ opacity:0; }

@keyframes pd-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes pd-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@keyframes pd-levit{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes pd-draw{ to{ stroke-dashoffset:0; } }
@keyframes pd-fade{ to{ opacity:1; } }
@keyframes pd-growY{ to{ transform:scaleY(1); } }
@keyframes pd-growX{ to{ transform:scaleX(1); } }
@keyframes pd-growXin{ 0%{ opacity:0; transform:scaleX(0); } 22%{ opacity:1; }
  100%{ opacity:1; transform:scaleX(1); } }
@keyframes pd-clingring{ 0%{ opacity:0; transform:scale(.25); } 22%{ opacity:.95; }
  100%{ opacity:0; transform:scale(2.5); } }
@keyframes pd-clingflash{ 0%{ opacity:0; transform:scale(.2); }
  18%{ opacity:1; transform:scale(1.45); } 52%{ opacity:.9; transform:scale(1); }
  100%{ opacity:0; transform:scale(.85); } }
@keyframes pd-deltapop{ 0%{ opacity:0; transform:translateY(3px) scale(.7); }
  60%{ opacity:1; transform:translateY(0) scale(1.16); }
  100%{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes pd-npulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.32); opacity:.72; } }
@keyframes pd-nhalo{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.5); opacity:.2; } }
@keyframes pd-wmpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }

/* ------------------------------ responsive ------------------------------ */
@media (min-width:901px) and (max-height:800px){
  .pd-shot{ width:min(100%,580px); }
  .pd-shot--focus{ width:min(56%,400px); }
  .pd-m-rhint{ display:none; }
  .pd-m-kpi strong{ font-size:25px; }
  .pd-m-spark,.pd-m-bars{ height:70px; }
}
@media (max-width:900px){
  #panel3{ height:560vh; }
  .pd-layout{
    grid-template-columns:1fr; grid-template-rows:auto 1fr; align-items:start;
    gap:6px; padding:76px 20px 88px;
  }
  .pd-copy{ height:232px; }
  .pd-chapter{ justify-content:flex-start; gap:10px; }
  .pd-ghost{ top:-40px; left:auto; right:-4px; font-size:96px;
    -webkit-text-stroke-color:rgba(33,194,74,.11); }
  .pd-title{ font-size:clamp(26px,7.2vw,34px); }
  .pd-text{ font-size:13.5px; max-width:44ch; }
  .pd-chips span{ padding:5px 10px; font-size:9px; }
  .pd-scene{ perspective:1000px; }
  .pd-shot{ width:min(100%,520px); }
  .pd-card{ padding:14px 15px; border-radius:18px; }
  .pd-glare{ border-radius:18px; }
  .pd-float{ font-size:9px; padding:7px 11px; }
  .pd-float--tr{ top:-13px; right:10px; }
  .pd-float--bl{ bottom:-13px; left:10px; }
  .pd-m-head{ font-size:12px; padding-bottom:10px; margin-bottom:12px; }
  .pd-m-head em{ font-size:8px; padding:4px 9px; }
  .pd-m-kpis,.pd-m-row2,.pd-m-cards{ gap:8px; }
  /* 4 KPI : passage en 2x2 sur mobile pour rester lisible */
  .pd-m-kpis{ grid-template-columns:repeat(2,1fr); }
  .pd-m-kpi{ padding:10px 11px; }
  .pd-m-kpi strong{ font-size:20px; }
  .pd-m-kpi small{ font-size:7.5px; }
  .pd-m-kpi span{ font-size:9px; }
  .pd-m-row2{ margin-top:8px; }
  .pd-m-panel{ padding:10px 11px; }
  .pd-m-spark,.pd-m-bars{ height:62px; }
  .pd-m-bar span{ font-size:6.5px; }
  .pd-m-sig{ padding:10px 11px; gap:10px; border-radius:12px; }
  .pd-m-sig + .pd-m-sig{ margin-top:8px; }
  .pd-m-sigic{ width:30px; height:30px; border-radius:10px; }
  .pd-m-sigic svg{ width:14px; height:14px; }
  .pd-m-sigtxt b{ font-size:12.5px; }
  .pd-m-sigtxt i{ font-size:10px; }
  .pd-m-sigsc b{ font-size:16px; }
  .pd-m-pro{ padding:10px; gap:8px; border-radius:13px; }
  .pd-m-av{ width:27px; height:27px; border-radius:9px; font-size:9px; }
  .pd-m-name b{ font-size:11.5px; }
  .pd-m-name i{ font-size:8.5px; }
  .pd-m-badge{ font-size:7px; padding:3px 7px; }
  .pd-m-pro p{ font-size:10.5px; }
  .pd-m-pro p i{ font-size:8.5px; }
  .pd-m-pro footer span{ font-size:7.5px; padding:3px 7px; }
  .pd-m-score{ gap:6px; font-size:7.5px; }
  .pd-m-score b{ font-size:11.5px; }
  .pd-m-delta{ font-size:9.5px; }
  .pd-m-track{ height:5px; }
  .pd-sphere{ opacity:.55; }
  .pd-shot--focus{ width:min(74%,300px); }
  .pd-m-toggle,.pd-m-rchips,.pd-m-zoom,.pd-m-rfoot{ display:none; }
  .pd-rail{ top:auto; bottom:16px; right:50%; transform:translateX(50%);
    flex-direction:row; gap:18px; align-items:center; }
  .pd-rail span{ display:none; }
  .pd-rail i{ width:22px; }
  .pd-hint{ bottom:58px; }
  .pd-outro{ padding-bottom:14vh; }
  .pd-wordmark{ font-size:clamp(42px,12.5vw,76px); }
  .pd-tagline{ font-size:13px; padding:0 24px; text-align:center; }
}
@media (max-width:620px){
  .pd-float--bl{ display:none; }
}

/* ------------------------------ accessibilité : mouvement réduit ------------------------------ */
@media (prefers-reduced-motion:reduce){
  #panel3{ height:auto; padding:96px 0 48px; }
  .pd-stage{ position:static; height:auto; overflow:visible; }
  .pd-stage::after{ display:none; }
  .pd-shrink{ position:static; }
  .pd-layout{ position:static; display:block; padding:0 clamp(20px,5.5vw,90px); }
  .pd-copy{ height:auto; margin-bottom:8px; }
  .pd-chapter{ position:static; opacity:1; margin:0 0 44px; }
  .pd-ghost{ display:none; }
  .pd-scene{ height:auto; perspective:none; }
  .pd-deck{ position:static; }
  .pd-slot{ position:static; display:block; margin:0 0 34px; }
  .pd-shot{ opacity:1; margin:0 auto; }
  .pd-shot--focus{ width:min(100%,450px); }
  .pd-levit{ animation:none; }
  .pd-card{ transition:none; pointer-events:auto; }
  .pd-shot.is-front .pd-card:hover{ transform:none; }
  .pd-float{ position:static; display:inline-flex; opacity:1; margin:10px 8px 0 0; }
  .pd-float::after{ display:none; }
  .pd-glare,.pd-particles,.pd-glow,.pd-gridlines,.pd-rail,.pd-hint,
  .pd-sphere,.pd-dim{ display:none; }
  .pd-eyebrow i,.pd-dot,.pd-hint svg{ animation:none; }
  .pd-m-line{ stroke-dashoffset:0; animation:none; }
  .pd-m-area{ opacity:1; animation:none; }
  .pd-m-bar i,.pd-m-track i{ transform:none; animation:none; }
  /* sans animation, l’écart et son chiffre doivent tout de même se voir :
     on les pose directement dans leur état final. */
  .pd-m-extra,.pd-m-delta{ opacity:1; animation:none; }
  .pd-m-cling{ display:none; }
  .pd-m-node,.pd-m-halo{ animation:none; }
  .pd-m-sweep{ display:none; }
  .pd-head{ position:static; margin-bottom:36px; }
  .pd-outro{ position:static; margin-top:16px; padding-bottom:0; pointer-events:auto; }
  .pd-wordmark span{ transform:none; }
  .pd-wm-glow{ opacity:.4; animation:none; }
  .pd-tagline,.pd-cta{ opacity:1; }
  .panels__tail{ height:100vh; }  /* préserve le tampon avant le recouvrement du Processus */
}

/* ---------- bloc 4  <style id="opto-v13-patch"> ---------- */
/* OptoLead V.13 — composition, chapitre 05, accessibilité et continuité */
#panel3{height:720vh;background:#050605;z-index:4;isolation:isolate;}
.pd-stage{background:#050605;}
#panel3.pd-enhanced .pd-chapter,#panel3.pd-enhanced .pd-shot{visibility:hidden!important;pointer-events:none!important;}
#panel3.pd-enhanced .pd-chapter[aria-hidden="false"],#panel3.pd-enhanced .pd-shot.is-front{visibility:visible!important;}
#panel3.pd-enhanced .pd-chapter[aria-hidden="false"],#panel3.pd-enhanced .pd-chapter[aria-hidden="false"]>*{opacity:1!important;visibility:visible!important;}
#panel3.pd-enhanced .pd-shot:not(.is-front){opacity:0!important;}
#panel3:not(.pd-enhanced){height:auto!important;}
#panel3:not(.pd-enhanced) .pd-stage,#panel3:not(.pd-enhanced) .pd-shrink,#panel3:not(.pd-enhanced) .pd-layout,#panel3:not(.pd-enhanced) .pd-copy,#panel3:not(.pd-enhanced) .pd-chapter,#panel3:not(.pd-enhanced) .pd-scene,#panel3:not(.pd-enhanced) .pd-deck,#panel3:not(.pd-enhanced) .pd-slot,#panel3:not(.pd-enhanced) .pd-shot{position:static!important;height:auto!important;transform:none!important;}
#panel3:not(.pd-enhanced) .pd-stage{overflow:visible!important;}
#panel3:not(.pd-enhanced) .pd-layout{display:block!important;padding:80px clamp(20px,5.5vw,90px)!important;}
#panel3:not(.pd-enhanced) .pd-chapter,#panel3:not(.pd-enhanced) .pd-shot,#panel3:not(.pd-enhanced) .pd-chapter>*{opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
#panel3:not(.pd-enhanced) .pd-chapter{margin:0 0 34px!important;}
#panel3:not(.pd-enhanced) .pd-slot{display:block!important;margin:0 0 48px!important;}
#panel3:not(.pd-enhanced) .pd-shot{margin-inline:auto!important;}
#panel3:not(.pd-enhanced) .pd-rail,#panel3:not(.pd-enhanced) .pd-hint,#panel3:not(.pd-enhanced) .pd-particles,#panel3:not(.pd-enhanced) .pd-sphere{display:none!important;}
.pd-contact-demo{padding:clamp(14px,1.4vw,22px);}
.pd-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pd-contact-pane{min-width:0;padding:14px;border:1px solid rgba(243,245,242,.08);border-radius:15px;background:#0e130e;}
.pd-contact-pane.is-call{border-color:rgba(33,194,74,.25);}
.pd-contact-mode{margin-bottom:12px;color:var(--pdg);font:600 9px/1 var(--pdmono);letter-spacing:.18em;text-transform:uppercase;}
.pd-contact-pane header{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.pd-contact-pane header b{display:block;overflow:hidden;text-overflow:ellipsis;font:650 12px/1.25 var(--pdui);white-space:nowrap;}
.pd-contact-pane header small{display:block;margin-top:3px;color:var(--pdmut);font:400 9px/1.25 var(--pdui);}
.pd-contact-avatar{display:grid;width:32px;height:32px;flex:none;place-items:center;border:1px solid rgba(33,194,74,.35);border-radius:10px;background:rgba(33,194,74,.12);color:var(--pdg);font:700 10px/1 var(--pdmono);}
.pd-contact-pane dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;}
.pd-contact-pane dl div,.pd-mail-field{padding:9px;border:1px solid rgba(243,245,242,.06);border-radius:10px;background:#090d09;}
.pd-contact-pane dt,.pd-mail-field small{display:block;margin-bottom:5px;color:var(--pdmut);font:500 7px/1 var(--pdmono);letter-spacing:.12em;text-transform:uppercase;}
.pd-contact-pane dd{margin:0;color:var(--pdink);font:600 9px/1.3 var(--pdmono);}
.pd-contact-summary{margin:9px 0;color:#aeb4ad;font:400 9px/1.45 var(--pdui);}
.pd-mail-field{margin-bottom:8px;}
.pd-mail-field b,.pd-mail-field span{display:block;color:var(--pdink);font:500 9px/1.4 var(--pdui);}
.pd-mail-field.is-message{min-height:62px;}
.pd-contact-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.pd-contact-actions span{padding:6px 8px;border:1px solid rgba(243,245,242,.1);border-radius:8px;color:#c9cec8;font:600 7.5px/1 var(--pdmono);}
.pd-contact-actions .is-primary{border-color:rgba(33,194,74,.4);background:rgba(33,194,74,.14);color:var(--pdg);}
/* ---- 03 · Appel & mail — carte épurée, cohérente avec les autres ----
   Le préfixe pd-c5- est historique (la carte fermait la série avant que les
   chapitres soient réordonnés) ; il désigne toujours cette carte-là. */
.pd-shot--contact{ width:min(100%,660px); position:relative; overflow:visible; }
.pd-shot--contact .pd-levit{ overflow:visible; }
.pd-contact-demo{ padding:clamp(26px,2.4vw,38px); overflow:visible;
  border-color:rgba(33,194,74,.2); border-radius:20px;
  background:linear-gradient(180deg,#0c110c,#090c09); }
.pd-shot--contact .pd-float{ z-index:8; }
/* Le haut de la carte 05 est réservé à la bascule : on renvoie l'annotation
   supérieure en bas à droite pour éviter toute collision visuelle. */
.pd-shot--contact .pd-float--tr{ top:auto; bottom:-17px; right:20px; }
.pd-shot--contact .pd-float--tr::after{ top:auto; bottom:100%;
  background:linear-gradient(0deg, rgba(33,194,74,.75), transparent); }
.pd-shot.is-front .pd-contact-demo{ pointer-events:auto; }
/* la carte 05 contient des contrôles : pas de zoom au survol qui gênerait le clic */
.pd-shot.is-front .pd-contact-demo:hover{ transform:none; }
/* Carte 05 : elle contient de vrais contrôles. La lévitation est désactivée
   quand la carte est au premier plan, pour que les onglets restent une
   cible fixe et confortable à cliquer. */
.pd-shot--contact.is-front .pd-levit{ animation-play-state:paused; }

/* ---- Bascule Mode appel / Mode mail ------------------------------------
   Sortie de la carte : c'est un contrôle, pas un contenu de maquette.
   Segmented control flottant, posé au-dessus de la carte, avec pastille
   coulissante — lecture immédiate de l'état actif, geste évident. */
.pd-c5-switch{
  position:absolute; left:50%; bottom:calc(100% + 26px); transform:translateX(-50%);
  z-index:9; display:inline-flex; align-items:center; gap:4px; padding:5px;
  border:1px solid rgba(33,194,74,.28); border-radius:999px;
  background:rgba(9,13,9,.92);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset,
             0 0 26px -6px rgba(33,194,74,.22);
  pointer-events:none; opacity:0;
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.pd-shot--contact.is-front .pd-c5-switch{ pointer-events:auto; opacity:1; }
/* fil de rattachement discret vers la carte */
.pd-c5-switch::after{ content:""; position:absolute; top:100%; left:50%; width:1px; height:18px;
  background:linear-gradient(180deg,rgba(33,194,74,.7),transparent); pointer-events:none; }

/* pastille coulissante */
.pd-c5-thumb{ position:absolute; top:5px; left:5px; z-index:0; height:calc(100% - 10px);
  border-radius:999px; background:linear-gradient(180deg,rgba(33,194,74,.22),rgba(33,194,74,.12));
  border:1px solid rgba(33,194,74,.5); box-shadow:0 0 18px -2px rgba(33,194,74,.45);
  transition:transform .5s cubic-bezier(.22,1,.36,1), width .5s cubic-bezier(.22,1,.36,1); }

.pd-c5-tab{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border:0; border-radius:999px; background:none; color:#9aa298;
  font:600 10.5px/1 var(--pdmono); letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; -webkit-appearance:none; appearance:none;
  transition:color .4s ease; }
.pd-c5-ico{ width:14px; height:14px; flex:none; opacity:.6; transition:opacity .4s ease; }
.pd-c5-tab:hover{ color:#dfe4dc; }
.pd-c5-tab:hover .pd-c5-ico{ opacity:.9; }
.pd-c5-tab[aria-selected="true"]{ color:var(--pdg); }
.pd-c5-tab[aria-selected="true"] .pd-c5-ico{ opacity:1; }
.pd-c5-tab:focus-visible{ outline:2px solid #21c24a; outline-offset:3px; }

/* identité du prospect */
.pd-c5-id{ display:flex; align-items:center; gap:12px; padding-bottom:13px;
  margin-bottom:14px; border-bottom:1px solid rgba(243,245,242,.07); }
.pd-c5-av{ display:grid; width:38px; height:38px; flex:none; place-items:center;
  border:1px solid rgba(33,194,74,.35); border-radius:12px;
  background:rgba(33,194,74,.12); color:var(--pdg); font:700 12px/1 var(--pdmono); }
.pd-c5-idt{ min-width:0; }
.pd-c5-idt b{ display:block; font:700 13.5px/1.2 "Poppins",var(--pdui); letter-spacing:.02em; }
.pd-c5-idt small{ display:block; margin-top:4px; color:var(--pdmut);
  font:400 10.5px/1.3 var(--pdui); }
.pd-c5-id em{ margin-left:auto; flex:none; padding:5px 11px;
  border:1px solid rgba(33,194,74,.3); border-radius:999px;
  font:500 9px/1 var(--pdmono); font-style:normal; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pdg); }

/* vues */
.pd-c5-views{ position:relative; }
.pd-c5-view{ display:grid; gap:11px; }
.pd-c5-view[hidden]{ display:none; }

/* champs — repris de .pd-m-kpi / .pd-m-panel */
.pd-c5-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.pd-c5-field{ min-width:0; padding:13px 15px; border:1px solid rgba(243,245,242,.06);
  border-radius:14px; background:#0e130e; }
.pd-c5-field small{ display:block; margin-bottom:6px; color:var(--pdmut);
  font:500 8.5px/1.3 var(--pdmono); letter-spacing:.18em; text-transform:uppercase; }
.pd-c5-field b{ display:block; overflow:hidden; text-overflow:ellipsis;
  font:700 15px/1.25 "Poppins",var(--pdui); white-space:nowrap; }
.pd-c5-field b.is-mail{ font:600 11.5px/1.35 var(--pdui); color:#cfd4cd; }
.pd-c5-field p{ color:#b6bbb4; font:400 11px/1.55 var(--pdui); }
.pd-c5-field.is-wide{ grid-column:1 / -1; }
.pd-c5-ph{ display:block; color:#79807a; font:400 11px/1.4 var(--pdui); }
.pd-c5-msg{ display:block; min-height:60px; color:#b6bbb4; font:400 11px/1.6 var(--pdui); }

/* pastilles secondaires (angles, réseau, modèle) */
.pd-c5-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-c5-tags span{ padding:6px 12px; border:1px solid rgba(33,194,74,.26);
  border-radius:999px; background:rgba(33,194,74,.05); color:#cfd4cd;
  font:500 10px/1 var(--pdmono); letter-spacing:.06em; }

/* actions */
.pd-c5-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.pd-c5-actions span{ padding:7px 13px; border:1px solid rgba(243,245,242,.1);
  border-radius:999px; color:#c9cec8; font:500 10px/1 var(--pdmono); letter-spacing:.06em; }
.pd-c5-actions .is-primary{ border-color:rgba(33,194,74,.45);
  background:rgba(33,194,74,.14); color:var(--pdg); }
.pd-c5-actions .is-danger{ border-color:rgba(238,77,77,.34); color:#e08383; }

@media(max-width:900px){
  .pd-shot--contact{ width:min(100%,590px); }
  .pd-c5-field b{ font-size:14px; }
  .pd-c5-switch{ bottom:calc(100% + 18px); }
  .pd-c5-tab{ padding:8px 14px; font-size:9.5px; letter-spacing:.08em; }
  .pd-c5-ico{ width:12px; height:12px; }
}
@media(max-width:540px){
  .pd-contact-demo{ padding:22px 20px; }
  .pd-c5-grid{ grid-template-columns:1fr; }
  .pd-c5-id em{ display:none; }
  .pd-c5-actions span{ padding:6px 11px; font-size:9px; }
  .pd-c5-switch{ bottom:calc(100% + 14px); padding:4px; }
  .pd-c5-tab{ gap:6px; padding:8px 12px; font-size:9px; }
}
/* Sans JS / mouvement réduit : la bascule reste visible et utilisable,
   posée dans le flux au-dessus de la carte. */
@media (prefers-reduced-motion:reduce){
  .pd-c5-switch{ transition:none; }
  .pd-c5-thumb{ transition:none; }
}
#panel3:not(.pd-enhanced) .pd-c5-switch{
  position:relative; left:auto; bottom:auto; transform:none;
  margin:0 auto 22px; display:flex; width:max-content;
  opacity:1; pointer-events:auto;
}
#panel3:not(.pd-enhanced) .pd-c5-switch::after{ display:none; }
#panel3:not(.pd-enhanced) .pd-shot--contact{ display:flex; flex-direction:column; }
/* Sans JS, .is-front n’est jamais posée : les barres de score resteraient
   vides. On les affiche telles qu’elles finissent. */
#panel3:not(.pd-enhanced) .pd-m-fill,
#panel3:not(.pd-enhanced) .pd-m-extra{ transform:none; opacity:1; }
#panel3:not(.pd-enhanced) .pd-m-delta{ opacity:1; }
#panel3:not(.pd-enhanced) .pd-m-cling{ display:none; }
#apropos{position:relative;background:#050605;isolation:isolate;}
#apropos::before{content:"";position:absolute;top:-15vh;left:50%;width:min(1200px,90vw);height:30vh;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(33,194,74,.18),rgba(33,194,74,.045) 42%,transparent 72%);filter:blur(18px);pointer-events:none;z-index:-1;}
#promesse-app .faq-head:focus-visible{outline:2px solid #21c24a;outline-offset:-4px;border-radius:8px;}
#panel3 .pd-rail button:focus-visible{outline:2px solid #21c24a;outline-offset:4px;border-radius:4px;}
@media (min-width:901px){.pd-slot{right:clamp(120px,12vw,200px);}.pd-rail{z-index:6;}}
/* La carte 05 (appel & mail) est la plus haute : on la met à l'échelle
   pour qu'elle tienne toujours entière sous la barre de navigation. */
/* Le zoom réduit la carte mais pas la bascule (hors flux) : on resserre
   l'écart pour que le contrôle reste visuellement rattaché à la carte. */
@media (min-width:901px) and (max-height:930px){.pd-c5-switch{bottom:calc(100% + 18px);}}
@media (min-width:901px) and (max-height:830px){.pd-c5-switch{bottom:calc(100% + 14px);}}
@media (min-width:901px) and (max-height:930px){.pd-shot--contact .pd-card{zoom:.95}}
@media (min-width:901px) and (max-height:880px){.pd-shot--contact .pd-card{zoom:.9}}
@media (min-width:901px) and (max-height:830px){.pd-shot--contact .pd-card{zoom:.85}}
@media (min-width:901px) and (max-height:780px){.pd-shot--contact .pd-card{zoom:.79}}
@media (min-width:901px) and (max-height:730px){.pd-shot--contact .pd-card{zoom:.73}}
@media (min-width:901px) and (max-height:680px){.pd-shot--contact .pd-card{zoom:.68}}
@media (min-width:1800px){
  .pd-layout{grid-template-columns:minmax(440px,560px) minmax(0,1fr);gap:clamp(72px,5vw,150px);width:min(88vw,2200px);margin-inline:auto;padding-inline:clamp(72px,6vw,180px);}
  .pd-copy{height:clamp(390px,34vh,500px);}
  .pd-title{font-size:clamp(45px,2.45vw,68px);}
  .pd-text{font-size:clamp(16px,.72vw,20px);max-width:43ch;}
  .pd-shot{width:min(100%,clamp(760px,38vw,1060px));}
  .pd-shot--focus{width:min(74%,720px);}
  .pd-shot--contact{width:min(100%,980px);}
  .pd-slot{right:clamp(200px,10vw,280px);}
  .pd-card{padding:clamp(22px,1.15vw,34px);}
  /* la carte 05 a sa propre respiration : ne plus annuler son padding
     (règle héritée de l'ancienne maquette, qui collait le contenu aux bords) */
  .pd-contact-demo{padding:clamp(32px,2vw,44px);}
  .pd-head{top:clamp(30px,4.5vh,62px);}
  .pd-rail{right:clamp(42px,3vw,90px);gap:20px;}
  .pd-rail span{font-size:12px;}
  .pd-rail i{width:42px;}
}
@media (max-width:900px){
  #panel3{height:640vh;}
  .pd-layout{padding-top:max(176px,21svh);padding-bottom:88px;}
  .pd-copy{height:236px;}
  .pd-head{display:none;}
  .pd-contact-grid{grid-template-columns:1fr;}
  .pd-contact-grid{gap:6px;}
  .pd-contact-pane{display:block;padding:9px;}
  .pd-contact-pane header{margin-bottom:6px;}
  .pd-contact-mode{margin-bottom:7px;}
  .pd-contact-summary{display:none;}
  .pd-contact-pane dl div,.pd-mail-field{padding:7px;}
  .pd-mail-field{margin-bottom:5px;}
  .pd-mail-field.is-message{min-height:0;}
  .pd-mail-field.is-message span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pd-contact-actions{margin-top:6px;}
  .pd-shot--contact{width:min(100%,520px);}
}
@media (max-width:380px){.pd-layout{padding-inline:14px}.pd-copy{height:300px}.pd-title{font-size:25px}.pd-text{font-size:12.5px;line-height:1.55}.pd-contact-demo{width:128%;margin-left:-14%;transform:scale(.78);transform-origin:top center}.pd-shot--contact .pd-float{font-size:8px}}
@media (prefers-reduced-motion:reduce){
  #panel3{height:auto;}
  #panel3.pd-enhanced .pd-chapter,#panel3.pd-enhanced .pd-shot,#panel3.pd-enhanced .pd-chapter>*{visibility:visible!important;pointer-events:auto!important;opacity:1!important;}
}

/* ---------- bloc 5  <style id="hero-aerial-style"> ---------- */
/* ==================================================================
   OptoLead V16 — Hero « Orbite » — le globe des marchés
   La section devient collante : la scène 3D reste en place pendant
   que le panneau suivant vient la recouvrir (profondeur au scroll).
   ================================================================== */
.hero-section{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
}
#terrain.hcr-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  display:block;pointer-events:none;
  opacity:0;
  filter:none;
  transition:opacity 1.2s cubic-bezier(0.22,0.61,0.36,1) .1s;
}
.hero-section.hcr-live #terrain.hcr-canvas{opacity:1;}
/* Voile de lisibilité : plus léger qu'en V15 (la scène est déjà sombre),
   pondéré vers le bas pour asseoir le wordmark et le texte. */
.hero-section::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(88% 72% at 50% 112%,rgba(5,6,5,.78) 0%,rgba(5,6,5,.30) 52%,transparent 78%),
    linear-gradient(180deg,rgba(5,6,5,.42) 0%,rgba(5,6,5,0) 30%,rgba(5,6,5,0) 62%,rgba(5,6,5,.50) 100%);
}
/* Trame télémétrique conservée (ADN OptoLead), très discrète. */
.hero-section::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.09;
  background:
    repeating-linear-gradient(0deg,rgba(33,194,74,.11) 0,rgba(33,194,74,.11) 1px,transparent 1px,transparent 96px),
    repeating-linear-gradient(90deg,rgba(33,194,74,.07) 0,rgba(33,194,74,.07) 1px,transparent 1px,transparent 96px);
}
.hero-section.hcr-fallback{
  background:
    radial-gradient(60% 55% at 50% 46%,rgba(33,194,74,.10),transparent 70%),
    #050605;
}
/* Une fois l'entrée jouée, on neutralise les animations CSS d'apparition
   (fill:forwards prime sur les transformations inline). GSAP peut alors
   piloter la parallaxe du contenu sans conflit. */
body.loaded.hero-wired .anim-up,
body.loaded.hero-wired .anim-right,
body.loaded.hero-wired .anim-left{
  animation:none;opacity:1;transform:none;
}
@media(max-width:700px){
  .hero-section::before{
    background:
      radial-gradient(120% 62% at 50% 112%,rgba(5,6,5,.82) 0%,rgba(5,6,5,.34) 55%,transparent 80%),
      linear-gradient(180deg,rgba(5,6,5,.50) 0%,rgba(5,6,5,0) 32%,rgba(5,6,5,0) 60%,rgba(5,6,5,.56) 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  #terrain.hcr-canvas{transition:none;}
}
/* ==================================================================
   Warp Drive — flux de particules en profondeur.
   Continuité directe de la page de connexion : même couche visuelle,
   quasi imperceptible au repos. La scène (#terrain, z:0) est un
   canvas WebGL opaque : le flux est donc peint juste au-dessus
   d'elle (même z:0, ordre DOM), sous les voiles de lisibilité (z:1)
   qui l'intègrent naturellement, et sous tout le contenu (z:2).
   L'accélération est déclenchée UNIQUEMENT au clic sur
   l'arrière-plan de la scène (voir le script hero-warp-drive).
   ================================================================== */
#warp.hcr-warp{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  display:block;pointer-events:none;
  opacity:0;
  transition:opacity 1.8s ease .1s;   /* même fondu d'apparition que la connexion */
}
body.loaded #warp.hcr-warp{opacity:1;}
@media(prefers-reduced-motion:reduce){
  #warp.hcr-warp{transition:none;}    /* image fixe : le JS dessine une seule frame */
}
    

/* ---------- bloc 6  <style id="faq-letter-reveal-style"> ---------- */
#faq .faq-title{perspective:760px;}
#faq .faq-letter{display:inline-block;will-change:opacity,filter,transform,text-shadow;}
#faq.faq-reveal-ready .faq-letter{
  opacity:0;filter:blur(11px);transform:translateY(.88em) rotateX(-78deg) scale(.68);
  transform-origin:50% 100%;text-shadow:0 0 0 rgba(33,194,74,0);
  transition:opacity 560ms ease-out,filter 720ms ease-out,transform 820ms cubic-bezier(.16,1,.3,1),text-shadow 900ms ease-out;
  transition-delay:calc(var(--faq-letter-index) * 145ms);
}
#faq.faq-reveal-ready.is-in .faq-letter{opacity:1;filter:none;transform:none;text-shadow:0 0 28px rgba(33,194,74,.16);}
#faq.faq-reveal-ready .faq-item{
  opacity:0;transform:translateY(22px);
  transition:opacity 520ms ease-out,transform 650ms cubic-bezier(.22,1,.36,1);
  transition-delay:calc(430ms + var(--faq-item-index) * 78ms);
}
#faq.faq-reveal-ready.is-in .faq-item{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  #faq.faq-reveal-ready .faq-letter,#faq.faq-reveal-ready .faq-item{
    opacity:1!important;filter:none!important;transform:none!important;transition:none!important;text-shadow:none!important;
  }
}

/* ---------- bloc 7  <style id="olc-style"> ---------- */
/* ======================================================================
   OptoLead — « Signal-curseur »
   Après l'intro du hero, le cœur lumineux se détache, rejoint la souris
   et devient le curseur du visiteur : une petite orbe verte, sa traînée
   qui s'estompe, et une onde émeraude à chaque clic. Dans le hero, la
   constellation se déforme autour d'elle (champ magnétique + onde de
   choc pilotés dans les shaders).
   Couche systémique curseur : z-index 12000 (traînée) / 12001 (orbe),
   au-dessus du voile modal le plus haut du site (9999).
   Désactivé : pointeurs tactiles/grossiers et prefers-reduced-motion.
   ====================================================================== */
html.olc-on, html.olc-on body{cursor:none;}
/* Masquage systematique du curseur natif sur TOUT element interactif.
   Regle universelle : sans cela, chaque element ayant son propre
   cursor:pointer (onglets, bascules, en-tetes de FAQ, scene du logo...)
   faisait reapparaitre la main systeme par-dessus l'orbe verte. */
html.olc-on *{cursor:none;}
/* Certaines regles de la page ont une specificite superieure au selecteur
   universel (ex. "#promesse-app .contact-submit[disabled]{cursor:progress}"
   = (1,2,0) contre (0,1,1)) et rallumaient donc un curseur systeme.
   On neutralise toutes les valeurs interactives, quelle que soit leur
   specificite, sauf sur les champs de saisie traites plus bas. */
html.olc-on *:not(input):not(textarea):not([contenteditable="true"]){
  cursor:none!important;
}
html.olc-on a, html.olc-on button, html.olc-on label, html.olc-on select,
html.olc-on summary, html.olc-on [role="button"], html.olc-on [role="link"],
html.olc-on [role="tab"], html.olc-on [role="checkbox"], html.olc-on [role="switch"],
html.olc-on [role="option"], html.olc-on [role="menuitem"], html.olc-on .cta{cursor:none;}
/* Le style inline cursor:pointer (ex. .pa1-btn) prime sur les regles ci-dessus :
   on le neutralise explicitement avec !important. */
html.olc-on [style*="cursor:pointer"],
html.olc-on [style*="cursor: pointer"]{cursor:none!important;}
/* Les champs texte gardent leur caret natif : l'orbe s'y fait minuscule. */
html.olc-on input, html.olc-on textarea, html.olc-on [contenteditable="true"]{cursor:text!important;}

#olc-fx{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:12000;pointer-events:none;opacity:0;
  transition:opacity .45s cubic-bezier(0.32,0.72,0,1);
}
html.olc-live #olc-fx{opacity:1;}

#olc-orb{
  position:fixed;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;
  z-index:12001;pointer-events:none;opacity:0;will-change:transform;
  transition:opacity .38s cubic-bezier(0.32,0.72,0,1);
}
html.olc-live #olc-orb{opacity:1;}
#olc-orb .olc-glow,#olc-orb .olc-core,#olc-orb .olc-ring{
  position:absolute;inset:0;border-radius:50%;
  transition:transform .5s cubic-bezier(0.32,0.72,0,1),opacity .5s cubic-bezier(0.32,0.72,0,1);
}
/* Halo respirant — fondu additif sur le site sombre */
#olc-orb .olc-glow{
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(125,255,163,.38) 0%,rgba(33,194,74,.16) 42%,rgba(33,194,74,0) 72%);
  filter:blur(6px);transform:scale(1.55);mix-blend-mode:screen;
}
/* Noyau : blanc-menthe -> vert OptoLead, même harmonie que le cœur du hero */
#olc-orb .olc-core{
  inset:12px;
  background:radial-gradient(50% 50% at 50% 50%,
    #f4fff8 0%,#d6ffe6 26%,#9dffbe 48%,rgba(72,232,120,.42) 70%,rgba(33,194,74,0) 100%);
  box-shadow:0 0 16px rgba(125,255,163,.55),0 0 36px rgba(33,194,74,.30);
}
/* Anneau de visée — n'apparaît que sur les éléments interactifs */
#olc-orb .olc-ring{
  inset:3px;border:1.5px solid rgba(125,255,163,.85);
  opacity:0;transform:scale(.55);
  box-shadow:0 0 12px rgba(33,194,74,.35),inset 0 0 8px rgba(33,194,74,.22);
}
#olc-orb[data-state="link"] .olc-ring{opacity:1;transform:scale(1);}
#olc-orb[data-state="link"] .olc-core{transform:scale(.52);}
#olc-orb[data-state="link"] .olc-glow{transform:scale(1.9);opacity:.85;}
#olc-orb[data-state="press"] .olc-core{transform:scale(.78);}
#olc-orb[data-state="press"] .olc-glow{transform:scale(1.2);}
#olc-orb[data-state="press"] .olc-ring{opacity:.9;transform:scale(.82);}
#olc-orb[data-state="text"] .olc-core{transform:scale(.30);}
#olc-orb[data-state="text"] .olc-glow{opacity:0;}
#olc-orb[data-state="text"] .olc-ring{opacity:0;}

@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
  #olc-fx,#olc-orb{display:none!important;}
  /* !important indispensable : il doit annuler la regle universelle
     "cursor:none!important" posee plus haut, sinon le curseur systeme
     ne reviendrait pas sur tactile / mouvement reduit. */
  html.olc-on,html.olc-on body{cursor:auto!important;}
  html.olc-on *{cursor:auto!important;}
  html.olc-on a,html.olc-on button,html.olc-on label,html.olc-on select,
  html.olc-on summary,html.olc-on [role="button"],html.olc-on .cta,
  html.olc-on [style*="cursor:pointer"]{cursor:pointer!important;}
  html.olc-on input,html.olc-on textarea,
  html.olc-on [contenteditable="true"]{cursor:text!important;}
}

/* ---------- bloc 8  <style id="mobile-v22-patch"> ---------- */
/* =====================================================================
   OPTOLEAD — PATCH MOBILE V22 (cible 390x882, tactile)
   Bloc ajouté en fin de document : il gagne la cascade sur les règles
   précédentes à spécificité égale. Le bureau (>900px) reste intact.
   ---------------------------------------------------------------------
   1. Barre compacte + burger + menu plein écran
   2. Hero : la scène Orbite (cœur du site) récupère tout l'écran
   3. Panel 1 (moniteur) : cadrage agrandi, rotation adoucie
   4. Panel 2 (téléphone) : incrustations dégagées de la barre
   5. Démonstration 01→05 : chapitre 05 compacté, rail tactile
   6. Tarifs : carrousel à balayage (points + indice)
   7. Retours tactiles (:active) sur tous les contrôles
   ===================================================================== */

/* ---------- burger + menu : neutres au-delà de 900px ---------- */
.nav-burger{ display:none; }
.mobile-menu{ display:none; }

@media (max-width:900px){

  /* ============ 1) NAVIGATION : plus de barre, un burger flottant ============ */
  /* La barre complète disparaît : la scène et les sections occupent 100 %
     de l'écran. Seuls trois petits traits suivent la visite, en haut à
     droite — discrets (fond vitré translucide) mais toujours cliquables. */
  .topbar{ display:none; }

  .nav-burger{
    position:fixed; z-index:62;
    top:max(14px, env(safe-area-inset-top, 0px)); right:14px;
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:12px 11px;
    background:rgba(7,9,7,.38);
    border:1px solid rgba(255,255,255,.13); border-radius:13px;
    -webkit-backdrop-filter:blur(10px) saturate(1.2);
            backdrop-filter:blur(10px) saturate(1.2);
    box-shadow:0 6px 22px -10px rgba(0,0,0,.7);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:border-color .25s ease, background .25s ease,
               transform .15s ease, opacity .3s ease;
  }
  .nav-burger span{
    display:block; height:2px; width:100%; border-radius:2px;
    background:rgba(240,244,239,.92);
    transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  }
  .nav-burger:active{ transform:scale(.94); }
  body.menu-open .nav-burger{
    border-color:rgba(33,194,74,.55);
    background:rgba(33,194,74,.12);
  }
  body.menu-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-open .nav-burger span:nth-child(2){ opacity:0; }
  body.menu-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ----- menu : le site reste visible derrière, flouté ----- */
  .mobile-menu{
    display:flex; position:fixed; inset:0; z-index:60;
    flex-direction:column; justify-content:center; align-items:flex-end;
    padding:96px max(26px, env(safe-area-inset-right, 0px)) 44px 26px;
    background:linear-gradient(to right,
      rgba(4,6,4,.42) 0%, rgba(4,6,4,.62) 42%, rgba(4,6,4,.82) 100%);
    -webkit-backdrop-filter:blur(22px) saturate(1.15);
            backdrop-filter:blur(22px) saturate(1.15);
    opacity:0; visibility:hidden; pointer-events:none;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transition:opacity .38s ease, visibility 0s linear .38s;
  }
  body.menu-open .mobile-menu{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .38s ease;
  }
  body.menu-open{ overflow:hidden; }
  .mobile-menu__nav{
    display:flex; flex-direction:column; align-items:flex-end;
    width:min(320px,84vw);
  }
  .mobile-menu__link{
    display:flex; flex-direction:row-reverse; align-items:baseline; gap:14px;
    align-self:stretch; justify-content:flex-start;
    padding:15px 2px; text-align:right;
    color:var(--fg); text-decoration:none;
    font-family:"Google Sans","Poppins","Helvetica Neue",Arial,sans-serif;
    font-size:25px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
    border-bottom:1px solid rgba(255,255,255,.10);
    -webkit-tap-highlight-color:transparent;
    opacity:0; transform:translateX(26px);
    transition:opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1), color .2s ease;
  }
  .mobile-menu__link:active{ color:var(--green); }
  .mobile-menu__link--login{ color:var(--green); }
  .mobile-menu__link--login:active{ color:#7bf2a0; }
  .mobile-menu__num{
    font-family:"JetBrains Mono",ui-monospace,monospace;
    font-size:11px; font-weight:500; color:var(--green); letter-spacing:.08em;
  }
  .mobile-menu__link--login .mobile-menu__num{ color:rgba(240,244,239,.55); }
  /* [MEGA mobile] La cascade etait indexee sur :nth-child. Les depliants
     Services et Tarifs inserent des .mm-group entre les liens : le compte
     se serait decale et deux lignes seraient parties en meme temps. Le
     rang est donc pose a la main (--i) sur chaque ligne du menu, et le
     delai s'en deduit. Meme rendu qu'avant, mais insensible au markup. */
  body.menu-open .mobile-menu__link{ opacity:1; transform:none; }
  .mobile-menu__link,
  .mm-group{ --i:1; }
  body.menu-open .mobile-menu__link{ transition-delay:calc(.01s + var(--i) * .04s); }
  .mm-group > .mobile-menu__link{ --i:inherit; }

  /* ---- le depliant : en-tete ---- */
  .mm-group{
    display:flex; flex-direction:column; align-self:stretch;
  }
  /* l'en-tete est un <button> : on neutralise le style natif, il doit se
     lire exactement comme les autres lignes du menu */
  .mm-head{
    background:none; border:0; border-bottom:1px solid rgba(255,255,255,.10);
    width:100%; cursor:pointer; font-family:inherit;
    -webkit-appearance:none; appearance:none;
  }
  .mm-chev{
    width:15px; height:15px;
    fill:none; stroke:var(--green); stroke-width:2.6;
    stroke-linecap:round; stroke-linejoin:round;
    opacity:.75;
    transition:transform .34s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  }
  .mm-head[aria-expanded="true"] .mm-chev,
  .mm-group.is-open .mm-chev{ transform:rotate(180deg); opacity:1; }
  .mm-head[aria-expanded="true"],
  .mm-group.is-open > .mm-head{ color:var(--green); }

  /* ---- le depliant : contenu ----
     grid-template-rows 0fr -> 1fr : la seule facon d'animer vers une
     hauteur AUTO sans mesurer quoi que ce soit en JS. */
  .mm-sub{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1);
  }
  .mm-group.is-open .mm-sub{ grid-template-rows:1fr; }
  .mm-sub__in{
    overflow:hidden;
    display:flex; flex-direction:column; align-items:flex-end;
  }
  .mm-sub__link{
    display:flex; flex-direction:row-reverse; align-items:center; gap:11px;
    align-self:stretch; justify-content:flex-start;
    padding:11px 2px; text-align:right;
    color:#c3c8c1; text-decoration:none;
    font-size:14.5px; font-weight:500; letter-spacing:.01em;
    border-bottom:1px solid rgba(255,255,255,.05);
    -webkit-tap-highlight-color:transparent;
    opacity:0; transform:translateX(16px);
    transition:opacity .3s ease, transform .34s cubic-bezier(.22,1,.36,1), color .2s ease;
  }
  .mm-group.is-open .mm-sub__link{ opacity:1; transform:none; }
  .mm-group.is-open .mm-sub__link:nth-child(1){ transition-delay:.06s; }
  .mm-group.is-open .mm-sub__link:nth-child(2){ transition-delay:.10s; }
  .mm-group.is-open .mm-sub__link:nth-child(3){ transition-delay:.14s; }
  .mm-group.is-open .mm-sub__link:nth-child(4){ transition-delay:.18s; }
  .mm-group.is-open .mm-sub__link:nth-child(5){ transition-delay:.22s; }
  .mm-group.is-open .mm-sub__link:nth-child(6){ transition-delay:.26s; }
  .mm-sub__link:active{ color:var(--green); }
  .mm-sub__link:last-child{ border-bottom:0; }
  .mm-sub__ic{
    width:15px; height:15px; flex:0 0 auto;
    fill:none; stroke:var(--green); stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round; opacity:.8;
  }
  /* la ligne « voir la section » : plus affirmee, elle mene au bloc entier */
  .mm-sub__link--all{
    color:var(--green);
    font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    padding-top:14px;
  }
  .mm-sub__arw{
    width:14px; height:14px; flex:0 0 auto;
    fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .mobile-menu__foot{
    margin-top:34px; display:flex; flex-direction:row; align-items:center; gap:14px;
    opacity:0; transform:translateY(12px);
    transition:opacity .45s ease .3s, transform .5s cubic-bezier(.22,1,.36,1) .3s;
  }
  body.menu-open .mobile-menu__foot{ opacity:1; transform:none; }
  /* rappel discret de l'identité : petit logo estompé + mail */
  .mobile-menu__logo{ width:30px; height:30px; opacity:.55; display:block; }
  .mobile-menu__mail{ font-size:10.5px; letter-spacing:.16em; color:var(--muted); font-weight:600; }

  /* ============ 2) HERO : l'Orbite récupère tout l'écran ============ */
  .hero{ position:absolute; inset:0; min-height:0; padding:0; }
  /* [V22 mobile] « Disponible sur toute plateforme » retiré : il faisait
     tache au-dessus de la scène, qui doit rester la seule accroche. */
  .hero__status{ display:none; }
  .hero__year{ display:none; }
  /* [V22 mobile] le paragraphe masquait l'orbite : retiré sur mobile */
  .hero__copy{ display:none; }
  /* [V23] descendu (112px -> ~80px du bas) : même logique que sur bureau,
     l'orbite récupère de la hauteur au centre de l'écran. */
  .hero__bottom{
    position:absolute; left:0; right:0; bottom:clamp(48px,7vh,80px); margin:0;
    display:flex; flex-direction:column; align-items:center; gap:18px; padding:0 16px;
  }
  .wordmark{
    font-size:clamp(42px,16.4vw,76px);
    letter-spacing:-0.03em; line-height:.9; text-align:center;
  }
  .hero__right{ max-width:none; margin:0; flex-shrink:1; display:flex; justify-content:center; }
  .cta{ font-size:13px; padding:15px 28px; }

  /* [V23] le bandeau défilant a été supprimé du site (mobile ET bureau) :
     il n'y a plus rien à masquer ici. */

  /* [V22 mobile] AUCUNE mise à l'échelle CSS ici : réduire le canvas au
     transform ne fait que rétrécir une image DEJA coupée par ses bords,
     ce qui déplace le rognage vers l'intérieur. La réduction se fait
     optiquement (recul de caméra, cf. S.zbias) : la scène est rendue
     entière. On ne garde qu'un léger décalage vertical de composition. */
  #terrain.hcr-canvas, #warp.hcr-warp{
    transform:translateY(-4%);
    transform-origin:50% 50%;
  }

  /* ============ 5) DÉMONSTRATION 01→05 ============ */
  .pd-layout{ padding-top:max(104px,12svh); padding-bottom:74px; }
  /* récit resserré : la scène (donc les maquettes) récupère ~45px */
  .pd-copy{ height:198px; }
  .pd-rail{ bottom:20px; gap:10px; }
  /* zone tactile de 40px sans changer le rendu (marges négatives compensées) */
  .pd-rail button{ padding:12px 4px; margin:-12px -4px; }
  .pd-rail i{ width:20px; }
  .pd-hint{ bottom:64px; }
  /* chapitre 05 : bascule Appel/Mail intégrée AU-DESSUS de la carte
     (en absolu elle chevauchait le récit) + carte compactée */
  .pd-shot--contact{ display:flex; flex-direction:column; align-items:center; }
  .pd-c5-switch{ position:static; transform:none; margin:0 0 12px; }
  .pd-c5-switch::after{ display:none; }
  /* --- garde structurelle : le récit passe TOUJOURS au-dessus des
     maquettes, et son fond masque une carte qui dériverait vers le haut.
     C'était la cause de la superposition texte/carte du chapitre 05. --- */
  .pd-copy{ position:relative; z-index:6; }
  .pd-copy::before{
    content:""; position:absolute; inset:-18px -20px -10px; z-index:-1;
    background:linear-gradient(180deg,
      rgba(5,6,5,0) 0%, rgba(5,6,5,.92) 9%, rgba(5,6,5,.92) 82%, rgba(5,6,5,0) 100%);
    pointer-events:none;
  }
  /* la carte 05 s'ancre en haut de la scène : si la place manque, le
     débordement part vers le bas et ne peut plus remonter sur le texte */
  /* la marge dégage franchement la bascule des puces du récit : son halo
     venait lécher la ligne du dessus et donnait une impression de collage */
  .pd-shot--contact{ align-self:flex-start; margin-top:20px; }

  /* [V22 mobile] plus de zoom sur la carte 05 : elle était réduite et
     illisible. On la laisse à taille réelle et on resserre ses marges
     internes — elle tient alors dans la scène, nette et entière. */
  .pd-contact-demo{ padding:17px; }
  .pd-c5-view{ gap:9px; }
  .pd-c5-grid{ gap:9px; }
  .pd-c5-field{ padding:11px 12px; }
  .pd-c5-field b{ font-size:14px; }
  .pd-c5-id{ padding-bottom:11px; margin-bottom:12px; }
  /* on épure la carte 05 : rappel / RDV / note masqués, l'essentiel reste */
  .pd-c5-view .pd-c5-grid:nth-of-type(2){ display:none; }
  /* --- mode MAIL : la vue la plus haute (4 champs + un message de
     plusieurs lignes), la seule qui débordait sur le rail. Elle est
     compactée sur TOUT mobile, pas seulement sur écran court : on retire
     le champ le moins porteur (le modèle d'email), on supprime la ligne
     à vide du message et on resserre son interligne. --- */
  .pd-c5-view[data-contact-view="mail"] .pd-c5-grid:nth-of-type(1)
    > .pd-c5-field:nth-child(2){ display:none; }
  .pd-c5-view[data-contact-view="mail"] .pd-c5-tags{ display:none; }
  .pd-c5-msg{ line-height:1.4; }
  .pd-c5-msg br + br{ display:none; }
  /* l'annotation basse déborderait sous la carte : ramenée à l'intérieur */
  .pd-shot--contact .pd-float--tr{ bottom:-11px; right:12px; }

  /* ============ divers ============ */
  .progress-corner{ width:46px; height:46px; right:14px; bottom:14px; }
}

/* =====================================================================
   ECRANS COURTS (navigateur intégré, barre d'URL, petits téléphones) :
   la hauteur utile descend souvent à ~700-780px. Tout le chapitre 05 se
   compacte alors pour rester entier, sans jamais toucher le récit.
   ===================================================================== */
@media (max-width:900px) and (max-height:820px){
  .pd-layout{ padding-top:max(76px,8.5svh); padding-bottom:56px; }
  .pd-copy{ height:clamp(140px,20svh,168px); }
  .pd-title{ font-size:clamp(20px,5.8vw,26px); }
  .pd-text{ font-size:12.5px; }
  .pd-chips span{ padding:4px 9px; font-size:8.5px; }
  .pd-rail{ bottom:14px; }
  .pd-hint{ display:none; }
  /* carte 05 : marges et champs resserrés */
  .pd-c5-switch{ margin-bottom:9px; }
  .pd-c5-tab{ padding:7px 12px; font-size:9px; }
  .pd-contact-demo{ padding:13px; }
  .pd-c5-view{ gap:7px; }
  .pd-c5-grid{ gap:7px; }
  .pd-c5-field{ padding:9px 11px; }
  .pd-c5-field b{ font-size:13px; }
  .pd-c5-field small{ margin-bottom:4px; }
  .pd-c5-id{ padding-bottom:9px; margin-bottom:10px; }
  .pd-c5-av{ width:32px; height:32px; }
  /* les mêmes mots figurent déjà en puces dans le récit juste au-dessus */
  .pd-c5-tags{ display:none; }
}
@media (max-width:900px) and (max-height:700px){
  .pd-copy{ height:126px; }
  .pd-text{ display:none; }          /* titre + puces suffisent à ce format */
  .pd-c5-field small{ font-size:7.5px; }
  .pd-c5-actions{ display:none; }
  /* format très court : le message est ramené à trois lignes */
  .pd-c5-view[data-contact-view="mail"] .pd-c5-msg{
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* neutralise l'ancien agrandissement du logo (64px) sous 560px */
@media (max-width:560px){
  .topbar__logo{ width:46px; height:46px; }
  .wordmark{ font-size:clamp(42px,16.4vw,76px); }
}

/* ============ 3) PANEL 1 : moniteur agrandi, rotation adoucie ============ */
@media (max-width:760px){
  /* [V22 mobile] la tablette passe à la VERTICALE : plus haute, entièrement
     dans l'écran (plus aucun rognage gauche/droite), relief conservé. */
  #panel1-anim .pa1-monitor{
    width:min(88vw,344px); max-width:none; flex:0 0 auto;
    aspect-ratio:7/10;
  }
  /* keyframes redéfinis DANS la media query : n'affectent que le mobile */
  @keyframes pa1-monitor-in{
    from{opacity:0;transform:rotateX(4deg) rotateY(-9deg) rotateZ(1.2deg) scale(.86) translateY(46px);}
    to{opacity:1;transform:rotateX(4deg) rotateY(-9deg) rotateZ(1.2deg) scale(.94) translateY(0);}
  }
  @keyframes pa1-float{
    0%,100%{transform:rotateX(4deg) rotateY(-9deg) rotateZ(1.2deg) scale(.94) translateY(0);}
    50%{transform:rotateX(3.4deg) rotateY(-8deg) rotateZ(1deg) scale(.945) translateY(-9px);}
  }
  #panel1-anim .pa1-ui{ padding:16px 15px 20px; }
  #panel1-anim .pa1-headline{ font-size:clamp(21px,6.6vw,28px); max-width:15ch; }
  #panel1-anim .pa1-sub{ font-size:clamp(11.5px,3.2vw,13.5px); max-width:30ch; line-height:1.45; }
  #panel1-anim .pa1-eyebrow{ font-size:9.5px; letter-spacing:1.5px; padding:4px 11px; }
  #panel1-anim .pa1-btn{ font-size:13.5px; padding:11px 28px; margin-top:2px; }
  #panel1-anim .pa1-hero{ gap:clamp(8px,1.2vh,12px); padding:0 4% 10px; }
  #panel1-anim .pa1-logo{ font-size:14px; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  #panel1-anim .pa1-monitor{
    transform:rotateX(4deg) rotateY(-9deg) rotateZ(1.2deg) scale(.94) !important;
  }
}

/* ============ À PROPOS : respiration mobile ============ */
@media (max-width:700px){
  .about{ padding-top:clamp(56px,9vh,90px); padding-bottom:clamp(64px,10vh,110px); }
  .about__text{ font-size:clamp(23px,6.6vw,30px); }
  .about__signature{ margin-top:clamp(28px,5vh,48px); font-size:clamp(46px,15vw,64px); }
}

/* ============ 6) TARIFS : carrousel à balayage ============ */
@media (max-width:700px){
  #promesse-app .pricing{ padding:36px 6vw 120px; }
  #promesse-app .pricing-title{ margin-bottom:32px; }
  #promesse-app .billing-toggle{ margin-bottom:42px; gap:34px; }
  #promesse-app .plans{
    display:flex; max-width:none;
    /* le défilement horizontal crée un contexte de rognage qui coupait le
       halo des cartes en haut et en bas : on lui donne de la marge
       intérieure, compensée par des marges négatives (position inchangée). */
    margin:-30px -6vw -44px; padding:36px 9vw 54px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px;
    scrollbar-width:none;
  }
  #promesse-app .plans::-webkit-scrollbar{ display:none; }
  #promesse-app .plan{
    flex:0 0 min(78vw,325px);
    scroll-snap-align:center;
    border:1px solid rgba(255,255,255,.09);
    border-radius:20px;
    background:linear-gradient(180deg,rgba(16,19,16,.55),rgba(7,9,7,.85));
    overflow:hidden;
  }
  /* teinte propre à chaque formule (mêmes couleurs que le crescendo bureau) */
  #promesse-app .plan[data-plan="smart"]  { --pcr:33,194,74;   }
  #promesse-app .plan[data-plan="pro"]    { --pcr:39,209,92;   }
  #promesse-app .plan[data-plan="max"]    { --pcr:47,221,125;  }
  #promesse-app .plan[data-plan="custom"] { --pcr:67,230,160; }
  /* aucune carte n'est mise en avant par défaut : c'est le balayage qui
     décide. La carte arrivée au centre s'allume dans SA couleur. */
  #promesse-app .plan--featured{ border-color:rgba(255,255,255,.09); box-shadow:none; }
  /* la page reste noire : SEULE la carte au centre s'illumine — son
     contour d'abord, puis la carte elle-même par l'intérieur. Tout est
     en fondu progressif pour accompagner le balayage. */
  #promesse-app .plan{
    transition:border-color .6s ease, box-shadow .6s ease, background .6s ease;
  }
  #promesse-app .plan .plan-glow{ transition:opacity .65s ease; }
  #promesse-app .plan .plan-bar{ transition:background .6s ease, box-shadow .6s ease; }
  #promesse-app .plan.is-active{
    border-color:rgba(var(--pcr),.62);
    box-shadow:0 0 0 1px rgba(var(--pcr),.18),
               0 22px 60px -22px rgba(var(--pcr),.55),
               inset 0 0 80px -30px rgba(var(--pcr),.95);
  }
  #promesse-app .plan.is-active .plan-bar{
    background:rgb(var(--pcr)); box-shadow:0 0 16px rgba(var(--pcr),.65);
  }
  #promesse-app .plan.is-active .plan-glow{ opacity:1; }

  #promesse-app .plan-bar{ left:22px; right:22px; }
  #promesse-app .plan-body{ padding:30px 22px 36px; }
  #promesse-app .plan-name{ margin-bottom:26px; }
  /* le nom respire moins ici (26px) : on ne remonte l'ancien prix que de
     moitie, sinon il vient coller sous le nom de la formule */
  #promesse-app .plan-was{ margin-top:-14px; }
  /* en carrousel, c'est .is-active (le balayage) qui allume la carte */
  #promesse-app .plan.is-active .plan-was .was{ color:#767c77; }
  #promesse-app .plan.is-active .plan-was .was::after{ background:rgba(255,255,255,.42); }
  #promesse-app .plan-desc{ min-height:0; margin-bottom:26px; }
  #promesse-app .plan-cta{ margin-bottom:30px; padding:15px 24px; }
  #promesse-app .plan-incl{ margin-bottom:20px; }
  #promesse-app .plan-feats{ gap:14px; }
  #promesse-app .plan-feats li{ font-size:14.5px; }

  /* points + indice de balayage (injectés en JS) */
  #promesse-app .plans-dots{ display:flex; justify-content:center; gap:9px; margin-top:18px; }
  #promesse-app .plans-dots i{
    width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,.22);
    transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  #promesse-app .plans-dots i.is-on{
    background:var(--green); transform:scale(1.3);
    box-shadow:0 0 10px rgba(39,214,81,.7);
  }
  #promesse-app .plans-hint{
    margin:12px auto 0; width:max-content;
    display:flex; align-items:center; gap:10px;
    font:500 9.5px/1 "JetBrains Mono",ui-monospace,monospace;
    letter-spacing:.22em; text-transform:uppercase; color:#8f948d;
    transition:opacity .5s ease;
  }
  #promesse-app .plans-hint svg{ width:14px; height:14px; fill:none; stroke:#27d651; }
  #promesse-app .plans-hint.is-done{ opacity:0; }
}
@media (min-width:701px){
  #promesse-app .plans-dots, #promesse-app .plans-hint{ display:none; }
}

/* ============ FAQ + CONTACT : resserrage fin ============ */
@media (max-width:560px){
  #promesse-app .faq-title{ margin-bottom:44px; }
  #promesse-app .faq-head{ grid-template-columns:34px 1fr 24px; gap:12px; padding:22px 2px; }
  #promesse-app .faq-num{ font-size:14px; }
  #promesse-app .faq-answer p{ padding-left:46px; padding-bottom:26px; }
  #promesse-app .contact{ padding-top:70px; }
  #promesse-app .contact-head{ margin-bottom:48px; }
}

/* ============ 7) RETOURS TACTILES (le tap remplace le survol) ============ */
@media (hover:none){
  a, button{ -webkit-tap-highlight-color:transparent; }
  /* au doigt, :hover reste « collé » après un tap : l'illumination des
     formules ne doit dépendre que du balayage (.is-active). */
  #promesse-app .plan:hover .plan-glow{ opacity:0; }
  #promesse-app .plan.is-active .plan-glow{ opacity:1; }
  /* CTA : le voile blanc→vert monte à l'appui, comme au survol bureau */
  .cta:active,
  #promesse-app .plan-cta:active,
  #promesse-app .contact-submit:active,
  .topbar__login:active{ color:#04140a; border-color:var(--green); }
  .cta:active::before,
  #promesse-app .plan-cta:active::before,
  #promesse-app .contact-submit:active::before,
  .topbar__login:active::before{ height:100%; background:var(--green); transition-delay:0s; }
  .pd-c5-tab:active{ transform:scale(.96); }
  #panel3 .pd-rail button:active b{ opacity:1; color:var(--pdg); }
  #promesse-app .faq-head:active .faq-q{ color:var(--green); }
  #promesse-app .bt-opt:active .bt-label{ color:#fff; }
  #panel1-anim .pa1-btn:active{ transform:translateY(1px) scale(.98); }
  .about__logo-stage:active{ opacity:.88; }
}

/* ---------- bloc 9  <style id="cam-motion-test"> ---------- */
/* =====================================================================
   OPTOLEAD — V22 TEST · CAMERA MOTION
   L'animation « moniteur » du panneau 1 est retirée. À la place, la scène
   Orbite du hero reste vivante pendant deux écrans pendant que la caméra
   glisse de la vue de face au plan plongeant, et le texte du panneau 1
   se révèle au scroll par-dessus.
   ===================================================================== */

/* --- 1) On dégage la vue : le panneau 1 devient une simple couche de
   texte, transparente, posée sur la scène du hero. --- */
/* le conteneur laisse lui aussi passer les gestes ; seuls les panneaux
   qui en ont besoin les reprennent (démonstration, bascule du 05...) */
.panels{ background:transparent; pointer-events:none; }
#panel2, #panel3{ pointer-events:auto; }
/* [V22 test] Le panneau 1 est une couche de LECTURE, pas de saisie : il
   laisse passer les gestes vers la scène Orbite qui vit dessous. C'est ce
   qui garde l'orbite pleinement interactive — rotation au doigt et onde au
   tap — pendant tout le mouvement de caméra, exactement comme en haut de
   page. Le panneau redevient opaque et bloquant dès le panneau 2. */
#panel1{ background:transparent; pointer-events:none; }
#panel1-anim{ display:none; }          /* le moniteur 3D est retiré */
/* les panneaux suivants restent opaques : ils recouvrent la scène */
#panel2, #panel3{ background:#000; }
.panels__tail{ background:#000; }
/* la réserve laisse voir la scène : elle ne fait qu'allonger le parcours */
.cam-spacer{ height:100vh; height:100svh; background:transparent; pointer-events:none; }

/* --- 2) Le texte, style éditorial épuré --- */
.cam-copy{
  position:absolute; z-index:4;
  right:clamp(28px,7vw,116px);
  bottom:clamp(72px,15vh,164px);
  width:min(560px,50vw);
  text-align:left;
  pointer-events:none;             /* seul le bouton reste cliquable */
}
.cam-copy__eyebrow{
  margin:0 0 clamp(16px,2.2vh,26px);
  font:500 10.5px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.28em; text-transform:uppercase; color:#8fa89c;
}
.cam-copy__title{
  margin:0 0 clamp(18px,2.6vh,30px);
  font-family:"Google Sans","Poppins","Helvetica Neue",Arial,sans-serif;
  font-weight:600; font-size:clamp(30px,3.9vw,58px); line-height:1.06;
  letter-spacing:-0.025em; color:var(--fg);
}
.cam-copy__title em{
  font-style:italic; font-weight:500;
  color:var(--green);
  /* léger halo : le mot accentué reste lisible sur la scène */
  text-shadow:0 0 26px rgba(33,194,74,.35);
}
/* [V23 FIX] BUG « Il n'a jamais ete aussi simple DE PROSPECTER » rogne.
   La ligne etait un masque (overflow:hidden) de la hauteur exacte du texte,
   alors que le mot monte de 34 px avec un flou de 14 px : le navigateur
   tranchait net le bas des lettres (et les jambages p/j meme a l'arrivee,
   line-height valant 1.06). La revelation ne repose PAS sur ce masque mais
   sur opacite + montee + flou : on retire donc le rognage et on reserve un
   peu de place sous la ligne. Rendu final strictement identique. */
.cam-line{
  display:block;
  overflow:visible;
  padding-bottom:.16em;      /* place pour les jambages et le halo du flou */
  margin-bottom:-.16em;      /* ...reprise, pour ne pas bouger l'interligne */
}
.cam-copy__sub{
  margin:0;
  max-width:46ch;
  font-size:clamp(14.5px,1.15vw,18px); line-height:1.55;
  color:#b8c2b8;
}

/* état initial : tout est prêt à monter, sans à-coup au premier rendu */
.cam-copy__eyebrow > span,
.cam-line > span,
.cam-copy__sub > span{
  display:block;
  opacity:0;
  transform:translate3d(0,var(--cam-rise,34px),0);
  filter:blur(var(--cam-blur,14px));
  will-change:transform,opacity,filter;
}
.cam-copy__eyebrow > span{ --cam-rise:16px; --cam-blur:8px; }

/* voile très doux derrière le texte : il garantit la lisibilité quand
   une trajectoire lumineuse de l'orbite passe juste derrière */
.cam-copy::before{
  content:""; position:absolute; inset:-8% -12% -14% -16%; z-index:-1;
  background:radial-gradient(120% 90% at 78% 60%,
    rgba(4,6,4,.72) 0%, rgba(4,6,4,.45) 46%, rgba(4,6,4,0) 78%);
  pointer-events:none;
}

/* --- 3) Mobile : l'orbite part en haut à gauche, le texte occupe le bas --- */
@media (max-width:900px){
  .cam-copy{
    right:auto; left:0;
    width:auto; inset:auto 22px clamp(64px,11vh,132px) 22px;
  }
  .cam-copy__title{ font-size:clamp(27px,7.6vw,42px); line-height:1.1; }
  .cam-copy__sub{ font-size:clamp(13.5px,3.7vw,16px); max-width:34ch; }
  .cam-copy__eyebrow{ font-size:9.5px; letter-spacing:.24em; }
  .cam-copy::before{
    inset:-10% -18% -18% -18%;
    background:radial-gradient(130% 100% at 50% 62%,
      rgba(4,6,4,.80) 0%, rgba(4,6,4,.52) 50%, rgba(4,6,4,0) 80%);
  }
}
@media (max-width:900px) and (max-height:760px){
  .cam-copy{ bottom:clamp(52px,8vh,90px); }
  .cam-copy__title{ font-size:clamp(24px,6.8vw,34px); }
  .cam-copy__eyebrow{ margin-bottom:12px; }
  .cam-copy__sub{ margin-bottom:0; font-size:13px; }
}

/* mouvement réduit : le texte est simplement là, sans chorégraphie */
@media (prefers-reduced-motion:reduce){
  .cam-copy__eyebrow > span,
  .cam-line > span,
  .cam-copy__sub > span{ opacity:1; transform:none; filter:none; }
}

/* ---------- bloc 10  <style id="free-plan-style"> ---------- */
/* ======================================================================
   [V26] FORMULE FREE — une seule offre, deux mises en scene.

   • MOBILE (<=700px) : une carte de plus dans le carrousel, placee AVANT
     Smart. Elle suit toutes les regles du carrousel (largeur, aimantation,
     point de progression, illumination au centre) mais se distingue par
     son badge « GRATUIT », son contenu centre verticalement et son halo
     qui descend du haut au lieu de monter du bas.

   • BUREAU (>=701px) : la grille des 4 formules n'est PAS touchee. L'offre
     prend la forme d'une bande ovale posee dessous, sur toute la largeur :
     identite a gauche, promesse au centre, bouton a droite.

   Revelation : montee douce + flou qui se dissipe, meme grammaire que le
   titre « FAQ » (opacite / filter / transform, courbe .16,1,.3,1).
   ====================================================================== */

/* ---------------- Elements communs aux deux versions ---------------- */

/* pastille verte « offre active » — echo du point du selecteur de facturation */
#promesse-app .free-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--green); box-shadow:0 0 10px rgba(39,214,81,.75);
  margin-right:12px; flex:0 0 auto;
  animation:freeDotPulse 3.4s ease-in-out infinite;
}
@keyframes freeDotPulse{
  0%,100%{ box-shadow:0 0 10px rgba(39,214,81,.70); opacity:1; }
  50%    { box-shadow:0 0 19px rgba(39,214,81,.95); opacity:.7; }
}

/* micro-etiquette monospace, meme famille que l'indice « Glissez pour comparer » */
#promesse-app .free-tag{
  display:inline-block; margin-left:13px; vertical-align:middle;
  font:600 9.5px/1 "JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--green);
  border:1px solid rgba(39,214,81,.34);
  background:rgba(39,214,81,.08);
  border-radius:999px;
  padding:6px 10px 5px;
}

/* « +5 credits offerts » : meme typographie que les prix des autres cartes */
#promesse-app .free-credits{
  display:flex; align-items:baseline; gap:2px;
  margin:0; white-space:nowrap;
}
#promesse-app .free-credits .sym{
  font-size:clamp(26px,2vw,34px); font-weight:500;
  color:var(--green); margin-right:4px;
}
#promesse-app .free-credits .num{
  font-size:clamp(40px,3.6vw,58px); font-weight:500;
  color:#fff; letter-spacing:-0.01em;
}
#promesse-app .free-credits .unit{
  font-size:15px; color:#8a8a8a; font-weight:500;
  align-self:flex-start; margin-top:.5em; margin-left:8px;
}

/* le bouton garde EXACTEMENT le comportement des autres (voile blanc -> vert),
   seule la forme change : pilule, pour repondre a l'ovale de la bande */
#promesse-app .plan-cta--free{ border-radius:999px; white-space:nowrap; }

/* ---------------- BUREAU : la bande ovale ---------------- */

#promesse-app .free-band{
  position:relative; z-index:1;
  max-width:1500px;
  margin:clamp(44px,4vw,68px) auto 0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(26px,3.2vw,58px);
  padding:26px clamp(30px,3vw,52px);
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:
    radial-gradient(120% 250% at 0% 50%,
      rgba(39,214,81,.11) 0%, rgba(39,214,81,.035) 34%, rgba(39,214,81,0) 62%),
    linear-gradient(180deg, rgba(17,21,17,.72), rgba(7,9,7,.92));
  overflow:hidden;
  isolation:isolate;
  transition:border-color .55s ease, box-shadow .55s ease;
}
/* halo interne au survol — meme mecanique que .plan-glow (opacite 0 -> 1) */
#promesse-app .free-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 250% at 0% 50%,
    rgba(39,214,81,.22) 0%, rgba(39,214,81,.07) 38%, rgba(39,214,81,0) 68%);
  opacity:0; transition:opacity .55s ease;
}
#promesse-app .free-band:hover::before{ opacity:1; }
/* filet clair sur l'arete haute : la reponse ovale a la .plan-bar des cartes */
#promesse-app .free-band::after{
  content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0), rgba(255,255,255,.30), rgba(255,255,255,0));
  pointer-events:none;
}
#promesse-app .free-band:hover{
  border-color:rgba(39,214,81,.40);
  box-shadow:0 0 0 1px rgba(39,214,81,.10),
             0 26px 70px -34px rgba(39,214,81,.55);
}

#promesse-app .free-band .free-id,
#promesse-app .free-band .free-desc,
#promesse-app .free-band .plan-cta{ position:relative; z-index:2; }

/* identite et credits sur UNE ligne : c'est ce qui donne a la bande sa
   silhouette allongee (~12:1) plutot qu'un gros bloc arrondi */
#promesse-app .free-id{
  display:flex; align-items:center;
  gap:clamp(18px,1.7vw,28px);
}
#promesse-app .free-id .free-credits{
  padding-left:clamp(18px,1.7vw,28px);
  border-left:1px solid rgba(255,255,255,.10);
}
#promesse-app .free-band .free-credits .num{ font-size:clamp(34px,2.7vw,44px); }
#promesse-app .free-band .free-credits .sym{ font-size:clamp(22px,1.6vw,28px); }
#promesse-app .free-band .free-credits .unit{ margin-top:.45em; }
#promesse-app .free-name{
  font-size:21px; font-weight:500; color:#fff;
  margin:0; display:flex; align-items:center; white-space:nowrap;
}
#promesse-app .free-desc{
  margin:0;
  font-size:15.5px; line-height:1.55; color:#9a9a9a; font-weight:400;
  max-width:66ch;
  padding-left:clamp(22px,2.4vw,42px);
  border-left:1px solid rgba(255,255,255,.10);
}
#promesse-app .free-band .plan-cta{ margin:0; padding:17px 32px; }

/* largeurs intermediaires : la bande passe sur deux lignes, l'ovale s'adoucit */
@media (min-width:701px) and (max-width:1080px){
  #promesse-app .free-band{
    grid-template-columns:auto auto;
    justify-content:space-between;
    row-gap:24px;
    border-radius:46px;
    padding:28px clamp(26px,3vw,40px);
  }
  #promesse-app .free-desc{
    grid-column:1 / -1; order:3;
    padding-left:0; border-left:0; max-width:none;
  }
  #promesse-app .free-id{ flex-direction:column; align-items:flex-start; gap:10px; }
  #promesse-app .free-id .free-credits{ padding-left:0; border-left:0; }
}

/* ---------------- MOBILE : la 5e carte du carrousel ---------------- */

@media (max-width:700px){
  #promesse-app .free-band{ display:none; }

  /* teinte propre : le vert le plus profond, juste avant Smart dans le crescendo */
  #promesse-app .plan[data-plan="free"]{ --pcr:31,170,70; }
  /* meme au repos, son contour est deja legerement vert : c'est l'offre d'entree */
  #promesse-app .plan--free{
    display:flex;
    border-color:rgba(39,214,81,.20);
  }
  /* son halo descend du haut (les autres montent du bas) */
  #promesse-app .plan--free .plan-glow{
    background:radial-gradient(120% 74% at 50% 0%,
      rgba(39,214,81,.24) 0%, rgba(39,214,81,.07) 44%, rgba(39,214,81,0) 72%);
  }
  /* contenu plus court que les autres : on le centre pour que le vide soit voulu */
  #promesse-app .plan--free .plan-body{
    flex:1; display:flex; flex-direction:column; justify-content:center;
    padding-top:34px; padding-bottom:38px;
  }
  #promesse-app .plan--free .plan-name{
    margin-bottom:24px; display:flex; align-items:center;
  }
  #promesse-app .plan--free .free-credits{ margin-bottom:26px; }
  #promesse-app .plan--free .plan-desc{ margin-bottom:30px; }
  #promesse-app .plan--free .plan-cta{ margin:0 auto; }
  #promesse-app .plan--free .free-tag{ margin-left:11px; }
}
@media (min-width:701px){
  #promesse-app .plan--free{ display:none; }
}

/* ---------------- Revelation : flou qui se dissipe (grammaire « FAQ ») ------- */

#promesse-app .free-reveal{
  opacity:0;
  filter:blur(11px);
  transform:translateY(26px) scale(.988);
  transition:opacity 620ms ease-out,
             filter 780ms ease-out,
             transform 860ms cubic-bezier(.16,1,.3,1);
  will-change:opacity,filter,transform;
}
#promesse-app .free-reveal.is-in{ opacity:1; filter:none; transform:none; }
/* les particules n'entrent qu'une fois la carte posee : rien a flouter
   pendant la transition, et l'arrivee reste franche */
#promesse-app .free-reveal .plan-particles{
  opacity:0; transition:opacity 700ms ease-out 620ms;
}
#promesse-app .free-reveal.is-in .plan-particles{ opacity:1; }
/* une fois pose, on rend la main au compositeur (aucun changement visuel) */
#promesse-app .free-reveal.free-settled{ will-change:auto; }

#promesse-app .free-reveal .free-stagger{
  opacity:0; filter:blur(7px); transform:translateY(13px);
  transition:opacity 520ms ease-out,
             filter 660ms ease-out,
             transform 720ms cubic-bezier(.16,1,.3,1);
  transition-delay:calc(200ms + var(--free-i,0) * 110ms);
}
#promesse-app .free-reveal.is-in .free-stagger{
  opacity:1; filter:none; transform:none;
}
#promesse-app .free-reveal.free-settled .free-stagger{ will-change:auto; }

@media (prefers-reduced-motion:reduce){
  #promesse-app .free-reveal,
  #promesse-app .free-reveal .free-stagger{
    opacity:1!important; filter:none!important;
    transform:none!important; transition:none!important;
  }
  #promesse-app .free-dot{ animation:none; }
}

/* ---------- bloc 11  <style id="phone-mobile-fit"> ---------- */
/* ======================================================================
   [V26] TELEPHONE 3D (#panel2-anim) — AJUSTEMENT MOBILE UNIQUEMENT.

   Probleme : le chassis est fluide (76vw / 156vw) alors que l'interface
   affichee dedans est en pixels fixes (13px de texte, 26px de marges...).
   Sous ~474px de large, la vitre devient plus petite que son contenu :
   87px debordent a 390px, 139px a 360px — et ce qui sort du cadre, c'est
   exactement la barre d'onglets « Signaux / Prospects / Pipeline ».

   Correctif : le telephone devient une VRAIE miniature du modele bureau.
   Un facteur unique --pa2-fit (largeur reelle / 360px de reference)
   commande la bordure, les rayons, l'encoche et l'interface entiere. La
   composition affichee est donc celle du bureau au pixel pres, seulement
   reduite : plus rien ne peut etre coupe, quelle que soit la largeur.

   Le chassis en profite pour s'affiner : moins large et plus elance
   qu'avant (rapport .460 contre .487), donc plus discret sur la page.
   Aucune valeur bureau n'est touchee.

   --pa2-fit est pose en JS (voir #phone-mobile-fit-js) car CSS ne sait
   pas diviser une longueur par une longueur. Tant qu'il n'est pas pose,
   la classe .is-fitted est absente et le rendu reste strictement celui
   d'avant : la degradation est sans risque.
   ====================================================================== */
@media (max-width:700px){

  #panel2-anim .pa2-phone.is-fitted{
    width: min(360px, 69vw);
    height: min(740px, 148vw);
  }

  /* --- le chassis suit l'echelle : bordure, rayons, boutons, encoche --- */
  #panel2-anim .pa2-phone.is-fitted .pa2-frame{
    padding: calc(13px * var(--pa2-fit));
    border-radius: calc(54px * var(--pa2-fit));
  }
  #panel2-anim .pa2-phone.is-fitted .pa2-body-layer{
    border-radius: calc(54px * var(--pa2-fit));
  }
  #panel2-anim .pa2-phone.is-fitted .pa2-screen{
    border-radius: calc(42px * var(--pa2-fit));
  }
  #panel2-anim .pa2-phone.is-fitted .pa2-side-btn{
    right: calc(-4px * var(--pa2-fit));
    width: calc(6px * var(--pa2-fit));
  }
  #panel2-anim .pa2-phone.is-fitted .pa2-notch{
    top: calc(14px * var(--pa2-fit));
    height: calc(26px * var(--pa2-fit));
    border-radius: 0 0 calc(16px * var(--pa2-fit)) calc(16px * var(--pa2-fit));
  }

  /* --- l'interface est composee au gabarit bureau (334px de vitre) puis
         reduite d'un bloc. La hauteur est divisee par le facteur pour que
         la boite recouvre exactement la vitre une fois reduite : la barre
         d'onglets (margin-top:auto) reste donc plaquee en bas. --- */
  #panel2-anim .pa2-phone.is-fitted .pa2-app{
    inset: 0 auto auto 0;
    width: 334px;
    height: calc(100% / var(--pa2-fit));
    transform-origin: 0 0;
    transform: scale(var(--pa2-fit));
  }
}

/* ---------- bloc 12  <style id="motion-toggle-style"> ---------- */
/* Meme grammaire que le selecteur de facturation des Tarifs : un petit rond
   qui s'allume en vert, et une micro-etiquette monospace — la typographie
   deja utilisee pour les indices discrets du site. */
.mtoggle{
  display:flex; align-items:center; gap:9px;
  background:none; border:0; padding:3px 0; margin:0;
  font-family:inherit; cursor:pointer; color:#6f736e;
  transition:color .3s ease;
}
.mtoggle:hover{ color:#a9aea8; }
.mtoggle[aria-checked="true"]{ color:#c8ccc6; }
.mtoggle__dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid #4a4a4a; background:transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mtoggle[aria-checked="true"] .mtoggle__dot{
  background:var(--green); border-color:var(--green);
  box-shadow:0 0 9px rgba(39,214,81,.7);
}
.mtoggle__label{
  font:600 9.5px/1 "JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.17em; text-transform:uppercase; white-space:nowrap;
}
.mtoggle:focus-visible{
  outline:2px solid var(--green); outline-offset:5px; border-radius:6px;
}
/* dans la barre du haut : troisieme ligne du bloc mail / heure */
.topbar__meta .mtoggle{ margin-top:3px; }
/* dans le menu mobile : sur sa propre ligne, sous le logo et le mail */
@media (max-width:900px){
  .mobile-menu__foot{ flex-wrap:wrap; }
  .mobile-menu__foot .mtoggle{ flex:0 0 100%; margin-top:2px; }
}

