/* ═══════════════════════════════════════
   AGENTS IA POUR LES ORGANISMES DE FORMATION (/agents-ia-organisme-de-formation/)
   Page sœur de /devenir-marketeur-full-stack/ : les sections reprises gardent leurs styles
   (marketeur-full-stack.css, devenir-marketeur-full-stack.css). Cette feuille ne porte que ce
   qui est propre à la page : la scène du héros (l'Academy au travail, agents-ia-of.js),
   l'organigramme des agents, la carte des 51 étapes, les maquettes des ateliers et les icônes
   des connecteurs. Angles nets, filets, croix dorées : les conventions du site.
   ═══════════════════════════════════════ */

/* ── La scène du héros : un plateau, Jessy au centre, un agent à chaque poste ── */
.of-scene {
    position: relative; aspect-ratio: 16 / 11; overflow: hidden;
    border: 1px solid rgba(124, 152, 179, 0.18);
    background:
        radial-gradient(60% 55% at 50% 60%, rgba(249, 220, 92, 0.07), transparent 70%),
        linear-gradient(rgba(124, 152, 179, 0.07) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(124, 152, 179, 0.07) 1px, transparent 1px) 0 0 / 32px 32px,
        #0A1622;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
}
.of-scene-tete { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0.7rem 0.95rem; border-bottom: 1px solid rgba(124, 152, 179, 0.14); font-size: 0.74rem; color: var(--light-blue); }
.of-scene-tete b { font-weight: 800; letter-spacing: 0.02em; color: var(--off-white); }
.of-heure { font-variant-numeric: tabular-nums; padding: 0.15rem 0.55rem; border: 1px solid rgba(249, 220, 92, 0.35); border-radius: 100px; color: var(--golden); }
/* les fils qui relient chaque poste à Jessy : celui du poste actif s'allume */
.of-fils { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.of-fils line { stroke: rgba(249, 220, 92, 0.18); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; transition: stroke 0.4s; }
.of-fils line.actif { stroke: var(--golden); stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(249, 220, 92, 0.8)); }

