/* APIA — S7b Page Rejoindre APIA (/rejoindre-apia/, Figma node 786:27081, fichier B).
   Deps : apia-enjeu.css (c-chips, c-arrow-list, c-enjeu-btn, c-renforcer, c-faq, c-rcard)
   + apia-home.css (c-stats, c-tcard) + apia-trouver.css (c-phase, c-numcard, c-ta-resbox).
   Rythme vertical Figma : 160 entre sections (80+80) ; Qui peut py96 (--pad96 176) ;
   CTA py48 (--pad48 128) ; bandes process h500 accolées ; charte py160 ; dernière = 208. */

.s-rej{padding:80px 16px}
.s-rej--hero{padding-top:16px}
.s-rej--pad96{padding-top:176px;padding-bottom:176px}
.s-rej--pad48{padding-top:128px;padding-bottom:128px}
.s-rej--last{padding-bottom:208px}

/* 1. Hero — carte nuit 1248 r28 h434, texte aligné rail (98 interne), visuel flush droite r12 */
.c-rej-hero{max-width:1248px;margin-inline:auto;background:var(--apia-bleu-nuit);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:632px 1fr;align-items:stretch;min-height:434px}
.c-rej-hero__col{display:flex;flex-direction:column;gap:24px;justify-content:center;padding:48px 32px 48px 98px}
.c-rej-hero__inner{max-width:445px;display:flex;flex-direction:column;gap:16px}
.c-rej-hero__title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-ciel);margin:0}
.c-rej-hero__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-blanc);margin:0}
.c-rej-hero .c-chips{gap:0}
.c-rej-hero__media{position:relative;min-height:434px;border-radius:12px;overflow:hidden}
/* 27/08 : motif pyramides (att.116), transposition du pattern des pages region : <img> en overlay,
   height:100% donc 401 x 434 = 65 % de la largeur du media (616 x 434). Ancre a gauche, sans debord
   (pas de gouttiere entre les colonnes 632/1fr, contrairement aux pages region qui ont 89px).
   ATTENTION : la regle generique `.c-rej-hero__media img` (0-2-1) capture aussi cet overlay et
   l'etirerait en `cover` plein cadre ; d'ou le selecteur `img.c-rej-hero__pyr` (0-3-1) qui la bat.
   `overflow:hidden` + `border-radius` sont poses sur le media pour rogner le motif au meme arrondi
   que la photo : no-op visuel pour la photo, qui porte deja ce rayon. */
.c-rej-hero__media img.c-rej-hero__pyr{inset:0 auto auto 0;width:auto;height:100%;border-radius:0;pointer-events:none}
.c-rej-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}

/* 2/3. Têtes de section 2 col (titre + texte | visuel r24) */
.c-rej-head{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:1fr 518px;gap:16px;align-items:start}
.c-rej-head__col{display:flex;flex-direction:column;gap:16px;padding-right:64px}
.c-rej-head--qp .c-rej-head__col{gap:24px;justify-content:flex-end;align-self:stretch}
.c-rej-head__title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-nuit);margin:0;max-width:454px}
.c-rej-head__title--429{max-width:429px}
.c-rej-head__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0;max-width:454px}
.c-rej-head__media{position:relative;border-radius:24px;overflow:hidden;height:307px}
.c-rej-head__media--qp{height:245px}
.c-rej-head__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-rej-head__media .c-enjeu-btn{position:absolute;right:16px;bottom:16px}

/* 2. Pourquoi — 4 cartes nuit 251x257 r24 p32 */
.c-rej-wgrid{max-width:1052px;margin:16px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.c-rej-wcard{background:var(--apia-bleu-nuit);border-radius:24px;padding:32px;min-height:257px;display:flex;flex-direction:column;gap:24px}
.c-rej-wcard h3{font-family:var(--apia-font);font-weight:600;font-size:16px;line-height:22px;color:var(--apia-bleu-ciel);margin:0}
.c-rej-wcard p{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-blanc);margin:0}

