/* =========================================================================
   WEBCRAFT — mise-en-page.css · 2026
   Correctifs de structure de l'accueil, sans toucher au design :
   1. Rail fixe : la navigation reste en place, le contenu défile seul.
   2. Le plan occupe toute la largeur restante (plus de colonne écrasée).
   3. Apparitions au scroll : rien ne peut rester invisible.
   ========================================================================= */

/* ---------- 1 + 2. Coquille : rail fixe, plan élastique ---------- */
.shell{
  grid-template-columns: var(--rail-occupe, clamp(228px,15.5vw,296px)) minmax(0,1fr);
  grid-template-rows:auto;
  grid-auto-rows:min-content;
  row-gap:0;
  min-height:100vh;
  align-items:start;
}
.shell > .rail{
  grid-column:1;
  grid-row:1;
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  max-height:100vh;
}
.shell > .plan{
  grid-column:2;
  grid-row:1;
  align-self:start;
  min-width:0;
  width:auto;
  max-width:none;
}

/* Le voile du menu mobile n'occupe aucune case de la grille : hors flux,
   il ne peut plus repousser le contenu dans une deuxième ligne. */
.shell > .voile{
  position:fixed;
  inset:0;
  grid-column:1 / -1;
  grid-row:1;
  height:0;
  min-height:0;
  margin:0;
  padding:0;
  pointer-events:none;
}
body.menu-ouvert .shell > .voile{
  height:auto;
  pointer-events:auto;
}

/* Filet de sécurité : même si la grille était réécrite ailleurs, le plan
   occupe toujours la colonne de droite et démarre en haut. */
.plan{grid-column:2 !important;grid-row:1 !important;align-self:start}

/* Premier écran : le contenu commence en haut, pas sous la navigation */
.plan > .bandeau{display:none}
.hero{padding-top:clamp(48px,7vh,96px)}

/* Bandeau de logos : les noms s'écoulent sur deux lignes, aucun ne sort du cadre */
.bandeau-logos__piste{
  display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.6vw,44px);
  width:100%;max-width:100%;overflow:hidden;align-items:center;
}
.bandeau-logos__item{flex:0 1 auto;min-width:0;white-space:normal}

/* ---------- 3. Filet de sécurité : plus rien ne reste invisible ---------- */
.mv{
  opacity:1;
  transform:none;
}
.mv:not(.est-vu){
  /* l'animation reste un bonus : l'état « en mouvement » est une translation
     légère qui revient d'elle-même, jamais une opacité à zéro prolongée */
  animation: mv-entree 1s var(--eas) both;
  animation-delay: var(--mv-delai, 0s);
}
.mv.est-vu{opacity:1;transform:none;animation:none}
@keyframes mv-entree{
  from{opacity:0;transform:translate3d(var(--mv-x,0),24px,0)}
  to{opacity:1;transform:none}
}
.mv--g{--mv-x:-42px}
.mv--d{--mv-x:42px}
.mv[data-delai="1"]{--mv-delai:.08s}
.mv[data-delai="2"]{--mv-delai:.16s}
.mv[data-delai="3"]{--mv-delai:.24s}
@media (prefers-reduced-motion:reduce){
  .mv:not(.est-vu){animation:none;opacity:1;transform:none}
}

/* Le premier écran remplit la fenêtre : titre et chapeau visibles à l'arrivée */
@media (min-width:981px){
  .hero{min-height:min(80vh,820px)}
}

/* ---------- Mobile / tablette : rail en tiroir, plan plein écran ---------- */
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .shell > .plan{grid-column:1}
  .shell > .rail{position:fixed;height:100vh}
  .plan > .bandeau{display:flex}
  .hero{padding-top:clamp(24px,4vh,48px)}
}