/* ============================================================
   Cartes empilees — section 03 / 06 « Trois manieres d'intervenir »
   15/09
   ------------------------------------------------------------
   L'empilement existait deja : editorial.css cale les trois blocs en
   position: sticky, echelonnes de 5.2rem a 6.4rem. On ne touche pas a
   ce principe, on lui donne la matiere qui lui manquait.

   Quatre gestes, dans cet ordre d'importance :
   1. La carte recouverte RECULE. Sans ce recul, trois aplats opaques
      se remplacent sans qu'on lise une pile. C'est ce recul qui cree
      la profondeur, pas l'ombre.
   2. Elle s'assombrit, parce qu'un objet qui s'eloigne recoit moins de
      lumiere. Le recul seul se lit comme un bug d'echelle.
   3. Le chiffre 01/02/03 passe de 0.62rem a un vrai repere typographique.
      C'est lui qui dit ou l'on en est dans la sequence.
   4. L'image et le texte entrent en decale, pas d'un bloc.

   Les deux moteurs sont --couvert et --entree, ecrits par
   js/cartes-empilees.js. Aucune valeur de design ne vit dans le JS :
   toutes les amplitudes sont ici.

   Chargee en dernier. Pour tout annuler : retirer le <link> et le
   <script> d'index.html, supprimer ce fichier et le JS. L'empilement
   d'origine reprend tel quel.
   ============================================================ */

#interventions .home-practice-item{
  --couvert: 0;
  --entree: 1;

  /* Amplitudes du recul. Au-dela de 0.08 d'echelle, le bord de la carte
     se decolle trop et laisse voir la couture avec celle du dessous. */
  --recul-echelle: 0.055;
  --recul-montee: 1.6rem;
  --voile-max: 0.62;

  position: sticky; /* redit ici : ce fichier charge apres editorial.css */
  isolation: isolate;
  border-radius: clamp(1rem, 1.6vw, 1.75rem);
  transform-origin: 50% 0;
  transform:
    translate3d(0, calc(var(--couvert) * var(--recul-montee) * -1), 0)
    scale(calc(1 - var(--couvert) * var(--recul-echelle)));
  will-change: transform;

  /* L'ombre portee se durcit a mesure que la carte s'enfonce : c'est elle
     qui detache la carte du dessus. Une ombre fixe aplatit la pile. */
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, calc(0.06 + var(--couvert) * 0.05)),
    0 calc(-1.5rem - var(--couvert) * 2rem) calc(3rem + var(--couvert) * 3rem)
      rgba(8, 9, 10, calc(0.28 + var(--couvert) * 0.24));
}

/* Le voile. inset: -1px et non 0 : a l'echelle reduite, un liseré clair
   d'un pixel survivait sur le bord arrondi. */
#interventions .home-practice-item::after{
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: var(--night, #090b0c);
  opacity: calc(var(--couvert) * var(--voile-max));
}

/* --- Le chiffre, repere de la sequence -------------------------------- */
#interventions .home-practice-index{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Il s'allume a l'arrivee de la carte et s'eteint quand elle passe
     dessous : a tout instant, le chiffre le plus lisible est l'actif. */
  color: var(--brass, #b08d57);
  opacity: calc(0.25 + var(--entree) * 0.75 - var(--couvert) * 0.6);
  transform: translate3d(0, calc((1 - var(--entree)) * 0.8rem), 0);
}

/* --- Entree decalee du contenu ----------------------------------------
   Le texte arrive avant l'image. L'inverse donnait l'impression que la
   carte se construisait a l'envers. */
#interventions .home-practice-copy{
  opacity: calc(0.15 + var(--entree) * 0.85);
  transform: translate3d(0, calc((1 - var(--entree)) * 1.6rem), 0);
}

/* --- Hauteur de l'image ------------------------------------------------
   La figure ne posait aucune hauteur : align-items: stretch sur la grille
   de la carte la faisait courir sur toute la rangee, et la rangee est
   dictee par la colonne de texte. Mesure a 1280 : figure et bloc de copie
   faisaient exactement la meme hauteur, 572, 719 et 693px selon la carte.
   L'image grandissait donc a chaque fois que le texte s'allongeait.

   On lui donne un rapport de forme propre et on la centre : elle cesse de
   suivre le texte. A 619px de large, la hauteur passe de 719 a 464px.

   align-self: center et non start : la carte reste plus haute que l'image,
   caler l'image en haut laisserait un vide sous elle. */
#interventions .home-practice-item figure{
  overflow: hidden;
  border-radius: clamp(0.5rem, 1vw, 1rem);
  align-self: center;
  aspect-ratio: 4 / 3;
  height: auto;
}

/* Le leger zoom qui se resorbe donne a l'image une profondeur propre,
   distincte de celle de la carte qui la porte. */