/* 3. Critères — rangées 338x140, badge Check 32 bleu r8 (exception assumée à l’invariant flèches, décision n°2) */
.c-rej-crits{max-width:1052px;margin:48px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-rej-crit{display:flex;align-items:center;gap:24px;padding:24px 24px 24px 0;min-height:140px}
.c-rej-crit__badge{flex:0 0 32px;width:32px;height:32px;border-radius:8px;background:var(--apia-bleu);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.c-rej-crit__badge svg{width:20px;height:20px}
.c-rej-crit p{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0}

/* 4. Processus — bandes full-bleed h500 accolées (ciel intro / bleu / marine / nuit), numéro 180px */
.c-phase--rej{padding:48px 16px;min-height:500px;display:flex;flex-direction:column;justify-content:center}
.c-phase--rejintro{background:var(--apia-bleu-ciel);margin-top:80px}
.c-phase--rejbleu{background:var(--apia-bleu)}
.c-phase--rejmarine{background:var(--apia-bleu-marine)}
.c-phase--rejnuit{background:var(--apia-bleu-nuit)}
.c-rej-pintro-wrap{max-width:1052px;width:100%;margin-inline:auto;display:grid;grid-template-columns:429px 429px;column-gap:105px;align-items:start}
.c-rej-ph2{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-marine);margin:0}
.c-rej-pintro{font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-marine);margin:0}
.c-phase__wrap--rej{max-width:1052px;width:100%;grid-template-columns:251px 1fr;gap:16px;align-items:center}
.c-phase--rej .c-phase__num{font-size:180px;line-height:normal;color:var(--apia-bleu-ciel);padding:10px}
.c-phase--rej .c-phase__content{max-width:518px;margin-left:auto;width:100%;gap:24px}
.c-phase--rej .c-phase__title{font-size:33px;line-height:36px;color:var(--apia-bleu-ciel);margin:0}
.c-rej-kicker{font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-clair);margin:0;max-width:429px}
.c-rej-kicker--503{max-width:503px}
.c-rej-ptext{display:flex;flex-direction:column;max-width:429px}
.c-rej-ptext p{font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-clair);margin:0}
.c-rej-arrows li{font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-clair)}
.c-rej-arrows li svg{color:var(--apia-bleu-ciel)}

/* 5. Charte — bande full-bleed bleu clair py160, 9 cartes c-numcard--nuit */
.c-rej-charte{background:var(--apia-bleu-clair);padding:160px 16px;margin-bottom:80px}
.c-rej-charte__rail{max-width:1052px;margin-inline:auto;display:flex;flex-direction:column;gap:48px}
.c-rej-charte__head{display:flex;flex-direction:column;gap:24px;max-width:696px}
.c-rej-charte__title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-nuit);margin:0}
.c-rej-charte__intro{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0}
.c-rej-charte__banner{position:relative;border-radius:24px;overflow:hidden;height:280px;margin:0}
.c-rej-charte__banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-rej-charte__banner .c-enjeu-btn{position:absolute;left:16px;bottom:16px}
.c-rej-charte__kicker{font-family:var(--apia-font);font-weight:600;font-size:28px;line-height:32px;color:var(--apia-bleu-nuit);margin:0;max-width:713px}
.c-rej-engs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-numcard--nuit{background:var(--apia-bleu-nuit)}
.c-numcard--nuit .c-numcard__num{font-weight:400;font-size:23px;line-height:28px;color:var(--apia-bleu)}
.c-numcard--nuit .c-numcard__text{color:var(--apia-blanc)}

