/* ==================================================================
   Fuentes self-hosted (D-08, LAND-03) — 12 woff2 latin, espejo exacto
   del set que cargaba el link original de Google Fonts.
   JetBrains Mono SOLO 400/500: el diseño renderiza 600/700 con
   faux-bold; añadir los reales cambiaría el render (Pitfall 4).
   ================================================================== */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-sans-v4-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/instrument-sans-v4-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/instrument-sans-v4-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-v4-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/inter-tight-v9-latin-200.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-tight-v9-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-tight-v9-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-tight-v9-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-tight-v9-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-tight-v9-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2');
}

  * { box-sizing: border-box; }
  body { margin: 0; }
  ::selection { background: #e0dbfb; color: #14121f; }
  a { text-decoration: none; }
  .ip-cta { transition: transform .2s cubic-bezier(.2,0,0,1), filter .2s, box-shadow .2s; }
  .ip-cta:hover { transform: translateY(-1px); filter: brightness(1.04); }
  details > summary::-webkit-details-marker { display: none; }
  details > summary { list-style: none; }
  details[open] .tj-chev { transform: rotate(180deg); color: #14121F; }
  .ip-ghost { transition: background .18s, border-color .18s; }
  .ip-ghost:hover { background: #f3f1fd; }
  .ip-row:hover { background: #faf9ff; }
  .bento { transition: transform .18s cubic-bezier(.2,0,0,1), box-shadow .18s; }
  .bento:hover { transform: translateY(-2px); }
  @keyframes ipRise { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
  @keyframes ipGlow { 0%,100% { opacity:.5; } 50% { opacity:1; } }
  .hero-anim { animation: ipRise .9s cubic-bezier(.2,0,0,1) both; }
  .js-ready .reveal { opacity:0; transform:translateY(36px); transition:opacity .85s cubic-bezier(.2,0,0,1), transform .85s cubic-bezier(.2,0,0,1); }
  .js-ready .reveal.in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) { .js-ready .reveal { opacity:1 !important; transform:none !important; } .hero-anim { animation:none !important; } }
  .grad-txt { background: linear-gradient(120deg,#6D5EF6,#A24BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
  [data-journey-track] { will-change: transform; }
  .jrn-panel { flex: 0 0 auto; }
  @keyframes navBrainPulse { 0%, 62%, 100% { opacity: .13; } 72%, 82% { opacity: .38; } }

  

  .hdr-logo-stack { display:flex; flex-direction:row; align-items:stretch; line-height:1; transition:height 220ms ease; }
  .hdr-logo-col { display:flex; flex-direction:column; justify-content:center; }
  html.is-scrolled .hdr-logo-stack { height:auto; }
  .hdr-baseline { display:flex; align-items:center; opacity:0; max-width:0; overflow:hidden; transition:opacity 220ms ease, max-width 260ms ease, margin 220ms ease, padding 220ms ease; pointer-events:none; white-space:nowrap; margin-left:0; padding-left:0; border-left:1px solid transparent; }
  html.is-scrolled .hdr-baseline { opacity:1; max-width:280px; margin-left:10px; padding-left:10px; border-left-color:#dcd7f0; }
  @media (max-width: 768px) { .hdr-baseline { display:none !important; } html.is-scrolled .hdr-logo-stack { height:auto; justify-content:center; } }
  /* Nav links état hover + actif (underline orange) */
  .ip-nav-link:hover { color:#14121F !important; }
  .ip-nav-link[data-active="1"] { color:#FF6B4A !important; font-weight:700 !important; }
  .ip-nav-link[data-active="1"]::after {
    content:"↓";
    position:relative;
    display:inline-block;
    margin-left:5px;
    font-size:0.85em;
    color:#FF6B4A;
    font-weight:700;
    line-height:1;
    transform:translateY(-1px);
  }
  

  /* Burger menu mobile — caché sur desktop */
  .mobile-nav { display:none; }
  .mobile-burger {
    list-style:none;
    width:38px;
    height:38px;
    border-radius:10px;
    border:1px solid #ecebf6;
    background:#fff;
    cursor:pointer;
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    margin-left:8px;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-burger::-webkit-details-marker { display:none; }
  .mobile-burger span {
    display:block;
    width:16px;
    height:1.5px;
    background:#14121F;
    border-radius:1px;
    transition:transform 180ms, opacity 180ms;
  }
  .mobile-nav[open] .mobile-burger span:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
  .mobile-nav[open] .mobile-burger span:nth-child(2) { opacity:0; }
  .mobile-nav[open] .mobile-burger span:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }
  .mobile-menu-panel {
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    background:#fff;
    border:1px solid #ecebf6;
    border-radius:14px;
    padding:8px;
    min-width:220px;
    box-shadow:0 20px 40px -20px rgba(20,18,31,.22), 0 4px 10px -4px rgba(20,18,31,.08);
    display:flex;
    flex-direction:column;
    gap:2px;
    z-index:60;
    font-family:'Inter Tight';
  }
  .mobile-menu-panel .ip-nav-link {
    padding:11px 14px !important;
    border-radius:9px;
    color:#14121F !important;
    font-size:15px !important;
    font-weight:500;
    text-decoration:none;
    transition:background 140ms;
  }
  .mobile-menu-panel .ip-nav-link:hover,
  .mobile-menu-panel .ip-nav-link:active {
    background:#f4f2fc;
  }
  .mobile-menu-panel .ip-nav-link[data-active="1"] {
    background:#f4f2fc;
    color:#14121F !important;
  }
  .mobile-menu-panel .ip-nav-link[data-active="1"]::after { display:none; }

  @media (max-width: 1119px) { .nav-claim { display: none !important; } }
  @media (max-width: 900px) {
    [data-journey] { height: auto !important; }
    [data-journey-sticky] { position: static !important; height: auto !important; overflow: visible !important; display: block !important; }
    [data-journey-track] { flex-direction: column !important; transform: none !important; gap: 64px !important; padding: 0 !important; height: auto !important; }
    .jrn-panel { width: 100% !important; }
    [data-journey-bar-wrap] { display: none !important; }
    [data-zig] { grid-template-columns: 1fr !important; gap: 28px !important; }
    [data-zig] [data-x="shot"] { order: -1 !important; }
    [data-zig] [data-x="txt"] { max-width: none !important; }
    [data-r="prisme"] { grid-template-columns: 1fr !important; gap: 30px !important; }
    [data-r="prisme"] [data-x="qww"] { text-align: center !important; align-items: center !important; }
    [data-r="prisme"] [data-x="div"] { display: none !important; }
    [data-r="how"] { grid-template-columns: 1fr !important; gap: 32px !important; }
    [data-r="converge"] { grid-template-columns: 1fr !important; gap: 14px !important; }
    [data-r="converge"] [data-x="core"] { order: -1 !important; position: static !important; margin-bottom: 8px !important; }
    [data-r="converge"] [data-x="col"] { gap: 14px !important; }
    [data-frag] [data-x="link"] { display: none !important; }
    [data-r="cap"] { grid-template-columns: 1fr !important; gap: 40px !important; }
    [data-r="brief"] { grid-template-columns: 1fr !important; gap: 18px !important; }
    [data-r="acte1"] { grid-template-columns: 1fr !important; gap: clamp(40px,7vw,56px) !important; }
    [data-r="acte1"] [data-x="edito"] { text-align: center !important; align-items: center !important; }
    [data-x="ghost"] { display: none !important; }
    [data-r="not"] { grid-template-columns: 1fr 1fr !important; }
    [data-r="steps"] { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
    [data-r="steps"] > * { grid-column: span 1 !important; min-height: 0 !important; }
    [data-r="assetstory"] { grid-template-columns: 1fr !important; gap: 8px !important; }
    [data-r="price2"] { grid-template-columns: 1fr !important; }
    [data-prodgrid] { grid-template-columns: 1fr !important; }
    [data-surfstrip] { grid-template-columns: 1fr !important; }
    [data-r="bbstats"] { grid-template-columns: 1fr 1fr !important; }
    [data-r="vues"] { grid-template-columns: 1fr !important; }
    [data-r="vbody"] { grid-template-columns: 1fr !important; }
    [data-focus3] { grid-template-columns: 1fr !important; gap: 20px !important; }
    .h-hero { font-size: 46px !important; }
    .h-band { font-size: 32px !important; }
    .h-big { font-size: 42px !important; }
  }
  @media (max-width: 767px) {
    html { scroll-padding-top: 60px; }

    /* HEADER compact — masque nav claim + liens ancre, garde uniquement CTA "Démarrer le pilote" */
    header .nav-claim,
    header [data-nav-claim-text] { display:none !important; }
    header nav a[href^="#"]:not(.ip-cta) { display:none !important; }
    header nav .mobile-nav a[href^="#"]:not(.ip-cta) { display:flex !important; }
    header .mobile-nav { display:inline-block !important; }
    header nav a.ip-cta { padding:5px 5px 5px 12px !important; font-size:12.5px !important; gap:6px !important; }
    header nav a.ip-cta > span { font-size:10.5px !important; padding:4px 7px !important; }
    header > div { padding:10px 16px !important; }

    /* Brains décoratifs : très atténués */
    ip-brain[aria-hidden="true"] { opacity:.28 !important; }

    /* Sections : padding uniforme */
    section { padding-left:20px !important; padding-right:20px !important; padding-top:56px !important; padding-bottom:56px !important; }

    /* HERO */
    section:first-of-type,
    section[id="hero"] { min-height:auto !important; padding:76px 20px 40px !important; }
    .h-hero,
    h1 { font-size:38px !important; line-height:1.02 !important; letter-spacing:-.03em !important; }
    h2 { font-size:clamp(28px,7.5vw,36px) !important; letter-spacing:-.022em !important; line-height:1.08 !important; }
    h3 { font-size:clamp(19px,5vw,23px) !important; }
    /* Adaptación del port: el subtítulo del hero ES lleva white-space:nowrap inline
       (el homólogo FR no) — a 375px desbordaría; se permite el salto de línea como en el FR */
    [style*="clamp(14.5px,1.45vw,17px)"] { font-size:15px !important; white-space:normal !important; }

    /* HERO : les 4 puces — 2×2 grid, plus de nowrap, plus de débordement */
    #hero-puces {
      display:grid !important;
      grid-template-columns:1fr 1fr !important;
      flex-wrap:wrap !important;
      white-space:normal !important;
      gap:14px 16px !important;
      justify-content:stretch !important;
      max-width:360px !important;
      margin:24px auto 0 !important;
    }
    #hero-puces > * {
      align-items:flex-start !important;
      font-size:12.5px !important;
      line-height:1.35 !important;
      white-space:normal !important;
      justify-self:flex-start !important;
      text-align:left !important;
    }
    #hero-puces > * > svg {
      margin-top:3px !important;
      flex:none !important;
    }
    section [style*="flex-wrap:nowrap"][style*="white-space:nowrap"] {
      display:grid !important;
      grid-template-columns:1fr 1fr !important;
      flex-wrap:wrap !important;
      white-space:normal !important;
      gap:10px 12px !important;
      justify-content:stretch !important;
    }
    section [style*="flex-wrap:nowrap"][style*="white-space:nowrap"] > * {
      font-size:12.5px !important;
      white-space:normal !important;
      justify-self:flex-start !important;
    }

    /* Grilles universelles → 1 col */
    [style*="grid-template-columns"] { grid-template-columns:1fr !important; gap:16px !important; }
    /* Adaptación del port: los sliders de #convergence (iteración ES, ausentes del FR)
       propagan su min-content a la pista 1fr y desbordan a 375px — minimum automático a 0 */
    [style*="grid-template-columns"] > * { min-width:0 !important; }
    [data-r="bbstats"],
    [data-r="not"] { grid-template-columns:1fr 1fr !important; gap:10px !important; }

    /* ============ SCÈNE 4 ÉTAPES ONBOARDING (data-r="cap") — MOBILE ============ */
    /* On promote les enfants de LEFT en grid items via display:contents pour pouvoir placer
       titre au-dessus (row 1-2 full width) et sidebar (row 3 col 1) + carte violette (row 3 col 2) */
    [data-r="cap"] {
      grid-template-columns:1fr 1fr !important;
      gap:14px 12px !important;
      align-items:start !important;
    }

    /* LEFT : display:contents → ses 4 enfants deviennent grid items directs */
    [data-r="cap"] > *:first-child {
      display:contents !important;
    }

    /* 1er enfant de LEFT = eyebrow "InboxPilot · Mise en route" */
    [data-r="cap"] > *:first-child > *:nth-child(1) {
      grid-column:1 / -1 !important;
      font-size:11px !important;
      margin-bottom:0 !important;
    }
    /* 2ème enfant = H2 */
    [data-r="cap"] > *:first-child > h2 {
      grid-column:1 / -1 !important;
      font-size:30px !important;
      line-height:1.05 !important;
      letter-spacing:-.028em !important;
      margin:0 !important;
    }
    /* 3ème enfant = paragraphe descriptif — réinjecté sous le titre, full width */
    [data-r="cap"] > *:first-child > p {
      grid-column:1 / -1 !important;
      display:block !important;
      font-size:15px !important;
      line-height:1.45 !important;
      color:#6b6980 !important;
      margin:0 !important;
      max-width:none !important;
    }
    /* 4ème enfant = conteneur des 4 étapes */
    [data-r="cap"] > *:first-child > div[style*="position:relative"][style*="margin-top"] {
      grid-column:1 !important;
      margin-top:0 !important;
    }
    /* Trait vertical connectant les étapes → masqué sur mobile */
    [data-r="cap"] div[style*="width: 2px"],
    [data-r="cap"] div[style*="width:2px"] {
      display:none !important;
    }

    /* Chaque bouton d'étape compact */
    [data-r="cap"] [data-capstep] {
      padding:10px 0 !important;
      max-width:170px !important;
    }
    [data-r="cap"] [data-capdot] {
      width:26px !important;
      height:26px !important;
      font-size:11px !important;
    }
    [data-r="cap"] [data-caplabel] { font-size:15px !important; line-height:1.2 !important; }
    [data-r="cap"] [data-capprom] { font-size:12.5px !important; line-height:1.3 !important; margin-top:2px !important; }
    [data-r="cap"] [data-capdesc] { display:none !important; }

    /* ============ SECTION "SANS RIEN CHANGER" — mobile : Gmail + Outlook empilés, accolade, WhatsApp, accolade ============ */
    #sans-rien-changer > div {
      display:grid !important;
      grid-template-columns:1fr !important;
      grid-template-areas:
        "title"
        "para"
        "gmail"
        "outlook"
        "aco1"
        "wa"
        "aco2"
        "puces" !important;
      row-gap:0 !important;
    }
    #sans-rien-changer > div > h2 { grid-area:title !important; margin-bottom:12px !important; }
    #sans-rien-changer > div > p { grid-area:para !important; margin-bottom:32px !important; }

    /* Icons wrapper : display:contents */
    #sans-rien-changer > div > div[style*="grid-template-columns:repeat(3"] {
      display:contents !important;
    }
    #sans-rien-changer > div > div[style*="grid-template-columns:repeat(3"] > div:nth-child(1) {
      grid-area:gmail !important;
      height:150px !important;
      border:1px solid rgba(255,255,255,.18) !important;
      border-bottom:none !important;
    }
    #sans-rien-changer > div > div[style*="grid-template-columns:repeat(3"] > div:nth-child(2) {
      grid-area:outlook !important;
      height:150px !important;
      border:1px solid rgba(255,255,255,.18) !important;
    }
    #sans-rien-changer > div > div[style*="grid-template-columns:repeat(3"] > div:nth-child(3) {
      grid-area:wa !important;
      height:150px !important;
      border:1px solid rgba(255,255,255,.18) !important;
      margin-top:24px !important;
    }
    #sans-rien-changer > div > div[style*="grid-template-columns:repeat(3"] > div > svg {
      width:56px !important;
      height:56px !important;
    }
    #sans-rien-changer > div > div[style*="grid-template-columns:repeat(3"] > div > span {
      font-size:11.5px !important;
    }

    /* Acollades wrapper : display:contents pour ses 2 enfants */
    #sans-rien-changer > div > div[style*="grid-template-columns:2fr 1fr"] {
      display:contents !important;
    }
    #sans-rien-changer > div > div[style*="grid-template-columns:2fr 1fr"] > div:nth-child(1) {
      grid-area:aco1 !important;
      padding:0 clamp(24px,10vw,60px) !important;
      margin-top:6px !important;
    }
    #sans-rien-changer > div > div[style*="grid-template-columns:2fr 1fr"] > div:nth-child(2) {
      grid-area:aco2 !important;
      padding:0 clamp(24px,10vw,60px) !important;
      margin-top:6px !important;
    }

    /* Puces validation */
    #sans-rien-changer > div > div[style*="justify-content:center"][style*="flex-wrap:wrap"] {
      grid-area:puces !important;
      margin-top:28px !important;
    }

    /* ============ SECTION "CE QUE VOTRE ENTREPRISE AURA ACCUMULÉ" (#trajectoire) ============ */
    /* ============ SECTION "CE QUE VOTRE ENTREPRISE AURA ACCUMULÉ" (#trajectoire) ============ */
    /* Kill le padding-left inline du titre (28→42px) qui le décale à droite */
    #trajectoire > div > div {
      padding-left:0 !important;
      padding-right:0 !important;
    }
    /* Section #un-an-apres (CTA final violet foncé) : layout mobile qui respecte les proportions desktop */
    #un-an-apres > div > div[style*="align-self:stretch"] {
      width:100% !important;
      align-self:stretch !important;
    }
    #un-an-apres [style*="text-align:right"] {
      text-align:left !important;
      max-width:100% !important;
      margin-left:0 !important;
      margin-top:0 !important;
    }
    /* Le wrapper de la courbe : aspect ratio 1.4:1 comme desktop */
    #un-an-apres > div > div[style*="align-self:stretch"] > div:last-child {
      height:auto !important;
      aspect-ratio: 560 / 400 !important;
      margin-top:32px !important;
      overflow:visible !important;
    }
    /* Le SVG remplit son wrapper naturellement */
    #un-an-apres svg[data-un-an-svg] {
      width:100% !important;
      height:100% !important;
      position:absolute !important;
      inset:0 !important;
      overflow:visible !important;
    }
    /* Le H2 "Vous gardez toujours le contrôle" : autoriser le retour à la ligne en mobile */
    #un-an-apres h2 {
      white-space:normal !important;
      font-size:clamp(24px, 6vw, 34px) !important;
    }
    /* Padding-left tueur */
    #un-an-apres > div > div[style*="padding-left"] {
      padding-left:0 !important;
    }
    /* Nav links (Vision · Mémoire · Tarifs) : cachés sur mobile pour laisser respirer */
    .nav-links {
      display:none !important;
    }
    /* H2 : autoriser à s'étendre sur toute la largeur mobile */
    #trajectoire h2 {
      max-width:100% !important;
    }
    /* Marqueur natif du <summary> tué (Safari + Firefox + Chrome) */
    #trajectoire summary {
      list-style:none !important;
      padding-left:0 !important;
    }
    #trajectoire summary::-webkit-details-marker {
      display:none !important;
    }
    #trajectoire summary::marker {
      content:"" !important;
      display:none !important;
    }
    /* Section CONVERGENCE : forcer l'ordre mobile monument → texte "Vous ne faites rien" → gros bloc "Ce matin, pour vous" */
    /* Kill le margin-top négatif du row 2 (qui remonte le bloc en desktop) */
    [data-row-2-conv] {
      margin-top:32px !important;
      gap:44px !important;
    }
    [data-mobile-hide="ce-matin"] {
      min-height:auto !important;
    }
    /* Cacher le bloc Marie / L'historique en mobile */
    [data-mobile-hide="marie"] {
      display:none !important;
    }
    /* Le gros bloc net "Ce matin" : sur mobile, retirer le décalage off-canvas droit + le margin-left desktop */
    [data-ce-matin-net] {
      margin-left:0 !important;
      margin-right:0 !important;
      border-right:1px solid #ecebf6 !important;
      border-radius:22px !important;
      padding-right:clamp(20px,4vw,26px) !important;
    }
    /* Kill la data fantôme à gauche en mobile (elle sort du cadre) */
    [data-mobile-hide="ce-matin"] > div[aria-hidden="true"] {
      display:none !important;
    }
    /* Ré-organiser la grid stats en 3 col compactes sur mobile */
    [data-ce-matin-stats] {
      grid-template-columns:repeat(3, minmax(0,1fr)) !important;
      gap:10px !important;
      max-width:100% !important;
    }
    [data-ce-matin-stats] > div {
      min-width:0 !important;
    }
    [data-ce-matin-stats] > div > div:first-child {
      font-size:12.5px !important;
      letter-spacing:-.015em !important;
      white-space:nowrap !important;
    }
    [data-ce-matin-stats] > div > div:not(:first-child) {
      font-size:10px !important;
    }
    [data-ce-matin-stats] > div div[style*="max-width:110px"] {
      max-width:100% !important;
    }

    /* ============ SECTION 5b · "Une opportunité, du premier message à la signature" (data-r="boucle-alt") ============ */
    [data-r="boucle-alt"] {
      padding:60px 20px !important;
    }
    [data-r="boucle-alt"] h2 {
      font-size:28px !important;
      line-height:1.08 !important;
      letter-spacing:-.02em !important;
      max-width:100% !important;
    }
    [data-r="boucle-alt"] h2 > span[style*="linear-gradient"] {
      white-space:normal !important;
    }
    [data-r="boucle-alt"] p {
      font-size:14.5px !important;
      line-height:1.5 !important;
    }
    [data-r="boucle-alt"] p > span[style*="white-space"] {
      white-space:normal !important;
    }
    /* Container billboard : positioning avec décalage sidebar / carte comme desktop */
    [data-r="boucle-alt"] > div > div:last-child {
      min-height:auto !important;
      display:block !important;
      position:relative !important;
    }
    /* Central panel (child 1) — margin-left plus large pour laisser room sidebar */
    [data-r="boucle-alt"] > div > div:last-child > div:nth-child(1) {
      margin:20px 0 0 70px !important;
      padding:20px 16px 20px 42px !important;
    }
    [data-r="boucle-alt"] > div > div:last-child > div:nth-child(1) h3 {
      font-size:16px !important;
      max-width:none !important;
    }
    /* Sidebar 5 étapes : position:absolute left:0 top:-6 width:102 → empiète davantage sur la carte */
    [data-r="boucle-alt"] > div > div:last-child > div:nth-child(2) {
      display:block !important;
      position:absolute !important;
      left:0 !important;
      top:-6px !important;
      right:auto !important;
      width:102px !important;
      z-index:2 !important;
      padding:12px 6px !important;
    }
    /* Titre "La boucle" masqué */
    [data-r="boucle-alt"] > div > div:last-child > div:nth-child(2) > div:first-child {
      display:none !important;
    }
    /* Boutons compacts vertical */
    [data-r="boucle-alt"] > div > div:last-child > div:nth-child(2) button {
      flex-direction:column !important;
      align-items:center !important;
      padding:8px 3px !important;
      gap:4px !important;
      text-align:center !important;
    }
    [data-r="boucle-alt"] > div > div:last-child > div:nth-child(2) button > span:last-child {
      font-size:10px !important;
      line-height:1.15 !important;
      white-space:normal !important;
    }
    /* Carte flottante top-right (child 3 · Votre liste) → masquée sur mobile (doublon avec central) */
    [data-r="boucle-alt"] > div > div:last-child > div:nth-child(3) {
      display:none !important;
    }
    /* Carte "Le dossier, pendant ce temps" (child 4) → replacée sous le central, alignée avec lui */
    [data-r="boucle-alt"] > div > div:last-child > div:nth-child(4) {
      display:block !important;
      position:static !important;
      inset:auto !important;
      right:auto !important;
      top:auto !important;
      width:auto !important;
      max-width:none !important;
      margin:14px 0 0 70px !important;
      z-index:auto !important;
    }
    /* Textes internes réduits */
    [data-r="boucle-alt"] [style*="font-size:14px"] {
      font-size:13px !important;
    }
    [data-r="boucle-alt"] [style*="font-size:12.5px"] {
      font-size:11.5px !important;
    }

    /* RIGHT (visuel) : col 2, aligné avec l'étape 1 de la sidebar */
    [data-r="cap"] > *:last-child {
      grid-column:2 !important;
      display:flex !important;
      flex-direction:column !important;
      position:relative !important;
      min-height:0 !important;
      height:auto !important;
      padding:0 !important;
      align-self:start !important;
      width:100% !important;
      margin-right:0 !important;
      margin-top:24px !important;
    }
    /* Ordre flex : violet card en premier, capghosts après */
    [data-r="cap"] > *:last-child > *[style*="background:#09080F"] {
      order:0 !important;
    }
    [data-r="cap"] > *:last-child > [data-capghost] {
      order:1 !important;
    }
    /* Tous les fantômes cachés PAR DÉFAUT (mais on va re-révéler les capghosts sous la carte) */
    [data-r="cap"] > *:last-child > *[data-x="ghost"],
    [data-r="cap"] > *:last-child > *[style*="position: absolute"]:not([data-capghost]),
    [data-r="cap"] > *:last-child > *[style*="position:absolute"]:not([data-capghost]) {
      display:none !important;
    }
    /* Chaque capghost (contient les data-viz par étape) : replacé static, contrôlé par JS pour display */
    [data-r="cap"] > *:last-child > [data-capghost] {
      position:static !important;
      inset:auto !important;
      z-index:auto !important;
      pointer-events:auto !important;
      margin-top:14px !important;
    }
    /* Ne garder que le 2ème enfant de chaque capghost (la carte data principale), masquer les autres */
    [data-r="cap"] > *:last-child > [data-capghost] > *:not(:nth-child(2)) {
      display:none !important;
    }
    [data-r="cap"] > *:last-child > [data-capghost] > *:nth-child(2) {
      position:static !important;
      inset:auto !important;
      right:auto !important;
      left:auto !important;
      bottom:auto !important;
      top:auto !important;
      width:auto !important;
      max-width:230px !important;
      transform:none !important;
      margin:0 0 0 auto !important;
      opacity:.5 !important;
    }
    /* Carte violette : replacée static, coins arrondis, sans débordement */
    [data-r="cap"] > *:last-child > *[style*="background:#09080F"] {
      position:static !important;
      display:block !important;
      width:auto !important;
      max-width:100% !important;
      right:auto !important;
      top:auto !important;
      inset:auto !important;
      transform:none !important;
      margin:0 !important;
      padding:22px 20px !important;
      border-radius:18px !important;
    }
    /* Plus de ::after — on utilise le vrai contenu par étape */
    [data-r="cap"] > *:last-child::after {
      content:none !important;
    }
    [data-r="cap"] [data-captitle] { font-size:17px !important; line-height:1.15 !important; }
    [data-r="cap"] [data-capsub] { font-size:12.5px !important; line-height:1.4 !important; }
    [data-r="cap"] [data-capeyebrow] { font-size:9.5px !important; }
    [data-r="cap"] [data-capfield] { font-size:11.5px !important; }
    [data-r="cap"] [data-capcta] { height:40px !important; font-size:12.5px !important; }

    /* ============ SCÈNE 5 ÉTAPES ONBOARDING (data-r="acte1") — SIMPLIFIÉE ============ */
    /* Layout mobile : édito full width en top, puis grille 2-col : sidebar 1→5 à gauche + carte violette à droite */
    [data-r="acte1"] { grid-template-columns:1fr !important; gap:0 !important; }
    [data-r="acte1"] [data-x="edito"] { text-align:left !important; align-items:flex-start !important; margin-bottom:20px !important; padding:0 !important; }

    /* Container droit : passe en grille 2 colonnes fluides */
    [data-r="acte1"] > div:last-child {
      position:relative !important;
      min-height:auto !important;
      height:auto !important;
      padding:0 !important;
      display:grid !important;
      grid-template-columns:78px 1fr !important;
      gap:14px !important;
      align-items:start !important;
    }

    /* Sidebar verticale 1→5 : reste visible, compacte */
    [data-r="acte1"] > div:last-child > div:nth-child(2) {
      position:static !important;
      width:auto !important;
      max-width:none !important;
      padding:10px 6px !important;
      margin:0 !important;
      background:#fff !important;
      border-radius:14px !important;
      box-shadow:0 8px 24px -18px rgba(20,18,31,.12) !important;
    }
    /* Le titre "5 étapes" en haut de la sidebar → masqué sur mobile pour gagner de la place */
    [data-r="acte1"] > div:last-child > div:nth-child(2) > div:first-child { display:none !important; }
    /* Chaque bouton d'étape : compact, empilé label sous chiffre */
    [data-r="acte1"] > div:last-child > div:nth-child(2) > div:last-child { gap:4px !important; }
    [data-r="acte1"] > div:last-child > div:nth-child(2) > div:last-child > button {
      flex-direction:column !important;
      align-items:center !important;
      padding:8px 4px !important;
      gap:5px !important;
      text-align:center !important;
    }
    [data-r="acte1"] > div:last-child > div:nth-child(2) > div:last-child > button > span:first-child {
      /* le pastille numérique */
      margin:0 !important;
      flex:none !important;
    }
    [data-r="acte1"] > div:last-child > div:nth-child(2) > div:last-child > button > span:last-child {
      font-size:10.5px !important;
      line-height:1.2 !important;
      white-space:normal !important;
    }
    /* Cache la ligne verticale connectante (peut être ok mais serre) */

    /* Jauge fantôme → masquée */
    [data-x="ghost"] { display:none !important; }

    /* La carte violette centrale : occupe la colonne 2, height auto */
    [data-r="acte1"] > div:last-child > div[style*="z-index:10"] {
      position:static !important;
      width:auto !important;
      max-width:none !important;
      margin:0 !important;
      padding:20px 18px !important;
      border-radius:16px !important;
    }
    [data-r="acte1"] [data-captitle] { font-size:22px !important; line-height:1.1 !important; }
    [data-r="acte1"] [data-capsub] { font-size:13.5px !important; line-height:1.4 !important; }
    /* Le titre stratégique au-dessus des puces (Une nouvelle façon…) */
    [data-r="acte1"] [data-capeyebrow] { font-size:10px !important; }

    /* ============ LE MOTEUR (data-journey) — cartes flottantes masquées ============ */
    /* Les cartes "% prêt" flottantes + zoom client + preuves flottantes → masquées */
    [data-journey-track] [style*="position:absolute"],
    .jrn-panel [style*="position:absolute"][style*="right:"],
    .jrn-panel [style*="position:absolute"][style*="bottom:"] {
      position:static !important;
      inset:auto !important;
      margin-top:12px !important;
      width:auto !important;
      transform:none !important;
    }
    /* Alt-cards satellites (Zoom client, Le dossier pendant ce temps, Chaque preuve remise à sa place) */
    [data-alt-step] [style*="position:absolute"],
    [data-r="acte2"] [style*="position:absolute"][style*="right:"] {
      position:static !important;
      inset:auto !important;
      width:auto !important;
      margin-top:12px !important;
      transform:none !important;
    }

    /* Rail de progression latéral droite → complètement masqué */
    #scroll-rail,
    [data-progress-rail],
    [data-scroll-rail],
    [data-side-progress],
    [data-scroll-nav],
    [aria-label*="progression" i] { display:none !important; }
    /* Fleche remonter en haut → visible */
    [aria-label*="arriba" i] { display:flex !important; }

    /* ============ PRICING PIPELINE (data-r="price2") — carrousel snap ============ */
    [data-r="price2"] {
      display:flex !important;
      flex-direction:row !important;
      overflow-x:auto !important;
      scroll-snap-type:x mandatory !important;
      -webkit-overflow-scrolling:touch !important;
      gap:14px !important;
      padding:4px 20px 8px !important;
      margin:0 -20px !important;
      scrollbar-width:none !important;
    }
    [data-r="price2"]::-webkit-scrollbar { display:none !important; }
    [data-r="price2"] > * {
      flex:0 0 82% !important;
      scroll-snap-align:center !important;
      min-width:280px !important;
    }

    /* ============ MODALE INSCRIPTION PILOTE — plein écran ============ */
    [data-pilot-panel],
    [id*="pilot-panel"],
    [data-pilot-backdrop] {
      position:fixed !important;
      inset:0 !important;
      width:100vw !important;
      height:100vh !important;
      max-width:none !important;
      max-height:none !important;
      border-radius:0 !important;
      overflow-y:auto !important;
    }
    [data-pilot-panel],
    [id*="pilot-panel"] { z-index:200 !important; }
    [data-pilot-backdrop] { z-index:199 !important; }
    [data-pilot-split] {
      display:flex !important;
      flex-direction:column !important;
    }
    [data-pilot-left],
    [data-pilot-right] { padding:20px !important; width:100% !important; }

    /* ============ CONVERGENCE / PRISME / VOUS NE FAITES RIEN ============ */
    [data-r="converge"] { grid-template-columns:1fr !important; gap:14px !important; }
    [data-r="converge"] [data-x="core"] { order:-1 !important; position:static !important; margin-bottom:8px !important; }
    [data-r="prisme"] { grid-template-columns:1fr !important; }
    [data-r="prisme"] [data-x="div"] { display:none !important; }
    [data-r="prisme"] [data-x="qww"] { text-align:center !important; align-items:center !important; }

    /* ============ MÉMOIRE COURBE ============ */
    svg[data-trajectoire-svg] { width:100% !important; height:auto !important; }

    /* ============ CTA FINAL ============ */
    [style*="padding:clamp(56px,7vw,96px)"] { padding:52px 20px !important; }

    /* Toute image / SVG contenue */
    img, svg:not([data-trajectoire-svg]), canvas, iframe { max-width:100% !important; height:auto !important; }
    body, html { overflow-x:clip !important; }

    /* Toute carte en position:absolute qui déborde à droite ou en bas → replacée dans le flow */
    section [style*="position:absolute"][style*="right:"]:not([data-x="edge"]):not(header *):not([data-pilot-panel] *) {
      position:static !important;
      inset:auto !important;
      right:auto !important;
      margin-top:14px !important;
      width:auto !important;
      max-width:100% !important;
      transform:none !important;
    }
  }

  /* ============ TABLETTE (768–1023 px) — ajustements légers ============ */
  @media (min-width: 768px) and (max-width: 1023px) {
    [data-r="price2"] { grid-template-columns:1fr 1fr !important; gap:18px !important; }
    [data-r="not"] { grid-template-columns:1fr 1fr !important; }
    [data-focus3] { grid-template-columns:1fr 1fr !important; }
    [data-r="steps"] { grid-template-columns:1fr 1fr !important; }
    [data-r="vues"],
    [data-r="vbody"] { grid-template-columns:1fr 1fr !important; }
    section { padding-left:32px !important; padding-right:32px !important; }
  }


