/* Restored from landing-v2/index.html, saved 30 August 2026.
 * These mobile layouts were missing from the September public/preview base.
 * Copy and desktop layout continue to come from the consolidated landing. */

.res-area,.res-dot{display:none}
@media(max-width:560px){
  /* Les quatre KPI etaient empiles sur une colonne (550px de haut) et le graphe
     ecrase a 132px tout en bas. Grille 2x2 + graphe a pleine hauteur de courbe. */
  .res-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;margin-top:36px}
  .res-kpi{padding-left:14px}
  .res-v{font-size:clamp(27px,8vw,32px)}
  .res-t{margin-top:10px;font-size:13px}
  .res-n{margin-top:4px;font-size:11.5px;line-height:1.45}
  /* le coin haut-gauche d'une exponentielle est vide par nature : on glisse
     le graphe sous la rangee basse des KPI, comme en desktop. La courbe ne
     grimpe qu'a droite, ou elle ne frole que l'extreme bord du texte. */
  .res-kpis{position:relative;z-index:1}
  .res-graph{height:246px;margin-top:-44px;z-index:0}
  /* sur un ecran de telephone le trait de 1,6px disparait : on epaissit la
     courbe, les barres, et on ajoute une lueur pour que le dessin se voie. */
  .res-line{stroke-width:2.6;filter:drop-shadow(0 0 6px rgba(196,240,0,.55))}
  .res-bars line{stroke-width:1.6}
  .res-area{display:block;fill:url(#resAreaG)}
  .res-dot{display:block;fill:#ceff09;filter:drop-shadow(0 0 8px rgba(196,240,0,.9))}
  /* pendant le balayage, l'aire et le point arrivent apres la courbe */
  .res-graph.anim .res-area{opacity:0}
  .res-graph.anim.go .res-area{opacity:1;transition:opacity 1.1s ease .8s}
  .res-graph.anim .res-dot{opacity:0;transform:scale(.3);transform-origin:center}
  .res-graph.anim.go .res-dot{opacity:1;transform:none;
    transition:opacity .4s ease 1.5s,transform .5s cubic-bezier(.34,1.56,.64,1) 1.5s}
}
.sw-mobile{display:none}
@media(max-width:640px){
  #compare{padding:56px 0 60px}
  #compare>.w{padding-inline:18px}
  #compare .sw{display:none}
  #compare .eyebrow{margin-bottom:12px}
  #compare h2{text-align:left;font-size:28px!important;line-height:1.05!important;
    letter-spacing:-1.2px!important}
  #compare h2 em{display:block}
  #compare .sw-mobile{display:block;margin-top:28px;width:100%;border-radius:20px;
    border:1px solid rgba(196,240,0,.42);
    background:linear-gradient(110deg,#141613 0%,#111A26 55%,#191c18 100%);
    box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 35px rgba(196,240,0,.06);
    overflow:hidden}
  .swm-head,.swm-row{display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) 32px minmax(0,1.3fr);
    align-items:stretch}
  .swm-head span,.swm-row>div{display:flex;align-items:center;min-width:0}
  .swm-head span+span,.swm-row>div+div{border-left:1px solid rgba(255,255,255,.08)}
  .swm-head{min-height:40px}
  .swm-head span{justify-content:center;font-size:10px;font-weight:750;
    letter-spacing:1.8px;text-transform:uppercase;line-height:1.3;text-align:center}
  .swm-head span:nth-child(2){color:#9da09b}
  .swm-head span:nth-child(4){color:#c4f000;
    background:linear-gradient(180deg,rgba(196,240,0,.06),rgba(196,240,0,.015))}
  .swm-row{min-height:71px;border-top:1px solid rgba(255,255,255,.10)}
  .swm-category{padding:10px 8px;font-size:13px;font-weight:700;line-height:1.22;color:#fff;overflow-wrap:break-word}
  .swm-old{padding:10px;font-size:12.5px;font-weight:450;line-height:1.25;
    color:rgba(255,255,255,.68)}
  .swm-arrow{justify-content:center;font-size:20px;color:#c4f000}
  .swm-new{padding:10px;font-size:12.5px;font-weight:520;line-height:1.25;
    color:rgba(255,255,255,.96);
    background:linear-gradient(180deg,rgba(196,240,0,.06),rgba(196,240,0,.015))}
}

@media(max-width:860px){
  /* ===== Multicanal en mobile : le meme concept que le desktop, recompose. =====
     Quatre cartes de canal en 2x2, le noeud AI CRM en absolu au centre exact,
     et une croix de connexion qui ne se voit que dans les gouttieres : les
     lignes passent sous les cartes et sous le noeud, jamais par-dessus. */
  .mc-flow{position:relative;margin-top:30px}
  .mc-links{display:none}
  /* une impulsion parcourt la couture, du noeud jusqu'au bas du panneau :
     c'est elle qui lie les deux carres, dans le langage des filets du site */
  .mc-flow::after{content:'';position:absolute;left:50%;top:20%;width:1px;height:34px;
    margin-left:-.5px;z-index:1;pointer-events:none;opacity:0;
    background:linear-gradient(180deg,transparent,rgba(208,255,22,.95) 50%,transparent);
    animation:mcSeam 4.4s ease-in-out 1.6s infinite}
  @keyframes mcSeam{
    0%{top:20%;opacity:0}
    7%{opacity:1}
    58%{top:calc(100% - 44px);opacity:1}
    66%{top:calc(100% - 32px);opacity:0}
    100%{top:calc(100% - 32px);opacity:0}}
  .mc-row{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 36px}
  .mc-side{display:contents}
  /* la croix de connexion : au repos elle est complete ; pendant le balayage
     elle se dessine depuis le noeud, puis les quatre actions montent en
     cascade (leurs retards --d de 640 a 820ms prolongent le mouvement). */
  .mc-row::before,.mc-row::after{content:'';position:absolute;z-index:0;pointer-events:none}
  .mc-flow.reveal .mc-row::before{transform:scaleY(0)}
  .mc-flow.reveal .mc-row::after{transform:scaleX(0)}
  .mc-flow.reveal.go .mc-row::before{transform:none;transition:transform .8s cubic-bezier(.33,1,.68,1) .25s}
  .mc-flow.reveal.go .mc-row::after{transform:none;transition:transform .8s cubic-bezier(.33,1,.68,1) .35s}
  /* la verticale continue sous la grille jusqu'au panneau des actions */
  .mc-row::before{left:50%;top:6%;bottom:-26px;width:1px;
    background:linear-gradient(180deg,transparent,rgba(196,240,0,.4) 26%,rgba(196,240,0,.4) 82%,rgba(196,240,0,.42))}
  .mc-row::after{top:50%;left:3%;right:3%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(196,240,0,.4) 30%,rgba(196,240,0,.4) 70%,transparent)}
  /* cartes de canal : icone au-dessus du nom, matiere des autres cartes du site */
  .mc-ch{position:relative;z-index:1;flex-direction:column;justify-content:center;gap:12px;
    min-height:102px;padding:14px 10px;border:1px solid rgba(255,255,255,.08);border-radius:16px;
    background:linear-gradient(165deg,#181a17 0%,#111210 100%);
    box-shadow:0 16px 34px -22px rgba(0,0,0,.75)}
  .mc-ch img{width:26px;height:26px}
  .mc-ch span{font-size:14px}
  /* le noeud : au centre exact, sans transform (l'animation d'entree en pose un) */
  #campaigns .mc-hub{position:absolute;inset:0;margin:auto;z-index:2;
    width:102px;height:82px;padding:0;border-radius:18px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
  #campaigns .mc-hub::before{content:'✦';font-size:15px;line-height:1;color:#c4f000;
    text-shadow:0 0 12px rgba(196,240,0,.8)}
  #campaigns .mc-hub b{font-size:16px}
  /* cas d'usage : un seul panneau, quadrille par ses filets interieurs */
  .mc-uses{position:relative;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:26px;
    border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;
    background:linear-gradient(165deg,#141613 0%,#0e0f0e 100%)}
  /* la lumiere entre dans le panneau et suit son filet central : les deux
     blocs sont couturés par la meme verticale */
  .mc-uses::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(196,240,0,.42),rgba(196,240,0,.1) 62%,transparent)}
  .mc-flow.reveal .mc-uses::before{transform:scaleY(0);transform-origin:50% 0}
  .mc-flow.reveal.go .mc-uses::before{transform:none;
    transition:transform .6s cubic-bezier(.33,1,.68,1) .95s}
  .mc-use{padding:16px 14px 18px;text-align:center}
  .mc-use+.mc-use{border-left:0}
  .mc-use:nth-child(odd){border-right:1px solid rgba(255,255,255,.06)}
  .mc-use:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.06)}
  /* icone dans une pastille, titre et description a gauche */
  .mc-use .mc-ic{flex-direction:column;align-items:center;justify-content:flex-start;gap:9px}
  .mc-use .mc-ic svg{width:36px;height:36px;padding:10px;border:1px solid rgba(196,240,0,.32);
    border-radius:50%;background:rgba(196,240,0,.07)}
  .mc-t{font-size:14.5px}
  .mc-d{margin-top:6px;font-size:12.5px;color:#8f938d}
}
@media(max-width:520px){
  .mc-row{gap:28px 28px}
  .mc-ch{min-height:92px;padding:12px 8px;gap:9px}
  .mc-ch img{width:23px;height:23px}
  .mc-ch span{font-size:13px}
  #campaigns .mc-hub{width:92px;height:74px;border-radius:15px}
  #campaigns .mc-hub b{font-size:14px}
  #campaigns .mc-hub::before{font-size:13px}
  .mc-use{padding:14px 12px 16px}
  .mc-t{font-size:13.5px}
  .mc-d{margin-top:4px;font-size:11.5px}
  #campaigns .mc-head .lead{margin-top:12px}
}

/* Reset values left behind by the superseded stacked mobile layout. */
.swm-category,.swm-old,.swm-new{overflow-wrap:anywhere}
@media(min-width:361px) and (max-width:640px){.swm-category{font-size:12px}}
@media(max-width:860px){
  #campaigns .mc-hub{order:0;grid-column:auto;grid-row:auto;min-width:0}
  #campaigns .mc-use:nth-child(odd){padding-left:14px}
  #campaigns .mc-use:nth-child(-n+2){padding-bottom:18px}
}
@media(max-width:520px){
  #campaigns .mc-use:nth-child(odd){padding-left:12px}
  #campaigns .mc-use:nth-child(-n+2){padding-bottom:16px}
}
@media(max-width:640px){
  #campaigns h2,#compare h2,#results h2{font-size:clamp(22px,6.5vw,25px)!important;line-height:1.12!important;letter-spacing:-.028em!important}
}
@media(max-width:360px){
  .swm-head,.swm-row{grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr) minmax(0,1.25fr)}
  .swm-arrow,.swm-head span:nth-child(3){display:none}
  .swm-category{font-size:11.5px;padding:9px 6px}
  .swm-old,.swm-new{font-size:11.5px;padding:9px 6px}
  .swm-head span{font-size:9px;letter-spacing:.5px}
}
@media(prefers-reduced-motion:reduce){
  .mc-flow::after{animation:none!important;display:none}
  .mc-row::before,.mc-row::after,.mc-uses::before{transform:none!important;transition:none!important}
  .res-graph .res-line,.res-graph .res-bars line{stroke-dashoffset:0!important}
}