/* ============================================================
   RECRUTEMENT — PAGE DE GARDE PRO / CDF (js/pages/recrutement-accueil.js)
   ============================================================
   Deux identités : Pro (le stade, le bleu et l'or du club), CDF (les cinq
   couleurs des pages du Recrutement CDF). La porte survolée s'élargit. */

.ra { --pro: #8fb3ff; --cdf-1: #FF7A59; --cdf-2: #FFC061; --cdf-3: #4D8DFF; --cdf-4: #A98BFF; --cdf-5: #50E3B5; }
.ra-tete { margin: 8px 0 26px; text-align: center; }
.ra-sur { font-size: 11.5px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--texte-2); }
/* La place de l'accent au-dessus des capitales (fond découpé sur le texte). */
.ra-t { margin: 4px 0 6px; padding-top: .14em; font: 600 clamp(44px, 7vw, 92px)/.92 var(--titre); text-transform: uppercase;
  background: linear-gradient(180deg, #fff 40%, #a9c4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ra-ss { margin: 0; font-size: clamp(13px, 1.5vw, 17px); font-weight: 300; letter-spacing: .26em; text-transform: uppercase; color: rgba(238, 243, 255, .85); }

.ra-portes { display: flex; gap: 18px; min-height: 640px; }
.ra-porte {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate; border-radius: 30px; border: 1px solid var(--ligne-2);
  transition: flex-grow .7s var(--doux), box-shadow .5s, border-color .4s, opacity .7s var(--doux), transform .7s var(--doux);
}
.ra-portes:hover .ra-porte { flex-grow: .82; }
.ra-portes .ra-porte:hover { flex-grow: 1.3; }

.ra-porte.est-pro {
  background: linear-gradient(180deg, rgba(6, 16, 46, .72), rgba(4, 10, 30, .9) 46%, #040a1e), url("/media/marque/stade.webp") center 30% / cover no-repeat, #06122e;
  box-shadow: 0 50px 120px -60px rgba(47, 107, 255, .8);
}
.ra-porte.est-pro:hover { border-color: rgba(245, 196, 81, .55); }
.ra-porte.est-cdf {
  background: radial-gradient(120% 80% at 50% 115%, rgba(255, 122, 89, .16), transparent 60%), linear-gradient(170deg, #130e2b, #08061c 60%, #050414);
  box-shadow: 0 50px 120px -60px rgba(255, 122, 89, .55);
}
.ra-porte.est-cdf:hover { border-color: rgba(255, 154, 122, .6); }

/* Les halos : de simples dégradés qui dérivent (rien à recalculer). */
.ra-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ra-fond i { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; will-change: transform; animation: ra-derive 20s ease-in-out infinite alternate; }
.est-pro .ra-fond i { left: 50%; bottom: -45%; width: 130%; margin-left: -65%; background: radial-gradient(closest-side, rgba(245, 196, 81, .22), transparent); animation-duration: 14s; }
.est-cdf .ra-fond i:nth-child(1) { left: -18%; top: -22%; background: radial-gradient(circle, rgba(255, 122, 89, .42), transparent 62%); }
.est-cdf .ra-fond i:nth-child(2) { right: -20%; top: -10%; background: radial-gradient(circle, rgba(255, 192, 97, .3), transparent 62%); animation-duration: 24s; animation-direction: alternate-reverse; }
.est-cdf .ra-fond i:nth-child(3) { left: -12%; bottom: -26%; background: radial-gradient(circle, rgba(77, 141, 255, .36), transparent 62%); animation-duration: 26s; }
.est-cdf .ra-fond i:nth-child(4) { right: -22%; bottom: -18%; background: radial-gradient(circle, rgba(169, 139, 255, .36), transparent 62%); animation-duration: 22s; animation-direction: alternate-reverse; }
.est-cdf .ra-fond i:nth-child(5) { left: 30%; top: 30%; width: 44%; background: radial-gradient(circle, rgba(80, 227, 181, .2), transparent 62%); animation-duration: 30s; }
@keyframes ra-derive { to { transform: translate3d(10%, 8%, 0) scale(1.1); } }

.ra-filigrane {
  position: absolute; z-index: -1; right: -.05em; bottom: -.16em; font: 600 clamp(150px, 18vw, 280px)/.8 var(--titre); letter-spacing: -.02em;
  color: transparent; pointer-events: none; transition: transform .9s var(--doux), opacity .5s;
}
.est-pro .ra-filigrane { -webkit-text-stroke: 2px rgba(245, 196, 81, .16); }
.est-cdf .ra-filigrane { background: linear-gradient(90deg, var(--cdf-1), var(--cdf-2), var(--cdf-5), var(--cdf-3), var(--cdf-4)); -webkit-background-clip: text; background-clip: text; opacity: .12; }
.ra-porte:hover .ra-filigrane { transform: translate3d(-5%, -3%, 0); }
.est-cdf:hover .ra-filigrane { opacity: .2; }

.ra-corps { position: relative; display: flex; flex-direction: column; gap: 18px; height: 100%; padding: clamp(22px, 3vw, 36px); }
.ra-embleme { width: 78px; height: 78px; animation: flotte 5s ease-in-out infinite; }
.est-pro .ra-embleme img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 36px rgba(47, 107, 255, .6)); }
.est-cdf .ra-embleme { padding: 2px; border-radius: 24px; background: conic-gradient(from 200deg, var(--cdf-1), var(--cdf-2), var(--cdf-5), var(--cdf-3), var(--cdf-4), var(--cdf-1)); box-shadow: 0 18px 40px -14px rgba(255, 122, 89, .7); animation-delay: -2.5s; }
.est-cdf .ra-embleme svg { display: block; width: 100%; height: 100%; padding: 17px; border-radius: 22px; color: #fff; background: #0e0b24; }

.ra-id small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--texte-3); }
/* En ligne : le dégradé couvre le mot, pas toute la largeur de la porte. */
.ra-id b { display: inline-block; padding-top: .06em; font: 600 clamp(58px, 6.6vw, 96px)/.88 var(--titre); letter-spacing: .02em; text-transform: uppercase; -webkit-background-clip: text; background-clip: text; color: transparent; }
.est-pro .ra-id b { background-image: linear-gradient(180deg, #fff 30%, #f5d27a); }
.est-cdf .ra-id b { background-image: linear-gradient(90deg, var(--cdf-1), var(--cdf-2) 30%, var(--cdf-5) 55%, var(--cdf-3) 78%, var(--cdf-4)); }
.ra-id span { display: block; margin-top: 8px; font-size: 14px; letter-spacing: .04em; color: var(--texte-2); }

.ra-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .08); }
.ra-chiffres > div { min-width: 0; padding: 12px 12px; background: rgba(5, 10, 28, .74); }
.ra-chiffres b { display: block; font: 600 clamp(24px, 2.4vw, 34px)/1 var(--titre); color: #fff; }
.ra-chiffres span { display: block; margin-top: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; color: var(--texte-2); }
.ra-chiffres small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.3; color: var(--texte-3); }
.est-pro .ra-chiffres > div:first-child b { color: var(--or); }
.est-cdf .ra-chiffres > div:nth-child(1) b { color: var(--cdf-1); }
.est-cdf .ra-chiffres > div:nth-child(2) b { color: var(--cdf-2); }
.est-cdf .ra-chiffres > div:nth-child(3) b { color: var(--cdf-5); }
/* France : le bleu de sa page dans le Recrutement CDF. */
.est-cdf .ra-chiffres > div:nth-child(4) b { color: var(--cdf-3); }
.ra-attente { margin: 0; padding: 14px 16px; border-radius: 16px; font-size: 13px; line-height: 1.5; color: var(--texte-2); background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .18); }

