/* ========================================================================== Charte commune — Foundi Consulting -------------------------------------------------------------------------- Une seule source pour l'en-tête, le menu, le choix de langue et le pied de page, sur toutes les pages du site. À charger EN DERNIER dans , après la feuille propre à chaque page : les quelques valeurs redéfinies ici doivent l'emporter. Les pages existantes déclarent toutes les mêmes variables (--sans, --serif, --navy) : les redéfinir suffit à changer la police et le bleu partout, sans toucher à leur mise en page. Aucun nom de classe utilisé ici n'existe dans les feuilles des pages (vérifié) ; aucune page ne stylise header, footer ou nav par la balise. ========================================================================== */ :root{ /* Police du texte : Source Sans 3 remplace Inter. */ --sans:'Source Sans 3','Segoe UI',system-ui,sans-serif; --font-body:'Source Sans 3','Segoe UI',system-ui,sans-serif; --font-display:'Playfair Display',Georgia,serif; /* Bleu de la charte. Les pages utilisaient #0A1F44, un ton plus sourd. */ --navy:#112A4D; --navy-deep:#0b1f3a; --bg-soft:#f4f6f9; --line:#e3e7ee; --muted:#5a6472; /* Deux couleurs héritées des pages, trop pâles pour du texte. Défauts d'origine, mesurés aussi sur le site en ligne : les libellés de formulaire étaient à 3,45 de contraste, les titres de section à 2,83, pour un minimum lisible de 4,5. Elles ne servent que sur fond clair (vérifié sur les 42 et 12 règles concernées), on peut donc les foncer sans risque. L'or simple (--gold) n'est PAS touché : il sert aussi sur fond sombre, où il est parfaitement lisible. */ --ink-3:#6b6b6b; /* ── Bascule vers la charte bleu et blanc ── Les pages d'outils, le blog, l'inscription et les mentions légales étaient bâties sur une palette crème et or. Les surfaces passent au blanc et au bleu très pâle, l'accent passe au bleu. Les couleurs qui portent un sens ne bougent pas : le vert du feu vert, l'orange de la réserve, le rouge du refus. Les changer rendrait les verdicts illisibles. */ --cream:#ffffff; /* surfaces claires */ --cream-2:#f4f6f9; /* surfaces légèrement teintées */ --ground:#f4f6f9; /* fond de page — était un beige soutenu */ --surface-2:#f4f6f9; --band-ink:#dbe4ee; /* texte clair sur le bandeau bleu */ --navy-deep:#0b1f3a; --gold:#112A4D; /* l'accent devient le bleu de la charte */ --gold-2:#7d6122; /* conservé pour le texte sur fond clair */ --etiq-or:#7d6122; --accent:#112A4D; } .fc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .fc-sr:focus{position:static;width:auto;height:auto;margin:0;clip:auto; padding:10px 16px;background:#fff;color:var(--navy);display:inline-block} /* ---------- En-tête ---------- */ .header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94); backdrop-filter:blur(10px);border-bottom:1px solid var(--line); font-family:var(--font-body)} .header-in{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex; align-items:center;justify-content:space-between;gap:20px} .header .brand{display:flex;align-items:center;gap:12px} .header .brand img{height:44px;width:auto;display:block} .header .nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .header .nav a{font-size:15px;color:var(--navy);font-weight:500; white-space:nowrap;text-decoration:none} .header .nav a:hover{color:var(--muted)} .header-actions{display:flex;align-items:center;gap:12px} .header .btn{display:inline-block;font:600 15px var(--font-body);padding:12px 22px; border-radius:2px;border:1px solid transparent;transition:.2s ease;cursor:pointer; text-align:center;text-decoration:none} .header .btn-primary{background:var(--navy);color:#fff} .header .btn-primary:hover{background:#163a68} /* ---------- Choix de la langue ---------- */ .lang{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden} .lang button{background:#fff;border:0;padding:7px 11px; font:600 12.5px var(--font-body);letter-spacing:.06em;color:var(--muted);cursor:pointer} .lang button[aria-pressed="true"]{background:var(--navy);color:#fff} /* ---------- Menu du téléphone ---------- */ .burger{display:none;background:transparent;border:1px solid var(--line); border-radius:2px;padding:9px 11px;cursor:pointer;line-height:0} .burger span{display:block;width:18px;height:2px;background:var(--navy);margin:3px 0} /* « overflow:hidden » n'est pas décoratif : fermé, le panneau est repoussé hors écran par une translation, et une translation élargit la zone de défilement. Sans ce rognage, la page gagne une barre horizontale. */ .drawer{position:fixed;inset:0;overflow:hidden;background:rgba(11,31,58,.55); opacity:0;visibility:hidden;transition:.2s;z-index:60} .drawer[data-ouvert="1"]{opacity:1;visibility:visible} .drawer-panel{position:absolute;top:0;right:0;width:min(320px,86vw);height:100%; background:#fff;padding:22px;overflow-y:auto;transform:translateX(100%); transition:.25s;font-family:var(--font-body)} .drawer[data-ouvert="1"] .drawer-panel{transform:none} .drawer-panel a{display:block;padding:13px 4px;border-bottom:1px solid var(--line); font-size:16px;font-weight:500;color:var(--navy);text-decoration:none} .drawer-panel .btn{display:block;margin-top:18px;background:var(--navy);color:#fff; border:0;border-radius:2px;padding:13px 20px;text-align:center; font:600 15px var(--font-body);text-decoration:none} .drawer-close{background:transparent;border:0;font-size:26px;line-height:1; color:var(--navy);cursor:pointer;margin-bottom:10px;padding:6px} /* ---------- Pied de page ---------- */ .footer{background:var(--navy-deep);color:#dbe4ee;padding:64px 24px 36px; font-family:var(--font-body)} .footer-in{max-width:1160px;margin:0 auto;display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:36px} .footer .brand img{height:52px;margin-bottom:18px;display:block} .footer h4{font:600 12.5px var(--font-body);letter-spacing:.14em; text-transform:uppercase;color:#fff;margin:0 0 15px} .footer a{display:block;font-size:16px;color:#c7d3e3;margin-bottom:8px; text-decoration:none} .footer a:hover{color:#fff;text-decoration:underline} .footer p{font-size:16px;color:#c7d3e3;margin:0} .footer-social{display:flex;gap:12px;margin-top:14px} .footer-social a{display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:2px;margin:0} .footer-social a:hover{background:rgba(255,255,255,.1);text-decoration:none} .footer-social svg{width:16px;height:16px;fill:#c7d3e3} .footer-certif{max-width:1160px;margin:34px auto 0;padding-top:24px; border-top:1px solid rgba(255,255,255,.12);display:flex;gap:22px; align-items:center;flex-wrap:wrap} .footer-certif img{width:150px;height:auto;background:#fff;padding:9px; border-radius:3px;flex:0 0 auto} .footer-certif p{font-size:13px;color:#a8b0c0;line-height:1.6;max-width:74ch; flex:1;min-width:260px} .footer .legals{max-width:1160px;margin:26px auto 0;padding-top:22px; border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#a8b0c0; display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;line-height:1.6} .footer .legals a{display:inline;color:#a8b0c0;margin:0} /* ---------- Adaptation aux écrans ---------- */ /* Sans le bouton « Prendre rendez-vous », le menu tient sur une ligne jusqu'à 1 100 px (mesuré : il se casse entre 1 100 et 1 060). Le seuil descend d'autant : le menu complet reste visible sur plus d'écrans. */ @media(max-width:1100px){ .header .nav{display:none} .burger{display:block} .footer-in{grid-template-columns:1fr 1fr 1fr} } @media(max-width:820px){ .footer-in{grid-template-columns:1fr 1fr} .header-in{padding:12px 18px} } @media(max-width:560px){ .footer-in{grid-template-columns:1fr} .header-in{padding:12px 16px} .header .brand img{height:36px} /* Zones tactiles : au moins 24 px de haut. */ .footer a,.footer .legals a{padding-block:5px} .footer .legals a{display:inline-block} } /* Libellés de champs : ils étaient à 10,5 px. Un formulaire se remplit, il doit se lire. Plancher à 12 px, sans toucher à la mise en page. */ .field label,.fs-title,.confirm-share .share-label{font-size:12px} /* Deux derniers textes trop pâles, chacun sur fond clair. L'étiquette de catégorie des cartes du blog était en or clair (2,25) ; la note interne du formulaire frôlait le seuil (4,46 pour 4,5 requis). Réglés au cas par cas : l'or reste intact partout où il est posé sur du bleu. */ .blog-card-cat{color:#7d6122} .note-interne{color:#4f5560} /* Page formation : la grille était en « 1fr 320px ». Par défaut une colonne « 1fr » ne peut pas devenir plus étroite que son contenu — un mot long ou un tableau suffit à élargir la grille au-delà de l'écran. La page gagnait une barre de défilement horizontale entre 1 100 et 1 200 px de large (défaut d'origine, mesuré aussi sur le site en ligne). « minmax(0, 1fr) » autorise la colonne à se réduire. */ .fd-body{grid-template-columns:minmax(0,1fr) 320px} @media(max-width:1000px){ .fd-body{grid-template-columns:1fr} } /* Page formation : trois éléments en or clair, illisibles sur le crème. Défauts d'origine, présents aussi en ligne. .fd-derou-label et .fd-pdflink : or sur crème, 2,03 → 5,25 en or foncé. .fd-derou-pill : blanc sur or, 2,25 → 6,38 en bleu encre. L'or reste la couleur de l'accent : seule sa valeur change là où il porte du texte sur fond clair. */ .fd-derou-label,.fd-pdflink{color:#7d6122} .fd-derou-pill{color:#112A4D} /* Ces deux liens-là sont posés sur le bandeau bleu de la page formation, pas sur le crème : l'or foncé y devient sombre sur sombre. On garde l'or d'origine, qui ressort très bien sur du bleu. */ .fd-header .fd-pdflink{color:#C9A961} /* ── Les endroits où l'or servait de contraste sur fond bleu ── En passant l'accent au bleu, ces textes sont devenus bleu sur bleu. Ils reprennent le bleu très pâle du pied de page, qui joue le même rôle que l'or jouait avant : ressortir sur du sombre. */ .topbar a,.topbar span{color:#c7d3e3} .topbar a:hover{color:#ffffff} /* Les boutons d'appel : bleu plein avec texte blanc. Mais la variante « clair » a un fond blanc — sa règle vient donc après, sinon le texte clair la rendrait illisible. C'est l'erreur que ma première version faisait. */ .cta,.cta-txt,.expert-bouton,.cta.expert-bouton{color:#ffffff} .cta .cta-txt,.cta .cta-sous{color:#dbe4ee} .cta a{color:#ffffff} .cta.clair,.cta.clair a,.cta.clair .cta-txt,.cta.clair .cta-sous{color:var(--navy)} /* L'étiquette du bloc « marge de sécurité » est posée sur un fond bleu : elle doit être claire, comme celles des cartes blanches sont sombres. */ .resilience .carte-etiq{color:#dbe4ee} /* ── Animation des onglets au survol ── Un trait bleu se trace sous l'onglet, de la gauche vers la droite, et le libellé remonte d'un pixel. Discret : la barre reste lisible pendant le mouvement. L'onglet garde sa couleur — c'est le trait qui signale, pas un changement de teinte qui ferait clignoter la barre. */ .header .nav a{position:relative;padding-block:6px; transition:color .2s ease,transform .2s ease} .header .nav a::after{content:"";position:absolute;left:0;right:0;bottom:0; height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left; transition:transform .26s ease} .header .nav a:hover,.header .nav a:focus-visible{color:var(--navy);transform:translateY(-1px)} .header .nav a:hover::after,.header .nav a:focus-visible::after{transform:scaleX(1)} /* Le tiroir du téléphone : un liseré qui se remplit sur le côté. */ .drawer-panel a{position:relative;transition:background .2s ease,padding-left .2s ease} .drawer-panel a::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px; background:var(--navy);transform:scaleY(0);transform-origin:top;transition:transform .24s ease} .drawer-panel a:hover{background:var(--bg-soft);padding-left:14px} .drawer-panel a:hover::before{transform:scaleY(1)} @media (prefers-reduced-motion: reduce){ .header .nav a,.header .nav a::after,.drawer-panel a,.drawer-panel a::before{transition:none} .header .nav a:hover{transform:none} } /* Bandeau bleu de la page d'inscription : l'étiquette, la référence et le prix y étaient en or. Devenus bleus sur bleu, ils passent au bleu très pâle. */ /* « page-hero » existe sur deux pages avec des fonds opposés : bleu sur l'inscription, clair sur le formulaire. Une règle sur la seule classe rendait le fil d'ariane du formulaire pâle sur pâle. On désigne donc explicitement le bandeau sombre. */ .hero-sombre .badge,.hero-sombre .badge.guar, .hero-sombre a,.hero-sombre .fil a,.hero-sombre .breadcrumb a{color:#dbe4ee} .hero-sombre .num{color:#ffffff} .hero-sombre .badge.guar{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)} /* Bouton d'abonnement du blog : fond bleu, texte blanc. Il portait un texte sombre, hérité du temps où son fond était or. */ .bnb-ligne button{color:#ffffff} /* Indicateur de satisfaction, repris dans la carte latérale de la page formation. Il reste sobre : c'est un chiffre de résultat, pas un argument publicitaire — la source et la date sont à côté, cliquables. */ .fd-side-satis{margin:4px 0 14px;padding:14px 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line); display:flex;flex-direction:column;gap:3px} .fd-side-satis .v{font-family:var(--font-display);font-size:1.9rem;line-height:1; color:var(--navy);font-weight:600} .fd-side-satis .l{font-size:13px;color:var(--muted);line-height:1.4} .fd-side-satis .src{font-size:12px;color:var(--muted);text-decoration:underline; margin-top:2px} .fd-side-satis .src:hover{color:var(--navy)} /* ── Indicateurs de résultats (page formation) ── Ces chiffres étaient en or sur le bloc bleu. En passant l'accent au bleu, ils sont devenus bleu sur bleu : invisibles. Ce sont les indicateurs que le référentiel Qualiopi impose de publier — c'est le dernier endroit du site où un texte peut disparaître. Ils passent au blanc, comme leurs libellés. */ .indicators-grid .ind-v,.ind-cell .ind-v{color:#ffffff} /* ── Page formation : le reste de ce qui était en or ── Fil d'ariane, sous-titre, étiquettes et bouton doré : tous posés sur du bleu, tous devenus invisibles avec l'accent bleu. Ils passent au clair. La pastille « Livrable » et le bouton doré, eux, ont un FOND bleu : c'est leur texte qui doit être blanc. */ .fd-header .fd-breadcrumb,.fd-header .fd-breadcrumb a{color:#c7d3e3} .fd-subtitle{color:#dbe4ee} .t-badge.guaranteed,.t-badge{color:#ffffff;border-color:rgba(255,255,255,.32)} .fd-derou-pill{color:#ffffff} .btn-gold,.btn.btn-gold{color:#ffffff;background:var(--navy);border-color:var(--navy)} .btn-gold:hover,.btn.btn-gold:hover{background:#163a68;border-color:#163a68} /* La date de mise à jour des indicateurs fait partie de l'obligation : un indicateur sans date ne vaut rien, et un auditeur la cherche. Elle était à 10,5 px, sous le plancher de lisibilité du site. */ .ind-footnote{font-size:12.5px;letter-spacing:.04em} /* ── Page contact : la section est bleue ── Étiquettes, fil d'ariane et bouton y étaient en or. Devenus bleus sur bleu, ils passent au clair. Le bouton, lui, a un fond bleu : c'est son texte qui doit être blanc. */ .contact-page .ct-etiq{color:#c7d3e3} .contact-page .lf-eyebrow,.contact-page .lf-eyebrow span{color:#c7d3e3} .ct-rdv-btn,.btn.ct-rdv-btn{color:#ffffff} /* ── Logo du pied de page ── Agrandi de 52 à 78 px : à 52 px la ligne « FOUNDI CONSULTING » sous le monogramme était illisible. Le fichier est blanc sur fond transparent : seul le sigle apparaît, rien autour. Le logo Qualiopi, lui, garde son cadre blanc — et ce n'est pas un choix : son fichier n'a aucune transparence (mesuré : 0 %), le blanc fait partie de l'image. Posé directement sur le bleu, il afficherait un rectangle blanc de toute façon. Le cadre est donc assumé et soigné plutôt que subi. */ .footer .brand img{height:78px;margin-bottom:20px} .footer-certif img{width:170px;padding:12px 14px;border-radius:4px; background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)} @media(max-width:560px){ .footer .brand img{height:64px} .footer-certif img{width:150px} }