/* ============================================================================= CHARTE FABRIKAA LEARNING ----------------------------------------------------------------------------- Fichier de reference unique de la charte graphique. DEUX FACONS DE L'UTILISER : 1. En production aujourd'hui - copier tout ce fichier dans Apparence » Personnaliser » CSS additionnel. Aucun fichier a envoyer sur le serveur, aucun theme a changer. 2. Le jour ou le theme enfant sera active - il est charge automatiquement par kadence-child/functions.php, et il n'y a plus rien a coller. Ne pas modifier la charte ailleurs que dans ce fichier : c'est lui qui fait foi. ----------------------------------------------------------------------------- POLICES : ce fichier declare les familles mais ne charge pas les fichiers. Pour qu'Oswald et Inter s'affichent, les selectionner dans Personnaliser » Typographie (Titres = Oswald, Corps = Inter), puis activer Personnaliser » General » Performance » "Load Google Fonts Locally". Les polices sont alors hebergees sur ton serveur : aucun appel a Google, donc pas de transfert d'adresses IP de tes visiteurs (conforme RGPD). A defaut seulement, decommenter les deux lignes ci-dessous et les placer tout en haut du CSS - mais elles font appel aux serveurs de Google a chaque visite, ce que le RGPD n'apprecie pas : @import url('/assets/fonts/oswald.css'); @import url('/assets/fonts/inter.css'); (Deux lignes plutot qu'une seule avec les deux familles : WordPress echappe le caractere esperluette dans le CSS additionnel, ce qui casserait l'URL.) ----------------------------------------------------------------------------- SOMMAIRE 1. Jetons de marque (couleurs + polices) 2. Mapping vers les variables Kadence 3. Typographie 4. Boutons et liens 5. Utilitaires de marque 6. Page d'accueil : bandeau et hero plein ecran 7. Portail e-learning 8. Page presentation 9. Mesure de lecture et pastille de confidentialite 10. Bandeau des trois offres ============================================================================= */ /* ----------------------------------------------------------------------------- 1. JETONS DE MARQUE -------------------------------------------------------------------------- */ :root { /* --- Couleurs officielles de la charte --- */ --fab-navy: #1A1A2E; /* Navy profond : titres, texte fort */ --fab-magenta: #E63770; /* Magenta vif : accent principal */ --fab-orange: #FF6B35; /* Orange dynamique : accent secondaire */ --fab-jaune: #FFD166; /* Jaune chaleureux : surlignage, badges */ --fab-violet: #7B2FBE; /* Violet creatif : blocs pleins */ --fab-creme: #F4F1EC; /* Fond creme : fond de page */ --fab-jaune-pale: #FFF3D1; /* Jaune pale : bandeaux de respiration */ /* --- Variantes derivees --- Le magenta officiel n'atteint que 4,08:1 sur blanc : suffisant pour un gros CTA, insuffisant pour du texte courant. Cette variante foncee monte a 5,4:1 sur blanc et 4,8:1 sur creme (WCAG AA) et sert aux liens et aux petits boutons. */ --fab-magenta-fonce: #C42C5D; --fab-orange-fonce: #E0521F; --fab-orange-profond: #B8480F; /* orange assez sombre pour porter du texte blanc */ --fab-violet-fonce: #63219C; /* --- Marge des cadres --- Valeur unique pour tous les blocs colores du site, sur les quatre cotes. Le plancher de 3 mm est la marge demandee ; au-dela, elle suit la largeur de l'ecran pour ne pas paraitre etriquee sur grand format. */ --fab-marge-bloc: clamp(3mm, 3vw, 3rem); /* --- Mesure de lecture --- Largeur maximale d'une ligne de texte. Au-dela d'environ 75 caracteres, l'oeil perd la ligne en revenant a la gauche. Seul le texte est limite : les fonds, eux, continuent d'occuper toute la largeur, si bien que le lecteur voit une bande unique et non une colonne posee dessus. */ /* Mesure de lecture. 60 et non 70 : l unite ch vaut la largeur du zero, plus large que la moyenne des lettres. Mesure au navigateur, 70ch donnait 86 a 89 signes par ligne, la ou 80 est le maximum recommande. A 60ch on en compte 74 a 76. */ --fab-mesure: 60ch; --fab-navy-80: #2E2E4A; /* texte courant */ --fab-navy-60: #55556E; /* texte secondaire */ --fab-navy-40: #8A8A9E; /* legendes, meta */ --fab-creme-fonce: #E4DED4; /* bordures, separateurs */ --fab-blanc: #FFFFFF; /* --- Polices --- Pour passer les titres en Anton : remplacer 'Oswald' par 'Anton' sur la ligne ci-dessous (un seul endroit a changer), et selectionner Anton dans Personnaliser » Typographie pour que le fichier de police soit charge. Les polices qui suivent Oswald sont des secours, pour le visiteur dont le navigateur ne recoit pas le fichier. Elles sont rangees de la plus proche a la plus lointaine en largeur, pour que la mise en page bouge le moins possible : Arial Narrow sur Windows et Mac, Roboto Condensed sur Android, les deux suivantes sur Linux. La vraie parade reste de servir Oswald depuis ton propre serveur (voir l en-tete du fichier). */ --fab-font-titre: 'Oswald', 'Arial Narrow', 'Roboto Condensed', 'Liberation Sans Narrow', 'Nimbus Sans Narrow', 'Haettenschweiler', sans-serif; --fab-font-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ----------------------------------------------------------------------------- 2. MAPPING VERS LES VARIABLES KADENCE ----------------------------------------------------------------------------- Kadence expose 15 emplacements de couleur. Tout le theme et les blocs Kadence consomment ces variables : les redefinir ici applique la charte partout (en-tete, pied de page, blocs, formulaires) d'un seul coup. -------------------------------------------------------------------------- */ :root { --global-palette1: var(--fab-magenta); /* 1 Accent */ --global-palette2: var(--fab-orange); /* 2 Accent alt */ --global-palette3: var(--fab-navy); /* 3 Texte le plus fort (titres) */ --global-palette4: var(--fab-navy-80); /* 4 Texte fort (corps) */ --global-palette5: var(--fab-navy-60); /* 5 Texte moyen */ --global-palette6: var(--fab-navy-40); /* 6 Texte discret */ --global-palette7: var(--fab-creme-fonce); /* 7 Fond appuye, bordures */ --global-palette8: var(--fab-creme); /* 8 Fond de section */ --global-palette9: var(--fab-blanc); /* 9 Blanc (cartes, surfaces) */ --global-palette10: var(--fab-violet); /* 10 Accent complementaire */ --global-palette9rgb: 255, 255, 255; /* Liens */ --global-palette-highlight: var(--fab-magenta-fonce); --global-palette-highlight-alt: var(--fab-orange-fonce); --global-palette-highlight-alt2: var(--fab-navy); /* Bouton principal : magenta fonce + texte blanc (5,4:1) */ --global-palette-btn: var(--fab-blanc); --global-palette-btn-bg: var(--fab-magenta-fonce); --global-palette-btn-hover: var(--fab-blanc); --global-palette-btn-bg-hover: var(--fab-violet); /* Bouton secondaire : orange + texte navy. L'orange ne porte pas le blanc (2,8:1 seulement) ; le texte navy y monte a 6:1. */ --global-palette-btn-sec: var(--fab-navy); --global-palette-btn-sec-bg: var(--fab-orange); --global-palette-btn-sec-hover: var(--fab-navy); --global-palette-btn-sec-bg-hover: var(--fab-jaune); /* Bouton contour */ --global-palette-btn-out: var(--fab-navy); --global-palette-btn-out-bg: transparent; --global-palette-btn-out-hover: var(--fab-blanc); --global-palette-btn-out-bg-hover: var(--fab-navy); } /* Fond de page blanc, d'un bord a l'autre. Kadence posait par defaut un rectangle blanc en retrait derriere le contenu : une fenetre sur la page, dans laquelle chaque section formait une boite de plus. Le contenu est passe en mode "non encadre" dans les reglages du theme, et le blanc occupe maintenant toute la largeur. Il ne reste que des bandes qui se succedent : blanc par defaut, colorees quand la section le demande. */ body, .site { background-color: var(--fab-blanc); } .content-bg, article.entry, .entry-content-wrap { background-color: transparent; box-shadow: none; } /* ----------------------------------------------------------------------------- 3. TYPOGRAPHIE ----------------------------------------------------------------------------- Titres en Oswald (condense, impactant), texte en Inter (lisible en petit corps et sur ecran). Oswald etant etroit, les titres sont montes d'un cran en taille et l'interlignage resserre. -------------------------------------------------------------------------- */ body, button, input, select, optgroup, textarea { font-family: var(--fab-font-texte); /* En rem et non en pixels : la taille suit le reglage du lecteur. Une valeur en pixels ignore qui a choisi d agrandir la police par defaut de son navigateur, et le texte reste petit pendant que les titres, eux, grandissent. 1.0625rem vaut 17 px au reglage par defaut. */ font-size: 1.0625rem; line-height: 1.65; color: var(--fab-navy-80); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .site-title, .entry-title, .widget-title, .kadence-title, .wp-block-kadence-advancedheading { font-family: var(--fab-font-titre); color: var(--fab-navy); font-weight: 400; letter-spacing: 0; text-wrap: balance; } h1, .entry-title { font-size: clamp(2.25rem, 1.55rem + 2.9vw, 3.75rem); line-height: 1.05; letter-spacing: -0.005em; } /* Cartes de la page Actualités : titre à la taille d'un h3, pas d'un h1 */ .loop-entry .entry-title { font-size: clamp(1.375rem, 1.15rem + 0.95vw, 1.875rem); line-height: 1.15; } /* Ordre des cartes : catégorie, titre, date, puis image, puis accroche. Le thème place l'image hors du bloc de texte ; on aplatit ce bloc pour pouvoir glisser l'image entre l'en-tête et l'extrait. */ .loop-entry { display: flex; flex-direction: column; } .loop-entry .entry-content-wrap { display: contents; } .loop-entry .entry-header { order: 1; padding: 2rem 2rem 0; } .loop-entry .post-thumbnail { order: 2; margin: 1.5rem 2rem 0; } .loop-entry .entry-summary { order: 3; margin: 0; padding: 1.25rem 2rem 2rem; } .loop-entry .entry-footer { order: 4; padding: 0 2rem 2rem; } h2 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem); line-height: 1.12; } h3 { font-size: clamp(1.375rem, 1.15rem + 0.95vw, 1.875rem); line-height: 1.2; } h4 { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem); line-height: 1.3; } h5, h6 { font-size: 1rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em; } /* Chapo / intro de section. La largeur de ligne leur vient de la mesure de lecture, section 9 : inutile de la repeter ici. */ .fab-chapo, .entry-content p.has-large-font-size { font-family: var(--fab-font-texte); font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.55; color: var(--fab-navy-60); font-weight: 400; } /* Surtitres et etiquettes */ .fab-surtitre { font-family: var(--fab-font-titre); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fab-magenta-fonce); } ::selection { background-color: var(--fab-jaune); color: var(--fab-navy); } /* ----------------------------------------------------------------------------- 4. BOUTONS ET LIENS -------------------------------------------------------------------------- */ a { color: var(--fab-magenta-fonce); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover, a:focus { color: var(--fab-violet); } .entry-content a:not(.button):not(.wp-block-button__link):not(.kb-button) { text-decoration: underline; } .button, .wp-block-button__link, .kb-button, input[type="submit"], button[type="submit"] { font-family: var(--fab-font-titre); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 4px; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .button:hover, .wp-block-button__link:hover, .kb-button:hover, input[type="submit"]:hover, button[type="submit"]:hover { transform: translateY(-1px); } /* Mouvement reduit : le bouton ne bouge plus au survol. */ @media (prefers-reduced-motion: reduce) { .button, .wp-block-button__link, .kb-button, input[type="submit"], button[type="submit"] { transition: none; } .button:hover, .wp-block-button__link:hover, .kb-button:hover, input[type="submit"]:hover, button[type="submit"]:hover { transform: none; } } /* Anneau de focus, en deux tons. Un anneau d'une seule couleur echoue toujours quelque part : le violet tenait 6,2:1 sur creme mais 2,4:1 sur navy et 1,0:1 sur violet, soit invisible. Ici le halo jaune se voit sur les fonds sombres (11,8:1) et le trait navy sur les fonds clairs (15,1:1) : aucun fond ne peut avaler les deux. Seuil requis : 3:1 (RGAA 10.7, WCAG 2.4.11). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .button:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--fab-navy); outline-offset: 3px; box-shadow: 0 0 0 3px var(--fab-jaune); } /* ----------------------------------------------------------------------------- 5. UTILITAIRES DE MARQUE ----------------------------------------------------------------------------- Classes a poser sur un bloc via "Avance » Classe(s) CSS additionnelle(s)". -------------------------------------------------------------------------- */ /* Fonds de section, en bandeaux pleine largeur. La couleur traverse l'ecran d'un bord a l'autre au lieu de dessiner un rectangle pose dans la page : plus de cadre dans un cadre. Le contenu, lui, reste dans la colonne de texte commune a toutes les sections, colorees ou non, grace a la mise en page "contenu limite" des blocs WordPress. */ .fab-fond-creme, .fab-fond-navy, .fab-fond-violet, .fab-fond-jaune, .fab-fond-jaune-pale { /* Le bloc garde exactement la largeur de la colonne de texte : son contenu reste donc aligne sur celui des sections sans couleur. C'est l'ombre portee qui etale la couleur jusqu'aux bords de l'ecran, et le rognage vertical l'empeche de deborder en hauteur. Une largeur en 100vw aurait decale le tout de la largeur de la barre de defilement. */ /* Resserre pour que les six cartes tiennent dans un ecran : elles demandaient 1 220 px pour 860 disponibles. */ padding: clamp(1.75rem, 3.5vw, 3rem) 0; clip-path: inset(0 -100vmax); } .fab-fond-creme { background-color: var(--fab-creme); box-shadow: 0 0 0 100vmax var(--fab-creme); } .fab-fond-navy { background-color: var(--fab-navy); box-shadow: 0 0 0 100vmax var(--fab-navy); } .fab-fond-violet { background-color: var(--fab-violet); box-shadow: 0 0 0 100vmax var(--fab-violet); } .fab-fond-jaune { background-color: var(--fab-jaune); box-shadow: 0 0 0 100vmax var(--fab-jaune); } .fab-fond-jaune-pale { background-color: var(--fab-jaune-pale); box-shadow: 0 0 0 100vmax var(--fab-jaune-pale); } .fab-fond-jaune-pale, .fab-fond-jaune-pale h1, .fab-fond-jaune-pale h2, .fab-fond-jaune-pale h3, .fab-fond-jaune-pale h4, .fab-fond-jaune-pale h5, .fab-fond-jaune-pale h6 { color: var(--fab-navy); } .fab-fond-navy, .fab-fond-navy h1, .fab-fond-navy h2, .fab-fond-navy h3, .fab-fond-navy h4, .fab-fond-navy h5, .fab-fond-navy h6, .fab-fond-violet, .fab-fond-violet h1, .fab-fond-violet h2, .fab-fond-violet h3, .fab-fond-violet h4, .fab-fond-violet h5, .fab-fond-violet h6 { color: var(--fab-blanc); } .fab-fond-jaune, .fab-fond-jaune h1, .fab-fond-jaune h2, .fab-fond-jaune h3, .fab-fond-jaune h4, .fab-fond-jaune h5, .fab-fond-jaune h6 { color: var(--fab-navy); } .fab-fond-navy a, .fab-fond-violet a { color: var(--fab-jaune); } /* Sur fond sombre, le surtitre magenta ne tient que 3,1:1. Le jaune y monte a 11,8:1 sur navy et 4,9:1 sur violet. */ .fab-fond-navy .fab-surtitre, .fab-fond-violet .fab-surtitre { color: var(--fab-jaune); } /* Le filet d'accent reste lisible sur fond sombre. */ .fab-fond-navy .fab-filet::after, .fab-fond-violet .fab-filet::after { background-color: var(--fab-jaune); } /* Mot surligne dans un titre */ .fab-surligne { background-image: linear-gradient(var(--fab-jaune), var(--fab-jaune)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 0.38em; padding: 0 0.06em; } /* Badge */ .fab-badge { display: inline-block; font-family: var(--fab-font-titre); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fab-blanc); background-color: var(--fab-violet); border-radius: 999px; padding: 0.3em 0.9em; } /* Liste de convictions, sur fond sombre comme sur fond clair. */ .fab-convictions { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem 2.5rem; } @media (min-width: 48rem) { .fab-convictions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fab-convictions li { position: relative; padding-left: 1.7rem; line-height: 1.45; } .fab-convictions li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.6rem; height: 0.6rem; background-color: var(--fab-jaune); border-radius: 2px; } /* Filet d'accent sous un titre de section */ .fab-filet::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: 0.75rem; background-color: var(--fab-orange); border-radius: 2px; } /* ----------------------------------------------------------------------------- 6. PAGE D'ACCUEIL : BANDEAU ET HERO PLEIN ECRAN ----------------------------------------------------------------------------- Structure inspiree du Musee de l'Homme : un bandeau de navigation pleine largeur, puis une fenetre qui occupe tout l'ecran, video a gauche et panneau de texte a droite. La hauteur du hero se calcule en retirant la hauteur du bandeau a celle de l'ecran. Si ton bandeau est plus haut ou plus bas, ajuste --fab-bandeau. -------------------------------------------------------------------------- */ :root { /* Hauteur du bandeau, mesuree sur le site : 7rem avec le titre en texte. Si tu mets un logo image plus haut, augmente cette valeur d'autant. */ --fab-bandeau: 7rem; } /* --- Bandeau de navigation --- */ /* Rangee utilitaire (portail e-learning, langue, recherche). Aucun filet sous cette rangee : Kadence en pose deja un, et le mien s'ajoutait au sien. Deux traits gris au-dessus du logo, ce n'etait pas une intention de design. */ .site-top-header-wrap .site-header-row, .site-top-header-inner-wrap { border-top: 0; border-bottom: 0; } /* Bouton du portail : un cran au-dessus de la taille "small" de Kadence, pour qu'il se voie sans dominer la navigation. */ .site-header-item .header-button, .site-header-item .header-button.button-size-small { font-size: 0.9375rem; padding: 0.62em 1.5em; line-height: 1.25; } /* Le titre de page ne s'affiche plus : l'onglet du menu le dit deja, et le repeter en haut de chaque page alourdit sans rien apprendre. Il reste dans le code, lu par les synthèses vocales et les moteurs de recherche : une page sans aucun titre de premier niveau serait desorientante pour qui navigue a l'oreille. */ .entry-hero-container-inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Sur l'accueil, il est retire pour de bon : le hero porte deja le titre de premier niveau, deux se feraient concurrence. Meme chose sur les pages d'offre : le theme y affichait ONBOARDING juste au-dessus du titre Onboarding Express, soit deux h1 et le meme mot deux fois. Les 56 px rendus font remonter le bouton d'appel au-dessus du pli sur un telephone. On reconnait ces pages a leur conteneur .fbk plutot qu'a leur numero : une page d'offre creee demain sera couverte sans retoucher cette regle. */ .home .entry-hero-container-inner, .home .page-title, body:has(.fbk) .entry-hero-container-inner, body:has(.fbk) .page-title { display: none; } .home .content-area, .home .site-main, .home .entry-content-wrap { padding-top: 0; margin-top: 0; } /* --- Hero plein ecran --- */ .fab-hero { /* Sort de la colonne de contenu pour occuper toute la largeur, ou que le bloc soit place dans la page. */ position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); display: grid; grid-template-columns: 1fr; background-color: var(--fab-navy); color: var(--fab-blanc); overflow: hidden; } @media (min-width: 60rem) { .fab-hero { grid-template-columns: 1fr 1fr; min-height: calc(100svh - var(--fab-bandeau)); } } /* --- Moitie gauche : la video --- */ .fab-hero__media { position: relative; overflow: hidden; /* Le cadre epouse le format de la video, a toutes les largeurs. Sans cette contrainte il s'etire a la hauteur du texte et c'est lui, et non la video, qui decide du rognage. */ aspect-ratio: 1 / 1; height: auto; /* Aplat de marque visible tant que la video n'est pas en place, et pendant son chargement. */ background-image: linear-gradient(140deg, var(--fab-violet) 0%, var(--fab-magenta) 48%, var(--fab-orange) 100%); } @media (min-width: 60rem) { .fab-hero__media { /* La colonne de texte etant la plus haute, le carre se centre au lieu de se caler en haut. Le plafond evite qu'un moniteur tres large ne rende le carre plus haut que la fenetre : la demi- largeur y depasse la hauteur disponible. */ align-self: center; justify-self: center; width: 100%; max-width: calc(100svh - var(--fab-bandeau)); } } /* Le cadre porte deja le format de la video : contain ne retranche donc rien aujourd'hui. C'est un filet pour le jour ou le fichier changera de format, ou la video resterait entiere sur l'aplat de marque. */ .fab-hero__video { position: absolute; inset: 0; display: block; z-index: 1; width: 100%; height: 100%; object-fit: contain; } /* Etiquette d'attente, a retirer une fois la vraie video en ligne. */ .fab-hero__attente { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 1.5rem; text-align: center; font-family: var(--fab-font-titre); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fab-blanc); text-shadow: 0 1px 12px rgba(26, 26, 46, 0.55); } /* Commande de pause. Obligatoire des qu'un media demarre seul et dure plus de cinq secondes (RGAA 4.1 critere 4.9, WCAG 2.2.2). */ .fab-hero__pause { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; font-family: var(--fab-font-titre); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fab-blanc); background-color: rgba(26, 26, 46, 0.86); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; cursor: pointer; } .fab-hero__pause:hover { background-color: var(--fab-navy); } /* Pictogramme pause : deux barres jaunes. */ .fab-hero__pause::before { content: ""; width: 0.6rem; height: 0.7rem; background-image: linear-gradient( to right, var(--fab-jaune) 0 36%, transparent 36% 64%, var(--fab-jaune) 64% 100% ); } /* Video arretee : le pictogramme devient un triangle de lecture. */ .fab-hero__pause[aria-pressed="true"]::before { background-image: none; background-color: var(--fab-jaune); clip-path: polygon(0 0, 100% 50%, 0 100%); } /* --- Moitie droite : le discours --- */ .fab-hero__panneau { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.5rem; padding: clamp(2.25rem, 4vw, 4.5rem) clamp(1.5rem, 4vw, 4rem); background-color: var(--fab-navy); } /* Sur grand ecran, la colonne de texte cesse de suivre la fenetre. Sans ce plafond elle atteignait 115 signes par ligne sur un 2560 px, contre 54 sur un portable : les tailles ne bougeaient pas, mais le titre paraissait perdu et le texte minuscule. 34rem tient une cinquantaine de signes, la meme mesure que sur un portable. Le bloc se centre alors dans la moitie navy plutot que de rester colle a gauche. La largeur imposee a chaque bloc evite qu un element court, comme le surtitre, ne se centre tout seul. Les enfants sont nommes un par un : un selecteur enfant demanderait un chevron, que WordPress echappe dans le CSS additionnel. */ @media (min-width: 60rem) { .fab-hero__panneau { align-items: center; } .fab-hero__panneau .fab-surtitre, .fab-hero__titre, .fab-hero__filet, .fab-hero__points { width: 100%; max-width: 34rem; } } /* Plus grand et plus epais que les autres surtitres du site : ici il ouvre la page et doit se voir, alors qu ailleurs il n est qu une etiquette de section. La taille suit la fenetre pour toucher 21 px sur un telephone de 375 et 24 px sur un 1280, puis s arrete a 26. Elle etait fixe a 17 px, ce qui la laissait loin derriere un titre montant a 46 px. */ .fab-hero__panneau .fab-surtitre { margin: 0; font-size: clamp(1.3125rem, 1.235rem + 0.33vw, 1.625rem); font-weight: 600; color: var(--fab-jaune); } .fab-hero__titre { margin: 0; color: var(--fab-blanc); /* Calibre pour une accroche longue (une quinzaine de mots). Pour un titre court, on peut remonter la valeur haute jusqu'a 3.5rem. La valeur haute est atteinte vers 1540 px de large, juste apres que la colonne ait atteint son propre plafond : au-dela, titre et colonne sont tous deux fixes, donc leur rapport ne se degrade plus. */ font-size: clamp(1.75rem, 1.05rem + 1.9vw, 2.875rem); line-height: 1.06; /* Capitales, comme la reference. Supprimer cette ligne pour revenir a une casse normale. */ text-transform: uppercase; } .fab-hero__filet { width: 100%; margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.3); } .fab-hero__points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.85rem; } /* 19 px et non 17 : le titre du hero monte jusqu a 46 px, et un texte laisse a la taille courante parait alors ecrase. Le rapport titre sur texte revient a 2,4. */ .fab-hero__points li { position: relative; padding-left: 1.7rem; color: #D9D6E2; font-size: 1.1875rem; line-height: 1.5; } .fab-hero__points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.6rem; height: 0.6rem; background-color: var(--fab-orange); border-radius: 2px; } /* Fleche de defilement, sous la video. Masquee sur petit ecran, ou elle chevaucherait la commande de pause et n'apporte rien : on fait defiler. */ .fab-hero__defiler { display: none; position: absolute; left: 50%; bottom: 1.5rem; z-index: 2; width: 2.75rem; height: 2.75rem; transform: translateX(-50%); border-radius: 50%; background-color: rgba(26, 26, 46, 0.86); border: 1px solid rgba(255, 255, 255, 0.4); } .fab-hero__defiler::after { content: ""; position: absolute; left: 50%; top: 45%; width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--fab-blanc); border-bottom: 2px solid var(--fab-blanc); transform: translate(-50%, -50%) rotate(45deg); } @media (min-width: 60rem) { .fab-hero__defiler { display: block; } } /* Le texte reserve aux lecteurs d'ecran. */ .fab-hero .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* La video, elle, est mise en pause par le script du bloc quand le visiteur a demande un mouvement reduit. */ /* ----------------------------------------------------------------------------- 7. PORTAIL E-LEARNING ----------------------------------------------------------------------------- Le plugin fabrikaa-portail a sa propre feuille de style, anterieure a la charte. Cette section la corrige sans toucher aux fichiers du plugin : le CSS additionnel est imprime apres, et chaque selecteur ci-dessous est plus specifique que celui du plugin. Elle traite les constats 01, 02, 03, 10 et 11 du diagnostic RGAA. Ce qu'elle ne peut PAS traiter, parce que c'est du PHP et non du style : les emoji dans les titres, l'attribut autocomplete du champ e-mail, le role d'alerte du message d'erreur, et l'aide de format persistante. -------------------------------------------------------------------------- */ /* --- Focus : annuler le "outline: none" du plugin --- */ .fabrikaa-portail-container .fabrikaa-form-group input:focus, .fabrikaa-portail-container .fabrikaa-form-group input:focus-visible, .fabrikaa-portail-container .fabrikaa-btn:focus-visible, .fabrikaa-portail-container .fabrikaa-logout-btn:focus-visible { outline: 3px solid var(--fab-navy); outline-offset: 3px; box-shadow: 0 0 0 3px var(--fab-jaune); border-color: var(--fab-navy); } /* --- Contrastes : les trois echecs mesures --- */ /* Le degrade violet/bleu ne portait le blanc qu'a 3,66:1 sur son extremite gauche. Le magenta fonce le porte a 5,4:1 sur toute sa surface. */ .fabrikaa-portail-container .fabrikaa-btn, .fabrikaa-portail-container button.fabrikaa-btn { background: var(--fab-magenta-fonce); font-family: var(--fab-font-titre); font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; } .fabrikaa-portail-container .fabrikaa-btn:hover { background: var(--fab-violet); } /* Blanc sur rouge : 3,82:1. Blanc sur navy : 17,1:1. */ .fabrikaa-portail-container .fabrikaa-logout-btn, .fabrikaa-portail-container button.fabrikaa-logout-btn { background: var(--fab-navy); font-size: 0.875rem; } .fabrikaa-portail-container .fabrikaa-logout-btn:hover { background: var(--fab-magenta-fonce); } /* Gris #999 en 11 px : 2,85:1. Ce gris-ci : 7,2:1, et deux pixels de plus. */ .fabrikaa-portail-container .fabrikaa-stat-card h3 { color: var(--fab-navy-60); font-size: 0.8125rem; letter-spacing: 0.08em; } /* --- Confort de lecture --- Le portail travaillait en 13 et 14 px. Ses utilisateurs sont souvent en exterieur, parfois peu a l'aise avec un ecran. */ .fabrikaa-portail-container, .fabrikaa-portail-container p, .fabrikaa-portail-container label, .fabrikaa-portail-container input { font-family: var(--fab-font-texte); font-size: 1rem; } .fabrikaa-portail-container label { font-weight: 600; color: var(--fab-navy); } /* Aide de saisie persistante, sous le libelle. Elle remplace le texte grise du champ, qui disparaissait des la premiere frappe. 7,2:1 sur blanc. */ .fabrikaa-portail-container .fabrikaa-aide { margin: 0.15rem 0 0.45rem; font-size: 0.9375rem; line-height: 1.4; color: var(--fab-navy-60); } .fabrikaa-portail-container input { padding: 0.75em 0.9em; border: 2px solid var(--fab-creme-fonce); border-radius: 4px; } /* --- Mise a la charte --- */ .fabrikaa-portail-container h2, .fabrikaa-portail-container h3 { font-family: var(--fab-font-titre); color: var(--fab-navy); } .fabrikaa-portail-container .fabrikaa-login-panel, .fabrikaa-portail-container .fabrikaa-dashboard-panel { background: var(--fab-blanc); border: 1px solid var(--fab-creme-fonce); border-radius: 4px; } .fabrikaa-portail-container .fabrikaa-error { background: #FBE9EF; border-left: 4px solid var(--fab-magenta-fonce); color: var(--fab-navy); border-radius: 0 4px 4px 0; padding: 0.9em 1.1em; } /* ----------------------------------------------------------------------------- 8. PAGE PRESENTATION -------------------------------------------------------------------------- */ /* La marque personnelle de chaque associee, en fin de portrait : detachee du texte courant sans en faire un encart. */ .fab-marque-perso { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--fab-orange); font-size: 0.9375rem; color: var(--fab-navy-60); } .fab-marque-perso a { font-weight: 600; } /* Le texte reserve aux lecteurs d'ecran, disponible sur tout le site. Il sert notamment a annoncer l'ouverture d'un lien dans une nouvelle fenetre, que rien ne signale visuellement (RGAA 13.1). */ .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- La citation --- Serif italique, en violet sur le blanc de la page, entre guillemets francais. La pile est entierement systemique : Georgia est presente sur pratiquement toutes les machines et les suivantes couvrent le reste. Rien a telecharger, donc aucun appel externe, et surtout un rendu identique partout, ce que la version manuscrite ne garantissait pas. Le navy tient 17:1 sur blanc. */ .fab-citation { max-width: 26ch; margin: 0 auto; font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif; font-size: clamp(1.5rem, 1.05rem + 2vw, 2.5rem); font-style: italic; font-weight: 400; line-height: 1.3; text-align: center; color: var(--fab-navy); text-wrap: balance; } /* --- Les deux profils --- Une carte blanche et sobre par personne, puis le parcours qui se deplie sous les deux, dans un panneau pleine largeur. Le texte long y respire, au lieu d etre enferme au dos d une carte a la hauteur contrainte. Aucun JavaScript : trois boutons radio portent l etat, les libelles les commandent, et le panneau s affiche par selecteur voisin. Le troisieme bouton, sans panneau, referme. */ .fab-profils { margin-block-start: clamp(1.75rem, 3vw, 2.5rem); } /* Les boutons restent dans le flux pour etre atteignables au clavier, mais n occupent aucune place visible. */ .fab-profils__bascule { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .fab-profils__cartes { display: grid; gap: 1.75rem; } @media (min-width: 44rem) { .fab-profils__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } /* --- La carte --- */ .fab-profil { display: flex; flex-direction: column; align-items: flex-start; padding: 1.75rem; border: 1px solid var(--fab-creme-fonce); border-radius: 6px; background-color: var(--fab-blanc); } /* Taille fixe, donc identique d une carte a l autre quelle que soit le format du fichier d origine. Le recadrage est decale vers le haut : sur un portrait vertical, un recadrage centre coupe le visage, qui se trouve rarement au milieu de l image. Sur une photo deja carree, cette valeur n a aucun effet. */ .fab-profil__photo { display: block; width: 5.5rem; height: 5.5rem; margin-bottom: 1.1rem; border-radius: 50%; object-fit: cover; object-position: 50% 25%; background-color: var(--fab-creme-fonce); } .fab-profil__nom { margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.15; } .fab-profil__role { max-width: none; margin: 0.4rem 0 0; font-family: var(--fab-font-titre); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fab-magenta-fonce); } .fab-profil__bouton { margin-top: 1.25rem; padding: 0.6em 1.3em; border: 2px solid var(--fab-magenta-fonce); border-radius: 4px; background-color: var(--fab-magenta-fonce); color: var(--fab-blanc); font-family: var(--fab-font-titre); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; } .fab-profil__bouton:hover { background-color: var(--fab-violet); border-color: var(--fab-violet); } /* --- Le panneau deplie --- */ .fab-detail { display: none; margin-top: 1.75rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 6px; background-color: var(--fab-blanc); /* L ombre le detache de la page : il flotte au-dessus plutot que de s inserer dans la suite du texte. */ box-shadow: 0 10px 34px rgba(26, 26, 46, 0.16); border-top: 4px solid var(--fab-magenta); } #fab-profil-aurelie:checked ~ .fab-profils__details #fab-detail-aurelie, #fab-profil-alice:checked ~ .fab-profils__details #fab-detail-alice { display: block; } .fab-detail__nom { margin: 0 0 1.1rem; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.1; } .fab-detail p { max-width: var(--fab-mesure); font-size: 1rem; line-height: 1.6; } .fab-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 1.5rem; } .fab-detail__lien { display: inline-block; padding: 0.6em 1.3em; border: 2px solid var(--fab-navy); border-radius: 4px; background-color: var(--fab-navy); color: var(--fab-creme); font-family: var(--fab-font-titre); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; } .fab-detail__lien:hover, .fab-detail__lien:focus-visible { background-color: var(--fab-magenta-fonce); border-color: var(--fab-magenta-fonce); color: var(--fab-blanc); } .fab-detail__fermer { padding: 0.6em 1.3em; border: 2px solid var(--fab-navy-40); border-radius: 4px; font-family: var(--fab-font-titre); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fab-navy); cursor: pointer; } .fab-detail__fermer:hover { border-color: var(--fab-navy); background-color: var(--fab-creme); } /* Le bouton radio est invisible : c est le libelle qui doit montrer le focus, sans quoi on navigue au clavier sans savoir ou l on est. */ .fab-profils__bascule:focus-visible ~ .fab-profils__cartes .fab-profil__bouton, .fab-profils__bascule:focus-visible ~ .fab-profils__details .fab-detail__fermer { outline: 3px solid var(--fab-navy); outline-offset: 3px; box-shadow: 0 0 0 3px var(--fab-jaune); } /* ----------------------------------------------------------------------------- 9. MESURE DE LECTURE ET PASTILLE DE CONFIDENTIALITE -------------------------------------------------------------------------- */ /* Seul le texte courant est limite en largeur. Les titres gardent la leur, et surtout les fonds ne bougent pas : la bande reste d'un bord a l'autre. */ .entry-content p, .entry-content li, .entry-content .fab-chapo { max-width: var(--fab-mesure); } /* A l'interieur d'une colonne, la mesure est deja plus etroite que la limite : inutile de la contraindre une seconde fois. */ .wp-block-column p, .wp-block-column li, .fab-hero__points li, .fab-convictions li { max-width: none; } /* --- Pastille de confidentialite --- Un raccourci permanent vers la politique de confidentialite, en bas a gauche. Etiquettee plutot qu'en pictogramme seul : un rond de couleur sans texte oblige a deviner ou il mene. */ .fab-pastille { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7em 1.15em; border-radius: 999px; background-color: var(--fab-violet); color: var(--fab-blanc); font-family: var(--fab-font-titre); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 22px rgba(26, 26, 46, 0.28); transition: background-color 0.18s ease; } .fab-pastille:hover, .fab-pastille:focus-visible { background-color: var(--fab-navy); color: var(--fab-blanc); } .fab-pastille__point { width: 0.6rem; height: 0.6rem; border-radius: 50%; background-color: var(--fab-jaune); flex: 0 0 auto; } @media (prefers-reduced-motion: reduce) { .fab-pastille { transition: none; } } /* ----------------------------------------------------------------------------- 10. BANDEAU DES TROIS OFFRES ----------------------------------------------------------------------------- Trois colonnes espacees. Chacune s'ouvre sur un bandeau de couleur qui porte le nom de l'offre, puis le texte se poursuit sur le blanc de la page. La progression jaune, orange, magenta suit la chronologie des trois offres. Le texte des bandeaux est en navy et non en blanc : sur ces trois teintes vives, le blanc ne tiendrait que 1,4 a 4,1:1, alors que le navy atteint 11,8 sur le jaune, 6,0 sur l'orange et 4,2 sur le magenta. Seul le titre, en gros corps, est pose sur le magenta ; tout ce qui est en petit corps reste sur le blanc. -------------------------------------------------------------------------- */ .fab-offres { display: grid; gap: 2rem; } @media (min-width: 60rem) { .fab-offres { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 0 2rem; } .fab-offre { display: grid; grid-template-rows: subgrid; grid-row: span 2; } } .fab-offre__entete { display: flex; align-items: center; min-height: 7.5rem; padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem); border-radius: 14px; color: var(--fab-navy); } .fab-offre:nth-child(1) .fab-offre__entete { background-color: var(--fab-jaune); } .fab-offre:nth-child(2) .fab-offre__entete { background-color: var(--fab-orange); } .fab-offre:nth-child(3) .fab-offre__entete { background-color: var(--fab-magenta); } .fab-offre__titre { margin: 0; color: var(--fab-navy); font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); line-height: 1.1; } .fab-offre__corps { display: flex; flex-direction: column; padding: 1.75rem clamp(1.25rem, 2.5vw, 2rem) 0; } .fab-offre p { max-width: none; font-size: 1rem; line-height: 1.6; } .fab-offre .fab-surtitre { margin: 0 0 0.9rem; } .fab-offre:nth-child(1) .fab-surtitre { color: var(--fab-orange-profond); } .fab-offre:nth-child(2) .fab-surtitre { color: var(--fab-orange-profond); } .fab-offre:nth-child(3) .fab-surtitre { color: var(--fab-magenta-fonce); } .fab-offre__accroche { font-weight: 600; color: var(--fab-navy); } /* Le lien est pousse en bas : les trois se retrouvent alignes malgre des textes de longueurs inegales. */ .fab-offre__lien { margin-top: auto; padding-top: 1.5rem; font-family: var(--fab-font-titre); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.3em; color: var(--fab-magenta-fonce); } .fab-offre__lien:hover, .fab-offre__lien:focus-visible { color: var(--fab-navy); } .fab-offre__fleche { display: inline-block; margin-right: 0.35rem; } /* --- Apparition au defilement --- Aucun JavaScript : l'animation est pilotee par la position de l'element dans la fenetre. Les navigateurs qui ne connaissent pas encore cette mecanique affichent simplement le contenu, sans animation ni contenu masque : c'est le role du @supports. Et personne n'a de mouvement impose s'il a demande a s'en passer dans ses reglages systeme. */ @keyframes fab-apparition { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .fab-offre__entete, .fab-offre__corps { animation: fab-apparition linear both; animation-timeline: view(); } /* Les trois colonnes entrent l'une apres l'autre, et dans chacune le bandeau precede son texte. Les plages se terminent tot dans le defilement : le chevron du hero amene directement ici, et la cascade doit etre achevee a l atterrissage, pas figee a mi-course. */ .fab-offre:nth-child(1) .fab-offre__entete { animation-range: entry 0% cover 14%; } .fab-offre:nth-child(1) .fab-offre__corps { animation-range: entry 6% cover 18%; } .fab-offre:nth-child(2) .fab-offre__entete { animation-range: entry 8% cover 20%; } .fab-offre:nth-child(2) .fab-offre__corps { animation-range: entry 14% cover 24%; } .fab-offre:nth-child(3) .fab-offre__entete { animation-range: entry 16% cover 26%; } .fab-offre:nth-child(3) .fab-offre__corps { animation-range: entry 22% cover 30%; } } } /* ============================================================ 11. DEUX COLONNES DE TEXTE ============================================================ Un intertitre pleine largeur, puis le propos reparti en deux colonnes. En dessous de 48rem les colonnes se remettent l une sous l autre : l ordre de lecture reste celui du code. */ .fab-duo { display: grid; gap: 2rem; margin-top: 2rem; } @media (min-width: 48rem) { .fab-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); } } /* La colonne impose deja sa largeur de lecture : la mesure globale n a plus rien a limiter ici. */ .fab-duo p { max-width: none; } .fab-duo__col p:first-child { margin-top: 0; } /* Les cartes partagent desormais le bandeau creme du titre : c est cette marge, et non le bord entre deux bandeaux, qui les en separe. WordPress pose un margin-block-start de 24px sur tout bloc suivant un autre, avec une specificite superieure a une simple classe. La classe repetee suffit a passer devant, sans dependre d un ancetre. */ .fab-offres.fab-offres { margin-block-start: clamp(2rem, 4vw, 3rem); } .fab-duo.fab-duo { margin-block-start: clamp(1.75rem, 3vw, 2.5rem); } /* Le bandeau des offres respire davantage par le bas : la section suivante commence sans fond colore, donc c est ce seul creux qui separe les cartes de « Par ou commencer ? ». */ #offres { padding-block-end: clamp(4.5rem, 9vw, 8rem); } /* Les quatre situations de travail : une liste sans puces, chaque ligne detachee, pour qu on lise quatre personnes et non un inventaire. */ .fab-situations { margin: 0; padding: 0; list-style: none; } .fab-situations li { max-width: none; padding: 0.75rem 0 0.75rem 1.25rem; border-left: 3px solid var(--fab-orange); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.45; } .fab-situations li + li { margin-top: 0.85rem; } /* Le chapo a une couleur adoucie, pensee pour du texte sur fond clair. Posee sur un bandeau sombre elle tombe a 2,4:1, soit sous le seuil. Sur ces fonds il reprend donc la teinte du texte courant. */ .fab-fond-navy .fab-chapo, .fab-fond-violet .fab-chapo { color: var(--fab-creme); } /* La voie de secours sous un bouton : ecrire plutot que prendre rendez-vous. Elle reste discrete pour ne pas concurrencer l appel principal, sans descendre sous le seuil de lisibilite. */ .fab-alternative { margin-top: 1.1rem; font-size: 0.9375rem; } /* ============================================================ 12. PAGE NOS SERVICES ============================================================ */ /* La promesse ouvre la page a la place du titre d onglet, qui reste dans le code pour la navigation par titres mais ne se voit pas. */ .fab-promesse { /* Les trois verbes tiennent sur une seule ligne des que la place le permet : la taille suit la largeur disponible plutot qu une valeur fixe qui obligerait a passer a la ligne. En dessous, la phrase se replie normalement. */ max-width: none; font-size: clamp(1.75rem, 4.6vw, 3.5rem); line-height: 1.05; } @media (min-width: 60rem) { .fab-promesse { white-space: nowrap; } } /* --- Les mots cles en cartographie --- Dans l esprit du graphe d Obsidian : des noeuds relies par des liens fins, sur un fond sombre. Les traits sont en SVG, purement decoratifs et retires de l arbre d accessibilite. Les termes restent du vrai texte HTML : ils se selectionnent, se traduisent, et suivent la taille de police du visiteur. Chaque noeud porte ses coordonnees en pourcentage, et les traits visent les memes : la carte se deforme avec le cadre sans se disloquer. */ .fab-constellation { position: relative; margin: 2.5rem 0 0; padding: 1.5rem; border-radius: 10px; background-color: var(--fab-navy); /* Une lueur froide au centre, comme un fond de ciel. */ background-image: radial-gradient(ellipse at 40% 45%, rgba(123, 47, 190, 0.30) 0%, rgba(26, 26, 46, 0) 62%); overflow: hidden; } .fab-constellation__liens { position: absolute; inset: 1.5rem; width: calc(100% - 3rem); height: calc(100% - 3rem); stroke: rgba(244, 241, 236, 0.28); stroke-width: 1px; } .fab-constellation__noeuds { position: relative; margin: 0; padding: 0; list-style: none; /* La hauteur du cadre : c est elle qui donne son amplitude a la carte. */ height: 26rem; } .fab-noeud { position: absolute; left: var(--x); top: var(--y); translate: -50% 0; max-width: 11rem; padding-top: 1.15rem; text-align: center; font-family: var(--fab-font-titre); font-size: 0.9375rem; font-weight: 500; line-height: 1.25; color: #D9D6E2; } .fab-noeud--majeur { max-width: 13rem; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); color: var(--fab-blanc); } /* Le point du noeud, centre sur les coordonnees que visent les traits. */ .fab-noeud::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% -50%; width: 0.6rem; height: 0.6rem; border-radius: 50%; background-color: var(--fab-magenta); box-shadow: 0 0 0 4px rgba(230, 55, 112, 0.18); } .fab-noeud--majeur::before { width: 0.95rem; height: 0.95rem; } .fab-noeud:nth-child(2)::before { background-color: var(--fab-orange); box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.18); } .fab-noeud:nth-child(3)::before { background-color: var(--fab-jaune); box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.20); } .fab-noeud:nth-child(4)::before { background-color: var(--fab-violet); box-shadow: 0 0 0 5px rgba(123, 47, 190, 0.28); } .fab-noeud:nth-child(5)::before { background-color: var(--fab-jaune); box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.20); } .fab-noeud:nth-child(6)::before { background-color: var(--fab-orange); box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.18); } .fab-noeud:nth-child(7)::before { background-color: var(--fab-violet); box-shadow: 0 0 0 4px rgba(123, 47, 190, 0.24); } .fab-noeud:nth-child(8)::before { background-color: var(--fab-magenta); box-shadow: 0 0 0 4px rgba(230, 55, 112, 0.18); } /* --- L allumage --- Les noeuds s eclairent un a un a l ouverture de la page, dans un ordre qui n est pas celui de la lecture. Le remplissage est « backwards » : l etat masque ne vaut que pendant le retard. Si l animation ne part pas, pour quelque raison que ce soit, les termes restent lisibles. */ @media (prefers-reduced-motion: no-preference) { @keyframes fab-allumage { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } } @keyframes fab-trace { from { opacity: 0; } to { opacity: 1; } } .fab-noeud { animation: fab-allumage 0.7s ease-out backwards; } .fab-constellation__liens { animation: fab-trace 1.4s ease-out 0.5s backwards; } .fab-noeud:nth-child(1) { animation-delay: 0.1s; } .fab-noeud:nth-child(2) { animation-delay: 0.55s; } .fab-noeud:nth-child(3) { animation-delay: 0.28s; } .fab-noeud:nth-child(4) { animation-delay: 0.82s; } .fab-noeud:nth-child(5) { animation-delay: 0.4s; } .fab-noeud:nth-child(6) { animation-delay: 0.95s; } .fab-noeud:nth-child(7) { animation-delay: 0.66s; } .fab-noeud:nth-child(8) { animation-delay: 1.08s; } } /* --- Petits ecrans --- La carte n a plus la place de se deployer : les noeuds reprennent le fil du texte, en liste simple. Les traits disparaissent, ils ne relieraient plus rien de coherent. */ @media (max-width: 52rem) { .fab-constellation__liens { display: none; } .fab-constellation__noeuds { height: auto; display: flex; flex-wrap: wrap; gap: 1.1rem 1.75rem; } .fab-noeud { position: static; translate: none; max-width: none; padding: 0 0 0 1.1rem; text-align: left; } .fab-noeud::before { left: 0; top: 0.55em; translate: 0 0; } } /* --- Les quatre portes d entree par probleme --- */ .fab-portes { display: grid; gap: 1.75rem; margin-block-start: clamp(1.75rem, 3vw, 2.5rem); } @media (min-width: 48rem) { .fab-portes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 4vw, 3rem); } } .fab-porte { display: flex; flex-direction: column; padding-left: 1.5rem; border-left: 4px solid var(--fab-magenta); } .fab-porte:nth-child(2) { border-left-color: var(--fab-orange); } .fab-porte:nth-child(3) { border-left-color: var(--fab-jaune); } .fab-porte:nth-child(4) { border-left-color: var(--fab-violet); } .fab-porte__titre { margin: 0 0 0.75rem; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.15; } .fab-porte__constat { margin: 0 0 0.75rem; font-weight: 600; } .fab-porte p { max-width: none; } .fab-porte__lien { margin-top: auto; padding-top: 1.25rem; font-family: var(--fab-font-titre); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fab-magenta-fonce); } .fab-porte__fleche { margin-right: 0.6rem; } /* --- Les six services, en cartes qui se retournent --- Meme mecanique que les fiches de la page Presentation : une case a cocher masquee mais atteignable au clavier, une etiquette qui la commande, deux faces empilees sur la meme cellule de grille. Aucun JavaScript. La face avant porte le moment et le nom, la face arriere le detail. */ .fab-services { display: grid; gap: 2rem; /* Toutes les rangees a la meme hauteur : sans cela chaque rangee se cale sur sa carte la plus chargee, et les six ne sont plus egales. */ grid-auto-rows: 1fr; margin-block-start: clamp(1.75rem, 3vw, 2.5rem); perspective: 1800px; } @media (min-width: 48rem) { .fab-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem clamp(2rem, 4vw, 3rem); } } @media (min-width: 72rem) { .fab-services { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .fab-service { position: relative; scroll-margin-top: 2rem; } /* La case reste dans le flux pour rester atteignable au clavier, mais elle n occupe aucune place visible. */ .fab-service__bascule { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; } .fab-service__pivot { display: grid; height: 100%; transform-style: preserve-3d; transition: transform 0.6s ease; } .fab-service__pivot .fab-service__face { grid-area: 1 / 1; backface-visibility: hidden; border-radius: 6px; overflow: hidden; } .fab-service__bascule:checked ~ .fab-service__pivot { transform: rotateY(180deg); } @media (prefers-reduced-motion: reduce) { .fab-service__pivot { transition: none; } } /* --- Face avant --- */ .fab-service__face--avant { display: flex; flex-direction: column; background-color: var(--fab-blanc); } .fab-service__moment { max-width: none; margin: 0; padding: 1rem clamp(1.15rem, 2vw, 1.5rem); /* Teintes assez sombres pour que le blanc reste au-dessus du seuil : le magenta vif ne donnait que 4,08:1 sur ce corps de texte. */ background-color: var(--fab-magenta-fonce); color: var(--fab-blanc); font-family: var(--fab-font-titre); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; } .fab-service:nth-child(2) .fab-service__moment { background-color: var(--fab-orange-profond); } .fab-service:nth-child(3) .fab-service__moment { background-color: var(--fab-violet); } .fab-service:nth-child(4) .fab-service__moment { background-color: var(--fab-navy); } .fab-service:nth-child(5) .fab-service__moment { background-color: var(--fab-violet-fonce); } .fab-service:nth-child(6) .fab-service__moment { background-color: var(--fab-navy-80); } .fab-service__socle { display: flex; flex: 1 1 auto; flex-direction: column; padding: 1.35rem clamp(1.15rem, 2vw, 1.5rem); } .fab-service__titre { margin: 0 0 0.6rem; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.1; } .fab-service__accroche { max-width: none; margin: 0; font-weight: 600; } /* --- Face arriere --- */ .fab-service__face--dos { transform: rotateY(180deg); display: flex; flex-direction: column; padding: 1.35rem clamp(1.15rem, 2vw, 1.5rem); background-color: var(--fab-navy); color: #D9D6E2; overflow-y: auto; } .fab-service__face--dos p { max-width: none; margin: 0 0 0.9rem; font-size: 0.9375rem; line-height: 1.55; } /* --- La commande de retournement --- */ .fab-service__bouton { display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 1.1rem; font-family: var(--fab-font-titre); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fab-magenta-fonce); text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; } .fab-service__bouton--retour { color: var(--fab-jaune); } /* Le focus se pose sur la case, invisible : c est l etiquette qui doit le montrer, sans quoi on navigue au clavier sans savoir ou l on est. */ .fab-service__bascule:focus-visible ~ .fab-service__pivot .fab-service__bouton { outline: 3px solid var(--fab-navy); outline-offset: 3px; box-shadow: 0 0 0 3px var(--fab-jaune); } /* Bande d appel a l action : elle ne porte qu un bouton, donc elle respire moins qu une vraie section. Sa couleur tranche avec le bandeau des offres juste au-dessus, sans quoi les deux se lisent comme un seul bloc. */ .fab-appel.fab-appel { padding-block: clamp(1.75rem, 3vw, 2.5rem); /* Elle suit immediatement le bandeau des offres : les deux couleurs doivent se toucher, sans liserE de fond de page entre elles. */ margin-block-start: 0; } /* Le bandeau des offres est immediatement suivi d un autre bandeau colore, sur l accueil comme sur la page des services. Sa marge basse ferait apparaitre un liserE du fond de page entre les deux couleurs. */ #offres.wp-block-group { margin-block-end: 0; } /* --- Gradation par engagement --- Chaque palier annonce ce que l on fait, et non une duree qui serait fausse la moitie du temps. Les trois cibles existent reellement. */ .fab-paliers.fab-paliers { display: grid; gap: 1.75rem; margin-block-start: clamp(1.75rem, 3vw, 2.5rem); } @media (min-width: 48rem) { .fab-paliers.fab-paliers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(2rem, 4vw, 3rem); } } .fab-palier { display: flex; flex-direction: column; padding-top: 1.25rem; border-top: 3px solid var(--fab-magenta); } .fab-palier:nth-child(2) { border-top-color: var(--fab-orange); } .fab-palier:nth-child(3) { border-top-color: var(--fab-violet); } .fab-palier__etape { max-width: none; margin: 0 0 0.6rem; font-family: var(--fab-font-titre); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fab-navy-60); } .fab-palier__quoi { max-width: none; margin: 0 0 1.25rem; } .fab-palier__lien { margin-top: auto; font-family: var(--fab-font-titre); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fab-magenta-fonce); } .fab-palier__fleche { margin-right: 0.6rem; } /* --- La promesse de refus --- Elle ferme la page sur ce que nous refusons de faire, ce qui vaut mieux qu un argument de plus. */ /* Largeur figee, et non la mesure de lecture : c est un encadre dont la largeur a ete arretee a l oeil avec les paliers au-dessus. Son texte tient deja en 76 signes. */ .fab-promesse-refus.fab-promesse-refus { max-width: 45rem; margin-block-start: clamp(2.5rem, 5vw, 3.5rem); padding: 1.5rem 1.75rem; border-left: 4px solid var(--fab-magenta); background-color: var(--fab-creme); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.55; } /* Les deux adresses nominatives de la page Contact. Le nom et l adresse sont sur deux lignes distinctes : colles, on lit un seul bloc illisible. */ .fab-contacts { display: grid; gap: 1.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; } @media (min-width: 40rem) { .fab-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } .fab-contact { max-width: none; padding-top: 1rem; border-top: 3px solid var(--fab-magenta); } .fab-contact:nth-child(2) { border-top-color: var(--fab-violet); } .fab-contact__nom { display: block; margin-bottom: 0.35rem; font-family: var(--fab-font-titre); font-size: 1.125rem; line-height: 1.2; color: var(--fab-navy); } .fab-contact__mail { display: inline-block; font-size: 1rem; } /* Le creme etait le seul fond clair a ne pas declarer sa couleur de texte. Imbrique dans un bandeau sombre, il heritait donc du blanc : sur la page Presentation cela donnait 1,13:1, autant dire invisible. Chaque fond affirme desormais sa couleur, et l imbrication ne peut plus fuiter. */ .fab-fond-creme, .fab-fond-creme h1, .fab-fond-creme h2, .fab-fond-creme h3, .fab-fond-creme h4, .fab-fond-creme h5, .fab-fond-creme h6 { color: var(--fab-navy); } /* Le bouton d envoi du formulaire reprend des couleurs du theme et tombait a 2,41:1. Le blanc sur ce magenta remonte a 5,43:1. */ .forminator-button.forminator-button-submit, .forminator-button.forminator-button-submit:hover, .forminator-button.forminator-button-submit:focus { color: var(--fab-blanc); } /* --- Le haut de la page Nos services --- Le theme pose 80 px de marge sur le conteneur et 32 px de remplissage, soit 112 px de blanc avant le premier titre. Ici les six cartes doivent tenir dans un ecran : on recupere ce blanc. La page est reconnue a la grille de cartes qu elle contient, sans dependre d un numero de page. */ body:has(.fab-cartes) #primary { margin-top: 2rem; } body:has(.fab-cartes) .entry-content-wrap { padding-top: 0; } /* ============================================================ FABRIKAA LEARNING Cartes à onglet de la page Nos services Ce bloc fait partie de la charte complète : il n'y a rien à coller séparément. Il remplace les anciens styles .fab-portes et .fab-services, qui restent plus haut dans le fichier le temps que la page soit vérifiée. TROIS CHANGEMENTS PAR RAPPORT À LA VERSION PRÉCÉDENTE 1. Colonnes à partir de 20rem au lieu de 23rem : trois colonnes tiennent dès 1024 px de contenu, donc les six cartes occupent deux rangées au lieu de trois. 2. Une sixième couleur, .fab-carte--vert. La carte « Pour rendre l'entreprise autonome » portait exactement le même orange que « Avant la prise de poste ». 3. .fab-carte__mode, le mode de délivrance de chaque offre. ============================================================ */ .fab-cartes{ display:grid; /* Paliers explicites : 1, 2 ou 3 colonnes. Jamais 4, qui laisserait une rangee de deux cartes orpheline sous une rangee de quatre. */ grid-template-columns:1fr; gap:1.75rem 2rem; margin-top:1.5rem; } .fab-carte{ --fab-onglet:#1C2E4A; /* couleur de l'onglet, surchargée plus bas */ --fab-onglet-texte:#1C2E4A; display:flex; flex-direction:column; } /* L'onglet. Il déborde volontairement au-dessus du corps, comme un intercalaire de classeur. */ .fab-carte__moment{ align-self:flex-start; margin:0; background:var(--fab-onglet); color:var(--fab-onglet-texte); font-family:'Anton','Oswald',Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.09em; font-size:0.875rem; line-height:1; padding:0.75rem 1.375rem 0.625rem; border-radius:8px 8px 0 0; max-width:calc(100% - 1.5rem); } .fab-carte__corps{ flex:1; display:flex; flex-direction:column; background:#F4F1EC; border-left:5px solid var(--fab-onglet); padding:1.375rem 1.75rem 1.25rem; } .fab-carte__titre{ font-family:'Anton','Oswald',Impact,sans-serif; font-weight:400; font-size:clamp(1.25rem,1.9vw,1.625rem); line-height:1.22; color:#16233A; text-transform:none; letter-spacing:0; margin:0 0 0.625rem; } /* Le mode de délivrance. Volontairement discret : c'est une information de cadrage, pas un argument. Le gris tient 5,05 sur le crème du corps de carte, au-dessus du seuil. */ /* Le mode porte la marge automatique, pas le lien : les deux descendent alors ensemble et s alignent d une carte a l autre, quelle que soit la hauteur du titre au-dessus. Le blanc variable passe entre le titre et le mode, ou il ne se voit pas. Le selecteur est double d un parent : .fab-carte__corps p, plus haut dans cette meme feuille, remet la marge a zero et gagnait sur une classe seule. La marge auto y etait ecrite mais ne s appliquait pas. Une seule marge automatique dans cette colonne : si le mode et le lien la portaient tous deux, l espace se partagerait entre eux. */ .fab-carte__corps .fab-carte__mode{ margin:auto 0 1.25rem; font-size:0.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#5A6577; } .fab-carte__constat{ font-weight:700; color:#1C2E4A; font-size:1rem; line-height:1.5; margin:0 0 1rem; } .fab-carte__corps p{ color:#5A6577; font-size:0.96875rem; line-height:1.6; margin:0 0 1.25rem; } .fab-carte__lien{ display:inline-flex; align-items:center; gap:0.625rem; font-family:'Anton','Oswald',Impact,sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.05em; font-size:0.9375rem; color:#C42C5D; text-decoration:underline; text-underline-offset:4px; align-self:flex-start; } .fab-carte__lien:hover{color:#1C2E4A} .fab-carte__fleche{transition:transform .18s ease;font-family:inherit} .fab-carte__lien:hover .fab-carte__fleche{transform:translateX(5px)} .fab-carte__lien:focus-visible{outline:3px solid #7B2FBE;outline-offset:3px} /* Couleurs d'onglet : teintes claires de la charte, ecriture navy sur les six. Chaque valeur est la couleur de marque melangee a du blanc, juste assez pour que le navy tienne au moins 5:1. La carte 5 fait exception : eclaircir le navy donnait du gris, la couleur etant trop peu saturee. Un bleu franc eclairci le remplace. */ .fab-carte{--fab-onglet-texte:#1C2E4A} .fab-carte--orange{--fab-onglet:#FF723F} .fab-carte--magenta{--fab-onglet:#EE779E} .fab-carte--violet{--fab-onglet:#C98AE8} .fab-carte--navy{--fab-onglet:#9BC0E8} .fab-carte--jaune{--fab-onglet:#FFD166} .fab-carte--vert{--fab-onglet:#6FBF9E} @media (min-width:48rem){.fab-cartes{grid-template-columns:repeat(2,1fr)}} @media (min-width:72rem){.fab-cartes{grid-template-columns:repeat(3,1fr)}} @media (prefers-reduced-motion:reduce){ .fab-carte__fleche{transition:none} .fab-carte__lien:hover .fab-carte__fleche{transform:none} } @media (max-width:40rem){ .fab-cartes{gap:2rem} .fab-carte__corps{padding:1.5rem 1.375rem 1.375rem} .fab-carte__moment{font-size:0.8125rem;padding:0.8125rem 1.125rem 0.6875rem} } /* ============================================================ FABRIKAA LEARNING Accorder le formulaire Forminator à la charte À coller dans Apparence › Personnaliser › CSS additionnel, à la suite de ce qui existe déjà. POURQUOI CE FICHIER EST SÉPARÉ Forminator apporte ses propres styles, et ils sont parfois déclarés avec une forte spécificité. Ces règles-ci sont donc volontairement ciblées et peu nombreuses : elles ajustent la largeur, les polices et la couleur du bouton, sans toucher au fonctionnement du formulaire. COMMENT PROCÉDER Colle d'abord la page, regarde le rendu par défaut, et n'ajoute ce fichier que si le formulaire jure avec le reste. Si une règle reste sans effet, c'est que Forminator la surcharge : ajoute alors !important sur cette ligne uniquement, jamais sur tout le bloc. ============================================================ */ /* Largeur alignée sur celle des paragraphes de la page. */ .forminator-ui.forminator-custom-form{ max-width:38rem; margin-left:0; } /* Polices de la charte, pour que le formulaire ne détonne pas. */ .forminator-ui.forminator-custom-form, .forminator-ui.forminator-custom-form input, .forminator-ui.forminator-custom-form textarea, .forminator-ui.forminator-custom-form select{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif; } /* Libellés des champs, dans le même registre que les surtitres. */ .forminator-ui.forminator-custom-form .forminator-label{ font-size:0.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#1C2E4A; } /* Champs : angles francs et filet sobre, comme les encadrés du site. */ .forminator-ui.forminator-custom-form input[type="text"], .forminator-ui.forminator-custom-form input[type="email"], .forminator-ui.forminator-custom-form input[type="tel"], .forminator-ui.forminator-custom-form textarea{ border:1px solid #DCD6CC; border-radius:2px; background:#FFFFFF; } .forminator-ui.forminator-custom-form input:focus, .forminator-ui.forminator-custom-form textarea:focus{ outline:3px solid #7B2FBE; outline-offset:2px; border-color:#1C2E4A; } /* Bouton d'envoi : le bouton plein du site. Le blanc sur #1C2E4A tient 13,64 de contraste, très au-dessus du seuil de 4,5. Au survol il passe au magenta assombri, qui tient 6,34 sur blanc. */ .forminator-ui.forminator-custom-form button.forminator-button-submit{ background:#1C2E4A; color:#F4F1EC; border:1.5px solid #1C2E4A; border-radius:2px; font-weight:600; letter-spacing:.01em; padding:0.9375rem 1.625rem; transition:background .18s,border-color .18s,transform .18s; } .forminator-ui.forminator-custom-form button.forminator-button-submit:hover{ background:#BA174C; border-color:#BA174C; transform:translateY(-2px); } /* Messages d'erreur et de confirmation, dans les couleurs du site. */ .forminator-ui.forminator-custom-form .forminator-error-message{color:#BA174C} .forminator-ui .forminator-response-message.forminator-success{ background:#F4F1EC; border-left:4px solid #1C2E4A; color:#16233A; } @media (prefers-reduced-motion:reduce){ .forminator-ui.forminator-custom-form button.forminator-button-submit{transition:none} .forminator-ui.forminator-custom-form button.forminator-button-submit:hover{transform:none} } /* ============================================================ FABRIKAA LEARNING — CSS du gabarit "Article de blog" Partagé par tous les articles utilisant le gabarit .fbk-article. Ne pas dupliquer ce bloc dans les articles : un seul chargement pour tout le site, dans Personnaliser › CSS additionnel. ATTENTION @import : ces 2 lignes doivent rester les premières de toute la zone "CSS additionnel", avant toute autre règle déjà présente. Un appel par famille : une URL à paramètres multiples contient des esperluettes, que WordPress échappe si elle n'est pas en tête — l'URL serait alors cassée. ============================================================ */ @import url('/assets/fonts/anton.css'); @import url('/assets/fonts/inter.css'); .fbk{ --navy:#1C2E4A; --magenta:#E63770; --orange:#FF6B35; --jaune:#FFD166; --violet:#7B2FBE; --creme:#F4F1EC; --blanc:#FFF; --encre:#16233A; --gris:#5A6577; --trait:#DCD6CC; --accent:#BA174C; --accent-chaud:#BA174C; --teinte:#F4F1EC; --display:'Anton','Oswald',Impact,sans-serif; --texte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif; --marge:clamp(1.25rem,5vw,5rem); }.fbk *{box-sizing:border-box}.fbk{scroll-behavior:smooth}.fbk{margin:0;background:color-mix(in srgb,var(--teinte) 12%,var(--creme));color:var(--encre);font-family:var(--texte);font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased}.fbk .wrap{max-width:73.75rem;margin:0 auto;padding:0 var(--marge)}.fbk .col{max-width:47.5rem}.fbk h1, .fbk h2, .fbk h3{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0;letter-spacing:.005em}.fbk h1{font-size:clamp(2rem,5.6vw,3.75rem);line-height:1.18}.fbk h2{font-size:clamp(1.5rem,3.2vw,2.25rem);line-height:1.22}.fbk h3{font-size:clamp(1.125rem,2vw,1.4375rem);line-height:1.30}.fbk p{margin:0 0 1.05em}.fbk a{color:inherit}.fbk section{padding:clamp(3.5rem,7.5vw,6.875rem) 0}.fbk .oeil{font-size:0.75rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:0.75rem;margin-bottom:1.375rem}.fbk .oeil::after{content:"";flex:1;height:1px;background:var(--trait);max-width:6.875rem}.fbk .btn{display:inline-flex;align-items:center;gap:0.625rem;padding:0.9375rem 1.625rem;border-radius:2px;font-weight:600;font-size:0.96875rem;text-decoration:none;border:1.5px solid var(--navy);transition:transform .18s,background .18s,color .18s}.fbk .btn.plein{background:var(--accent);border-color:var(--accent);color:var(--creme)}.fbk .btn.plein:hover{background:var(--navy);border-color:var(--navy);transform:translateY(-2px)}.fbk .btn.vide{border-color:rgba(244,241,236,.4);color:var(--creme)}.fbk .btn.vide:hover{background:var(--creme);color:var(--navy);transform:translateY(-2px)}.fbk :focus-visible{outline:3px solid var(--violet);outline-offset:3px} /* Fil d'ariane : retour au blog */ .fbk-article .fil{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.875rem;font-weight:500;color:var(--gris);text-decoration:none;margin-bottom:2rem} .fbk-article .fil:hover{color:var(--accent)} /* Etiquettes meta (categorie, temps de lecture, date) : classe deja utilisee sur les fiches cas-client du site, reprise telle quelle. */ .fbk .meta{display:flex;flex-wrap:wrap;gap:0.5rem;padding:0;margin:0 0 1.5rem} .fbk .meta li{list-style:none;font-size:0.78125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--trait);padding:0.375rem 0.75rem;color:var(--gris)} .fbk .meta li.cat{color:var(--accent);border-color:var(--accent)} /* Hero : titre + chapo + auteures a gauche, photo a droite */ .fbk-article .hero{padding-top:2.125rem;padding-bottom:clamp(2.5rem,5vw,4.375rem)} .fbk-article .hero-grille{display:grid;grid-template-columns:1fr minmax(17.5rem,23.75rem);gap:clamp(2rem,5vw,3.75rem);align-items:start;margin-top:1.875rem} .fbk-article .chapeau{max-width:38.75rem;font-size:clamp(1.0625rem,1.85vw,1.25rem);color:var(--navy);margin-top:1.625rem;margin-bottom:2rem} .fbk-article .auteures{display:flex;align-items:center;gap:0.875rem;padding-top:1.75rem;border-top:1px solid var(--trait)} .fbk-article .pastille{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--display);font-size:0.9375rem;flex:none} .fbk-article .auteures b{display:block;color:var(--navy);font-size:1rem} .fbk-article .auteures span:not(.pastille){display:block;font-size:0.875rem;color:var(--gris)} .fbk-article figure{margin:0} .fbk-article .hero-grille img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--trait)} .fbk-article figcaption{margin-top:0.75rem;font-size:0.8125rem;color:var(--gris);font-style:italic} .fbk-article figcaption a{color:var(--gris);text-decoration:underline;text-underline-offset:2px} .fbk-article figcaption a:hover{color:var(--accent)} @media(max-width:56.25rem){.fbk-article .hero-grille{grid-template-columns:1fr}.fbk-article .hero-grille img{aspect-ratio:16/9}} /* Corps de l'article */ .fbk-article .corps{max-width:none;border-top:1px solid var(--trait);padding-top:2.75rem} .fbk-article .corps p{color:var(--navy);font-size:1.1875rem;text-align:justify;hyphens:auto;max-width:none} .fbk-article .corps p.fort{font-weight:600} /* Lettrine sur le tout premier paragraphe de l'article (hors encarts et blocs photo ; écrit sans chevron, que WordPress peut échapper) */ .fbk-article .corps p:first-of-type:not(:is(.duo-photo, .encart, .signature, .sources, .citation) p)::first-letter{font-family:var(--display);font-size:3.375rem;line-height:0.78;float:left;padding-right:0.5rem;padding-top:0.3125rem;color:var(--accent)} /* Barre de progression de lecture, ajoutee en tete du bloc HTML de l'article */ .fbk-article .lecture-progres{position:fixed;top:0;left:0;height:4px;width:0%;background:var(--accent);z-index:99999;transition:width .1s linear} .fbk-article .repere{margin-top:3.5rem;margin-bottom:1.5rem} .fbk-article .repere .chiffre{display:block;font-family:var(--display);font-size:1.375rem;color:var(--accent);letter-spacing:.06em;margin-bottom:0.625rem} .fbk-article .repere h2{color:var(--navy)} /* Grande phrase inline (ex-citations) : texte proche de la taille des titres */ .fbk-article .corps p.grande{font-size:clamp(1.1875rem,2.2vw,1.625rem);line-height:1.35;font-weight:600;color:var(--navy);margin:2.125rem 0;text-align:left;hyphens:none} .fbk-article .corps p.grande em.accent-italique{font-weight:600} /* H1 de l'article : plus petit et plus marque (Anton en gras synthetique) */ .fbk-article h1{font-size:clamp(1.75rem,4.6vw,3.125rem);font-weight:700} .fbk-article h2{font-weight:700} /* Photo d'illustration inseree dans le corps de l'article */ .fbk-article .illustration{max-width:26rem;margin:2.75rem auto} .fbk-article .illustration img{display:block;width:100%;border-radius:2px} .fbk-article .illustration figcaption{margin-top:0.75rem;font-size:0.8125rem;color:var(--gris);font-style:italic;text-align:center} /* Bloc 2 colonnes : photo a gauche, texte a droite */ .fbk-article .duo-photo{display:grid;grid-template-columns:minmax(200px,18rem) 1fr;gap:2rem;align-items:start;margin:2.75rem 0} .fbk-article .duo-photo .illustration{max-width:none;margin:0} .fbk-article .duo-photo p{margin:0 0 1.05em;text-align:left} .fbk-article .duo-photo p:last-child{margin-bottom:0} @media(max-width:40rem){.fbk-article .duo-photo{grid-template-columns:1fr}} /* Citation mise en avant : classe deja utilisee sur Qui nous sommes */ .fbk .citation{margin:2.5rem 0;padding:1.75rem 1.875rem;background:var(--blanc);border-left:4px solid var(--accent);max-width:44rem} .fbk .citation p{margin:0;font-size:clamp(1.0625rem,1.8vw,1.25rem);color:var(--navy);font-weight:500} /* Cycle regarder-poser-faire... : pastilles-pilules, l'etape cle en accent plein */ .fbk-article .cycle{list-style:none;display:flex;flex-wrap:wrap;gap:0.625rem;margin:1.75rem 0;padding:0} .fbk-article .cycle li{border:2px solid var(--trait);border-radius:999px;padding:0.5rem 1.125rem;font-family:var(--display);font-size:0.875rem;letter-spacing:.03em;text-transform:uppercase;color:var(--navy);background:var(--blanc)} .fbk-article .cycle li:nth-child(1){border-color:#FF723F} .fbk-article .cycle li:nth-child(3){border-color:#C98AE8} .fbk-article .cycle li:nth-child(4){border-color:#FFD166} .fbk-article .cycle li:nth-child(5){border-color:#9BC0E8} .fbk-article .cycle li:nth-child(6){border-color:#6FBF9E} .fbk-article .cycle li.actif{background:var(--accent);border-color:var(--accent);color:#fff} /* Ligne d'accroche courte : bordure gauche sans fond, reprend le traitement Claude Design pour "Elle n'a pas de bureau" / "Qui decide..." */ .fbk-article .corps p.accroche{border-left:4px solid var(--accent);padding-left:1.375rem;margin:1.875rem 0;font-weight:700;font-size:1.3125rem;line-height:1.35;color:var(--navy)} .fbk-article .corps em.accent-italique{font-style:italic;color:var(--accent-chaud);font-weight:600} /* Encart "un mot d'honnetete" */ .fbk-article .encart{background:color-mix(in srgb, var(--accent) 7%, var(--creme));border:none;border-radius:4px;padding:1.5rem 1.75rem;margin:2rem 0;max-width:none} .fbk-article .encart b{display:block;font-size:0.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-chaud);margin-bottom:0.625rem} .fbk-article .encart p{margin:0;font-style:italic;color:var(--navy);font-size:1.0625rem;max-width:none} /* Liste de questions (section 04) : grille bordee 2x2 (4 items fixes) */ .fbk-article .questions{list-style:none;margin:1.75rem auto;padding:0;display:grid;grid-template-columns:1fr;border:1px solid var(--trait);max-width:none} .fbk-article .questions li{padding:1.375rem 1.625rem;border-bottom:1px solid var(--trait);color:var(--navy);font-weight:500;font-size:1.03125rem;max-width:none} .fbk-article .questions li .icone{display:block;width:26px;height:26px;color:var(--accent);margin-bottom:0.625rem} .fbk-article .questions li:last-child{border-bottom:none} @media(min-width:40rem){.fbk-article .questions{grid-template-columns:1fr 1fr}.fbk-article .questions li:nth-child(1),.fbk-article .questions li:nth-child(2){border-bottom:1px solid var(--trait)}.fbk-article .questions li:nth-child(3),.fbk-article .questions li:nth-child(4){border-bottom:none}.fbk-article .questions li:nth-child(odd){border-right:1px solid var(--trait)}} /* Signature + sources */ .fbk-article .signature{display:flex;align-items:center;gap:0.875rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--trait);max-width:none} .fbk-article .sources{margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--trait);max-width:none} .fbk-article .sources .oeil{margin-bottom:1.25rem} .fbk-article .sources ol{margin:0;padding:0 0 0 1.25rem;color:var(--gris);font-size:0.90625rem} .fbk-article .sources li{margin-bottom:0.75rem;max-width:none} .fbk-article .sources em{font-style:italic} /* CTA de fin : meme fond navy que la section demo du site */ .fbk-article .demo{background:var(--navy);color:var(--creme)} .fbk-article .demo .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem} .fbk-article .demo h2{color:var(--blanc);max-width:26ch} .fbk-article .actions{display:flex;flex-wrap:wrap;gap:0.875rem} @media (prefers-reduced-motion:reduce){.fbk{scroll-behavior:auto}.fbk *{animation:none!important;transition:none!important}} /* Cohabitation avec un theme WordPress */ .fbk{max-width:none;width:100%;overflow-x:hidden} .fbk section{padding-left:0;padding-right:0;margin:0} .fbk ul,.fbk ol{margin-left:0} .fbk img{max-width:100%;height:auto} .fbk .wrap{box-sizing:border-box} .fbk h1,.fbk h2,.fbk h3{clear:none} .fbk a{box-shadow:none} /* ============================================================================= 13. PAGE DÉMO (/demo/) ----------------------------------------------------------------------------- Le hero de l'accueil, avec la démo dans un cadre à la place de la vidéo carrée, puis une section crème avec la photo de Nadia. Bloc HTML : page-demo.html. ========================================================================== */ /* Le hero colle au bandeau, comme sur l'accueil. */ body:has(.fab-hero--demo) .content-area, body:has(.fab-hero--demo) .site-main, body:has(.fab-hero--demo) .entry-content-wrap { padding-top: 0; margin-top: 0; } /* Côté démo : un cadre de téléphone sur fond crème, à la place du carré vidéo. */ .fab-hero--demo .fab-hero__media { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(0.75rem, 3vw, 2.5rem); background-image: none; background-color: var(--fab-creme); } @media (min-width: 60rem) { .fab-hero--demo .fab-hero__media { align-self: stretch; max-width: none; } } .fab-demo__cadre { display: block; width: 100%; max-width: 30rem; height: 620px; border: 0; border-radius: 18px; background-color: var(--fab-blanc); box-shadow: 0 1px 3px rgba(26, 26, 46, 0.08), 0 12px 32px rgba(26, 26, 46, 0.12); } @media (min-width: 60rem) { .fab-demo__cadre { height: min(720px, calc(100svh - var(--fab-bandeau) - 7rem)); min-height: 560px; } } .fab-demo__secours { margin: 0; font-size: 0.875rem; color: var(--fab-navy); text-align: center; } /* Sur téléphone, on lit d'abord ce qui va se passer, puis on joue. */ .fab-hero--demo .fab-hero__panneau { order: -1; } .fab-hero--demo .fab-hero__points strong { color: var(--fab-blanc); } /* Section crème sous la démo. */ .fab-demo__suite { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .fab-demo__suite p { max-width: 60ch; } .fab-demo__suite h2 + p { margin-top: 1.25rem; } .fab-demo__suite > h2 { margin-top: clamp(2.5rem, 5vw, 3.5rem); } .fab-demo__presentation { display: grid; gap: 1.5rem; align-items: start; } @media (min-width: 48rem) { .fab-demo__presentation { grid-template-columns: 9rem minmax(0, 1fr); gap: 2.5rem; } } .fab-demo__nadia { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--fab-blanc), 0 0 0 7px var(--fab-violet); } .fab-demo__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1.75rem; } .fab-demo__actions .fab-offre__lien { margin-top: 0; padding-top: 0; }