/* ============================================================
   OPTERIA : page « Critères Qualiopi automatisables » (/organismes-de-formation/criteres-qualiopi, 09/10/2026, demande Axel).
   Les 7 critères et les 33 indicateurs du référentiel national qualité (en vigueur au 1er novembre 2026), passés au crible :
   ce que Bobby fait, ce qu'il prépare pour vous, ce qui reste à vous. Architecture gleap.ai, DA du site : premier écran centré
   avec un tableau de bord d'audit vivant sur la peinture, réponse directe, nouveautés, explorateur à colonne collante et filtres
   en pilule, trois chantiers en cartes grises, fiche à filets fins, questions.
   Chargée après da-cerveau.css, da-formation.css et da-of.css (anneaux, pastilles, encart « en bref »). Animations : of-criteres.js
   (filtres, colonne collante, compteurs) et cerveau.js (scènes data-scene). Tout est posé d'emblée en mouvement réduit.
   ============================================================ */

html[data-theme="nuit"] :is(.ofc-tdb, .ofc-fil, .ofc-site, .ofc-mail) {
  --paper: #fff; --ink: #292929; --texte: #353535; --muet: rgba(53,53,53,.7); --line: rgba(0,0,0,.12); color-scheme: light;
}

/* ---------- Les trois statuts : mêmes couleurs partout sur la page ---------- */
.ofc-statut { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 500; white-space: nowrap; }
.ofc-statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ofc-statut--auto { background: #eef7ef; color: #2f7d3e; }
.ofc-statut--prep { background: #fff1eb; color: #c2410c; }
.ofc-statut--humain { background: #ededea; color: #4a4a50; }
html[data-theme="nuit"] .ofc-statut--humain { background: #2a2a2a; color: #d6d6d3; }
html[data-theme="nuit"] .ofc-statut--auto { background: rgba(58,166,85,.16); color: #7fd394; }
html[data-theme="nuit"] .ofc-statut--prep { background: rgba(251,77,23,.16); color: #ff9a74; }

/* ============================================================
   1) PREMIER ÉCRAN : le tableau de bord d'audit. À gauche les 7 critères dont la jauge se remplit, à droite le fil des preuves
   qui se rangent toutes seules (cerveau.js, data-scene : e1 à e7 les critères, e2 à e6 les preuves, e8 la synthèse).
   ============================================================ */
.ofc-hero .d { max-width: 960px; margin-left: auto; margin-right: auto; }
.ofc-scene { position: relative; display: grid; place-items: center; margin-top: 64px; padding: 64px 48px; border-radius: var(--r); background: var(--gris-cadre); overflow: hidden; isolation: isolate; text-align: left; }
.ofc-tdb { width: min(940px, 100%); border-radius: 16px; background: #fff; color: #191919; box-shadow: none; overflow: hidden; }
.ofc-tdb__barre { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; border-bottom: 1px solid #efefed; font-size: 14px; font-weight: 500; }
.ofc-tdb__barre .fo-studio__points { margin-right: 6px; }
.ofc-tdb__barre small { margin-left: auto; font-size: 12px; font-weight: 400; color: #6b6b70; }
.ofc-tdb__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.ofc-tdb__crit { margin: 0; padding: 14px 18px; list-style: none; border-right: 1px solid #efefed; }
.ofc-tdb__crit li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 82px; align-items: center; gap: 10px; height: 42px; font-size: 13px; }
.ofc-tdb__crit li b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #f1f1ef; font-size: 11.5px; font-weight: 500; }
.ofc-tdb__crit li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofc-jauge { position: relative; height: 6px; border-radius: 6px; background: #efefed; overflow: hidden; }
.ofc-jauge i, .ofc-jauge u { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.ofc-jauge u { width: var(--b); background: var(--orange); }
.ofc-jauge i { width: var(--a); background: #191919; }
.ofc-tdb.e1 .ofc-tdb__crit li:nth-child(1) :is(i, u), .ofc-tdb.e2 .ofc-tdb__crit li:nth-child(2) :is(i, u), .ofc-tdb.e3 .ofc-tdb__crit li:nth-child(3) :is(i, u),
.ofc-tdb.e4 .ofc-tdb__crit li:nth-child(4) :is(i, u), .ofc-tdb.e5 .ofc-tdb__crit li:nth-child(5) :is(i, u), .ofc-tdb.e6 .ofc-tdb__crit li:nth-child(6) :is(i, u),
.ofc-tdb.e7 .ofc-tdb__crit li:nth-child(7) :is(i, u) { transform: none; }
.ofc-tdb__droite { display: flex; flex-direction: column; padding: 14px 18px; }
.ofc-tdb__lab { margin: 0 0 10px; font-size: 12px; color: #6b6b70; }
.ofc-preuves { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ofc-preuves li { display: grid; grid-template-columns: 30px 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: 12.5px; line-height: 1.3; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .3s ease, background-color .3s ease; }
.ofc-preuves li > b { display: grid; place-items: center; height: 22px; border-radius: 6px; background: #f1f1ef; font-size: 10.5px; font-weight: 500; }
.ofc-preuves li small { display: block; color: #6b6b70; font-size: 11px; }
.ofc-tdb.e2 .ofc-preuves li:nth-child(1), .ofc-tdb.e3 .ofc-preuves li:nth-child(2), .ofc-tdb.e4 .ofc-preuves li:nth-child(3),
.ofc-tdb.e5 .ofc-preuves li:nth-child(4), .ofc-tdb.e6 .ofc-preuves li:nth-child(5) { opacity: 1; transform: none; }
.ofc-tdb[data-etape="2"] .ofc-preuves li:nth-child(1), .ofc-tdb[data-etape="3"] .ofc-preuves li:nth-child(2), .ofc-tdb[data-etape="4"] .ofc-preuves li:nth-child(3),
.ofc-tdb[data-etape="5"] .ofc-preuves li:nth-child(4), .ofc-tdb[data-etape="6"] .ofc-preuves li:nth-child(5) { border-color: rgba(251,77,23,.4); background: rgba(251,77,23,.045); }
.ofc-tdb__synthese { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid #ececea; font-size: 12.5px; color: #191919; opacity: 0; transform: translateY(5px); transition: opacity .45s ease, transform .5s ease; }
.ofc-tdb__synthese i { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 10px; font-style: normal; }
.ofc-tdb.e8 .ofc-tdb__synthese { opacity: 1; transform: none; }
.ofc-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 22px 0 0; }

/* ============================================================
   2) CE QUI CHANGE AU 1er NOVEMBRE 2026 : cinq cartes, la nouvelle en orange
   ============================================================ */
.ofc-change__grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ofc-change__carte { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px 22px; border-radius: 20px; background: var(--gris-carte); }
.ofc-change__carte b { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #191919; color: #fff; font-size: 14px; font-weight: 500; }
.ofc-change__carte--neuf b { background: var(--orange); }
.ofc-change__carte h3 { margin: 6px 0 0; font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--ink); }
.ofc-change__carte p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muet); }
.ofc-change__carte em { align-self: flex-start; margin-top: auto; font-style: normal; font-size: 12px; font-weight: 500; color: var(--orange); }
.ofc-change__source { margin: 18px 0 0; font-size: 13.5px; color: var(--muet); text-align: center; }
html[data-theme="nuit"] .ofc-change__carte b { background: #fff; color: #141414; }
html[data-theme="nuit"] .ofc-change__carte--neuf b { background: var(--orange); color: #fff; }

/* ============================================================
   3) L'EXPLORATEUR : colonne collante (les 7 critères et leur anneau) ; à droite, les filtres en pilule et les indicateurs
   dépliables. of-criteres.js pose data-filtre sur .ofc, is-actif sur le critère lu, et met à jour les compteurs.
   ============================================================ */
.ofc-explo__grille { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.ofc-nav { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 2px; }
.ofc-nav__titre { margin: 0 0 12px; font-size: 13px; color: var(--muet); }
.ofc-nav a { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 10px 7px 6px; border-radius: 12px; color: var(--texte); text-decoration: none; font-size: 14.5px; line-height: 1.3; opacity: .62; transition: opacity .25s ease, background-color .25s ease; }
.ofc-nav a:hover { opacity: 1; }
.ofc-nav a.is-actif { opacity: 1; background: var(--gris-carte); }
.ofc-nav a small { display: block; font-size: 12px; color: var(--muet); }
.ofc-mini { position: relative; width: 38px; height: 38px; }
.ofc-mini svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ofc-mini circle { fill: none; stroke-width: 4; }
.ofc-mini .fond { stroke: #e3e3df; }
.ofc-mini .prep { stroke: var(--orange); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--b)); stroke-linecap: round; }
.ofc-mini .plein { stroke: #191919; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--a)); stroke-linecap: round; }
.ofc-mini b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--ink); }
html[data-theme="nuit"] .ofc-mini .fond { stroke: #333; }
html[data-theme="nuit"] .ofc-mini .plein { stroke: #fff; }
.ofc-nav__note { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line, rgba(0,0,0,.1)); font-size: 12.5px; line-height: 1.5; color: var(--muet); }

.ofc-filtres { position: sticky; top: 88px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 26px; padding: 10px 0; background: var(--paper); }
.ofc-pilules { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: #ededea; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ofc-pilules::-webkit-scrollbar { display: none; }
.ofc-pilules button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: var(--muet); font: inherit; font-size: 14.5px; cursor: pointer; transition: background .25s ease, color .25s ease; }
.ofc-pilules button:hover { color: var(--ink); }
.ofc-pilules button[aria-pressed="true"] { background: #191919; color: #fff; }
.ofc-pilules button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ofc-pilules button span { font-variant-numeric: tabular-nums; opacity: .7; }
.ofc-pilules button i { width: 7px; height: 7px; border-radius: 50%; }
.ofc-filtres__compte { font-size: 13.5px; color: var(--muet); }
html[data-theme="nuit"] .ofc-pilules { background: #1f1f1f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
html[data-theme="nuit"] .ofc-pilules button[aria-pressed="true"] { background: #fff; color: #141414; }
html[data-theme="nuit"] .ofc-pilules button:focus-visible { outline-color: #fff; }

.ofc-crit { padding: 0 0 56px; scroll-margin-top: 150px; }
.ofc-crit__tete { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; margin: 0 0 18px; }
.ofc-crit__tete .ofc-mini { width: 64px; height: 64px; }
.ofc-crit__tete .ofc-mini b { font-size: 18px; }
.ofc-crit__tete .ofc-mini circle { stroke-width: 3.2; }
.ofc-crit__sur { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--orange); }
.ofc-crit h2 { margin: 0; font-size: clamp(24px, 2.3vw, 30px); font-weight: 400; letter-spacing: -.03em; line-height: 1.18; color: var(--ink); }
.ofc-crit__officiel { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muet); font-style: italic; }
.ofc-crit__resume { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--texte); }
.ofc-crit__compte { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }

.ofc-ind { border-top: 1px solid var(--line, rgba(0,0,0,.1)); }
.ofc-ind:last-child { border-bottom: 1px solid var(--line, rgba(0,0,0,.1)); }
.ofc-ind summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; align-items: center; gap: 14px; padding: 16px 4px; cursor: pointer; list-style: none; }
.ofc-ind summary::-webkit-details-marker { display: none; }
.ofc-ind summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.ofc-ind__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--gris-carte); color: var(--ink); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; transition: background .25s ease, color .25s ease; }
.ofc-ind__lib { font-size: 16.5px; line-height: 1.4; color: var(--ink); }
.ofc-ind__lib small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--orange); }
.ofc-ind__plus { position: relative; width: 14px; height: 14px; justify-self: center; }
.ofc-ind__plus::before, .ofc-ind__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 2px; background: var(--ink); transition: transform .3s ease; }
.ofc-ind__plus::after { transform: rotate(90deg); }
.ofc-ind[open] .ofc-ind__plus::after { transform: rotate(0); }
.ofc-ind[open] .ofc-ind__n, .ofc-ind summary:hover .ofc-ind__n { background: #191919; color: #fff; }
html[data-theme="nuit"] .ofc-ind[open] .ofc-ind__n, html[data-theme="nuit"] .ofc-ind summary:hover .ofc-ind__n { background: #fff; color: #141414; }
.ofc-ind__corps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 0 20px 58px; }
.ofc-ind[open] .ofc-ind__corps { animation: ofc-ouvre .45s cubic-bezier(.22,1,.36,1); }
@keyframes ofc-ouvre { from { opacity: 0; transform: translateY(-6px); } }
.ofc-ind__ref { grid-column: 1 / -1; margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--muet); }
.ofc-ind__ref b { font-weight: 500; color: var(--texte); }
.ofc-case { padding: 14px 16px; border-radius: 14px; background: var(--gris-carte); }
.ofc-case h3 { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ink); }
.ofc-case p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--texte); }
.ofc-case--bobby { background: #191919; }
.ofc-case--bobby h3 { color: #fff; } .ofc-case--bobby p { color: rgba(255,255,255,.82); }
html[data-theme="nuit"] .ofc-case--bobby { background: #fff; }
html[data-theme="nuit"] .ofc-case--bobby h3 { color: #141414; } html[data-theme="nuit"] .ofc-case--bobby p { color: #353535; }

/* le filtre : on ne garde que les indicateurs du statut choisi ; un critère sans indicateur restant se replie sur son titre */
.ofc[data-filtre="auto"] .ofc-ind:not([data-type="auto"]), .ofc[data-filtre="prep"] .ofc-ind:not([data-type="prep"]),
.ofc[data-filtre="humain"] .ofc-ind:not([data-type="humain"]) { display: none; }
.ofc-crit.is-vide .ofc-crit__vide { display: block; }
.ofc-crit__vide { display: none; margin: 0; padding: 14px 4px; border-top: 1px solid var(--line, rgba(0,0,0,.1)); font-size: 14.5px; color: var(--muet); }

/* ============================================================
   4) TROIS CHANTIERS QUI SE FONT TOUT SEULS : veille, site, preuves dans les mails (cartes grises de da-cerveau.css)
   ============================================================ */
.ofc-fil li, .ofc-site__ligne, .ofc-mail__ligne { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(11,11,11,.07); font-size: 12.5px; line-height: 1.3; }
.ofc-fil ul { display: grid; gap: 6px; margin-top: 10px !important; }
.ofc-fil li small, .ofc-site__ligne small, .ofc-mail__ligne small { display: block; font-size: 11px; color: #6b6b70; }
.ofc-fil li em, .ofc-site__ligne em, .ofc-mail__ligne em { margin-left: auto; flex: none; font-style: normal; font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: #eef7ef; color: #2f7d3e; }
.ofc-fil li { opacity: 0; transform: translateY(6px); }
.ofc-fil.e1 li:nth-child(1), .ofc-fil.e2 li:nth-child(2), .ofc-fil.e3 li:nth-child(3) { opacity: 1; transform: none; }
.ofc-fil .fo-ok, .ofc-site .fo-ok, .ofc-mail .fo-ok { margin-top: 10px !important; }
.ofc-fil.e4 .fo-ok, .ofc-site.e3 .fo-ok, .ofc-mail.e3 .fo-ok { opacity: 1; transform: none; }
.ofc-site__ligne { margin-top: 10px; }
.ofc-site__val { position: relative; display: grid; margin-left: auto; text-align: right; }
.ofc-site__val span { grid-area: 1 / 1; transition: opacity .4s ease, transform .45s ease; }
.ofc-site__val span:last-child { opacity: 0; transform: translateY(6px); font-weight: 500; color: #2f7d3e; }
.ofc-site.e1 .ofc-site__ligne:nth-of-type(1) .ofc-site__val span:first-child, .ofc-site.e2 .ofc-site__ligne:nth-of-type(2) .ofc-site__val span:first-child { opacity: 0; transform: translateY(-6px); text-decoration: line-through; }
.ofc-site.e1 .ofc-site__ligne:nth-of-type(1) .ofc-site__val span:last-child, .ofc-site.e2 .ofc-site__ligne:nth-of-type(2) .ofc-site__val span:last-child { opacity: 1; transform: none; }
.ofc-mail__ligne { margin-top: 10px; transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.ofc-mail__dossier { opacity: .35; }
.ofc-mail.e1 .ofc-mail__msg { transform: translateY(46px) scale(.96); opacity: 0; }
.ofc-mail.e2 .ofc-mail__dossier { opacity: 1; border-color: rgba(58,166,85,.45); background: rgba(58,166,85,.05); }
.ofc-mail__dossier em { opacity: 0; transition: opacity .3s ease; }
.ofc-mail.e2 .ofc-mail__dossier em { opacity: 1; }

/* ============================================================
   5) À QUI S'APPLIQUE QUOI, ET CE QUE BOBBY NE FAIT PAS : fiche à filets fins de /formation (fo-ligne)
   ============================================================ */
.ofc-limites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 40px; }
.ofc-limites > div { padding: 24px 26px; border-radius: 20px; background: var(--gris-carte); }
.ofc-limites h3 { margin: 0 0 12px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.ofc-limites ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ofc-limites li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--texte); }
.ofc-limites li i { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #191919; color: #fff; font-size: 10px; font-style: normal; }
.ofc-limites .ofc-limites__non i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--muet); }
html[data-theme="nuit"] .ofc-limites li i { background: #fff; color: #141414; }
html[data-theme="nuit"] .ofc-limites .ofc-limites__non i { background: transparent; color: var(--muet); }

.ofc-retour { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 30px 34px; border-radius: 20px; background: var(--gris-carte); }
.ofc-retour h2 { margin: 0; font-size: clamp(22px, 2vw, 26px); font-weight: 400; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.ofc-retour p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--muet); }

/* ============================================================
   Tablette, téléphone, mouvement réduit
   ============================================================ */
@media (max-width: 1080px) {
  .ofc-change__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ofc-explo__grille { grid-template-columns: 230px minmax(0, 1fr); gap: 36px; }
  .ofc-ind__corps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .ofc-scene { margin-top: 48px; padding: 28px 18px; }
  .ofc-tdb__corps { grid-template-columns: minmax(0, 1fr); }
  .ofc-tdb__crit { border-right: 0; border-bottom: 1px solid #efefed; }
  .ofc-explo__grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ofc-nav { position: static; flex-direction: row; gap: 6px; margin: 0 calc(var(--gutter) * -1) 18px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .ofc-nav::-webkit-scrollbar { display: none; }
  .ofc-nav__titre, .ofc-nav__note { display: none; }
  .ofc-nav a { flex: none; grid-template-columns: 30px auto; gap: 8px; padding: 6px 12px 6px 6px; background: var(--gris-carte); opacity: 1; font-size: 13.5px; }
  .ofc-nav a small { display: none; }
  .ofc-nav .ofc-mini { width: 30px; height: 30px; }
  .ofc-nav .ofc-mini b { font-size: 11px; }
  .ofc-filtres { top: 74px; }
  .ofc-limites { grid-template-columns: minmax(0, 1fr); }
  .ofc-retour { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ofc-scene { margin: 40px calc(var(--gutter) * -1 + 8px) 0; padding: 14px 10px; border-radius: 18px; }
  .ofc-tdb__barre small { display: none; }
  .ofc-tdb__crit { padding: 8px 12px; }
  .ofc-tdb__crit li { grid-template-columns: 22px minmax(0, 1fr) 64px; height: 36px; font-size: 12.5px; }
  .ofc-tdb__droite { padding: 12px; }
  .ofc-preuves li { grid-template-columns: 30px minmax(0, 1fr); }
  .ofc-preuves li .ofc-statut { grid-column: 2; justify-self: start; }
  .ofc-change__grille { grid-template-columns: minmax(0, 1fr); }
  .ofc-filtres { margin: 0 calc(var(--gutter) * -1) 18px; padding: 8px var(--gutter); }
  .ofc-filtres__compte { display: none; }
  .ofc-crit__tete { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .ofc-crit__tete .ofc-mini { width: 48px; height: 48px; }
  .ofc-crit__tete .ofc-mini b { font-size: 15px; }
  .ofc-ind summary { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 12px; padding: 14px 0; }
  .ofc-ind summary .ofc-statut { grid-column: 2; grid-row: 2; justify-self: start; }
  .ofc-ind__plus { grid-column: 3; grid-row: 1; }
  .ofc-ind__n { width: 32px; height: 32px; font-size: 13px; }
  .ofc-ind__lib { font-size: 15.5px; }
  .ofc-ind__corps { padding: 0 0 18px; }
  .ofc-limites > div { padding: 20px; }
  .ofc-retour { padding: 22px 20px; }
  .ofc-retour .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ofc-tdb *, .ofc-fil *, .ofc-site *, .ofc-mail *, .ofc-ind__corps { transition: none !important; animation: none !important; }
}