/* Lot téléphone 2 (18/10) : premiers écrans plus vivants. Cartes des quatre besoins en couleur et cliquables,
   icônes dessinées à l'arrivée, disque terracotta derrière le titre, bandeau des outils qui défile.
   Pour retirer : supprimer ce fichier, mobile-lot2.js et leurs deux lignes dans index.html.
   Les gestes sont armés par le script (classe lot2 sur html) ; couleurs et disque tiennent sans JS. */
.lot2-need-link{color:inherit;text-decoration:none}
.integration-strip-list li.lot2-clone,.lot2-need-arrow{display:none}
@media(max-width:759px){
 /* L'animation de chargement de hero.css se jouait sous l'écran : coupée ici, sans attendre le script */
 .hero .hero-points li{animation:none}

 /* 4. Disque terracotta très pâle derrière le titre */
 .hero{background:radial-gradient(circle at 100% 150px,#9d503517 0 170px,transparent 171px) no-repeat}

 /* 1. Une couleur par besoin, prise dans la palette du site (ordre des chapitres depuis le 18/10 : Organiser, Accueillir, Préparer, Suivre) */
 .hero .hero-points li{position:relative;transition:transform .2s cubic-bezier(.2,.75,.2,1)}
 .hero .hero-points li:nth-child(1){background:#f3e4d1;border-color:#d9b38c99}
 .hero .hero-points li:nth-child(3){background:var(--forest);border-color:var(--forest);color:var(--cream)}
 .hero .hero-points li:nth-child(2){background:var(--lavender);border-color:#c9bcd2}
 .hero .hero-points li:nth-child(4){background:#f4e0d6;border-color:#9d503540}
 .hero .hero-points li:nth-child(1) .hero-point-icon{background:#d9b38c4d}
 .hero .hero-points li:nth-child(3) .hero-point-icon{background:#f6eee21f;stroke:var(--cream)}
 .hero .hero-points li:nth-child(2) .hero-point-icon{background:#ffffff8c}
 .hero .hero-points li:nth-child(4) .hero-point-icon{background:#ffffff8c}

 /* 2. La carte entière mène à son chapitre */
 .lot2 .hero .hero-points li{grid-template-columns:40px minmax(0,1fr) 16px}
 .lot2-need-link:after{content:"";position:absolute;inset:0;border-radius:14px}
 .lot2-need-link:focus-visible{outline:none}
 .lot2-need-link:focus-visible:after{outline:2px solid var(--terra);outline-offset:2px}
 .hero .hero-points li:nth-child(3) .lot2-need-link:focus-visible:after{outline-color:var(--forest)}
 .lot2 .lot2-need-arrow{display:block;font-size:16px;opacity:.7}
 .lot2 .hero .hero-points li:active{transform:scale(.98)}

 /* 3. Arrivée des cartes, une à une, et icônes dessinées trait par trait */
 .lot2-armed li{opacity:0;transform:translateY(16px)}
 .lot2-armed .hero-point-icon *{stroke-dasharray:1;stroke-dashoffset:1}
 .lot2-armed.lot2-in li{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.75,.2,1),transform .6s cubic-bezier(.2,.75,.2,1)}
 .lot2-armed.lot2-in .hero-point-icon *{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.2,.75,.2,1) .25s}
 .lot2-armed.lot2-in li:nth-child(2),.lot2-armed.lot2-in li:nth-child(2) .hero-point-icon *{transition-delay:.12s,.37s}
 .lot2-armed.lot2-in li:nth-child(3),.lot2-armed.lot2-in li:nth-child(3) .hero-point-icon *{transition-delay:.24s,.49s}
 .lot2-armed.lot2-in li:nth-child(4),.lot2-armed.lot2-in li:nth-child(4) .hero-point-icon *{transition-delay:.36s,.61s}

 /* 5. Bandeau des outils qui défile en boucle ; l'écart est porté par chaque logo pour boucler sans saut */
 .lot2 .hero .lot2-marquee{order:2;margin-inline:-20px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
 .lot2 .hero .hero-copy .lot2-marquee .integration-strip-list{display:flex;width:max-content;gap:0;animation:lot2-marquee 26s linear infinite}
 .lot2 .hero .hero-copy .lot2-marquee .integration-strip-list li{flex:none;padding-right:30px;min-height:44px}
 .lot2 .lot2-marquee .integration-strip-list li.lot2-clone{display:flex}
 .lot2 .hero .hero-copy .lot2-marquee.is-paused .integration-strip-list,.lot2 .hero .hero-copy .lot2-marquee.is-away .integration-strip-list{animation-play-state:paused}
}
@keyframes lot2-marquee{to{transform:translateX(-50%)}}
/* Pause des effets ou mouvement réduit : pas de défilement, un bandeau qu'on glisse au doigt, sans les doubles */
@media(max-width:759px){
 .lot2.no-motion .lot2-marquee{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none;padding-inline:20px}
 .lot2.no-motion .hero .hero-copy .lot2-marquee .integration-strip-list{animation:none}
 .lot2.no-motion .lot2-marquee .integration-strip-list li.lot2-clone{display:none}
 .lot2.no-motion .hero .hero-points li{transition:none}
}
@media(max-width:759px) and (prefers-reduced-motion:reduce){
 .lot2 .lot2-marquee{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none!important;mask-image:none!important;padding-inline:20px}
 .lot2 .hero .hero-copy .lot2-marquee .integration-strip-list{animation:none}
 .lot2 .lot2-marquee .integration-strip-list li.lot2-clone{display:none}
 .lot2 .hero .hero-points li{transition:none}
}

/* Bandeau élargi de 20 px : sous 375 px la marge du site est de 16 px, on coupe le dépassement (18/10). */
@media(max-width:759px){.lot2 .hero{overflow-x:clip}}

/* 6. Les outils défilent dès l'arrivée (18/10) : au téléphone, le bandeau remonte sous la phrase d'introduction.
   « Demander une démo » reste dans l'en-tête ; celui du premier écran est retiré pour ne pas le doubler. */
@media(max-width:759px){
 .hero .hero-copy{display:flex;flex-direction:column}
 .hero .hero-copy .hero-bottom{display:contents}
 .hero .hero-copy .hero-bottom>.hero-lead{order:1}
 .hero .hero-copy>.integration-strip{order:2;margin:18px 0 0}
 .hero .hero-copy .hero-bottom>.hero-actions{order:3;margin:14px 0 0}
 .hero .hero-copy .hero-actions>.button{display:none}
 .hero .hero-copy .hero-bottom>.hero-points-intro{order:4;margin:22px 0 10px}
 .hero .hero-copy .hero-bottom>.hero-points{order:4;margin-top:0}
 .hero .hero-copy>.hero-origin{order:5}
}