/* Certoly · système graphique de l'app (lot 7, 07/10/2026). Règles, jetons et composants :
   produit/docs/refonte/SYSTEME-GRAPHIQUE.md. Chargée après session.css : retirer cette couche rend l'app d'avant. */

/* 7.1 · Les jetons. */
:root{
 --cy-rail:#151E4B;--cy-page:#182155;--cy-surface:#222D64;--cy-surface-2:rgba(245,246,255,.06);--cy-survol:rgba(245,246,255,.05);--cy-voile:rgba(8,11,24,.78);
 --cy-ligne:rgba(163,196,255,.14);--cy-ligne-forte:rgba(163,196,255,.28);--cy-focus:#A3C4FF;
 --cy-texte:#F5F6FF;--cy-texte-2:#CBD5F3;--cy-texte-3:#AAB6DD;
 --cy-action:linear-gradient(135deg,#466FD9,#315FD5);--cy-action-relief:#2B51B1;/* 08/10 · armée de personas : le blanc ne tenait que 3,3:1 sur #6A8BE2 ; 4,7:1 désormais (teinte de Classique). */--cy-lien:#A3C4FF;
 --cy-choix:rgba(131,166,236,.20);--cy-choix-plein:#314CA7;
 --cy-plus:#B996FF;--cy-plus-texte:#D6C6FF;--cy-plus-fond:rgba(185,150,255,.16);--cy-plus-ligne:rgba(185,150,255,.34);
 --cy-or:#FFD46E;
 --cy-r1:8px;--cy-r2:12px;--cy-r3:16px;--cy-r4:20px;--cy-r5:28px;
 --cy-ombre-fenetre:0 24px 64px rgba(5,7,18,.55)
}
/* Le focus est bleu partout : l'or est réservé aux récompenses. */
@media(min-width:760px){button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--cy-focus)!important;outline-offset:3px}}