.of-poste, .of-jessy { position: absolute; left: calc(var(--px) * 1%); top: calc(var(--py) * 1%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 11rem; translate: -50% -62%; text-align: center; }
.of-poste b, .of-jessy b { margin-top: 0.35rem; font-size: 0.8rem; font-weight: 800; color: var(--off-white); white-space: nowrap; }
.of-poste small, .of-jessy small { font-size: 0.68rem; font-weight: 600; color: var(--soft-blue); white-space: nowrap; transition: color 0.3s; }
.of-poste.actif small { color: var(--golden); }
.of-jessy { z-index: 2; translate: -50% -58%; }
.of-jessy small { color: var(--golden); }
/* un bureau par agent : l'agent, son écran, le plateau du bureau */
.of-bureau { position: relative; display: flex; align-items: flex-end; gap: 8px; padding: 0 10px; }
.of-bureau::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: #2B4A6B; box-shadow: 0 5px 0 #1B3550, 0 12px 18px rgba(0, 0, 0, 0.45); }
.of-ecran { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 50px; height: 38px; margin-bottom: 4px; padding: 6px; border: 2px solid #ACCBE1; background: #0D1B2A; box-shadow: 0 0 0 2px #0D1B2A; transition: box-shadow 0.3s; }
.of-ecran i { display: block; height: 3px; background: rgba(172, 203, 225, 0.35); }
.of-ecran i:nth-child(2) { width: 80%; }
.of-ecran i:nth-child(3) { width: 60%; }
.of-ecran i:nth-child(4) { width: 72%; }
.of-poste.actif .of-ecran { box-shadow: 0 0 0 2px #0D1B2A, 0 0 22px rgba(249, 220, 92, 0.35); }
.of-poste.actif .of-ecran i { background: var(--golden); animation: ofFrappe 0.9s steps(4) infinite; transform-origin: left; }
.of-poste.actif .of-ecran i:nth-child(2) { animation-delay: 0.2s; }
.of-poste.actif .of-ecran i:nth-child(3) { animation-delay: 0.4s; }
.of-poste.actif .of-ecran i:nth-child(4) { animation-delay: 0.6s; }
@keyframes ofFrappe { 0% { transform: scaleX(0.2); } 100% { transform: scaleX(1); } }

/* les petits agents en pixel art, dessinés par le script (grille de 16 sur 16) */
.of-bot { display: inline-grid; place-items: center; }
.of-bot svg { display: block; width: 56px; height: 56px; shape-rendering: crispEdges; }
.of-poste.actif .of-bot svg { animation: ofBosse 0.5s steps(2) infinite; }
@keyframes ofBosse { 50% { transform: translateY(-3px); } }

/* Jessy : la planche de la mascotte (19 cases de 52 × 102 px), case choisie par --c */
.of-jessy-spr, .of-chef-spr { display: block; width: 52px; height: 102px; background: url('../marketeur-full-stack/jessy-mascotte.png') calc(var(--c, 16) * -52px) 0 / 988px 102px no-repeat; image-rendering: pixelated; }
.of-jessy-spr { --c: 16; transform: scale(1.3); transform-origin: 50% 100%; margin-top: 30px; }

/* la pièce qui circule d'un poste à Jessy, puis vers la sortie */
.of-piece { position: absolute; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%); z-index: 3; display: grid; place-items: center; width: 44px; height: 30px; translate: -50% -50%; opacity: 0; transition: left 0.9s cubic-bezier(0.65, 0, 0.35, 1), top 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s; filter: drop-shadow(0 0 8px rgba(249, 220, 92, 0.55)); }
.of-piece.vu { opacity: 1; }
.of-piece svg { width: 40px; height: 25px; shape-rendering: crispEdges; }
.of-sortie { position: absolute; right: 0.9rem; bottom: 0.8rem; z-index: 3; padding: 0.3rem 0.7rem; font-size: 0.7rem; font-weight: 800; color: var(--midnight); background: var(--golden); border-radius: 100px; opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.of-sortie.vu { opacity: 1; transform: none; }

@media (max-width: 899px) {
    .of-scene { aspect-ratio: 4 / 3.4; border-left: 0; border-right: 0; box-shadow: none; }
    .of-poste, .of-jessy { width: 8rem; }
    .of-bot svg { width: 38px; height: 38px; }
    .of-ecran { width: 34px; height: 27px; padding: 4px; gap: 3px; }
    .of-ecran i { height: 2px; }
    .of-poste b { font-size: 0.68rem; }
    .of-poste small, .of-jessy small { font-size: 0.6rem; }
    .of-jessy-spr { transform: none; margin-top: 0; }
}
@media (max-width: 420px) {
    .of-poste small { display: none; }
}
/* entre 900 et 1279 px, la scène est trop étroite pour porter l'encadré « Vous après 7 semaines » :
   il passe sous la scène, en bandeau, au lieu de recouvrir les postes */
@media (min-width: 900px) and (max-width: 1279px) {
    .of-scene ~ .ap-float-check { position: relative; left: auto; bottom: auto; width: auto; max-width: none; margin-top: 1rem; animation: none; }
    .of-scene ~ .ap-float-check ul { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 1.6rem; }
}

/* ── Mon équipe d'agents : section élargie, titre au bord du bloc qui déborde ── */
.of-equipe { position: relative; padding-block: clamp(5rem, 9vw, 8.5rem); --gout: clamp(1rem, 2.5vw, 2.5rem); --c: min(1224px, 100vw - 2 * clamp(1.5rem, 4vw, 3rem)); --l: min(1560px, (var(--c) + 100vw - 2 * var(--gout)) / 2); }
.of-equipe::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(124, 152, 179, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 152, 179, 0.06) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(60% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(60% 70% at 50% 45%, #000 30%, transparent 100%); }
.of-equipe .section-title { margin-bottom: 1.1rem; max-width: 1040px; }
.of-organi, .of-carte { position: relative; width: var(--l); max-width: none; margin-inline: calc(50% - var(--l) / 2); }
@media (min-width: 900px) {
    .of-equipe > .container > :is(.section-title, .ap-lead) { margin-left: calc(50% - var(--l) / 2); }
}
.of-organi { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
/* Jessy en tête, relié aux agents par un trait */
.of-chef { position: relative; display: flex; align-items: center; gap: 1.1rem; width: max-content; max-width: 100%; margin: 0 auto 3.2rem; padding: 0.9rem 1.4rem 0.9rem 1.1rem; border: 1px solid rgba(249, 220, 92, 0.45); background: rgba(13, 27, 42, 0.9); box-shadow: 0 0 40px rgba(249, 220, 92, 0.1); }
.of-chef::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 3.2rem; background: rgba(249, 220, 92, 0.45); }
.of-chef-spr { --c: 2; flex: none; width: 52px; height: 102px; }
.of-chef p { margin: 0; }
.of-chef p b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--off-white); }
.of-chef p span { font-size: 0.85rem; color: var(--soft-blue); }
.of-chef-role { margin-left: 0.6rem !important; padding-left: 1.1rem; border-left: 1px solid rgba(124, 152, 179, 0.2); font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--golden); }
.of-agents { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(249, 220, 92, 0.45); }
.of-agent { position: relative; display: flex; flex-direction: column; gap: 0.65rem; padding: 1.9rem 1.4rem 1.5rem; border-right: 1px solid rgba(124, 152, 179, 0.1); border-bottom: 1px solid rgba(124, 152, 179, 0.1); background: rgba(13, 27, 42, 0.55); }
.of-agent:first-child { border-left: 1px solid rgba(124, 152, 179, 0.1); }
.of-agent::before { content: ''; position: absolute; left: 50%; top: -6px; width: 9px; height: 9px; translate: -50% 0; background: var(--golden); box-shadow: 0 0 12px rgba(249, 220, 92, 0.6); }
.of-agent .of-bot { align-self: flex-start; padding: 0.35rem; border: 1px solid rgba(124, 152, 179, 0.22); background: var(--midnight); }
.of-agent h3 { margin: 0.2rem 0 0.1rem; font-size: 1.12rem; font-weight: 800; color: var(--off-white); }
.of-ligne { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--light-blue); }
.of-ligne b { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--golden); }
.of-depuis { align-self: flex-start; margin: 0.2rem 0 0; padding: 0.2rem 0.65rem; font-size: 0.72rem; font-weight: 700; color: var(--off-white); border: 1px solid rgba(124, 152, 179, 0.25); border-radius: 100px; }
.of-preuve { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; padding: 0; border: 1px solid rgba(124, 152, 179, 0.2); background: var(--midnight); }
.of-preuve img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.of-preuve:hover img { transform: scale(1.04); }
.of-vous { margin: auto 0 0; padding-top: 0.8rem; border-top: 1px solid rgba(124, 152, 179, 0.12); font-size: 0.82rem; color: var(--soft-blue); }
.of-vous b { color: var(--golden); }
@media (max-width: 1100px) {
    .of-agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .of-agent:nth-child(3) { border-left: 1px solid rgba(124, 152, 179, 0.1); }
}
@media (max-width: 640px) {
    .of-agents { grid-template-columns: 1fr; }
    .of-agent { border-left: 1px solid rgba(124, 152, 179, 0.1); }
    .of-agent::before { display: none; }
    .of-chef { flex-wrap: wrap; width: auto; }
    .of-chef-role { margin-left: 0 !important; padding-left: 0; border-left: 0; }
}

