@layer ancien {
/* Contrôle qualité responsive (19/10/2026) : téléphone et tablette seulement ; l'ordinateur suit la maquette. */

/* ===== Défilements horizontaux (cartes riches) : téléphone et tablette ===== */
@media (max-width: 1199px) {
  html body[data-page] main .grille.grille--formations,
  html body[data-page] main .grille.grille--conferences,
  html body[data-page] main .grille.grille--agents,
  html body[data-page] main .grille.grille--outils {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    margin-inline: -16px;
    padding: 4px 16px 10px;
    scrollbar-width: none;
    align-items: stretch;
  }
  html body[data-page] main .grille.grille--formations::-webkit-scrollbar,
  html body[data-page] main .grille.grille--conferences::-webkit-scrollbar,
  html body[data-page] main .grille.grille--agents::-webkit-scrollbar,
  html body[data-page] main .grille.grille--outils::-webkit-scrollbar { display: none; }
  html body[data-page] main :is(.grille--formations, .grille--conferences, .grille--agents, .grille--outils) > * {
    scroll-snap-align: start;
    min-width: 0;
    margin: 0;
  }
  /* Formations : carte verticale, photo entière en haut (la colonne étroite de la tablette coupait la photo) */
  html body[data-page] main .grille--formations > .carte--formation {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  html body[data-page] main .grille--formations > .carte--formation > .carte__media {
    width: auto;
    height: 180px;
    min-height: 0;
    flex: 0 0 auto;
  }
  html body[data-page] main .grille--formations > .carte--formation .carte__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html body[data-page] main .grille--conferences > .carte--conference > .carte__image { height: 180px; }
  /* Points de repère sous chaque défilement (posés par apercu-responsive.js) */
  .piste-points {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
  }
  .piste-points[hidden] { display: none; }
  .piste-points span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    opacity: .28;
    transition: width .25s ease, opacity .25s ease;
  }
  .piste-points span.actif { width: 20px; opacity: .85; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* Tablette : deux cartes et le bord de la suivante */
  html body[data-page] main .grille.grille--formations,
  html body[data-page] main .grille.grille--conferences,
  html body[data-page] main .grille.grille--agents,
  html body[data-page] main .grille.grille--outils {
    grid-auto-columns: calc((100% - 46px) / 2.15);
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
    gap: 18px;
  }
  html body[data-page] main .grille--formations > .carte--formation > .carte__media { height: 200px; }
  /* Conférences : deux cartes, déjà côte à côte sur tablette : pas de défilement (il les rendait plus hautes) */
  html body[data-page] main .grille.grille--conferences {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding: 0;
  }
  html body[data-page] main .grille--conferences > .carte--conference > .carte__image { height: 220px; }
}
/* Tablette en paysage (900-1199 px) : l'équipe sur 4 colonnes, comme sur ordinateur (2 colonnes = 1,7 écran) */
@media (min-width: 900px) and (max-width: 1199px) {
  html body[data-page] main .grille.grille--equipe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
/* Pied de page sur tablette (768-1199 px) : marque sur une ligne (logo et signature à gauche, réseaux à droite), puis les
   trois colonnes côte à côte (au lieu de 2 x 2 avec un grand vide sous la marque) */
@media (min-width: 768px) and (max-width: 1199px) {
  html body[data-page] .pied__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  html body[data-page] .pied__colonnes > .pied__marque {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "logo reseaux" "signature reseaux";
    justify-content: space-between;
    align-items: center;
    column-gap: 24px;
    padding: 0 0 26px;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  html body[data-page] .pied__marque > .pied__logo { grid-area: logo; }
  html body[data-page] .pied__marque > .pied__signature { grid-area: signature; }
  html body[data-page] .pied .pied__marque > .pied__reseaux { grid-area: reseaux; margin-top: 0; gap: 14px; }
  html body[data-page] .pied__colonnes > .pied__colonne:nth-child(2) { padding: 0 24px 0 0; border-left: 0; }
  html body[data-page] .pied__colonnes > .pied__colonne:nth-child(3) { padding: 0 24px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
  html body[data-page] .pied__colonnes > .pied__colonne:nth-child(4) { padding: 0 0 0 24px; }
  html body[data-page] .pied .pied__liens,
  html body[data-page] .pied .pied__contact { margin-top: 28px; }
  html body[data-page] .pied .pied__barre { margin-top: 26px; }
}
@media (min-width: 1200px) { .piste-points { display: none; } }
/* Agenda de Contact sur ordinateur (20/10, formulaire « pas assez étalé ») : carte de 1 100 px, comme celle de
   humanova-ia.com (1 045 px). Cal.com y met le volet de l'événement, le calendrier et les créneaux côte à côte
   (1 092 px), puis le formulaire à côté du volet. Entre 1 024 et 1 091 px, la place manquerait : sous 1 200 px
   d'écran, la carte garde 880 px. */
@media (min-width: 1200px) {
  html body[data-page="contact"] .rdv { max-width: 1140px; }
  html body[data-page="contact"] .rdv__agenda { max-width: 1100px; }
}
@media (prefers-reduced-motion: reduce) { .piste-points span { transition: none; } }

/* ===== Téléphone (≤ 767 px) ===== */
@media (max-width: 767px) {
  /* Accueil : les trois atouts en lignes compactes, icône à gauche (en trois colonnes, « performance » débordait) */
  html body[data-page] main .hero--accueil .hero__cartes {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: min(100%, 320px);
    margin-inline: auto;
    padding-top: 22px;
  }
  html body[data-page] main .hero--accueil .hero__cartes > .hero__carte {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
  }
  html body[data-page] main .hero--accueil .hero__cartes > .hero__carte > svg.icone {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    padding: 12px;
  }
  html body[data-page] main .hero--accueil .hero__cartes > .hero__carte > div { text-align: left; }
  html body[data-page="accueil"] main .hero--accueil .hero__cartes .titre-avantage { font-size: 17px; line-height: 1.25; }
  html body[data-page="accueil"] main .hero--accueil .hero__cartes .texte-avantage { font-size: 13.5px; line-height: 1.3; }

  /* À propos : mission, icône à côté du texte */
  html body[data-page] main .grille--mission { gap: 22px; }
  html body[data-page] main .grille--mission > .mission__point {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }
  html body[data-page] main .grille--mission > .mission__point > svg.icone { flex: 0 0 48px; width: 48px; height: 48px; }
  html body[data-page] main .grille--mission > .mission__point .mission__texte,
  html body[data-page] main .grille--mission > .mission__point .mission__texte > * { text-align: left; }

  /* À propos : valeurs et équipe sur deux colonnes */
  html body[data-page] main .grille.grille--valeurs,
  html body[data-page] main .grille.grille--equipe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  html body[data-page] main .grille--valeurs > .carte--valeur { padding: 18px 14px; }
  html body[data-page] main .grille--valeurs > .carte--valeur > svg.icone { width: 46px; height: 46px; }
  html body[data-page] main .grille--valeurs > .carte--valeur h3 { font-size: 17px; }
  html body[data-page] main .grille--valeurs > .carte--valeur .texte-carte { font-size: 14px; line-height: 1.45; }
  html body[data-page] main .grille--equipe > .carte--membre .membre__photo { height: auto; aspect-ratio: 4 / 5; }
  html body[data-page] main .grille--equipe > .carte--membre .membre__photo img { object-position: 50% 22%; }
  html body[data-page] main .grille--equipe > .carte--membre .membre__bandeau { padding: 12px 10px 14px; }
  html body[data-page] main .grille--equipe > .carte--membre .membre__bandeau h3 { font-size: 17px; }
  html body[data-page] main .grille--equipe > .carte--membre .membre__bandeau p { font-size: 13.5px; line-height: 1.35; }
  html body[data-page] main .grille--equipe > .carte--membre .membre__attente { font-size: 64px; }

  /* Formations : chiffres clés en 2 × 2 */
  html body[data-page] main .grille.grille--chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 14px;
  }
  html body[data-page] main .grille--chiffres > .chiffre-bloc { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
  html body[data-page] main .grille--chiffres > .chiffre-bloc > svg.icone { width: 46px; height: 46px; }

  /* Nos solutions : étapes de sécurité, numéro à côté du texte */
  html body[data-page] main .etapes-securite { gap: 26px; }
  html body[data-page] main .etapes-securite > .etape-securite {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }
  html body[data-page] main .etapes-securite .etape-securite__numero { width: 52px; height: 52px; }
  html body[data-page] main .etapes-securite .etape-securite__texte,
  html body[data-page] main .etapes-securite .etape-securite__texte > * { text-align: left; }

  /* Contact : formulaire plus serré, nom et prénom côte à côte */
  html body[data-page] main .formulaire__champs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
  html body[data-page] main .formulaire__champs > .champ { grid-column: auto; min-width: 0; }
  html body[data-page] main .formulaire__champs > .champ--plein,
  html body[data-page] main .formulaire__champs > .champ:has(#champ-email),
  html body[data-page] main .formulaire__champs > .champ:has(#champ-telephone),
  html body[data-page] main .formulaire__champs > .champ:has(textarea) { grid-column: 1 / -1; }
  html body[data-page] main .formulaire__champs .champ__controle:not(textarea) { height: 52px; min-height: 52px; }
  /* nom et prénom côte à côte : sans pictogramme, le texte d'exemple tient en entier */
  html body[data-page] main .formulaire__champs .champ:is(:has(#champ-nom), :has(#champ-prenom)) .champ__controle { padding-left: 14px; padding-right: 8px; }
  html body[data-page] main .formulaire__champs .champ:is(:has(#champ-nom), :has(#champ-prenom)) svg.icone { display: none; }
  html body[data-page] main .formulaire__actions { gap: 18px; }
  html body[data-page] main .formulaire__confidentialite { flex-direction: row; align-items: center; gap: 12px; text-align: left; flex: 1 1 100%; }
  html body[data-page] main .formulaire__confidentialite-texte { width: auto; flex: 1 1 auto; }
  html body[data-page] main .formulaire__confidentialite > svg.icone { flex: 0 0 34px; width: 34px; height: 34px; }

  /* Contact : coordonnées en lignes compactes */
  html body[data-page] main .coordonnees { gap: 10px; }
  html body[data-page] main .coordonnees > .coordonnee {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-align: left;
  }
  html body[data-page] main .coordonnees > .coordonnee .coordonnee__texte { width: auto; flex: 1 1 auto; min-width: 0; text-align: left; }
  html body[data-page] main .coordonnees > .coordonnee .coordonnee__texte > * { text-align: left; align-self: stretch; }
  html body[data-page] main .coordonnees > .coordonnee .coordonnee__pastille { flex: 0 0 48px; width: 48px; height: 48px; }
  html body[data-page] main .coordonnees > .coordonnee .coordonnee__pastille > .icone { width: 30px; height: 30px; }
  html body[data-page] main .coordonnees > .coordonnee .coordonnee__valeur { overflow-wrap: anywhere; }

  /* Accueil, « Nos solutions » : cartes en lignes (picto à gauche, titre et texte, flèche à droite) au lieu de cartes
     de 340 px empilées (section de 2 053 px à 390) */
  html body[data-page] main .grille--solutions { gap: 14px; }
  html body[data-page] main .grille--solutions > .carte--solution {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    grid-template-areas: "icone titre fleche" "texte texte texte";
    align-items: center;
    column-gap: 14px;
    padding: 16px 16px 18px;
    text-align: left;
  }
  html body[data-page] main .grille--solutions > .carte--solution > .icone { grid-area: icone; width: 46px; height: 46px; }
  html body[data-page] main .grille--solutions > .carte--solution > h3 { grid-area: titre; margin: 0; text-align: left; }
  html body[data-page] main .grille--solutions > .carte--solution > p { grid-area: texte; margin: 10px 0 0; text-align: left; }
  html body[data-page] main .grille--solutions > .carte--solution > .fleche { grid-area: fleche; width: 46px; height: 46px; margin: 0; }
  html body[data-page] main .grille--solutions > .carte--solution > .fleche .icone { width: 22px; height: 22px; }

  /* Accueil, approche : numéro à gauche et texte à côté, trait vertical d'un numéro au suivant (comme sur ordinateur) */
  html body[data-page] main .etapes > .etape {
    grid-template-columns: 48px minmax(0, 1fr);
    justify-items: stretch;
    column-gap: 16px;
    row-gap: 0;
    padding-bottom: 26px;
    --apercu-sat-longueur: 22px;
    --apercu-sat-depart: 50px;
    --apercu-sat-arrivee: calc(100% - 22px);
    --apercu-sat-gauche: 22px;
  }
  html body[data-page] main .etapes > .etape:last-child { padding-bottom: 0; }
  html body[data-page] main .etapes > .etape:not(:last-child)::before { left: 23px; top: 48px; bottom: 0; height: auto; }
  html body[data-page] main .etapes .etape__numero { width: 48px; height: 48px; }
  html body[data-page] main .etapes .etape__texte,
  html body[data-page] main .etapes .etape__texte > * { text-align: left; }
  html body[data-page] main .etapes .etape__texte > h3 { padding-top: 10px; }

  /* Accueil, bénéfices : picto à gauche du titre et du texte */
  html body[data-page] main .grille--benefices { gap: 24px; }
  html body[data-page] main .grille--benefices > .benefice {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas: "icone titre" "icone texte";
    align-items: start;
    column-gap: 14px;
    padding: 0;
    text-align: left;
  }
  html body[data-page] main .grille--benefices > .benefice > .icone { grid-area: icone; width: 46px; height: 46px; }
  html body[data-page] main .grille--benefices > .benefice > h3 { grid-area: titre; margin: 0; padding-top: 2px; text-align: left; }
  html body[data-page] main .grille--benefices > .benefice > p { grid-area: texte; margin: 4px 0 0; text-align: left; }

  /* Accueil, engagements : picto à gauche, cartes plus serrées */
  html body[data-page] main .grille--engagements { gap: 12px; }
  html body[data-page] main .grille--engagements > .carte--engagement {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas: "icone titre" "texte texte";
    align-items: center;
    gap: 0 14px;
    padding: 16px 16px 18px;
    text-align: left;
  }
  html body[data-page] main .grille--engagements > .carte--engagement > div { display: contents; }
  html body[data-page] main .grille--engagements > .carte--engagement > .icone { grid-area: icone; width: 38px; height: 38px; }
  html body[data-page] main .grille--engagements > .carte--engagement h4 { grid-area: titre; margin: 0; }
  html body[data-page] main .grille--engagements > .carte--engagement p { grid-area: texte; margin: 8px 0 0; }
  html body[data-page] main .grille--engagements > .carte--engagement :is(h4, p) { text-align: left; }

  /* Nos solutions, IA générative : tuile d'icône à gauche du titre et du texte (comme sur ordinateur) */
  html body[data-page] main .carte--generative {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 16px;
    text-align: left;
  }
  html body[data-page] main .carte--generative > .tuile-icone { flex: 0 0 60px; width: 60px; height: 60px; }
  html body[data-page] main .carte--generative > .tuile-icone .icone { width: 40px; height: 40px; }
  html body[data-page] main .carte--generative .carte__corps,
  html body[data-page] main .carte--generative .carte__corps > * { text-align: left; }

  /* Pied de page : les deux listes de liens côte à côte, espaces resserrés, coordonnées en lignes (pictogramme à gauche
     du texte, bloc au centre) au lieu du pictogramme posé au-dessus de chaque ligne (Anthony, 19/10 : « trop en hauteur ») */
  html body[data-page] .pied { padding-top: 30px; }
  html body[data-page] .pied .pied__reseaux { margin-top: 14px; }
  html body[data-page] .pied__colonnes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
  }
  html body[data-page] .pied__colonnes > .pied__marque,
  html body[data-page] .pied__colonnes > .pied__colonne:last-child { grid-column: 1 / -1; }
  html body[data-page] .pied .pied__liens,
  html body[data-page] .pied .pied__contact { margin-top: 28px; }
  html body[data-page] .pied__titre::after { top: calc(100% + 10px); }
  html body[data-page] .pied__liens { gap: 0; }
  html body[data-page] .pied__liens a { line-height: 1.6; }
  html body[data-page] .pied .pied__contact { gap: 10px; width: fit-content; max-width: 100%; margin-inline: auto; }
  html body[data-page] .pied .pied__contact li { flex-direction: row; align-items: flex-start; gap: 12px; text-align: left; }
  html body[data-page] .pied .pied__contact li :is(p, a, div) { text-align: left; }
  html body[data-page] .pied .pied__contact li > a { align-self: center; }
  html body[data-page] .pied .pied__barre { margin-top: 24px; padding-top: 16px; gap: 8px; }
}

}