/* ============================================================================
   CARTES MÉTIER — plus grandes, plus vivantes, et qui montrent leurs options
   ----------------------------------------------------------------------------
   Va avec js/metiers-cartes.js (l'information) et js/magnetique.js (le
   mouvement). Demande de Matt du 2026-08-06 : « je veux que ce soit un effet
   wow, que les boutons bougent et se fixent sur la souris. Trouve une nouvelle
   manière de mettre les différentes cases de métier et de les choisir, je
   voudrais qu'elles soient plus grosses et interactives avec les options,
   comme maintenant mais en mieux. »

   CHARGÉ APRÈS css/wow.css : à spécificité égale, c'est la dernière règle lue
   qui gagne. Déplacer ce lien plus haut annulerait la moitié du fichier.

   LA CONTRAINTE QUI GOUVERNE TOUT LE RESTE. Un globe 3D occupait cette place
   jusqu'au 2026-08-05 : il a été désactivé après mesure parce qu'on ne pouvait
   ni lire ni parcourir les métiers. « On voit rien et on y comprend rien. »
   Donc ici : la grille reste une grille, l'ordre reste stable, et rien ne se
   déplace tant que le curseur n'est pas là. On ajoute de la matière et de la
   réaction, pas du désordre.
   ========================================================================== */

/* ── L'AIMANT ──────────────────────────────────────────────────────────────
   On écrit `translate`, jamais `transform` : `transform` sert déjà au
   translateY(-3px) du survol et à l'inclinaison 3D de js/wow.js. `translate`
   est une propriété CSS indépendante, les trois effets s'additionnent au lieu
   de s'écraser. Le jour où quelqu'un « simplifie » ceci en transform, le
   survol des cartes cesse de fonctionner — c'est écrit ici pour cette raison.

   Valeurs de repli à 0 : si les variables n'existent pas (script absent,
   mouvement réduit, écran tactile), rien ne bouge et rien ne casse. */
.btn, .ticket-cta, .metier-card, .option-card, .price-card {
  translate: var(--mag-x, 0) var(--mag-y, 0);
  transition: translate .34s cubic-bezier(.22, 1, .36, 1);
}
/* Accroché au curseur : le retour à la place doit être lent et souple, mais le
   suivi doit être quasi immédiat — sinon l'effet ne se lit pas comme un aimant
   mais comme un retard d'affichage. */
.mag-actif { transition-duration: .13s; }

/* ── LA GRILLE ─────────────────────────────────────────────────────────────
   `auto-fill` + minmax plutôt qu'un nombre fixe de colonnes : les cartes
   grandissent, donc 4 colonnes ne tiennent plus sur un portable. La grille
   choisit elle-même 4, 3, 2 ou 1 colonne selon la place réelle, et les points
   de rupture en dur plus bas dans la page n'ont plus à deviner. */
.metier-grid {
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 18px;
}
@media (max-width: 1000px) { .metier-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
@media (max-width: 560px)  { .metier-grid { grid-template-columns: 1fr; } }

/* ── LA CARTE ──────────────────────────────────────────────────────────────
   Plus grosse : 22/24 px de marge intérieure au lieu de 16/18, et une hauteur
   minimale pour que les quatorze cartes forment des rangées régulières même
   quand les promesses font une ligne de plus. Une grille irrégulière se
   parcourt mal — c'est déjà ce qui avait été reproché au globe. */
.metier-card {
  padding: 22px 24px 20px;
  min-height: 168px;
  gap: 7px;
  border-radius: 16px;
  justify-content: flex-start;
}

/* Le halo qui suit le curseur. --mx/--my sont posées par js/magnetique.js.
   `radial-gradient` sur un pseudo-élément plutôt que sur le fond de la carte :
   le fond porte déjà le dégradé de l'état choisi, et les deux se seraient
   annulés. `inset:0` + `z-index:0` le placent SOUS le texte, jamais dessus. */
.metier-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
              rgba(77, 210, 255, 0.16), transparent 62%);
}
.metier-card:hover::after, .metier-card:focus-visible::after { opacity: 1; }
/* Le contenu passe au-dessus du halo. Sans ça le dégradé lave le texte. */
.metier-card > * { position: relative; z-index: 1; }