.ra-liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ra-liens a {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; font-weight: 700; color: var(--texte);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: background .25s, border-color .25s, transform .3s var(--ressort);
}
.ra-liens a span { min-width: 0; line-height: 1.25; }
.ra-liens a svg { flex: none; width: 18px; height: 18px; color: var(--pro); }
.ra-liens a:hover { transform: translate3d(0, -2px, 0); background: rgba(47, 107, 255, .18); border-color: rgba(143, 179, 255, .45); }
.ra-liens.est-cdf a i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.ra-liens.est-cdf a small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 600; color: var(--texte-3); }
.ra-liens.est-cdf a:hover { background: color-mix(in srgb, var(--c) 16%, transparent); border-color: color-mix(in srgb, var(--c) 55%, transparent); }

.ra-entrer { display: inline-flex; align-items: center; gap: 12px; margin-top: auto; align-self: flex-start; padding: 10px 10px 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: .02em; transition: transform .35s var(--ressort), box-shadow .35s; }
.ra-entrer i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .16); }
.ra-entrer svg { width: 18px; height: 18px; }
.ra-entrer:hover { transform: translate3d(4px, 0, 0); }
.est-pro .ra-entrer { color: #0b1d48; background: linear-gradient(90deg, #f5c451, #ffe29a); box-shadow: 0 16px 40px -16px rgba(245, 196, 81, .85); }
.est-cdf .ra-entrer { color: #fff; background: linear-gradient(90deg, var(--cdf-1), var(--cdf-4)); box-shadow: 0 16px 40px -16px rgba(255, 122, 89, .85); }

@media (max-width: 900px) {
  /* En colonne, une base nulle écraserait les portes : leur hauteur naturelle. */
  .ra-portes { flex-direction: column; min-height: 0; }
  .ra-porte, .ra-portes:hover .ra-porte, .ra-portes .ra-porte:hover { flex: none; }
  .ra-filigrane { font-size: 150px; }
  .ra-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ra-liens { grid-template-columns: minmax(0, 1fr); }
  .ra-porte { border-radius: 22px; }
}