/* Certoly · système graphique de la vitrine (lot 5, 08/10/2026). Les jetons et les composants de l'app
   (experiences/app-bureau-20261003/systeme.css), posés sur toutes les pages du site : produit/docs/refonte/SYSTEME-GRAPHIQUE.md § 8.
   Kenan, 06/10 : « on dirait qu'on n'est pas sur la même app entre le site vitrine et l'app ». Chargée en dernier par
   produit/outils/lib/vitrine-statique.js : retirer cette couche rend la vitrine d'avant. Les feuilles d'avant posent des
   !important (controles-marque.css) et des styles en ligne : d'où le préfixe html[data-certoly-vitrine] et les !important. */

/* 5.1 · Les jetons de l'app, mêmes valeurs (un test les compare : experiences/app-bureau-20261003/vitrine-systeme.test.cjs),
   et ceux de la vitrine rebranchés dessus. Changer la couleur d'action, c'est changer --cy-action ici et dans l'app. */
html[data-certoly-vitrine]{
 --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);
 /* Propres au site : le vert de « Gratuit » (accès), et le fond de page validé le 27/09 (PREFERENCES-KENAN). */
 --cy-gratuit:#74E6CC;--cy-gratuit-fond:rgba(116,230,204,.12);
 --fond:var(--cy-page);--surface:var(--cy-surface);--surface-douce:var(--cy-surface);--texte:var(--cy-texte);--second:var(--cy-texte-2);
 --bleu:var(--cy-lien);--violet:var(--cy-plus);--or:var(--cy-or);--bord:var(--cy-ligne);
 --degrade-action:var(--cy-action);--ombre-action:0 6px 0 var(--cy-action-relief);--rayon-carte:var(--cy-r4);
 background:var(--cy-page)
}

/* 5.2 · Le fond de page : le motif pixel sous le voile indigo, partout (Kenan, 27/09 : « généraliser partout », app,
   vitrine, compte et connexion). L'en-tête prend le rail de l'app, le pied de page laisse voir le fond.
   Ce qui recule : le pointillé sur #131E4B, le second fond du compte et de l'avis, le fond plein de l'accueil. */
