/* Process — affichage « panneau bord à bord » (17/09, Theo : « applique l'affichage panneau à la section process »). La mécanique du process ne change pas
   (l'étape active se remplit en cinq secondes puis passe à la suivante, le survol ne l'arrête pas, le clic choisit) ; c'est la mise en page qui reprend celle du Panneau des témoignages :
   la rangée va d'un bord à l'autre de l'écran, les trois étapes sont des cellules à filets de même hauteur à gauche, le texte calé sur la grille de la page (--x),
   et le visuel de l'étape active remplit tout le panneau de droite, sans arrondi. Seule l'étape active montre sa description.
   Bureau seulement : sous 1100 px, l'empilement d'origine reste. html[data-process-vue="bord"], clé processvue=contenu pour revenir à l'ancien. */
@media (min-width: 1101px) {
  html[data-process="panneau"][data-process-vue="bord"] .process { --x: max(var(--marge), calc((100vw - 1540px) / 2 + var(--marge))); --coupe: calc(var(--x) + (min(100vw, 1540px) - 2 * var(--marge) - 48px) * 0.6 + 24px); overflow-x: clip; }
  /* La section garde sa marge du bas de 120 px (18/09) : supprimée un temps pour que le panneau touche la section suivante, elle ne laissait que 112 px avant le titre des bénéfices,
     contre 232 px entre les autres sections (vu par Theo : « un peu trop rapprochée de la section du haut »). */
  html[data-process="panneau"][data-process-vue="bord"] .process .etapes { width: 100vw; margin-left: calc(50% - 50vw); grid-template-columns: calc(100vw - var(--coupe)) minmax(0, 1fr); grid-template-rows: calc(var(--proc-h) - 256px) 128px 128px; column-gap: 0; align-items: stretch; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape .corps { align-content: center; gap: 10px; padding: 28px 112px 28px var(--x); border-top: 0; border-bottom: 1px solid var(--trait); transition: color 0.35s ease, background var(--m-vite, 220ms) ease; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape:nth-child(1) .corps { grid-row: 1; } html[data-process="panneau"][data-process-vue="bord"] .process .etape:nth-child(2) .corps { grid-row: 2; } html[data-process="panneau"][data-process-vue="bord"] .process .etape:nth-child(3) .corps { grid-row: 3; border-bottom: 0; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape .corps:hover, html[data-process="panneau"][data-process-vue="bord"] .process .etape[data-actif] .corps { background: var(--surface); }
  /* Seule l'étape active montre sa description (Theo, 17/09 : « les contenus pas actifs peuvent avoir la description masquée ? ») : l'accordéon d'origine de la page reprend la main
     sur le texte (ouverture en hauteur), et ce sont les rangées de la grille qui suivent : l'étape active prend la hauteur libre du panneau, les deux autres se réduisent à leur numéro
     et leur titre. La hauteur totale du panneau ne bouge pas, donc le visuel non plus. */
  /* Les trois rangées sont en pixels, l'active comprise (hauteur du panneau moins les deux réduites) : entre une « part restante » (1fr) et des pixels le navigateur ne sait pas interpoler,
     il basculait d'un coup à mi-course, les cellules passaient sèchement de 382/128/128 à 128/382/128 et les titres sautaient de plus de 100 px (le « flash » vu par Theo le 18/09, mesuré image par image).
     --proc-h : la hauteur du panneau, plus grande quand la colonne de texte est étroite pour que la description la plus longue tienne. */
  html[data-process="panneau"][data-process-vue="bord"] .process { --proc-h: 640px; }
  @media (max-width: 1320px) { html[data-process="panneau"][data-process-vue="bord"] .process { --proc-h: 720px; } }
  /* content-box : les trois rangées font à elles seules --proc-h ; en border-box, les deux filets de 1 px de la rangée les faisaient déborder de 2 px, rognés par l'overflow: clip
     en bas de la cellule 3, dont la barre de progression ne montrait plus qu'1 px sur 3 (vu par Theo le 21/09). */
  html[data-process="panneau"][data-process-vue="bord"] .process .etapes { height: var(--proc-h); box-sizing: content-box; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etapes:has(.etape:nth-child(1)[data-actif]) { grid-template-rows: calc(var(--proc-h) - 256px) 128px 128px; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etapes:has(.etape:nth-child(2)[data-actif]) { grid-template-rows: 128px calc(var(--proc-h) - 256px) 128px; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etapes:has(.etape:nth-child(3)[data-actif]) { grid-template-rows: 128px 128px calc(var(--proc-h) - 256px); }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape .corps { overflow: hidden; }
  /* Le filet de chargement : en bas de la cellule, en terre brûlée, comme sur le Panneau des témoignages */
  /* 3 px, validé par Theo le 18/09 après comparaison avec 4 et 6. La barre est posée DANS la cellule, au ras du bas : la cellule masque ce qui dépasse (overflow hidden, pour l'accordéon),
     et l'ancienne barre de 2 px posée à cheval sur le filet n'en montrait qu'un. */
  html[data-process="panneau"][data-process-vue="bord"] .process .etape[data-actif] .corps::after, html[data-process="panneau"][data-process-vue="bord"] .process .etape .corps[data-barre]::after { top: auto; bottom: 0; height: 3px; background: var(--brule); }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape .icone { right: 40px; top: 50%; margin-top: -24px; }
  /* ---- Le changement d'étape (Theo, 18/09 : « améliore l'animation de changement de tab pour un rendu fluide et pro »). Avant : fondu croisé des visuels avec un glissement de 8 px,
     et texte qui s'ouvrait en fondu. Maintenant, dans le vocabulaire du site, sans fondu :
     · le visuel de l'étape qui arrive monte depuis le bas du panneau et vient COUVRIR celui qui sort, lequel se retire un peu dans le même sens (parallaxe de 14 %) puis disparaît une fois couvert ;
       en revenant à une étape précédente, le mouvement s'inverse et le visuel descend du haut. 720 ms, courbe de sortie du site. La rangée masque ce qui dépasse (overflow: clip).
     · le texte de l'étape ne fond plus : il se déplie avec sa rangée (la hauteur le révèle de haut en bas), pendant que la cellule active s'agrandit et que les autres se resserrent, d'un même geste de 560 ms.
     data-pret n'est posé par le script qu'au premier vrai changement : l'étape 1 ne joue pas d'entrée au chargement. Mouvement réduit : tout change d'un coup. */
  html[data-process="panneau"][data-process-vue="bord"] .process .etapes { overflow: clip; transition: grid-template-rows 0.56s var(--m-sortie, cubic-bezier(0.16, 1, 0.3, 1)); }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape .corps .texte { opacity: 1; transition: grid-template-rows 0.56s var(--m-sortie, cubic-bezier(0.16, 1, 0.3, 1)), margin-top 0.56s var(--m-sortie, cubic-bezier(0.16, 1, 0.3, 1)); }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape[data-actif] .corps .texte { opacity: 1; transition: grid-template-rows 0.56s var(--m-sortie, cubic-bezier(0.16, 1, 0.3, 1)), margin-top 0.56s var(--m-sortie, cubic-bezier(0.16, 1, 0.3, 1)); }
  @keyframes p-entrer-bas { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes p-entrer-haut { from { transform: translateY(-100%); } to { transform: translateY(0); } }
  @keyframes p-sortir-bas { from { transform: translateY(0); } to { transform: translateY(-14%); } }
  @keyframes p-sortir-haut { from { transform: translateY(0); } to { transform: translateY(14%); } }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape .visuel { opacity: 1; transform: none; transition: none; visibility: hidden; z-index: 0; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape[data-actif] .visuel { visibility: visible; z-index: 2; transition: none; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape[data-sortant] .visuel { visibility: visible; z-index: 1; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etapes[data-pret] .etape[data-actif] .visuel { animation: p-entrer-bas 720ms var(--m-sortie, cubic-bezier(0.16, 1, 0.3, 1)) both; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etapes[data-pret] .etape[data-sortant] .visuel { animation: p-sortir-bas 720ms var(--m-sortie, cubic-bezier(0.16, 1, 0.3, 1)) both; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etapes[data-pret][data-sens="haut"] .etape[data-actif] .visuel { animation-name: p-entrer-haut; }
  html[data-process="panneau"][data-process-vue="bord"] .process .etapes[data-pret][data-sens="haut"] .etape[data-sortant] .visuel { animation-name: p-sortir-haut; }
  @media (prefers-reduced-motion: reduce) { html[data-process="panneau"][data-process-vue="bord"] .process .etape .visuel { animation: none !important; } html[data-process="panneau"][data-process-vue="bord"] .process .etapes, html[data-process="panneau"][data-process-vue="bord"] .process .etape .corps .texte { transition: none !important; } }

  /* Le visuel remplit le panneau : plus de collage au défilement, plus d'arrondi, la scène prend toute la hauteur des trois cellules */
  html[data-process="panneau"][data-process-vue="bord"] .process .etape .visuel { position: relative; top: auto; height: 100%; border-left: 1px solid var(--trait); }
  html[data-process="panneau"][data-process-vue="bord"] .process .etape .visuel .scene { aspect-ratio: auto; height: 100%; border-radius: 0; }
}