/* ============================================================
   OPTERIA : page « Agence IA pour organisme de formation : le comparatif 2026 » (/organismes-de-formation/agence-ia, 28/10/2026,
   demande Axel, point 35). Reprend les composants de la page logiciel (da-logiciel-of.css : configurateur, tableau filtrable,
   fiches en tiroir, critères) et ajoute : l'outil d'aide au choix (six types d'offre qui se réordonnent, questions à poser),
   les six familles avec icône, la ligne d'OpterIA sans mise en avant.
   Une seule police (Switzer), couleurs par variables (mode nuit), aucune ombre portée ni halo : filets de 1 px seulement.
   ============================================================ */

/* ---------- Héros : les logos, sans classement ---------- */
.aof-strate .lof-strate__logos { flex-wrap: wrap; justify-content: center; }
.aof-strate__couche { padding: 0 14px; color: #55554f; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
html[data-theme="nuit"] .aof-strate__couche { background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* ---------- Icônes des types d'offre ---------- */
.aof-ico { display: grid; place-items: center; background: var(--lof-creme); color: #c2370c; }
.aof-ico svg { width: 58%; height: 58%; }

/* ---------- L'outil : la liste des six types ---------- */
.aof-couche ol { padding: 6px 8px 8px; }
.aof-couche li[data-id] { align-items: start; transition: transform .7s var(--lof-doux), background .3s ease, opacity .4s ease; }
.aof-couche li[data-id] .aof-ico { width: 30px; height: 30px; border-radius: 9px; margin-top: 1px; }
.aof-couche li.is-loin { opacity: .5; }
.aof-ex { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: #8b8b85; }
.aof-ex::before { content: "Ici : "; }
.aof-conf .lof-pile { gap: 10px; }

/* les questions à poser, à la place de la couche Bobby de la page logiciel */
.aof-demander .lof-couche__tete { color: #c2370c; }
.aof-demander li::before { content: "?"; display: grid; place-items: center; background: var(--lof-o); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1; }

/* la réponse : la phrase sur OpterIA, à part */
.aof-fin__bobby { margin-top: 4px !important; padding: 10px 0 0 14px; border-left: 2px solid var(--lof-filet); font-size: 14px !important; line-height: 1.5 !important; color: var(--lof-2) !important; }

/* ---------- Six façons de faire ---------- */
.aof-familles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aof-famille > .aof-ico { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 4px; }
html[data-theme="nuit"] .aof-ico { background: #2b211b; color: #ff9a70; }
.aof-famille__vide { margin: auto 0 0 !important; padding-top: 10px; font-size: 13.5px !important; color: var(--ink-3) !important; }

/* ---------- Tableau ---------- */
.aof-tab col.lof-col-nom { width: 13%; }
.aof-tab td { font-size: 14.5px; line-height: 1.5; }
.aof-tab .cp-logo--bobby { background: var(--lof-creme); }
.aof-tab .cp-logo--bobby img, .lof-fiche .cp-logo--bobby img { object-fit: contain; height: 86%; width: auto; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1080px) {
  .aof-familles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .aof-familles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .aof-strate .lof-strate__logos .cp-logo { width: 40px; height: 40px; border-radius: 12px; }
}