/* 7.2 · Le menu de gauche : le programme en carte, quatre entrées, ce qui sert moins en bas. */
@media(min-width:760px){
 .desk-sidebar{gap:24px;padding:28px 16px 16px;background:var(--cy-rail);border-right:1px solid var(--cy-ligne)}
 .desk-logo{padding:0 12px}
 /* Le programme : une carte pleine, plus un cadre comme l'entrée active. */
 button.desk-program{min-height:60px;padding:10px 10px 10px 14px;border:1px solid var(--cy-ligne);border-radius:var(--cy-r3);background:var(--cy-surface);color:var(--cy-texte-3);font:600 12px/1.2 InterBody,sans-serif}
 button.desk-program:hover{background:#2B3256}
 button.desk-program[aria-expanded="true"]{border-color:var(--cy-lien);background:#2B3256}
 .desk-program strong{margin-top:3px;color:var(--cy-texte);font:800 15px/1.25 InterBody,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .desk-program>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .desk-program>span:last-child{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:var(--cy-surface-2);font-size:0}
 .desk-program>span:last-child::before{content:"";width:7px;height:7px;margin-top:-3px;border:solid var(--cy-lien);border-width:0 2px 2px 0;transform:rotate(45deg)}
 button.desk-program[aria-expanded="true"]>span:last-child::before{margin-top:4px;transform:rotate(-135deg)}
 /* Les quatre entrées : actif = la pilule choisie du système. */
 .desk-sidebar nav{gap:4px}
 .desk-sidebar nav button{gap:12px;min-height:48px;padding:10px 12px;border:0;border-radius:var(--cy-r2);color:var(--cy-texte-2);font:700 15px/1.2 InterBody,sans-serif}
 .desk-sidebar nav img{width:28px;height:28px}
 .desk-sidebar nav button:hover,.desk-sidebar-bottom button:hover{background:var(--cy-survol);color:var(--cy-texte)}
 .desk-sidebar nav button[aria-current=page]{background:var(--cy-choix-plein);color:#fff;box-shadow:none}
 .desk-sidebar nav small{margin-left:auto;padding:3px 7px;border-radius:999px;background:var(--cy-plus-fond);color:var(--cy-plus-texte);font:700 11px/1.1 InterBody,sans-serif}
 /* Plus : une carte violette en bas, qui dit ce qu'elle ouvre. */
 .desk-plus-link,.desk-plus-link[data-etat]{margin-top:auto;min-height:56px;gap:12px;padding:10px 12px;border:1px solid var(--cy-plus-ligne);border-radius:var(--cy-r3);background:var(--cy-plus-fond);color:var(--cy-texte);font:800 14px/1.2 InterBody,sans-serif}
 .desk-plus-link::before{content:none}
 .desk-plus-link:hover{background:rgba(185,150,255,.24)}
 .desk-plus-link small{margin-top:3px;color:var(--cy-plus-texte);font:600 12px/1.3 InterBody,sans-serif}
 .desk-plus-link[data-etat="actif"]{border-color:var(--cy-plus);background:rgba(185,150,255,.22)}
 .desk-plus-link[data-etat="gratuit"]{border-color:var(--cy-ligne);background:var(--cy-surface-2)}
 .desk-plus-link[data-etat="gratuit"] small{color:var(--cy-texte-2)}
 .desk-sidebar-bottom{margin-top:-12px;gap:2px}
 .desk-sidebar-bottom button{min-height:44px;gap:12px;padding:8px 12px;border-radius:var(--cy-r2);color:var(--cy-texte-2);font:600 14px/1.2 InterBody,sans-serif}
 .desk-sidebar-bottom img{width:24px;height:24px}
 /* Le menu des programmes : des rangées, le programme courant en pilule choisie. */
 .prog-menu{border-color:var(--cy-ligne-forte);border-radius:var(--cy-r4);background:var(--cy-surface);box-shadow:var(--cy-ombre-fenetre)}
 .prog-menu ul a[aria-current="page"],.prog-menu a:hover,.prog-menu a:focus-visible{background:var(--cy-choix);box-shadow:none}
}
@media(min-width:760px) and (max-width:1180px){
 .desk-sidebar{padding:24px 12px 14px}
 .desk-logo{gap:8px;padding:0 8px;font-size:29px}.desk-logo img{width:28px;height:32px}
 .desk-sidebar nav button,.desk-sidebar-bottom button{gap:10px;padding:10px}
 .desk-sidebar nav button{font-size:14px}
 .desk-sidebar nav img{width:24px;height:24px}
 .desk-plus-link,.desk-plus-link[data-etat]{gap:10px;padding:10px;font-size:13px}
}
@media(min-width:760px) and (max-width:980px){
 .desk-logo{gap:7px;padding:0 6px;font-size:26px}.desk-logo img{width:25px;height:29px}
 button.desk-program{padding-left:12px;font-size:11px}
 .desk-sidebar nav button{font-size:13px}
 .desk-sidebar nav small{padding:2px 6px;font-size:10px}
 .desk-plus-link small{font-size:11px}
}
/* Fenêtre basse (capture de Kenan du 07/10, 520 px de haut) : le menu tient sans défiler jusqu'à 500 px ; en dessous il
   défile en hauteur, jamais en largeur. Le menu des programmes en sort toujours (bureau.css, :has(.prog-menu)). */
@media(min-width:760px){.desk-sidebar{overflow-x:hidden}.desk-sidebar>*{flex-shrink:0}}
@media(min-width:760px) and (max-height:640px){
 .desk-sidebar{gap:16px;padding-top:16px;padding-bottom:10px}
 button.desk-program{min-height:52px;padding-top:7px;padding-bottom:7px}
 .desk-sidebar nav{gap:2px}
 .desk-sidebar nav button{min-height:44px;padding-top:8px;padding-bottom:8px}
 .desk-plus-link,.desk-plus-link[data-etat]{min-height:48px;padding-top:7px;padding-bottom:7px}
 .desk-sidebar-bottom{margin-top:-8px}
}
@media(min-width:760px) and (max-height:500px){.desk-sidebar{gap:12px}}

/* 7.2 · La barre du bas : le même état actif que le menu de gauche, la même puce Plus. */
.lab-nav{background:rgba(21,30,75,.96)!important;border-color:var(--cy-ligne)!important}
.lab-nav>button[aria-current=page]>.lab-nav-icon{background:var(--cy-choix-plein)!important}
.lab-nav>button[aria-current=page]{color:#fff!important}
.lab-nav-plus{display:inline-block;margin-left:3px;padding:1px 5px;border-radius:999px;background:var(--cy-plus-fond);color:var(--cy-plus-texte)!important;font:700 11px/1.3 InterBody,sans-serif!important;vertical-align:1px}

/* 7.3 · Une seule collection : le palmarès (section cy-col-page du gabarit) et l'album des cartes (dialogue de
   collection-mobile-view.js) partagent la fenêtre, l'en-tête, le résumé, la case, l'aide et le détail.
   Enfants visés par « > » : le gabarit enveloppe chaque {{ }} dans un span (PIEGES § 49). */
/* Le fond : celui des pages de l'app, motif pixel sous le voile indigo (validé par Kenan le 27/09, PREFERENCES-KENAN). */
html section.cy-col-page,html .toly-album-dialog,html section.cy-col-page>.cy-col{background-color:#222D64!important;background-image:var(--lab-tiles)!important;background-size:auto,128px 128px!important;background-repeat:no-repeat,repeat!important;background-position:center top!important}
html section.cy-col-page{padding-left:20px!important;padding-right:20px!important}
html .toly-album-scroll{background:transparent!important;background-image:none!important}
/* L'en-tête : le titre à gauche, Fermer rond à droite, collant. */
html section.cy-col-page .cy-col-tete,html .toly-album-dialog>header{display:flex;align-items:center;gap:12px;min-height:0!important;margin:0 -20px!important;padding:14px 20px!important;background:var(--lab-base,var(--cy-page))!important;border-bottom:1px solid var(--cy-ligne)!important}
html section.cy-col-page .cy-col-tete{position:sticky!important;top:0;z-index:8}
html .toly-album-dialog>header{margin:0!important}
html .cy-col-tete>h1,html .toly-album-dialog>header>h2{flex:1;min-width:0;margin:0!important;font:700 22px/1.25 Baloo2,InterBody,sans-serif!important;color:var(--cy-texte)}
/* Fermer : un rond avec un ×, l'intitulé « Fermer » reste pour les lecteurs d'écran. */
html .cy-col-tete .app-close-text,html .toly-album-dialog .toly-close{position:relative;flex:0 0 44px;display:inline-block;width:44px!important;min-width:44px!important;height:44px;min-height:44px;margin-left:auto;padding:0!important;border:1px solid var(--cy-ligne-forte)!important;border-radius:999px!important;background:var(--cy-surface-2)!important;color:var(--cy-texte)!important;font-size:0!important;line-height:0!important;cursor:pointer}
html .cy-col-tete .app-close-text::before,html .cy-col-tete .app-close-text::after,html .toly-album-dialog .toly-close::before,html .toly-album-dialog .toly-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
html .cy-col-tete .app-close-text::after,html .toly-album-dialog .toly-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
html .cy-col-tete .app-close-text:hover,html .toly-album-dialog .toly-close:hover{background:rgba(163,196,255,.16)!important;border-color:rgba(163,196,255,.5)!important;filter:none}
/* Le résumé : une phrase, le compte en grand, ce qu'il compte, une barre (plus de compteur encadré). */
html .cy-col-intro{margin:20px 0 14px!important;max-width:60ch;font:400 15px/1.55 InterBody,sans-serif!important;color:var(--cy-texte-2)!important}
.cy-col-resume{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 22px!important;padding:0!important;border:0!important;background:none!important}
.cy-col-resume>.cy-col-compte{font:800 30px/1.1 Baloo2,InterBody,sans-serif;color:var(--cy-texte)}
.cy-col-resume>.cy-col-quoi{font:700 14px/1.4 InterBody,sans-serif;color:var(--cy-texte-2)}
.cy-col-resume>.cy-col-barre{flex:1 0 100%;height:8px;margin-top:8px}
.cy-col-barre{display:block;width:100%;height:6px;border-radius:999px;background:rgba(245,246,255,.10);overflow:hidden}
.cy-col-barre>span{display:block;height:100%;border-radius:inherit;background:var(--cy-lien)}
/* Un exploit sans compteur (une seule étape) n'a pas de barre. */
.cy-col-barre[hidden]{display:none!important}
.cy-col-resume>.cy-col-barre>span{background:var(--cy-or)}
/* Les filtres (le palmarès seul, 19 médailles) : des pilules, la choisie comme l'entrée active du menu. */
/* Sur téléphone, une rangée qui défile jusqu'aux bords (trois rangées sinon) ; sur ordinateur, tout tient. */
html [data-screen=badges] .cy-col-filtres{flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;margin:0 -20px 18px!important;padding:2px 20px 4px!important;scrollbar-width:none}
html .cy-col-filtres .cy-pilule{min-height:44px!important;padding:8px 16px!important;border:1px solid var(--cy-ligne-forte)!important;background:var(--cy-surface-2)!important;color:var(--cy-texte-2)!important;font:700 14px/1.2 InterBody,sans-serif!important}
html .cy-col-filtres .cy-pilule:hover{background:var(--cy-survol)!important;color:var(--cy-texte)!important}
html .cy-col-filtres .cy-pilule[aria-pressed="true"]{border-color:transparent!important;background:var(--cy-choix-plein)!important;color:#fff!important}
/* La grille : des cases identiques, 2 colonnes à 390 px, 3 à 768, 4 au-delà. */
html .cy-col-grille{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:12px!important;margin:0 0 24px!important}
html .cy-col-grille>.cy-col-case{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;min-width:0;min-height:0!important;margin:0;padding:10px 10px 14px!important;border:1px solid var(--cy-ligne)!important;border-radius:var(--cy-r4)!important;background:var(--cy-surface)!important;color:var(--cy-texte)!important;text-align:center!important;font:inherit;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
html .cy-col-grille>.cy-col-case:hover{border-color:var(--cy-ligne-forte)!important;transform:translateY(-2px);filter:none}
.cy-col-case>.cy-col-cadre{position:relative;display:grid!important;place-items:center;width:100%;aspect-ratio:5/4;box-sizing:border-box;border:0!important;border-radius:var(--cy-r3)!important;background:var(--cy-surface-2)!important;overflow:hidden}
.cy-col-case>.cy-col-cadre>img{width:min(96px,62%)!important;height:auto!important}
.lab-album-card>.cy-col-cadre{aspect-ratio:4/5}
.lab-album-card>.cy-col-cadre img{width:100%!important;height:100%!important;object-fit:contain;border-radius:var(--cy-r2)}
html .cy-col-case>.cy-col-nom{display:block;margin:2px 0 0!important;font:700 15px/1.25 InterBody,sans-serif!important;color:var(--cy-texte);overflow-wrap:anywhere}
html .cy-col-case>.cy-col-etat{display:block;margin:0!important;font:600 12px/1.3 InterBody,sans-serif!important;color:var(--cy-texte-2)!important}
html .cy-col-case>.cy-col-barre{width:100%!important;margin:2px 0 0!important}
/* Trois états lisibles sans lire : obtenu en or, en cours atténué avec sa barre, à découvrir en gris avec un cadenas. */
html .cy-col-grille>.cy-col-case[data-etat="obtenu"]{border-color:rgba(255,212,110,.42)!important;background:linear-gradient(180deg,rgba(255,212,110,.10),var(--cy-surface) 55%)!important}
html .cy-col-case[data-etat="obtenu"]>.cy-col-etat{color:var(--cy-or)!important;font-weight:800!important}
.cy-col-case[data-etat="obtenu"]>.cy-col-barre{display:none}
html .cy-col-case[data-etat="en-cours"]>.cy-col-cadre img{filter:saturate(.55)!important;opacity:.9}
/* Une carte rencontrée reste un aperçu gris : seul l'exploit lui donne ses couleurs. */
html .lab-album-card[data-etat="en-cours"]>.cy-col-cadre img{filter:grayscale(1)!important;opacity:.85}
html .cy-col-case[data-etat="a-decouvrir"]>.cy-col-cadre img{filter:grayscale(1)!important;opacity:.55}
html .cy-col-case[data-etat="a-decouvrir"]>.cy-col-nom{color:var(--cy-texte-2)}
.cy-col-case[data-etat="a-decouvrir"]>.cy-col-cadre::after{content:"";position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:999px;background:rgba(8,11,24,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BAC6E2' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/15px no-repeat}
/* L'aide, repliée en bas, le même dépliant dans les deux. */
html .cy-col-aide{margin:4px 0 0!important;padding:0!important;border:0!important;border-top:1px solid var(--cy-ligne)!important;border-radius:0!important;background:none!important}
html .cy-col-aide>summary{display:flex!important;align-items:center;justify-content:space-between;gap:12px;min-height:52px;font:700 15px/1.3 InterBody,sans-serif!important;color:var(--cy-texte);cursor:pointer;list-style:none}
html .cy-col-aide>summary::-webkit-details-marker{display:none}
html .cy-col-aide>summary::after{content:"";flex:none;width:8px;height:8px;margin:-4px 6px 0 0;border:solid var(--cy-lien);border-width:0 2px 2px 0;transform:rotate(45deg)}
html .cy-col-aide[open]>summary::after{margin-top:4px;transform:rotate(-135deg)}
html .cy-col-aide>p{margin:0 0 12px!important;max-width:64ch;font:400 14px/1.6 InterBody,sans-serif!important;color:var(--cy-texte-2)!important}
/* Le détail : l'image en grand, l'état en pastille, la condition, la progression, une seule action. */
html .cy-col-detail{display:flex!important;flex-direction:column;align-items:center;gap:12px!important;text-align:center}
html .cy-col-detail>.cy-col-etat{display:inline-flex;align-items:center;min-height:30px;margin:0!important;padding:4px 12px;border-radius:999px;background:var(--cy-surface-2);color:var(--cy-texte-2)!important;font:800 13px/1.2 InterBody,sans-serif!important}
html .cy-col-detail[data-etat="obtenu"]>.cy-col-etat{background:rgba(255,212,110,.14);color:var(--cy-or)!important}
html .cy-col-detail>p{margin:0!important;max-width:46ch}
html .cy-col-detail>h3{margin:0!important;font:700 18px/1.3 Baloo2,InterBody,sans-serif!important;color:var(--cy-texte-2)}
.cy-col-detail>.cy-col-barre{width:min(280px,100%);height:8px}
.cy-col-detail[data-etat="obtenu"]>.cy-col-barre{display:none}
/* La fiche d'un objet : une petite fenêtre au-dessus de la collection, posée en bas sur téléphone, centrée sur
   ordinateur ; la même pour une carte (dialogue cy-col-fiche) et pour une médaille (fenêtre du gabarit). */
html .cy-col-fiche{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:calc(100dvh / var(--app-text-zoom,1) - 24px);margin:0;padding:0;box-sizing:border-box;border:1px solid var(--cy-ligne-forte);border-bottom:0;border-radius:var(--cy-r5) var(--cy-r5) 0 0;background:var(--cy-surface);color:var(--cy-texte);box-shadow:var(--cy-ombre-fenetre);overflow:auto;overscroll-behavior:contain;font:16px/1.5 InterBody,sans-serif}
html .cy-col-fiche::backdrop{background:var(--cy-voile)}
html .cy-col-fiche>header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--cy-surface);border-bottom:1px solid var(--cy-ligne)}
html .cy-col-fiche>header>h2{flex:1;min-width:0;margin:0;font:700 22px/1.25 Baloo2,InterBody,sans-serif;color:var(--cy-texte)}
html .cy-col-fiche .toly-close{position:relative;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;margin-left:auto;padding:0;border:1px solid var(--cy-ligne-forte);border-radius:999px;background:var(--cy-surface-2);color:var(--cy-texte);font-size:0;line-height:0;cursor:pointer}
html .cy-col-fiche .toly-close::before,html .cy-col-fiche .toly-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
html .cy-col-fiche .toly-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
html .cy-col-fiche .toly-close:hover{background:rgba(163,196,255,.16);border-color:rgba(163,196,255,.5);filter:none}
html .cy-col-fiche-corps{padding:4px 20px 24px}
html .cy-col-fiche .lab-card-detail>img{width:min(220px,56vw)!important;max-width:none!important;max-height:none;margin:0 auto 4px!important}
html .cy-col-fiche .lab-card-detail>.toly-primary{width:100%;min-height:48px;border:1px solid var(--cy-ligne-forte);border-radius:var(--cy-r3);background:var(--cy-surface-2);color:var(--cy-texte);font:700 15px/1.2 InterBody,sans-serif}
html [role=dialog][aria-label="Détail de la médaille"]{border-color:var(--cy-ligne-forte)!important;background:var(--cy-surface)!important}
html [role=dialog][aria-label="Détail de la médaille"] .certoly-icon-button[data-panel-nav]{border-radius:999px;border-color:var(--cy-ligne-forte);background:var(--cy-surface-2)}
@media(min-width:760px){
 html .cy-col-fiche{inset:0;margin:auto;width:min(480px,calc(100vw - 64px));height:fit-content;max-height:calc(100dvh / var(--app-text-zoom,1) - 64px);border-bottom:1px solid var(--cy-ligne-forte);border-radius:var(--cy-r5)}
 html .cy-col-fiche>header{padding:20px 24px}
 html .cy-col-fiche-corps{padding:4px 24px 24px}
 html [role=dialog][aria-label="Détail de la médaille"]{max-width:min(480px,calc(100vw - 64px))!important;border-radius:var(--cy-r5)!important}
}
/* Sur ordinateur, la même fenêtre centrée pour les deux : largeur bornée, hauteur 100 % − 64 px, rayon 28, voile. */
@media(min-width:760px){
 html body section.cy-col-page[data-screen]{position:fixed!important;inset:0!important;z-index:200;margin:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important;padding:32px!important;background:var(--cy-voile)!important}
 html section.cy-col-page>.cy-col{flex:none;width:min(1000px,calc(100vw - 64px));max-width:none!important;height:calc(100dvh / var(--app-text-zoom,1) - 64px);margin:0!important;padding:0 28px 28px;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;border:1px solid var(--cy-ligne-forte);border-radius:var(--cy-r5);background:var(--cy-page);box-shadow:var(--cy-ombre-fenetre)}
 html .toly-album-dialog{width:min(1000px,calc(100vw - 64px))!important;border:1px solid var(--cy-ligne-forte)!important;border-radius:var(--cy-r5)!important;box-shadow:var(--cy-ombre-fenetre)!important}
 html .toly-album-dialog::backdrop{background:var(--cy-voile)}
 html section.cy-col-page .cy-col-tete{margin:0 -28px!important;padding:20px 28px!important}
 html .toly-album-dialog>header{padding:20px 28px!important}
 html .toly-album-scroll{padding:0 28px 28px!important}
 html .cy-col-grille{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;gap:16px!important}
 html [data-screen=badges] .cy-col-filtres{flex-wrap:wrap!important;overflow:visible!important;margin:0 0 18px!important;padding:0!important}
}

/* 7.4 · Une fenêtre, un Fermer. Toutes les fenêtres de l'app (les 39 du gabarit, les feuilles Plus et achat, Mon espace)
   prennent la forme des collections : mêmes boutons, même en-tête, même cadre, même fond que les pages. */
/* Fermer et Retour : le rond de 44 px des collections. Fermer en haut à droite, Retour à gauche du titre. */
html .certoly-icon-button[data-panel-nav],html .app-pinned-header>.certoly-icon-button,html .account-app-toolbar>button,html .app-close-text,html :is(.app-pinned-header,.app-page-sticky) .app-close-text{position:relative;flex:0 0 44px!important;display:inline-grid!important;place-items:center;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border:1px solid var(--cy-ligne-forte)!important;border-radius:999px!important;background:var(--cy-surface-2)!important;color:var(--cy-texte)!important;box-shadow:none!important;cursor:pointer}
html .certoly-icon-button[data-panel-nav]:hover,html .app-pinned-header>.certoly-icon-button:hover,html .account-app-toolbar>button:hover,html .app-close-text:hover{background:rgba(163,196,255,.16)!important;border-color:rgba(163,196,255,.5)!important;filter:none}
html .certoly-icon-button[data-panel-nav] svg{width:20px;height:20px}
html .certoly-icon-button[data-panel-nav=back]{order:-1;margin-left:0!important}
/* Un Fermer écrit (« Fermer », « × ») devient le même × dessiné ; l'intitulé reste pour les lecteurs d'écran. */
html .app-close-text,html :is(.app-pinned-header,.app-page-sticky) .app-close-text,html .account-app-toolbar>button,html .app-pinned-header>.certoly-icon-button:not(:has(svg)){font-size:0!important;line-height:0!important}
html .app-close-text::before,html .app-close-text::after,html .account-app-toolbar>button::before,html .account-app-toolbar>button::after,html .app-pinned-header>.certoly-icon-button:not(:has(svg))::before,html .app-pinned-header>.certoly-icon-button:not(:has(svg))::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
html .app-close-text::after,html .account-app-toolbar>button::after,html .app-pinned-header>.certoly-icon-button:not(:has(svg))::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* L'en-tête : Retour, le titre en Baloo2 22 px (une ligne de 14 px dessous s'il y en a une), Fermer. */
html .app-pinned-header,html .account-app-toolbar{display:flex!important;align-items:center!important;gap:12px!important;min-height:0!important;background:var(--lab-base,var(--cy-page))!important;border-bottom:1px solid var(--cy-ligne)!important}
html body :is(.app-dialog-shell,.lab-unified-sheet,.lab-plus-sheet,.v34-deep,.learning-modal)>.app-pinned-header,html .account-app-toolbar{padding:14px clamp(16px,5vw,24px)!important}
html .app-pinned-header>:is(h2,span,div,strong):not(.sc-interp){flex:1 1 auto;min-width:0}
html .app-pinned-header>h2,html .app-pinned-header>div>h2,html .app-pinned-header>strong,html .account-app-toolbar>strong,html .lab-plus-wordmark>strong,html .app-pinned-header>span:not(.sc-interp):not(.v34-kicker):not(.lab-plus-wordmark):not(:has(>:not(.sc-interp))),html .app-pinned-header>span:has(>span:not(.sc-interp))>span:first-child,html .app-pinned-header>span>strong{display:block;margin:0!important;font:700 22px/1.25 Baloo2,InterBody,sans-serif!important;letter-spacing:0!important;color:var(--cy-texte)!important;overflow-wrap:anywhere}
html .app-pinned-header>span:has(>span:not(.sc-interp))>span:nth-child(2){display:block;margin-top:2px!important;font:500 14px/1.4 InterBody,sans-serif!important;letter-spacing:0!important;color:var(--cy-texte-2)!important}
html .app-pinned-header>span:has(>span:not(.sc-interp)){display:flex!important;flex-direction:column;align-items:flex-start}
/* Le cadre : le fond des pages (motif pixel sous le voile indigo, PREFERENCES-KENAN du 27/09), le bord et l'ombre des collections. */
html :is(.app-dialog-shell,.lab-unified-sheet){background-color:#222D64!important;background-image:var(--lab-tiles)!important;background-size:auto,128px 128px!important;background-repeat:no-repeat,repeat!important;background-position:center top!important}
@media(min-width:760px){
 html :is(.app-dialog-shell,.lab-unified-sheet,.lab-plus-sheet,.account-app-dialog){border:1px solid var(--cy-ligne-forte)!important;border-radius:var(--cy-r5)!important;box-shadow:var(--cy-ombre-fenetre)!important}
 html body :is(.app-dialog-shell,.lab-unified-sheet,.lab-plus-sheet,.v34-deep,.learning-modal)>.app-pinned-header,html .account-app-toolbar{padding:20px 24px!important}
 html .account-app-dialog{width:min(900px,calc((100vw - 64px) / var(--account-zoom,1)))!important;max-height:calc((100dvh - 64px) / var(--account-zoom,1))!important}
 html .lab-horizon-dialog{max-height:calc((100dvh - 64px) / var(--app-text-zoom,1))!important}
}
/* À 760 px pile, l'app se croit sur ordinateur (innerWidth < 760 pour le téléphone) mais galerie.css (max-width:760px)
   posait la pleine page sur les fenêtres de l'ordinateur : on leur rend leur forme de fenêtre. */
@media(min-width:760px) and (max-width:760px){
 html .app-dialog-shell:not(.learning-modal):not([aria-label="Détail de la médaille"]){width:100%!important;max-width:min(760px,calc(100vw - 64px))!important;margin:0 auto!important}
 html .app-dialog-shell:not([aria-label="Détail de la médaille"]){height:auto!important;max-height:calc((100dvh - 64px) / var(--app-text-zoom,1))!important}
}
/* Sur téléphone, la structure de la galerie (01/10, recette du 04/10) reste : un panneau en pleine page, une petite
   fenêtre de confirmation posée en bas. Elles prennent le même habillage : arrondi 28, bord, voile, fond des pages. */
@media(max-width:759.98px){
 html .lab-compact-sheet{border:1px solid var(--cy-ligne-forte)!important;border-bottom:0!important;border-radius:var(--cy-r5) var(--cy-r5) 0 0!important;box-shadow:0 -12px 40px rgba(5,7,18,.45)!important}
 html .lab-compact-overlay{background:var(--cy-voile)!important}
 html .lab-horizon-overlay:has(>.lab-horizon-dialog){padding:0!important;align-items:stretch!important}
 html .lab-horizon-dialog{max-width:none!important;max-height:none!important;height:calc(100dvh / var(--app-text-zoom,1))!important;border:0!important;border-radius:0!important}
 /* Mon espace (compte.css : feuille sous 600 px, centrée au-dessus) : la même feuille que l'app jusqu'à 759 px. */
 html .account-app-dialog{width:calc(100vw / var(--account-zoom,1))!important;max-height:calc((100dvh - 24px) / var(--account-zoom,1))!important;margin:auto 0 0!important;border:1px solid var(--cy-ligne-forte)!important;border-bottom:0!important;border-radius:var(--cy-r5) var(--cy-r5) 0 0!important}
}
html .lab-unified-sheet>.app-dialog-body{background-color:transparent!important;background-image:none!important}
html .account-app-dialog::backdrop,html .lab-unified-overlay.lab-compact-overlay{background:var(--cy-voile)!important}

/* 7.5 · Les boutons de départ en bleu d'action. Rôles validés par Kenan le 26/09 (D-2026-09-26-05) : départ bleu,
   confirmation violette (Se connecter, Créer mon compte : inchangés). Or : une récompense, jamais un bouton. La couleur
   d'un mode reste sur le bouton de lancement de sa propre fiche (palette des modes, PREFERENCES-KENAN).
   app-mobile.css repose un cyan sur :root après cette couche : html:root l'emporte. */
html:root{--certoly-start-gradient:var(--cy-action);--certoly-start-lip:var(--cy-action-relief)}
/* Classique garde son bleu, foncé d'un cran : le blanc passe de 2,4:1 à 3,3:1 au plus clair (SYSTEME § 4). */
html [data-mode="Classique"],html .desk-feature[data-mode=Classique]{--certoly-start-gradient:var(--cy-action);--certoly-start-lip:var(--cy-action-relief)}
/* Les départs qui n'appartiennent à aucun mode quittent le violet et le bleu-violet. */
html .v34-primary,html .v34-result .rap-suite .certoly-start-button{--certoly-start-gradient:var(--cy-action);--certoly-start-lip:var(--cy-action-relief)}
html .cy-bouton-principal{background:var(--cy-action)!important;box-shadow:0 6px 0 var(--cy-action-relief)!important;border-radius:var(--cy-r3)!important}
html .cy-bouton-principal:active{box-shadow:0 2px 0 var(--cy-action-relief)!important}
/* Le focus est bleu partout, téléphone compris : l'anneau doré disparaît (l'or dit une récompense). */
html :is(button,a,input,select,textarea,summary,[role=button],[tabindex]):focus-visible{outline:2px solid var(--cy-focus)!important;outline-offset:3px}
/* 7.6 · Un en-tête de page, une carte. Réviser, Parcours et Mon plan posent leur titre au même endroit et à la même
   taille (Baloo2 800, 28 px au téléphone, 34 px dès 760) ; Profil garde sa carte d'identité comme en-tête, au même
   haut. Dès 760, les quatre onglets partagent la colonne de Réviser (1 120 px au plus, marges --desk-pad).
   Ce qui recule : le fil d'Ariane « Civique · Réviser » (le menu dit déjà le programme et l'onglet ; la ligne d'état,
   série et rendez-vous, reste), le filet sous « Mon plan », trois tailles et deux graisses de titre, quatre cadres,
   quatre fonds et trois bords de carte. Le gabarit pose des styles en ligne sur « Le parcours » : d'où !important. */
html body .desk-heading h1,html body .app-shell .app-learn-title h1,html body .lab-plan-tab .revision-plan-header h1{font:800 28px/1.15 Baloo2,sans-serif!important;letter-spacing:-.01em!important;margin:0!important;color:var(--cy-texte)!important}
html body .app-shell .app-learn-title p,html body .lab-plan-page-intro{font-size:15px!important;line-height:1.5!important;color:var(--cy-texte-2)!important}
html body .app-shell .app-learn-title p{margin-top:8px!important}
html body .lab-plan-tab>.revision-plan-header{border-bottom:0!important}
@media (max-width:759px){
  html body .desk-home{padding-left:20px!important;padding-right:20px!important}
  html body .v33-learn .app-learn-content{padding:20px 20px 40px!important}
  html body .lab-plan-tab>.revision-plan-header{padding:20px 20px 0!important}
  html body .app-shell .v33-profile .v33-profile-body{padding-top:20px!important}
  html body .lab-plan-tab .revision-plan-body{padding-top:8px!important}
}
@media (min-width:760px){
  html body .desk-heading h1,html body .app-shell .app-learn-title h1,html body .lab-plan-tab .revision-plan-header h1{font-size:34px!important}
  html body .desk-heading>p:not([data-etat="true"]){display:none}
  html body .desk-home,html body .app-shell .v33-learn,html body .lab-plan-tab,html body .app-shell .v33-profile{max-width:1120px!important;margin-left:auto!important;margin-right:auto!important;padding:44px var(--desk-pad) 48px!important;box-sizing:border-box}
  html body .v33-learn .app-learn-content{padding:0 0 40px!important}
  html body .lab-plan-tab>.revision-plan-header{padding:0!important;margin:0 0 8px!important}
  html body .lab-plan-tab .revision-plan-body{padding:0!important}
  html body .lab-plan-tab .lab-plan-exemple,html body .lab-plan-tab .lab-plan-offre{grid-row:auto}
  html body .v33-profile .v33-profile-body{max-width:none!important;margin:0!important;padding:0 0 40px!important}
}
@media (min-width:760px) and (max-width:1180px){
  html body .desk-home,html body .app-shell .v33-learn,html body .lab-plan-tab,html body .app-shell .v33-profile{padding-top:32px!important}
}
/* La carte : une surface, un contour net, rayon 20, pas d'ombre ; marge 16 au téléphone, 20 dès 760 (SYSTEME § 5).
   Le contour est celui que Kenan a demandé pour la carte Parcours le 06/10 (« faire un contour qui ne se mélange pas au
   décor », et « vérifier les autres cartes qui se fondent ») : 1,5 px, aussi lisible que son blanc à 22 %, dans le bleu
   des lignes. L'offre de Mon plan reste libre au téléphone (le prix et son bouton suivent l'exemple, sans boîte de
   plus) et devient la carte de droite dès 760, comme avant. bureau.css pose la carte Parcours avec deux classes. */
html body .desk-feature,html body .app-shell .learn-resume,html body .lab-plan-exemple,html body .pf-compte,html body .pf-bloc{background-color:var(--cy-surface)!important;border:1.5px solid var(--cy-ligne-forte)!important;border-radius:var(--cy-r4)!important;box-shadow:none!important}
html body .lab-plan-exemple,html body .pf-bloc{padding:16px!important}
@media (min-width:760px){
  html body .lab-plan-tab .lab-plan-offre{background-color:var(--cy-surface)!important;border:1.5px solid var(--cy-ligne-forte)!important;border-radius:var(--cy-r4)!important;box-shadow:none!important}
  html body .lab-plan-exemple,html body .lab-plan-tab .lab-plan-offre,html body .pf-bloc{padding:20px!important}
}
/* 7.7 · Rangées, pilules et puces. Une rangée : `--cy-surface-2`, une ligne, rayon 12, la valeur et le chevron en bleu
   de lien. Une pilule de choix : celle des collections (7.3), ronde, 44 px, `--cy-surface-2` et `--cy-ligne-forte` ;
   choisie, `--cy-choix-plein`. La puce Plus est la même partout (celle du menu, 7.2). Ce qui recule : le violet des rangées de Réglages (le
   violet dit Plus), les rayons 14 et 16 des rangées, les boutons carrés « Tous / Essentiels / Aucun » à côté des
   pilules rondes « 5 / 10 / 15 », le contour violet d'« Avec Plus », le trait bleu du programme actif (le menu de
   gauche l'a perdu au 7.2). design/app-mobile.css pose les rangées de Réglages après cette couche : html body. */
html body .v34-reglages>div:last-child>button,html body .pf-tuile,html body .pf-acces,html body .desk-carte{background:var(--cy-surface-2)!important;border:1px solid var(--cy-ligne)!important;border-radius:var(--cy-r2)!important;box-shadow:none!important}
html body .v34-reglages>div:last-child>button>span:last-child{color:var(--cy-lien)!important}
html body .desk-reglages-nb>button,html body .desk-chrono,html body .app-conseils-choix>button{min-height:44px!important;padding:8px 16px!important;border-radius:999px!important;border:1px solid var(--cy-ligne-forte)!important;background:var(--cy-surface-2)!important;color:var(--cy-texte-2)!important;font:700 14px/1.2 InterBody,sans-serif!important;box-shadow:none!important}
html body .desk-reglages-nb>button{min-width:44px!important;padding:8px 10px!important}
html body .desk-reglages-nb>button:hover,html body .desk-chrono:hover,html body .app-conseils-choix>button:hover{background:var(--cy-survol)!important;color:var(--cy-texte)!important}
html body .desk-reglages-nb>button[aria-pressed=true],html body .desk-chrono[aria-pressed=true],html body .app-conseils-choix>button[aria-pressed=true]{border-color:transparent!important;background:var(--cy-choix-plein)!important;color:#fff!important}
html body .v34-reglages>div:last-child>button:hover,html body .pf-tuile:hover,html body .desk-carte:hover{border-color:var(--cy-ligne-forte)!important}
html body .lab-plan-pastille{background:var(--cy-plus-fond)!important;border:0!important;color:var(--cy-plus-texte)!important;font:700 12px/1.2 InterBody,sans-serif!important;padding:5px 10px!important;border-radius:999px!important}
html body .prog-menu ul a[aria-current="page"]{background:var(--cy-choix)!important;box-shadow:none!important;border-radius:var(--cy-r2)!important}
/* Les niveaux d'un thème sont des rangées (le courant reste bleu, le validé vert) ; au téléphone, le corps de la fiche
   n'avait aucune marge : texte et niveaux touchaient le bord de l'écran. Il prend celle de l'en-tête. */
html body .learning-modal .learning-level-card:not([data-current="true"]):not([data-completed="true"]){background:var(--cy-surface-2)!important;border:1px solid var(--cy-ligne)!important;box-shadow:none!important}
html body .learning-modal .learning-level-card:not([data-current="true"]):not([data-completed="true"]):not([aria-disabled="true"]):hover{border-color:var(--cy-ligne-forte)!important}
@media (max-width:759px){
  html body .learning-modal>.app-dialog-body{padding:16px clamp(16px,5vw,24px) 28px!important}
}
/* 7.9 · Le Fermer carré choisi par Kenan le 26/09 (D-2026-09-26-05, « fermeture : panneau Objectif » : 44 px, rayon 14,
   bord clair, fond à peine levé). Le 7.4 avait donné le rond des collections à tous les Fermer ; ils reprennent tous le
   carré choisi (même rôle, même géométrie, D-2026-09-26-06), Retour compris, qui se dessine avec Fermer dans le même
   en-tête. Ce qui recule : le rond de 44 px. Revenir au rond : retirer ce bloc. */
html body .certoly-icon-button[data-panel-nav],html body .app-pinned-header>.certoly-icon-button,html body .account-app-toolbar>button,html body .app-close-text,html body :is(.app-pinned-header,.app-page-sticky) .app-close-text,html body .cy-col-tete .app-close-text,html body .toly-album-dialog .toly-close,html body .cy-col-fiche .toly-close,html body [role=dialog][aria-label="Détail de la médaille"] .certoly-icon-button[data-panel-nav]{border-radius:14px!important}
/* 7.10 · Le Profil refait d'après la veille des sites pros (08/10, produit/docs/refonte/VEILLE-PAGES-PRO.md § 1) :
   quatre chiffres côte à côte sous l'identité (deux par ligne sous 900 px ; l'icône et le libellé en haut, le chiffre
   sur toute la largeur de la tuile, pour qu'un « 124 580 » tienne à 360 px), « Prêt pour l'examen ? » en repères cochés,
   le calendrier de douze semaines (le vert de la régularité, comme avant) et les derniers badges. L'or reste aux
   récompenses (XP, badge obtenu). Ce qui recule : la ligne de niveau de l'en-tête (devenue la tuile XP), le gros
   « questions explorées », la série en grand et les sept barres. Un crayon sur l'avatar dit qu'on peut le changer.
   Enfants visés par « > » : le gabarit enveloppe chaque {{ }} dans un span (PIEGES § 49). */
html body .pf-avatar{position:relative}
html body .pf-avatar-crayon{position:absolute;right:-7px;bottom:-7px;display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--cy-surface);border:1.5px solid var(--cy-ligne-forte);color:var(--cy-texte)}
html body .pf-avatar-crayon>img{display:block;width:14px;height:14px;image-rendering:pixelated}
html body .pf-avatar:hover .pf-avatar-crayon,html body .pf-avatar:focus-visible .pf-avatar-crayon{border-color:var(--cy-lien)}
html body .pf-chiffres{list-style:none;margin:12px 18px 18px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){html body .pf-chiffres{grid-template-columns:repeat(4,minmax(0,1fr))}}
html body .pf-chiffre{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;align-items:center;align-content:start;min-width:0;padding:12px 14px;border-radius:var(--cy-r2);background:var(--cy-surface-2);border:1px solid var(--cy-ligne)}
html body .pf-chiffre>img{grid-row:1;grid-column:1;width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
html body .pf-chiffre>strong{grid-row:2;grid-column:1/-1;margin-top:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 22px/1.15 InterBody,sans-serif;color:var(--cy-texte);font-variant-numeric:tabular-nums}
html body .pf-chiffre>span:not(.pf-piste){grid-row:1;grid-column:2;min-width:0;font-size:13px;font-weight:700;line-height:1.3;color:var(--cy-texte-2)}
html body .pf-chiffre>small{grid-row:3;grid-column:1/-1;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--cy-texte-3)}
html body .pf-chiffre .pf-piste{grid-row:4;grid-column:1/-1;margin-top:8px;height:6px}
html body .pf-chiffre[data-cle="xp"]>strong{color:var(--cy-or)}
html body .pf-chiffre[data-cle="xp"] .pf-piste>span{background:var(--cy-or)}
html body .pf-verdict{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0 0 14px!important}
html body .pf-verdict>strong{font:800 22px/1.25 InterBody,sans-serif;letter-spacing:-.01em;color:var(--cy-texte)}
html body .pf-pret[data-etat="ready"] .pf-verdict>strong{color:#7BD8B8}
html body .pf-verdict>span{font-size:14px;font-weight:700;color:var(--cy-texte-2)}
html body .pf-reperes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
html body .pf-repere{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:10px 12px;border-radius:var(--cy-r2);background:var(--cy-surface-2);border:1px solid var(--cy-ligne)}
html body .pf-repere-marque{width:24px;height:24px;box-sizing:border-box;border-radius:999px;border:2px solid var(--cy-ligne-forte)}
html body .pf-repere[data-fait="oui"] .pf-repere-marque{border-color:#7BD8B8;background:#7BD8B8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1F3C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat}
html body .pf-repere-texte{display:flex;flex-direction:column;min-width:0}
html body .pf-repere-texte>strong{font-size:15px;line-height:1.35;color:var(--cy-texte)}
html body .pf-repere-texte>small{font-size:13px;line-height:1.4;color:var(--cy-texte-2)}
html body .pf-repere-but{font-size:12.5px;font-weight:700;line-height:1.3;color:var(--cy-texte-3);text-align:right;white-space:nowrap}
@media (max-width:479px){
  html body .pf-repere{grid-template-columns:24px minmax(0,1fr)}
  html body .pf-repere-but{grid-column:2;text-align:left;white-space:normal}
}
html body .pf-etape{margin:14px 0 0!important;font-size:14.5px;font-weight:600;line-height:1.5;color:var(--cy-texte)}
html body .pf-lecteur{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html body .pf-cal{max-width:480px;margin-top:14px}
html body .pf-cal-mois{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;height:16px;margin-left:36px;font-size:11.5px;line-height:16px;color:var(--cy-texte-3)}
html body .pf-cal-mois>span{overflow:visible;white-space:nowrap}
html body .pf-cal-corps{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px;margin-top:4px}
html body .pf-cal-jours{display:grid;grid-template-rows:repeat(7,minmax(0,1fr));gap:4px;align-items:center;font-size:11px;color:var(--cy-texte-3)}
html body .pf-cal-grille{display:grid;grid-template-rows:repeat(7,auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
html body .pf-cal-j,html body .pf-cal-legende i{display:block;aspect-ratio:1;border-radius:4px;background:rgba(245,246,255,.07)}
html body :is(.pf-cal-j,.pf-cal-legende i)[data-n="1"]{background:rgba(123,216,184,.30)}
html body :is(.pf-cal-j,.pf-cal-legende i)[data-n="2"]{background:rgba(123,216,184,.52)}
html body :is(.pf-cal-j,.pf-cal-legende i)[data-n="3"]{background:rgba(123,216,184,.78)}
html body :is(.pf-cal-j,.pf-cal-legende i)[data-n="4"]{background:#7BD8B8}
html body .pf-cal-j[data-n="gel"]{background:rgba(163,196,255,.34)}
html body .pf-cal-j[data-n="-1"]{visibility:hidden}
html body .pf-cal-j[data-auj="oui"]{outline:2px solid var(--cy-lien);outline-offset:1px}
html body .pf-cal-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:10px}
html body .pf-cal-legende{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--cy-texte-3)}
html body .pf-cal-legende i{width:12px;height:12px;border-radius:3px}
html body .pf-badges{list-style:none;margin:12px 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html body .pf-badge{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:12px 8px;border-radius:var(--cy-r2);background:var(--cy-surface-2);border:1px solid var(--cy-ligne);text-align:center}
html body .pf-badge>img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
html body .pf-badge>strong{max-width:100%;font-size:13.5px;line-height:1.25;color:var(--cy-texte);overflow-wrap:anywhere}
html body .pf-badge>small{font-size:12px;color:var(--cy-texte-3)}
html body .pf-badge[data-eu="non"]>img{filter:grayscale(1) brightness(.6)}
html body .pf-badge[data-eu="oui"]>small{color:var(--cy-or);font-weight:700}
/* 08/10 · audit : le seul lien du panneau Plus d'un programme gratuit était en 12 px gris, il passe en 16 px gras. */
html body .lab-plus-offer-link{font-size:16px!important;font-weight:700!important;color:#E7ECFF!important}
/* 08/10 · audit sur ordinateur et tablette : la flamme de la 1re victoire (290 px) débordait de sa scène (230 px) et mordait sur « Ta flamme est allumée ! » ; elle tient maintenant dans sa scène à toutes les tailles. L'accroche de l'accueil n'est plus en or (réservé aux récompenses). Au doigt, l'anneau de focus ne reste plus affiché après un appui (il reste au clavier). */
html body .guide-flame-stage .guide-flame-carrier{max-height:100%!important}
html body .desk-chip{color:#A3C4FF!important}
@media (hover:none){html body :focus:not(:focus-visible){outline:none!important}}
/* 08/10 · audit : « Score », « XP » et « Série » en haut du bilan faisaient 37 px de haut (33 px de large pour XP) ; 44 px au moins, pour le doigt. */
html body .v34-result button[data-nav-action^="vaTemps"]{min-height:44px!important;min-width:44px!important}
/* 08/10 · audit téléphone : « Explication complète » passait sur deux lignes (176 px, 13 px) à côté de « Continuer » sur une ligne ; le bouton prend la largeur de son libellé, Continuer le reste. */
@media (max-width:759px){html body button[data-nav-action="ouvreApprofondir"]{flex:0 0 auto!important;white-space:nowrap!important;padding-inline:14px!important}}
/* 08/10 · audit : dans la grille « Le programme » du Parcours, la barre d’une carte au titre sur deux lignes tombait 11 px plus bas que sa voisine ; le titre prend la place libre, barre et pied s’alignent en bas de la carte, et le pied passe à la ligne par blocs, sans couper « Niveau 0 / 1 ». */
html body .app-theme-card>.app-theme-copy{flex:1 1 auto;display:flex!important;flex-direction:column}
html body .app-theme-card>.app-theme-copy>span:first-child{flex:1 1 auto}
html body .app-theme-card>.app-theme-copy>span:last-child{flex-wrap:wrap;row-gap:2px}html body .app-theme-card>.app-theme-copy>span:last-child>span{white-space:nowrap}
/* 08/10 · audit téléphone : Réglages, Certoly Plus et le Carnet s’arrêtaient 16 px avant le bas (828 sur 844) : la règle générale des fenêtres ([role="dialog"], marge de 16 px) l’emportait sur la hauteur plein écran du panneau. */
@media (max-width:759.98px){html body .lab-unified-overlay>.lab-unified-sheet{height:calc(100dvh / var(--app-text-zoom,1))!important;max-height:calc(100dvh / var(--app-text-zoom,1))!important}}
/* 09/10/2026 · deuxième tour du carnet (choix de Kenan), en calme : série, réussite, examens et XP prennent chacun une teinte douce ;
   fond à 8 %, filet à 28 %, le nombre dans sa teinte. Le nombre de questions reste neutre. */
html body .pf-chiffre[data-cle="serie"]{--c:#EFA86E}html body .pf-chiffre[data-cle="bonnes"]{--c:#8CCF9A}html body .pf-chiffre[data-cle="examens"]{--c:#B4A2EE}html body .pf-chiffre[data-cle="xp"]{--c:#E8C66E}
html body .pf-chiffre:is([data-cle="serie"],[data-cle="bonnes"],[data-cle="examens"],[data-cle="xp"]){background:color-mix(in srgb,var(--c) 8%,var(--cy-surface-2));border-color:color-mix(in srgb,var(--c) 28%,transparent)}
html body .pf-chiffre:is([data-cle="serie"],[data-cle="bonnes"],[data-cle="examens"],[data-cle="xp"])>strong{color:var(--c)}
html body .pf-chiffre:is([data-cle="serie"],[data-cle="bonnes"],[data-cle="examens"],[data-cle="xp"]) .pf-piste>span{background:var(--c)}
/* 10/10/2026 · nuit, défaut vu sur les captures de la 09a : sur ordinateur, l'en-tête de Mon plan gardait le fond des
   barres épinglées du téléphone, une bande plus claire derrière le titre qui s'arrêtait avant le bord. */
@media(min-width:760px){html body .lab-plan-tab>.revision-plan-header{background:transparent!important;border-bottom:0!important}}