/* ============================================================
   OPTERIA : page « Organismes de formation » (/organismes-de-formation, 08/10/2026, demande Axel).
   Page pilier pour les organismes de formation et les CFA : un seul point d'entrée sur tous leurs outils (LMS, Digiforma, Dendreo,
   Qualiobee, Hop3team, Odoo, 360Learning, bureautique), toute la vie d'une formation de A à Z, et tout l'écosystème Bobby
   (administratif, comptable, réseaux sociaux, site, veille). Architecture gleap.ai, dans la DA du site : premier écran centré avec
   une grande toile peinte et une fenêtre vivante, grand texte, onglets en pilule, récit collant, cartes grises serrées.
   Chargée après da-cerveau.css (cartes, cadres peints, fiches blanches, moteur de scènes de cerveau.js : e1, e2… et data-etape)
   et da-formation.css (onglets en pilule, panneaux, flux, lignes à filets fins). Animations propres : of.js.
   Transform, opacity, stroke-dashoffset ; tout est posé d'emblée si l'utilisateur réduit les animations.
   ============================================================ */

.page-of { --orange: #FB4D17; --vert-ok: #2f7d3e; }
.of-tete { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.of-tete .meta { margin: 0 0 14px; }
.of-tete .h { margin: 0; }
.of-tete .p { max-width: 700px; margin: 20px auto 0; }
.of-tete--gauche { margin-left: 0; text-align: left; }
.of-tete--gauche .p { margin-left: 0; }

/* les maquettes blanches restent blanches en mode nuit, avec leurs couleurs du jour (même règle que .cv-fiche) */
html[data-theme="nuit"] :is(.of-fenetre, .of-outil, .of-dossier, .of-evt, .of-volet, .of-semaine__carte, .of-tdb) {
  --paper: #fff; --ink: #292929; --texte: #353535; --muet: rgba(53,53,53,.7); --line: rgba(0,0,0,.12); color-scheme: light;
}

/* ============================================================
   1) PREMIER ÉCRAN : la fenêtre de Bobby au centre, les outils de l'organisme autour, reliés par des fils.
   Une demande arrive ; Bobby passe d'un outil à l'autre (le fil et la pastille s'allument), chaque action se coche.
   Étapes (cerveau.js, data-scene) : e1 fils tracés, e2 la demande, e3 Bobby écrit, e4 à e8 les cinq actions, e9 « à valider ».
   ============================================================ */
.of-hero { padding-bottom: 40px; }
.of-hero .d { max-width: 940px; margin-left: auto; margin-right: auto; }
.of-scene { position: relative; margin-top: 64px; padding: 64px 48px; border-radius: var(--r); background: var(--gris-cadre); overflow: hidden; isolation: isolate; text-align: left; }
.of-hub { position: relative; display: grid; place-items: center; min-height: 700px; }
.of-hub__fils { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.of-hub__fils path { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1), stroke .35s ease, stroke-width .35s ease; transition-delay: calc(var(--i, 0) * 60ms); }
.of-hub.e1 .of-hub__fils path { stroke-dashoffset: 0; }
.of-hub__fils path.is-actif { stroke: var(--orange); stroke-width: 2.5; transition-delay: 0s; }

.of-outil { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px; background: #fff; color: #191919; font-size: 13.5px; font-weight: 500; white-space: nowrap; box-shadow: none; transform: translate(-50%, -50%) scale(.9); opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.3,1.35,.5,1), box-shadow .35s ease; transition-delay: calc(var(--i, 0) * 50ms); }
.of-outil img, .of-outil__ini { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #f2f2f0; object-fit: contain; box-sizing: border-box; padding: 5px; font-size: 10.5px; font-weight: 600; color: #191919; letter-spacing: -.02em; }
.of-outil__ini { padding: 0; }
.of-hub.is-in .of-outil { opacity: 1; transform: translate(-50%, -50%); }
.of-outil.is-actif { box-shadow: 0 0 0 3px var(--orange); transform: translate(-50%, -50%) scale(1.06); transition-delay: 0s; }
.of-outil.is-actif .of-outil__ini, .of-outil.is-actif img { background: #fff1eb; }

.of-fenetre { position: relative; z-index: 3; width: min(460px, 100%); border-radius: 16px; background: #fff; color: #191919; box-shadow: none; overflow: hidden; }
.of-fenetre__barre { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-bottom: 1px solid #efefed; font-size: 14px; font-weight: 500; }
.of-fenetre__barre .cv-av { width: 26px; height: 26px; }
.of-fenetre__barre small { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--vert-ok); }
.of-fenetre__barre small i { width: 6px; height: 6px; border-radius: 50%; background: var(--vert); animation: fo-pouls 2s ease-in-out infinite; }
.of-fenetre__corps { display: grid; gap: 10px; min-height: 330px; padding: 16px; align-content: start; }
.of-bulle { justify-self: end; max-width: 86%; padding: 10px 13px; border-radius: 14px; border-top-right-radius: 4px; background: #191919; color: #fff; font-size: 13.5px; line-height: 1.4; }
.of-fenetre .cv-points { height: 22px; }
.of-actions { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.of-actions li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(11,11,11,.07); font-size: 13px; line-height: 1.3; }
.of-actions li b { display: block; font-weight: 500; }
.of-actions li small { display: block; font-size: 11.5px; color: #6b6b70; }
.of-actions .of-outil__ini, .of-actions img { width: 26px; height: 26px; }
.of-actions img { box-sizing: border-box; padding: 5px; border-radius: 50%; background: #f2f2f0; object-fit: contain; }
.of-actions em { font-style: normal; font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 999px; background: #eef7ef; color: var(--vert-ok); }
.of-actions em.is-valider { background: #fff1eb; color: #c2410c; }
.of-fin { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid #ececea; font-size: 13px; color: #191919; }
.of-fin i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 10px; font-style: normal; }
.of-fin span { margin-left: auto; display: inline-flex; gap: 6px; }
.of-fin span b { padding: 5px 11px; border-radius: 999px; background: #191919; color: #fff; font-size: 12px; font-weight: 500; }
.of-fin span b + b { background: #f1f1ef; color: #191919; }

/* les pièces de la fenêtre apparaissent à leur étape */
.of-hub .of-bulle, .of-hub .cv-points, .of-hub .of-actions li, .of-hub .of-fin { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .3s ease, background-color .3s ease; }
.of-hub.e2 .of-bulle { opacity: 1; transform: none; }
.of-hub.e3:not(.e4) .cv-points { opacity: 1; transform: none; }
.of-hub.e4 .of-actions li:nth-child(1), .of-hub.e5 .of-actions li:nth-child(2), .of-hub.e6 .of-actions li:nth-child(3),
.of-hub.e7 .of-actions li:nth-child(4), .of-hub.e8 .of-actions li:nth-child(5), .of-hub.e9 .of-fin { opacity: 1; transform: none; }
.of-hub[data-etape="4"] .of-actions li:nth-child(1), .of-hub[data-etape="5"] .of-actions li:nth-child(2), .of-hub[data-etape="6"] .of-actions li:nth-child(3),
.of-hub[data-etape="7"] .of-actions li:nth-child(4), .of-hub[data-etape="8"] .of-actions li:nth-child(5) { border-color: rgba(251,77,23,.4); background: rgba(251,77,23,.045); }
.of-hub .of-actions em { opacity: 0; transition: opacity .3s ease .35s; }
.of-hub.e4 .of-actions li:nth-child(1) em, .of-hub.e5 .of-actions li:nth-child(2) em, .of-hub.e6 .of-actions li:nth-child(3) em,
.of-hub.e7 .of-actions li:nth-child(4) em, .of-hub.e8 .of-actions li:nth-child(5) em { opacity: 1; }

.of-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 22px 0 0; font-size: 13.5px; color: var(--muet); }
.of-legende span { display: inline-flex; align-items: center; gap: 8px; }
.of-legende i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* ============================================================
   2) EN BREF : la réponse directe, en deux phrases (format lu par les moteurs et les IA)
   ============================================================ */
.of-bref { padding: 24px 0 8px; }
.of-bref__carte { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; max-width: 980px; margin: 0 auto; padding: 26px 30px; border-radius: 20px; background: var(--gris-carte); }
.of-bref__carte .meta { margin: 4px 0 0; }
.of-bref__carte p:last-child { margin: 0; font-size: 18px; line-height: 1.55; color: var(--texte); }
.of-bref__carte strong { font-weight: 500; color: var(--ink); }

/* ============================================================
   3) UNE SEMAINE DE RESPONSABLE FORMATION : à la main, puis avec Bobby. Les tâches se barrent et reçoivent leur statut ;
   ce qui reste à vous ressort. Interrupteur en pilule (of.js : .is-bobby), joué tout seul à l'arrivée à l'écran.
   ============================================================ */
.of-semaine__grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.of-semaine__txt .h { margin: 0; }
.of-semaine__txt .p { margin: 22px 0 0; }
.of-bascule { display: inline-flex; gap: 4px; margin-top: 30px; padding: 5px; border-radius: 999px; background: #ededea; }
.of-bascule button { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muet); font: inherit; font-size: 15px; cursor: pointer; transition: background .25s ease, color .25s ease; }
.of-bascule button[aria-pressed="true"] { background: #191919; color: #fff; }
.of-bascule button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.of-semaine__reste { margin: 26px 0 0; font-size: 16px; line-height: 1.55; color: var(--muet); opacity: .35; transition: opacity .5s ease; }
.of-semaine__reste b { font-weight: 500; color: var(--ink); }
.of-semaine.is-bobby .of-semaine__reste { opacity: 1; }

.of-semaine__toile { position: relative; display: grid; place-items: center; padding: 48px 36px; border-radius: 20px; background: var(--gris-cadre); overflow: hidden; isolation: isolate; }
.of-semaine__carte { width: 100%; max-width: 500px; padding: 18px; border-radius: 16px; background: #fff; color: #191919; box-shadow: none; }
.of-semaine__tete { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 14px; font-weight: 500; }
.of-semaine__tete small { font-size: 12px; font-weight: 400; color: #6b6b70; }
.of-taches { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.of-taches li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(11,11,11,.07); font-size: 13.5px; line-height: 1.3; transition: background-color .4s ease, border-color .4s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.of-taches small { font-size: 11.5px; color: #8a8a90; text-transform: uppercase; letter-spacing: .04em; }
.of-taches span { position: relative; justify-self: start; }
.of-taches span::after { content: ""; position: absolute; left: 0; top: 52%; height: 1.5px; width: 100%; background: rgba(25,25,25,.55); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * 90ms); }
.of-taches em { font-style: normal; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.of-taches em.t-fait { background: #eef7ef; color: var(--vert-ok); }
.of-taches em.t-prep { background: #fff1eb; color: #c2410c; }
.of-taches em.t-vous { background: #191919; color: #fff; }
.of-semaine.is-bobby .of-taches li:not(.is-humain) span::after { transform: scaleX(1); }
.of-semaine.is-bobby .of-taches li:not(.is-humain) span { color: #8a8a90; transition: color .4s ease calc(var(--i, 0) * 90ms); }
.of-semaine.is-bobby .of-taches em { opacity: 1; transform: none; }
.of-semaine.is-bobby .of-taches li.is-humain { border-color: rgba(251,77,23,.45); background: rgba(251,77,23,.05); }

/* ============================================================
   4) DE A À Z : récit collant. La frise des six moments se remplit au défilement ; le dossier de la stagiaire se complète,
   chaque document passe de « préparé » à « signé » ou « archivé ». of.js pose data-moment et --p sur .of-az.
   ============================================================ */
.of-az { position: relative; height: 340vh; }
.of-az__colle { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; padding-top: 70px; }
.of-az__grille { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; width: 100%; }
.of-frise { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0 0 30px; padding: 0; list-style: none; }
.of-frise::before, .of-frise::after { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; border-radius: 2px; background: #e3e3df; }
.of-frise::after { background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.of-frise li { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.25; color: var(--muet); }
.of-frise li b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #ededea; color: var(--ink); font-size: 12.5px; font-weight: 500; transition: background .35s ease, color .35s ease, transform .4s cubic-bezier(.3,1.4,.5,1); }
.of-frise li.is-fait b { background: #191919; color: #fff; }
.of-frise li.is-lu b { background: var(--orange); color: #fff; transform: scale(1.12); }
.of-frise li.is-lu { color: var(--ink); }
.of-moments { position: relative; display: grid; }
.of-moment { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.of-moment.is-lu { opacity: 1; transform: none; pointer-events: auto; transition-delay: .08s; }
.of-moment__sur { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--orange); }
.of-moment h3 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.of-moment p:not(.of-moment__sur) { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--muet); }
.of-moment .fo-mode { padding-top: 18px; }

.of-az__toile { position: relative; display: grid; place-items: center; height: min(640px, calc(100vh - 110px)); border-radius: 20px; background: var(--gris-cadre); overflow: hidden; isolation: isolate; }
.of-dossier { width: min(420px, 88%); padding: 14px 14px 12px; border-radius: 16px; background: #fff; color: #191919; box-shadow: none; }
.of-dossier__tete { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #efefed; }
.of-dossier__tete b { display: block; font-size: 15px; font-weight: 500; }
.of-dossier__tete small { display: block; font-size: 12px; color: #6b6b70; }
.of-dossier__compte { margin: 0 0 0 auto; text-align: right; font-size: 11.5px; line-height: 1.3; color: #6b6b70; white-space: nowrap; }
.of-dossier__compte b { font-size: 18px; color: #191919; font-variant-numeric: tabular-nums; }
.of-dossier__une { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 7px 10px; border-radius: 9px; background: #f6f6f4; font-size: 12px; color: #4a4a50; }
.of-dossier__une i { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); flex: none; }
.of-docs { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.of-docs li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; height: 30px; padding: 0 9px; border-radius: 9px; border: 1px solid rgba(11,11,11,.07); font-size: 12.5px; opacity: .28; transition: opacity .4s ease, border-color .3s ease, background-color .3s ease; }
.of-docs li svg { width: 16px; height: 16px; color: #8a8a90; }
.of-docs li em { font-style: normal; font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: #f1f1ef; color: #8a8a90; }
.of-docs li.is-prep { opacity: 1; }
.of-docs li.is-prep em { background: #fff1eb; color: #c2410c; }
.of-docs li.is-ok { opacity: 1; }
.of-docs li.is-ok em { background: #eef7ef; color: var(--vert-ok); }
.of-docs li.is-neuf { border-color: rgba(251,77,23,.4); background: rgba(251,77,23,.045); }

/* ============================================================
   5) DEUX CHEMINS : onglets en pilule de da-formation.css (formation.js, #foOnglets) ; ici trois situations.
   ============================================================ */
.of-chemins .fo-panneau__txt h3 { font-size: clamp(22px, 2.1vw, 28px); }
.of-chemins__note { max-width: 760px; margin: 30px auto 0; font-size: 16px; line-height: 1.6; color: var(--muet); text-align: center; }

/* ============================================================
   6) UN ÉVÉNEMENT, TOUT L'ORGANISME SUIT : l'onde. Au centre l'événement, autour les volets de Bobby qui s'allument tour à tour
   (cerveau.js, data-scene sur .of-onde__scene : e1 l'événement, e2 à e7 les volets, e8 « une seule mémoire »).
   ============================================================ */
.of-onde__scene { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 14px; padding: 48px; border-radius: var(--r); background: var(--gris-cadre); overflow: hidden; isolation: isolate; }
.of-evt { grid-column: 2; grid-row: 2; position: relative; z-index: 2; align-self: center; padding: 18px; border-radius: 16px; background: #191919; color: #fff; text-align: center; box-shadow: none; }
.of-evt small { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.of-evt b { display: block; margin-top: 8px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.of-evt span { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.7); }
.of-evt::before, .of-evt::after { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 18px; border: 1.5px solid rgba(251,77,23,.7); opacity: 0; }
.of-onde__scene.e1 .of-evt::before { animation: of-onde 2.4s cubic-bezier(.2,.7,.3,1) infinite; }
.of-onde__scene.e1 .of-evt::after { animation: of-onde 2.4s cubic-bezier(.2,.7,.3,1) 1.2s infinite; }
@keyframes of-onde { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5, 1.9); } }
.of-volet { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: #fff; color: #191919; box-shadow: none; opacity: .55; transform: scale(.97); transition: opacity .45s ease, transform .55s cubic-bezier(.3,1.3,.5,1), box-shadow .4s ease; }
.of-volet:hover { box-shadow: none; }
.of-volet__tete { display: flex; align-items: center; gap: 10px; }
.of-volet__tete .pil__tuile, .of-volet__tete .of-volet__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; }
.of-volet__tete .of-volet__ico { background: #f1f1ef; color: #191919; }
.of-volet__tete svg { width: 70%; height: 70%; }
.of-volet__tete b { display: block; font-size: 14px; font-weight: 500; }
.of-volet__tete small { display: block; font-size: 11.5px; color: #6b6b70; }
.of-volet p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #3a3a40; }
.of-volet em { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: #f1f1ef; color: #8a8a90; transition: background .3s ease, color .3s ease; }
.of-volet em i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.of-volet:nth-child(3) { grid-column: 1; grid-row: 1; } .of-volet:nth-child(4) { grid-column: 2; grid-row: 1; } .of-volet:nth-child(5) { grid-column: 3; grid-row: 1; }
.of-volet:nth-child(6) { grid-column: 3; grid-row: 2; } .of-volet:nth-child(7) { grid-column: 3; grid-row: 3; } .of-volet:nth-child(8) { grid-column: 2; grid-row: 3; }
.of-volet:nth-child(9) { grid-column: 1; grid-row: 3; } .of-volet:nth-child(10) { grid-column: 1; grid-row: 2; }
.of-onde__scene.e2 .of-volet:nth-child(3), .of-onde__scene.e3 .of-volet:nth-child(4), .of-onde__scene.e4 .of-volet:nth-child(5),
.of-onde__scene.e5 .of-volet:nth-child(6), .of-onde__scene.e6 .of-volet:nth-child(7), .of-onde__scene.e7 .of-volet:nth-child(8),
.of-onde__scene.e8 .of-volet:nth-child(9), .of-onde__scene.e9 .of-volet:nth-child(10) { opacity: 1; transform: none; }
.of-onde__scene.e2 .of-volet:nth-child(3) em, .of-onde__scene.e3 .of-volet:nth-child(4) em, .of-onde__scene.e4 .of-volet:nth-child(5) em,
.of-onde__scene.e5 .of-volet:nth-child(6) em, .of-onde__scene.e6 .of-volet:nth-child(7) em, .of-onde__scene.e7 .of-volet:nth-child(8) em,
.of-onde__scene.e8 .of-volet:nth-child(9) em, .of-onde__scene.e9 .of-volet:nth-child(10) em { background: #eef7ef; color: var(--vert-ok); }
.of-onde__scene[data-etape="2"] .of-volet:nth-child(3), .of-onde__scene[data-etape="3"] .of-volet:nth-child(4), .of-onde__scene[data-etape="4"] .of-volet:nth-child(5),
.of-onde__scene[data-etape="5"] .of-volet:nth-child(6), .of-onde__scene[data-etape="6"] .of-volet:nth-child(7), .of-onde__scene[data-etape="7"] .of-volet:nth-child(8),
.of-onde__scene[data-etape="8"] .of-volet:nth-child(9), .of-onde__scene[data-etape="9"] .of-volet:nth-child(10) { box-shadow: 0 0 0 2px var(--orange); }
a.of-volet { text-decoration: none; }
.of-onde__note { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 14px; color: var(--muet); text-align: center; }
.of-onde__note i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* ============================================================
   7) LES OUTILS : deux rangées de pastilles qui défilent en sens contraire (s'arrêtent au survol), puis les familles d'outils.
   ============================================================ */
.of-defile { display: grid; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 6px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.of-defile__rang { display: flex; gap: 12px; width: max-content; animation: of-defile 46s linear infinite; }
.of-defile__rang--2 { animation-direction: reverse; animation-duration: 52s; }
.of-defile:hover .of-defile__rang { animation-play-state: paused; }
@keyframes of-defile { to { transform: translateX(-50%); } }
.of-defile .of-outil { position: static; opacity: 1; transform: none; height: 46px; padding: 0 18px 0 9px; font-size: 14.5px; background: var(--gris-carte); color: var(--ink); box-shadow: none; }
.of-defile .of-outil img, .of-defile .of-outil .of-outil__ini { width: 28px; height: 28px; background: #fff; }
html[data-theme="nuit"] .of-defile .of-outil { background: #1f1f1f; color: #fff; --ink: #fff; }

.of-familles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 56px; }
.of-famille { padding: 22px 0; border-top: 1px solid var(--line, rgba(0,0,0,.1)); }
.of-famille h3 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.of-famille p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--muet); }
.of-outils__note { display: flex; gap: 14px; align-items: flex-start; max-width: 860px; margin: 40px auto 0; padding: 22px 26px; border-radius: 18px; background: var(--gris-carte); font-size: 16px; line-height: 1.55; color: var(--texte); }
.of-outils__note b { font-weight: 500; color: var(--ink); }
.of-outils__note .fo-lien { white-space: nowrap; }

/* ============================================================
   8) QUALIOPI : le tableau de bord en miniature (sept anneaux qui se remplissent) et la plaque du certificat.
   ============================================================ */
.of-anneaux { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 560px; }
.of-anneau { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: #4a4a50; text-align: center; }
.of-anneau svg { width: 100%; max-width: 64px; aspect-ratio: 1; transform: rotate(-90deg); }
.of-anneau circle { fill: none; stroke-width: 6; }
.of-anneau .fond { stroke: rgba(255,255,255,.55); }
.of-anneau .plein { stroke: #191919; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * 110ms); }
.of-anneau .prep { stroke: var(--orange); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * 110ms + 300ms); }
.of-anneaux.is-in .plein { stroke-dashoffset: calc(100 - var(--a)); }
.of-anneaux.is-in .prep { stroke-dashoffset: calc(100 - var(--b)); }
.of-anneau b { font-size: 12px; font-weight: 500; color: #191919; }
.of-qualiopi .cv-coffre__toile { display: grid; place-items: center; padding: 32px; }
.of-qualiopi__cle { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 18px 0 0; font-size: 13px; color: #fff; }
.of-qualiopi__cle span { display: inline-flex; align-items: center; gap: 7px; }
.of-qualiopi__cle i { width: 9px; height: 9px; border-radius: 50%; background: #191919; }
.of-qualiopi__cle i.o { background: var(--orange); }
.of-qualiopi__boite { display: grid; justify-items: center; gap: 14px; padding: 22px 18px 16px; border-radius: 18px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; }
.of-qualiopi__boite .of-qualiopi__cle { color: #191919; margin: 0; }

/* ============================================================
   9) VOLET PAR VOLET : la fiche éditoriale à filets fins de /formation (fo-ligne), avec un lien par volet
   ============================================================ */
.of-volets .fo-ligne dd p + p { margin-top: 10px; }
.of-volets .fo-ligne dd .fo-lien { font-size: 15px; }

/* ============================================================
   Téléphone, tablette, mouvement réduit
   ============================================================ */
@media (max-width: 1080px) {
  .of-hub { min-height: 720px; }
  .of-semaine__grille { gap: 40px; }
  .of-onde__scene { padding: 32px; }
}
@media (max-width: 960px), (prefers-reduced-motion: reduce) {
  /* le récit A à Z ne colle plus : les six moments s'empilent, chacun avec ses documents */
  .of-az { height: auto; }
  .of-az__colle { position: static; display: block; height: auto; padding: 0; }
  .of-az__grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .of-frise, .of-az__toile { display: none; }
  .of-moments { gap: 14px; }
  .of-moment { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; padding: 22px; border-radius: 20px; background: var(--gris-carte); }
  .of-moment__docs { display: flex !important; }
}
.of-moment__docs { display: none; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.of-moment__docs li { padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(11,11,11,.07); font-size: 13px; color: var(--ink); }
html[data-theme="nuit"] .of-moment__docs li { background: #2a2a2a; box-shadow: none; color: #fff; }

@media (max-width: 960px) {
  .of-scene { margin-top: 48px; padding: 28px 18px; }
  .of-hub { display: flex; flex-direction: column; align-items: stretch; gap: 18px; min-height: 0; }
  .of-hub__fils { display: none; }
  .of-hub__outils { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; order: -1; }
  .of-outil { position: relative; left: auto; top: auto; height: 34px; font-size: 12.5px; padding: 0 12px 0 6px; transform: scale(.94); }
  .of-outil img, .of-outil__ini { width: 22px; height: 22px; font-size: 9.5px; }
  .of-hub.is-in .of-outil { transform: none; }
  .of-outil.is-actif { transform: scale(1.04); }
  .of-fenetre { margin: 0 auto; }
  .of-semaine__grille { grid-template-columns: minmax(0, 1fr); }
  .of-onde__scene { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px; }
  .of-evt { grid-column: 1 / -1; grid-row: 1; }
  .of-volet:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  .of-familles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of-anneaux { gap: 6px; }
}
@media (max-width: 720px) {
  .of-scene { margin: 40px calc(var(--gutter) * -1 + 8px) 0; padding: 18px 10px; border-radius: 18px; }
  .of-hub__outils .of-outil:nth-child(n+10) { display: none; }
  .of-fenetre__corps { min-height: 0; padding: 12px; }
  .of-actions li { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 7px 8px; }
  .of-actions .of-outil__ini, .of-actions img { width: 22px; height: 22px; }
  .of-fin { flex-wrap: wrap; }
  .of-fin span { margin-left: 0; width: 100%; }
  .of-bref__carte { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px; }
  .of-bref__carte p:last-child { font-size: 16.5px; }
  .of-semaine__toile { margin: 0 calc(var(--gutter) * -1 + 8px); padding: 18px 10px; border-radius: 18px; }
  .of-taches li { grid-template-columns: 38px minmax(0, 1fr); }
  .of-taches em { grid-column: 2; justify-self: start; }
  .of-bascule { display: flex; width: 100%; }
  .of-bascule button { flex: 1; padding: 0 10px; }
  .of-onde__scene { grid-template-columns: minmax(0, 1fr); margin: 0 calc(var(--gutter) * -1 + 8px); padding: 14px 10px; border-radius: 18px; }
  .of-familles { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .of-outils__note { flex-direction: column; padding: 18px; }
  .of-anneaux { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
  .of-moment { padding: 18px; }
  .of-tete { text-align: left; }
  .of-tete .p { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .of-hub *, .of-semaine *, .of-onde__scene *, .of-anneau circle, .of-moment, .of-docs li { transition: none !important; animation: none !important; }
  .of-defile__rang { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .of-defile__rang [aria-hidden="true"] { display: none; }
  .of-defile { -webkit-mask-image: none; mask-image: none; margin: 0; }
}

/* ---------- Mode nuit : les surfaces grises de la page ---------- */
html[data-theme="nuit"] :is(.of-scene, .of-semaine__toile, .of-az__toile, .of-onde__scene) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="nuit"] .of-bascule { background: #1f1f1f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="nuit"] .of-bascule button[aria-pressed="true"] { background: #fff; color: #141414; }
html[data-theme="nuit"] .of-bascule button:focus-visible { outline-color: #fff; }
html[data-theme="nuit"] .of-frise::before { background: #333; }
html[data-theme="nuit"] .of-frise li b { background: #2a2a2a; color: #fff; }
html[data-theme="nuit"] .of-frise li.is-fait b { background: #fff; color: #141414; }
html[data-theme="nuit"] .of-frise li.is-lu b { background: var(--orange); color: #fff; }
html[data-theme="nuit"] .of-famille { border-top-color: rgba(255,255,255,.1); }
.of-qualiopi__date { margin: 0; font-size: 11.5px; color: #4a4a50; }
.of-qualiopi__titre { margin: 0; font-size: 13px; font-weight: 500; color: #191919; }
.of-dossier__compte b { display: inline; }

/* ---------- Logos des outils (09/10/2026, demande Axel : les vrais logos à la place des initiales) ----------
   Chaque logo officiel (images/logos-outils/, assets/da/) est posé sur un petit disque blanc cerclé : il reste lisible en mode
   nuit, et l'état « allumé » du premier écran se voit sur la pastille (anneau orange), jamais en recolorant le logo.
   Les entrées sans marque (signature électronique, votre site) gardent une icône au trait, sans faux logo. */
:is(.of-outil, .of-actions) img.of-logo { padding: 2px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,11,11,.09); border-radius: 50%; object-fit: contain; }
.of-outil.is-actif img.of-logo { background: #fff; box-shadow: inset 0 0 0 1px rgba(251,77,23,.45); }
.of-outil__ico { color: #191919; }
.of-outil__ico svg { width: 15px; height: 15px; }
.of-defile .of-outil__ico svg { width: 16px; height: 16px; }

/* ============================================================
   V2 (09/10/2026, demande Axel : page peaufinée, deux animations inspirées de saasleek.framer.ai transposées dans notre charte)
   ============================================================ */

/* ---------- DOCUMENTS : le jeu de feuilles qui se distribue ---------- */
.ofd__table { position: relative; height: 520px; border-radius: var(--r); background: var(--gris-cadre); overflow: hidden; isolation: isolate; }
.ofd__jeu { position: absolute; inset: 0; }
.ofd__feuille { --k: calc(var(--i) - 1.5); --l: min(258px, 21.5vw); position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; gap: 0; width: min(240px, 20vw); min-height: 330px; margin: 0; padding: 16px 16px 14px; border-radius: 12px; background: #fff; color: #191919; box-shadow: none; transform: translate(-50%, -50%) rotate(calc(-7deg + var(--i) * 4.5deg)); transition: transform .95s cubic-bezier(.2,.85,.25,1), box-shadow .3s ease; transition-delay: calc(var(--i) * 90ms); outline: none; cursor: default; }
.ofd__table.is-in .ofd__feuille { transform: translate(calc(-50% + var(--k) * var(--l)), calc(-50% + var(--d, 0px))) rotate(var(--r, 0deg)); }
.ofd__feuille:nth-child(1) { --r: -2.5deg; --d: 8px; } .ofd__feuille:nth-child(2) { --r: 1.5deg; --d: -10px; }
.ofd__feuille:nth-child(3) { --r: -1.2deg; --d: 6px; } .ofd__feuille:nth-child(4) { --r: 2.4deg; --d: -6px; }
.ofd__table.is-in .ofd__feuille:is(:hover, :focus-visible) { z-index: 3; transform: translate(calc(-50% + var(--k) * var(--l)), calc(-50% - 16px)) rotate(0deg) scale(1.04); box-shadow: none; transition-delay: 0s; transition-duration: .45s; }
.ofd__feuille:focus-visible { box-shadow: 0 0 0 2px var(--orange) !important; }
.ofd__entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #efefed; font-size: 12.5px; font-weight: 600; }
.ofd__logo { padding: 3px 7px; border-radius: 5px; border: 1px dashed #cfcfca; color: #9a9a96; font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.ofd__a { margin: 0 0 10px; font-size: 11.5px; color: #6b6b70; }
.ofd__infos { display: grid; gap: 7px; margin: 0; }
.ofd__infos dt { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: #8a8a90; }
.ofd__infos dd { margin: 1px 0 0; font-size: 12px; line-height: 1.35; color: #191919; }
.ofd__pj { margin: 12px 0 0; padding-top: 9px; border-top: 1px dashed #e3e3df; font-size: 10.5px; line-height: 1.4; color: #6b6b70; }
.ofd__signe { display: grid; gap: 3px; margin: 12px 0 0; padding: 9px 10px; border-radius: 8px; border: 1px dashed #e3c4b6; background: #fff8f4; font-size: 10.5px; color: #8a8a90; }
.ofd__signe b { font-size: 11.5px; font-weight: 500; color: #c2410c; }
.ofd__veille { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 11.5px; line-height: 1.35; }
.ofd__veille b { display: block; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--orange); }
.ofd__pied { display: flex; align-items: center; gap: 6px; margin: auto 0 0; padding-top: 12px; font-size: 10.5px; font-weight: 500; color: #c2410c; }
.ofd__pied i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.ofd__legendes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 30px 0 0; padding: 0; list-style: none; }
.ofd__legendes li { font-size: 14.5px; line-height: 1.5; color: var(--muet); }
.ofd__legendes b { display: block; margin-bottom: 4px; font-size: 15.5px; font-weight: 500; color: var(--ink); }
html[data-theme="nuit"] .ofd__table { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="nuit"] .ofd__feuille { color-scheme: light; }

/* ---------- LES FAMILLES D'OUTILS : logos et exemples d'actions ---------- */
.of-famille__logos { display: flex; gap: 6px; margin: 0 0 14px; }
.of-famille__logos img { width: 30px; height: 30px; box-sizing: border-box; padding: 3px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,11,11,.09); object-fit: contain; }
.of-famille ul { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.of-famille li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.5; color: var(--muet); }
.of-famille li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ---------- V2 : tablette et téléphone ---------- */
@media (max-width: 1080px) {
  .ofd__legendes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ofd__table { height: auto; padding: 26px 0; }
  .ofd__jeu { position: static; display: flex; gap: 12px; padding: 6px 18px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ofd__jeu::-webkit-scrollbar { display: none; }
  .ofd__feuille, .ofd__table.is-in .ofd__feuille, .ofd__table.is-in .ofd__feuille:is(:hover, :focus-visible) { position: relative; left: auto; top: auto; flex: none; width: 236px; transform: none; scroll-snap-align: center; transition: none; }
}
@media (max-width: 720px) {
  .ofd__legendes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ofd__feuille { transition: none !important; }
}

/* ============================================================
   V3 (09/10/2026, retour d'Axel) : les deux sections inspirées de saasleek, habillées avec la DA du site. On garde la mécanique
   (pilules d'étape qui se remplissent, maquette qui change, puces d'état ; titre collant, cartes qui s'éclairent, barre collante),
   tout le reste vient du site : barre de pilules des onglets de /formation, fenêtre blanche de l'application posée sur nos peintures,
   puces blanches façon notification, pastilles orange et grises, cartes grises, bouton du site. Jour et nuit par les variables
   de da-theme.css (--paper, --ink, --muet, --gris-carte, --gris-cadre, --card, --line) ; les maquettes restent blanches en nuit,
   comme toutes les fenêtres d'application du site.
   ============================================================ */

/* ---------- INSTALLATION ---------- */
.ofp__panneau { --duree: 6500ms; }
.ofp__pilules { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 22px; padding: 5px; border-radius: 999px; background: #ededea; overflow-x: auto; scrollbar-width: none; }
.ofp__pilules::-webkit-scrollbar { display: none; }
.ofp__pilule { position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muet); font: inherit; font-size: 15px; cursor: pointer; overflow: hidden; isolation: isolate; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.ofp__pilule:hover { color: var(--ink); }
.ofp__pilule:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ofp__pilule b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #deded8; color: var(--ink); font-size: 12.5px; font-weight: 500; transition: background .3s ease, color .3s ease; }
.ofp__pilule[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: none; }
.ofp__pilule[aria-selected="true"] b { background: var(--orange); color: #fff; }
.ofp__rempli { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, rgba(251,77,23,.03) 0%, rgba(251,77,23,.1) 55%, rgba(251,77,23,.24) 100%); transform-origin: 0 50%; transform: scaleX(0); }
.ofp__panneau.is-auto .ofp__pilule[aria-selected="true"] .ofp__rempli { animation: ofp-remplir var(--duree) cubic-bezier(.45,0,.55,1) forwards; }
.ofp__panneau.is-pause .ofp__pilule[aria-selected="true"] .ofp__rempli { animation-play-state: paused; }
.ofp__panneau:not(.is-auto) .ofp__pilule[aria-selected="true"] .ofp__rempli { transform: scaleX(1); }
@keyframes ofp-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ofp__corps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.ofp__toile { position: relative; display: grid; place-items: center; height: 540px; border-radius: 20px; background: var(--gris-cadre); overflow: hidden; isolation: isolate; }
.ofp__peint { opacity: 0; transform: scale(1.06); transition: opacity .8s ease, transform 1.4s cubic-bezier(.22,1,.36,1) !important; }
.ofp__panneau[data-etape="1"] .ofp__peint[data-n="1"], .ofp__panneau[data-etape="2"] .ofp__peint[data-n="2"], .ofp__panneau[data-etape="3"] .ofp__peint[data-n="3"] { opacity: 1; transform: none; }

/* la fenêtre de l'application : blanche, comme la fenêtre « Votre formation » de l'accueil, en jour comme en nuit */
.ofp__fenetre { --paper: #fff; --ink: #292929; --texte: #353535; --muet: rgba(53,53,53,.7); color-scheme: light; position: relative; z-index: 1; width: min(520px, 88%); border-radius: 16px; background: #fff; color: #0d0f14; font-size: 14px; line-height: 1.4; box-shadow: none; overflow: hidden; }
.ofp__barre { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; border-bottom: 1px solid #ececea; }
.ofp__barre-titre { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.ofp__barre-pas { display: flex; gap: 4px; margin-left: auto; }
.ofp__pas { font-size: 11.5px; white-space: nowrap; }
.ofp__pas b { width: 18px; height: 18px; font-size: 10.5px; }
.ofp__panneau[data-etape="1"] .ofp__pas[data-n="1"], .ofp__panneau[data-etape="2"] .ofp__pas[data-n="2"], .ofp__panneau[data-etape="3"] .ofp__pas[data-n="3"] { background: #fff1eb; color: #c2410c; }
.ofp__panneau[data-etape="1"] .ofp__pas[data-n="1"] b, .ofp__panneau[data-etape="2"] .ofp__pas[data-n="2"] b, .ofp__panneau[data-etape="3"] .ofp__pas[data-n="3"] b { background: var(--orange); color: #fff; }
.ofp__panneau[data-etape="2"] .ofp__pas[data-n="1"], .ofp__panneau[data-etape="3"] .ofp__pas[data-n="1"], .ofp__panneau[data-etape="3"] .ofp__pas[data-n="2"] { background: #f1f1ef; color: #191919; }
.ofp__panneau[data-etape="2"] .ofp__pas[data-n="1"] b, .ofp__panneau[data-etape="3"] .ofp__pas[data-n="1"] b, .ofp__panneau[data-etape="3"] .ofp__pas[data-n="2"] b { background: #191919; color: #fff; }
.ofp__ecran { position: relative; height: 312px; }
.ofp__scene { position: absolute; inset: 0; padding: 16px; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.ofp__panneau[data-etape="1"] .ofp__scene[data-n="1"], .ofp__panneau[data-etape="2"] .ofp__scene[data-n="2"], .ofp__panneau[data-etape="3"] .ofp__scene[data-n="3"] { opacity: 1; transform: none; transition-delay: .1s; }
.ofp__lab { margin: 0 0 10px; font-size: 13.5px; font-weight: 500; color: #191919; }
.ofp__lab small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: #6b6b70; }
.ofp__lignes, .ofp__fil { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ofp__lignes li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(11,11,11,.07); font-size: 13px; line-height: 1.25; }
.ofp__lignes img { width: 28px; height: 28px; box-sizing: border-box; padding: 3px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(11,11,11,.09); object-fit: contain; }
.ofp__lignes b, .ofp__fil b { display: block; font-weight: 500; }
.ofp__lignes small, .ofp__fil small { display: block; margin-top: 1px; font-size: 11px; color: #6b6b70; }
.ofp__etat { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: #f4f4f2; color: #6b6b70; font-size: 11px; font-style: normal; font-weight: 500; white-space: nowrap; }
.ofp__etat-a, .ofp__etat-b { grid-area: 1 / 2; }
.ofp__etat-b { opacity: 0; }
.ofp__tourne { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.6px solid var(--orange); border-right-color: transparent; animation: ofp-tourne .8s linear infinite; }
@keyframes ofp-tourne { to { transform: rotate(360deg); } }
.ofp__panneau[data-etape="1"] .ofp__lignes li .ofp__etat { animation: ofp-connecte .01s linear forwards; animation-delay: calc(1s + var(--i) * .6s); }
.ofp__panneau[data-etape="1"] .ofp__lignes li .ofp__tourne { animation: ofp-tourne .8s linear infinite, ofp-efface .01s linear forwards; animation-delay: 0s, calc(1s + var(--i) * .6s); }
.ofp__panneau[data-etape="1"] .ofp__lignes li .ofp__etat-a { animation: ofp-efface .25s ease forwards; animation-delay: calc(1s + var(--i) * .6s); }
.ofp__panneau[data-etape="1"] .ofp__lignes li .ofp__etat-b { animation: ofp-montre .3s ease forwards; animation-delay: calc(1s + var(--i) * .6s); }
@keyframes ofp-connecte { to { background: #eef7ef; color: #2f7d3e; } }
@keyframes ofp-efface { to { opacity: 0; width: 0; } }
@keyframes ofp-montre { to { opacity: 1; } }

/* étape 2 : les champs du modèle se remplissent, le processus s'allume */
.ofp__scene--deux { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 14px; align-content: start; }
.ofp__champs { display: grid; gap: 8px; margin: 0; }
.ofp__champs > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; font-size: 12.5px; }
.ofp__champs dt { color: #8a8a90; }
.ofp__champs dd { display: grid; margin: 0; color: #191919; }
.ofp__jeton, .ofp__valeur { grid-area: 1 / 1; justify-self: start; }
.ofp__jeton { padding: 1px 7px; border-radius: 6px; background: #fff1eb; color: #c2410c; font-size: 11.5px; }
.ofp__valeur { opacity: 0; transform: translateY(4px); font-weight: 500; }
.ofp__panneau[data-etape="2"] .ofp__jeton { animation: ofp-efface .3s ease forwards; animation-delay: calc(.9s + var(--i) * .45s); }
.ofp__panneau[data-etape="2"] .ofp__valeur { animation: ofp-pose .4s ease forwards; animation-delay: calc(1s + var(--i) * .45s); }
.ofp__ton { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #ececea; font-size: 11.5px; color: #8a8a90; }
.ofp__ton b { padding: 2px 9px; border-radius: 999px; background: #191919; color: #fff; font-weight: 500; }
.ofp__ton b.is-off { background: #f1f1ef; color: #b4b4b0; }
.ofp__etapes { padding: 12px; border-radius: 12px; background: #f6f6f4; }
.ofp__etapes ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: e; }
.ofp__etapes li { counter-increment: e; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #a0a0a4; }
.ofp__etapes li::before { content: counter(e); display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #e6e6e2; font-size: 10.5px; font-weight: 500; color: #6b6b70; }
.ofp__panneau[data-etape="2"] .ofp__etapes li { animation: ofp-allume .3s ease forwards; }
.ofp__panneau[data-etape="2"] .ofp__etapes li::before { animation: ofp-allume-n .3s ease forwards; }
.ofp__etapes li:nth-child(1), .ofp__etapes li:nth-child(1)::before { animation-delay: .9s !important; }
.ofp__etapes li:nth-child(2), .ofp__etapes li:nth-child(2)::before { animation-delay: 1.3s !important; }
.ofp__etapes li:nth-child(3), .ofp__etapes li:nth-child(3)::before { animation-delay: 1.7s !important; }
.ofp__etapes li:nth-child(4), .ofp__etapes li:nth-child(4)::before { animation-delay: 2.1s !important; }
.ofp__etapes li:nth-child(5), .ofp__etapes li:nth-child(5)::before { animation-delay: 2.5s !important; }
@keyframes ofp-allume { to { color: #191919; } }
@keyframes ofp-allume-n { to { background: #191919; color: #fff; } }

/* étape 3 : le fil du jour */
.ofp__fil li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(11,11,11,.07); font-size: 13px; line-height: 1.25; opacity: 0; transform: translateY(8px); }
.ofp__panneau[data-etape="3"] .ofp__fil li { animation: ofp-pose .5s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(.6s + var(--i) * .5s); }
.ofp__btn, .ofp__ok { font-style: normal; font-size: 11px; font-weight: 500; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.ofp__btn { background: #191919; color: #fff; }
.ofp__ok { background: #eef7ef; color: #2f7d3e; }

/* les puces posées sur la peinture : blanches, comme la notification « Application en service » de /formation */
.ofp__puce { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; color: #0d0f14; font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: none; opacity: 0; transform: translateY(10px) scale(.97); pointer-events: none; }
.ofp__puce--haut { top: 7%; right: 5%; }
.ofp__puce--bas { bottom: 7%; left: 5%; }
.ofp__puce-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: #eef7ef; }
.ofp__puce-ico > i { grid-area: 1 / 1; }
.ofp__puce-ico--orange { background: #fff1eb; }
.ofp__coche { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 9px; font-style: normal; }
.ofp__point { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(251,77,23,.2); animation: fo-pouls 1.6s ease-in-out infinite; }
.ofp__panneau[data-etape="1"] .ofp__puce[data-n="1"], .ofp__panneau[data-etape="2"] .ofp__puce[data-n="2"], .ofp__panneau[data-etape="3"] .ofp__puce[data-n="3"] { animation: ofp-pose .55s cubic-bezier(.3,1.3,.5,1) forwards, ofp-flotte 4.5s ease-in-out 1.2s infinite; }
.ofp__panneau .ofp__puce--haut { animation-delay: .5s, 1.1s !important; }
.ofp__panneau .ofp__puce--bas { animation-delay: 1.3s, 1.9s !important; }
@keyframes ofp-pose { to { opacity: 1; transform: none; } }
@keyframes ofp-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* étape 1 : « branchement en cours » devient « tous vos outils sont branchés » quand la dernière ligne est connectée */
.ofp__suivi { display: grid; }
.ofp__suivi-a, .ofp__suivi-b { grid-area: 1 / 1; }
.ofp__puce--suivi .ofp__puce-ico { background: #fff1eb; }
.ofp__puce--suivi .ofp__coche, .ofp__suivi-b { opacity: 0; }
.ofp__panneau[data-etape="1"] .ofp__puce--suivi .ofp__puce-ico { animation: ofp-vert .3s ease 3.4s forwards; }
.ofp__panneau[data-etape="1"] .ofp__puce--suivi .ofp__tourne { animation: ofp-tourne .8s linear infinite, ofp-efface .2s ease 3.4s forwards; }
.ofp__panneau[data-etape="1"] .ofp__suivi-a { animation: ofp-efface .25s ease 3.4s forwards; }
.ofp__panneau[data-etape="1"] .ofp__puce--suivi .ofp__coche, .ofp__panneau[data-etape="1"] .ofp__suivi-b { animation: ofp-montre .3s ease 3.5s forwards; }
@keyframes ofp-vert { to { background: #eef7ef; } }

/* le texte de l'étape */
.ofp__textes { padding: 8px 0; }
.ofp__texte[hidden] { display: none; }
.ofp__texte.is-entre { animation: ofp-texte .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes ofp-texte { from { opacity: 0; transform: translateY(12px); } }
.ofp__num { display: inline-flex; margin: 0 0 18px; padding: 4px 11px; border-radius: 999px; background: #fff1eb; color: #c2410c; font-size: 13px; font-weight: 500; }
.ofp__texte h3 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.ofp__texte > p:not(.ofp__num):not(.ofp__plus) { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--muet); }
.ofp__plus { padding-top: 20px; }
.ofp__lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 15.5px; transition: gap .25s ease, text-decoration-color .2s ease; }
.ofp__lien:hover { gap: 12px; }

/* ---------- SUR LE TERRAIN ---------- */
.ofv__grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.ofv__cote { align-self: stretch; }
.ofv__colle { position: sticky; top: 130px; }
.ofv__colle .h { margin: 0; }
.ofv__colle .p { max-width: 440px; margin: 20px 0 0; }
.ofv__colonne { display: grid; gap: 12px; }
.ofv__carte { --vu: 1; padding: 22px 24px 24px; border-radius: 24px; background: var(--gris-carte); opacity: calc(.3 + .7 * var(--vu)); transform: translateY(calc((1 - var(--vu)) * 24px)) scale(calc(.97 + .03 * var(--vu))); transform-origin: 50% 0; will-change: transform, opacity; }
.ofv__tete { display: flex; align-items: center; gap: 14px; }
.ofv__tuile, .ofv__photo { position: relative; display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--gris-cadre); overflow: hidden; isolation: isolate; object-fit: cover; }
.ofv__tuile svg { width: 32px; height: 32px; box-sizing: border-box; padding: 7px; border-radius: 50%; background: rgba(255,255,255,.92); color: #191919; box-shadow: none; }
.ofv__qui { margin: 0; }
.ofv__qui b { display: block; font-size: 16.5px; font-weight: 500; color: var(--ink); }
.ofv__qui small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muet); }
.ofv__citation { position: relative; margin: 18px 0 0; padding: 0 0 0 40px; font-size: 18px; line-height: 1.5; letter-spacing: -.01em; color: var(--ink); }
.ofv__guill { position: absolute; left: 2px; top: -8px; font: 400 54px/1 Georgia, "Times New Roman", serif; color: var(--orange); }
.ofv__reponse { margin: 18px 0 0 40px; padding-top: 14px; border-top: 1px solid var(--line, rgba(0,0,0,.1)); font-size: 15px; line-height: 1.55; color: var(--muet); }
.ofv__tag { display: inline-flex; margin-right: 8px; padding: 2px 9px; border-radius: 999px; background: #fff1eb; color: #c2410c; font-size: 12.5px; font-weight: 500; }
.ofv__barre { position: sticky; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 10px 10px 10px 14px; border-radius: 20px; background: var(--card, #fff); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line, rgba(0,0,0,.08)); }
.ofv__logos { display: flex; flex: none; }
.ofv__logos img { width: 32px; height: 32px; box-sizing: border-box; padding: 4px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--card, #fff), inset 0 0 0 1px rgba(11,11,11,.08); object-fit: contain; }
.ofv__logos img:first-child { margin-left: 0; }
.ofv__barre-txt { flex: 1; font-size: 15.5px; font-weight: 500; }
.ofv__barre-btn { flex: none; }

/* ---------- Mode nuit : mêmes ingrédients que les autres sections en nuit ---------- */
html[data-theme="nuit"] .ofp__pilules { background: #1f1f1f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="nuit"] .ofp__pilule b { background: #2f2f2f; color: #fff; }
html[data-theme="nuit"] .ofp__pilule[aria-selected="true"] { background: #3a3a3a; color: #fff; box-shadow: none; }
html[data-theme="nuit"] .ofp__pilule[aria-selected="true"] b { background: var(--orange); }
html[data-theme="nuit"] .ofp__pilule:focus-visible { outline-color: #fff; }
html[data-theme="nuit"] .ofp__rempli { background: linear-gradient(90deg, rgba(251,77,23,.05) 0%, rgba(251,77,23,.16) 55%, rgba(251,77,23,.38) 100%); }
html[data-theme="nuit"] .ofp__toile { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="nuit"] .ofp__num, html[data-theme="nuit"] .ofv__tag { background: rgba(251,77,23,.16); color: #ff9a74; }
html[data-theme="nuit"] .ofp__plus span { background: #1f1f1f; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html[data-theme="nuit"] .ofv__carte { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
html[data-theme="nuit"] .ofv__barre { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---------- V3 : tablette et téléphone ---------- */
@media (max-width: 960px) {
  .ofp__corps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ofp__toile { height: 480px; }
  .ofv__grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ofv__colle { position: static; }
}
@media (max-width: 720px) {
  .ofp__pilules { width: auto; margin: 0 calc(var(--gutter) * -1) 16px; padding: 5px var(--gutter); border-radius: 0; background: none; box-shadow: none !important; }
  .ofp__pilule { height: 38px; padding: 0 14px 0 6px; font-size: 14px; background: #ededea; }
  .ofp__pilule b { width: 24px; height: 24px; }
  html[data-theme="nuit"] .ofp__pilules { background: none; box-shadow: none; }
  html[data-theme="nuit"] .ofp__pilule { background: #1f1f1f; }
  html[data-theme="nuit"] .ofp__pilule[aria-selected="true"] { background: #3a3a3a; }
  .ofp__pilule[aria-selected="true"] { background: #191919; color: #fff; }
  .ofp__toile { height: 440px; margin: 0 calc(var(--gutter) * -1 + 8px); border-radius: 18px; }
  .ofp__fenetre { width: 92%; }
  .ofp__barre-pas { display: none; }
  .ofp__ecran { height: 286px; }
  .ofp__scene { padding: 12px; }
  .ofp__lignes li { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; padding: 7px 8px; font-size: 12.5px; }
  .ofp__lignes img { width: 24px; height: 24px; }
  .ofp__lignes small, .ofp__fil small { display: none; }
  .ofp__etat { padding: 3px 7px; font-size: 10.5px; }
  .ofp__scene--deux { grid-template-columns: minmax(0, 1fr); }
  .ofp__etapes { display: none; }
  .ofp__fil li { padding: 9px 10px; font-size: 12.5px; }
  .ofp__puce { font-size: 12px; padding: 6px 11px 6px 6px; gap: 8px; }
  .ofp__puce-ico { width: 24px; height: 24px; }
  .ofp__puce--haut { top: 3.5%; right: 4%; }
  .ofp__puce--bas { bottom: 3.5%; left: 4%; }
  .ofp__texte h3 { font-size: 26px; }
  .ofv__carte { padding: 18px 18px 20px; border-radius: 20px; }
  .ofv__tuile { width: 48px; height: 48px; border-radius: 14px; }
  .ofv__tuile svg { width: 28px; height: 28px; padding: 6px; }
  .ofv__citation { padding-left: 32px; font-size: 16.5px; }
  .ofv__guill { font-size: 44px; left: 0; }
  .ofv__reponse { margin-left: 0; }
  .ofv__barre { bottom: 10px; flex-wrap: wrap; }
  .ofv__logos img:nth-child(n+4) { display: none; }
  .ofv__barre-txt { font-size: 14.5px; }
  .ofv__barre-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ofp__panneau *, .ofv__carte { animation: none !important; transition: none !important; }
  .ofp__etat-a, .ofp__tourne, .ofp__suivi-a { display: none; } .ofp__etat-b, .ofp__suivi-b, .ofp__puce--suivi .ofp__coche { opacity: 1; } .ofp__etat { background: #eef7ef; color: #2f7d3e; }
  .ofp__fil li, .ofp__valeur { opacity: 1; transform: none; } .ofp__jeton { opacity: 0; }
  .ofp__panneau[data-etape="1"] .ofp__puce[data-n="1"], .ofp__panneau[data-etape="2"] .ofp__puce[data-n="2"], .ofp__panneau[data-etape="3"] .ofp__puce[data-n="3"] { opacity: 1; transform: none; }
  .ofp__etapes li { color: #191919; } .ofp__etapes li::before { background: #191919; color: #fff; }
  .ofp__puce--suivi .ofp__puce-ico { background: #eef7ef; }
  .ofv__carte { opacity: 1; transform: none; }
}

/* ---------- V3 : « Un outil vous freine », la fenêtre « Ce qui coince » en cadre foncé (comme « Nous travaillons en local »
   sur /securite : verre fumé sur la peinture, bord blanc fin, étiquette blanche en haut, pastille fumée en bas), agrandie ---------- */
.of-panneau--cadre { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); max-width: 1040px; gap: 40px; }
.of-cadre { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 540px; min-height: 400px; margin: 0; padding: 22px 22px 20px; border-radius: 22px; background: rgba(20,20,20,.3); border: 2px solid #fff; color: #fff; font-size: 14px; line-height: 1.4; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: none; }
.of-cadre__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.of-cadre__lab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border-radius: 999px; background: #fff; color: #191919; font-size: 13.5px; }
.of-cadre__lab svg { width: 16px; height: 16px; }
.of-cadre__lab b { font-weight: 500; }
.of-cadre__tete small { font-size: 13px; color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.of-cadre__tete em { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(18,18,18,.55); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 12px; font-style: normal; font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.of-cadre__tete em i { width: 7px; height: 7px; border-radius: 50%; background: #4cc02b; box-shadow: 0 0 0 3px rgba(76,192,43,.25); animation: fo-pouls 2s ease-in-out infinite; }
.of-cadre ol { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.of-cadre li { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(18,18,18,.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; opacity: .55; transform: translateX(-8px); transition: opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .35s ease, background-color .35s ease; }
.of-cadre li b { display: block; font-size: 15.5px; font-weight: 500; }
.of-cadre li small { display: block; margin-top: 2px; font-size: 13px; color: rgba(255,255,255,.72); }
.of-cadre .fo-flux__n { width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.16); color: #fff; font-size: 13px; }
.of-cadre.e1 li:nth-child(1), .of-cadre.e2 li:nth-child(2), .of-cadre.e3 li:nth-child(3) { opacity: 1; transform: none; }
.of-cadre.e1 li:nth-child(1) .fo-flux__n, .of-cadre.e2 li:nth-child(2) .fo-flux__n, .of-cadre.e3 li:nth-child(3) .fo-flux__n { background: #fff; color: #191919; }
.of-cadre[data-etape="1"] li:nth-child(1), .of-cadre[data-etape="2"] li:nth-child(2), .of-cadre[data-etape="3"] li:nth-child(3) { border-color: rgba(251,77,23,.85); background: rgba(251,77,23,.22); }
.of-cadre[data-etape="1"] li:nth-child(1) .fo-flux__n, .of-cadre[data-etape="2"] li:nth-child(2) .fo-flux__n, .of-cadre[data-etape="3"] li:nth-child(3) .fo-flux__n { background: var(--orange); color: #fff; }
.of-cadre__pied.fo-ok { align-self: center; gap: 9px; margin: auto 0 0 !important; padding: 9px 16px 9px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(18,18,18,.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 13.5px; }
.of-cadre__pied.fo-ok i { width: 8px; height: 8px; border-radius: 50%; background: #4cc02b; box-shadow: 0 0 0 4px rgba(76,192,43,.22); }
.of-cadre.e4 .of-cadre__pied { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .of-panneau--cadre { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 560px; }
  .of-cadre { max-width: none; min-height: 0; }
}
@media (max-width: 720px) {
  .of-cadre { padding: 16px 14px 14px; border-radius: 18px; gap: 12px; }
  .of-cadre__tete em { margin-left: 0; }
  .of-cadre li { padding: 12px; gap: 12px; }
  .of-cadre li b { font-size: 14.5px; }
  .of-cadre__pied.fo-ok { font-size: 12.5px; align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .of-cadre li, .of-cadre__pied { opacity: 1 !important; transform: none !important; transition: none !important; }
  .of-cadre__tete em i { animation: none; }
}