/* ly-visuels-integration : deux visuels propres a la page d'integration. Le premier
   montre la meme information ecrite cinq fois et l'ecart qui en resulte, le second
   donne l'anatomie d'une regle de liaison. Verre depoli, coins arrondis, comme partout. */
.ly-saisies{border:1px solid var(--line);border-radius:16px;background:rgba(171,224,254,.04);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);padding:26px 24px;margin:32px auto 0;max-width:560px}
:root[data-theme="light"] .ly-saisies{background:rgba(255,255,255,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-saisies{background:rgba(255,255,255,.55)}}
.ly-saisies-t{font:600 12px Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:0 0 16px}
.ly-saisies-l{list-style:none;margin:0!important;padding:0;display:flex;flex-direction:column;gap:2px}
.ly-saisies-l li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px 14px;padding:11px 12px;border-radius:10px;background:rgba(255,255,255,.035);font-size:.94rem;line-height:1.4}
:root[data-theme="light"] .ly-saisies-l li{background:rgba(6,20,38,.04)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-saisies-l li{background:rgba(6,20,38,.04)}}
.ly-s-val{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;text-align:right}
.ly-s-n{font:600 12px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:3px 10px;white-space:nowrap;min-width:92px;text-align:center}
.ly-saisies-fin{margin:16px 0 0!important;padding:14px;border-radius:12px;border:1px solid var(--line2);font-size:.94rem;line-height:1.5;max-width:none!important}
.ly-s-ecart{font-variant-numeric:tabular-nums;color:var(--sky);font-weight:600}
:root[data-theme="light"] .ly-s-ecart{color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-s-ecart{color:var(--deep)}}
@media (max-width:520px){.ly-saisies-l li{grid-template-columns:1fr auto}.ly-s-n{grid-column:1/-1;justify-self:start}}
.ly-regles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
@media (max-width:880px){.ly-regles{grid-template-columns:1fr}}
.ly-regle{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:22px 20px;background:rgba(171,224,254,.04);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px)}
:root[data-theme="light"] .ly-regle{background:rgba(255,255,255,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-regle{background:rgba(255,255,255,.55)}}
.ly-regle p{margin:0!important;font-size:.95rem;line-height:1.6;max-width:none!important;text-align:left!important}
/* le second bloc est pousse en bas : les trois cartes ont la meme hauteur,
   leurs conclusions se lisent donc sur la meme ligne. */
.ly-regle p+p{margin-top:auto!important;padding-top:14px;border-top:1px solid var(--line)}
.ly-regle p:first-child{margin-bottom:14px!important}
.ly-regle b{display:block;font:600 12px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);margin-bottom:5px}
:root[data-theme="light"] .ly-regle b{color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-regle b{color:var(--deep)}}

/* ly-matrice-automatisation : la carte des taches, en frequence et en part de jugement.
   Tout est en HTML et en pixels CSS, jamais en unites d'un cadre SVG : les etiquettes
   gardent donc la meme taille quelle que soit la largeur. Sous 760 px, la carte cede
   la place a une liste ordonnee, plus lisible sur un telephone. */
