/* ==========================================================================
   MDSSUP — Landing « Les Fonctions de Demain : FinTech & Management RH 3.0 »
   Feuille PROPRE À CETTE PAGE. Elle ne touche à aucun sélecteur de style.css :
   toutes les règles sont préfixées `.fd-`, et la page hérite sans modification
   de l'en-tête, du pied et du parcours d'inscription du site.

   PALETTE — or/orange sur noir premium, distincte du néon cyan/violet du site.
   PIÈGE À CONNAÎTRE AVANT TOUTE RETOUCHE : l'or #FFB627 plafonne à 1,8:1 sur
   blanc (le minimum WCAG AA est 4,5:1). Il est donc réservé aux FONDS et aux
   grands aplats ; le texte posé dessus est toujours noir. Pour du texte doré,
   sur fond sombre uniquement, on utilise --fd-or-lisible (11,2:1).
   Le dégradé or→orange n'est JAMAIS appliqué à du texte : un dégradé rend le
   contraste non mesurable, donc non certifiable.
   ========================================================================== */

.fd {
  --fd-encre: #0b0b0c;
  --fd-encre2: #17161a;
  --fd-carte: #131215;
  --fd-trait: #332c1e;
  --fd-or: #ffb627;          /* FOND uniquement */
  --fd-or-lisible: #ffd37a;  /* texte or sur fond noir */
  --fd-orange: #f2760c;
  --fd-craie: #fbfaf7;
  --fd-estompe: #a9a29b;     /* texte secondaire, 7,3:1 sur --fd-encre */
  background: var(--fd-encre);
  color: var(--fd-craie);
}
.fd h1, .fd h2, .fd h3 { margin: 0; }
.fd p, .fd ul, .fd ol, .fd dl { margin: 0; }
.fd ul, .fd ol { list-style: none; padding: 0; }
.fd a { text-decoration: none; }
.fd-inner { max-width: 1180px; margin: 0 auto; padding: 44px 20px; }

/* ---------- Hero ---------- */
.fd-hero { position: relative; overflow: hidden; }
/* Halo doré TRÈS dilué (16 %/10 %) : un aplat or saturé plein cadre vire au
   « site de trading douteux ». La crédibilité premium vient du noir dominant ;
   l'or ne fait que réchauffer les angles. */
.fd-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(60% 70% at 78% 18%, rgba(255, 182, 39, .16), transparent 62%),
    radial-gradient(50% 60% at 18% 88%, rgba(242, 118, 12, .10), transparent 60%);
  background-size: 200% 200%;
  animation: fd-balayage 14s ease-in-out infinite;
}
@keyframes fd-balayage { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.fd-filet { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--fd-or), var(--fd-orange), var(--fd-or)); }

.fd-grille { position: relative; display: grid; gap: 40px; }

.fd-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Orbitron", sans-serif; font-size: 10px; letter-spacing: .18em;
  color: var(--fd-or-lisible); border: 1px solid var(--fd-trait);
  background: var(--fd-carte); padding: 7px 14px; border-radius: 999px;
}
.fd-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--fd-or); }

.fd h1 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 4.2vw, 3.6rem);
  /* Interligne 1.22 et non 1.04 : le fond doré du surlignage est peint sur la
     hauteur de LIGNE, padding vertical compris. Trop serré, les fragments se
     touchent entre eux et mordent sur le paragraphe suivant. C'est la
     contrepartie obligatoire de `box-decoration-break: clone`. */
  line-height: 1.22;
  letter-spacing: -.03em; margin-top: 22px;
  /* Dégage la descente du dernier fragment surligné. */
  padding-bottom: .12em;
}
/* L'accent est un FOND, jamais une couleur de texte : le contraste reste
   mesurable (noir sur or, 12,4:1). `box-decoration-break: clone` conserve le
   padding et les angles sur CHAQUE fragment quand la ligne se coupe en
   mobile — sans lui, la 2ᵉ ligne apparaît tronquée à gauche. */
.fd-surligne {
  background: linear-gradient(90deg, var(--fd-or), var(--fd-orange));
  color: var(--fd-encre); padding: 2px 10px; border-radius: 10px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.fd-lede { color: var(--fd-estompe); font-size: clamp(1rem, .95rem + .4vw, 1.15rem); max-width: 52ch; margin-top: 26px; }

/* Accroche arabe. `lang="ar"` + `dir="rtl"` sont portés par le HTML : sans
   `lang`, une synthèse vocale francophone lit l'arabe en phonèmes français ;
   sans `dir`, le « ! » se place du mauvais côté. Le filet est à DROITE, du
   côté où commence la lecture en RTL. */
.fd-arabe {
  margin-top: 28px; max-width: 46ch; padding-right: 16px;
  border-right: 2px solid var(--fd-or); text-align: right;
  color: var(--fd-or-lisible); font-weight: 600; line-height: 2;
}
.fd-traduction { margin-top: 8px; font-size: .87rem; color: var(--fd-estompe); }

.fd-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.fd-cta-p, .fd-cta-s {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 999px; font-weight: 700;
  /* min-height 48px : cible tactile confortable, recommandation WCAG 2.5.8 */
  min-height: 48px;
}
.fd-cta-p {
  background: linear-gradient(90deg, var(--fd-or), var(--fd-orange));
  color: var(--fd-encre); box-shadow: 0 10px 30px -12px rgba(255, 182, 39, .7);
  transition: transform .3s ease, box-shadow .3s ease;
}
.fd-cta-p:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(255, 182, 39, .85); }
.fd-cta-s { border: 1px solid var(--fd-trait); color: var(--fd-craie); transition: border-color .3s ease, color .3s ease; }
.fd-cta-s:hover { border-color: var(--fd-or); color: var(--fd-or-lisible); }
.fd a:focus-visible { outline: 2px solid var(--fd-or); outline-offset: 3px; }

