*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F4F2EC;color:#0A0A0A;font-family:Archivo,'Helvetica Neue',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
::selection{background:#B7FF3C;color:#0A0A0A}
@keyframes bootBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bootLit{from{background:#F4F2EC}to{background:#B7FF3C}}
@keyframes bootSweep{0%{transform:translateX(-140%);opacity:0}20%{opacity:1}100%{transform:translateX(240%);opacity:0}}
@keyframes bootMeta{from{opacity:0;letter-spacing:.5em}to{opacity:.72;letter-spacing:.22em}}
@keyframes bootOut{to{opacity:0;visibility:hidden}}
@keyframes revealIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes crossRadius{0%,34%{transform:translateY(-246px)}50%{transform:translateY(0)}66%,100%{transform:translateY(-164px)}}
@keyframes scan{0%{transform:translateX(0);opacity:0}8%{opacity:.5}92%{opacity:.5}100%{transform:translateX(calc(100% - 1px));opacity:0}}
@keyframes beam{0%,100%{transform:scaleX(.14);opacity:.2}50%{transform:scaleX(1);opacity:.75}}
@keyframes phaseIn{0%{opacity:.35;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,45%{opacity:1}50%,95%{opacity:.15}100%{opacity:1}}
@keyframes drift{to{transform:translateY(-28px)}}
[data-reveal]{opacity:0;transform:translateY(26px)}
[data-reveal][data-seen="1"]{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
@supports (animation-timeline:view()){html:not([data-js]) [data-reveal]{animation:revealIn 1s linear both;animation-timeline:view();animation-range:entry 4% cover 26%}}
[data-navlink]{position:relative}
[data-navlink]:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:#B7FF3C;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
[data-navlink]:hover:after{transform:scaleX(1)}
[data-marquee]:hover [data-track]{animation-play-state:paused}
[data-cur][data-big="1"]{width:54px;height:54px}
[data-op="ACTIVE"]{border-color:rgba(183,255,60,.4)!important;background:linear-gradient(100deg,rgba(183,255,60,.07),rgba(183,255,60,0) 70%)!important}
[data-op="ACTIVE"] [data-opn]{color:#B7FF3C!important}
[data-op="ACTIVE"] [data-ops]{color:#B7FF3C!important}
[data-op="DONE"] [data-ops]{color:#6f7a5c!important}
[data-op="WAIT"]{opacity:.5}
[data-nb]:hover{border-color:rgba(244,242,236,.34)!important}
[data-nb][data-on="1"] [data-nbl]{color:#B7FF3C!important}
[data-nb][data-on="1"]{border-color:rgba(183,255,60,.42)!important;background:linear-gradient(180deg,rgba(183,255,60,.08),rgba(183,255,60,0))!important}
[data-nb][data-past="1"] [data-nbl]{color:#F4F2EC}
[data-dot][data-on="1"]{background:#B7FF3C!important;border-color:#B7FF3C!important}
[data-dot][data-cur="1"]{box-shadow:0 0 0 5px rgba(183,255,60,.12)}
[data-md="1"]{border-color:rgba(183,255,60,.4)!important}
[data-md="1"] [data-mdv]{color:#B7FF3C!important}
[data-loop="1"]{opacity:1!important;border-color:rgba(183,255,60,.28)!important}
[data-loop="1"] [data-loopline]{animation:loopDash 2.6s linear infinite}
[data-ctl]:hover{border-color:#B7FF3C!important;color:#B7FF3C!important}
[data-chip]{animation:chipIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes chipIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes loopDash{to{background-position:-34px 0}}
@keyframes corePulse{0%,100%{opacity:.24;transform:scale(1)}50%{opacity:.5;transform:scale(1.05)}}
@media (max-width:1180px){[data-r="tlrow"],[data-r="core3"],[data-r="logic"],[data-r="sales"]{grid-template-columns:1fr!important}}
@media (max-width:820px){[data-r="nodes"]{grid-template-columns:repeat(6,132px)!important;overflow-x:auto;padding-bottom:12px}[data-r="railline"]{display:none!important}[data-r="md"]{grid-template-columns:1fr!important}[data-r="loopchips"]{flex-wrap:wrap}}
[data-faq-a]{max-height:0;overflow:hidden;transition:max-height .7s cubic-bezier(.2,.8,.2,1)}
[data-faq][data-open="1"] [data-faq-a]{max-height:260px}
[data-faq][data-open="1"] [data-faq-plus]{transform:rotate(45deg)}
[data-faq]:hover [data-faq-q]{color:#0A0A0A}
[data-mq]:hover{color:#0A0A0A!important}
[data-step]:hover{border-top-color:#0A0A0A!important}
@media (max-width:1180px){
[data-r="shell"]{width:calc(100% - 44px)!important}
[data-r="navlinks"]{display:none!important}
[data-r="hero"]{grid-template-columns:1fr!important;gap:52px!important;min-height:0!important;align-items:start!important}
[data-r="sys"],[data-r="why"],[data-r="faq"],[data-r="method"],[data-r="cta"]{grid-template-columns:1fr!important;gap:54px!important}
[data-r="cursor"]{display:none!important}
[data-r="reactor"]{height:600px!important}
}
@media (max-width:820px){
[data-r="shell"]{width:calc(100% - 26px)!important}
[data-r="cards3"],[data-r="detailgrid"]{grid-template-columns:1fr!important}
[data-r="railline"]{display:none!important}
[data-r="reactor"]{height:460px!important}
[data-r="progress"],[data-r="navcta"]{display:none!important}
[data-r="pad"]{padding:78px 0!important}
[data-r="hstates"]{position:static!important;margin-top:14px}
[data-r="ctaviz"]{min-height:300px!important}
}
@media (hover:none){[data-r="cursor"]{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}
/* ===== production : ajouts hors maquette ================================== */

/* le header sticky fait 88px : sans ca les ancres atterrissent dessous */
[data-anchor]{scroll-margin-top:96px}
#top{scroll-margin-top:88px}

/* Coupe de titre pensee pour le desktop. En block, ce span se comporte comme
   un <br> ; en inline il redevient une espace et le titre s'enroule seul. */
.lb{display:block}

/* Navigation au clavier : la maquette n'avait aucun indicateur de focus. */
a:focus-visible,button:focus-visible{outline:2px solid #B7FF3C;outline-offset:3px}
#systeme a:focus-visible,#systeme button:focus-visible,
#audit a:focus-visible{outline-color:#B7FF3C}

/* ----- FAQ ---------------------------------------------------------------
   La maquette plafonnait les reponses a 260px. Sur mobile le texte se replie
   sur bien plus de lignes et se retrouve tronque : la hauteur est desormais
   mesuree en JS (voir app.js), l'inline style prend le dessus sur ces regles. */
[data-faq] button{cursor:pointer}
[data-faq-plus]{flex:none}

/* ===== mobile ============================================================= */

/* Blowout de grille : un item de grid a min-width:auto, donc il refuse de
   descendre sous la taille min-content de son contenu. La bande des 6 etapes
   mesure 6x132px + gaps = 832px de min-content et etirait la colonne 1fr,
   faisant deborder toute la section Systeme sous ~860px de large. */
@media (max-width:1180px){
  [data-r="tlrow"]>*,[data-r="core3"]>*,[data-r="logic"]>*,
  [data-r="sales"]>*,[data-r="detailgrid"]>*{min-width:0}
  [data-r="nodes"]{max-width:100%}
}

@media (max-width:820px){
  /* le header perdait a la fois ses liens et son CTA : il ne restait qu'un
     logo sur 88px de haut, colle en sticky. */
  header [data-r="shell"]{height:62px!important}
  header [data-r="shell"] img{height:17px!important}
  [data-r="navcta"]{display:inline-flex!important;gap:12px!important;
    padding:0 14px!important;min-height:44px!important;font-size:8px!important}
  header [data-r="shell"]>a:first-child{display:flex!important;align-items:center;
    min-height:44px}
  [data-anchor]{scroll-margin-top:70px}
  #top{scroll-margin-top:62px}

  /* #systeme n'a pas data-r="pad" : il gardait 132/140px de padding */
  #systeme{padding:78px 0 84px!important}

  [data-r="reactor"]{height:400px!important}

  /* cibles tactiles : la recommandation est 44px, on en etait a 28px */
  [data-ctl]{min-height:44px!important;padding:9px 14px!important}
  /* liens de pied de page : 8px de haut, intouchables au doigt */
  footer [data-navlink]{display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;padding:0 6px!important}
  footer [data-r="shell"]>div{gap:10px!important;flex-wrap:wrap}

  /* la colonne de statut mangeait la largeur du texte des operations */
  [data-list="ops"]>div{grid-template-columns:24px 1fr auto!important;gap:10px!important;
    padding:13px 12px 12px!important}
  [data-list="salesOut"]>div{grid-template-columns:1fr!important;gap:6px!important}

  /* la bande des 6 etapes defile horizontalement : on ajoute l'accroche */
  [data-r="nodes"]{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  [data-r="nodes"]>button{scroll-snap-align:start}
}

@media (max-width:640px){
  /* Mesure a 375px (largeur utile 349px) : "Votre croissance" faisait 405px,
     "Six transformations." 421px et le H2 du CTA 865px sur une ligne forcee.
     overflow-x:hidden masquait la coupe au lieu de l'eviter. */
  .lb{display:inline}
  h1{font-size:42px!important}
  #systeme h2{font-size:36px!important}
  #pourquoi h2,#methode h2,#audit h2{font-size:34px!important}
  #faq h2{font-size:32px!important}
  #pourquoi h3{font-size:26px!important}
  #methode h3{font-size:28px!important}
  [data-faq-q]{font-size:19px!important}
  [data-faq-a] p{margin-right:0!important}
}