.metier-card .metier-nom { font-size: 1.04rem; }
.metier-card .metier-promesse { font-size: 0.86rem; opacity: 0.75; }

/* Le focus clavier doit se voir autant que le survol : la grille se parcourt
   aux flèches depuis le 2026-08-06 (js/metiers-cartes.js). Un anneau de focus
   invisible rendrait cette navigation inutilisable. */
.metier-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── CE QUE CONTIENT LE MÉTIER ─────────────────────────────────────────────
   « 3 formules · 4 options ». Compté dans la page à l'exécution, jamais écrit
   en dur — voir js/metiers-cartes.js. Poussé en bas de carte par margin-top
   auto, pour que la ligne s'aligne d'une carte à l'autre quelle que soit la
   longueur de la promesse. */
.metier-meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  letter-spacing: .02em;
  opacity: .62;
  transition: opacity .25s, color .25s;
}
.metier-meta b { font-weight: 700; font-size: 0.92rem; color: var(--paper); }
.metier-meta-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .55; flex: 0 0 auto;
}
.metier-card:hover .metier-meta { opacity: .85; }
.metier-card.actif .metier-meta { opacity: 1; }
.metier-card.actif .metier-meta b { color: var(--gold-bright); }

/* ── LES OPTIONS, SUR LA CARTE CHOISIE SEULEMENT ───────────────────────────
   C'est le « interactives avec les options » de la demande. Ouvrir les
   quatorze cartes en même temps reproduirait exactement le défaut du globe :
   trop de texte, plus rien de lisible. Une seule s'ouvre — celle qu'on a
   choisie — et elle raconte ce qu'on obtient.

   grid-template-rows 0fr → 1fr : la seule façon d'animer une hauteur INCONNUE
   sans la coder en dur. Un max-height fixe couperait la liste du métier qui a
   le plus d'options (7 chez restaurant) ou laisserait un trou chez ceux qui en
   ont une. */
.metier-options {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.22, 1, .36, 1), opacity .3s;
  opacity: 0;
  overflow: hidden;
}
.metier-card.actif .metier-options { grid-template-rows: 1fr; opacity: 1; }
/* L'enveloppe est l'UNIQUE enfant de la grille, et elle doit avoir
   min-height:0, sinon la piste refuse de se replier et la carte reste ouverte.
   Piège classique de cette technique.
   C'est aussi elle qui met les puces côte à côte : mises directement dans la
   grille, chacune prenait sa propre rangée — défaut mesuré à la capture du
   2026-08-06, 7 puces sur 7 lignes chez restaurant. */
.metier-puces {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.metier-card.actif .metier-options { padding-top: 12px; }

.metier-puce {
  padding: 4px 10px 5px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.3;
  color: var(--paper);
  background: rgba(255, 106, 61, 0.13);
  border: 1px solid rgba(255, 106, 61, 0.34);
}

/* ── L'ÉTAT CHOISI ─────────────────────────────────────────────────────────
   Il était déjà marqué (barre à gauche, fond teinté, halo) : la remarque « la
   sélection se fait mal » avait été traitée le 2026-08-05. On ne refait pas ce
   travail, on l'amplifie — la carte choisie se soulève franchement et son halo
   porte plus loin, pour rester repérable d'un coup d'œil dans une grille de
   quatorze. */
.metier-card.actif {
  box-shadow: 0 0 0 1px var(--gold), 0 26px 54px -20px rgba(255, 106, 61, 0.62);
}
.metier-card.actif::before { width: 5px; }

/* Le mouvement réduit coupe l'aimant côté JS ; ici on coupe aussi les
   transitions, sinon les cartes continuent de glisser à l'ouverture des
   options. Défaut relevé chez Oryzo le 2026-08-06 : zéro occurrence de
   prefers-reduced-motion dans toute la page. On ne fait pas pareil. */
@media (prefers-reduced-motion: reduce) {
  .btn, .ticket-cta, .metier-card, .option-card, .price-card { transition: none; translate: none; }
  .metier-options { transition: none; }
  .metier-card::after { transition: none; }
}