.ly-matrice{margin:34px auto 0;max-width:620px;border:1px solid var(--line);border-radius:16px;background:rgba(171,224,254,.04);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);padding:24px 24px 20px}
:root[data-theme="light"] .ly-matrice{background:rgba(255,255,255,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-matrice{background:rgba(255,255,255,.55)}}
.ly-mx-haut{font:600 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 12px!important;max-width:none!important}
.ly-mx{position:relative;height:310px;border-left:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.ly-mx-zone{position:absolute;right:0;bottom:0;width:64%;height:48%;background:linear-gradient(315deg,rgba(96,180,255,.15),rgba(96,180,255,0) 72%);border-left:1px dashed var(--line2);border-top:1px dashed var(--line2);border-radius:10px 0 0 0}
.ly-mx-zone b{position:absolute;right:12px;top:9px;font:600 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
:root[data-theme="light"] .ly-mx-zone b{color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-mx-zone b{color:var(--deep)}}
.ly-mx-pt{position:absolute;left:var(--x);bottom:var(--y);transform:translate(0,50%);display:flex;align-items:center;gap:8px;white-space:nowrap}
.ly-mx-pt.g{transform:translate(-100%,50%);flex-direction:row-reverse}
.ly-mx-pt::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(96,180,255,.15);flex-shrink:0}
:root[data-theme="light"] .ly-mx-pt::before{background:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-mx-pt::before{background:var(--deep)}}
.ly-mx-pt span{font-size:13px;line-height:1.3;color:var(--ink)}
.ly-mx-pt.non::before{background:transparent!important;border:1.5px solid var(--mut);box-shadow:none}
.ly-mx-pt.non span{color:var(--mut)}
.ly-mx-bas{display:flex;justify-content:space-between;gap:14px;margin:10px 0 0!important;max-width:none!important;font:600 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.ly-matrice figcaption,.ly-mx-note{margin:14px 0 0!important;font-size:.86rem;line-height:1.55;color:var(--mut);max-width:none!important}
.ly-mx-liste{display:none}
@media (max-width:760px){
  .ly-mx,.ly-mx-bas,.ly-mx-haut{display:none}
  .ly-mx-liste{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0!important;padding:0;counter-reset:mx}
  .ly-mx-liste li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px;border-radius:10px;background:rgba(255,255,255,.035)}
  .ly-mx-liste li::before{counter-increment:mx;content:counter(mx,decimal-leading-zero);grid-row:span 2;align-self:center;font:600 12px Inter,sans-serif;letter-spacing:.1em;color:var(--sky)}
  .ly-mx-liste li b{font-size:.96rem;font-weight:600}
  .ly-mx-liste li span{font-size:.86rem;color:var(--mut)}
  .ly-mx-liste li.non{background:transparent;border:1px dashed var(--line)}
  .ly-mx-liste li.non::before{content:'—';color:var(--mut)}
}
:root[data-theme="light"] .ly-mx-liste li{background:rgba(6,20,38,.04)}

/* ly-visuels-ia : le partage des roles entre la machine et vous, et ce que l'IA
   extrait vraiment d'une facture. Tout en HTML, tailles en pixels CSS. */
.ly-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:30px auto 0;max-width:620px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line)}
.ly-role{padding:20px 18px;background:rgba(10,20,36,.92);display:flex;flex-direction:column;gap:5px}
:root[data-theme="light"] .ly-role{background:rgba(255,255,255,.82)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-role{background:rgba(255,255,255,.82)}}
.ly-role b{font:600 12px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.ly-role span{font-size:1rem;line-height:1.4;color:var(--ink)}
.ly-role-vous b{color:var(--sky)}
:root[data-theme="light"] .ly-role-vous b{color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-role-vous b{color:var(--deep)}}
@media (max-width:600px){.ly-roles{grid-template-columns:1fr}}
.ly-extrait{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start;border:1px solid var(--line);border-radius:16px;padding:24px;margin:32px auto 0;max-width:620px;background:rgba(171,224,254,.04);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px)}
:root[data-theme="light"] .ly-extrait{background:rgba(255,255,255,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-extrait{background:rgba(255,255,255,.55)}}
@media (max-width:640px){.ly-extrait{grid-template-columns:1fr}}
.ly-ex-doc{border:1px solid var(--line);border-radius:10px;padding:14px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:8px}
:root[data-theme="light"] .ly-ex-doc{background:rgba(6,20,38,.04)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-ex-doc{background:rgba(6,20,38,.04)}}
.ly-ex-doc p{font:600 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 4px!important;max-width:none!important}
.ly-ex-l{height:6px;border-radius:3px;background:var(--line)}
.ly-ex-l.on{background:linear-gradient(90deg,var(--sky),rgba(96,180,255,.3))}
:root[data-theme="light"] .ly-ex-l.on{background:linear-gradient(90deg,var(--deep),rgba(11,61,145,.25))}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-ex-l.on{background:linear-gradient(90deg,var(--deep),rgba(11,61,145,.25))}}
.ly-ex-champs{list-style:none;margin:0!important;padding:0;display:flex;flex-direction:column;gap:2px}
.ly-ex-champs li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 12px;border-radius:8px;background:rgba(255,255,255,.035);font-size:.92rem}
:root[data-theme="light"] .ly-ex-champs li{background:rgba(6,20,38,.04)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-ex-champs li{background:rgba(6,20,38,.04)}}
.ly-ex-champs em{font-style:normal;color:var(--mut)}
.ly-ex-champs b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.ly-ex-note{grid-column:1/-1;margin:6px 0 0!important;padding-top:15px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.55;color:var(--mut);max-width:none!important}

