/* ANAKINE — corrections de mise en page tablette & mobile (chargé sur toutes les pages).
   Les maquettes sont en styles inline : les règles ci-dessous doivent donc être !important. */

/* ---------- Tablette & mobile : une seule colonne ---------- */
@media (max-width: 980px) {
  body [style*="grid-template-columns"]:not([data-ak-mock] *) { grid-template-columns: minmax(0, 1fr) !important; }
  body [style*="sticky"] { position: static !important; top: auto !important; }
  body [style*="100vh"], body [style*="100svh"] { min-height: 0 !important; height: auto !important; }
  /* data-nowrap : opt-out explicite pour les rangées qui doivent rester sur une seule ligne
     (puce étoile + texte, libellé + flèche de fin de carte…). */
  body [style*="display:flex"]:not(.ak-mnav):not(.ak-mnav *):not([data-ak-mock] *):not([style*="overflow"]):not([style*="position:absolute"]):not([data-nowrap]),
  body [style*="display: flex"]:not([data-ak-mock] *):not([style*="overflow"]):not([style*="position:absolute"]):not([data-nowrap]) { flex-wrap: wrap; }
  body [data-nowrap] { flex-wrap: nowrap !important; }
  body img:not([style*="object-fit"]):not([data-ak-mock] *), body video, body svg:not([data-ak-mock] *) { max-width: 100%; }

  /* gouttières latérales */
  body section, body footer { padding-left: 24px !important; padding-right: 24px !important; }
  header { padding-left: 20px !important; padding-right: 20px !important; }

  /* respirations verticales resserrées */
  body [style*="gap:72px"], body [style*="gap: 72px"] { gap: 40px !important; }
  body [style*="gap:80px"], body [style*="gap: 80px"] { gap: 40px !important; }
  body [style*="gap:56px"], body [style*="gap: 56px"] { gap: 32px !important; }

  /* rails de carrousel : plus de débord hors gouttière */
  body [class*="rail"] { margin-left: 0 !important; margin-right: 0 !important; }
  body [class*="rail"]::after { flex-basis: 0 !important; }

  /* encarts flottants ramenés dans le cadre */
  body [style*="position:absolute"][style*="left:-"]:not([data-step-dot]):not([aria-hidden="true"]), body [style*="position: absolute"][style*="left: -"]:not([data-step-dot]):not([aria-hidden="true"]) { left: 0 !important; }
  body [style*="position:absolute"][style*="right:-"], body [style*="position: absolute"][style*="right: -"] { right: 0 !important; }

  /* Sections illustrées (use cases, évaluation des candidats) : en desktop, l'illustration
     alterne à gauche puis à droite. Une fois la grille repliée, cette alternance faisait
     précéder le texte par l'image une section sur deux. Sur mobile, l'ordre est toujours
     le même — titre et texte d'abord, illustration ensuite. */
  body [data-uc-text] { order: 1 !important; }
  body [data-uc-media] { order: 9 !important; }

  /* carrousels : cartes à la largeur de l'écran */
  body [style*="flex:0 0 396px"], body [style*="flex: 0 0 396px"],
  body [style*="flex:0 0 348px"], body [style*="flex: 0 0 348px"],
  body [style*="flex:0 0 320px"], body [style*="flex: 0 0 320px"] { flex: 0 0 82vw !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  body section, body footer { padding-left: 18px !important; padding-right: 18px !important; }
  body [style*="padding:88px"], body [style*="padding: 88px"],
  body [style*="padding:104px"], body [style*="padding: 104px"],
  body [style*="padding:120px"], body [style*="padding: 120px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  body [style*="padding:56px"], body [style*="padding: 56px"] { padding-left: 24px !important; padding-right: 24px !important; }
  body [style*="padding:36px"], body [style*="padding: 36px"],
  body [style*="padding:32px 36px"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* mockups et encarts flottants : remis dans le flux */
  body [style*="position:absolute"][style*="left:-"]:not([data-step-dot]):not([aria-hidden="true"]),
  body [style*="position: absolute"][style*="left: -"]:not([data-step-dot]):not([aria-hidden="true"]) { left: 0 !important; }
  body [style*="position:absolute"][style*="right:-"],
  body [style*="position: absolute"][style*="right: -"] { right: 0 !important; }

  /* Coupures de ligne voulues en desktop uniquement : sur mobile la ligne est déjà courte,
     et la garder produirait une orpheline (« Il en manque une ? » seule sur sa ligne). */
  br.ak-brdesk { display: none; }

  /* pas de texte à la découpe */
  body [style*="white-space:nowrap"]:not(nav *):not(.ak-mnav *) { white-space: normal !important; }

  /* footer : deux colonnes maxi puis une */
  .ak-foot { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }

  /* ---------- Tableaux comparatifs ---------- */
  /* Repliés en une colonne, ces tableaux perdaient toute lisibilité : la ligne d'entête
     s'empilait en libellés orphelins et on ne savait plus quelle valeur appartenait à quelle
     colonne. En mobile, l'entête disparaît, chaque rangée devient un bloc séparé par un filet,
     et les cellules qui portent un data-th affichent leur libellé au-dessus de leur valeur. */
  body [data-ak-tbl-head] { display: none !important; }
  body [data-ak-tbl-row] { display: block !important; padding: 16px 20px !important; }
  body [data-ak-tbl-row] + [data-ak-tbl-row] { border-top: 1px solid #dcdcdc; }
  body [data-ak-tbl-row] > * { display: block !important; text-align: left !important; }
  body [data-ak-tbl-row] > * + * { margin-top: 8px; }
  body [data-ak-tbl-row] > *[data-th]::before {
    content: attr(data-th);
    display: block;
    font-family: var(--ak-font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    letter-spacing: .08em;
    color: #8a8a8a;
    margin-bottom: 3px;
  }
}

/* ---------- Bandeaux défilants (toutes tailles d'écran) ---------- */
/* Les bandeaux de logos donnaient l'impression de ralentir au bout de quelques secondes :
   faute de couche GPU dédiée, leur animation partageait le fil principal avec le reste de
   la page (autres animations du hero, chargement d'images) et y perdait des images.
   La promotion en couche composite rend le défilement régulier du début à la fin. */
.hl-track, .ac-track, .v3-marquee,
[style*="width:max-content"][style*="linear infinite"] {
  will-change: transform;
  transform: translateZ(0);
}