/* ==========================================================================
   service-card.css — .lba-service-card

   Carte de service de la Home : une photo, un titre toujours visible, une
   description et un bouton « Voir plus » reveles au survol.
   CSS pur, zero JS.

   ⚠️ DEUX PARTIS PRIS STRUCTURANTS :

   1. `opacity` / `visibility` au lieu de `display`. Un element en
      `display: none` ne transitionne pas : combiner `display: none` et
      `transform: translateY(200px)` empeche l'animation d'entree de jouer.

   2. La CARTE ENTIERE est cliquable. Si seul le bouton portait le lien, et
      que ce bouton n'apparait qu'au survol, aucune des 4 pages services ne
      serait atteignable en tactile (0/4). Le lien enveloppe donc toute la
      carte, et le « bouton » devient un `<span>` decoratif. Le rendu a la
      souris est inchange.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Grille des 4 cartes
   --------------------------------------------------------------------------
   Une grille de 4 colonnes egales, qui se replie proprement aux paliers :
   2 colonnes sous 991px, une seule sous 600px.
   -------------------------------------------------------------------------- */

.lba-service-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lba-gap);
  margin-top: var(--lba-gap);
}

@media screen and (max-width: 991px) {
  .lba-service-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .lba-service-cards {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   2. La carte
   --------------------------------------------------------------------------
   Hauteur de reference par palier : 500px, 400 (<=1400), 380 (<=1200),
   500 (<=991), 400 (<=600) — voir §7 pour les ajustements. L'image occupe
   tout l'espace que le bloc de contenu lui laisse.

   `.lba-service-card` est un <a> : les proprietes de lien sont neutralisees
   ici, chaque element interne portant sa propre couleur.
   -------------------------------------------------------------------------- */

.lba-service-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 500px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   3. Vignette
   --------------------------------------------------------------------------
   Hauteur FIXE a 371px, et non `flex: 1` : la hauteur de la vignette ne depend
   ainsi PAS de la longueur du titre. En `flex: 1`, les 4 cartes obtiennent des
   vignettes inegales (438/412/412/386px mesures).

   Au survol, la vignette est ramenee a 250px, ce qui libere la place du texte
   revele. `flex-basis` est anime en meme temps que `height` : sur un enfant
   flex, c'est la base qui commande, et la transition est alors continue.
   -------------------------------------------------------------------------- */

/* ⭐ L'IMG PORTE SA PROPRE TRANSITION — c'est elle qui produit l'effet de
   « stretch » : l'image, en `height:100%` + `object-fit:cover`, est comprimee
   en direct pendant que le conteneur passe de 371 a 250px. Sans transition sur
   l'img, le recadrage est instantane et l'animation parait saccadee. */
/* ⏱️ TOUT BOUGE EN MEME TEMPS — ne pas sequencer par des delais.
   Si la vignette et le texte n'ont pas la MEME duree, l'image rattrape un texte
   encore visible et vient taper le libelle. Des delais de sequencement corrigent
   la collision mais se voient : ils ajoutent une latence percue. La cause reelle
   est l'ECART de duree, pas l'absence de sequencement. En donnant a l'image et au
   texte la meme duree (250ms) sans aucun delai, ils progressent au meme rythme —
   l'image ne peut plus rattraper le texte, dans un sens comme dans l'autre.
   ⚠️ Une duree plus courte (100ms) rend l'effet brutal ; 250ms est la valeur
   retenue. */
.lba-service-card__thumb {
  flex: 0 0 371px;
  height: 371px;
  min-height: 0;
  transition: height 250ms ease-in-out, flex-basis 250ms ease-in-out;
}

.lba-service-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: height 100ms linear;
}

.lba-service-card:hover .lba-service-card__thumb,
.lba-service-card:focus-visible .lba-service-card__thumb {
  flex: 0 0 250px;
  height: 250px;
}


/* --------------------------------------------------------------------------
   4. Bloc de contenu
   -------------------------------------------------------------------------- */

/* ⚠️ NE PAS ecrire `height: 100%` sur ce bloc : il prendrait une base egale a
   la carte entiere. Cela ne se verrait pas si la description et le bouton
   etaient en `display: none`, donc hors flux — mais ici ils restent dans le
   flux (voir §5), et le bloc noir occuperait alors les deux tiers de la carte
   au lieu du quart attendu.

   ⭐ `flex: 1`, et non une hauteur figee : la vignette etant fixee a 371px
   (§3), ce bloc prend simplement le reste — 500-371 = 129px, identique pour
   les 4 cartes quelle que soit la longueur du titre. */
.lba-service-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1rem;
  background: var(--secondary);
  color: var(--white);
  overflow: hidden;
}