/* ly-visuels-formation-methode : la jauge d'usage d'un abonnement, et la vue
   d'ensemble des cinq temps de la methode. */
.ly-jauge{margin:32px auto 0;max-width:560px;border:1px solid var(--line);border-radius:16px;padding:24px;background:rgba(171,224,254,.04);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px)}
:root[data-theme="light"] .ly-jauge{background:rgba(255,255,255,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-jauge{background:rgba(255,255,255,.55)}}
.ly-jauge-t{font:600 12px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:0 0 16px!important;max-width:none!important}
.ly-jauge-g{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.ly-jauge-g i{display:block;height:34px;border-radius:7px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
:root[data-theme="light"] .ly-jauge-g i{background:rgba(6,20,38,.035)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-jauge-g i{background:rgba(6,20,38,.035)}}
.ly-jauge-g i.on{background:linear-gradient(160deg,var(--sky),rgba(96,180,255,.45));border-color:transparent;box-shadow:0 0 0 3px rgba(96,180,255,.14)}
:root[data-theme="light"] .ly-jauge-g i.on{background:linear-gradient(160deg,var(--deep),rgba(11,61,145,.5))}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-jauge-g i.on{background:linear-gradient(160deg,var(--deep),rgba(11,61,145,.5))}}
.ly-jauge figcaption{margin-top:16px;font-size:.9rem;line-height:1.6;color:var(--mut)}
@media (max-width:480px){.ly-jauge-g{grid-template-columns:repeat(5,1fr)}.ly-jauge-g i{height:30px}}
.ly-temps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:34px auto 0;max-width:760px}
@media (max-width:900px){.ly-temps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ly-temps{grid-template-columns:1fr}}
.ly-temps a{display:flex;flex-direction:column;gap:6px;padding:18px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(171,224,254,.04);text-decoration:none!important;transition:border-color .3s var(--e),transform .3s var(--e)}
:root[data-theme="light"] .ly-temps a{background:rgba(255,255,255,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-temps a{background:rgba(255,255,255,.55)}}
.ly-temps a:hover{border-color:var(--line2);transform:translateY(-2px)}
.ly-temps b{font:600 12px Inter,sans-serif;letter-spacing:.18em;color:var(--sky)}
:root[data-theme="light"] .ly-temps b{color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-temps b{color:var(--deep)}}
.ly-temps span{font-size:.98rem;line-height:1.35;color:var(--ink);font-weight:600}
.ly-temps em{font-style:normal;font-size:.84rem;color:var(--mut)}

/* ly-visuels-migration-normes : le calendrier d'une bascule de logiciel, et la table.
   La table s'appelle ly-tabnorm et non ly-normes : cette derniere existait deja sur
   l'accueil pour la rangee de pastilles, et mes regles l'avaient transformee en panneau.
   des six regles suisses avec ce qu'elles imposent reellement. */
.ly-bascule,.ly-tabnorm{margin:34px auto 0;max-width:660px;border:1px solid var(--line);border-radius:16px;padding:24px;background:rgba(171,224,254,.04);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px)}
:root[data-theme="light"] .ly-bascule,:root[data-theme="light"] .ly-tabnorm{background:rgba(255,255,255,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-bascule,:root:not([data-theme]) .ly-tabnorm{background:rgba(255,255,255,.55)}}
.ly-bsc{display:grid;padding-top:20px;grid-template-columns:repeat(14,1fr);gap:8px 0;align-items:center}
.ly-bsc-b{grid-row:var(--r);grid-column:var(--c);height:38px;border-radius:9px;display:flex;align-items:center;padding:0 12px;font-size:.88rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line);background:rgba(255,255,255,.04)}
:root[data-theme="light"] .ly-bsc-b{background:rgba(6,20,38,.04)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-bsc-b{background:rgba(6,20,38,.04)}}
.ly-bsc-b.fort{background:linear-gradient(100deg,rgba(96,180,255,.24),rgba(96,180,255,.08));border-color:rgba(96,180,255,.42);color:var(--ink)}
.ly-bsc-b.trait{background:transparent;border-style:dashed;color:var(--mut)}
.ly-bsc-jour{grid-row:1/-1;grid-column:var(--c);border-left:1px solid var(--sky);align-self:stretch;position:relative}
.ly-bsc-jour b{position:absolute;top:-19px;left:8px;font:600 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);white-space:nowrap}
:root[data-theme="light"] .ly-bsc-jour{border-color:var(--deep)}
:root[data-theme="light"] .ly-bsc-jour b{color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-bsc-jour{border-color:var(--deep)}:root:not([data-theme]) .ly-bsc-jour b{color:var(--deep)}}
.ly-bascule figcaption,.ly-tabnorm figcaption{text-align:left;margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.6;color:var(--mut)}
.ly-bsc-liste{display:none}
@media (max-width:820px){
  .ly-bsc{display:none}
  .ly-bsc-liste{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0!important;padding:0}
  .ly-bsc-liste li{padding:12px;border-radius:10px;background:rgba(255,255,255,.035);font-size:.92rem;line-height:1.45}
  .ly-bsc-liste li b{display:block;font:600 12px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:4px}
  .ly-bsc-liste li.jour{background:transparent;border:1px dashed var(--line2)}
}
:root[data-theme="light"] .ly-bsc-liste li{background:rgba(6,20,38,.04)}
:root[data-theme="light"] .ly-bsc-liste li b{color:var(--deep)}
.ly-nrm{display:grid;grid-template-columns:150px 1fr 190px;gap:1px;list-style:none;margin:0!important;padding:0}
.ly-nrm>li{display:contents}
.ly-nrm>li>*{padding:13px 14px;background:rgba(255,255,255,.035);display:flex;align-items:center;font-size:.92rem;line-height:1.4}
:root[data-theme="light"] .ly-nrm>li>*{background:rgba(6,20,38,.04)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-nrm>li>*{background:rgba(6,20,38,.04)}}
.ly-nrm>li>b{font-weight:600;color:var(--ink);border-radius:9px 0 0 9px}
.ly-nrm>li>em{font-style:normal;color:var(--mut)}
.ly-nrm>li>i{font-style:normal;font:600 12px Inter,sans-serif;letter-spacing:.06em;color:var(--sky);border-radius:0 9px 9px 0;text-transform:uppercase}
:root[data-theme="light"] .ly-nrm>li>i{color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-nrm>li>i{color:var(--deep)}}
.ly-nrm>li.opt>i{color:var(--mut)}
@media (max-width:760px){
  .ly-nrm{grid-template-columns:1fr}
  .ly-nrm>li{display:block;margin-bottom:2px;border-radius:10px;overflow:hidden}
  .ly-nrm>li>*{display:block;border-radius:0}
  .ly-nrm>li>b{padding-bottom:2px}
  .ly-nrm>li>em{padding-top:0;padding-bottom:4px}
  .ly-nrm>li>i{padding-top:0}
}