html[data-certoly-vitrine] body,html[data-certoly-vitrine] body.page-compte,html[data-certoly-vitrine] body.site-page:has(.feedback-layout){background:linear-gradient(#182155B8,#182155B8),#182155 url('/images/pixel-tiles.svg') repeat!important;background-size:auto,128px 128px!important}
html[data-certoly-vitrine] .site-page>div:is([style*="background-size:3px 3px"],[style*="background-size: 3px 3px"]){background-image:none!important}
html[data-certoly-vitrine] :is(main.home-structured,.home-structured>section.home-practical){background:transparent!important}
html[data-certoly-vitrine] .site-entete{background:var(--cy-rail)!important;border-bottom:1px solid var(--cy-ligne)!important}
html[data-certoly-vitrine] .site-footer{background:transparent!important;border-top:1px solid var(--cy-ligne)!important}
html[data-certoly-vitrine] .site-categories{border-top-color:var(--cy-ligne)!important}
html[data-certoly-vitrine] .site-skip{background:var(--cy-choix-plein)!important;color:#fff!important;border-radius:var(--cy-r2)}

/* 5.3 · Le bouton principal de l'app (« Commencer ma séance », mesuré au 7.8 : 48 px, rayon 16, bleu d'action et son
   relief, 16 px graisse 800). Il remplace le violet #A692FA du 26/09 (D-2026-09-26-07) : une seule couleur d'action pour
   le site et l'app. Les confirmations de formulaire restent violettes, comme dans l'app (D-2026-09-26-05). */
html[data-certoly-vitrine] :is(.home-primary,.certoly-bouton,.button:not(.secondary),.account-intro-link,a.v34-primary){min-height:48px!important;padding:12px 20px!important;border-radius:var(--cy-r3)!important;background:var(--cy-action)!important;font-size:16px!important;font-weight:800!important;box-shadow:0 6px 0 var(--cy-action-relief)!important}
html[data-certoly-vitrine] :is(.home-primary,.certoly-bouton,.button:not(.secondary),.account-intro-link,a.v34-primary):active{box-shadow:0 2px 0 var(--cy-action-relief)!important}
html[data-certoly-vitrine] .certoly-pilule .certoly-bouton{height:44px!important;min-height:44px!important;padding:10px 20px!important;box-shadow:0 3px 0 var(--cy-action-relief)!important;margin-bottom:3px}
/* 09/10/2026 · choix de Kenan dans le carnet : « Trouver » tient dans la barre (44 px, relief de 3 px), au catalogue comme à l’accueil. */
html[data-certoly-vitrine] form[action="/certifications/"] .certoly-pilule button{height:44px!important;min-height:44px!important;box-shadow:0 3px 0 var(--cy-action-relief)!important;margin-bottom:3px}
/* Le focus est bleu partout, comme dans l'app : l'or dit une récompense. */
html[data-certoly-vitrine] :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--cy-focus)!important;outline-offset:3px!important}

/* 5.4 · L'accent d'un titre est or, ou il n'y en a pas. Ce qui recule : le bleu, le violet et l'or clair. */
html[data-certoly-vitrine] :is(h1,h2) :is(em,span[style*="color"]),html[data-certoly-vitrine] :is(.home-structured h1 span,.offer-intro h1 span,.pro-contact h2 em,.accueil-selection h2 span){color:var(--cy-or)!important}

/* 5.5 · Une carte : la surface, un contour net de 1,5 px, rayon 20, sans ombre (RETOURS capture 11, comme dans l'app).
   Programmes, exemples de QCM, invitations, panneaux du compte et d'achat, cartes Pro, questions de culture. */
html[data-certoly-vitrine] :is(.programme,.qcm-exemple,.invitation,.account-panel,.purchase-panel,.purchase-free,.plus-faq,.pro-publics>article,.pro-contact>form,.pro-perimetre,.site-question,.cgu-cadre,.home-method,:is(div,details):is([style*="border-radius:20px"],[style*="border-radius: 20px"]):is([style*="background:var(--surface"],[style*="background: var(--surface"])){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[data-certoly-vitrine] .programme:hover{border-color:var(--cy-lien)!important}
html[data-certoly-vitrine] .programme .programme-bas{border-top-color:var(--cy-ligne)!important}
html[data-certoly-vitrine] .programme-bas strong{background:transparent!important;color:var(--cy-lien)!important;padding:0!important}
html[data-certoly-vitrine] .a-retenir{background:var(--cy-surface)!important;border-left-color:var(--cy-or)!important;border-radius:0 var(--cy-r3) var(--cy-r3) 0!important}
html[data-certoly-vitrine] .cover{background:var(--cy-surface)!important;border-radius:var(--cy-r3)!important}
html[data-certoly-vitrine] .cover img{border-radius:0!important}
html[data-certoly-vitrine] .sommaire,html[data-certoly-vitrine] .sommaire .text-link{border-color:var(--cy-ligne)!important}

/* 5.6 · Rangées, champs, pilules et puces, ceux de l'app. Une rangée : --cy-surface-2, une ligne, rayon 12. Un champ :
   pareil, avec la ligne forte. Une pilule de choix : rayon 999 ; choisie, --cy-choix-plein (plus jamais l'or).
   La puce Plus et la puce Gratuit ont le même dessin, chacune sa couleur. */
html[data-certoly-vitrine] :is(.purchase-choice,.site-question-reponses>button,.feedback-types label,.feedback-stars label){background:var(--cy-surface-2)!important;border:1px solid var(--cy-ligne)!important;border-radius:var(--cy-r2)!important;box-shadow:none!important}
html[data-certoly-vitrine] :is(.purchase-choice,.site-question-reponses>button,.feedback-types label):hover{border-color:var(--cy-ligne-forte)!important}
html[data-certoly-vitrine] .feedback-types label:has(input:checked){background:var(--cy-choix-plein)!important;border-color:transparent!important;color:#fff!important}
html[data-certoly-vitrine] :is(.feedback-stars label:has(input:checked) svg,.feedback-stars label:has(~label input:checked) svg){color:var(--cy-or)!important}
html[data-certoly-vitrine] :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea){background:var(--cy-surface-2)!important;border:1px solid var(--cy-ligne-forte)!important;border-radius:var(--cy-r2)!important;color:var(--cy-texte)!important}
html[data-certoly-vitrine] select{background-color:var(--cy-surface)!important;border:1px solid var(--cy-ligne-forte)!important;border-radius:var(--cy-r2)!important;color:var(--cy-texte)!important}
html[data-certoly-vitrine] .certoly-pilule{background:var(--cy-surface)!important;border:1px solid var(--cy-ligne-forte)!important}
/* Le champ d’une pilule de recherche n’a pas de cadre : la pilule en est un. Même spécificité que la règle des champs, plus une classe. */
html[data-certoly-vitrine] .certoly-pilule :is(input:not([type=checkbox]):not([type=radio]):not([type=submit])){background:transparent!important;border:0!important}
html[data-certoly-vitrine] .password-control input{border-radius:var(--cy-r2)!important}
html[data-certoly-vitrine] :is(.filters button,a.scp0,.purchase-free-links a){min-height:44px;border-radius:999px!important;border:1px solid var(--cy-ligne-forte)!important;background:var(--cy-surface-2)!important;color:var(--cy-texte-2)!important;box-shadow:none!important}
html[data-certoly-vitrine] :is(.filters button,a.scp0,.purchase-free-links a):hover{background:var(--cy-survol)!important;color:var(--cy-texte)!important}
html[data-certoly-vitrine] .filters button[aria-pressed=true]{border-color:transparent!important;background:var(--cy-choix-plein)!important;color:#fff!important}
html[data-certoly-vitrine] :is(.site-account>summary,.site-menu>summary){background:var(--cy-surface-2)!important;border:1px solid var(--cy-ligne-forte)!important;border-radius:14px!important}
html[data-certoly-vitrine] :is(.acces.acces-plus,.acces.acces-gratuit,.purchase-price){border:0!important;border-radius:999px!important}
html[data-certoly-vitrine] .acces.acces-plus{background:var(--cy-plus-fond)!important;color:var(--cy-plus-texte)!important}
html[data-certoly-vitrine] .acces.acces-gratuit{background:var(--cy-gratuit-fond)!important;color:var(--cy-gratuit)!important}
html[data-certoly-vitrine] .purchase-price{background:var(--cy-surface-2)!important;color:var(--cy-texte)!important}
html[data-certoly-vitrine] .plus-wordmark{font-family:var(--police-titre)!important}
html[data-certoly-vitrine] .plus-wordmark>span{background:var(--cy-plus-fond)!important;border:1px solid var(--cy-plus-ligne)!important;color:var(--cy-plus-texte)!important;border-radius:var(--cy-r1)!important}
html[data-certoly-vitrine] .qcm-offre a{color:var(--cy-plus-texte)!important}

/* 5.7 · Le texte : trois gris et le bleu de lien. Ce qui recule : une quinzaine de gris et de bleus voisins, posés
   page par page (lecture, Plus, compte, avis, accueil), et le violet des liens du compte. */
html[data-certoly-vitrine] .lecture,html[data-certoly-vitrine] :is(.purchase-choice-copy small,.purchase-steps li,.plus-faq p,details>p,.field-note,.feedback-layout p,.account-back,.home-structured details p,.home-structured li>span,.accueil-titre>p,.home-section-heading>p,.home-raccourcis>span,.home-free){color:var(--cy-texte-2)!important}
html[data-certoly-vitrine] :is(.account-links button,.account-layout span>a,.feedback-note a,.feedback-email,.accueil-lire,.accueil-lire>span){color:var(--cy-lien)!important}
html[data-certoly-vitrine] .feedback-layout label>span{color:var(--cy-texte)!important}
html[data-certoly-vitrine] .account-tabs{border-bottom-color:var(--cy-ligne)!important}
html[data-certoly-vitrine] .account-tabs button{color:var(--cy-texte-2)!important}
html[data-certoly-vitrine] .account-tabs button[aria-pressed=true]{color:var(--cy-texte)!important;border-bottom-color:var(--cy-lien)!important}
html[data-certoly-vitrine] :is(.plus-compare td:last-child,.plus-compare thead th:last-child){background:var(--cy-plus-fond)!important}html[data-certoly-vitrine] .plus-compare thead th:last-child{color:var(--cy-plus-texte)!important}html[data-certoly-vitrine] :is(.plus-compare th,.plus-compare td){border-bottom-color:var(--cy-ligne)!important}
html[data-certoly-vitrine] .site-surtitre{color:var(--cy-or)!important}
html[data-certoly-vitrine] .lecture details>summary{color:var(--cy-texte)!important}
/* 5.8 · Les dernières couleurs isolées (relevé du 08/10, qui-porte-apres1) : les liens en #8FB2FF des pages légales et des
   guides deviennent le bleu de lien, les gris #C5CDE2 et #D5DAEC le deuxième gris, les raccourcis de l'accueil deviennent des pilules, les filets et les puces suivent la ligne et le lien.
   Le bouton secondaire garde le style validé le 26/09 (D-2026-09-26-05, « Changer de mode »), le même que dans l'app. */
html[data-certoly-vitrine] :is(.site-legal a,.accueil-guides-titre>a,.accueil-guides article:hover h3){color:var(--cy-lien)!important}
html[data-certoly-vitrine] .site-legal a:is([style*="border:2px"],[style*="border: 2px"]){border-color:var(--cy-lien)!important}
html[data-certoly-vitrine] .site-legal span:is([style*="background:#8FB2FF"],[style*="background: rgb(143, 178, 255)"]){background:var(--cy-lien)!important}
html[data-certoly-vitrine] .site-legal span:is([style*="background:#FFCC55"],[style*="background: rgb(255, 204, 85)"]){background:var(--cy-or)!important}
html[data-certoly-vitrine] .site-legal .site-section{border-color:var(--cy-ligne)!important}
html[data-certoly-vitrine] :is(.home-structured .home-portal p,.home-steps p,.feedback-intro p,.feedback-stars output,.feedback-hint,.feedback-note){color:var(--cy-texte-2)!important}
html[data-certoly-vitrine] :is(.feedback-form legend,.feedback-form label[for],.avis legend){color:var(--cy-texte)!important}
html[data-certoly-vitrine] .accueil-domaine li a:hover{color:var(--cy-texte)!important;background:var(--cy-choix-plein)!important;border-color:var(--cy-lien)!important}
html[data-certoly-vitrine] .site-entete .site-liens a.compte:hover{background:var(--cy-choix-plein)!important;border-color:var(--cy-lien)!important}
html[data-certoly-vitrine] .home-structured .home-raccourcis a{border-radius:999px!important;border:1px solid var(--cy-ligne-forte)!important;background:var(--cy-surface-2)!important;color:var(--cy-texte-2)!important}
html[data-certoly-vitrine] .home-structured .home-raccourcis a:hover{border-color:var(--cy-lien)!important;color:var(--cy-texte)!important}
/* 08/10 · dans le héros, les puces passent sur le décor (le chat à 390 px) : fond plein de la surface, jamais le voile translucide. */
html[data-certoly-vitrine] .home-structured .home-welcome .home-raccourcis a{background:var(--cy-surface)!important}
html[data-certoly-vitrine] .home-structured section.home-practical{border-color:var(--cy-ligne)!important}
/* 08/10 · catalogue d'après la veille (VEILLE-PAGES-PRO § 5) : la première rangée de cartes au premier écran, comme chez les pros.
   Illustration plafonnée en deux colonnes, retirée en une colonne (comme au téléphone) ; le titre de section, qui redit le h1, reste pour les lecteurs d'écran. */
html[data-certoly-vitrine] .hero.hero-catalogue{padding-top:8px;padding-bottom:20px}
html[data-certoly-vitrine] .hero.hero-catalogue .hero-visual>img{max-height:260px;object-fit:cover}
html[data-certoly-vitrine] [data-finder]:has(.hero-catalogue) .finder>.section-head>h2{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-certoly-vitrine] [data-finder]:has(.hero-catalogue) .finder>.section-head{margin-bottom:10px}
html[data-certoly-vitrine] .filters .filtre-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:8px;padding:0 6px;border-radius:999px;background:var(--cy-surface-2);color:var(--cy-texte-2);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
html[data-certoly-vitrine] .filters [aria-pressed=true] .filtre-n{background:rgba(255,255,255,.18);color:inherit}
html[data-certoly-vitrine] .hero.hero-catalogue .eyebrow{display:none!important}
html[data-certoly-vitrine] [data-finder]:has(.hero-catalogue) .finder{padding-top:16px}
html[data-certoly-vitrine] [data-finder]:has(.hero-catalogue) .filters{margin:12px 0 18px}
@media(min-width:1051px){html[data-certoly-vitrine] .hero.hero-catalogue h1{font-size:clamp(40px,3.4vw,52px)}}
@media(max-width:1050px){html[data-certoly-vitrine] .hero.hero-catalogue{grid-template-columns:1fr}html[data-certoly-vitrine] .hero.hero-catalogue .hero-visual{display:none}html[data-certoly-vitrine] .hero.hero-catalogue .lede{max-width:560px}}
/* 08/10 · catalogue, mesures aux dix largeurs : le fil d'Ariane passait à 28 px dès 761 px (44 au téléphone) ; la cible grandit, la mise
   en page ne bouge pas (marges négatives). L'intitulé « Habilitation électrique (NF C18-510) » laissait « 510) » seul à 360 et 768. */
@media(min-width:761px){html[data-certoly-vitrine] .crumb a{min-height:44px;margin-block:-8px}}
/* 08/10 · armée de personas : un sigle court (« AMF », « AIPR ») du fil d’Ariane restait sous 44 px de large ; il se centre dans 44 px. */
html[data-certoly-vitrine] .crumb a{min-width:44px;justify-content:center}
/* 08/10 · même chose pour le lien d’auteur sous un guide (« Certoly », 41 px de large sur tablette). */
html[data-certoly-vitrine] .guide-meta a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}
html[data-certoly-vitrine] .programme :is(.intitule,.themes){text-wrap:pretty}
/* 08/10 · connexion et inscription d'après la veille (VEILLE-PAGES-PRO § 6) : au téléphone, le bouton « Créer mon compte
   gratuit » tombait sous le premier écran (826 → 876 px à 360). Les marges se resserrent, rien ne disparaît. */
@media(max-width:600px){html[data-certoly-vitrine] .account-layout{padding-top:12px}html[data-certoly-vitrine] .account-story{margin-bottom:14px}html[data-certoly-vitrine] .account-tabs{margin-bottom:14px}html[data-certoly-vitrine] .account-separator{margin-block:12px}html[data-certoly-vitrine] .account-consent{margin-top:14px}html[data-certoly-vitrine] .account-submit{margin-top:16px}}
/* 08/10 · guides d'après la veille (VEILLE-PAGES-PRO § 7) : partager un guide, une ligne entre les sources et l'invitation. */
html[data-certoly-vitrine] .guide-partage{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:32px 0 0;padding:18px 0 0;border-top:1px solid var(--cy-ligne)}html[data-certoly-vitrine] .guide-partage p{margin:0;color:var(--cy-texte-2);text-wrap:pretty}html[data-certoly-vitrine] .guide-partage .button{min-height:44px}
/* 08/10 · personas (sonde personas-site.js du dossier de session) : le sommaire d'un guide passait à 40 px dès 760 px, et la liste « Les autres domaines » de Collège & lycée à 24 px, à toutes les largeurs. 44 px partout, comme le fil d'Ariane. */
html[data-certoly-vitrine] .sommaire nav>a{display:flex;align-items:center;min-height:44px}
html[data-certoly-vitrine] .site-section div[style*="flex-direction: column"][style*="gap: 7px"]{gap:0!important}html[data-certoly-vitrine] .site-section div[style*="flex-direction: column"]>a[style*="min-height: 24px"]{min-height:44px!important}

/* 08/10 · audit d'une heure (rapports vitrine-bureau et vitrine-tel du dossier de session). FAQ de Plus au même dessin que les autres (plus de triangles du navigateur, plus de texte collé au cadre) ; cadre de /pro/ avec sa marge ; liens du menu Certifications en cartes de 48 px comme ceux de l'app ; titre « Comment ça marche ? » blanc comme les autres ; catalogue en 3 colonnes sur grand écran ; « Voir la réponse » qui se lit comme un bouton ; trou vide du blog ; bouton des pages QCM décollé du paragraphe. */
html[data-certoly-vitrine] .plus-faq{padding:24px clamp(18px,4vw,32px) 12px!important}
html[data-certoly-vitrine] .plus-faq summary,html[data-certoly-vitrine] :is(.qcm-exemple,.qcm-textes) summary{list-style:none;display:flex!important;align-items:center;justify-content:space-between;gap:16px;min-height:52px;cursor:pointer}
html[data-certoly-vitrine] .plus-faq summary::-webkit-details-marker,html[data-certoly-vitrine] :is(.qcm-exemple,.qcm-textes) summary::-webkit-details-marker{display:none}
html[data-certoly-vitrine] .plus-faq summary::after,html[data-certoly-vitrine] :is(.qcm-exemple,.qcm-textes) summary::after{content:'+';flex:none;color:#B9D0FF;font:700 22px/1 InterBody,sans-serif}
html[data-certoly-vitrine] .plus-faq details[open]>summary::after,html[data-certoly-vitrine] :is(.qcm-exemple,.qcm-textes) details[open]>summary::after,html[data-certoly-vitrine] details:is(.qcm-exemple,.qcm-textes)[open]>summary::after{content:'\2212'}
html[data-certoly-vitrine] :is(.qcm-exemple,.qcm-textes) summary{color:#B9D0FF!important}
html[data-certoly-vitrine] .pro-perimetre{padding:24px clamp(18px,4vw,32px)!important}
html[data-certoly-vitrine] .site-entete .site-catalogue-panel .site-catalogue-group>div>a:not(.site-catalogue-title):not(.site-catalogue-guide){display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:10px 14px;margin:8px 0;background:#2A3557;border:1px solid #4B6090;border-radius:10px;color:#F5F6FF;font-size:16px;text-decoration:none;white-space:normal}
html[data-certoly-vitrine] .site-entete .site-catalogue-panel .site-catalogue-group>div>a:not(.site-catalogue-title):not(.site-catalogue-guide)::after{content:'\203A';color:#B9D0FF;font-size:22px}
html[data-certoly-vitrine] #home-method-title{color:#F5F6FF!important}
@media (min-width:1200px){html[data-certoly-vitrine] .finder .programmes{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
html[data-certoly-vitrine] .finder>.result-tools:has(p[data-count]:empty):has([data-clear][hidden]){display:none!important}
html[data-certoly-vitrine] main p:has(>a.button){margin-top:20px!important}
/* 08/10 · audit : le formulaire de /avis/ était en 13 px (libellés) et 10,8 px (« facultatif ») quand /connexion/ et /pro/ sont en 16 px. */
html[data-certoly-vitrine] :is(.feedback-letter label,.feedback-types legend){font-size:16px!important}html[data-certoly-vitrine] :is(.feedback-letter,.feedback-types) :is(legend,label) small{font-size:13px!important}

/* 08/10 · audit sur ordinateur : la colonne de côté des pages QCM (action et sommaire qui suivent le défilement), le bouton
   de l'en-tête qui redevient transparent au défilement (la règle de fond ci-dessus l'avait rendu opaque). */
html[data-certoly-vitrine] .qcm-cote{display:none}
@media(min-width:1051px){
html[data-certoly-vitrine] .article-layout.qcm-layout{grid-template-columns:minmax(0,740px) 280px!important;column-gap:56px!important;justify-content:start!important}
html[data-certoly-vitrine] .qcm-cote{display:grid;gap:16px;align-self:start;position:sticky;top:96px}
html[data-certoly-vitrine] .qcm-cote-carte{display:grid;gap:12px;padding:20px;background:var(--cy-surface);border:1.5px solid var(--cy-ligne-forte);border-radius:16px}
html[data-certoly-vitrine] .qcm-cote-carte .button{justify-content:center;width:100%;margin:0}
html[data-certoly-vitrine] .qcm-cote-titre{margin:0;font:800 18px/1.3 Baloo2,InterBody,sans-serif;color:var(--cy-texte)}
html[data-certoly-vitrine] .qcm-cote-note{margin:0;font-size:14px;color:#C7CEE4}
html[data-certoly-vitrine] .qcm-cote-sommaire{display:grid;padding:4px 0 0 16px;border-left:2px solid var(--cy-ligne)}
html[data-certoly-vitrine] .qcm-cote-sommaire p{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#C7CEE4}
html[data-certoly-vitrine] .qcm-cote-sommaire a{display:flex;align-items:center;min-height:44px;color:var(--cy-lien);font-size:15px;text-decoration:none}
html[data-certoly-vitrine] .qcm-cote-sommaire a:hover{text-decoration:underline}
html[data-certoly-vitrine] .site-entete.site-entete-away:not(:focus-within):not(:has(.site-catalogue[open])){background:transparent!important;border-bottom-color:transparent!important}
}
/* 08/10 · audit ordinateur : le titre du héros changeait de taille d’une page à l’autre (44 px domaines, 48,96 catalogue, 50 Plus, 52 guides et Pro) ; une seule échelle : le jeton au téléphone, de 40 à 52 px au-dessus (le jeton seul donnait 52 px dans la colonne de 397 px d’un domaine à 768). */
@media(max-width:760px){html[data-certoly-vitrine] :is(.domaine-hero,.hero.hero-catalogue,.plus-intro) h1{font-size:var(--taille-h1)!important}}
@media(min-width:761px){html[data-certoly-vitrine] :is(.hero,.plus-intro,.qcm-hero) h1{font-size:clamp(40px,3.6vw,52px)!important}}
/* 08/10 · audit : le héros de /pro/ n’avait pas d’image (344 px vides à droite) ; il prend l’illustration du catalogue, comme la page 404, et la perd sous 1 051 px comme le catalogue. */
@media(min-width:1051px){html[data-certoly-vitrine] .hero.pro-hero{grid-template-columns:1.15fr 1fr}}
@media(max-width:1050px){html[data-certoly-vitrine] .hero.pro-hero{grid-template-columns:1fr}html[data-certoly-vitrine] .hero.pro-hero .hero-visual{display:none}html[data-certoly-vitrine] .hero.pro-hero .lede{max-width:620px}}
/* 08/10 · audit : « Commencer le QCM » collait au paragraphe du héros. */
html[data-certoly-vitrine] .qcm-hero .lede{margin-bottom:24px}
/* 08/10 · audit : sur /premium/, les titres de section faisaient 30 et 27 px (32 sur les autres pages) ; ils prennent le jeton commun. */
html[data-certoly-vitrine] :is(.plus-offres>h2,.plus-etapes h2,.purchase-panel h2,.plus-faq h2){font-size:var(--taille-h2)!important}
/* 08/10 · audit : sur /culture/ et /scolaire/, le filet au-dessus des guides dépassait de la gouttière de chaque côté (28 px, la section porte sa propre marge) ; il suit le contenu, comme sur les domaines, à la même distance. */
html[data-certoly-vitrine] .site-section.bloc-guides{border-top:0!important;padding-top:0!important}
html[data-certoly-vitrine] .site-section.bloc-guides::before{content:"";display:block;border-top:1px solid var(--bord);margin-bottom:36px}
@media(max-width:760px){html[data-certoly-vitrine] .site-section.bloc-guides::before{margin-bottom:28px}}
/* 08/10 · audit : l’article à la une du blog n’avait ni « Domaine · durée » ni invitation à lire, contrairement aux cartes de la grille. */
html[data-certoly-vitrine] .feature .guide-repere{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--cy-texte-2,#C7CEE4)}
html[data-certoly-vitrine] .feature .feature-lire{display:inline-block;margin-top:14px;font-weight:800;color:var(--cy-lien,#A3C4FF)}
/* 08/10 · audit : sur /avis/, le champ e-mail (440 px) était plus étroit que le message et le bouton (700 px). */
html[data-certoly-vitrine] .feedback-details{max-width:none!important}
/* « Ta note » restait à 13 px quand les quatre autres libellés du formulaire sont à 16 px. */
html[data-certoly-vitrine] .feedback-rating>legend{font-size:16px!important}
/* 10/10/2026 · nuit, défaut vu par l'armée 09a : sur les pages légales, « Aller au contenu » prenait la couleur des liens
   du texte (#A3C4FF, règle `.site-legal a` plus précise que la sienne) sur le bleu des choix : 4,37:1, sous le seuil de
   4,5:1. Il reprend son blanc, 7,7:1. */
html[data-certoly-vitrine] .site-legal .site-skip[href]{color:#fff!important}