/* la carte des 51 étapes : ce qui tourne, ce qui est en essai, ce qui reste à construire */
.of-carte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem 3rem; align-items: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid rgba(124, 152, 179, 0.14); background: rgba(13, 27, 42, 0.6); }
.of-carte h3 { margin: 0 0 0.6rem; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; color: var(--off-white); }
.of-carte h3 em { font-family: var(--font-display); font-style: normal; font-weight: 400; color: var(--golden); }
.of-carte-texte p { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--light-blue); }
.of-cases { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 5px; }
.of-cases i, .of-cases-leg i { display: block; aspect-ratio: 1; }
.of-cases-leg i { width: 12px; }
i.ok { background: var(--golden); box-shadow: 0 0 10px rgba(249, 220, 92, 0.35); }
i.essai { background: var(--light-blue); opacity: 0.8; }
i.vide { border: 1px solid rgba(172, 203, 225, 0.35); }
.of-cases-leg { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--soft-blue); }
.of-cases-leg li { display: flex; align-items: center; gap: 0.5rem; }
.of-cases.reveal-armee i { opacity: 0; transform: scale(0.4); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--i, 0) * 18ms); }
.of-carte.visible .of-cases.reveal-armee i { opacity: 1; transform: none; }
.of-carte.visible .of-cases.reveal-armee i.essai { opacity: 0.8; }
@media (max-width: 899px) {
    .of-carte { grid-template-columns: 1fr; }
    .of-cases-leg { grid-column: 1; }
}

/* la section qui suit l'organigramme rejoint les avis, qui partent en midnight-light */
.of-equipe ~ #competences { background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight) 40%, var(--midnight-light) 100%); }

/* ── Le parcours : la ligne « Chez moi » sous la sortie d'une étape ── */
.of-moi { max-width: 46ch; margin: 0.9rem 0 0; padding: 0.7rem 0.9rem; font-size: 0.86rem; line-height: 1.55; color: var(--light-blue); border-left: 2px solid var(--golden); background: rgba(249, 220, 92, 0.05); }
.of-moi b { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; line-height: 1.1; color: var(--golden); }