.lba-service-card__title {
  margin: 0;
  color: var(--white);
  font-size: 22px;
  font-weight: var(--lba-font-weight-bold);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

/* Aligne a gauche : le `center` du bloc de contenu ne porte que sur le titre,
   lui-meme centre explicitement. La description reprend l'alignement a gauche. */
.lba-service-card__text {
  width: 100%;
  margin: 0;
  color: var(--text);
  text-align: left;
}


/* --------------------------------------------------------------------------
   5. Revelation au survol
   --------------------------------------------------------------------------
   Description et bouton montent de 200px. `visibility` complete `opacity` : au
   repos, les deux elements sont retires du parcours clavier et des lecteurs
   d'ecran — le titre et le lien de la carte suffisent a la comprehension.

   `:focus-visible` sur la carte declenche la meme revelation : un visiteur au
   clavier voit ce qu'un visiteur a la souris voit.

   Au repos, les deux elements ne doivent occuper AUCUNE hauteur, sans quoi le
   bloc noir s'etendrait pour les contenir. `display: none` y parviendrait, mais
   au prix de l'animation, qui ne jouerait jamais. On passe donc par
   `max-height: 0` + `margin/padding` nuls : l'element reste dans le flux —
   donc animable — mais ne mesure rien. `overflow: hidden` sur le bloc de
   contenu empeche tout debordement pendant la transition.
   -------------------------------------------------------------------------- */

/* MEME duree que la vignette (250ms) et AUCUN delai : c'est ce qui empeche la
   collision, pas un sequencement. Voir §3.
   Le `transform: translateY(200px)` donne l'effet de glissement. */
.lba-service-card__text,
.lba-service-card__button {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(200px);
  transition: max-height 250ms ease-in-out,
              opacity 250ms ease-in-out,
              transform 250ms ease-in-out,
              visibility 0s linear 250ms;
}

/* Le `gap` du bloc s'appliquerait meme a des elements de hauteur nulle : il
   est annule au repos et retabli au survol, pour que le titre reste centre. */
.lba-service-card:not(:hover):not(:focus-visible) .lba-service-card__content {
  gap: 0;
}


.lba-service-card:hover .lba-service-card__text,
.lba-service-card:hover .lba-service-card__button,
.lba-service-card:focus-visible .lba-service-card__text,
.lba-service-card:focus-visible .lba-service-card__button {
  max-height: 120px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: max-height 250ms ease-in-out,
              opacity 250ms ease-in-out,
              transform 250ms ease-in-out,
              visibility 0s;
}


/* --------------------------------------------------------------------------
   6. Bouton « Voir plus »
   --------------------------------------------------------------------------
   `<span>` et non `<a>` : c'est la carte entiere qui porte le lien (voir
   l'en-tete). Le bouton reste le repere visuel de l'action, avec son etat de
   survol, mais il n'est plus un point de clic distinct — ce qui evite un lien
   imbrique dans un lien, invalide en HTML.
   -------------------------------------------------------------------------- */

.lba-service-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 158px;
  border: 2px solid var(--primary-color);
  border-radius: var(--lba-radius);
  background: var(--primary-color);
  color: var(--white);
  font-size: 16px;
  font-weight: var(--lba-font-weight-bold);
  line-height: 50px;
}

/* Inversion (fond blanc, texte rouge) au survol du bouton LUI-MEME : c'est un
   second niveau de retour, distinct de la revelation de la carte. ⚠️ Ne pas la
   rattacher au survol de la CARTE : le bouton s'afficherait alors en permanence
   dans son etat inverse, alors qu'il doit apparaitre rouge plein.

   `.lba-service-card__button` etant un <span>, `:hover` s'y applique
   normalement ; seul le clic reste porte par la carte entiere. */
.lba-service-card__button:hover,
.lba-service-card:focus-visible .lba-service-card__button {
  background: var(--white);
  color: var(--primary-color);
}


/* --------------------------------------------------------------------------
   7. Paliers
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1400px) {

  /* ⚠️ `height: auto` + `min-height`, et NON une hauteur fixe.
     Une carte figee a 400px (puis 380px a <=1200) tout en gardant la vignette
     a 371px ne laisse que 29px (puis 9px) au bloc noir : le TITRE Y EST COUPE,
     masque par l'`overflow: hidden`. Avec `min-height`, la carte s'adapte a son
     titre, les 4 restent de meme hauteur (grille) et la vignette garde ses
     371px. Meme parti pris a <=600px. */
  .lba-service-card {
    height: auto;
    min-height: 400px;
  }

  .lba-service-card__title {
    font-size: 20px;
  }


  .lba-service-card:hover .lba-service-card__thumb,
  .lba-service-card:focus-visible .lba-service-card__thumb {
    flex-basis: 200px;
    height: 200px;
  }
}

@media screen and (max-width: 1200px) {

  /* Meme parti pris qu'a <=1400 (voir ci-dessus) : 380px fixes ne laisseraient
     que 9px au bloc noir. */
  .lba-service-card {
    height: auto;
    min-height: 380px;
  }

  .lba-service-card:hover .lba-service-card__thumb,
  .lba-service-card:focus-visible .lba-service-card__thumb {
    flex-basis: 190px;
    height: 190px;
  }
}