/* 6. Ce que vous gagnez — 2 cartes 518x227 r28 p32 */
.c-rej-gainhead{max-width:1052px;margin-inline:auto;display:grid;grid-template-columns:1fr 429px;gap:16px;align-items:center}
.c-rej-gainhead__title{font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-nuit);margin:0;max-width:454px}
.c-rej-gainhead__text{font-family:var(--apia-font);font-weight:500;font-size:16px;line-height:23px;color:var(--apia-gris-bleu);margin:0;max-width:429px}
.c-rej-gains{max-width:1052px;margin:64px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c-rej-gain{border-radius:28px;padding:32px;min-height:227px;display:flex;flex-direction:column;gap:24px}
.c-rej-gain--marine{background:var(--apia-bleu-marine)}
.c-rej-gain--nuit{background:var(--apia-bleu-nuit)}
.c-rej-gain h3{font-family:var(--apia-font);font-weight:600;font-size:19px;line-height:24px;color:var(--apia-bleu-ciel);margin:0}
.c-rej-gain__list li{color:var(--apia-blanc);gap:8px}
.c-rej-gain__list li svg{color:var(--apia-bleu-ciel)}

/* 8. Réseau — carte marine 1052x192 r24 p48 + stats (num 48/52 bleu, label marine) */
.c-rej-h1{max-width:1052px;margin:0 auto;font-family:var(--apia-font);font-weight:600;font-size:48px;line-height:52px;color:var(--apia-bleu-nuit)}
.c-rej-h1--963{max-width:963px}
.c-rej-netcard{max-width:1052px;margin:24px auto 16px;background:var(--apia-bleu-marine);border-radius:24px;padding:48px;display:flex;gap:48px;align-items:center;min-height:192px;box-sizing:border-box}
.c-rej-netcard p{flex:1 1 0;margin:0}
.c-rej-netcard__t{font-family:var(--apia-font);font-weight:600;font-size:23px;line-height:28px;color:var(--apia-bleu-ciel)}
.c-rej-netcard__d{font-family:var(--apia-font);font-weight:400;font-size:16px;line-height:24px;color:var(--apia-bleu-clair)}
.c-stats--rej .c-stats__card{gap:16px}
.c-stats--rej .c-stats__num{font-size:48px;line-height:52px}
.c-stats--rej .c-stats__label{color:var(--apia-bleu-marine)}

/* 10. Compétences — resbox S4 + 2 c-rcard */
.c-rej-res{max-width:1052px;margin:48px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.c-ta-resbox--rej{min-height:378px}
.c-ta-resbox__btn--rej{width:max-content;justify-content:flex-start}

/* 11. FAQ — variante claire (item clair r16, question 23/28 marine), fidèle au node */
.s-rej--faq .c-faq{margin-top:48px}
/* Les 4 surcharges .s-rej de la FAQ ont ete PROMUES dans .c-faq (apia-enjeu.css) le 27/08 :
   ce design est desormais celui de toutes les FAQ du site. Surcharges retirees car redondantes. */

/* Responsive */
@media(max-width:991px){
.s-rej{padding:48px 16px}
.s-rej--hero{padding-top:16px}
.s-rej--pad96{padding-top:96px;padding-bottom:96px}
.s-rej--pad48{padding-top:72px;padding-bottom:72px}
.s-rej--last{padding-bottom:96px}
.c-rej-hero{grid-template-columns:1fr;min-height:0}
.c-rej-hero__col{padding:40px}
.c-rej-hero__media{min-height:300px}
/* 27/08 : sous 991px la boite passe a ~3,2:1 et le cadrage centre coupe les deux visages
   (mesure : bande visible y 241-627 sur 868, tetes a y 84 et 120). Inerte au-dessus de 991 :
   le fichier est produit au ratio EXACT de la boite desktop (1232x868 = 616x434), cover ne recadre rien. */
.c-rej-hero__media img{object-position:50% top}
.c-rej-hero__title{font-size:33px;line-height:40px}
.c-rej-head{grid-template-columns:1fr}
.c-rej-head__col{padding-right:0}
.c-rej-head__media{height:auto;aspect-ratio:518/307}
.c-rej-head__media--qp{aspect-ratio:518/245}
.c-rej-head__title,.c-rej-gainhead__title,.c-rej-charte__title,.c-rej-h1,.c-rej-ph2{font-size:33px;line-height:40px}
.c-rej-wgrid{grid-template-columns:1fr 1fr}
.c-rej-wcard{min-height:0}
.c-rej-crits{grid-template-columns:1fr 1fr}
.c-rej-crit{min-height:0;padding:8px 24px 8px 0}
.c-phase--rej{min-height:0;padding:64px 16px}
.c-phase__wrap--rej{grid-template-columns:1fr;gap:24px}
.c-phase--rej .c-phase__num{font-size:96px;padding:0}
.c-phase--rej .c-phase__content{max-width:none;margin-left:0}
.c-phase--rejintro{margin-top:48px}
.c-rej-pintro-wrap{grid-template-columns:1fr;row-gap:24px}
.c-rej-charte{padding:96px 16px;margin-bottom:48px}
.c-rej-engs{grid-template-columns:1fr 1fr}
.c-rej-gainhead{grid-template-columns:1fr}
.c-rej-gains{grid-template-columns:1fr;margin-top:32px}
.c-rej-netcard{flex-direction:column;align-items:flex-start;gap:24px;padding:32px}
.c-rej-res{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
.c-rej-hero__col{padding:32px 24px}
.c-rej-hero__title{font-size:28px;line-height:34px}
.c-rej-wgrid,.c-rej-crits,.c-rej-engs,.c-rej-res{grid-template-columns:1fr}
.c-phase--rej .c-phase__num{font-size:72px}
.c-rej-charte{padding:64px 16px}
.c-rej-charte__kicker{font-size:23px;line-height:28px}
.c-rej-head__title,.c-rej-gainhead__title,.c-rej-charte__title,.c-rej-h1,.c-rej-ph2{font-size:28px;line-height:34px}
}

/* Fix QA : listes des cartes gagnez sans gap herite (Figma items accoles, carte 227) */
.c-rej-gain__list{gap:0}