/* les maquettes des ateliers : la boîte triée, l'agenda des convocations */
.of-ui-tri { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.of-ui-tri p { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 0.56rem; line-height: 1.2; color: var(--off-white); white-space: nowrap; overflow: hidden; }
.of-ui-tri b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.of-ui-tri .t { flex: none; padding: 0.05rem 0.35rem; font-size: 0.5rem; font-weight: 800; color: var(--light-blue); border: 1px solid rgba(124, 152, 179, 0.35); border-radius: 100px; }
.of-ui-tri .t.urgent { color: var(--midnight); background: var(--golden); border-color: var(--golden); }
.of-ui-tri .brouillon { margin-top: 2px; font-size: 0.52rem; font-weight: 800; color: var(--golden); }
.of-ui-agenda { display: flex; flex-direction: column; gap: 4px; }
.of-ui-agenda .mois { margin: 0; font-size: 0.56rem; font-weight: 800; color: var(--off-white); }
.of-ui-agenda .jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.of-ui-agenda .jours i { display: block; height: 7px; background: rgba(172, 203, 225, 0.18); }
.of-ui-agenda .jours i.on { background: var(--golden); box-shadow: 0 0 6px rgba(249, 220, 92, 0.6); }
.of-ui-agenda .rappel { margin: 0; font-size: 0.52rem; font-weight: 800; color: var(--golden); }
.pj-cadre .of-ui-tri p, .pj-cadre .of-ui-agenda .jours i.on { opacity: 0; transition: opacity 0.35s; }
.pj-cadre[data-etat="chantiers"] .of-ui-tri p, .pj-cadre[data-etat="chantiers"] .of-ui-agenda .jours i.on { opacity: 1; }
.pj-cadre[data-etat="chantiers"] .of-ui-tri p:nth-child(2) { transition-delay: 0.65s; }
.pj-cadre[data-etat="chantiers"] .of-ui-tri p:nth-child(3) { transition-delay: 0.8s; }
.pj-cadre[data-etat="chantiers"] .of-ui-tri p:nth-child(4) { transition-delay: 1s; }
.pj-cadre[data-etat="chantiers"] .of-ui-agenda .jours i.on { transition-delay: 0.9s; }

/* les connecteurs : icônes neutres pour la messagerie, l'agenda et l'outil de gestion (chaque organisme a les siens) */
.lg-of-mail { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); }
.lg-of-agenda { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01'/%3E%3C/svg%3E"); }
.lg-of-gestion { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
    .of-piece, .of-sortie, .of-preuve img, .of-fils line { transition: none; }
    .of-poste.actif .of-bot svg, .of-poste.actif .of-ecran i { animation: none; }
}

/* les illustrations des cartes sans capture : la boîte triée, le certificat (pas de nom de stagiaire) */
.of-illu { display: flex; flex-direction: column; justify-content: center; gap: 0.45rem; width: 100%; aspect-ratio: 16 / 10; padding: 0.9rem; border: 1px solid rgba(124, 152, 179, 0.2); background: var(--midnight); }
.of-illu.of-ui-tri p { font-size: 0.72rem; gap: 0.5rem; }
.of-illu.of-ui-tri .t { font-size: 0.6rem; padding: 0.1rem 0.45rem; }
.of-illu.of-ui-tri .brouillon { font-size: 0.68rem; }
.of-ui-certif { align-items: center; }
.of-ui-certif .cad { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74%; aspect-ratio: 1.414; padding: 10% 8%; border: 3px solid var(--midnight-light); outline: 1px solid rgba(249, 220, 92, 0.6); background: #FDF8E8; }
.of-ui-certif .cad i { display: block; width: 70%; height: 4px; background: rgba(13, 27, 42, 0.25); }
.of-ui-certif .cad i.t { width: 40%; height: 5px; background: rgba(13, 27, 42, 0.5); }
.of-ui-certif .cad i.n { width: 82%; height: 9px; background: rgba(13, 27, 42, 0.12); filter: blur(1px); }
.of-ui-certif .cad i.c { width: 50%; background: rgba(43, 74, 107, 0.6); }
.of-ui-certif .med { position: absolute; right: 10%; bottom: 12%; width: 18px; height: 18px; background: var(--golden); box-shadow: 0 0 0 3px #E0A93A; }
.of-ui-certif p { margin: 0; font-size: 0.7rem; font-weight: 800; color: var(--golden); }

/* la bande de chiffres du héros : « 7 vendredis » et « 1 500 € » ne tiennent pas côte à côte sur un téléphone,
   chaque chiffre prend sa ligne */
@media (max-width: 560px) {
    .ap-hero:has(.of-scene) .ap-facts.mf-facts-3 { grid-template-columns: minmax(0, 1fr); }
    .ap-hero:has(.of-scene) .ap-facts.mf-facts-3 .reassurance-plus { display: none; }
    .ap-hero:has(.of-scene) .ap-facts.mf-facts-3 .ap-fact { border-right: 0; border-left: 0; }
}