@media screen and (max-width: 991px) {

  .lba-service-card {
    height: 500px;
  }

  .lba-service-card__thumb {
    max-height: 400px;
  }

  .lba-service-card:hover .lba-service-card__thumb,
  .lba-service-card:focus-visible .lba-service-card__thumb {
    flex-basis: 250px;
    height: 250px;
  }
}

@media screen and (max-width: 600px) {

  /* `height: auto` + `min-height`. La vignette etant fixee a 371px (§3), une
     carte de hauteur fixe a 400px ne laisserait que 29px au bloc noir — le
     titre n'y tiendrait pas. On laisse donc la carte grandir. */
  .lba-service-card {
    height: auto;
    min-height: 450px;
  }

  .lba-service-card:hover .lba-service-card__thumb,
  .lba-service-card:focus-visible .lba-service-card__thumb {
    flex-basis: 190px;
    height: 190px;
  }
}


/* --------------------------------------------------------------------------
   8. Appareils sans survol
   --------------------------------------------------------------------------
   `hover: none` cible les ecrans tactiles, ou le survol n'existe pas : la
   carte y afficherait indefiniment son seul titre. Description et bouton sont
   donc montres d'emblee, et la vignette prend sa hauteur reduite.

   La carte etant entierement cliquable, la page reste atteignable meme si ce
   bloc ne s'applique pas : c'est une amelioration de lisibilite, pas la
   condition d'acces a la page.
   -------------------------------------------------------------------------- */

@media (hover: none) {

  .lba-service-card__thumb {
    flex: 0 0 250px;
    height: 250px;
  }

  .lba-service-card__text,
  .lba-service-card__button {
    max-height: 120px;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .lba-service-card:not(:hover):not(:focus-visible) .lba-service-card__content {
    gap: 10px;
  }
}


/* --------------------------------------------------------------------------
   9. Cartes verrouillees — `.lba-service-card--locked`
   --------------------------------------------------------------------------
   Fige la carte dans son etat de repos : elle ne REAGIT PLUS AU SURVOL, donc
   ni la description ni le bouton ne sont jamais reveles.

   ⭐ LE LIEN `href` EST CONSERVE : le verrou porte sur le survol, pas sur le
   lien. Une carte qui ne s'ouvre pas n'affiche ni description ni bouton, donc
   il n'y a plus rien a cliquer — et la reactivation ne demande QU'UN SEUL
   geste (retirer cette classe), au lieu de deux. Meme logique que
   `submenu-locked` du header : on bloque l'ouverture, on garde le mecanisme
   intact dessous.
   ⚠️ Le parcours clavier n'est pas traite : la carte reste focusable.

   BLOC PLACE EN FIN DE FICHIER a dessein : les paliers §7 et le bloc tactile §8
   redefinissent l'etat de survol a plusieurs largeurs. A specificite egale,
   c'est la derniere regle qui gagne — d'ou cette position, et non le §5.

   ⚠️ Le §8 `@media (hover: none)` est le piege : sur ecran TACTILE il affiche la
   description et le bouton EN PERMANENCE, sans aucun survol. Sans les regles
   ci-dessous, le verrou ne tiendrait pas sur mobile.

   🔓 REVERSIBLE EN UNE LIGNE : retirer `--locked` de la carte a rouvrir.
   -------------------------------------------------------------------------- */

/* Etat verrouille = etat de repos, a toutes les largeurs et sur tout support. */
.lba-service-card--locked .lba-service-card__thumb,
.lba-service-card--locked:hover .lba-service-card__thumb,
.lba-service-card--locked:focus-visible .lba-service-card__thumb {
  flex: 0 0 371px;
  height: 371px;
}

.lba-service-card--locked .lba-service-card__text,
.lba-service-card--locked .lba-service-card__button,
.lba-service-card--locked:hover .lba-service-card__text,
.lba-service-card--locked:hover .lba-service-card__button,
.lba-service-card--locked:focus-visible .lba-service-card__text,
.lba-service-card--locked:focus-visible .lba-service-card__button {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(200px);
}

.lba-service-card--locked .lba-service-card__content {
  gap: 0;
}

/* Le clic ne doit rien declencher : le `href` est conserve pour la
   reactivation, mais il reste inatteignable a la souris. */
.lba-service-card--locked {
  cursor: default;
  pointer-events: none;
}

/* ⚠️ Aucune surcharge par palier n'est necessaire : les §7 ne redefinissent que
   l'etat de SURVOL (`:hover` / `:focus-visible`), jamais le repos. La vignette
   vaut donc 371px a toute largeur — verifie ligne par ligne dans les 3 paliers
   (1400, 1200, 991, 600). Le `max-height: 400px` de <=991px ne la rogne pas. */