/* Les cartes côte à côte : chaque carte reprend les rangées de sa grille (subgrid).
   Dans une même rangée, les icônes, surtitres, titres, textes et liens commencent tous à la même hauteur,
   quelle que soit la longueur de chaque texte ; les liens « Découvrir » s'alignent en bas.
   Pages Entreprises du labo (13/11/2026). Navigateurs sans subgrid : rien ne change. */
@supports (grid-template-rows:subgrid){

  /* Conseil, premier écran : mission courte, mission longue. Même anatomie que les autres cartes du site :
     l'icône au-dessus, puis le surtitre, le titre et le texte sur toute la largeur de la carte. */
  .offer-formats>li{grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 4;row-gap:4px}
  .offer-formats .f-ico{grid-row:1;grid-column:1;margin-bottom:10px}
  .offer-formats .f-label{grid-row:2;grid-column:1;align-self:end}
  .offer-formats .f-title{grid-row:3;grid-column:1;align-self:start}
  .offer-formats .f-text{grid-row:4;grid-column:1}

  /* Conseil, « Et après la mission ? » : icône, surtitre, titre, texte, lien */
  .next-grid>li{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:8px}
  .next-grid .next-card{grid-template-rows:subgrid;grid-row:span 5;align-content:normal;height:auto}
  .next-grid .next-more{align-self:end}

  /* « Pourquoi » (accueil, Formation, Déploiement) : icône, titre, texte ; le numéro reste en haut à droite */
  .why-grid>.why-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start}

  /* Formation, Champions IA : icône, titre, texte */
  .champ-benefits>li{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}

  /* Pages de cas : « Ce que ça a changé » */
  .results>li{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}

  /* Les cartes de références (accueil, Déploiement, Références, cas) : aperçu, étiquettes, titre, texte, lien */
  :is(.teaser-grid,.showcase-grid,.refs-grid,.related-grid)>li{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:10px}
  :is(.teaser-grid,.showcase-grid,.refs-grid,.related-grid)>li>.ref-card{grid-template-rows:subgrid;grid-row:span 5;height:auto}
  :is(.teaser-grid,.showcase-grid,.refs-grid,.related-grid) .ref-more{align-self:end}

  /* Accueil : les trois offres (photo, surtitre, titre, texte, lien) */
  .zo-grid>li{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0}
  .zo-grid .zo-carte{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0}
  .zo-grid .zo-c{display:contents}
  .zo-grid :is(.zo-k,.zo-t,.zo-p,.zo-l){padding-inline:24px}
  .zo-grid .zo-k{padding-top:20px}
  .zo-grid .zo-l{align-self:end;padding-bottom:24px}
}

/* « À qui s'adressent » (Formation, Déploiement) : au-dessus de 600 px seulement (en dessous, l'icône passe à gauche) */
@supports (grid-template-rows:subgrid){
  @media (min-width:601px){
    .aud-grid>.aud-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start}
  }
}

/* Le pied de page juste après le dernier appel (l'éclipse) : pas de marge au-dessus, sinon une bande vide les sépare. */
body:has(.zf) .site-footer{margin-top:0!important}

/* Conseil, « En mission chez un client » : la photo recentrée. Sans le plafond, les intervenants au-dessus de la carte « Restitution » qui couvre le bas. */
.audit-photo img{transform:scale(1.1);transform-origin:52% 100%}

/* Formation, section conférence : la photo de l'ESSEC sans le plafond */
html [data-testid="section-conference"] img[src*="conference-essec"]{transform:scale(1.5);transform-origin:58% 100%}

/* Formation, « On vient chez vous » : un zoom léger seulement (un fort zoom pixellise la photo), Clément recentré dans la moitié droite, sans plafond */
html [data-testid="offer-formation"] img[src*="salle-fondateurs"]{transform:scale(1.38);transform-origin:38% 100%;object-position:62% 100%!important}

/* Formation, « On pratique, beaucoup » : la salle de cours où chacun est sur son ordinateur, sans le plafond (zoom léger, la source fait 1 280 px) */
img[src*="photo-atelier-universite"]{transform:scale(1.34);transform-origin:50% 100%}
.m-photo:has(> img[src*="photo-atelier-universite"]),.m-photo:has(> picture > img[src*="photo-atelier-universite"]){overflow:hidden;border-radius:12px;border:1px solid var(--z-border)}
.m-photo > img[src*="photo-atelier-universite"],.m-photo > picture > img[src*="photo-atelier-universite"]{border:0!important;border-radius:0!important}

/* Déploiement, « Ce qu'on construit pour vous » (13/11) : entre 601 et 960 px, les écrans passent au-dessus du texte et prenaient toute la largeur ;
   leur texte grossissait avec eux (jusqu'à 20 px, « trop zoomé »). On plafonne leur largeur et on les centre. Sur téléphone, l'écran des agents reste à la taille d'un téléphone. */
@media (min-width:601px) and (max-width:960px){
  .m-panel .m-stage{width:100%;max-width:600px;margin-inline:auto;justify-self:center;box-sizing:border-box}
}
@media (max-width:600px){
  .m-panel .m-stage:has(.viz-agents){width:100%;max-width:380px;margin-inline:auto;justify-self:center;box-sizing:border-box}
}