#interventions .home-practice-item figure img{
  transform: scale(calc(1.06 - var(--entree) * 0.06));
  transform-origin: 50% 50%;

  /* Origine : saturate(0.48) contrast(1.03) brightness(0.68).

     Ici, contrairement au hero, aux panneaux de la section 01 et a la
     signature, AUCUN texte n'est pose sur l'image : elle occupe sa propre
     colonne, le texte la sienne. L'assombrissement ne protegeait donc
     aucune lisibilite, il etait purement decoratif. On peut remonter bien
     plus haut qu'ailleurs sans rien risquer.

     La carte porte deja son propre voile, pilote par --couvert : c'est lui
     qui assombrit l'image quand la carte passe dessous, et lui seul doit
     s'en charger. */
  filter: saturate(0.82) contrast(1.02) brightness(0.94);
}


/* --- Le bouton de chaque carte ----------------------------------------
   16/09. C'etait un lien texte souligne avec un chevron, au meme poids
   visuel que le corps de texte : rien n'indiquait qu'on pouvait cliquer.
   Il reprend desormais la forme du « Prendre contact » de l'en-tete, qui
   est le bouton le plus visible du site : aplat clair, Unbounded en gras,
   coins doux et tiret devant le libelle.

   Le libelle aussi a change. « Explorer » etait le meme sur les trois
   cartes et ne disait pas ou l'on allait ; chacune annonce maintenant sa
   destination.

   Les regles de boutons.css ne s'appliquaient pas ici : elles visent des
   classes nommees une par une, pas .home-text-link. On redit donc la
   forme, en gardant les memes valeurs pour que les deux boutons soient
   identiques a l'oeil. */
#interventions .home-practice-cta{
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  align-self: flex-start;
  /* Le bouton heritait de l'espacement d'un lien texte, une quinzaine de
     pixels. Sur un aplat, c'est trop serre : le bloc de texte et le bouton
     se lisaient comme un seul pave. */
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  padding: 0.95rem 1.5rem;
  border: 0;
  border-radius: 10px;
  background: var(--bone);
  color: var(--night);
  font-family: "Unbounded", var(--font-body), system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

/* Le tiret, en currentColor : il suit la couleur du libelle au survol. */
#interventions .home-practice-cta::before{
  content: "";
  flex: 0 0 auto;
  inline-size: 1.75rem;
  block-size: 2px;
  background: currentColor;
}

#interventions .home-practice-cta:hover,
#interventions .home-practice-cta:focus-visible{
  background: var(--brass-strong);
  color: var(--night);
}

/* Les descriptions se sont allongees : sans plafond de largeur, elles
   filaient sur toute la colonne et devenaient penibles a lire. */
#interventions .home-practice-copy p{
  max-inline-size: 42ch;
}


/* --- Le chiffre longe toujours le texte --------------------------------
   16/09. Premiere tentative : j'avais aligne le chiffre de la carte 2 sur
   le bord exterieur, pour qu'il soit le miroir des cartes 1 et 3. C'etait
   le mauvais cote.

   La carte 2 place son chiffre dans la colonne de droite, glyphes cales a
   gauche : il touche donc la colonne de texte. Les cartes 1 et 3 le
   placent dans la colonne de gauche, glyphes cales a gauche aussi : il
   part a l'oppose, mesure a 103px du texte.

   La regle retenue est celle de la carte 2 : le chiffre longe le bloc de
   texte, quel que soit le cote. Il suffit donc d'aligner a droite dans la
   colonne de gauche. La carte inversee garde l'alignement par defaut, qui
   produit deja le bon resultat. */
#interventions .home-practice-item:not(.home-practice-item--reverse) .home-practice-index{
  text-align: end;
}

/* --- Mobile -----------------------------------------------------------
   editorial.css desempile les cartes sous 820px : elles redeviennent de
   simples blocs a la suite. Le recul et le voile n'ont alors plus de
   sens, et laisseraient la derniere carte assombrie pour rien. */
@media (max-width: 820px){
  #interventions .home-practice-item{
    position: relative;
    transform: none;
    box-shadow: none;
  }
  #interventions .home-practice-item::after{ opacity: 0; }
  #interventions .home-practice-index{ opacity: 1; transform: none; }
  #interventions .home-practice-copy{ opacity: 1; transform: none; }
  #interventions .home-practice-item figure img{ transform: none; }
}

/* --- Mouvement reduit --------------------------------------------------
   Le JS ne tourne pas dans ce mode : --couvert et --entree gardent leurs
   valeurs de repli, 0 et 1. Les regles ci-dessous seraient donc deja
   neutres, mais on les ecrit pour ne dependre d'aucun repli. */
@media (prefers-reduced-motion: reduce){
  #interventions .home-practice-item{
    transform: none;
    will-change: auto;
  }
  #interventions .home-practice-item::after{ opacity: 0; }
  #interventions .home-practice-index{ opacity: 1; transform: none; }
  #interventions .home-practice-copy{ opacity: 1; transform: none; }
  #interventions .home-practice-item figure img{ transform: none; }
}