/* ============================================================
   OPTERIA : page « Logiciel organisme de formation : comparatif 2026 » (/organismes-de-formation/logiciel, 23/10/2026, demande Axel :
   « un design moderne et vraiment une page innovante »). S'appuie sur le gabarit des comparatifs (da-alternatives.css, classes cp-…)
   et ajoute : le configurateur dans la toile peinte du haut (pile qui se réordonne en direct), les familles de logiciels,
   le tableau filtrable, les fiches en tiroir, la frise « une semaine d'un OF » et la pile « logiciel + Bobby ».
   Une seule police (Switzer), couleurs par variables (mode nuit), aucune ombre portée ni halo : filets de 1 px seulement.
   Animations : transform, opacity, clip-path ; rien ne bouge avec prefers-reduced-motion.
   ============================================================ */
.page-lof { --lof-o: #FB4D17; --lof-creme: #FFF5EC; --lof-filet: rgba(251,77,23,.28); --lof-blanc: #fff; --lof-encre: #1c1c1a; --lof-2: #6b6b66; --lof-ligne: rgba(0,0,0,.08); --lof-doux: cubic-bezier(.22,1,.36,1); }

/* ---------- Héros : les tuiles des logiciels posées sur la couche Bobby ---------- */
.lof-strate { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 30px; }
.lof-strate__logos { display: flex; align-items: center; gap: 10px; }
.lof-strate__logos .cp-logo { transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
.lof-strate__couche { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px 0 5px; border-radius: 999px; background: var(--lof-creme); box-shadow: inset 0 0 0 1px var(--lof-filet); font-size: 13px; font-weight: 500; color: #c2370c; }
.lof-strate__couche .cp-logo { width: 22px; height: 22px; border-radius: 50%; }
html[data-theme="nuit"] .lof-strate__couche { background: #2b211b; color: #ff9a70; }

/* ---------- Le configurateur : une fenêtre blanche sur la peinture ---------- */
.cp-hero .lof-toile { height: auto; padding: 56px 56px 56px; }
.lof-conf { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); max-width: 1000px; margin: 0 auto; border-radius: 20px; background: var(--lof-blanc); color: var(--lof-encre); border: 1px solid rgba(0,0,0,.06); overflow: hidden; text-align: left; }
.lof-conf__barre { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px; border-bottom: 1px solid var(--lof-ligne); }
.lof-conf__barre b { font-size: 15px; font-weight: 500; }
.lof-conf__barre small { margin-left: auto; font-size: 12.5px; color: var(--lof-2); }
.lof-conf__pas { display: flex; gap: 5px; margin-left: 4px; }
.lof-conf__pas i { width: 18px; height: 3px; border-radius: 3px; background: rgba(0,0,0,.1); transition: background .4s ease; }
.lof-conf__pas i.is-fait { background: var(--lof-encre); }
.lof-conf__pas i.is-ici { background: var(--lof-o); }

.lof-conf__q { position: relative; padding: 30px 32px 30px; border-right: 1px solid var(--lof-ligne); min-height: 470px; display: flex; flex-direction: column; }
.lof-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.lof-q legend { padding: 0; margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 27px); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; color: var(--lof-encre); text-wrap: balance; }
.lof-q__aide { margin: 0 0 20px; font-size: 14.5px; line-height: 1.5; color: var(--lof-2); }
.lof-q__choix { display: grid; gap: 8px; }
.lof-q__choix button { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 16px 10px 12px; border: 0; border-radius: 14px; background: #fff; color: var(--lof-encre); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: box-shadow .2s ease, background .2s ease, transform .2s var(--lof-doux); }
.lof-q__choix button::before { content: ""; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.25); transition: box-shadow .25s ease, background .25s ease; justify-self: center; }
.lof-q__choix button b { display: block; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.lof-q__choix button small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--lof-2); }
.lof-q__choix button:hover { box-shadow: inset 0 0 0 1px var(--lof-encre); }
.lof-q__choix button:active { transform: scale(.99); }
.lof-q__choix button[aria-pressed="true"] { background: var(--lof-creme); box-shadow: inset 0 0 0 1.5px var(--lof-o); }
.lof-q__choix button[aria-pressed="true"]::before { background: var(--lof-o); box-shadow: inset 0 0 0 5px #fff, 0 0 0 1.5px var(--lof-o); }
.lof-q__choix button:focus-visible { outline: 2px solid var(--lof-o); outline-offset: 2px; }
.lof-conf__nav { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 22px; }
.lof-conf__prec { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--lof-2); font: inherit; font-size: 14px; cursor: pointer; }
.lof-conf__prec:hover { color: var(--lof-encre); background: #f4f3ef; }
.lof-conf__prec svg { width: 14px; height: 14px; }
.lof-conf__note { margin: 0 0 0 auto; font-size: 12.5px; color: var(--lof-2); }

/* la réponse finale, à la place des questions */
.lof-fin[hidden] { display: none; }
.lof-fin .meta { margin: 0 0 8px; color: var(--lof-o); font-size: 13px; }
.lof-fin h3 { margin: 0 0 10px; font-size: clamp(24px, 2.5vw, 30px); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; color: var(--lof-encre); }
.lof-fin p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: #3a3a37; }
.lof-fin__brique { font-size: 14.5px !important; color: var(--lof-2) !important; }
.lof-fin__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.lof-fin__actions .btn { background: var(--lof-encre); color: #fff; }
.lof-fin__lien, .lof-fin__reprendre { font-size: 14.5px; color: var(--lof-encre); text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: 4px; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.lof-fin__lien:hover, .lof-fin__reprendre:hover { text-decoration-color: currentColor; }

/* la pile de droite : Bobby en haut, les briques, le socle */
.lof-pile { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 24px; background: #faf9f6; }
.lof-pile__titre { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 2px; font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #8b8b85; }
.lof-pile__titre span { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.lof-couche { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.lof-couche__tete { display: flex; align-items: center; gap: 8px; padding: 11px 14px 0; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8b8b85; }
.lof-couche ol, .lof-couche ul { margin: 0; padding: 6px 8px 8px; list-style: none; }
.lof-couche li[data-id] { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; will-change: transform; transition: transform .7s var(--lof-doux), background .3s ease; }
.lof-couche li[data-id] .cp-logo { width: 30px; height: 30px; border-radius: 9px; }
.lof-couche li b { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.25; }
.lof-couche li [data-raison] { display: block; font-size: 12.5px; line-height: 1.4; color: var(--lof-2); }
.lof-couche li.is-maj [data-raison] { animation: lof-raison .6s var(--lof-doux); }
.lof-couche li.is-tete { background: var(--lof-creme); box-shadow: inset 0 0 0 1px var(--lof-filet); }
.lof-couche li.is-tete b::after { content: "En tête pour vous"; margin-left: 8px; font-size: 11.5px; font-weight: 500; color: #c2370c; }
.lof-couche--briques li[data-id] { opacity: .55; transition: transform .7s var(--lof-doux), opacity .4s ease, background .3s ease; }
.lof-couche--briques li.is-utile { opacity: 1; }
.lof-couche--briques li.is-tete { background: transparent; box-shadow: none; }
.lof-couche--briques li.is-tete b::after { content: none; }
.lof-couche--briques li.is-utile.is-tete { background: #f4f3ef; }
@keyframes lof-raison { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.lof-couche--bobby { padding: 12px 14px; background: transparent; box-shadow: inset 0 0 0 1px rgba(251,77,23,.45); border-radius: 14px; background-image: none; transition: background .5s ease; }
.lof-couche--bobby .lof-couche__tete { padding: 0; color: #c2370c; }
.lof-couche--bobby .cp-logo { width: 22px; height: 22px; border-radius: 6px; }
.lof-couche--bobby p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--lof-2); }
.lof-couche--bobby ul { display: none; padding: 8px 0 0; }
.lof-couche--bobby.is-pret { background: var(--lof-creme); }
.lof-couche--bobby.is-pret p:not(.lof-couche__tete) { display: none; }
.lof-couche--bobby.is-pret ul { display: grid; gap: 6px; }
.lof-couche--bobby li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.4; color: #3a3a37; }
.lof-couche--bobby li::before { content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.3 2.3 2.2 4.7-5'/%3E%3C/svg%3E") center / 9px no-repeat, var(--lof-o); }
.lof-pile__note { margin: 2px 2px 0; font-size: 12px; line-height: 1.45; color: #8b8b85; }

/* sans JavaScript : toutes les questions s'affichent l'une sous l'autre */
.lof-conf:not(.is-actif) .lof-q[hidden] { display: block; }
.lof-conf:not(.is-actif) .lof-q + .lof-q { margin-top: 28px; }
.lof-conf:not(.is-actif) .lof-conf__nav { display: none; }
.lof-conf.is-actif .lof-q.is-vue { animation: lof-entre .55s var(--lof-doux); }
@keyframes lof-entre { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ---------- Les familles de logiciels ---------- */
.lof-familles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.lof-famille { display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 30px; border-radius: 24px; background: var(--paper-2); }
.lof-famille__n { font-size: 13px; font-weight: 500; color: var(--lof-o); }
.lof-famille h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.lof-famille p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--texte); }
.lof-famille .cp-logos { margin: auto 0 0; padding-top: 10px; }
.lof-famille--bobby { background: transparent; box-shadow: inset 0 0 0 1px var(--lof-filet); }
.lof-familles__note { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-align: center; }
.lof-familles__note a, .lof-lien { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Tableau comparatif filtrable ---------- */
.lof-filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto 22px; padding: 5px; width: fit-content; max-width: 100%; border-radius: 999px; background: var(--paper-2); }
.lof-filtres button { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 14.5px; cursor: pointer; transition: background .25s ease, color .25s ease; }
.lof-filtres button:hover { color: var(--ink); }
.lof-filtres button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.lof-filtres button:focus-visible { outline: 2px solid var(--lof-o); outline-offset: 2px; }
.lof-tab table { min-width: 0; }
.lof-tab col.lof-col-nom { width: 17%; }
.lof-tab tbody th .lof-nom { display: flex; align-items: center; gap: 10px; }
.lof-tab tbody th .cp-logo { width: 32px; height: 32px; border-radius: 9px; }
.lof-tab tbody th small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.lof-tab td small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.lof-tab tr[hidden] { display: none; }
.lof-oui, .lof-non, .lof-nc { display: inline-flex; align-items: center; gap: 6px; }
.lof-oui::before, .lof-non::before, .lof-nc::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.lof-oui::before { background: #2f9e57; }
.lof-non::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.lof-nc::before { background: var(--ink-3); opacity: .5; }

/* ---------- Fiches logiciels en tiroir ---------- */
.lof-fiches { display: grid; gap: 10px; }
.lof-fiche { border-radius: 22px; background: var(--paper-2); scroll-margin-top: 100px; transition: background .3s ease; }
.lof-fiche__tete { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 40px; align-items: center; gap: 18px; width: 100%; padding: 20px 22px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 22px; }
.lof-fiche__tete:focus-visible { outline: 2px solid var(--lof-o); outline-offset: 2px; }
.lof-fiche__tete .cp-logo { width: 52px; height: 52px; border-radius: 15px; }
.lof-fiche__nom { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lof-fiche__nom b { font-size: clamp(20px, 2vw, 24px); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.lof-fiche__nom span { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.lof-fiche__type { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.lof-fiche__fleche { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); color: var(--ink); transition: transform .5s var(--lof-doux), background .3s ease, color .3s ease; }
.lof-fiche__fleche svg { width: 16px; height: 16px; }
.lof-fiche.is-ouvert .lof-fiche__fleche { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.lof-fiche__corps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--lof-doux); }
.lof-fiche.is-ouvert .lof-fiche__corps { grid-template-rows: 1fr; }
.lof-fiche__int { overflow: hidden; min-height: 0; }
.lof-fiche__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 22px 12px; }
.lof-fiche__cols .cp-sol__col { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .5s var(--lof-doux); }
.lof-fiche.is-ouvert .cp-sol__col { opacity: 1; transform: none; }
.lof-fiche.is-ouvert .cp-sol__col:nth-child(2) { transition-delay: .06s; }
.lof-fiche.is-ouvert .cp-sol__col:nth-child(3) { transition-delay: .12s; }
.lof-fiche__faits { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 6px 24px 22px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.lof-fiche__faits dt { display: inline; font-weight: 500; color: var(--ink); }
.lof-fiche__faits dd { display: inline; margin: 0 0 0 4px; }
.lof-fiche__faits div { max-width: 100%; }
.lof-fiche__faits a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* sans JavaScript : les tiroirs sont ouverts */
html:not(.js) .lof-fiche__corps { grid-template-rows: 1fr; }
html:not(.js) .lof-fiche__cols .cp-sol__col { opacity: 1; transform: none; }

/* ---------- Comment choisir : critères numérotés ---------- */
.lof-criteres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: crit; }
.lof-critere { position: relative; padding: 26px 28px 28px 78px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); counter-increment: crit; }
.lof-critere::before { content: counter(crit); position: absolute; left: 24px; top: 24px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--paper-2); font-size: 15px; font-weight: 500; color: var(--ink); }
.lof-critere h3 { margin: 4px 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.lof-critere p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--texte); }
.lof-critere p + p { margin-top: 8px; }
.lof-critere__q { font-size: 14.5px !important; color: var(--ink-2) !important; }
.lof-critere__q b { font-weight: 500; color: var(--lof-o); }
.lof-critere a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Une semaine d'un OF : la frise ---------- */
.lof-semaine { padding: 46px 46px 40px; }
.lof-semaine__bascule { display: flex; width: fit-content; margin: 0 auto 26px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.06); }
.lof-semaine__bascule button { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #55554f; font: inherit; font-size: 14.5px; cursor: pointer; transition: background .3s ease, color .3s ease; }
.lof-semaine__bascule button[aria-pressed="true"] { background: var(--lof-encre); color: #fff; }
.lof-semaine__bascule button:focus-visible { outline: 2px solid var(--lof-o); outline-offset: 2px; }
.lof-jours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.lof-jour { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 16px; border-radius: 18px; background: #fff; color: var(--lof-encre); border: 1px solid rgba(0,0,0,.05); }
.lof-jour > b { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8b8b85; }
.lof-tache { position: relative; padding: 10px 11px 11px; border-radius: 12px; background: #f6f5f1; font-size: 13.5px; line-height: 1.4; color: #353535; transition: background .45s ease, box-shadow .45s ease; }
.lof-tache small { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: #8b8b85; }
.lof-tache small span { display: none; }
.lof-tache small span.lof-qui-log { display: inline; }
.lof-semaine[data-mode="bobby"] .lof-tache--bobby { background: var(--lof-creme); box-shadow: inset 0 0 0 1px var(--lof-filet); }
.lof-semaine[data-mode="bobby"] .lof-tache--bobby small span.lof-qui-log { display: none; }
.lof-semaine[data-mode="bobby"] .lof-tache--bobby small span.lof-qui-bobby { display: inline; color: #c2370c; }
.lof-semaine[data-mode="seul"] .lof-tache--bobby small span.lof-qui-log { display: none; }
.lof-semaine[data-mode="seul"] .lof-tache--bobby small span.lof-qui-vous { display: inline; color: #55554f; }
.lof-semaine__legende { max-width: 820px; margin: 22px auto 0; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.9); font-size: 14.5px; line-height: 1.5; color: #3a3a37; text-align: center; }
.lof-semaine__legende span { display: none; }
.lof-semaine[data-mode="seul"] .lof-semaine__legende .lof-leg-seul, .lof-semaine[data-mode="bobby"] .lof-semaine__legende .lof-leg-bobby { display: inline; }

/* ---------- Ce qu'un logiciel ne fait pas / où Bobby se branche ---------- */
.lof-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lof-duo article { padding: 30px 30px 32px; border-radius: 24px; background: var(--paper-2); }
.lof-duo article.lof-duo--bobby { background: var(--lof-creme); box-shadow: inset 0 0 0 1px var(--lof-filet); }
.lof-duo h3 { margin: 0 0 12px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.lof-duo--bobby h3 { color: #1c1c1a; }
.lof-duo ul { margin: 0; padding: 0; list-style: none; }
.lof-duo li { position: relative; padding: 11px 0 11px 28px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--texte); }
.lof-duo--bobby li { border-top-color: rgba(0,0,0,.07); color: #353535; }
.lof-duo li::before { content: ""; position: absolute; left: 0; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--pastille) center / 9px no-repeat, var(--pastille-fond); }
.lof-duo--bobby a { color: #1c1c1a; text-decoration: underline; text-underline-offset: 3px; }

/* la pile « votre logiciel + Bobby » */
.lof-empile { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 56px; }
.lof-empile__schema { display: grid; gap: 8px; padding: 40px 34px; }
.lof-empile__niv { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: #fff; color: var(--lof-encre); border: 1px solid rgba(0,0,0,.06); }
.lof-empile__niv b { font-size: 15.5px; font-weight: 500; }
.lof-empile__niv small { display: block; font-size: 13px; color: var(--lof-2); }
.lof-empile__niv .cp-logos { margin: 0 0 0 auto; flex-wrap: nowrap; }
.lof-empile__niv--bobby { background: var(--lof-creme); border-color: var(--lof-filet); }
.lof-empile__niv--bobby b { color: #c2370c; }
.lof-empile__txt p { margin: 0 0 16px; font-size: 17px; line-height: 1.65; color: var(--texte); }
.lof-empile__txt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lof-empile__liens { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.lof-empile__liens a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px 0 6px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: 14.5px; text-decoration: none; transition: background .2s ease; }
.lof-empile__liens a:hover { background: var(--g-150); }
.lof-empile__liens .cp-logo { width: 26px; height: 26px; border-radius: 50%; }

/* ---------- Mode nuit (les fenêtres blanches posées sur peinture restent blanches) ---------- */
html[data-theme="nuit"] .page-lof { --lof-creme-nuit: #2b211b; }
html[data-theme="nuit"] .lof-famille--bobby { box-shadow: inset 0 0 0 1px rgba(251,120,70,.32); }
html[data-theme="nuit"] .lof-duo article.lof-duo--bobby { background: #2b211b; box-shadow: inset 0 0 0 1px rgba(251,120,70,.32); }
html[data-theme="nuit"] .lof-duo--bobby h3 { color: #fff; }
html[data-theme="nuit"] .lof-duo--bobby li { color: rgba(255,255,255,.88); border-top-color: rgba(255,255,255,.1); }
html[data-theme="nuit"] .lof-duo--bobby a { color: #fff; }
html[data-theme="nuit"] .lof-fiche__type { color: rgba(255,255,255,.7); }
html[data-theme="nuit"] .lof-critere::before { background: #2a2a2a; }
html[data-theme="nuit"] .lof-conf a, html[data-theme="nuit"] .lof-conf .lof-fin__reprendre { color: var(--lof-encre); }
html[data-theme="nuit"] .lof-conf .lof-fin__actions .btn { background: var(--lof-encre); color: #fff; }
html[data-theme="nuit"] .lof-oui::before { background: #57c27d; }

/* ---------- Apparitions (gérées par alternatives.js : .cp-a → .is-in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .lof-strate__logos .cp-logo { animation: lof-tuile 1s var(--lof-doux) both; animation-delay: calc(var(--k, 0) * 80ms + .15s); }
  @keyframes lof-tuile { from { opacity: 0; transform: translateY(18px) rotate(0deg); } to { opacity: 1; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); } }
  html.js .lof-jours.cp-a .lof-jour { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .8s var(--lof-doux); transition-delay: calc(var(--k, 0) * 80ms + .1s); }
  html.js .lof-jours.cp-a.is-in .lof-jour { opacity: 1; transform: none; }
  html.js .lof-jours.cp-a { opacity: 1; transform: none; }
  html.js .lof-empile__niv { transition: transform .9s var(--lof-doux), opacity .7s ease; }
  html.js .lof-empile__schema.cp-a .lof-empile__niv { opacity: 0; transform: translateY(-26px); }
  html.js .lof-empile__schema.cp-a.is-in .lof-empile__niv { opacity: 1; transform: none; }
  html.js .lof-empile__schema.cp-a .lof-empile__niv:nth-child(2) { transition-delay: .18s; }
  html.js .lof-empile__schema.cp-a .lof-empile__niv:nth-child(1) { transition-delay: .36s; }
  html.js .lof-empile__schema.cp-a { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lof-couche li[data-id], .lof-fiche__corps, .lof-fiche__fleche, .lof-fiche__cols .cp-sol__col, .lof-q__choix button { transition: none !important; }
  .lof-conf.is-actif .lof-q.is-vue, .lof-couche li.is-maj [data-raison] { animation: none; }
}

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1080px) {
  .lof-fiche__cols { grid-template-columns: minmax(0, 1fr); }
  .lof-jours { grid-template-columns: repeat(5, minmax(200px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .lof-jour { scroll-snap-align: start; }
}
@media (max-width: 900px) {
  .lof-conf { grid-template-columns: minmax(0, 1fr); }
  .lof-conf__q { border-right: 0; border-bottom: 1px solid var(--lof-ligne); min-height: 0; }
  .lof-familles { grid-template-columns: minmax(0, 1fr); }
  .lof-criteres, .lof-duo { grid-template-columns: minmax(0, 1fr); }
  .lof-empile { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* tableau : une carte par logiciel (gabarit des comparatifs, libellé de colonne dans data-sol) */
  .lof-tab tbody tr[hidden] { display: none; }
  .lof-tab td { display: block; }
}
@media (max-width: 720px) {
  .cp-hero .lof-toile { padding: 12px 10px; }
  .lof-conf { border-radius: 16px; }
  .lof-conf__barre { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 6px 10px; }
  .lof-conf__barre small { margin-left: 0; flex-basis: 100%; }
  .lof-conf__q { padding: 22px 18px 20px; }
  .lof-pile { padding: 18px 14px; }
  .lof-conf__note { display: none; }
  .lof-strate__logos { gap: 6px; }
  .lof-strate__logos .cp-logo { width: 44px; height: 44px; border-radius: 13px; }
  .lof-fiche__tete { grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 12px; padding: 16px 14px; }
  .lof-fiche__tete .cp-logo { width: 44px; height: 44px; border-radius: 13px; }
  .lof-fiche__type { display: none; }
  .lof-fiche__fleche { width: 36px; height: 36px; }
  .lof-fiche__cols { padding: 0 12px 10px; }
  .lof-fiche__faits { padding: 4px 16px 18px; }
  .lof-famille, .lof-duo article { padding: 24px 22px 26px; }
  .lof-critere { padding: 22px 20px 24px 66px; }
  .lof-critere::before { left: 18px; top: 20px; }
  .lof-semaine { padding: 22px 10px 18px; }
  .lof-semaine__bascule button { padding: 0 13px; font-size: 13.5px; }
  .lof-jours { grid-template-columns: repeat(5, minmax(78%, 1fr)); }
  .lof-empile__schema { padding: 18px 12px; }
  .lof-empile__niv .cp-logos { display: none; }
  .lof-filtres { border-radius: 18px; }
}

/* attributs hidden respectés malgré les display posés plus haut */
.lof-conf.is-actif [hidden], .lof-conf__prec[hidden], .lof-fin[hidden] { display: none !important; }
.lof-taches { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lof-tache { list-style: none; }

/* logos en toutes lettres (Alcuin, Edusign, SoWeSoft) : tuile plus large, jamais déformés */
.lof-tab tbody th .cp-logo--mot { width: 64px; padding: 0 6px; }
.lof-tab tbody th .cp-logo--mot img { width: 100%; height: auto; }
.lof-couche li[data-id] { grid-template-columns: 56px minmax(0, 1fr); }
.lof-couche li[data-id] .cp-logo { justify-self: start; }
.lof-couche li[data-id] .cp-logo--mot { width: 56px; padding: 0 5px; }
.lof-couche li[data-id] .cp-logo--mot img { width: 100%; height: auto; }
.lof-fiche__tete { grid-template-columns: 96px minmax(0, 1fr) auto 40px; }
.lof-fiche__tete .cp-logo { justify-self: start; }
.lof-fiche__tete .cp-logo--mot { width: 96px; padding: 0 10px; }
.lof-fiche__tete .cp-logo--mot img { width: 100%; height: auto; }
.lof-famille .cp-logo--mot.cp-logo--m img { height: 12px; }
@media (max-width: 720px) {
  .lof-fiche__tete { grid-template-columns: 72px minmax(0, 1fr) 36px; }
  .lof-fiche__tete .cp-logo--mot { width: 72px; padding: 0 7px; }
  .lof-strate__logos .cp-logo--mot { width: auto; padding: 0 8px; }
  .lof-strate__logos .cp-logo--mot img { height: 14px; width: auto; }
}
@media (max-width: 720px) {
  .lof-strate { max-width: 100%; }
  .lof-strate__logos { flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 330px; }
  .lof-strate__logos .cp-logo { width: 40px; height: 40px; border-radius: 12px; }
  .lof-strate__logos .cp-logo--mot { width: auto; padding: 0 8px; }
  .lof-strate__logos .cp-logo--mot img { height: 12px; width: auto; }
}