« Disponibles maintenant » / « En préparation » devenaient des ITEMS de cette grille → les cartes se tassaient à 156px au lieu de ~337px. En vue groupée, la grille du conteneur n’a plus lieu d’être : chaque section porte sa propre grille interne (.certs / .fam-list). ========================================================================== */ #grid.grouped, .certs.grouped{ display:block !important; } .sec-dispo .certs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:14px; } /* ========================================================================== MENU PROFIL — il s’affichait OUVERT en permanence sur toutes les pages Le JS (site.js, profileMenu) bascule bien une classe .on, mais aucune règle ne la consommait : le panneau restait donc collé sous la barre, ouvert. ========================================================================== */ .hprof{ position:relative; } .hprof-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:210px; display:none; z-index:90; background:var(--navy2,#1B2342); border:1px solid var(--line-2,rgba(255,255,255,.14)); border-radius:14px; box-shadow:0 24px 54px -22px rgba(0,0,0,.82); padding:7px; } .hprof.on .hprof-menu{ display:block; } .hprof-menu a{ display:block; padding:9px 11px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--muted,#AEB6D9); text-decoration:none; } .hprof-menu a:hover{ color:var(--white,#F5F6FF); background:rgba(255,255,255,.06); } .hprof-menu .hprof-h{ padding:6px 11px 8px; font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--dim,#7A83A8); } /* ========================================================================== PAGES DE DOMAINE — les 3 blocs n’avaient AUCUN style (générés par JS, jamais habillés). Résultat : bouton principal rendu en lien texte souligné, et chiffres collés à leur libellé (« 570 questionsrédigées et expliquées ») parce que les étaient en display:inline. Une seule édition ici couvre les 8 pages de domaine. ========================================================================== */ /* Le bouton principal : même pilule dégradée que le CTA du site. */ .dom-go{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:14px; font-weight:800; font-size:15px; color:#fff !important; text-decoration:none; background:linear-gradient(160deg,#8FB2FF 0%,#5C86E0 52%,#8F7FE3 100%); box-shadow:0 10px 26px -12px rgba(70,100,230,.7); transition:transform .15s ease,filter .15s ease; } .dom-go:hover{ transform:translateY(-2px); filter:brightness(1.06); } .dom-go:focus-visible{ outline:2px solid var(--blue-l,#8FB2FF); outline-offset:3px; } /* Repères chiffrés : le passe en bloc → le libellé descend sous le chiffre. ⚠️ 27/07 — l'écart était de 10 px pour des blocs de ~200 px de large et 60 de haut : proportionnellement, ça se lit comme un bloc unique découpé au trait, pas comme trois repères. Porté à 16 px, et le minimum de colonne à 160 px pour qu'un chiffre long (« 1 177 questions ») ne force pas un retour à la ligne dans le libellé. */ .dom-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin:0 0 18px; } .dom-stats > *{ background:rgba(33,42,77,.5); border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:14px; padding:13px 15px; font-size:13px; color:var(--muted,#AEB6D9); line-height:1.4; } .dom-stats b{ display:block; /* ← c’est ce qui décolle le chiffre du libellé */ font-size:19px; font-weight:900; color:var(--white,#F5F6FF); letter-spacing:-.01em; margin-bottom:2px; font-variant-numeric:tabular-nums; } /* ⛔ Ici vivait une seconde déclaration de `.dom-band`, postérieure au `display:none` posé le 20/07 — donc elle le contredisait et faisait REVENIR la bande que cette décision avait retirée. Personne ne l'a vu pendant une semaine. Les deux blocs sont partis le 27/07, avec le markup. La leçon : masquer un bloc ne le retire pas, ça le met en sursis. */ @media(max-width:559px){ .dom-stats{ grid-template-columns:1fr 1fr; gap:12px; } .dom-stats > *{ padding:11px 12px; } .dom-stats b{ font-size:17px; } .dom-go{ width:100%; justify-content:center; } } /* ========================================================================== BARRE DE DOMAINES — soulignement centré + couleur de domaine au survol (réécrit en AJOUT après l’incident de troncature du 20/07 : la version précédente remplaçait un bloc par `slice`, ce qui a coupé 55 Ko de CSS.) · le border-bottom ne sert plus d’indicateur (padding asymétrique de .cat-all → son trait débordait de 15px sous le vide) ; · le trait de survol prend la COULEUR DU DOMAINE (--fc), pas le bleu ; · pendant le survol de la barre, le trait ACTIF est masqué → fini la « double barre » (bleu de l’actif + couleur du survolé). ========================================================================== */ .catbar .cat > a, .catbar-in .cat-all{ position:relative; border-bottom:0 !important; } .catbar .cat > a::after, .catbar-in .cat-all::after{ content:""; position:absolute; bottom:0; height:2px; border-radius:2px; opacity:0; transition:opacity .15s ease; } .catbar .cat > a::after{ left:13px; right:13px; background:var(--fc,var(--blue-l,#8FB2FF)); } .catbar-in .cat-all::after{ left:0; right:15px; background:var(--blue-l,#8FB2FF); } .catbar .cat > a.on::after, .catbar-in .cat-all.on::after{ opacity:1; } .catbar-in:hover .cat > a::after, .catbar-in:hover .cat-all::after{ opacity:0; } .catbar .cat:hover > a::after, .catbar .cat:focus-within > a::after, .catbar-in .cat-all:hover::after{ opacity:1; } /* ========================================================================== FAISCEAU DORÉ RETIRÉ (demande utilisateur — « pas très beau ») Réécrit après l’incident de troncature du 20/07. Le balisage est CONSERVÉ sur les 9 pages : il porte désormais le dégradé bleu→violet du titre (voir css/type.css). Pour restaurer le trait doré : supprimer ce bloc. ========================================================================== */ .beam::after, h1 em.beam::after{ content:none !important; } /* ========================================================================== ACCÈS DIRECTS sous la recherche du héros — RETIRÉS le 27/07/2026 La rangée « Prêtes : AMF · SST · Côtier · Élec · AIPR · SSIAP 1 » disait une troisième fois ce que le champ de recherche disait au-dessus et le catalogue en dessous. Six liens de plus dans le premier écran, pour aucune information nouvelle. Le markup et le script qui la remplissait sont retirés de site/index.html ; ces règles n'ont donc plus de cible. ⚠️ `.hd-lbl` reste stylé dans css/type.css (règle partagée avec .eyebrow, .pv-k, .badge…) — ne pas l'y retirer, il sert ailleurs. ========================================================================== */ /* — Repères de domaine : le texte vit dans un IMBRIQUÉ, pas dans un enfant direct. `.dom-stats > *` ne l’atteignait donc pas, et le span gardait sa largeur intrinsèque (225px) → 30px de débordement à 375px. On borne tout ce qui est à l’intérieur. — */ .dom-stats *, .dom-band *{ min-width:0; max-width:100%; } .dom-stats span, .dom-band span{ display:block; overflow-wrap:anywhere; } /* — Très petits écrans (≤340px) : la rangée d’en-tête réclamait 5px de plus que l’écran, « Commencer » sortait du cadre sur toutes les pages. On raccourcit le libellé (le texte complet reste dans le DOM pour les lecteurs d’écran) et on resserre les espaces. — */ @media (max-width:340px){ header .nav .cta{ padding:0 9px; font-size:12.5px; } header .wrap.nav{ gap:5px; padding-left:7px; padding-right:7px; } header .brand{ font-size:16px; } header .brand img{ width:27px; height:27px; } } /* — Bloc de tête des pages de domaine : .dom-hero et .dom-cta ont un grid-row explicite, mais .dom-stats et .dom-band n’en avaient AUCUN → placement automatique, les deux atterrissaient sur la même rangée de la colonne droite et se CHEVAUCHAIENT de 46px (constaté à 936px de large). On leur donne leur propre rangée, et on aligne la colonne en haut. — */ @media (min-width:881px){ .dom-top{ align-items:start; } .dom-top .dom-stats{ grid-column:2; grid-row:1; align-self:start; } .dom-top .dom-band{ grid-column:2; grid-row:2; align-self:start; margin:0; } } /* ========================================================================== BARRE DE DOMAINES — défilement horizontal SUPPRIMÉ (25/07/2026) ========================================================================== Demande explicite : « je trouve ça super chiant, seul le défilement vertical est cool ». La version du 24/07 rendait la barre défilante entre 881 et 980 px. C'était traiter le symptôme, et deux diagnostics successifs se sont révélés faux avant le bon : ✗ « c'est le menu déroulant fermé, large de 250 px » — testé avec `display:none !important` : le débordement n'a pas bougé d'un pixel. ✗ « il suffit de resserrer les onglets » — ne réglait qu'une largeur précise. ✓ LA CAUSE : `.catbar-in::before` affiche l'étiquette « Certifications : », qui est un élément de flex à part entière. Elle n'apparaît pas dans la liste des enfants du conteneur, d'où des sommes de largeurs qui ne tombaient jamais juste. Elle n'est affichée qu'à partir de 920 px et coûte une centaine de pixels — exactement ce qui manquait entre 920 et 1100. Correctif en deux temps, mesuré à chaque largeur : 1. l'étiquette disparaît sous 1101 px → 920 à 1100 réglés 2. léger resserrage entre 881 et 919 px → la dernière plage réglée Résultat vérifié à 881, 890, 900, 910, 919, 920, 940, 980, 1000, 1100 et 1280 px : 0 débordement de page, 0 défilement interne, partout. ⚠️ `!important` est nécessaire, pas décoratif : les règles de base de `.catbar-in` vivent dans le `