/* ============================================================ GARDE GLOBALE — `hidden` DOIT TOUJOURS GAGNER. `[hidden]{display:none}` de l'agent utilisateur a une spécificité d'ATTRIBUT (0,1,0) : toute règle de CLASSE portant un `display` la bat, et l'élément reste visible alors que le code le croit masqué. Ce piège s'est produit DEUX FOIS le 2026-08-04 — le voile du panneau cookies, qui interceptait les clics sur « Tout accepter » et « Tout refuser », puis la mention « la plus avantageuse », qui s'affichait sur toutes les modalités à la fois. Aucun symptôme commun entre les deux, même cause. Cette règle en tête ferme le sujet. Vérifié avant pose : aucune règle du site n'affiche délibérément un élément [hidden]. ============================================================ */ [hidden]{display:none !important} /* Inter variable, HÉBERGÉE ICI. Pas de requête vers un tiers, pas de résolution DNS supplémentaire, pas de dépendance à Google. `unicode-range` fait que l'extension latine (85 Ko) n'est téléchargée que si un caractère l'exige — en français courant, jamais. `font-display:swap` : le texte s'affiche immédiatement dans la police système puis bascule. */ @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* ENCRE : un bleu-noir profond, pas un gris. C'est lui qui porte le texte et les aplats sombres — il donne la tenue sans l'austérité d'un marine administratif. */ --encre:#0b2239; --encre-doux:#16324a; /* BLEU D'ACTION : franc et saturé. Le marine sourd de la première version lisait « ancien » ; ce bleu-ci assume la couleur sans virer au produit numérique. */ --bleu:#1054c9; --bleu-fonce:#0c3f9c; --bleu-pale:#eaf1fe; --gris:#5b6b7f; --gris-clair:#8695a6; --ligne:#e3e8ef; --ligne-douce:#eef1f6; --fond:#ffffff; --fond-doux:#f7f9fc; /* Signal de validation. Réservé, jamais décoratif. */ --valide:#0f7a5a; --valide-fond:#eafaf3; --alerte:#8a5a12; --alerte-fond:#fdf8ee; --alerte-ligne:#e8d9b8; --rayon:8px; --rayon-l:14px; --ombre:0 1px 2px rgba(11,34,57,.05), 0 12px 32px -20px rgba(11,34,57,.35); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--encre);background:var(--fond); font-size:17px;line-height:1.68;font-feature-settings:'cv05' 1,'ss01' 1; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; /* DÉGAGEMENT DU BANDEAU DE CONSENTEMENT — toutes les pages, pas seulement le simulateur. Le bandeau est `position:fixed` : il ne pousse rien et recouvre donc le bas du contenu tant que le visiteur n'a pas répondu. Aucun défilement ne permet de dégager ce qui passe dessous. Mesuré le 2026-08-05 : le bouton « Envoyer ma demande » était visible et inatteignable au clic (`elementFromPoint` rendait `ck-in`). `--ck-h` vaut 0 quand le bandeau est masqué — donc aucun blanc résiduel après la décision, et rien ne change pour un visiteur qui a déjà choisi. Repli à 0 si le script ne tourne pas : on retombe exactement sur le comportement d'avant, jamais sur une marge orpheline. */ padding-bottom:var(--ck-h, 0px); } /* Titres : plus de contraste de graisse et un interlettrage resserré. C'est ce qui distingue une typographie contemporaine d'une mise en page de rapport. */ h1,h2,h3,h4{line-height:1.18;margin:0;color:var(--encre);font-weight:700;letter-spacing:-.025em} p{margin:0 0 1.05rem} a{color:var(--bleu)} img{max-width:100%;height:auto} .section-in{max-width:1140px;margin:0 auto;padding:0 24px} .sr-titre{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--encre);color:#fff; padding:12px 18px;font-weight:600} .skip:focus{left:0} :focus-visible{outline:2px solid var(--bleu);outline-offset:2px} /* ---- pictogrammes : SVG monochromes, jamais d'émoji ---- */ .ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round} .ico-l{width:26px;height:26px} /* ---- boutons : plats, angles francs, aucun dégradé ---- */ .btn{display:inline-flex;align-items:center;gap:.55em;justify-content:center;border:1px solid var(--bleu); cursor:pointer;background:var(--bleu);color:#fff;font:inherit;font-weight:600;font-size:.97rem; padding:14px 26px;border-radius:var(--rayon);text-decoration:none;transition:background .15s,border-color .15s} .btn:hover{background:var(--encre);border-color:var(--encre)} .btn-lg{padding:15px 30px;font-size:1.02rem} .btn-sm{padding:9px 17px;font-size:.9rem} .btn-ghost{background:transparent;color:var(--bleu);border-color:var(--ligne)} .btn-ghost:hover{background:var(--fond-doux);color:var(--encre);border-color:var(--bleu)} .btn-clair{background:#fff;color:var(--bleu);border-color:#fff} .btn-clair:hover{background:var(--fond-doux);border-color:var(--fond-doux);color:var(--encre)} /* ---- en-tête ---- */ .nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97); border-bottom:1px solid var(--ligne);backdrop-filter:saturate(180%) blur(6px)} /* LARGEUR MAINTENUE À 1180 px — UNE PISTE D'ÉLARGISSEMENT À 1250 A ÉTÉ ESSAYÉE PUIS REJETÉE. ⚠️ Ce commentaire a décrit pendant quelques heures un changement qui n'a jamais été déployé ; il est repris ici pour que la piste ne soit pas retentée sans connaître son coût. POURQUOI ON A VOULU ÉLARGIR : à 1180 px, la largeur utile entre la marque et les boutons de droite est plafonnée à 622 px, et les sept entrées en demandaient déjà 613 — NEUF pixels de marge, pas les 105 qu'annonçait le commentaire de l'entrée « Blog » (chiffre relevé avant que la police Inter ne remplace la pile système, plus étroite). Élargir la fenêtre n'y changeait rien : au-delà de 1180 px la largeur utile ne bouge plus. Sans ces 70 px, aucune huitième entrée ne pouvait tenir, et remonter le seuil du menu compact ne faisait que déplacer le problème d'un cran vers la droite. POURQUOI ON NE L'A PAS FAIT : la marque est alignée sur la colonne de contenu à 4 px près (mesuré : marque à 154, contenu à 150), et cet alignement est délibéré. Passer `.nav-in` à 1250 px la décalait à 119 — 31 px hors de la colonne, visible à l'œil sur l'accueil comme sur une page OPCO. Les 70 px ont donc été pris ailleurs : gouttière et libellé du bouton d'action. ⚠️ `.section-in` (1140 px) porte TOUTES les pages du site, avec `.page-corps`, `.ac-confiance-in` et `.ac-opco-in` : l'aligner n'est pas une retouche d'en-tête, c'est un changement de charte. Ne pas s'y engager sans arbitrage explicite. `.ap-in` (bandeau d'appel) suit `.nav-in`, quelle que soit sa valeur : il est empilé juste au-dessus de cette barre, et deux conteneurs superposés de largeurs différentes se voient immédiatement. Les deux valent donc 1180. */ .nav-in{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center; justify-content:space-between;gap:24px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--encre)} .brand-mark{width:34px;height:34px;flex:none} .brand-txt{display:flex;flex-direction:column;line-height:1.15} .brand-nom{font-weight:700;font-size:1.02rem;letter-spacing:-.01em} .brand-sous{font-size:.7rem;color:var(--gris);letter-spacing:.06em;text-transform:uppercase} /* L'ajout de « Formations » le 2026-08-04 a porté le menu à 5 entrées : à 1140 px la barre débordait et la marque comme les libellés passaient sur deux lignes. On resserre l'écart et on interdit la césure des libellés plutôt que de sacrifier une entrée. */ /* GOUTTIÈRE REVENUE À 18 px le 2026-08-08, après la bascule en trois mégamenus. Elle avait été resserrée à 10 px pour loger une 8e entrée. La barre est repassée à six entrées — « Conventions » et « Secteurs » sont dans le déroulant Outils — et rend assez de place pour annuler les DEUX concessions de ce lot-là : la gouttière ici, le libellé du bouton d'action là-bas. Mesuré avec le libellé complet et les trois mégamenus : +127 px de marge à gap 10, +107 à gap 14, +87 à gap 18. On reprend la valeur d'origine, pas une valeur de compromis — le plancher exigé est de 40 px. ⚠️ CETTE VALEUR NE DESCEND PAS DANS LE PANNEAU COMPACT : sous le seuil, la requête de média remet `gap:0` et c'est le `padding:13px` par lien qui fait la cible tactile. Ne pas « harmoniser » les deux, ils ne mesurent pas la même chose — l'un sépare des entrées sur une ligne, l'autre dimensionne une zone de toucher. */ .nav-liens{display:flex;gap:18px;font-size:.9rem;white-space:nowrap} .brand-nom,.brand-sous{white-space:nowrap} .nav-liens a{text-decoration:none;color:var(--gris);font-weight:500;padding:4px 0; border-bottom:2px solid transparent} .nav-liens a:hover{color:var(--bleu)} .nav-liens a[aria-current="page"]{color:var(--bleu);border-bottom-color:var(--bleu)} /* ---- groupe déroulant de la barre (« Outils ») ---- */ /* UN SEUL GROUPE AUJOURD'HUI, mais tout est écrit au pluriel et piloté par `[data-nav-groupe]` : un deuxième ne demandera pas une ligne de script. Le bouton copie exactement la métrique des `.nav-liens a` (padding 4px 0, filet de 2px sous le texte) — sinon l'entrée « Outils » se décale d'un pixel ou deux par rapport à ses voisines, et ça se voit sur une barre alignée. */ .nav-groupe{position:relative;display:flex} .nav-groupe-btn{display:inline-flex;align-items:center;gap:5px; background:none;border:0;border-bottom:2px solid transparent;border-radius:0; margin:0;padding:4px 0;cursor:pointer; font:inherit;font-size:.9rem;font-weight:500;color:var(--gris)} .nav-groupe-btn:hover{color:var(--bleu)} .nav-groupe-btn:focus-visible{outline:2px solid var(--bleu);outline-offset:3px} /* Ouvert : même traitement que l'entrée courante d'à côté. L'état vient de `aria-expanded`, pas d'une classe — voir le burger, c'est la même règle et pour la même raison. */ .nav-groupe-btn[aria-expanded="true"]{color:var(--bleu);border-bottom-color:var(--bleu)} /* LIEN DE REPLI — rendu par le PHP pour les menus dont la colonne mobile n'a qu'une destination, et INVISIBLE AU-DESSUS DU SEUIL, où c'est le panneau qui porte cette URL. Jamais les deux à la fois : ce n'est pas un second jeu de liens, c'est le même lien rendu là où le menu n'a pas lieu d'être. */ .nav-lien-reduit{display:none} .nav-chev{width:11px;height:11px;flex:none;transition:transform .18s ease} .nav-groupe-btn[aria-expanded="true"] .nav-chev{transform:rotate(180deg)} @media(prefers-reduced-motion:reduce){.nav-chev{transition:none}} /* PANNEAU — ANCRAGE UNIQUE SUR LE BORD GAUCHE DU CONTENU DE `.nav-in`, POUR LES TROIS MENUS. Le premier jet centrait le panneau sous son bouton (`left:50%` + `translateX(-50%)`). Avec un panneau de 720 px sous un bouton de 56 px, ça le décalait mécaniquement de plus de 300 px à gauche — le bord gauche tombait sous une autre entrée, ce qui se voyait. L'aligner sur le bouton ne tenait pas non plus : « Outils » commence à 775 px et `.nav-in` s'arrête à 1286, il ne restait que 511 px pour 720. ⚠️ ET SURTOUT : UN SEUL COMPORTEMENT POUR LES TROIS. Une règle qui bascule de « aligné sur le bouton » à « centré » selon la place disponible donnerait trois menus qui s'ouvrent différemment, et le même menu qui s'ouvre différemment selon la largeur de la fenêtre. Un ancrage constant sur le conteneur est prévisible : le panneau sort toujours du même bord, et c'est l'état du bouton (couleur, filet, chevron retourné) qui dit lequel est ouvert. Mesuré de 1181 à 1920 px : écart au bord de `.nav-in` = 0, aucun dépassement à droite. `position:relative` va sur `.nav-in` et `.nav-groupe` repasse en `static` : c'est ce qui fait du conteneur — et non plus du bouton — le référent du positionnement. ⚠️ Ouverture par `.est-ouvert` et NON par l'attribut `hidden` : la garde globale en tête de ce fichier pose `[hidden]{display:none !important}`, qu'aucune classe ne peut lever. */ .nav-in{position:relative} .nav-groupe{position:static} .nav-panneau{display:none;position:absolute;top:calc(100% + 13px);left:24px;right:auto; z-index:50;width:min(720px,calc(100% - 48px)); /* DEUX COLONNES POUR LES TROIS MENUS : une colonne de liens, une colonne éditoriale qui porte le renvoi vers l'index. Trois menus bâtis pareil se lisent sans réapprentissage, et il n'y a qu'une grille à décrire au lieu d'une par menu. */ grid-template-columns:1.62fr 1fr; background:var(--fond);border:1px solid var(--ligne);border-radius:var(--rayon-l); box-shadow:0 24px 50px -28px rgba(11,34,57,.5);overflow:hidden;white-space:normal} .nav-panneau.est-ouvert{display:grid} .nav-col{padding:18px 20px} .nav-col+.nav-col{border-left:1px solid var(--ligne-douce)} .nav-col-titre{margin:0 0 10px;font-size:.7rem;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--gris)} /* Le lien reprend la main sur `.nav-liens a` (spécificité 0,3,1 contre 0,1,1) : dans le panneau il n'est plus une entrée de barre mais une ligne à deux étages. */ .nav-panneau a.nav-lien-riche{display:flex;align-items:flex-start;gap:10px; margin:0 -8px;padding:9px 8px;border-bottom:0;border-radius:var(--rayon); text-decoration:none;color:var(--encre)} .nav-panneau a.nav-lien-riche:hover{background:var(--bleu-pale);color:var(--encre)} .nav-panneau a.nav-lien-riche:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px} .nav-ico{width:17px;height:17px;flex:none;margin-top:2px;color:var(--bleu)} .nav-lien-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .nav-lien-nom{font-size:.88rem;font-weight:600;line-height:1.3} /* --gris sur blanc = 4,9:1, et 4,6:1 sur --bleu-pale au survol : au-dessus du seuil de 4,5:1 dans les deux états. Ne pas l'éclaircir « parce que c'est un sous-titre ». */ .nav-lien-sous{font-size:.78rem;line-height:1.35;color:var(--gris);font-weight:400} /* LIENS SIMPLES — les listes longues (11 OPCO, 11 domaines). Pas d'icône ici, et c'est voulu : un opérateur de compétences est une institution, pas un métier ; lui accoler un pictogramme dirait quelque chose de faux. La même sobriété vaut pour les domaines. */ /* MISE EN AVANT — détachée par un fond ET un filet, au-dessus du titre « Par domaine ». Elle ne repose PAS sur la couleur seule : pastille lisible, libellé et icône portent l'information même sans perception des couleurs. */ .nav-panneau a.nav-une{display:block;margin:0 -8px 12px;padding:10px 10px 11px; border:0;border-bottom:1px solid var(--ligne);border-radius:var(--rayon); background:var(--bleu-pale);text-decoration:none;color:var(--encre)} .nav-panneau a.nav-une:hover{background:#dfeafd} .nav-panneau a.nav-une:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px} .nav-une-tete{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .nav-une-ico{width:16px;height:16px;flex:none;color:var(--bleu)} .nav-une-nom{font-size:.88rem;font-weight:600;line-height:1.3} /* « À la une » et rien d'autre : un choix éditorial s'annonce, il ne se déguise pas en mesure. */ .nav-une-pastille{flex:none;font-size:.66rem;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:#fff;background:var(--bleu); padding:2px 7px;border-radius:999px;line-height:1.5} .nav-une-sous{display:block;margin-top:3px;font-size:.78rem;line-height:1.35;color:var(--gris)} .nav-liste{display:flex;flex-direction:column} /* `columns` et non `grid` : la liste se répartit d'elle-même sur deux colonnes quel que soit le nombre d'entrées, sans qu'on ait à couper la liste en deux à la main dans le PHP — donc sans qu'un ajout de douzième domaine oblige à rééquilibrer quoi que ce soit. */ .nav-liste--dense{display:block;columns:2;column-gap:18px} .nav-panneau a.nav-lien-simple{display:block;margin:0 -8px;padding:6px 8px;border-bottom:0; border-radius:var(--rayon);text-decoration:none;color:var(--encre); font-size:.86rem;font-weight:500;line-height:1.3;break-inside:avoid} .nav-panneau a.nav-lien-simple:hover{background:var(--bleu-pale);color:var(--encre)} .nav-panneau a.nav-lien-simple:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px} /* Un second bloc dans la même colonne (« non-salariés » sous « salariés ») a besoin d'air. */ .nav-col-liens .nav-col-titre+*+.nav-col-titre, .nav-col-liens .nav-liste+.nav-col-titre{margin-top:16px} .nav-col-edito{background:var(--bleu-pale);display:flex;flex-direction:column} .nav-edito-txt{margin:0;font-size:.82rem;line-height:1.5;color:var(--gris)} .nav-edito-note{margin:6px 0 0;font-size:.76rem;line-height:1.4;color:var(--gris)} /* LA MENTION EST DANS LE PARAGRAPHE QU'ELLE QUALIFIE, pas une ligne en dessous. « Gratuit, sans inscription » porte sur les OUTILS, qui ne demandent ni compte ni e-mail ; le simulateur, lui, ouvre un dossier et crée un lead. Posée en fin de paragraphe et en gras, elle se rattache visiblement à ce qui précède et ne peut plus être lue comme annonçant le lien qui suit. */ .nav-edito-mention{color:var(--encre);font-weight:600} /* PIED DE COLONNE — DEUX SÉPARATIONS, PAS UNE. Fond distinct ET filet : trois lignes d'écart sur un même aplat ne suffisaient pas à couper la mention du renvoi. `margin-top:auto` le colle en bas de colonne, donc toujours détaché du texte quelle que soit la longueur de celui-ci. Ne pas fondre ce bloc dans la colonne pour « aérer » : c'est la séparation qui est le sujet. */ .nav-edito-pied{margin:16px -20px -18px;padding:13px 20px 15px; background:var(--fond);border-top:1px solid rgba(16,84,201,.22)} .nav-col-edito .nav-edito-pied{margin-top:auto} .nav-panneau a.nav-edito-cta{display:inline-flex;align-items:center;gap:6px; margin:0;padding:0;border-bottom:0;border-radius:0; font-size:.85rem;font-weight:600;color:var(--bleu);text-decoration:none} .nav-panneau a.nav-edito-cta:hover{color:var(--bleu-fonce);background:none;text-decoration:underline} .nav-panneau a.nav-edito-cta:focus-visible{outline:2px solid var(--bleu);outline-offset:3px} .nav-edito-fleche{width:13px;height:13px;flex:none} /* ANCRES DE /formations. L'en-tête est `position:sticky` : sans cette réserve, `#caces` amène le titre pile SOUS la barre, qui le recouvre — le même défaut que le simulateur avait, et qui avait imposé de publier `--nav-h`. On réutilise cette variable, avec un repli si le script n'a pas encore mesuré. */ .idx-groupe{scroll-margin-top:calc(var(--nav-h, 73px) + 14px)} /* Bloc d'actions à droite de la barre : l'appel à l'action, et le bouton du menu compact qui n'apparaît que sous 1180 px. */ .nav-actions{display:flex;align-items:center;gap:10px;flex:none} /* Le libellé court ne sert que sous 768 px — voir la bascule dans la requête de média. */ .nav-cta-court{display:none} /* BOUTON DU MENU COMPACT. 44x44 : c'est la cible tactile minimale recommandée, et elle tient la hauteur de l'en-tête sans la creuser. Masqué au-dessus de 1180 px, où le menu est déployé. */ .nav-burger{display:none;width:44px;height:44px;padding:0;flex:none;cursor:pointer; align-items:center;justify-content:center;flex-direction:column;gap:5px; background:none;border:1px solid var(--ligne);border-radius:9px} .nav-burger:hover{border-color:var(--bleu);background:var(--bleu-pale)} .nav-burger:focus-visible{outline:2px solid var(--bleu);outline-offset:2px} .nav-burger-trait{display:block;width:19px;height:2px;background:var(--encre);border-radius:2px; transition:transform .18s ease,opacity .18s ease} /* Ouvert : les deux traits extrêmes se croisent, celui du milieu s'efface. L'état est porté par `aria-expanded`, pas par une classe — l'attribut est la source de vérité pour les techniques d'assistance ET pour le style, donc les deux ne peuvent pas diverger. */ .nav-burger[aria-expanded="true"] .nav-burger-trait:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-burger[aria-expanded="true"] .nav-burger-trait:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] .nav-burger-trait:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(prefers-reduced-motion:reduce){.nav-burger-trait{transition:none}} /* ---- fil d'ariane ---- */ .fil{background:var(--fond-doux);border-bottom:1px solid var(--ligne);font-size:.82rem;color:var(--gris)} .fil .section-in{padding-top:11px;padding-bottom:11px;display:flex;gap:9px;flex-wrap:wrap} .fil a{text-decoration:none;color:var(--gris)} .fil a:hover{color:var(--bleu)} /* ---- bandeau d'ouverture ---- */ .hero{background:linear-gradient(180deg,#f4f8ff 0%,#fff 100%);border-bottom:1px solid var(--ligne-douce)} .hero-in{max-width:1140px;margin:0 auto;padding:88px 24px 92px;display:grid; grid-template-columns:1.15fr .85fr;gap:56px;align-items:center} .surtitre{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.11em; text-transform:uppercase;color:var(--bleu);margin-bottom:20px} .hero h1{font-size:clamp(2.15rem,4.2vw,3.25rem);font-weight:700;letter-spacing:-.033em} .hero h1 em{font-style:normal;color:var(--bleu)} .chapo-hero{font-size:1.15rem;color:var(--gris);margin:20px 0 30px;max-width:46ch} .chapo-hero strong{color:var(--encre);font-weight:600} .hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .hero-note{font-size:.87rem;color:var(--gris)} /* Encadré de réassurance, dans le bandeau. Des faits, alignés, sans ornement. */ .carte-faits{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon-l); padding:26px 28px;box-shadow:var(--ombre)} .carte-faits h2{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris); font-weight:600;margin-bottom:18px} .fait{display:flex;gap:13px;padding:13px 0;border-top:1px solid var(--ligne);align-items:flex-start} .fait:first-of-type{border-top:0;padding-top:0} .fait .ico{color:var(--bleu);margin-top:3px} .fait-t{font-weight:600;font-size:.94rem;display:block;color:var(--encre)} .fait-d{font-size:.86rem;color:var(--gris);display:block} /* ---- sections ---- */ .sect{padding:88px 0} .sect-doux{background:var(--fond-doux);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)} .sect-tete{max-width:660px;margin-bottom:44px} .sect-tete.centre{margin-left:auto;margin-right:auto;text-align:center} .sect h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;letter-spacing:-.028em} .sect-tete p{color:var(--gris);margin:12px 0 0;font-size:1.02rem} /* ---- atouts ---- */ .grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .atout{padding-top:22px;border-top:2px solid var(--bleu)} .atout .ico{color:var(--bleu);margin-bottom:14px} .atout h3{font-size:1.06rem;margin-bottom:9px} .atout p{color:var(--gris);font-size:.96rem;margin:0} /* ---- étapes ---- */ .etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--ligne); border-radius:var(--rayon-l);overflow:hidden;background:#fff} .etape{padding:32px 30px;border-right:1px solid var(--ligne)} .etape:last-child{border-right:0} .etape-n{font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--bleu); text-transform:uppercase;margin-bottom:12px} .etape h3{font-size:1.04rem;margin-bottom:8px} .etape p{color:var(--gris);font-size:.95rem;margin:0} .sect-actions{margin-top:38px;text-align:center} /* ---- bandeau de preuve ---- */ .preuve{background:var(--encre);color:#fff;padding:46px 0} .preuve-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:34px} .preuve-item{border-left:2px solid rgba(255,255,255,.16);padding-left:20px} .preuve-item strong{display:block;font-size:1.6rem;font-weight:660;letter-spacing:-.01em} .preuve-item span{display:block;font-size:.86rem;color:rgba(255,255,255,.76);margin-top:3px} /* ---- questions ---- */ .faq-liste{max-width:800px;border-top:1px solid var(--ligne)} .faq-item{border-bottom:1px solid var(--ligne)} .faq-item summary{cursor:pointer;font-weight:600;padding:19px 40px 19px 0;position:relative; list-style:none;font-size:1.01rem;color:var(--encre)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px; border-right:1.5px solid var(--bleu);border-bottom:1.5px solid var(--bleu); transform:rotate(45deg);transition:transform .18s} .faq-item[open] summary::after{transform:rotate(-135deg);top:30px} .faq-item p{color:var(--gris);margin:0 0 20px;max-width:70ch;font-size:.98rem} /* ---- appel final ---- */ .final{background:var(--fond-doux);border-top:1px solid var(--ligne);padding:64px 0;text-align:center} .final h2{margin-bottom:12px} .final p{color:var(--gris);margin:0 auto 26px;max-width:52ch} /* ---- pages de texte ---- */ .page-corps{max-width:800px;margin:0 auto;padding:52px 24px 72px} .page-corps h1{font-size:clamp(1.6rem,3.2vw,2.1rem);margin-bottom:20px} .chapo{font-size:1.06rem;color:var(--gris);margin:0 0 30px} .prose h2{font-size:1.2rem;margin:34px 0 11px} .prose h3{font-size:1.02rem;margin:24px 0 8px} .prose ul{margin:0 0 16px;padding-left:22px} .prose li{margin:5px 0} .a-fournir{color:var(--alerte);font-style:italic;background:var(--alerte-fond);padding:1px 6px;border-radius:3px} .a-fournir-liste{margin-top:36px;font-size:.86rem;color:var(--gris)} .a-fournir-liste summary{cursor:pointer} .a-fournir-liste code{background:var(--fond-doux);padding:1px 5px;border-radius:3px} .avis{border-radius:var(--rayon);padding:15px 18px;margin:0 0 26px} .avis-attente{background:var(--alerte-fond);border:1px solid var(--alerte-ligne);color:var(--alerte)} .avis p{margin:0 0 8px}.avis p:last-child{margin:0} /* ---- contact ---- */ .contact-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:44px;align-items:start} .contact-aside{background:var(--fond-doux);border:1px solid var(--ligne);border-radius:var(--rayon-l);padding:26px} .contact-aside h2{font-size:1.02rem;margin:0 0 8px} .contact-aside p{color:var(--gris);font-size:.94rem} .form-contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field{margin:0 0 16px;display:flex;flex-direction:column;gap:6px} .field label{font-size:.87rem;font-weight:600} .field input,.field select,.field textarea{font:inherit;padding:11px 13px;border:1px solid var(--ligne); border-radius:var(--rayon);background:#fff;color:var(--encre);width:100%} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bleu); outline:none;box-shadow:0 0 0 3px rgba(29,81,131,.12)} .form-note{font-size:.82rem;color:var(--gris);margin-top:12px} /* ============================================================ PIED DE PAGE — quatre colonnes, fond encre profond. CE QUI LE FAISAIT PARAÎTRE DATÉ, et qui est corrigé : · intitulés de colonne en PETITES CAPITALES ESPACÉES — la signature du pied de page d'entreprise des années 2010. Remplacés par du texte normal, blanc, en graisse 600 ; · corps à 0,9 rem délavé à 74 % d'opacité : illisible et terne. Passé à 0,95 rem à 78 %, et les intitulés à blanc plein ; · colonnes de largeurs inégales sans rythme. Grille régularisée. Le registre reste institutionnel : séparations fines, aucun aplat vif, aucune icône décorative. Les seuls pictogrammes sont ceux du contact, monochromes et alignés sur le texte. ============================================================ */ .foot{background:var(--encre);color:rgba(255,255,255,.78);font-size:.95rem; padding:72px 0 0;line-height:1.72} .foot-grille{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:56px;padding-bottom:56px} /* Intitulés : lisibles, en casse normale. Le blanc plein les détache du corps sans artifice. */ .foot h2{font-size:1rem;color:#fff;font-weight:600;letter-spacing:-.012em;margin:0 0 18px} .foot p{margin:0 0 12px} .foot a{color:rgba(255,255,255,.78);text-decoration:none;transition:color .15s} .foot a:hover{color:#fff} .foot-liens a{display:block;padding:7px 0} .foot-marque{display:flex;align-items:center;gap:12px;margin-bottom:18px} .foot-marque .brand-mark{width:34px;height:34px} .foot-nom{color:#fff;font-weight:650;font-size:1.08rem;letter-spacing:-.022em} /* Bloc réglementaire : détaché par un filet, pas par une couleur — c'est de la mention légale, elle doit se lire sans attirer l'œil. */ .foot-legal{font-size:.87rem;color:rgba(255,255,255,.58);margin-top:20px;padding-top:18px; border-top:1px solid rgba(255,255,255,.12)} .foot-legal span{display:block;margin:3px 0} .foot-contact ul{margin:0;padding:0} .foot-contact li{display:flex;gap:13px;align-items:flex-start;list-style:none;padding:7px 0} .foot-contact .ico{width:18px;height:18px;margin-top:5px;color:rgba(255,255,255,.42);stroke-width:1.4} .foot-bas{border-top:1px solid rgba(255,255,255,.12);padding:22px 0 30px; display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; font-size:.88rem;color:rgba(255,255,255,.58)} .foot-bas p{margin:0} .foot-bas nav{display:flex;gap:26px;flex-wrap:wrap} /* ---- petits écrans ---- */ /* SEUIL REMONTÉ DE 960 À 1120 px le 2026-08-04. Avec 5 entrées de menu, la bande 1000-1120 gardait le menu affiché mais faisait déborder la marque : en-tête de 145 px au lieu de 72. Mieux vaut basculer un peu plus tôt sur la version sans menu que servir un en-tête cassé. */ /* PUIS DE 1120 À 1180 px le 2026-08-08 — ET CE N'EST PAS SEULEMENT POUR UNE ENTRÉE DE PLUS. Ce déplacement corrige une RÉGRESSION QUI ÉTAIT EN PRODUCTION, indépendante de tout ajout : entre 1121 et 1179 px, la barre était en mode déployé mais `.nav-in` valait la largeur de la fenêtre et non son `max-width`. Les sept entrées demandaient 613 px pour 563 disponibles à 1121 px, et la PAGE DÉBORDAIT horizontalement (mesuré : `scrollWidth > clientWidth` sur toute la bande 1121-1179). Exactement le défaut décrit juste au-dessus pour 960-1120, réapparu un cran plus haut parce que le seuil avait bougé sans que `.nav-in` suive. LA RÈGLE GÉNÉRALE À RETENIR, et la seule qui empêche que ça recommence une troisième fois : le seuil du menu compact doit être ÉGAL OU SUPÉRIEUR au `max-width` de `.nav-in`. Ici les deux valent 1180, donc dès le premier pixel en mode déployé (1181) la barre est déjà à sa largeur maximale et la marge mesurée vaut à toutes les largeurs — vérifié de 1181 à 1920 px, marge constante (+87 px dans la configuration à trois mégamenus). Si le seuil passait SOUS ce `max-width`, la bande entre les deux retomberait dans le défaut ci-dessus. (`box-sizing:border-box` est global ligne 60 : le `max-width` inclut déjà les 2×24 px de marge intérieure, il n'y a pas à les rajouter.) */ /* MENU COMPACT sous 1180 px. Le bloc `.nav-liens` ne disparaît plus : il devient un panneau déroulant sous la barre. Il reste le MÊME élément et les MÊMES liens qu'au bureau — un second jeu de liens réservé au mobile finit toujours par diverger de celui du bureau. Positionné par rapport à `.nav`, qui est `position:sticky` et fait donc bloc conteneur. */ @media(max-width:1180px){ .nav-liens{display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;gap:0;white-space:normal; background:var(--fond);border-bottom:1px solid var(--ligne); box-shadow:0 14px 28px -22px rgba(11,34,57,.5); padding:6px 24px 14px;max-height:calc(100vh - 100%);overflow-y:auto} .nav-liens.est-ouvert{display:flex} /* Cible tactile pleine largeur et filet de séparation : en colonne, le soulignement de l'entrée courante ne suffit plus à séparer six lignes. */ .nav-liens a{padding:13px 2px;border-bottom:1px solid var(--ligne-douce);font-size:.95rem} .nav-liens a:last-child{border-bottom:0} .nav-liens a[aria-current="page"]{border-bottom-color:var(--ligne-douce)} .nav-burger{display:flex} /* MÉGAMENUS À PLAT, PAS EN ACCORDÉON. Le panneau du menu compact défile déjà (`overflow-y:auto` plus haut) : y emboîter un second niveau repliable donnerait deux mécaniques d'ouverture superposées. On supprime le niveau. `display:contents` retire la boîte du groupe SANS retirer ses enfants : les liens des panneaux redeviennent des items de `.nav-liens` et se rangent d'eux-mêmes dans l'ordre de la barre. C'est ce qui garantit UN SEUL jeu de liens, celui du bureau, et pas une copie mobile qui divergera. */ .nav-groupe{display:contents} .nav-groupe-btn{display:none} /* UN MENU QUI N'A QU'UN LIEN À REPLIER DEVIENT CE LIEN — 2026-08-08. `data-nav-reduit` est posé par le PHP, qui l'a DÉDUIT du nombre de liens de la colonne `compact` (voir nav_menu_url_reduite). La feuille de style ne décide rien ici : elle exécute. Demander deux gestes — ouvrir, puis cliquer — pour ce qu'un lien donne en un seul serait un défaut, pas de la sobriété ; et déplier les quatorze financeurs à plat dans un panneau qui défile déjà serait pire. Le lien porte le libellé du MENU (« Les OPCO »), pas celui du renvoi (« Voir tous les financeurs ») : dans une liste d'entrées de navigation, c'est le nom de la rubrique qu'on cherche. ⚠️ « Outils » n'est PAS réductible et ne doit pas le devenir : ses quatre liens n'ont aucune page d'index derrière eux, et c'est précisément ce qui justifie qu'il reste un menu. */ .nav-lien-reduit{display:block} .nav-groupe[data-nav-reduit] .nav-panneau{display:none} /* La mise en avant est un traitement de BUREAU. Sous le seuil, « Formations » reste un lien direct vers l'index : la règle de réduction ne regarde que la colonne `compact`, or la mise en avant vit dans l'AUTRE colonne — elle ne rouvre donc aucun dépliage. */ .nav-une{display:none} .nav-panneau{display:block;position:static;width:auto;z-index:auto; background:none;border:0;border-radius:0;box-shadow:none;overflow:visible} /* CE QUI RESTE VISIBLE EST DÉCLARÉ, PLUS DÉDUIT — 2026-08-08. L'ancienne règle masquait « toutes les colonnes sauf la première », ce qui encodait en CSS une décision qui appartenait au menu Outils : ses colonnes 2 et 3 doublonnaient alors la barre. En sortant « Conventions » et « Secteurs » de la barre, CETTE DÉDUCTION S'INVERSE — ces deux pages n'auraient plus eu aucun accès tactile hors pied de page. La règle n'a jamais été « masquer la colonne 2 », elle a toujours été « ne pas doubler ce qui est déjà joignable ». Chaque menu déclare donc lui-même, dans _nav_menus.php, la colonne qui survit au repli : · Les OPCO -> le renvoi vers /opco, qui liste les quatorze financeurs ; · Formations -> le renvoi vers /formations, qui porte déjà ses propres filtres tactiles ; · Outils -> ses quatre liens, car il n'existe aucune page d'index /outils qui les rassemblerait. C'est la seule colonne de liens conservée, et c'est précisément parce qu'elle est la seule à n'avoir pas d'index derrière. Aucun accès n'est perdu : ce qui n'est pas listé ici est atteignable en une page de plus. */ .nav-panneau .nav-col{display:none} .nav-panneau .nav-col--compact{display:block} .nav-col{padding:0;border-left:0} .nav-col-titre{margin:0;padding:14px 2px 4px} /* Les listes denses repassent sur une colonne : deux colonnes de 6 px de large sur un téléphone ne sont pas une mise en page, c'est un accident. */ .nav-liste--dense{columns:1} /* Textes éditoriaux retirés : dans un panneau qui défile, seuls les liens servent. La mention « gratuit, sans inscription » part avec le paragraphe qu'elle qualifie — elle ne se retrouve donc jamais isolée au-dessus d'un lien vers le simulateur. */ .nav-edito-txt,.nav-edito-note,.nav-col-edito .nav-col-titre{display:none} .nav-edito-pied{margin:0;padding:0;background:none;border-top:0} /* Cible tactile et filet alignés sur ceux des entrées voisines. Le filet est REMIS explicitement : le dernier lien d'une colonne est `:last-child` de son parent et perdrait sinon sa séparation d'avec l'entrée suivante. */ .nav-panneau a.nav-lien-riche, .nav-panneau a.nav-lien-simple, .nav-panneau a.nav-edito-cta{margin:0;padding:13px 2px;border-radius:0; border-bottom:1px solid var(--ligne-douce);font-size:.95rem;font-weight:500} .nav-panneau a.nav-lien-riche:hover, .nav-panneau a.nav-lien-simple:hover{background:none} .nav-panneau a.nav-edito-cta{display:flex;justify-content:space-between;align-items:center; color:var(--bleu)} .nav-lien-nom{font-size:.95rem;font-weight:500} /* Sous-titres retirés : ils doublent la hauteur de chaque ligne dans un panneau déjà défilant. Le libellé seul suffit à la compréhension. */ .nav-lien-sous{display:none} } @media(max-width:960px){ .hero-in{grid-template-columns:1fr;gap:40px;padding:52px 24px 56px} .grille-3,.preuve-grille{grid-template-columns:repeat(2,1fr)} .etapes{grid-template-columns:1fr} .etape{border-right:0;border-bottom:1px solid var(--ligne)} .etape:last-child{border-bottom:0} .contact-grid{grid-template-columns:1fr} .foot-grille{grid-template-columns:1fr 1fr;gap:34px} /* (le `.nav-liens{display:none}` qui vivait ici faisait double emploi avec la règle de 1120 px et écrasait l'état ouvert du menu compact entre 960 et 1120) */ } /* LIBELLÉ COURT DE L'APPEL À L'ACTION. Sous 768 px, « Vérifier ma prise en charge » ne tient plus sur une ligne à côté de la marque et du bouton de menu : il passait sur cinq lignes et portait l'en-tête de 72 à 158 px. C'est cette hauteur qui recouvrait le simulateur à chaque changement d'étape — la correction du scroll ne suffirait pas sans elle. */ @media(max-width:768px){ .nav-cta-long{display:none} .nav-cta-court{display:inline} } @media(max-width:620px){ .grille-3,.preuve-grille,.foot-grille{grid-template-columns:1fr} .form-contact .grid{grid-template-columns:1fr} .sect{padding:52px 0} .foot-bas{flex-direction:column;gap:12px} /* ⚠️ EN-TÊTE À MOINS DE 620 px — la contrainte est une SOMME, pas un réglage esthétique. À 360 px il faut loger : 32 de rembourrage + 44 de bouton de menu + 10 + 84 d'appel à l'action + 12 = 182 px incompressibles. Il reste 178 px pour la marque, dont 34 de logo et 11 d'écart : 133 px pour le texte. « Mon Financement OPCO » en `white-space:nowrap` en réclame 175 — l'en-tête débordait donc de 42 px, et Chrome élargissait le viewport à 405 px pour l'absorber. Le bouton de menu se retrouvait HORS ÉCRAN, à x=361 dans une fenêtre de 360 : injoignable au doigt. C'est le vrai « ça explose » sur mobile. Correction : la signature disparaît (redondante avec le pied de page) et le nom passe sur DEUX LIGNES au lieu d'être coupé. Deux lignes à cette taille font 34 px — exactement la hauteur du logo : l'en-tête ne grandit pas d'un pixel. */ .brand-sous{display:none} .brand-nom{white-space:normal;font-size:.92rem;line-height:1.15} /* Filet de sécurité : quoi qu'il arrive au libellé, la marque cède avant de faire déborder la barre. `min-width:0` est indispensable — un élément flex refuse de passer sous sa taille de contenu sans lui, et c'est précisément ce qui produisait le débordement. */ .brand{min-width:0} .brand-txt{min-width:0} .nav-in{padding-left:16px;padding-right:16px;gap:12px} .nav-liens{padding-left:16px;padding-right:16px} } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ============================================================ PAGE OPCO — /opco/{slug} Registre de l'accueil : le filet porte la structure, jamais l'ombre portée ; le bleu est réservé au cliquable ; les grands nombres sont en graisse fine. La page est plus large que .page-corps (800px) parce qu'elle porte un tableau de barèmes à 4 colonnes. ============================================================ */ .opco-page{max-width:940px} .opco-prose{max-width:660px} /* la mesure de lecture reste courte */ .opco-prose p{margin:0 0 16px;line-height:1.62} .opco-prose .chapo{font-size:1.08rem;color:var(--encre-doux)} .opco-prose strong{font-weight:600} .opco-page h2{font-size:1.18rem;font-weight:600;letter-spacing:-.02em; margin:44px 0 16px;padding-bottom:9px;border-bottom:1px solid var(--ligne)} /* Le tableau défile SEUL en petite largeur : c'est le corps de page qui ne doit jamais déborder horizontalement. */ .opco-tableau{overflow-x:auto;margin:0 0 8px} .opco-tableau table{width:100%;border-collapse:collapse;font-size:.93rem} .opco-tableau th{text-align:left;font-weight:600;color:var(--gris);font-size:.78rem; letter-spacing:.06em;text-transform:uppercase;padding:0 14px 9px 0; border-bottom:1px solid var(--ligne)} .opco-tableau td{padding:11px 14px 11px 0;border-bottom:1px solid var(--ligne-douce); vertical-align:top} .opco-tableau tr:last-child td{border-bottom:0} .opco-tableau td:nth-child(3){font-weight:300;font-size:1.02rem;white-space:nowrap} .opco-unite{display:block;font-size:.78rem;font-weight:400;color:var(--gris-clair)} .opco-note{font-size:.9rem;color:var(--gris);margin-top:14px} .opco-cta{margin:40px 0 8px;padding:22px 24px;background:var(--fond-doux); border:1px solid var(--ligne)} .opco-cta p{margin:0 0 14px;font-size:1.02rem;color:var(--encre-doux)} /* Liste à filets, PAS une grille : à 5 formations sur 3 colonnes, la grille laissait une tuile vide qui se lit comme un bug d'affichage. Le filet porte la structure, comme partout ailleurs sur le site, et le nombre d'items n'a plus d'incidence sur le rendu. */ .opco-formations{list-style:none;margin:0;padding:0;border-top:1px solid var(--ligne-douce)} .opco-formations li{padding:13px 2px;border-bottom:1px solid var(--ligne-douce); display:flex;justify-content:space-between;align-items:baseline;gap:16px} .of-nom{font-size:.94rem;line-height:1.42} .of-duree{font-size:.8rem;color:var(--gris-clair);white-space:nowrap;font-variant-numeric:tabular-nums} .opco-maillage{margin-top:52px} .opco-maillage ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px} .opco-maillage a{display:inline-block;padding:6px 12px;border:1px solid var(--ligne); font-size:.87rem;text-decoration:none} .opco-maillage a:hover{border-color:var(--bleu);background:var(--bleu-pale)} /* ============================================================ INDEX DES PAGES GÉNÉRÉES — /opco, /conventions, /secteurs Grille de liens en cartes à filet. C'est la porte d'entrée des 62 pages générées : elle doit se parcourir à l'œil, d'où deux niveaux typographiques seulement — le nom, puis le repère. ============================================================ */ .idx-page{max-width:940px} /* Titre de groupe de l'index des formations. Le premier ne prend pas de marge haute : il suit immédiatement l'intro, et un blanc de plus l'en détacherait sans raison. */ .idx-groupe{font-size:1.02rem;margin:34px 0 0;padding-bottom:9px;border-bottom:1px solid var(--ligne)} .idx-groupe:first-of-type{margin-top:26px} .idx-groupe + .idx-grille{margin-top:12px} .idx-grille{list-style:none;margin:26px 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px} /* VIGNETTE AU-DESSUS DU TITRE, pas à gauche. Deux raisons : les intitulés vont de « Excel » à « Transformation numérique en restauration », et une image latérale de largeur fixe laisserait une colonne de texte trop étroite pour les longs ; et sur mobile la grille passe à une colonne, où l'image en tête garde la même lecture qu'en trois colonnes. Le ratio 3:2 est celui des variantes `cards` (480x320) : aucun recadrage au rendu. */ .idx-grille a{display:flex;flex-direction:column;gap:3px;height:100%; padding:0 0 13px;border:1px solid var(--ligne);border-radius:9px;overflow:hidden; text-decoration:none;background:#fff;transition:border-color .15s ease,background .15s ease} .idx-vig{display:block;aspect-ratio:3/2;background:var(--fond-doux);margin-bottom:11px} .idx-vig img{width:100%;height:100%;object-fit:cover;display:block} /* Sans vignette (index des OPCO), la carte retrouve son rembourrage haut. */ .idx-grille a > .idx-nom:first-child{margin-top:13px} /* DANS UNE GRILLE À VIGNETTES, UNE CARTE SANS PHOTO NE S'ÉTIRE PAS. Par défaut une grille aligne ses cellules en `stretch` : chaque carte prend la hauteur de la plus haute de SA RANGÉE. C'est ce qu'on veut entre cartes illustrées — leurs images ont toutes le même ratio 3:2, et seul le nombre de lignes du titre les sépare, donc l'étirement rattrape ce décalage et aligne les bas de carte. Mais une carte SANS image n'a rien à rattraper : elle se retrouvait étirée sur toute la hauteur d'une rangée illustrée, soit ~400 px de blanc sous trois lignes de texte, ce qui la faisait lire comme un trou plutôt que comme une carte. `align-self:start` la ramène à la hauteur de son contenu. LE `:has()` EXTÉRIEUR N'EST PAS DÉCORATIF. Sans lui, la règle s'appliquerait aussi à /opco et à /conventions, dont AUCUNE carte ne porte de vignette (délibéré : un OPCO est une institution, une convention un texte juridique). Là-bas, toutes les cartes cesseraient de s'étirer d'un coup et les bas de carte se désaligneraient sur 372 cartes pour corriger un défaut qui n'existe pas. La règle ne vise donc que le cas réellement mixte : une grille QUI a des vignettes, et une carte QUI n'en a pas — au 2026-08-07, la seule est « Conseil, gestion, services aux entreprises ». */ .idx-grille:has(.idx-vig) > li:not(:has(.idx-vig)){align-self:start} .idx-grille .idx-nom,.idx-grille .idx-meta{padding:0 15px} .idx-grille a:hover{border-color:var(--bleu);background:var(--bleu-pale)} .idx-nom{font-size:.95rem;font-weight:600;line-height:1.3;color:var(--encre)} .idx-meta{font-size:.79rem;color:var(--gris);font-variant-numeric:tabular-nums} /* ------------------------------------------------------------ FILTRE DE L'INDEX — champ de recherche + puces de thème. Le bloc est posé `hidden` par le gabarit et révélé par assets/index_filtre.js : sans script, la grille complète reste utilisable et aucun champ mort ne s'affiche. La garde globale `[hidden]{display:none!important}` en tête de cette feuille couvre le `display:flex` ci-dessous — c'est exactement le piège décrit là-haut, et la raison pour laquelle cette règle existe. ------------------------------------------------------------ */ .idx-filtres{display:flex;flex-direction:column;gap:12px;margin:26px 0 0} .idx-rech{position:relative;display:flex;align-items:center} .idx-rech-ico{position:absolute;left:13px;width:18px;height:18px;pointer-events:none; fill:none;stroke:var(--gris-clair);stroke-width:2;stroke-linecap:round} /* Le rembourrage gauche dégage la loupe ; le droit réserve la croix d'effacement native de `type=search`, qui se superposerait au texte sur WebKit. */ .idx-rech-champ{width:100%;padding:12px 40px 12px 40px;font:inherit;font-size:.95rem; color:var(--encre);background:var(--fond); border:1px solid var(--ligne);border-radius:9px;appearance:none} .idx-rech-champ::placeholder{color:var(--gris-clair)} .idx-rech-champ:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu-pale)} .idx-themes{display:flex;flex-wrap:wrap;gap:7px 8px} /* Puces, pas onglets : elles se combinent avec le champ et n'ordonnent aucune navigation. Même grammaire que .opco-maillage, dont elles sont voisines à l'écran. */ .idx-th{font:inherit;font-size:.85rem;line-height:1;padding:8px 13px;cursor:pointer; color:var(--encre-doux);background:var(--fond); border:1px solid var(--ligne);border-radius:999px; transition:border-color .15s ease,background .15s ease,color .15s ease} .idx-th:hover{border-color:var(--bleu);background:var(--bleu-pale)} .idx-th:focus-visible{outline:2px solid var(--bleu);outline-offset:2px} /* L'état actif ne repose PAS sur la seule couleur : le fond plein et le texte inversé restent lisibles en monochrome et pour un daltonisme rouge-vert. */ .idx-th.est-actif{color:#fff;background:var(--encre);border-color:var(--encre)} .idx-th.est-actif:hover{background:var(--encre-doux);border-color:var(--encre-doux)} .idx-compteur{margin:0;font-size:.83rem;color:var(--gris)} /* RECHERCHE ET FILTRES de l'index des conventions. 358 entrées ne se parcourent pas à l'œil : le champ et les puces sont le seul moyen d'y trouver la sienne. Ils reprennent les jetons de la charte (--ligne, --bleu, --fond-doux) plutôt que des valeurs propres. */ /* UN SEUL CHAMP, PLEINE LARGEUR, EN COLONNE : étiquette, champ, compteur, puces. La mise en deux colonnes a été abandonnée — un champ de recherche à demi-largeur à côté d'une grille de puces se lit comme deux commandes concurrentes, alors qu'elles filtrent la même liste. Le champ lui-même n'a PLUS DE RÈGLES PROPRES : il porte .idx-rech / .idx-rech-champ, les mêmes que la barre de l'index des formations (déclarées plus haut, loupe comprise). Deux apparences pour un même objet, c'était deux endroits à corriger à chaque retouche. */ .idx-outils{margin:26px 0 18px;display:flex;flex-direction:column;gap:12px} /* ÉTIQUETTE VISIBLE : elle nomme le champ ET annonce qu'on peut y taper un numéro IDCC, ce que le placeholder ne disait qu'avant la première frappe. Marge négative pour la coller à son champ sans casser le `gap` régulier du reste de la colonne. */ .idx-rech-label{margin-bottom:-5px;font-size:.88rem;font-weight:600;color:var(--encre-doux)} /* Les puces TOUCHENT le champ : nom et OPCO sont deux prises sur la même liste, souvent actionnées d'un même geste. `.idx-filtres` porte un `margin-top:26px` hérité du bloc de /formations, qui les décollait ; on le rabat ici, sur l'IDENTIFIANT — même raison qu'à la règle de grille ci-dessous, la classe est partagée et ne doit pas bouger pour l'autre index. Le compteur, lui, garde le `gap` plein : il décrit, il ne commande pas. */ #idxFiltres{margin-top:-4px} /* ⚠️ `.idx-filtres` EST DÉCLARÉE DEUX FOIS DANS CETTE FEUILLE, et c'est ce qui cassait la présentation. Plus haut (bloc de l'index des familles) elle vaut `flex-direction:column` ; la règle qui suivait ici ne redéclarait que `display` et `gap`, donc la COLONNE persistait par héritage de cascade : les douze puces s'empilaient en pleine largeur au lieu de s'aligner. La grille est donc portée par `#idxFiltres`, l'identifiant du bloc de l'index des conventions, et non par la classe partagée : le bloc des familles garde sa colonne, celui-ci a sa grille, et aucun des deux ne dépend de l'ordre des déclarations. */ #idxFiltres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px} /* « TOUS » N'EST PAS UN OPCO, c'est l'absence de filtre : il occupe sa propre ligne, pleine largeur, au-dessus de la grille. `1 / -1` couvre toutes les colonnes quel qu'en soit le nombre — donc sans média-requête, exactement comme l'auto-fit en dessous. */ #idxFiltres .idx-chip:first-child{grid-column:1 / -1} /* Puce de filtre : bordure au repos, aplat bleu quand elle est active. Le contraste de l'état actif ne repose PAS sur la seule couleur — le fond plein et le texte blanc le signalent aussi à qui ne distingue pas les teintes. RAYON 8 px ET NON 999 : le rayon pleine capsule suppose un objet court. Étirées à 150 px par la grille, ces puces deviennent des boutons — et un bouton de 150 px aux bords semi-circulaires ne se lit plus comme une puce, il se lit comme un objet mal réglé. Au SURVOL la bordure fonce et le fond ne bouge pas : un aplat au survol se confondrait avec l'aplat bleu qui, lui, signale l'état actif. Deux fonds pour deux sens différents, c'est un seul sens perdu. */ .idx-chip{padding:8px 12px;font:inherit;font-size:.875rem;line-height:1.3;text-align:center; color:var(--encre-doux);background:#fff;border:1px solid var(--ligne);border-radius:8px; cursor:pointer;transition:border-color .15s ease,color .15s ease} .idx-chip:hover{border-color:var(--gris);color:var(--encre)} .idx-chip.on{background:var(--bleu);border-color:var(--bleu);color:#fff;font-weight:600} .idx-chip:focus-visible{outline:2px solid var(--bleu-fonce);outline-offset:2px} /* Utilitaire « visible des seuls lecteurs d'écran ». Plus aucun libellé du site n'en dépend depuis que le champ des conventions porte une étiquette visible — la classe reste parce que c'est une primitive d'accessibilité standard, pas parce qu'un appelant l'attend. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Le titre de section masqué emporte sa marge, mais `:first-of-type` continue de désigner le premier titre du DOCUMENT : le script pose cette classe sur le premier titre VISIBLE. Même spécificité que la règle `:first-of-type` (0,2,0), déclarée après elle — elle gagne. */ .idx-groupe.est-premier{margin-top:26px} .idx-vide{margin:30px 0 0;padding:24px;border:1px solid var(--ligne);border-radius:9px; background:var(--fond-doux)} .idx-vide p{margin:0 0 10px;font-size:.95rem;line-height:1.6;color:var(--gris)} .idx-vide p strong{color:var(--encre)} .idx-vide .btn{margin-top:6px} /* Encart d'information en cours de page (subrogation de paiement). Filet et fond doux : il informe sans réclamer d'action, contrairement à .opco-cta qui appelle au simulateur. */ .opco-encart{margin:42px 0 0;padding:22px 24px;border:1px solid var(--ligne);border-radius:9px; background:var(--fond-doux)} .opco-encart h2{font-size:1.02rem;margin:0 0 8px} .opco-encart p{margin:0;font-size:.94rem;line-height:1.65;color:var(--gris)} /* ============================================================ BLOC D'APPEL — bandeau haut, bouton flottant mobile, boîte de rappel. ============================================================ */ .ap-bandeau{background:var(--encre);color:#fff;font-size:.86rem} .ap-in{max-width:1180px;margin:0 auto;padding:8px 24px;display:flex;align-items:center; justify-content:center;gap:10px;flex-wrap:wrap} .ap-bandeau .ap-ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85} .ap-txt{color:rgba(255,255,255,.88)} /* Le numéro est le seul élément mis en avant : c'est l'action attendue. */ .ap-num{color:#fff;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums; white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.45)} .ap-num:hover{border-bottom-color:#fff} .ap-cta{color:#fff;font-weight:600;text-decoration:none;border:1px solid rgba(255,255,255,.4); border-radius:999px;padding:3px 13px;font-size:.82rem;cursor:pointer} .ap-cta:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)} /* 🔴 BOUTON FLOTTANT D'APPEL (`.ap-flot`) — RETIRÉ LE 2026-08-08, décision client. Le HTML ne le produit plus (gabarits/_appel.php, qui porte le détail du raisonnement) : les ~30 lignes de style et les trois règles d'évitement qui vivaient ici sont donc parties avec. LA LEÇON, ELLE, RESTE, et c'est pour elle que ce commentaire subsiste : un élément `position:fixed` en bas d'un téléphone entre en concurrence avec TOUT ce qui vit en bas d'écran, et chaque concurrent se paie d'une règle d'évitement écrite après coup. Celui-ci en a collectionné trois en trois jours — recouvert par le bandeau de consentement depuis sa création (la règle censée l'éviter reposait sur un `~` vers un frère PRÉCÉDENT, elle n'a jamais rien fait), puis masqué sous le panier du simulateur, puis masqué encore pendant la saisie des coordonnées parce qu'il se peignait sur le bouton d'envoi. ⚠️ AVANT DE REPOSER UN BOUTON FLOTTANT ICI : inventorier ce qui occupe déjà le bas de l'écran (`--ck-h` du consentement, `.panier-flot`, `#pec-modal`), et vérifier que l'action ne se trouve pas DÉJÀ ailleurs — c'était le cas, le bandeau d'appel la porte en haut de chaque page. */ /* BOÎTE DE RAPPEL */ .ap-modal{border:0;border-radius:14px;padding:26px 26px 22px;max-width:420px;width:calc(100% - 32px); box-shadow:0 24px 60px -20px rgba(11,34,57,.5);color:var(--encre)} .ap-modal::backdrop{background:rgba(11,34,57,.55)} .ap-modal h2{font-size:1.18rem;margin:0 0 6px} .ap-modal-sous{font-size:.88rem;color:var(--gris);margin:0 0 18px;line-height:1.55} .ap-modal-fermer-form{margin:0;position:absolute;top:10px;right:12px} .ap-modal-fermer{border:0;background:none;font-size:1.5rem;line-height:1;color:var(--gris-clair); cursor:pointer;padding:4px 8px;border-radius:6px} .ap-modal-fermer:hover{color:var(--encre);background:var(--fond-doux)} .ap-form label{display:block;font-size:.82rem;font-weight:600;margin:0 0 4px} .ap-form input,.ap-form select{width:100%;padding:10px 12px;font:inherit;font-size:.93rem; border:1px solid var(--ligne);border-radius:8px;margin-bottom:13px;background:#fff;color:var(--encre)} .ap-form input:focus,.ap-form select:focus{outline:none;border-color:var(--bleu); box-shadow:0 0 0 3px var(--bleu-pale)} .ap-envoyer{width:100%;margin-top:2px} .ap-envoyer[disabled]{opacity:.6;cursor:progress} .ap-err{margin:0 0 10px;font-size:.85rem;color:#b3261e} .ap-mentions{margin:12px 0 0;font-size:.76rem;color:var(--gris-clair);line-height:1.5} .ap-ok p{margin:0 0 6px;font-size:.95rem} .ap-ok p:last-child{color:var(--gris);font-size:.88rem;margin:0} /* Piège à robots : hors écran, jamais `display:none` — certains robots ignorent ce qui est masqué par `display`, et un lecteur d'écran ne doit pas non plus l'annoncer (aria-hidden). */ .ap-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Le libellé court ne sert que sous 620 px — voir la bascule ci-dessous. */ .ap-txt-court{display:none} @media(max-width:620px){ /* `nowrap` sur la ligne : le bandeau doit tenir en UNE ligne, pas trois. L'icône cède la place en premier — elle est décorative, la phrase et le bouton ne le sont pas. */ .ap-in{padding:7px 14px;font-size:.79rem;gap:9px;flex-wrap:nowrap;justify-content:center} .ap-bandeau .ap-ico{display:none} .ap-txt-long{display:none} .ap-txt-court{display:inline;white-space:nowrap} .ap-cta{padding:3px 11px;font-size:.76rem;white-space:nowrap;flex:none} } /* ============================================================ PAGE FAQ Accordéon en `
` natif : le contenu reste dans le DOM même replié, donc lisible par un moteur et par un lecteur d'écran, et la navigation au clavier fonctionne sans script. ============================================================ */ .faq-page{max-width:820px} .faq-bloc{margin-top:38px} .faq-rubrique{font-size:1.05rem;margin:0 0 4px;padding-bottom:10px;border-bottom:1px solid var(--ligne)} .faq-item{border-bottom:1px solid var(--ligne-douce)} .faq-item summary{list-style:none;cursor:pointer;padding:16px 34px 16px 2px;position:relative; font-weight:600;font-size:.97rem;line-height:1.45;color:var(--encre)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--bleu)} .faq-item summary:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:4px} /* Chevron en CSS pur : deux traits pivotés, aucun fichier à charger et aucun emoji. */ .faq-item summary::after{content:'';position:absolute;right:6px;top:50%;width:9px;height:9px; border-right:2px solid var(--gris-clair);border-bottom:2px solid var(--gris-clair); transform:translateY(-70%) rotate(45deg);transition:transform .18s ease} .faq-item[open] summary::after{transform:translateY(-20%) rotate(-135deg)} .faq-item[open] summary{color:var(--bleu)} .faq-rep{padding:0 34px 18px 2px} .faq-rep p{margin:0;font-size:.94rem;line-height:1.65;color:var(--gris)} @media(prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}} /* ============================================================ BANDEAU DE CONSENTEMENT Ancré en BAS et non en plein écran : le visiteur doit pouvoir lire la page et naviguer sans se prononcer — un mur modal transforme le refus en obstacle, ce que la CNIL reproche. Les trois actions ont RIGOUREUSEMENT le même poids visuel : accepter et refuser partagent la classe `.btn`, aucune n'est en couleur d'appel exclusive. C'est le point que les contrôles regardent en premier. ============================================================ */ .ck-bandeau{position:fixed;left:0;right:0;bottom:0;z-index:80; background:#fff;border-top:1px solid var(--ligne); box-shadow:0 -8px 32px -20px rgba(11,34,57,.5)} .ck-in{max-width:1140px;margin:0 auto;padding:18px 24px; display:flex;align-items:center;gap:26px;flex-wrap:wrap} .ck-txt{flex:1 1 420px;min-width:0} .ck-txt h2{font-size:1rem;margin:0 0 5px} .ck-txt p{margin:0;font-size:.88rem;line-height:1.55;color:var(--gris)} .ck-txt a{color:var(--bleu)} .ck-actions{display:flex;gap:9px;flex-wrap:wrap;flex:0 0 auto} .ck-actions .btn{padding:10px 20px;font-size:.9rem} /* ⚠️ `[hidden]` D'ABORD, ET EN !important. La règle `[hidden]{display:none}` de l'agent utilisateur a la spécificité d'un attribut (0,1,0) : n'importe quelle règle de CLASSE portant un `display` la bat. Le voile restait donc affiché en permanence, invisible au premier coup d'œil mais couvrant tout l'écran — il interceptait les clics sur « Tout accepter » et « Tout refuser », qui ne répondaient plus. Le panneau « Personnaliser », lui, fonctionnait : c'est son propre voile qui bloquait les deux autres, jamais lui-même. À ne pas retirer. */ .ck-voile[hidden],.ck-bandeau[hidden]{display:none !important} .ck-voile{position:fixed;inset:0;z-index:90;background:rgba(11,34,57,.5); display:flex;align-items:center;justify-content:center;padding:22px} .ck-panneau{background:#fff;border-radius:var(--rayon-l);max-width:620px;width:100%; max-height:88vh;overflow-y:auto;padding:24px 26px 22px} .ck-p-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px; margin-bottom:6px} .ck-p-tete h2{font-size:1.24rem} .ck-fermer{border:0;background:none;font-size:1.7rem;line-height:1;cursor:pointer; color:var(--gris-clair);padding:0 2px} .ck-fermer:hover{color:var(--encre)} .ck-finalite{display:flex;align-items:flex-start;justify-content:space-between;gap:22px; padding:16px 0;border-bottom:1px solid var(--ligne-douce)} .ck-f-txt{min-width:0} .ck-f-txt h3{font-size:.96rem;margin:0 0 3px} .ck-f-txt p{margin:0;font-size:.85rem;line-height:1.5;color:var(--gris)} .ck-toujours{flex:0 0 auto;font-size:.78rem;color:var(--valide);background:var(--valide-fond); border-radius:999px;padding:4px 11px;white-space:nowrap;margin-top:2px} /* Interrupteur : la case native reste dans le flux, seulement rendue invisible — elle garde le focus clavier, l'annonce du lecteur d'écran et le libellé associé par le