/* ==================================================================
   Reglas añadidas en el port a estático (plan 01-01) — no proceden
   del bloque <style> original.
   ================================================================== */

/* Hover del acordeón #trajectoire (conversión del atributo style-hover del diseño) */
#trajectoire details:hover { background: #faf9fd; }

/* Aterrizaje del hash /#prix (cancel_url de Stripe) bajo el header (Pitfall 5, D-15) */
#prix, #pilot-anchor { scroll-margin-top: 94px; }

/* Header: clases estáticas que sustituyen a los bindings headerStyle/headerCtaStyle
   (estilo Clerk: barra pegajosa con blur; las reglas is-scrolled supervivientes
   gobiernan el estado tras scroll > 200px) */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,251,254,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(236,235,246,.8); }
.site-header-nav { display: flex; align-items: center; }

/* Paneles aplanados de sc-if: display:contents para no alterar el layout del padre */
.pane-contents { display: contents; }
.alt-pane { display: contents; }
/* hidden SIEMPRE gana, también sobre display inline (p. ej. el panel de reserva
   lleva display:flex en su atributo style y el [hidden] del UA no bastaría) */
[hidden] { display: none !important; }

/* Botones del rail "El motor" (altBtnNStyle reconstruido; sliders.js llega en 01-04) */
.alt-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: none; border-radius: 11px; background: transparent; cursor: pointer; text-align: left; }
.alt-btn.is-active { background: #f4f2fc; }

/* Fila de enlaces legales del footer (UI-SPEC Page Contracts) */
.footer-legal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: 'Inter Tight', sans-serif; font-size: 12.5px; color: #9a98ad; }
.footer-legal a { color: #9a98ad; text-decoration: none; transition: color 120ms; }
.footer-legal a:hover { color: #14121F; }

/* Toggle de facturación — tBtn REAL del fichero completo (plan 01-05, sustituye la reconstrucción de 01-01) */
.billing-btn { border: none; cursor: pointer; border-radius: 999px; padding: 6px 16px; font-family: 'Inter Tight', sans-serif; font-size: 13px; font-weight: 600; background: transparent; color: #9a98ad; }
.billing-btn.is-active { background: #fff; color: #14121F; box-shadow: 0 4px 12px -4px rgba(20,18,31,.18); }

/* ==================================================================
   Formulario de reserva — validación, carga y a11y (plan 01-02,
   D-10/D-11/D-14, UI-SPEC Interaction Contracts → Form)
   ================================================================== */

/* Labels accesibles invisibles (a11y sin alterar el diseño, D-11) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Focus visible (el diseño solo traía outline:none — UI-SPEC lo exige para a11y).
   !important: los inputs llevan border/background en el atributo style inline. */
[data-pilot-form] form input:focus-visible { border-color: #6D5EF6 !important; box-shadow: 0 0 0 3px rgba(109, 94, 246, .18); }

/* Estado inválido: borde rojo + icono ! (nunca solo color, D-11) */
.field-error {
  border-color: #D92D20 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
  background-color: #fbfbfe !important;
  padding-right: 38px !important;
}

/* Mensaje de error junto al campo. Ocupa fila propia del grid del form;
   margin -3px + gap 11px del grid = 8px efectivos bajo el campo (UI-SPEC). */
.field-msg { grid-column: 1 / -1; margin: -3px 0 0; font-family: 'Inter Tight', sans-serif; font-size: 13px; line-height: 1.45; color: #B42318; }
.field-msg:empty { display: none; }

/* Honeypot invisible (D-10) — sin validación ni estilos de campo */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Caja de error de red/servidor (FORM-03) */
.form-error-box { grid-column: 1 / -1; background: #FEF3F2; border: 1px solid #D92D20; border-radius: 12px; padding: 12px 14px; font-family: 'Inter Tight', sans-serif; font-size: 13.5px; line-height: 1.5; color: #B42318; }
.form-error-box:focus { outline: none; }

/* Spinner del botón en envío (FORM-02) — mismas dimensiones, sin layout shift */
.btn-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 999px; flex: none; animation: rsv-spin .7s linear infinite; }
.btn-loading .btn-spinner { display: inline-block; }
@keyframes rsv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; }
}

/* ==================================================================
   Dots del carrusel de precios (UAT G7) — UI NUEVA pedida por Josemi,
   inexistente en los exports FR/ES. Tokens de superficies nuevas del
   01-UI-SPEC: acento producto #6D5EF6 (activo), neutro del sistema
   rgba(20,18,31,.22) (inactivo, mismo que los ticks del rail), escala
   8pt, radio 999px, transición .2s cubic-bezier(.2,0,0,1).
   Solo visibles con el layout carrusel (≤767px, G6) y con el panel de
   inscripción cerrado (mismo estado G4: data-pilot-layer-open vive en
   el backdrop únicamente mientras el panel está abierto).
   ================================================================== */
.price-dots { display: none; }
@media (max-width: 767px) {
  .price-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px; /* sm */
  }
  /* Ocultos mientras el panel de inscripción está abierto (estado G4) */
  body:has([data-pilot-layer-open]) .price-dots { display: none; }
  .price-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Hit area táctil ≥44px aunque el dot visual mida 8px */
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .price-dot > span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(20, 18, 31, .22);
    transition: width .2s cubic-bezier(.2, 0, 0, 1), background-color .2s cubic-bezier(.2, 0, 0, 1);
  }
  .price-dot[aria-current="true"] > span {
    width: 20px;
    background: #6D5EF6;
  }
  /* Focus visible (mismo anillo que los inputs del formulario, UI-SPEC) */
  .price-dot:focus-visible { outline: none; }
  .price-dot:focus-visible > span { box-shadow: 0 0 0 3px rgba(109, 94, 246, .28); }
}
@media (prefers-reduced-motion: reduce) {
  .price-dot > span { transition: none; }
}