/* ly-visuels-alignement : les sections centrent leur texte ; un tableau, une liste
   ou une legende de figure se lisent a gauche. */
.ly-tabnorm,.ly-bascule,.ly-matrice,.ly-extrait,.ly-jauge,.ly-saisies,.ly-regles,.ly-temps,.ly-roles{text-align:left}
.ly-nrm>li>*,.ly-bsc-liste li,.ly-mx-liste li,.ly-ex-champs li,.ly-saisies-l li{text-align:left}

/* ly-visuels-choix-capsule : la liste de controle du choix d'un logiciel, et
   l'anatomie d'une capsule filmee. */
.ly-check,.ly-capsule{margin:34px auto 0;max-width:620px;border:1px solid var(--line);border-radius:16px;padding:24px;background:rgba(171,224,254,.04);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);text-align:left}
:root[data-theme="light"] .ly-check,:root[data-theme="light"] .ly-capsule{background:rgba(255,255,255,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-check,:root:not([data-theme]) .ly-capsule{background:rgba(255,255,255,.55)}}
.ly-check-t,.ly-capsule-t{font:600 12px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:0 0 16px!important;max-width:none!important}
.ly-chk{list-style:none;margin:0!important;padding:0;display:flex;flex-direction:column;gap:2px}
.ly-chk li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 13px;border-radius:10px;background:rgba(255,255,255,.035);font-size:.95rem;line-height:1.45;text-align:left}
:root[data-theme="light"] .ly-chk li{background:rgba(6,20,38,.04)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-chk li{background:rgba(6,20,38,.04)}}
.ly-chk li::before{content:'';width:17px;height:17px;margin-top:2px;border:1.5px solid var(--line2);border-radius:5px;flex-shrink:0}
.ly-check figcaption,.ly-capsule figcaption{margin-top:16px;padding-top:15px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.6;color:var(--mut);text-align:left}
.ly-cap{display:grid;grid-template-columns:1fr;gap:14px}
.ly-cap-ecran{position:relative;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;overflow:hidden}
:root[data-theme="light"] .ly-cap-ecran{background:rgba(6,20,38,.05)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-cap-ecran{background:rgba(6,20,38,.05)}}
.ly-cap-play{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;background:rgba(96,180,255,.12)}
.ly-cap-play::after{content:'';width:0;height:0;margin-left:3px;border-left:12px solid var(--sky);border-top:8px solid transparent;border-bottom:8px solid transparent}
:root[data-theme="light"] .ly-cap-play::after{border-left-color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-cap-play::after{border-left-color:var(--deep)}}
.ly-cap-duree{position:absolute;right:12px;bottom:10px;font:600 12px Inter,sans-serif;letter-spacing:.08em;color:var(--mut);background:rgba(4,7,13,.6);border-radius:6px;padding:3px 8px}
:root[data-theme="light"] .ly-cap-duree{background:rgba(255,255,255,.7)}
.ly-cap-barre{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
.ly-cap-barre i{position:absolute;left:0;top:0;bottom:0;width:34%;background:var(--sky)}
:root[data-theme="light"] .ly-cap-barre i{background:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-cap-barre i{background:var(--deep)}}
.ly-cap-regles{list-style:none;margin:0!important;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:600px){.ly-cap-regles{grid-template-columns:1fr}}
.ly-cap-regles li{padding:13px;border-radius:10px;background:rgba(255,255,255,.035);text-align:left}
:root[data-theme="light"] .ly-cap-regles li{background:rgba(6,20,38,.04)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-cap-regles li{background:rgba(6,20,38,.04)}}
.ly-cap-regles b{display:block;font:600 12px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:5px}
:root[data-theme="light"] .ly-cap-regles b{color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-cap-regles b{color:var(--deep)}}
.ly-cap-regles span{font-size:.9rem;line-height:1.45;color:var(--ink)}

/* ly-metiers : la rubrique qui nomme les metiers plutot que les techniques.
   Une carte par metier, une seule phrase, celle que le patron reconnait. */
.ly-metiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;text-align:left}
@media (max-width:980px){.ly-metiers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ly-metiers{grid-template-columns:1fr}}
.ly-metier{display:flex;flex-direction:column;gap:10px;padding:24px 22px;border:1px solid var(--line);border-radius:16px;background:rgba(171,224,254,.04);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);transition:border-color .4s var(--e),transform .4s var(--e)}
:root[data-theme="light"] .ly-metier{background:rgba(255,255,255,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-metier{background:rgba(255,255,255,.55)}}
.ly-metier:hover{border-color:var(--line2);transform:translateY(-3px)}
.ly-metier>svg{width:30px!important;height:30px;color:var(--sky);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="light"] .ly-metier>svg{color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-metier>svg{color:var(--deep)}}
.ly-metier b{font:600 1rem/1.3 Inter,sans-serif;color:var(--ink)}
.ly-metier span{font-size:.95rem;line-height:1.6;color:var(--mut)}
.ly-metiers-fin{margin:26px auto 0!important;max-width:34em;font-size:.95rem;color:var(--mut)}

/* ly-metier-reponse : la carte pose le probleme, le survol donne la reponse.
   Sur telephone il n'y a pas de survol : la reponse y est simplement visible. */
.ly-metier{position:relative}
.ly-metier em{display:block;font-style:normal;font-size:.95rem;line-height:1.6;color:var(--sky);padding-top:12px;margin-top:2px;border-top:1px solid var(--line)}
:root[data-theme="light"] .ly-metier em{color:var(--deep)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .ly-metier em{color:var(--deep)}}
@media (hover:hover) and (min-width:761px){
  .ly-metier em{opacity:.85;transform:none;transition:opacity .45s var(--e),transform .45s var(--e)}
  .ly-metier:hover em,.ly-metier:focus-within em{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.ly-metier em{opacity:1!important;transform:none!important;transition:none}}