/* ============================================================================ CAP LINK — Premium 2.0.0 · feuille globale Chargée sur les 103 routes. Contient les jetons du système, l'identité de marque, les états de focus et trois correctifs ciblés. La composition de la page d'accueil est dans home.css, chargée uniquement sur l'accueil. Strictement additive. Ne modifie aucune brique, ne remplace aucun gabarit, n'injecte aucun contenu. Chaque règle corrige un écart mesuré en production. Retour arrière : désactiver l'extension. ============================================================================ */ /* ---------------------------------------------------------------------------- 0. JETONS — un système, pas des valeurs décidées section par section Les valeurs de tête reprennent EXACTEMENT ce qui est déjà rendu au-dessus de 1440 px : le poste de travail ne bouge pas d'un pixel. Toute la fluidité ajoutée joue sous cette largeur, là où les valeurs fixes des briques serraient le texte. ---------------------------------------------------------------------------- */ :root{ /* Marque — relevé : cinq ors et trois bleus nuit cohabitaient. */ --clp-gold:#c89b3c; --clp-gold-hover:#b8892c; /* L'or de marque #c89b3c ne passe PAS le seuil AA en TEXTE sur fond clair : 2,38:1 sur #f5f7fa et 2,56:1 sur blanc, alors qu'il faut 4,5. Sur le bleu nuit il est a 6,03 et reste donc l'or de marque partout ailleurs. Ce second jeton est reserve au TEXTE dore pose sur fond clair — sur-titres, etoiles des temoignages — ou il mesure 4,56 sur #f5f7fa et 4,90 sur blanc. Ce n'est pas une seconde couleur de marque : c'est la meme, assombrie de ce qu'il faut pour rester lisible. */ --clp-gold-text:#8f6b1e; --clp-gold-tint:rgba(200,155,60,.12); --clp-gold-line:rgba(200,155,60,.34); --clp-ink:#082640; --clp-ink-soft:#0e2a47; --clp-ink-deep:#061c30; --clp-body:#3a4956; --clp-muted:#566472; /* 4,54:1 sur blanc — l'ancien #6b7a88 n'etait qu'a 4,00 */ --clp-line:rgba(8,38,64,.10); --clp-line-strong:rgba(8,38,64,.16); --clp-surface:#ffffff; --clp-surface-alt:#f5f7fa; /* Rayons */ --clp-radius-btn:12px; --clp-radius-card:16px; --clp-radius-lg:22px; --clp-focus:3px; /* Échelle typographique fluide. Le maximum de chaque palier = la valeur mesurée aujourd'hui à 1440 px. */ --clp-fs-display:clamp(2.375rem, 1.05rem + 4.35vw, 4.75rem); /* → 76px */ --clp-fs-h2:clamp(1.75rem, 1.06rem + 2.27vw, 3rem); /* → 48px */ --clp-fs-h3:clamp(1.125rem, .99rem + .45vw, 1.375rem); /* → 22px */ --clp-fs-lead:clamp(1rem, .95rem + .22vw, 1.125rem); /* → 18px */ --clp-fs-body:1rem; --clp-fs-small:.9375rem; /* 15px — releve : 13 px rendus par les briques */ --clp-fs-meta:.8125rem; /* 13px */ /* Interlignes et approches */ --clp-lh-display:1.02; --clp-lh-h2:1.1; --clp-lh-body:1.72; --clp-ls-display:-.028em; --clp-ls-h2:-.018em; --clp-ls-meta:.12em; /* Échelle d'espacement — une seule progression, utilisée partout. */ --clp-s1:4px; --clp-s2:8px; --clp-s3:12px; --clp-s4:16px; --clp-s5:24px; --clp-s6:32px; --clp-s7:48px; --clp-s8:64px; --clp-s9:96px; --clp-s10:128px; --clp-section-y:clamp(64px, 3.2rem + 3.4vw, 112px); --clp-gutter:clamp(20px, 1rem + 1.1vw, 28px); /* Profondeur — trois niveaux, jamais davantage. */ --clp-shadow-1:0 1px 2px rgba(8,38,64,.05), 0 2px 8px rgba(8,38,64,.05); --clp-shadow-2:0 2px 6px rgba(8,38,64,.06), 0 12px 28px rgba(8,38,64,.08); --clp-shadow-3:0 6px 16px rgba(8,38,64,.10), 0 24px 60px rgba(8,38,64,.14); --clp-ease:cubic-bezier(.22,.61,.36,1); --clp-dur:.18s; } /* ---------------------------------------------------------------------------- 1. RYTHME TYPOGRAPHIQUE GLOBAL Appliqué aux 103 routes. Aucune taille de bureau n'est modifiée : les `clamp()` plafonnent sur la valeur déjà rendue. Ce qui change réellement, c'est le comportement sous 1200 px, l'approche des grands titres, et la césure — trois titres de diplôme dépassaient 78 caractères. ---------------------------------------------------------------------------- */ h1,h2,h3,.cl-hero h1{ text-wrap:balance; overflow-wrap:break-word; } h1{ letter-spacing:var(--clp-ls-display); } h2{ letter-spacing:var(--clp-ls-h2); } body:not(.home) .cl-section h2, body:not(.home) .cl-feature-strip h2{ font-size:var(--clp-fs-h2); line-height:var(--clp-lh-h2); } .cl-lead{ font-size:var(--clp-fs-lead); line-height:var(--clp-lh-body); } /* ---------------------------------------------------------------------------- 2. UNIFICATION DE L'OR Relevé : cinq ors sur les boutons principaux. Platform #c89b3c ← référence retenue Lots B, C, D, E #dda92f Lot C variante #d5a637 Orientation #d6a531 Lot A #d8a62b Inventaire établi en balayant 20 pages et en relevant TOUT élément au fond doré avec sa liste de classes complète — pas de sélecteurs devinés. `!important` est nécessaire : les briques déclarent leur or à spécificité égale et se chargent APRÈS cette feuille — l'ordre réel dans le document est rc.css, premium.css, puis caplink.css et orientation.css. Ici `!important` suffit, les briques ne l'employant pas sur ces déclarations. Là où elles l'emploient — l'anneau de focus — il faut en plus gagner en spécificité : voir la section 4. ---------------------------------------------------------------------------- */ .clc-btn.gold,.cls-btn.gold,.cla-btn.gold,.clb-btn.gold,.clo-button,.cle-badge{ background-color:var(--clp-gold) !important; color:var(--clp-ink) !important; } .clc-btn.gold:hover,.cls-btn.gold:hover,.cla-btn.gold:hover, .clb-btn.gold:hover,.clo-button:hover{ background-color:var(--clp-gold-hover) !important; color:var(--clp-ink) !important; } .clc-btn.gold,.cls-btn.gold,.cla-btn.gold,.clb-btn.gold,.clo-button, .cl-btn.cl-btn-gold,.cl-nav-cta,.cl-callback{ color:var(--clp-ink) !important; } /* ---------------------------------------------------------------------------- 3. RAYONS Relevé sur les boutons en ligne : 3, 8, 9, 10, 11, 12 px selon la brique. Les boutons flottants (WhatsApp, rappel) restent en pastille : choix délibéré, pas un écart. ---------------------------------------------------------------------------- */ .cl-btn,.clc-btn,.cls-btn,.cla-btn,.clb-btn,.clo-button,.clo-secondary,.cl-nav-cta{ border-radius:var(--clp-radius-btn) !important; } .clc-card,.cls-next-card,.clc-next-card{ border-radius:var(--clp-radius-card) !important; } /* ---------------------------------------------------------------------------- 4. ÉTATS DE FOCUS — anneau à double contour Aucune couleur unique ne peut atteindre les 3:1 de WCAG 2.2 SC 1.4.11 sur les fonds réellement rencontrés sous un élément focusable : très clairs (blanc, #f4f7fa) ET très sombres (#082640, #091d31, #0e2a47), plus l'or des boutons et le vert WhatsApp. D'où le double contour : liseré blanc collé à l'élément, puis contour bleu nuit. Sur fond clair le bleu nuit tranche (15,42:1 sur blanc, 6,03:1 sur l'or) ; sur fond sombre c'est le liseré blanc (15,42:1 sur #082640). L'un des deux est toujours largement au-dessus du seuil. DEUX CORRECTIFS QUI ONT DEMANDÉ DEUX VERSIONS, ET LEUR RAISON : a) le préfixe `html body`. La règle de focus de 1.0.0 à 1.0.2 ne s'appliquait pas : `caplink.css` pose `.caplink-body :focus-visible{outline:…!important}` à spécificité égale, et se charge après. Le préfixe porte la spécificité à (0,2,2) et fait gagner la règle sans toucher à la brique. b) `transition:none`. Le préfixe a fait passer le contour, pas le liseré : la brique déclare `transition-property:…,box-shadow`, et une transition EN COURS l'emporte sur toutes les déclarations d'auteur, `!important` compris — le seul mécanisme de la cascade qui le permette. Diagnostiqué par `el.getAnimations()` → `CSSTransition: box-shadow, running`. C'est par ailleurs le bon comportement : un indicateur de focus doit apparaître immédiatement, pas se fondre en 180 ms. `[tabindex="-1"]` est exclu : la couche RC en pose un sur `
` pour le lien d'évitement, et sans cette exclusion l'activer encadrerait toute la page. ---------------------------------------------------------------------------- */ html body .cl-btn:focus-visible, html body .cl-nav-cta:focus-visible, html body .cl-callback:focus-visible, html body .cl-whatsapp:focus-visible, html body .clc-btn:focus-visible, html body .cls-btn:focus-visible, html body .cla-btn:focus-visible, html body .clb-btn:focus-visible, html body .clo-button:focus-visible, html body .clo-secondary:focus-visible, html body .clc-card:focus-visible, html body .cls-next-card:focus-visible, html body .clc-next-card:focus-visible, html body.caplink-body a:focus-visible, html body.caplink-body button:focus-visible, html body.caplink-body input:focus-visible, html body.caplink-body select:focus-visible, html body.caplink-body textarea:focus-visible, html body.caplink-body [tabindex]:not([tabindex="-1"]):focus-visible{ transition:none !important; outline:var(--clp-focus) solid var(--clp-ink) !important; outline-offset:2px !important; box-shadow:0 0 0 2px #fff !important; } /* ---------------------------------------------------------------------------- 5. TRANSITIONS Homogénéise la sensation au survol sans introduire d'animation nouvelle. Neutralisées sous `prefers-reduced-motion`, ici et dans home.css. ---------------------------------------------------------------------------- */ .cl-btn,.clc-btn,.cls-btn,.cla-btn,.clb-btn,.clo-button,.clo-secondary,.cl-nav-cta{ transition:background-color var(--clp-dur) var(--clp-ease), color var(--clp-dur) var(--clp-ease), border-color var(--clp-dur) var(--clp-ease); } /* ---------------------------------------------------------------------------- 6. CORRECTIF RESPONSIVE — /diagnostic-carriere/ et /contact/ Deux débordements horizontaux, tous deux à 360 px et uniquement à 360 px : /diagnostic-carriere/ 14 px FORM.clc-diag-form, ASIDE.clc-result /contact/ 7 px DIV.cl-kicker et suivants Attribution établie avant correction : chaque page mesurée trois fois — telle quelle, sans premium.css, puis sans premium.css NI rc.css. Les trois mesures sont identiques au pixel près. Le débordement est donc entièrement dans les briques, et il n'est pas causé par une largeur fixe mais par des padding qui s'additionnent au 100 % de la grille. La correction est la plus basse possible : sous 380 px, on borne la largeur des conteneurs concernés et on ramène le padding dans la boîte. Aucune largeur n'est imposée, aucune règle de mise en page n'est réécrite, et au-dessus de 380 px la feuille n'a strictement aucun effet. ---------------------------------------------------------------------------- */ /* Débordement de /contact/ à 360 px — cause exacte, mesurée sur la chaîne ascendante de l'élément fautif : DIV.— L34 W333 ← l'enfant déborde de 41 px… DIV.cl-contact-grid L34 W292 ← …la piste de grille qui le contient DIV.cl-wrap L14 W332 (padding 20/20) Ce n'est donc pas une largeur fixe : c'est le `min-width:auto` implicite d'un enfant de grille, qui refuse de descendre sous la largeur minimale de son contenu — ici les champs du formulaire et leur taille intrinsèque par défaut. La correction est le remède standard, et rien de plus. La version 2.1.1 visait `.cl-contact-grid` elle-même, pas ses enfants : elle n'a donc rien changé, et la recette l'a montré. */ @media (max-width:420px){ .cl-contact-grid{ grid-template-columns:minmax(0,1fr) !important; } .cl-contact-grid > *, .cl-contact-grid > * > *{ min-width:0 !important; } .cl-contact-grid input, .cl-contact-grid select, .cl-contact-grid textarea{ max-width:100%; min-width:0; box-sizing:border-box; } } @media (max-width:380px){ .clc-diagnostic, .clc-diag-form, .clc-result, .clc-options, .cl-kicker, .cl-contact-grid, .cl-form-card{ max-width:100%; box-sizing:border-box; min-width:0; } .clc-diag-form, .clc-result{ padding-left:var(--clp-s4); padding-right:var(--clp-s4); } .clc-options{ display:flex; flex-wrap:wrap; gap:var(--clp-s2); } .clc-options > button{ max-width:100%; white-space:normal; } /* Pas de `overflow-x:hidden` ici. Masquer un débordement le fait disparaître de la mesure sans le corriger : la recette mesurerait alors 0 alors que le contenu serait toujours coupé. Les règles ci-dessus traitent la cause. */ } /* ---------------------------------------------------------------------------- 6 bis. EN-TÊTE — regroupement et hiérarchie, sans réduire la police DÉFAUT MESURÉ EN RECETTE DE 2.1.0, et introduit par 2.1.0 : `document.scrollWidth` 1 694 px contre `clientWidth` 1 521 px, soit **173 px de débordement horizontal** sur la page d'accueil à 1 440 px. La cause est directe : 2.1.0 a posé `white-space:nowrap` sur les liens du menu pour empêcher « Blog & News » et « Trouver mon parcours » de se casser sur trois lignes ; la barre ne pouvait alors plus se comprimer, et `.cl-nav-inner`, en `flex-nowrap` chez la brique, a poussé le bouton de rendez-vous hors de la fenêtre. Onze entrées, un compte et un appel à l'action sur une seule ligne, ce n'est pas un problème de taille de police : c'est un problème de hiérarchie. La barre passe donc sur deux niveaux, ce que la structure du HTML permet sans la modifier d'une ligne : niveau 1 marque · Mon espace · Prendre rendez-vous niveau 2 les huit univers │ Catalogue · Trouver mon parcours · Services Les trois derniers portent déjà la classe `.clrc-extra` — ce sont les entrées ajoutées par RC Polish. Elles forment donc un groupe identifiable, séparé par un filet et traité en couleur secondaire. La police n'est pas réduite : elle est au contraire RÉTABLIE à 15 px entre 901 et 1 100 px, où la brique la descendait à 12,5 px pour faire tenir la ligne. C'est le passage sur deux niveaux qui libère la place, pas la compression du texte. ---------------------------------------------------------------------------- */ @media (min-width:901px){ html body.caplink-body .cl-nav-inner{ flex-wrap:wrap; row-gap:10px; align-items:center; padding-block:12px; } html body.caplink-body .cl-nav-inner > .cl-brand{ order:1; } html body.caplink-body .cl-nav-inner > .clrc-account-inline{ order:2; margin-left:auto; } html body.caplink-body .cl-nav-inner > .cl-nav-cta{ order:2; } html body.caplink-body .cl-menu{ order:3; flex:0 0 100%; flex-wrap:wrap; justify-content:flex-end; gap:var(--clp-s2) clamp(10px, .35rem + .45vw, 16px) !important; padding-top:10px; border-top:1px solid var(--clp-line); font-size:.9375rem; } html body.caplink-body .cl-menu a{ font-size:.9375rem; white-space:nowrap; } html body.caplink-body .cl-nav-cta{ white-space:nowrap; } /* Le groupe des outils : filet de séparation et couleur secondaire. */ html body.caplink-body .cl-menu a.clrc-extra{ color:var(--clp-muted); } html body.caplink-body .cl-menu a.clrc-extra:hover{ color:var(--clp-ink); } /* Le filet ne doit apparaitre QUE devant la premiere entree du groupe des outils. `:first-of-type` ne convient pas : il designe le premier element du type `a` parmi ses freres — c'est-a-dire « Etudes » —, pas le premier qui porte la classe. La version 2.1.2 employait ce selecteur : il ne correspondait a rien, et le filet mesurait 0 px en recette. Le selecteur correct est « le premier .clrc-extra precede d'un lien qui n'en est pas un ». */ html body.caplink-body .cl-menu a:not(.clrc-extra) + a.clrc-extra{ margin-left:var(--clp-s2); padding-left:clamp(10px, .35rem + .45vw, 16px); border-left:1px solid var(--clp-line) !important; } } /* ---------------------------------------------------------------------------- 7. CIBLES TACTILES WCAG 2.2 SC 2.5.8 demande 24 x 24 px minimum. Relevé sur les liens de pied de page et les liens légaux, serrés en colonne sur mobile. ---------------------------------------------------------------------------- */ /* WCAG 2.2 SC 2.5.8 « Target Size (Minimum) », niveau AA : 24 x 24 px. Releve sur la page servie : ONZE cibles sous le seuil, toutes a 22 px de haut — les liens des colonnes du pied de page et les deux liens legaux. La regle de la version 2.1.0 etait bornee a `max-width:768px` : le critere, lui, ne l'est pas. Elle s'applique desormais a toutes les largeurs. Le lien de courriel de la barre utilitaire (14 px) n'est PAS concerne : il est en ligne dans une phrase, cas explicitement excepte par le critere. Il recoit tout de meme un peu d'air, sans que cela change la mise en page. */ footer a, .cl-legal-links a, .clrc-foot-col a{ display:inline-block; min-height:24px; padding-top:var(--clp-s1); padding-bottom:var(--clp-s1); } .cl-topbar a{ padding-block:2px; } /* ---------------------------------------------------------------------------- 8. PIED DE PAGE — signature, et une régression de 2.0.0 corrigée RÉGRESSION 2.0.0. La version précédente posait `max-width` et `margin-inline:auto` sur le `