/* ═══════════════════════════════════════
   DEVENIR MARKETEUR FULL STACK — session inter de janvier 2027
   La page reprend tout le style de /marketeur-full-stack/ (marketeur-full-stack.css) et de la
   pop-up de devis (modal-formation.css). Ici, seulement ce qui lui est propre : la frise des
   7 jeudis, le prix de référence barré, et les champs de la pop-up d'inscription.
   ═══════════════════════════════════════ */

/* ── Le héros : « Marketeur full stack » en Welcome Darling tient sur une ligne de la colonne
   (à 1,15 em comme sur l'intra, il mesurait 565 px pour une colonne de 427 px et passait sous le film) ── */
.ck-hero h1.mfs-titre em { font-size: 0.84em; white-space: normal; }
/* page anglaise : la mention « held in French » arrive avec les boutons du héros */
.ck-hero .ap-hero-copy .note-fr { opacity: 0; animation: fadeUp 0.8s 0.75s forwards; }
@media (prefers-reduced-motion: reduce) { .ck-hero .ap-hero-copy .note-fr { opacity: 1; animation: none; } }

/* ── Le calendrier : le jour 1 ouvert, puis les 7 jeudis ── */
.mfs-frise { margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; max-width: 1080px; }
.mfs-frise ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 1px solid rgba(124, 152, 179, 0.18); }
.mfs-frise li { position: relative; padding: 1.1rem 0.7rem 0 0; display: flex; flex-direction: column; gap: 0.2rem; }
.mfs-frise li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--midnight); border: 1.5px solid var(--golden); }
.mfs-frise li.mfs-j1::before { background: var(--golden); }
.mfs-frise time { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--golden); }
.mfs-frise b { font-size: 0.95rem; color: var(--off-white); }
.mfs-frise span { font-size: 0.8rem; line-height: 1.4; color: var(--light-blue); }
.mfs-frise-note { margin: 1.4rem 0 0; font-size: 0.85rem; color: var(--soft-blue); text-align: center; }

@media (max-width: 899px) {
    .mfs-frise ol { grid-template-columns: 1fr 1fr; border-top: 0; gap: 0; }
    .mfs-frise li { padding: 0.9rem 0.8rem 0.9rem 1.1rem; border-left: 1px solid rgba(124, 152, 179, 0.18); }
    .mfs-frise li::before { top: 1.15rem; left: -5px; }
}

/* ── L'offre : le prix de référence, barré, sous le prix de la session ── */
.ap-offer .mf-par-tete { white-space: normal; text-wrap: balance; }
.ap-offer .mf-par-tete s { text-decoration-thickness: 1px; opacity: 0.75; }
.mfs-conditions { margin-top: 1rem; font-size: 0.8rem; line-height: 1.5; color: var(--soft-blue); }
.mfs-conditions b { color: var(--off-white); }
.mfs-lien { color: var(--golden); text-decoration: underline; text-underline-offset: 3px; }

/* ── La pop-up d'inscription ── */
.mfs-inscription [hidden] { display: none !important; }
.mfs-inscription .modal-form label + .modal-radio-group { margin-bottom: 0.9rem; }
.mfs-prerequis { margin: 0.4rem 0 0; padding: 0; border: 0; display: grid; gap: 0.45rem; }
.mfs-prerequis legend { margin-bottom: 0.4rem; padding: 0; font-size: 0.78rem; font-weight: 600; color: var(--soft-blue); }
.mfs-coche { position: relative; display: flex; align-items: center; gap: 0.65rem; margin: 0; padding: 0.55rem 0.9rem 0.55rem 0.7rem; border: 1px solid rgba(249, 220, 92, 0.4); font-size: 0.8rem; font-weight: 600; line-height: 1.35; color: var(--off-white); cursor: pointer; transition: background 0.25s, border-color 0.25s; }
.mfs-coche input { position: absolute; opacity: 0; width: 0; height: 0; }
.mfs-coche::before { content: ''; flex: none; width: 18px; height: 18px; border: 1.5px solid rgba(249, 220, 92, 0.7); background: transparent center / 72% no-repeat; transition: background-color 0.2s; }
.mfs-coche:has(input:checked) { background: rgba(249, 220, 92, 0.12); border-color: var(--golden); }
.mfs-coche:has(input:checked)::before { background-color: var(--golden); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1B2A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.mfs-coche:has(input:focus-visible) { outline: 2px solid var(--golden); outline-offset: 2px; }
.mfs-cp-ville { grid-template-columns: 1fr 2fr; }
.mfs-inscription .modal-checkbox label { font-size: 0.78rem; line-height: 1.45; }

/* Le panneau défile quand l'étape dépasse la hauteur de l'écran (même règle que les réservations
   des opticiens et des boulangeries), la colonne de gauche reste en haut */
.mfs-inscription .modal-panel { max-height: 94vh; overflow-y: auto; overflow-x: clip; }
.mfs-inscription .modal-panel > .corner-plus.tl { top: 8px; left: 8px; }
.mfs-inscription .modal-panel > .corner-plus.br { bottom: 8px; right: 8px; }
.mfs-inscription .modal-left { justify-content: flex-start; }
.mfs-inscription .modal-right { justify-content: flex-start; }
.mfs-inscription .modal-form { gap: 0.6rem; }

/* Statut et financement : 4 cases en grille 2 × 2, de même hauteur (modèle de la pop-up des opticiens) */
.mfs-inscription .modal-radio-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.mfs-inscription .modal-radio label { height: 100%; min-height: 3.6rem; justify-content: center; padding: 0.6rem 0.7rem; line-height: 1.3; }
.mfs-inscription .modal-radio label span { line-height: 1.35; }

@media (max-width: 599px) {
    .mfs-inscription .dv-duo { grid-template-columns: 1fr; }
    /* mobile : la pop-up va droit au formulaire, le titre seul reste à gauche */
    .mfs-inscription .modal-left-sub, .mfs-inscription .modal-features { display: none; }
}
@media (max-width: 339px) {
    .mfs-inscription .modal-radio-group { grid-template-columns: minmax(0, 1fr); }
}