/* ---------- Tuiles d'annonce (non cliquables à dessein) ---------- */
/* Elles ANNONCENT la dualité ; le choix se fait plus bas. Deux zones cliquables
   menant au même endroit à 600 px d'écart diluent la mesure du taux de clic et
   coûtent deux tabulations pour rien. */
.fd-tuiles { display: grid; gap: 16px; }
.fd-tuile { border: 1px solid var(--fd-trait); background: rgba(19, 18, 21, .8); border-radius: 18px; padding: 20px; transition: border-color .5s ease; }
.fd-tuile:hover { border-color: rgba(255, 182, 39, .5); }
.fd-tuile-tete { display: flex; gap: 12px; align-items: flex-start; }
.fd-tuile-ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; background: rgba(255, 182, 39, .12); color: var(--fd-or-lisible); display: inline-flex; align-items: center; justify-content: center; }
.fd-tuile-ico svg { width: 22px; height: 22px; }
.fd-empile { display: flex; flex-direction: column; gap: 2px; }
.fd-pole { font-family: "Orbitron", sans-serif; font-size: 9px; letter-spacing: .18em; color: var(--fd-estompe); }
.fd-tuile-nom { font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; font-weight: 700; }
.fd-tuile p { margin-top: 12px; font-size: .88rem; color: var(--fd-estompe); }

/* ---------- Section « Double voie » ---------- */
.fd-voies { background: var(--fd-encre2); }
.fd-voies-tete { max-width: 56ch; margin: 0 auto; text-align: center; }
.fd-surtitre { font-family: "Orbitron", sans-serif; font-size: 10px; letter-spacing: .22em; color: var(--fd-or-lisible); }
.fd h2 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.5rem); line-height: 1.1; margin-top: 12px; }
.fd-intro { color: var(--fd-estompe); margin-top: 14px; }

/* Une seule colonne par défaut : sous 760 px, deux colonnes donneraient des
   cartes de 160 px où le titre se casse en quatre lignes. */
.fd-cartes { display: grid; gap: 20px; margin-top: 44px; }

.fd-carte {
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  background: var(--fd-carte); border: 1px solid var(--fd-trait);
  border-radius: 28px; padding: 26px;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), border-color .5s ease, box-shadow .5s ease;
}
.fd-carte::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 160px; opacity: 0;
  transition: opacity .5s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.fd-carte:hover::before, .fd-carte:focus-within::before { opacity: 1; }
.fd-carte--fin::before { background: rgba(255, 182, 39, .12); }
.fd-carte--rh::before  { background: rgba(242, 118, 12, .14); }
.fd-carte--fin:hover, .fd-carte--fin:focus-within { transform: translateY(-6px); border-color: rgba(255, 182, 39, .55); box-shadow: 0 28px 60px -32px rgba(255, 182, 39, .55); }
.fd-carte--rh:hover,  .fd-carte--rh:focus-within  { transform: translateY(-6px); border-color: rgba(242, 118, 12, .55); box-shadow: 0 28px 60px -32px rgba(242, 118, 12, .55); }
.fd-carte-corps { position: relative; }

.fd-carte-haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fd-grosse-ico { width: 56px; height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; }
.fd-grosse-ico svg { width: 28px; height: 28px; }
.fd-carte--fin .fd-grosse-ico { background: rgba(255, 182, 39, .12); color: var(--fd-or-lisible); }
.fd-carte--rh  .fd-grosse-ico { background: rgba(242, 118, 12, .14); color: #ffc07a; }
.fd-carte h3 { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); margin-top: 20px; }
.fd-carte-sous { font-weight: 600; margin-top: 8px; }
.fd-carte--fin .fd-carte-sous { color: var(--fd-or-lisible); }
/* Le pôle RH reçoit l'accent le plus CHAUD : compensation perceptuelle, le
   jaune domine naturellement l'orange. Sans cet ajustement, l'œil désigne un
   « vrai » parcours et un « autre », et la RH perd. */
