/* Feuille partagee par toutes les pages. * * Elle ne contient QUE ce qui est vrai partout. Les regles de mise en page * viennent des maquettes et different d'une page a l'autre, parfois sur le * meme selecteur : la homepage passe [data-h1] a 38px sous 860px, la fiche * formation a 33px sous 960px. Les fusionner en un seul fichier aurait casse * l'une des deux mises en page validees. Chaque page porte donc son propre * bloc, injecte dans le par base.njk depuis src/_includes/styles/. * * Meme raison pour les classes de survol : le transcodeur les numerote par * fichier, donc .dc-hover-3 ne veut pas dire la meme chose sur deux pages. */ /* ------------------------------------------- comportement des gabarits partages * * L'en-tete et le pied de page sont communs a toutes les pages. Leurs regles * responsives doivent donc l'etre aussi, et c'est ici leur place. * * Elles etaient jusqu'au 07/08 dans la feuille de CHAQUE maquette, recopiees a * l'identique quinze fois. Consequence : les neuf pages ecrites sans maquette, * les quatre pages legales, les quatre articles et la page 404, affichaient la * navigation complete du bureau sur un telephone, sans bouton de menu, et * debordaient de plusieurs centaines de pixels. Le defaut ne se voyait sur * aucune page issue d'une maquette, ce qui est exactement pourquoi il a tenu. * * Les feuilles de maquette gardent leur copie : elles disent la meme chose, il * n'y a pas de conflit. Le point de bascule retenu est celui de la page de * reference, 1080 pixels. */ /* Meme famille de defaut, trouve le 08/08. La remise a zero de la marge du * body vit dans les quatorze feuilles de maquette et nulle part ailleurs. Les * neuf pages ecrites sans maquette gardaient donc les 8 pixels que le * navigateur pose par defaut : leur en-tete et leur pied de page, censes tenir * toute la largeur, s'affichaient a 359 pixels sur un ecran de 375, avec un * lisere blanc sur les quatre cotes. Mesure sur /mentions-legales, pas suppose. * Les feuilles de maquette gardent leur copie, elles disent la meme chose. */ body { margin: 0; } /* ------------------------------------------------- fond et schema de couleur * * LE SITE NE DECLARAIT AUCUNE COULEUR DE FOND. Ni sur html, ni sur body : les * deux etaient transparents. Tant qu'on regarde en theme clair, le blanc par * defaut du navigateur donne le change et rien ne se voit. * * Chez un visiteur en THEME SOMBRE, le fond sombre du navigateur passe au * travers, et le texte du site, qui est un noir presque pur, #1C1A17, devient * illisible. Les seuls blocs restes lisibles sont ceux qui portent un fond en * dur, comme les encadres creme : la page s'affiche en damier. * * Le defaut touchait LES 23 PAGES, pas une seule. Constate dans le navigateur * le 10/08/2026, pas suppose. * * La section 3 de CLAUDE.md impose un fond principal blanc pur #FFFFFF. La * regle existait donc depuis le debut, elle n'avait simplement jamais ete * ecrite en CSS. * * `color-scheme: light` dit au navigateur que ce site est concu en clair et * uniquement en clair. Sans cette declaration, Chrome peut appliquer son * assombrissement automatique et repeindre de lui-meme les champs de * formulaire, les barres de defilement et les couleurs par defaut, ce qui * casserait les 52 champs du formulaire de contact. C'est une declaration * honnete : le site n'a pas de theme sombre, autant le dire au navigateur * plutot que de le laisser en inventer un. */ html { background-color: #ffffff; color-scheme: light; } body { background-color: #ffffff; color: #1c1a17; } [data-burger] { display: none; } @media (max-width: 1080px) { [data-nav], [data-hcta] { display: none !important; } [data-burger] { display: flex !important; } } @media (max-width: 960px) { [data-hcta-ghost] { display: none !important; } } /* Le pied de page partage est une grille de quatre colonnes portant * `data-col4`, et non `data-footer-grid` : ce dernier vient des footers des * fiches, qui ne sont pas celui qui est servi. Une premiere version de ces * regles visait le mauvais selecteur et ne s'appliquait donc a rien, ce qui * laissait le pied de page en quatre colonnes sur un telephone. * * Les regles sont limitees au pied de page. `data-col2` et `data-col4` * existent aussi dans le corps des maquettes, ou chaque feuille de page les * traite deja a son propre point de bascule : une regle globale y changerait * une mise en page validee. */ @media (max-width: 860px) { [data-wrap] { padding-left: 20px !important; padding-right: 20px !important; } footer [data-col2], footer [data-col3], footer [data-col4] { grid-template-columns: 1fr !important; } footer [data-hrow] { flex-direction: column !important; align-items: flex-start !important; } } /* L'attribut hidden doit gagner. Les maquettes portent leurs styles en ligne, * et un style="display:flex" en ligne l'emporte sur le display:none que le * navigateur associe a [hidden]. Sans cette regle, le menu mobile reste * affiche par-dessus toute la page alors qu'il se declare masque. */ [hidden] { display: none !important; } /* --------------------------------------------------------------- accordeons * * Le texte des panneaux est TOUJOURS dans le HTML servi : c'est la regle de la * section 3 de CLAUDE.md, et c'est ce que lisent les moteurs de reponse, qui * n'executent pas le JavaScript. Seul l'affichage est replie. * * Le repli est conditionne a la classe "js" posee sur par un script en * tete de page. Sans JavaScript, tous les panneaux restent ouverts et la page * reste entierement lisible, au lieu d'offrir des boutons qui n'ouvrent rien. */ /* Seule la fermeture est forcee. Certains panneaux portent un display:flex en * ligne, qui l'emporterait sur une regle de feuille ; d'ou le !important. Mais * on ne declare RIEN a l'ouverture : le style en ligne de la maquette reprend * alors la main et le panneau retrouve exactement la disposition validee, flex * ou bloc selon les cas. Un display:block force a l'ouverture casserait les * panneaux qui sont des colonnes flex. */ .js .accordeon-panneau:not(.ouvert) { display: none !important; } /* L'indicateur est le dernier element du bouton. Il pivote au lieu de changer * de caractere : aucune substitution de glyphe, donc aucun risque de * reintroduire un tiret. */ [data-accordeon] > span:last-child { transition: transform 0.18s ease; } [data-accordeon][aria-expanded="true"] > span:last-child { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { [data-accordeon] > span:last-child { transition: none; } } /* ------------------------------------------------------------------ filtre * * L'onglet actif reprend exactement le style que la maquette lui donnait : * fond bleu principal, texte blanc, bordure assortie. Les onglets inactifs * gardent leur style en ligne, d'ou le !important, qui ne sert qu'a passer * devant lui. Aucune couleur nouvelle n'est introduite. */ [data-filtre][aria-pressed="true"] { background: #0033ff !important; color: #ffffff !important; border-color: #0033ff !important; } /* -------------------------------------------------------- ressources liees * * Bloc de renvoi vers les articles, pose en fin de /entreprises et de * /financement. C'est le seul contenu ajoute a une maquette validee, et * l'etape 7 de CLAUDE.md le demande explicitement : sans liens entrants, les * articles restent orphelins. Volontairement sobre, il ne concurrence aucun * appel a l'action de la page. */ .ressources-liees { max-width: 1220px; margin: 0 auto; padding: 0 40px 72px; } .ressources-liees h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 10px; } .ressources-liees > p { font-size: 16px; line-height: 1.6; color: #6b6459; margin: 0 0 24px; max-width: 640px; } .ressources-liees ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .ressources-liees li { background: #ffffff; border: 1px solid #ebe4d8; border-radius: 14px; padding: 20px 24px; } .ressources-liees a { display: block; font-size: 17px; font-weight: 700; color: #1c1a17; margin-bottom: 6px; } .ressources-liees a:hover { color: #0033ff; } .ressources-liees .resume { display: block; font-size: 15px; line-height: 1.55; color: #6b6459; } @media (min-width: 861px) { .ressources-liees ul { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .ressources-liees { padding: 0 20px 52px; } .ressources-liees h2 { font-size: 23px; } } /* ------------------------------------------------------------ accessibilite */ :focus-visible { outline: 3px solid #0033ff; outline-offset: 2px; } .lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 400; background: #ffffff; color: #0033ff; padding: 12px 18px; border: 2px solid #0033ff; border-radius: 10px; font-weight: 700; } .lien-evitement:focus { left: 12px; top: 12px; } /* Marqueur des valeurs encore a obtenir. Volontairement visible : la section 2 * de CLAUDE.md prefere un placeholder qu'on voit a une valeur plausible. */ .a-obtenir { display: inline-block; padding: 6px 12px; border: 1px dashed #6b6459; border-radius: 8px; color: #6b6459; font-size: 14px; } /* Zone d'image restee sans visuel. * * Trois formations n'ont aucune photo qui montre leur sujet, et le pack n'en * fournit pas : community management, anglais, espagnol. Leur marqueur de * chantier a ete retire pour la mise en production. * * UN APLAT UNI NE SUFFISAIT PAS. Premiere version, un simple fond creme : a * l'ecran, une carte sur deux montrait une grande zone vide, et cela se lisait * exactement comme une image qui n'a pas charge. Constate sur le rendu, pas * suppose. Le motif ci-dessous occupe la place avec les couleurs de la marque : * il ne represente rien, il ne pretend rien, et il fait lire l'absence de photo * comme un parti pris. * * La regle se desactive TOUTE SEULE le jour ou la photo arrive, le motif etant * conditionne a l'absence d'image. Rien a retirer a ce moment-la. */ [data-cardimg]:not(:has(img)), [style*="aspect-ratio:16/10"]:not(:has(img)) { background: #f7f3ec url("/assets/img/motif-formation.svg") center / cover no-repeat; }