/* Polices auto-hébergées — sous-ensemble latin (couvre le français : accents, œ, €). Source : @fontsource/cormorant-garamond 5.3.0, @fontsource/inter 5.2.8 (fichiers Google Fonts). Licence : SIL Open Font License 1.1 — voir LICENSE-*.txt dans ce dossier. Précharger dans les deux fichiers du premier rendu : cormorant-garamond-latin-600-normal.woff2 et inter-latin-400-normal.woff2 */ @font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap; src:url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2")} @font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap; src:url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2")} @font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap; src:url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2")} @font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")} @font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap; src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")} @font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")} /* ========================================================================== BF PANDA COACHING — site.css Direction validée : V2-I. Vert profond dominant, crème en encre, accent doré, pied de page vert de nuit. Contrastes vérifiés : crème/vert-sombre 8,7:1, doré/vert-sombre 6,0:1, crème/nuit 16,1:1, sourdine/nuit 9,3:1, vert/crème 5,75:1. ========================================================================== */ :root{ /* Palette officielle (Structure_Site_BFPanda.docx) */ --blanc:#FFFFFF; --fond:#FDF6E3; /* crème : fond des sections claires, encre des sections sombres */ --texte:#2B2B2B; --vert:#0F6E56; /* vert foncé / CTA — réservé aux boutons, titres sur clair, filets */ --vert-sombre:#085041; /* fond de page */ --vert-clair:#5DCAA5; /* disponible, non utilisé dans la V2-I */ --vert-pale:#E1F5EE; /* texte secondaire sur vert-sombre, fond des survols clairs */ --dore:#FAC775; /* accent : « déjà en toi », surtitres sur sombre, filet des preuves */ --dore-fonce:#BA7517; /* accroches des formules (page Accompagnements) */ --bleu:#2C5F7C; /* accent de la page Entreprises */ --bleu-sombre:#24506A; --gris:#888888; /* ne jamais l'utiliser pour du texte sur crème : 3,3:1 seulement */ --gris-texte:#5F6B65; /* texte secondaire sur crème, 5,15:1 */ /* Pied de page V2-I */ --nuit:#071E18; /* fond du pied — reste vert, pas gris */ --nuit-trait:#12332B; /* filets sur fond de nuit */ --sourdine:#A8C4B9; /* texte secondaire sur fond de nuit */ --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --fs-accroche:clamp(2.25rem,5.6vw,4.25rem); --fs-h1:clamp(1.5rem,2.2vw,1.875rem); /* h1 de l'accueil, sous l'accroche */ --fs-h1-page:clamp(2.125rem,4.4vw,3.5rem); /* h1 des pages intérieures */ --fs-h2:clamp(1.75rem,3.2vw,2.75rem); --fs-h3:1.375rem; --fs-lead:1.25rem; --fs-lead-page:1.5rem; /* accroche des pages intérieures */ --fs-body:1.125rem; --fs-petit:.9375rem; --fs-sur:.8125rem; --mesure:55ch; --gouttiere:clamp(1.25rem,4vw,2.5rem); --rythme:clamp(3rem,6vw,5rem); --r-m:18px; --r-l:28px; --r-pilule:999px; --accent:var(--dore); --focus:var(--fond); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--vert-sombre);color:var(--fond); font-family:var(--sans);font-size:var(--fs-body);line-height:1.6} h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} p{margin:0;max-inline-size:var(--mesure)} img{max-inline-size:100%;block-size:auto} a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{ outline:3px solid var(--focus);outline-offset:3px;border-radius:8px} .lien-evitement{position:absolute;inset-inline-start:1rem;inset-block-start:-100px; padding:.75rem 1rem;background:var(--dore);color:var(--vert-sombre);font-weight:600; border-radius:8px;z-index:100} .lien-evitement:focus{inset-block-start:1rem} .conteneur{max-inline-size:1200px;margin-inline:auto;padding-inline:var(--gouttiere)} .section{padding-block:var(--rythme)} /* Sections claires : l'encre s'inverse */ .clair{background:var(--fond);color:var(--texte);--focus:var(--texte)} /* Deux sections claires qui se suivent forment un seul aplat : sans ça leurs marges s'additionnent et creusent un trou au milieu du bloc (Entreprises formats + devis, À propos chiffres + séminaire). */ .clair + .clair{padding-block-start:0} /* Un cran plus sombre que le fond de page, pour détacher un bloc du bandeau d'en-tête, qui porte exactement le même vert (relecture Alex du 14/09). Réutilise `--nuit`, le vert du pied : aucun token nouveau, et le crème y mesure 16,1:1. Le doré des surtitres y gagne aussi par rapport au vert sombre. */ .section--nuit{background:var(--nuit)} .surtitre{font-family:var(--sans);font-size:var(--fs-sur);font-weight:600; letter-spacing:.16em;text-transform:uppercase;margin:0;color:var(--dore)} .clair .surtitre{color:var(--vert)} .italique{font-style:italic} .accent{color:var(--accent);font-style:italic} /* Cormorant dessine des chiffres old-style par défaut (3, 5, 7, 9 descendent sous la ligne de base). lnum les aligne, tnum leur donne la même chasse. Sur tout chiffre en Cormorant. */ .chiffres{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1} .photo{display:block;inline-size:100%;block-size:auto;border-radius:var(--r-l)} .photo--large{border-radius:var(--r-m)} .logo{display:block;block-size:72px;inline-size:auto} .logo--h{block-size:70px} .bouton{display:inline-flex;align-items:center;justify-content:center; min-block-size:56px;min-inline-size:44px;padding:.9rem 1.9rem; background:var(--fond);color:var(--vert-sombre);font-size:var(--fs-body); font-weight:600;line-height:1.3;text-align:center;text-decoration:none;border:none; border-radius:var(--r-pilule);cursor:pointer;transition:background-color .15s linear} .bouton:hover{background:var(--vert-pale)} .clair .bouton{background:var(--vert);color:var(--fond)} .clair .bouton:hover{background:var(--vert-sombre)} .bouton--secondaire{background:transparent;color:var(--fond);border:1px solid var(--fond)} .clair .bouton--secondaire{background:transparent;color:var(--vert);border-color:var(--vert)} .lien-texte{color:var(--fond);font-weight:600;text-underline-offset:4px; display:inline-block;min-block-size:44px;padding-block:.6rem} .clair .lien-texte{color:var(--vert)} .clair .lien-texte:hover{color:var(--vert-sombre)} /* --- Bandeau ------------------------------------------------------------- */ .bandeau__barre{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding-block:1rem} .bascule{margin-inline-start:auto;display:inline-flex;flex-direction:column;align-items:center; justify-content:center;gap:5px;inline-size:48px;block-size:48px;padding:0; background:transparent;border:1px solid var(--fond);border-radius:8px;cursor:pointer} .bascule__trait{display:block;inline-size:22px;block-size:2px;background:var(--fond)} .bascule[aria-expanded="true"]{background:var(--vert)} .bandeau__nav{order:3;flex-basis:100%} .menu{display:none;list-style:none;margin:0;padding:0 0 1rem} .menu.est-ouvert{display:block} .menu a{display:block;min-block-size:44px;padding:.7rem .25rem;color:var(--fond); font-weight:500;text-decoration:none;border-block-end:1px solid var(--vert)} .menu a:hover{color:var(--dore);text-decoration:underline;text-underline-offset:4px} .menu a[aria-current="page"]{font-weight:600;text-decoration:underline;text-underline-offset:5px} /* --- Ouverture (accueil) ------------------------------------------------- */ .ouverture{padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,7vw,5rem)} .ouverture__grille{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center} .ouverture__texte{display:grid;gap:1.5rem;justify-items:start} .accroche{font-family:var(--serif);font-weight:600;font-size:var(--fs-accroche); line-height:1.06;color:var(--fond);margin:0;max-inline-size:16ch} .ouverture h1{font-size:var(--fs-h1);font-weight:500;color:var(--fond);max-inline-size:34ch} .ouverture__sous-titre{font-size:var(--fs-lead);color:var(--vert-pale);max-inline-size:40ch} /* --- En-tête des pages intérieures --------------------------------------- */ .page-entete{padding-block:clamp(2rem,5vw,4rem) clamp(2.5rem,6vw,4.5rem)} .page-entete__texte{display:grid;gap:1.25rem;justify-items:start} .page-entete h1{font-size:var(--fs-h1-page);color:var(--fond);max-inline-size:25ch} .page-entete__accroche{font-family:var(--serif);font-size:var(--fs-lead-page);font-style:italic; color:var(--vert-pale);max-inline-size:60ch} /* Ligne descriptive entre le h1 et l'accroche : elle dit ce qu'est la prestation, là où l'accroche porte l'émotion. Mêmes valeurs que .ouverture__sous-titre — sans-serif droit contre le serif italique de l'accroche : c'est le contraste de fonte, pas la taille, qui sépare les deux lignes. Aucun token nouveau. */ .page-entete__soustitre{font-size:var(--fs-lead);color:var(--vert-pale);max-inline-size:46ch} /* Variante avec photo dans le bloc vert (Contact) : empilé, puis deux colonnes à 1000 px. Sous 1000 px elle occupe toute la colonne, centrée, plafonnée à sa largeur native (640 px) pour ne pas être agrandie. */ .page-entete__grille{display:grid;gap:clamp(2rem,4vw,3rem);align-items:center} .page-entete__photo{max-inline-size:640px;justify-self:center} @media (min-width:1000px){ .page-entete__grille{grid-template-columns:1fr minmax(260px,380px)} .page-entete__photo{max-inline-size:none;justify-self:end} } /* --- Ligne de preuves ---------------------------------------------------- */ .preuves{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;list-style:none;margin:.5rem 0 0; padding:1.25rem 0 0;border-block-start:1px solid var(--dore);inline-size:100%} .preuves li{display:grid;gap:.15rem;align-content:start} .preuves sup{font-size:.55em;vertical-align:.5em;line-height:0} .preuves b{font-family:var(--serif);font-size:1.75rem;font-weight:600;color:var(--fond); line-height:1.05;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1} .preuves span{font-size:var(--fs-petit);color:var(--vert-pale);letter-spacing:.01em} .clair .preuves{border-block-start-color:var(--vert)} .clair .preuves b{color:var(--vert)} .clair .preuves span{color:var(--gris-texte)} /* --- Qui je suis --------------------------------------------------------- */ .parcours{display:grid;gap:clamp(2rem,4vw,3rem)} .parcours__texte{display:grid;gap:1.25rem;justify-items:start} /* Le vert du titre ne vaut que sur fond clair : sur le vert de nuit il mesure 1,2:1. Même règle que .entete-bloc — crème sur sombre, vert sur clair (DECISIONS.md). */ .parcours__texte h2{color:var(--fond)} .clair .parcours__texte h2{color:var(--vert)} /* --- En-tête de bloc ----------------------------------------------------- */ .entete-bloc{display:grid;gap:.75rem;justify-items:start;margin-block-end:2.5rem} .entete-bloc h2{color:var(--fond)} .clair .entete-bloc h2{color:var(--vert)} /* Sous-titre intercalaire : un second en-tête à l'intérieur d'une section déjà titrée (accueil, « Une offre à part » sous les quatre tuiles). Il lui faut l'air au-dessus que la grille qui le précède n'a pas. Une seule déclaration, pas de variante de couleur : c'est un .surtitre ordinaire, seule sa place change. */ .entete-bloc--intercalaire{margin-block-start:3.5rem} /* --- Les 4 profils ------------------------------------------------------- */ .grille-publics{display:grid;gap:1.25rem;padding:0;list-style:none} .tuile{display:grid;grid-template-rows:auto auto 1fr;gap:.5rem;block-size:100%;padding:1rem 1rem 1.25rem; background:var(--blanc);border-radius:var(--r-m);color:var(--texte); text-decoration:none;transition:background-color .15s linear} .tuile:hover{background:var(--vert-pale)} /* block-size:auto est indispensable : sans lui l'attribut height du HTML l'emporte sur aspect-ratio */ .tuile img{inline-size:100%;block-size:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-block-end:.75rem} .tuile h3{color:var(--vert);margin:0} .tuile p{font-size:1rem;line-height:1.5;max-inline-size:34ch;margin:0} /* --- Les 2 offres en bandeaux ------------------------------------------- */ .bandes{display:grid;gap:1.25rem;padding:0;list-style:none} .bande{display:grid;gap:0;block-size:100%;background:var(--vert-sombre);border-radius:var(--r-m); color:var(--fond);text-decoration:none;overflow:hidden;transition:background-color .15s linear} /* Seul un lien réagit au survol : .bande sert aussi à des blocs non cliquables (figure du séminaire d'À propos, format signature d'Entreprises). */ a.bande:hover{background:var(--vert)} a.bande--bleu:hover{background:var(--bleu-sombre)} .bande--statique{margin:0} .bande__texte figcaption{color:var(--vert-pale);max-inline-size:44ch} /* Logo tiers posé au-dessus de la légende d'une bande. `inline-size:auto` + `block-size` fixe : le fichier fait 1080×268, il serait énorme à pleine largeur. SANS FOND, demande Alex du 11/09. À savoir : le lettrage est bleu nuit sur transparent, soit ~1,9:1 sur le vert sombre de la bande — seul le cube orange ressort vraiment. Si le rendu ne convient pas, la solution est une version blanche du logo, pas un fond ici. */ .bande__logo{display:block;inline-size:auto;block-size:50px;max-inline-size:100%} /* Sur le bleu Entreprises, le doré tombe à 4,45:1 et le vert pâle manque de tenue : surtitre et texte passent en crème (SITE.md §9). */ .bande--bleu .bande__texte p{color:var(--fond)} .bande__img{display:block;inline-size:100%;block-size:auto;object-fit:cover;aspect-ratio:16/10;border-radius:0;align-self:stretch} .bande__texte{display:grid;gap:.75rem;align-content:center;justify-items:start;padding:clamp(1.5rem,3.5vw,2.75rem)} .bande__texte h3{color:var(--fond);font-size:clamp(1.5rem,2.6vw,2rem)} .bande__texte p{color:var(--vert-pale);max-inline-size:44ch} .bande__lien{color:var(--dore);font-weight:600;font-size:1rem} .bande--bleu{background:var(--bleu)} /* Bande posée sur une section verte (« Pour qui ») : elle inverse l'encre, comme le font déjà .final--clair, .carte-rdv, .temoignage et .formule. Le fond --vert-sombre par défaut est exactement celui de la page, la carte y serait invisible. Vert sur crème 5,75:1, encre 12,6:1, doré foncé de l'amorce comme .formule__accroche. */ /* `--clair` est le traitement lui-même ; `--profil` en est l'emploi ancré d'Accompagnements (les quatre
cibles des tuiles de l'accueil, d'où le scroll-margin). Un seul jeu de règles pour les deux : dupliquer la carte crème en deux composants les ferait diverger. */ .bande--profil,.bande--clair{background:var(--fond);color:var(--texte);--focus:var(--texte)} .bande--profil{scroll-margin-block-start:6rem} .bande--profil .bande__texte h3,.bande--clair .bande__texte h3{color:var(--vert)} .bande--profil .bande__texte p,.bande--clair .bande__texte p{color:var(--texte)} /* Les `--profil` sont des
, jamais des liens : sans cette règle, a.bande:hover repeindrait la carte en vert et le

vert y deviendrait invisible. */ a.bande--clair:hover{background:var(--vert-pale)} /* Le doré de .bande__lien tombe à 1,44:1 sur crème, et le doré foncé à 3,45:1 ne passe AA qu'au-delà de 24 px — la ligne fait 1 rem. Vert sur crème : 5,75:1 (DECISIONS.md). */ .bande--clair .bande__lien{color:var(--vert)} .bande__travail strong{color:var(--dore-fonce);font-weight:600} .bande--bleu:hover{background:var(--bleu-sombre)} /* --- Bloc final : section verte, carte crème, photo au-dessus ------------ */ .final-bloc{display:grid} .final-bloc > .photo{border-radius:var(--r-l)} .final{background:var(--fond);color:var(--texte);border-radius:var(--r-l); padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,4vw,3rem); display:grid;gap:1.75rem;justify-items:center;text-align:center;--focus:var(--texte)} .final p{max-inline-size:52ch;color:var(--texte)} .final .surtitre{color:var(--vert)} .final .bouton{background:var(--vert);color:var(--fond)} .final .bouton:hover{background:var(--vert-sombre)} /* --- Pied de page V2-I --------------------------------------------------- */ .pied{background:var(--nuit)} .pied__grille{display:grid;gap:2rem} .pied .logo{block-size:52px;inline-size:auto} .pied__col{display:grid;align-content:start} .pied__col > .surtitre{margin-block-end:.55rem} .pied__coord{display:grid;gap:.1rem} .pied__coord p{margin:0} .pied__pile{list-style:none;margin:0;padding:0;display:grid;gap:.1rem} .pied__pile a,.pied__coord a,.pied__pile button{display:inline-block;min-block-size:44px;min-inline-size:44px; padding-block:.6rem;padding-inline:0;line-height:1.45;color:var(--fond);background:none;border:0;font:inherit; text-align:start;cursor:pointer;text-decoration:underline} .pied__delai{color:var(--sourdine)} .pied__socle{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline; margin-block-start:2rem;padding-block-start:1rem;border-block-start:1px solid var(--nuit-trait); font-size:1rem;color:var(--sourdine)} .pied__droite{margin-inline-start:auto} /* --- Citation isolée (À propos) ------------------------------------------ */ /* Les guillemets français sont dans le texte, pas en pseudo-élément : un lecteur d'écran doit les entendre (SITE.md §6). */ /* MESURE ET MARGE REMONTÉES DE `.clair .citation` SUR LA RÈGLE DE BASE (14/09). La citation n'avait jamais servi que sur crème : les valeurs de la variante claire étaient les seules éprouvées, et le 28ch de la base n'avait jamais rien mis en page. Il a coupé la première citation posée sur fond vert (« Il y a bien assez de gens qui s'en chargent. », 43 caractères) en deux lignes, cassant la règle « une phrase par ligne ». Les deux variantes ne diffèrent donc plus que par la couleur, ce qui est le seul écart que le fond justifie. Le rendu des sections crème est inchangé. */ .citation{font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.25;color:var(--dore); text-align:center;max-inline-size:48ch;margin-inline:auto; margin-block-end:var(--rythme)} /* Une ligne par phrase (demande Alex) : la mesure passe à 48ch, sinon la première phrase se replie dès le bureau. Sous 700 px chaque phrase se replie quand même — elle commence toujours sur sa propre ligne. */ .citation__ligne{display:block} /* Posée sur le crème, la citation ne peut pas rester dorée : 2,4:1, très sous le seuil. Le vert y mesure 5,75:1 — règle générale des accents transversaux (DECISIONS.md). */ .clair .citation{color:var(--vert)} /* --- Les trois actes (À propos) ------------------------------------------ */ .actes{display:grid;gap:var(--rythme);margin:0;padding:0;list-style:none} .acte{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:center} .acte__texte{display:grid;gap:1.25rem;justify-items:start} /* Après .clair .surtitre dans le fichier, donc l'emporte à spécificité égale. */ .acte .surtitre{color:var(--dore-fonce)} .acte__texte h2{color:var(--vert)} /* --- Étapes (À propos : 3 temps ; Self-défense : 4 temps) ----------------- */ .etapes{display:grid;gap:2rem;margin:0;padding:0;list-style:none;counter-reset:etape} .etape{display:grid;gap:.4rem;align-content:start;counter-increment:etape} .etape::before{content:counter(etape);font-family:var(--serif);font-weight:600; font-size:2.5rem;line-height:1;color:var(--dore); font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1} /* Sur crème le doré tombe à 1,44:1 : le doré foncé donne 3,45:1, conforme AA pour ce corps de 2,5 rem (DECISIONS.md 2026-09-09 « numéro des étapes »). */ .clair .etape::before{color:var(--dore-fonce)} .etape h3{color:var(--fond)} .clair .etape h3{color:var(--vert)} /* Chapô d'une étape : une ligne courte détachée entre le titre et le paragraphe, serif italique comme les autres lignes détachées du site (.encart__chute, .page-entete__accroche). Sur crème, PAS de doré : 1,44:1, et le doré foncé ne passe AA qu'en grande taille (DECISIONS.md 2026-09-09) — d'où le vert, seul cas où ce composant sert aujourd'hui. */ .etape__chapo{font-family:var(--serif);font-style:italic;font-size:1.0625rem;line-height:1.4; color:var(--dore);max-inline-size:38ch} .clair .etape__chapo{color:var(--vert)} .etape p{font-size:1rem;line-height:1.5;max-inline-size:38ch} /* --- Chiffres clés (À propos : 6 ; Entreprises : 3) ----------------------- */ /* Cartes crème définies par leur filet, pas par un aplat (SITE.md §6). */ .chiffres-cles{display:grid;gap:1.25rem;margin:0;padding:0;list-style:none} .chiffre-cle{display:grid;gap:.35rem;align-content:start;block-size:100%; padding:1.5rem;background:var(--fond);color:var(--texte); border:1px solid rgba(15,110,86,.18);border-radius:var(--r-m)} .chiffre-cle__nombre{font-family:var(--serif);font-weight:600; font-size:clamp(2.25rem,4vw,3rem);line-height:1.05;color:var(--vert); font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1} .chiffre-cle__libelle{margin:0;font-size:1rem;line-height:1.45;max-inline-size:32ch} .chiffre-cle__source{margin:0;font-size:.8125rem;color:var(--gris-texte)} /* Phrase de rappel sous un bloc (chiffres, tableau) : elle a besoin d'air au-dessus, la grille qui la précède n'a pas de marge basse. */ .mention{margin-block-start:1.75rem} /* Variante sans mesure : la phrase « Grande Cause Nationale » tient alors sur une ligne, là où les 55ch de la règle globale la coupaient en deux. */ .mention--large{max-inline-size:none} /* --- Figure légendée (photo du séminaire) -------------------------------- */ .figure{margin:0;display:grid;gap:1rem} .figure figcaption{font-size:var(--fs-petit);color:var(--vert-pale);max-inline-size:60ch} .clair .figure figcaption{color:var(--gris-texte)} @media (min-width:600px){ .etapes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .chiffres-cles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} } /* Cinq étapes (Confiance et sang-froid, T2.1o) : l'auto-fit de .etapes ci-dessus donne 4 + 1 à 1200 px — 5 × 220 px plus quatre gouttières dépassent la largeur utile du conteneur — et laisse une colonne orpheline sur sa propre ligne. 3 + 2 se lit mieux. Écrit APRÈS le bloc 600 px : à spécificité égale, c'est l'ordre qui tranche, la règle auto-fit reprendrait la main si celle-ci la précédait. Une seule règle : sous 768 px l'auto-fit de .etapes fait déjà le travail. */ @media (min-width:768px){ .etapes--cinq{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (min-width:768px){ .acte{grid-template-columns:1fr minmax(0,38%)} .acte--inverse .acte__photo{grid-column:1;grid-row:1} .acte--inverse .acte__texte{grid-column:2;grid-row:1} } /* --- Accordéon des profils (Accompagnements) ----------------------------- */ .accordeon{border-block-start:1px solid var(--nuit-trait);margin:0;padding:0} .accordeon details{border-block-end:1px solid var(--nuit-trait);scroll-margin-block-start:6rem} .clair .accordeon{border-block-start-color:rgba(15,110,86,.25)} .clair .accordeon details{border-block-end-color:rgba(15,110,86,.25)} .accordeon summary{display:flex;align-items:center;justify-content:space-between;gap:1rem; min-block-size:44px;padding-block:1rem;cursor:pointer;list-style:none} .accordeon summary::-webkit-details-marker{display:none} .accordeon summary h3{margin:0;color:var(--fond)} .clair .accordeon summary h3{color:var(--vert)} /* Le vert du §6 n'est lisible que sur crème (1,5:1 sur le vert-sombre de la section) : même arbitrage que le numéro des étapes, voir DECISIONS.md. */ .accordeon__chevron{flex:none;inline-size:24px;block-size:24px;color:var(--dore); transition:transform .15s linear} .clair .accordeon__chevron{color:var(--vert)} .accordeon details[open] .accordeon__chevron{transform:rotate(180deg)} .accordeon__panneau{display:grid;gap:1rem;padding-block:0 1.5rem} .accordeon__panneau p{max-inline-size:70ch} .accordeon__panneau strong{color:var(--dore)} .clair .accordeon__panneau strong{color:var(--vert)} /* --- Les formules (Accompagnements) -------------------------------------- */ /* Lignes explicites : chaque carte est sa propre grille, seul un placement fixe garantit que les boutons tombent tous sur la dernière ligne, étiquette ou pas. */ .formules{display:grid;gap:1.25rem;margin:0;padding:0;list-style:none} .formule{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:.85rem; block-size:100%;padding:1.75rem;background:var(--fond);color:var(--texte); border:.5px solid var(--gris);border-radius:var(--r-m)} .formule--mise-en-avant{border:2px solid var(--vert)} /* Hors flux : dans le flux, l'étiquette créait une première rangée que les deux autres cartes n'avaient pas, et les trois

ne s'alignaient plus. */ .formule__etiquette{position:absolute;inset-block-start:1.75rem;inset-inline-end:1.75rem; margin:0;padding:.3rem .9rem;background:var(--vert-pale);color:var(--vert-sombre); border-radius:var(--r-pilule);font-size:var(--fs-sur);font-weight:600; letter-spacing:.08em;text-transform:uppercase} /* Le titre de la carte mise en avant laisse la place à l'étiquette. */ .formule--mise-en-avant h3{padding-inline-end:9.5rem} .formule h3{grid-row:1;color:var(--vert)} .formule__accroche{grid-row:2;margin:0;color:var(--dore-fonce);font-weight:600} .formule__texte{grid-row:3;margin:0;max-inline-size:40ch} .formule .bouton{grid-row:4;justify-self:start;align-self:end;margin-block-start:.5rem} /* --- Tableaux à défilement (Accompagnements, Confiance, le bloc B2B) ------ */ /* Ombres de défilement en CSS pur (dégradés en background-attachment:local) : elles n'apparaissent que s'il y a vraiment débordement, sans rupture supplémentaire. Les valeurs sont écrites en littéral : un dégradé ne prend pas de var avec alpha de façon fiable sur les navigateurs visés. --vert-sombre #085041, --fond #FDF6E3, --nuit #071E18, --vert-pale #E1F5EE. REMIS DANS LE SENS DU SITE EN T2.5L. Le composant n'avait servi que sur `.clair` et ses couleurs étaient écrites pour le crème — ce qui est l'inverse de la convention (le fond de page est sombre, `.clair` inverse l'encre). Posé sur une section sombre, il devenait illisible : titres et intitulés en --vert à 1,52:1 sur --vert-sombre, zébrage invisible, et les ombres de défilement peignaient deux bandes CRÈME sur les bords. La base est donc sombre, `.clair` porte les valeurs d'origine — le rendu des quatre emplois sur crème ne change pas. Les couches d'image sont posées par `background-image` et non par `background` : la forme courte remettrait `repeat`, `size` et `attachment` à leur valeur initiale dans la règle `.clair`, et les ombres cesseraient de suivre le défilement. */ .tableau-defilant{overflow-x:auto;-webkit-overflow-scrolling:touch; background-image: linear-gradient(to right,#085041 30%,rgba(8,80,65,0)), linear-gradient(to left,#085041 30%,rgba(8,80,65,0)), radial-gradient(farthest-side at 0 50%,rgba(7,30,24,.5),rgba(7,30,24,0)), radial-gradient(farthest-side at 100% 50%,rgba(7,30,24,.5),rgba(7,30,24,0)); background-position:left center,right center,left center,right center; background-repeat:no-repeat; background-size:40px 100%,40px 100%,14px 100%,14px 100%; background-attachment:local,local,scroll,scroll} .clair .tableau-defilant{background-image: linear-gradient(to right,#FDF6E3 30%,rgba(253,246,227,0)), linear-gradient(to left,#FDF6E3 30%,rgba(253,246,227,0)), radial-gradient(farthest-side at 0 50%,rgba(8,80,65,.20),rgba(8,80,65,0)), radial-gradient(farthest-side at 100% 50%,rgba(8,80,65,.20),rgba(8,80,65,0))} .tableau-defilant table{inline-size:100%;min-inline-size:640px;border-collapse:collapse} .tableau-defilant th,.tableau-defilant td{padding:.85rem 1rem;text-align:start; vertical-align:top;border-block-end:1px solid rgba(225,245,238,.18);font-size:1rem} .clair .tableau-defilant th,.clair .tableau-defilant td{border-block-end-color:rgba(15,110,86,.18)} /* Titres de colonnes : doré sur sombre (6,04:1), vert sur crème (5,75:1). C'est le traitement des titres du site, pas une couleur de plus. */ .tableau-defilant thead th{font-family:var(--serif);font-size:1.25rem;font-weight:600; color:var(--dore)} .clair .tableau-defilant thead th{color:var(--vert)} /* Intitulés de lignes : crème sur sombre (8,71:1). PAS de doré ici — cinq intitulés dorés empilés entreraient en concurrence avec les titres de colonnes, qui sont la seule entrée de lecture du tableau. Le gras suffit à les détacher. */ .tableau-defilant th[scope="row"]{font-weight:600;color:var(--fond)} .clair .tableau-defilant th[scope="row"]{color:var(--vert)} .tableau-defilant tbody tr:nth-child(odd){background:rgba(255,255,255,.05)} .clair .tableau-defilant tbody tr:nth-child(odd){background:rgba(15,110,86,.05)} /* --- Encart transversal (Accompagnements, Entreprises) ------------------- */ .encart{display:grid;gap:0;overflow:hidden;border-radius:var(--r-m); background:var(--vert-sombre);color:var(--fond)} .encart__img{display:block;inline-size:100%;block-size:auto;object-fit:cover; aspect-ratio:16/10;align-self:stretch} .encart__texte{display:grid;gap:.85rem;align-content:center;justify-items:start; padding:clamp(1.5rem,3.5vw,2.75rem)} /* La carte est sombre alors que la section qui la porte est claire : sans cette règle, `.clair .surtitre` peint le surtitre en --vert sur le --vert-sombre de la carte, soit 1,2:1. Il reprend donc le doré des fonds sombres (6,0:1). Et il monte à 1rem : en capitales très espacées, 13 px tiennent mal sur un fond sombre (SITE.md §6). */ .clair .encart__texte .surtitre{color:var(--dore)} .encart__texte .surtitre{font-size:1rem;letter-spacing:.08em} .encart__texte h2{color:var(--fond)} .encart__texte p{color:var(--vert-pale);max-inline-size:52ch} /* Chute sortie du paragraphe (relecture Benjamin, 11/09) : elle reprend le traitement des accroches du site — serif italique doré. Sélecteur descendant pour passer devant `.encart__texte p`, qui la repeindrait en --vert-pale. Le doré tient sur le --vert-sombre de la carte (6,1:1) ; sur la variante --encart--bleu il tomberait à 4,45:1, cette chute n'y est donc pas employée. */ .encart__texte .encart__chute{font-family:var(--serif);font-size:1.375rem;font-style:italic; color:var(--dore);max-inline-size:52ch} .encart .lien-texte{color:var(--dore)} /* PIEGE DE SPECIFICITE, corrige le 26/09 (Alex) : la carte est sombre dans une section claire, donc `.clair .lien-texte:hover` (0,3,0) passait DEVANT `.encart .lien-texte` (0,2,0) et repeignait le lien en --vert-sombre, c'est-a-dire exactement le fond de la carte : au survol, le lien disparaissait. Le survol repasse donc en creme, 8,71:1. DEUX CONDITIONS, PAS UNE. Ne pas redescendre ce selecteur a une seule classe : il doit EGALER (0,3,0). Et l'egalite rend le resultat dependant de la POSITION — cette regle doit rester ecrite APRES `.clair .lien-texte:hover`, sinon le bug revient sans qu'une seule autre regle bouge. La feuille regroupe deja des surcharges de section claire plus bas (bloc « Accent de page bleu ») : le piege est concret. C'est un test qui garde l'ordre, pas ce commentaire (test_styles.py, TestEncartSurvol). Un seul emploi a ce jour, /accompagnements/ : la variante --bleu n'a plus de page depuis la refonte B2B du 21/09, ne pas deduire de ce correctif qu'elle est verifiee. */ .encart .lien-texte:hover{color:var(--fond)} .encart--bleu{background:var(--bleu)} /* Le doré sur le bleu Entreprises tombe à 4,45:1, sous le seuil AA du texte courant : sur cette variante le lien repasse en crème (6,41:1). */ .encart--bleu .lien-texte{color:var(--fond)} @media (min-width:768px){ .formules{grid-template-columns:repeat(3,1fr)} /* T2.5n — deux cartes occupent la moitié de la largeur chacune, au lieu de deux tiers de la grille à trois et d'un vide à droite (Métiers exposés, « Les deux accompagnements, en résumé »). MEME PIEGE D'ORDRE QUE `.etapes--cinq` : les deux sélecteurs ont la même spécificité (une classe), c'est donc la position dans le fichier qui tranche. Écrite AVANT la grille à trois, la règle serait silencieusement écrasée. */ .formules--deux{grid-template-columns:repeat(2,minmax(0,1fr))} .encart{grid-template-columns:minmax(0,40%) 1fr} /* Pas de max-block-size ici : il bornait l'image sans borner le texte, donc un liseré de fond apparaissait sous la photo dès que la colonne de texte était plus haute. Le slot est paysage, les images qu'on y met le sont aussi — recadrées à la source si besoin. */ .encart__img{aspect-ratio:auto;block-size:100%;min-block-size:280px} } /* --- Tarifs (Confiance et sang-froid) ------------------------------------ */ /* Même base que .tableau-defilant, avec la colonne tarif alignée à droite. */ .tarifs td:last-child,.tarifs th:last-child{text-align:end;white-space:nowrap} .tarifs table{min-inline-size:520px} /* --- Encadré sobre (« Le cadre ») ---------------------------------------- */ /* Ni icône ni couleur d'alerte : c'est une orientation, pas un avertissement (SITE.md §3.4). Filet en vert pâle sur fond sombre, en vert sur clair — règle générale des accents transversaux, voir DECISIONS.md. */ /* Grille depuis T2.1d : un .encadre peut porter plusieurs blocs titrés ou plusieurs paragraphes (« Aller plus loin », les encarts de Métiers exposés), là où l'encadré ne contenait qu'un paragraphe. .encadre p{margin:0} les collerait sans le gap. */ .encadre{display:grid;gap:.85rem;padding:1.5rem;border:1px solid var(--vert-pale); border-radius:var(--r-m);max-inline-size:70ch} .clair .encadre{border-color:var(--vert)} .encadre p{margin:0;max-inline-size:none} .encadre h3{font-size:var(--fs-h3);color:var(--fond)} .clair .encadre h3{color:var(--vert)} /* --- Liste courante (Confiance et sang-froid, Métiers exposés) ----------------------- */ /* Le site n'avait aucune puce hors .prose, réservée aux pages légales : ses liens sont dorés, illisibles sur crème. D'où une classe propre plutôt qu'un .prose détourné. */ .liste{margin:0;padding-inline-start:1.25rem;display:grid;gap:.6rem;max-inline-size:60ch} .liste li{max-inline-size:none} .liste::marker,.liste li::marker{color:var(--dore)} .clair .liste li::marker{color:var(--vert)} /* --- Deux colonnes de texte (Métiers exposés) ---------------------------- */ /* Le site n'avait aucun bloc « deux textes côte à côte » : .parcours est texte + photo, .formules impose une carte à paragraphe unique de 40ch et une grille de trois. D'où une classe propre plutôt qu'un détournement de l'une ou de l'autre (T2.1n). Chaque colonne est un ENFANT DIRECT, sans seconde classe à poser : les colonnes sont toujours des blocs de texte, jamais des cartes à variantes. Le modificateur --filet détache deux colonnes qui se lisent en parallèle (deux formats, deux formules) de deux colonnes qui se lisent l'une ou l'autre (les deux entrées). */ .colonnes{display:grid;gap:2.5rem;margin:0;padding:0;list-style:none} .colonnes > *{display:grid;gap:.85rem;align-content:start} .colonnes h3{color:var(--fond)} .clair .colonnes h3{color:var(--vert)} .colonnes--filet > *{border-block-start:1px solid var(--dore);padding-block-start:1.25rem} .clair .colonnes--filet > *{border-block-start-color:var(--vert)} @media (min-width:768px){ .colonnes{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem)} /* Second modificateur, ouvert le 14/09 : deux blocs de longueurs très inégales se lisent mal côte à côte — la colonne courte laisse un vide de la hauteur de l'autre. --pile annule la bascule à deux colonnes et garde la grille d'une seule, celle qui vaut déjà sous 768 px. Le filet reste : les deux blocs se lisent toujours en parallèle, ils sont seulement empilés. */ .colonnes--pile{grid-template-columns:1fr} } /* Air sous un paragraphe ou une grille de colonnes qui précède un bloc : ni l'une ni l'autre ne porte de marge basse, et les blocs se collaient (relecture Alex du 14/09). En sélecteurs d'adjacence pour ne toucher que ces enchaînements-là : une .colonnes qui suit une .entete-bloc a déjà son air, il ne faut pas le doubler. */ p + .colonnes{margin-block-start:2.5rem} .colonnes + .encadre,.prose + .encadre{margin-block-start:2.5rem} /* Meme correctif d'adjacence pour le tableau (Metiers exposes, bloc « Comprendre, reguler, recuperer ») : `.tableau-defilant` ne porte pas de marge basse, l'encadre des deux formules etait donc colle a la derniere ligne du tableau. Et il prend la largeur du CONTENEUR au lieu des 70ch de `.encadre` : plus court que le tableau qu'il commente, il se lisait comme une note detachee et non comme sa suite (Alex, 26/09). Largeur du conteneur, et non « du tableau » : sous 768 px `table{min-inline-size:640px}` fait defiler le tableau AU-DELA du conteneur, l'encadre s'arrete au conteneur. Les deux bords ne coincident donc qu'aux largeurs ou le tableau tient sans defiler. Seul enchainement `tableau + encadre` du site — regle ciblee, pas un defaut de classe. L'adjacence cote HTML est verrouillee par un test : un selecteur `+` casse en silence. */ .tableau-defilant + .encadre{margin-block-start:2.5rem;max-inline-size:none} /* --- Accent de page bleu (Entreprises) ----------------------------------- */ /* Le bleu ne tient qu'sur crème (6,41:1) : sur le vert-sombre il tomberait à 1,3:1. L'accent ne s'applique donc qu'aux sections .clair ; les sections sombres gardent le doré, comme partout ailleurs sur le site. */ .accent-bleu .clair .surtitre{color:var(--bleu)} /* Le surtitre bleu vaut sur le crème, pas sur une carte bleue pleine : à spécificité égale la règle ci-dessus l'emportait et écrivait du bleu sur du bleu (1:1). Vaut pour le bandeau du format signature comme pour l'encart métiers exposés. */ .accent-bleu .clair .bande--bleu .surtitre, .accent-bleu .clair .encart--bleu .surtitre{color:var(--fond)} .accent-bleu .clair .bouton{background:var(--bleu);color:var(--fond)} .accent-bleu .clair .bouton:hover{background:var(--bleu-sombre)} .accent-bleu .clair .bouton--secondaire{background:transparent;color:var(--bleu); border-color:var(--bleu)} .accent-bleu .chiffre-cle__nombre{color:var(--bleu)} /* .final est une carte crème sur section verte : elle n'hérite pas de .clair, il faut donc lui repasser l'accent explicitement. */ .accent-bleu .final .surtitre{color:var(--bleu)} .accent-bleu .final .bouton{background:var(--bleu);color:var(--fond)} .accent-bleu .final .bouton:hover{background:var(--bleu-sombre)} .accent-bleu .final .lien-texte{color:var(--bleu)} /* --- Liste des formats (Entreprises) ------------------------------------- */ /* Le format signature est un .bande ; les cinq autres sont des lignes : vignette, nom + durée, description. Pas de carte, pas de fond (DECISIONS.md). */ .surtitre--liste{margin-block:2.5rem 1.25rem} .formats{display:grid;margin:0;padding:0;list-style:none} .format{display:grid;grid-template-columns:150px 1fr;gap:1rem 1.125rem;align-items:center; padding-block:1.375rem;border-block-start:1px solid rgba(15,110,86,.22)} .format:last-child{border-block-end:1px solid rgba(15,110,86,.22)} .format img{display:block;inline-size:150px;block-size:112px;object-fit:cover;border-radius:14px} .format__titre{display:grid;gap:.15rem} .format h3{margin:0;color:var(--vert)} .format__duree{font-size:var(--fs-petit);font-weight:600;color:var(--gris-texte); font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1} /* La description passe sous la vignette tant qu'il n'y a que deux colonnes. */ .format > p{grid-column:1/-1;margin:0;font-size:1rem;line-height:1.5;max-inline-size:58ch} /* --- Contexte détaillé (Entreprises) ------------------------------------- */ /* Trois groupes séparés par un filet doré, chiffre en tête de chaque constat. Ni carte, ni encadré, ni repli : le chiffre porte l'argument, la phrase l'explique et la source le tient (DECISIONS.md). */ .contexte{display:grid;margin:0;padding:0;list-style:none} .contexte__groupe{display:grid;gap:1.25rem;margin-block-start:2.25rem; padding-block-start:1.375rem;border-block-start:1px solid var(--dore)} .contexte__stats{display:grid;gap:2.25rem} .stat{display:grid;gap:.375rem;align-content:start} /* Chiffre en Cormorant lining, comme .preuves (accueil) et .chiffres-cles (À propos). */ .stat b{font-family:var(--serif);font-weight:600;line-height:1;color:var(--fond); font-size:clamp(2.25rem,4vw,3.25rem)} .stat p{margin:0;font-size:1.0625rem;line-height:1.45;max-inline-size:34ch} /* --vert-pale et non --sourdine : le §5 réserve la sourdine au fond de nuit du pied. */ .contexte cite{display:block;font-style:normal;font-size:var(--fs-petit); color:var(--vert-pale);max-inline-size:34ch} .contexte__source{max-inline-size:none} .clair .contexte cite{color:var(--gris-texte)} .contexte__chute{margin-block-start:2.75rem;font-family:var(--serif);font-size:1.625rem; font-style:italic;color:var(--vert-pale);max-inline-size:60ch} @media (min-width:768px){ .chiffres-cles--3{grid-template-columns:repeat(3,1fr)} .format{grid-template-columns:168px 210px 1fr;gap:2rem;padding-block:1.625rem} .format img{inline-size:168px;block-size:126px} .format > p{grid-column:auto} .contexte__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.25rem} } /* --- Contact ------------------------------------------------------------- */ .contact-grille{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start} .carte-rdv{display:grid;gap:1rem;align-content:start;padding:1.75rem; background:var(--fond);color:var(--texte);border:1px solid rgba(15,110,86,.18); border-radius:var(--r-m);scroll-margin-block-start:6rem} .carte-rdv h2{color:var(--vert)} .carte-rdv p{margin:0;max-inline-size:36ch} .formulaire{display:grid;gap:1.25rem;scroll-margin-block-start:6rem} .formulaire__champ{display:grid;gap:.4rem} .formulaire label{font-weight:600;font-size:1rem} .formulaire input,.formulaire textarea{inline-size:100%;min-block-size:48px; padding:.7rem .9rem;font:inherit;font-size:1rem;color:var(--texte); background:var(--blanc);border:1px solid var(--gris);border-radius:12px} .formulaire textarea{resize:vertical} .formulaire input:focus-visible,.formulaire textarea:focus-visible{ outline:2px solid var(--vert);outline-offset:2px} .formulaire .bouton{justify-self:start} /* Honeypot : hors écran plutôt que display:none, que certains robots détectent. */ .formulaire__pot{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px; overflow:hidden} /* Message d'erreur sans JS : envoi.php renvoie sur /contact/?erreur=1#formulaire, et :target sur le formulaire suffit à le révéler. Une page statique ne peut pas lire ?erreur=1 ; conséquence assumée : taper /contact/#formulaire à la main l'affiche aussi. Pas de rouge — la palette du §5 n'en a pas ; le doré foncé signale sans alarmer. */ .formulaire__erreur{display:none;padding:1rem 1.25rem;margin:0;max-inline-size:none; border:2px solid var(--dore-fonce);border-radius:var(--r-m);color:var(--texte)} .formulaire:target .formulaire__erreur{display:block} @media (min-width:768px){ .contact-grille{grid-template-columns:1fr minmax(280px,380px)} } /* --- Texte au long (légales, 404) ---------------------------------------- */ .prose{display:grid;gap:1.25rem;max-inline-size:65ch} .prose h2{margin-block-start:1.5rem;color:var(--fond)} /* Doré et non crème depuis le 14/09 : sur section sombre, un

de .prose se distingue mal du texte courant, qui est crème lui aussi. Le doré y mesure 6,0:1 et c'est déjà la couleur des surtitres. Un seul bloc du site est concerné, « En pratique » sur Métiers exposés — le

de l'encadré voisin, lui, reste crème (.encadre h3). */ .prose h3{color:var(--dore)} .clair .prose h2,.clair .prose h3{color:var(--vert)} .prose p{margin:0;max-inline-size:none} .prose ul{margin:0;padding-inline-start:1.25rem;display:grid;gap:.5rem} .prose li{max-inline-size:none} .prose a{color:var(--dore);text-underline-offset:3px} .clair .prose a{color:var(--vert)} .prose dt{font-weight:600;margin-block-start:.75rem} .prose dd{margin:0} /* --- Témoignages (page masquée au lancement) ----------------------------- */ .temoignages{display:grid;gap:1.25rem;margin:0;padding:0;list-style:none} .temoignage{display:grid;gap:1rem;align-content:start;block-size:100%;padding:1.75rem; background:var(--fond);color:var(--texte);border:1px solid rgba(15,110,86,.18); border-radius:var(--r-m)} .temoignage blockquote{margin:0;font-family:var(--serif);font-style:italic; font-size:1.375rem;line-height:1.35;color:var(--vert-sombre)} .temoignage__personne{display:flex;align-items:center;gap:.75rem} .temoignage__photo{flex:none;inline-size:64px;block-size:64px;object-fit:cover; border-radius:var(--r-pilule)} .temoignage__nom{margin:0;font-weight:600} .temoignage__contexte{margin:0;font-size:var(--fs-petit);color:var(--gris-texte)} @media (min-width:768px){ .temoignages{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} } /* --- Bandeau de consentement --------------------------------------------- */ /* Servi sur toutes les pages depuis le layout. hidden tant que consentement.js n'a pas constaté l'absence de choix mémorisé : la règle [hidden] doit rester APRÈS la règle d'affichage, sinon display:grid l'emporterait sur le display:none du navigateur. */ .bandeau-consentement{position:fixed;inset-inline:0;inset-block-end:0;z-index:50; background:var(--nuit);color:var(--fond);border-block-start:1px solid var(--nuit-trait); padding-block:1rem;font-size:var(--fs-petit)} .bandeau-consentement[hidden]{display:none} .bandeau-consentement__grille{display:grid;gap:1rem;align-items:center} .bandeau-consentement__texte{margin:0;max-inline-size:70ch} .bandeau-consentement__texte a{color:var(--dore);text-underline-offset:3px} .bandeau-consentement__actions{display:flex;flex-wrap:wrap;gap:.75rem} .bandeau-consentement .bouton{min-block-size:44px;padding:.6rem 1.4rem;font-size:var(--fs-petit)} @media (min-width:768px){ .bandeau-consentement__grille{grid-template-columns:1fr auto;gap:2rem} } /* --- Fil d'Ariane (pages filles du bloc B2B) ------------------------------ */ /* Une seule classe, posee sur le