/* ═══════════════════════════════════════════════════════════════
   ÉCRAN COLLÉ DES PAGES D'EXPERTISE (exemple du 23 oct. 2026, retenu par
   Alix le 24 oct.), chargé après expertise-page.css (ExpertisePage.astro).
   Le geste de la galerie « Notre méthode » de Savoir-faire (expertises.css :
   un tunnel haut, un écran collé) : le fil d'Ariane et le titre
   restent en place, le défilement fait glisser dessous la présentation vers
   le haut et monter les expertises. Deux crans : la présentation, puis les
   expertises ; ensuite « Échangeons » et le pied de page.
   Téléphone, tablette, et « moins d'animations » : les deux contenus se
   suivent simplement, sous le titre.
   ═══════════════════════════════════════════════════════════════ */

/* sans l'écran collé : le contenu suit le titre */
.xp3d-ecran{position:relative;box-sizing:border-box;padding:clamp(118px,15vh,160px) var(--pad) clamp(56px,10vw,80px)}
.xp3d-cran,.xp3d-defiler{display:none}
.xp3d-vue-1{padding-top:clamp(44px,6.4vh,80px)}   /* titre → contenu */
.xp3d-vue-2{padding-top:clamp(56px,10vw,80px)}

@media (min-width:921px){
  html:has(.xp3d:not(.xp3d--actif)){scroll-snap-type:y proximity}

  /* le plan des expertises, resserré pour tenir sous l'en-tête, qui reste
     entier (fil d'Ariane et titre ne bougent jamais) : rangées de 52 px,
     textes au corps des cartes de l'accueil (.values-d, 15 px), cases
     moins rembourrées (leur hauteur suit la colonne de gauche, le texte du
     domaine finissant sur leur bord bas : les deux se resserrent ensemble) */
  .xp3d .xp3-domaines{gap:4px}
  .xp3d .xp3-dom{grid-template-columns:40px minmax(0,1fr) 18px;column-gap:14px;padding:6px 16px 6px 6px}
  .xp3d .xp3-dom-img{width:40px;height:40px}
  /* un titre de domaine ne passe jamais sur trois lignes (« Acquisitions et
     transmissions immobilières » y tombait dès 1536 px, Alix, 24 oct. 2026) :
     corps plafonné à celui des tuiles de /clients (16,5 px), écart vignette →
     titre de 14 px ; mesuré de 1280 à 2000 px sur les quatre pages */
  .xp3d .xp3-dom-t{font-size:clamp(13px,1.15vw,16.5px)}
  .xp3d .xp3-dom-textes{padding-top:16px}
  .xp3d .xp3-dom-texte,.xp3d .xp3-enjeu-d{font-size:clamp(13.5px,1vw,15px);line-height:1.65}
  .xp3d .xp3-dom-texte{top:.445em}   /* interligne 1,65 : demi-interligne .195em + jambage .25em */
  .xp3d .xp3-enjeu{padding:22px 24px 24px}
  .xp3d .xp3-enjeu-d{margin-top:10px}

  /* l'écran collé : un tunnel de deux écrans de haut, deux crans */
  .xp3d--actif .xp3d-tunnel{position:relative;height:200vh;height:200dvh}
  .xp3d--actif .xp3d-cran{display:block;position:absolute;left:0;right:0;top:0;height:100vh;height:100dvh;
    scroll-snap-align:start;pointer-events:none}
  .xp3d--actif .xp3d-cran-2{top:100vh;top:100dvh}
  .xp3d--actif .xp3d-ecran{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;padding-bottom:0}
  /* sous le titre, la scène : les deux contenus l'un sous l'autre, chacun de
     la hauteur de la scène, centré ; l'avancée dans le tunnel les fait monter */
  .xp3d--actif .xp3d-scene{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
  /* pendant le glissement seulement, les bords de la scène s'estompent : le
     texte ne se coupe pas net sous le titre. Deux dégradés du fond de page
     posés sur ses bords plutôt qu'un masque : même image, sans recomposer
     toute la scène à chaque image (24 oct. 2026) */
  .xp3d--actif .xp3d-scene::before,.xp3d--actif .xp3d-scene::after{content:'';position:absolute;left:0;right:0;z-index:2;
    pointer-events:none;opacity:0}
  .xp3d--actif .xp3d-scene::before{top:0;height:40px;background:linear-gradient(to bottom,var(--navy-3),rgba(32,42,62,0))}
  .xp3d--actif .xp3d-scene::after{bottom:0;height:32px;background:linear-gradient(to top,var(--navy-3),rgba(32,42,62,0))}
  .xp3d--glisse .xp3d-scene::before,.xp3d--glisse .xp3d-scene::after{opacity:1}
  /* glissement du rail et fondus des deux vues : posés par le script de la
     page (ExpertisePage.astro) sur ces seuls éléments, chacun sur son calque */
  .xp3d--actif .xp3d-rail{height:200%;display:flex;flex-direction:column;will-change:transform}
  /* marge fixe sous le titre, sur le modèle des pages de niveau 3 (contenu à
     clamp(44px,6.4vh,80px) du bas du titre),
     un peu plus large ici à la demande d'Alix (24 oct. 2026) : 8vh, soit
     72 px à 1440 × 900 ; le reste de la place va en bas. À la présentation, la première ligne est
     « Clientèle », posée au-dessus des tuiles : son haut est plus bas que
     celui de la grille de (30 px gardés + .55 du chapô − 16 px − 15 px
     d'intitulé), que l'on retire ici */
  .xp3d{--xp3d-g:clamp(52px,8vh,96px)}
  .xp3d--actif .xp3d-vue{flex:0 0 50%;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;
    padding:var(--xp3d-g) 0 0;will-change:opacity}
  .xp3d--actif .xp3d-vue-1{padding-top:calc(var(--xp3d-g) - (var(--chapo-taille) * .55 + 30px - 16px - 15px))}
  .xp3d--actif .xp3d-vue-2{opacity:0}
  .xp3d--actif .xp3d-defiler{display:flex}
}
/* fenêtres hautes : des rangées plus aérées (70 px au lieu de 52 : vignettes
   de 46 px, 12 px dessus et dessous, 8 px entre deux rangées comme celles de
   base), la place le permet ; la largeur du titre ne change pas (deux lignes
   au plus) et le plan tient toujours dans l'écran, 16 px de reste au plus
   juste à 1536 × 864 (Alix, 24 oct. 2026) */
@media (min-width:921px) and (min-height:821px){
  .xp3d .xp3-domaines{gap:8px}
  .xp3d .xp3-dom{grid-template-columns:46px minmax(0,1fr) 18px;padding:12px 16px 12px 8px}
  .xp3d .xp3-dom-img{width:46px;height:46px}
}
/* fenêtres basses (portables) : écarts au plus juste ; sous 760 px de haut,
   la marge sous le titre se resserre aussi, pour que les expertises tiennent */
@media (min-width:921px) and (max-height:820px){
  .xp3d .xp3d-vue-2 .prof-sec-title{margin-bottom:12px}
  .xp3d .xp3-int-gauche{padding-top:calc(15px + 12px)}   /* la liste reste au haut des cases */
  .xp3d .xp3-enjeu{padding:20px 24px 22px}
}
@media (min-width:921px) and (max-height:760px){
  .xp3d{--xp3d-g:32px}
}