.fd-carte--rh .fd-carte-sous { color: #ffc07a; }
.fd-carte-texte { color: var(--fd-estompe); margin-top: 16px; }

/* Badge d'honnêteté : porté par la carte FinTech tant que la filière n'est pas
   au catalogue officiel. Voir le commentaire dans le HTML. */
.fd-badge {
  display: inline-block; margin-top: 14px; padding: 5px 12px; border-radius: 999px;
  border: 1px dashed rgba(255, 182, 39, .55); background: rgba(255, 182, 39, .08);
  color: var(--fd-or-lisible); font-size: .78rem; font-weight: 600;
}

/* ------------------------------------------------------------------
   RÉVÉLATION DES COMPÉTENCES — les trois chemins d'accès.
   `grid-template-rows: 0fr → 1fr` s'anime sur la hauteur RÉELLE du
   contenu : pas de hauteur devinée, donc pas de texte coupé ni de
   transition qui « traîne » sur du vide.
   L'enfant porte `overflow: hidden`, sans quoi le contenu déborde d'une
   piste de hauteur nulle et reste visible.
   ------------------------------------------------------------------ */
.fd-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.22, .61, .36, 1); margin-top: 18px; }
.fd-reveal > div { overflow: hidden; }
.fd-carte:hover .fd-reveal { grid-template-rows: 1fr; }
/* CLAVIER : tabuler jusqu'au lien de la carte l'ouvre, exactement comme le
   survol. Sans cette règle, un utilisateur clavier ne voit jamais le contenu. */
.fd-carte:focus-within .fd-reveal { grid-template-rows: 1fr; }

.fd-comp-titre { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fd-estompe); }
.fd-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fd-puces li {
  border: 1px solid var(--fd-trait); border-radius: 999px; padding: 6px 14px;
  font-size: .84rem; color: var(--fd-craie);
  opacity: 0; transform: translateY(4px);
  transition: opacity .5s ease, transform .5s ease;
}
.fd-carte:hover .fd-puces li, .fd-carte:focus-within .fd-puces li { opacity: 1; transform: none; }
/* Cascade de 60 ms : l'œil suit l'ordre de lecture au lieu de recevoir quatre
   puces d'un bloc. Au-delà de ~80 ms, l'effet devient une attente. */
.fd-puces li:nth-child(1) { transition-delay: .08s; }
.fd-puces li:nth-child(2) { transition-delay: .14s; }
.fd-puces li:nth-child(3) { transition-delay: .20s; }
.fd-puces li:nth-child(4) { transition-delay: .26s; }

.fd-debouches { margin-top: 18px; border-top: 1px solid var(--fd-trait); padding-top: 16px; font-size: .88rem; color: var(--fd-estompe); }
.fd-debouches b { color: var(--fd-craie); }

.fd-carte-liens { position: relative; margin-top: auto; padding-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.fd-lien-p { background: var(--fd-or); color: var(--fd-encre); font-weight: 700; padding: 12px 22px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; transition: filter .3s ease; }
.fd-lien-p:hover { filter: brightness(1.08); }
.fd-lien-s { border: 1px solid var(--fd-trait); color: var(--fd-craie); font-weight: 600; padding: 12px 22px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; transition: border-color .3s ease; }
.fd-lien-s:hover { border-color: var(--fd-or); }

.fd-secours { margin-top: 38px; text-align: center; color: var(--fd-estompe); }
.fd-secours a { color: var(--fd-or-lisible); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 182, 39, .4); text-underline-offset: 4px; }

/* ==========================================================================
   POINTS DE RUPTURE — mobile-first : tout ce qui précède est l'état mobile.
   ========================================================================== */
@media (min-width: 620px) {
  .fd-ctas { flex-direction: row; }
  .fd-tuiles { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) {
  /* Les deux cartes passent côte à côte. `align-items: stretch` (défaut de
     grid) + `height: 100%` sur la carte = hauteurs strictement égales, quelle
     que soit la longueur des textes. C'est la condition de l'égalité de
     traitement des deux filières. */
  .fd-cartes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .fd-inner { padding: 76px 32px; }
  .fd-grille { grid-template-columns: 7fr 5fr; gap: 52px; }
  .fd-tuiles { grid-template-columns: 1fr; }
}

/* TACTILE : aucun survol n'existe. Le contenu « révélé » est donc déplié en
   permanence — on ne demande jamais « touchez pour révéler ». */
@media (hover: none) {
  .fd-reveal { grid-template-rows: 1fr; }
  .fd-puces li { opacity: 1; transform: none; }
  .fd-carte::before { opacity: 1; }
}

/* MOUVEMENT RÉDUIT : on livre l'ÉTAT FINAL, on ne fige pas l'état replié.
   Une carte gelée fermée donnerait l'impression d'une page cassée. */
@media (prefers-reduced-motion: reduce) {
  .fd-hero::before { animation: none; }
  .fd-reveal { grid-template-rows: 1fr; transition: none; }
  .fd-puces li { opacity: 1; transform: none; transition: none; }
  .fd-carte, .fd-cta-p, .fd-tuile { transition: none; }
  .fd-carte:hover, .fd-carte:focus-within, .fd-cta-p:hover { transform: none; }
}