/* ========================================================================== BEESECURE — site.css : système de design COMPLET du site beesecure.ma Aucune dépendance, aucune étape de build. Chargé sur toutes les pages : (N : même valeur dans toutes les pages, incrémentée à chaque modification) Mode d'emploi, exemples HTML et règles : /_dev/STYLEGUIDE.md RÈGLES - Ce fichier est le SOCLE COMMUN : ne pas le modifier pour une seule page. Les styles propres à une page vont dans pages.css, dans le bloc de son lot. - Contrastes de texte ≥ 4,5:1 (WCAG AA) : n'utiliser que les rôles (--fg, --fg-2, --fg-3, --accent-text, --link) pour le texte. - Bouton primaire = fond orange + texte BLEU MARINE. Jamais de texte blanc sur orange. - CSP stricte : aucun attribut style="" dans les pages ; toute variation passe par une classe (ex. .d-1 … .d-6 pour les délais d'apparition). SOMMAIRE 0. Polices (Manrope variable 200-800, Michroma capitales) 1. Jetons de design (:root) et rôles adaptatifs (clair / sombre) 2. Base, typographie, liens, focus 3. Mise en page : container, sections, grilles, split, piles 4. Titres de section, sur-titres, chapeaux 5. Boutons et liens fléchés 6. Hexagones : tuiles d'icônes, puces, motif nid d'abeille 7. En-tête, navigation, sélecteur de langue 8. Méga-menu « Expertises » 9. Menu mobile plein écran 10. Héros d'accueil 11. Héros compact de page + fil d'Ariane 12. Référentiels de l'accueil (liste statique groupée, sans défilement) 13. Cartes (simple, cliquable, sombre, expertise, appel) 14. Filtres et onglets 15. Méthode interactive (4 étapes) et frise d'étapes 16. Accordéon / FAQ 17. Livrables, schéma illustratif (pyramide), puces de référentiels, listes 18. Secteurs, piliers, engagements, repères réglementaires 19. Widget d'orientation « Par où commencer ? » 20. Bandeau d'appel à l'action 21. Formulaires et états d'envoi 22. Alertes, tableaux 23. Prose (pages légales, guide réglementaire) + sommaire collant 24. Pied de page 25. Page 404 26. Utilitaires 27. Apparitions au défilement 28. Mouvement réduit 29. Impression ========================================================================== */ /* -------------------------------------------------------------------------- 0. POLICES — auto-hébergées (licences OFL dans /assets/fonts/) -------------------------------------------------------------------------- */ @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } /* Michroma : police du logo. Sous-ensemble capitales/chiffres. Réservée aux petits sur-titres en capitales espacées (.eyebrow--brand), avec parcimonie. */ @font-face { font-family: "Michroma"; src: url("/assets/fonts/michroma-capitales.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 1. JETONS DE DESIGN -------------------------------------------------------------------------- */ :root { /* Marque */ --navy: #092F4E; /* bleu marine de marque */ --navy-600: #0D3A5F; --navy-500: #164A74; --night: #06192B; /* nuit : héros, sections profondes */ --night-2: #071E33; --night-3: #041321; /* pied de page */ --orange: #FF7618; /* orange de marque */ --orange-light: #FF994F; /* survols et petits textes orange SUR FOND SOMBRE */ --orange-dark: #B94F00; /* petits textes orange SUR FOND CLAIR (5,0:1 sur blanc) */ --orange-tint: #FFF1E6; --orange-tint-2: #FFE2CC; /* Neutres froids, légèrement bleutés */ --ink: #0B1E30; /* texte principal sur clair (16:1) */ --ink-2: #33475B; /* texte secondaire (9:1) */ --ink-3: #536579; /* texte discret (5,9:1 blanc · 5,4:1 papier) */ --line: #DCE3EA; --line-2: #C3CEDA; /* filets décoratifs (1,6:1 : jamais pour la limite d'un champ) */ --field-border: #7B8A99; /* bordure des champs de saisie (3,5:1 sur blanc, WCAG 1.4.11) */ --mist: #EEF2F6; --paper: #F6F4EF; /* papier très légèrement chaud */ --white: #FFFFFF; /* Sur fond sombre */ --on-dark: #FFFFFF; --on-dark-2: #C6D2DE; /* 11:1 sur nuit */ --on-dark-3: #93A6BA; /* 7,1:1 sur nuit · 5,5:1 sur marine */ --line-dark: rgba(255, 255, 255, .12); --line-dark-2: rgba(255, 255, 255, .22); --glass: rgba(255, 255, 255, .045); --glass-2: rgba(255, 255, 255, .08); /* États */ --ok: #0F7A4A; --ok-bg: #E7F5EE; --ok-dark: #5FD39C; --warn: #8A5A00; --warn-bg: #FFF4DB; --ko: #B42318; --ko-bg: #FDECEA; --ko-dark: #FF9C92; --info: #0B5CAD; --info-bg: #E8F1FB; /* Rôles ADAPTATIFS (redéfinis par .theme-dark et les sections sombres) */ --bg: var(--white); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --heading: var(--navy); --surface: var(--white); --surface-2: var(--mist); --border: var(--line); --border-2: var(--line-2); --accent-text: var(--orange-dark); --link: var(--navy); --focus: var(--navy); --hex-bg: var(--orange-tint); --hex-bd: rgba(255, 118, 24, .38); --hex-fg: var(--navy); /* Typographie */ --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-brand: "Michroma", "Manrope", system-ui, sans-serif; --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 5rem); --fs-h1: clamp(2.2rem, 1.3rem + 3.2vw, 4rem); --fs-h2: clamp(1.95rem, 1.3rem + 2.2vw, 3.25rem); --fs-h3: clamp(1.2rem, 1.08rem + .45vw, 1.45rem); --fs-h4: 1.125rem; --fs-lead: clamp(1.0625rem, .98rem + .4vw, 1.3rem); --fs-body: 1.0625rem; /* 17 px */ --fs-sm: .9375rem; /* 15 px */ --fs-xs: .8125rem; /* 13 px */ --lh-tight: 1.06; --lh-head: 1.15; --lh-body: 1.65; --tracking-tight: -.032em; --tracking-head: -.022em; --tracking-caps: .14em; /* Espacements (base 4 / 8 px) */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6rem; --s-12: 8rem; --section-y: clamp(4.5rem, 2.6rem + 6vw, 8rem); --gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); /* Mise en page */ --container: 1280px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --header-h: 76px; /* Rayons */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* Ombres (teintées nuit) */ --sh-1: 0 1px 2px rgba(6, 25, 43, .06), 0 1px 1px rgba(6, 25, 43, .04); --sh-2: 0 18px 40px -18px rgba(6, 25, 43, .28), 0 2px 6px rgba(6, 25, 43, .05); --sh-3: 0 40px 80px -30px rgba(6, 25, 43, .5); --sh-glow: 0 0 0 1px rgba(255, 118, 24, .35), 0 18px 50px -20px rgba(255, 118, 24, .45); /* Plans (z-index) */ --z-base: 1; --z-raised: 10; --z-mobile: 90; --z-header: 100; --z-mega: 110; --z-skip: 1000; /* Mouvement */ --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .25s; --dur-slow: .6s; /* Hexagone (pointe en haut, comme le logo) */ --hexagon: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } @media (max-width: 1279px) { :root { --header-h: 68px; } } /* Mobile : pages plus courtes (voir aussi .section-head §4 et .mt-10 §26) */ @media (max-width: 559px) { :root { --section-y: 3.5rem; } } /* Rôles sombres : héros, sections sombres, pied, menu mobile, cartes sombres */ .theme-dark, .section--dark, .section--night, .hero, .page-hero, .site-footer, .mobile-menu, .cta-band { --fg: var(--on-dark); --fg-2: var(--on-dark-2); --fg-3: var(--on-dark-3); --heading: var(--on-dark); --surface: var(--glass); --surface-2: var(--glass-2); --border: var(--line-dark); --border-2: var(--line-dark-2); --accent-text: var(--orange-light); --link: var(--on-dark); --focus: var(--orange-light); --hex-bg: #10314F; --hex-bd: rgba(255, 153, 79, .55); --hex-fg: var(--orange-light); color: var(--fg); } /* Retour au clair à l'intérieur d'une zone sombre (ex. carte blanche sur fond nuit) */ .theme-light { --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --heading: var(--navy); --surface: var(--white); --surface-2: var(--mist); --border: var(--line); --border-2: var(--line-2); --accent-text: var(--orange-dark); --link: var(--navy); --focus: var(--navy); --hex-bg: var(--orange-tint); --hex-bd: rgba(255, 118, 24, .38); --hex-fg: var(--navy); color: var(--fg); } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 450; color: var(--fg); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; overflow-x: hidden; } @supports (overflow: clip) { body { overflow-x: clip; } } body.menu-open { overflow: hidden; } img, svg, video, picture { display: block; max-width: 100%; } img { height: auto; } svg { flex: none; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; } :where(ul, ol)[role="list"], :where(ul, ol).reset { list-style: none; margin: 0; padding: 0; } address { font-style: normal; } [hidden] { display: none !important; } ::selection { background: var(--orange); color: var(--navy); } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: var(--lh-head); letter-spacing: var(--tracking-head); color: var(--heading); text-wrap: balance; } h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } h2, .h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--tracking-tight); } h3, .h3 { font-size: var(--fs-h3); } h4, .h4 { font-size: var(--fs-h4); letter-spacing: -.01em; } p { margin: 0; text-wrap: pretty; } p + p { margin-top: 1em; } strong, b { font-weight: 700; } small { font-size: var(--fs-sm); } a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: .22em; } a:hover { text-decoration-color: var(--orange); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); } :focus:not(:focus-visible) { outline: none; } /*
reçoit le focus du lien d'évitement : pas de cadre autour de toute la page */ main:focus, main:focus-visible { outline: none; } /* Lien d'évitement */ .skip-link { position: fixed; left: 1rem; top: -100px; z-index: var(--z-skip); padding: .75rem 1.1rem; border-radius: var(--r-sm); background: var(--orange); color: var(--navy); font-weight: 700; text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 1rem; outline: 3px solid var(--white); } /* -------------------------------------------------------------------------- 3. MISE EN PAGE -------------------------------------------------------------------------- */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { --container: 860px; } .container--mid { --container: 1080px; } .container--wide { --container: 1440px; } main { display: block; } .section { position: relative; padding-block: var(--section-y); background: var(--bg); color: var(--fg); } .section--tight { padding-block: calc(var(--section-y) * .62); } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .section--paper { --bg: var(--paper); } .section--mist { --bg: var(--mist); } .section--dark { --bg: var(--navy); } .section--night { --bg: var(--night); } .section--bordered { border-top: 1px solid var(--border); } /* Motif nid d'abeille discret, en fond de section (sombre ou claire) */ .section--ruche { isolation: isolate; overflow: hidden; } .section--ruche::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/assets/img/motifs/ruche-marine.svg") repeat; background-size: 48px 83.14px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 20%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 85% 20%, #000 0%, transparent 70%); } .section--dark.section--ruche::before, .section--night.section--ruche::before { background-image: url("/assets/img/motifs/ruche-clair.svg"); } .section--ruche > * { position: relative; } /* Grilles */ .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } @media (max-width: 1099px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 719px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } } /* Grille 12 colonnes (≥ 960 px) */ .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); } .grid-12 > * { grid-column: 1 / -1; } @media (min-width: 960px) { .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-12 { grid-column: 1 / -1; } .start-2 { grid-column-start: 2; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; } } /* Deux colonnes asymétriques */ .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: start; } .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split--narrow-left { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } /* Colonne étroite (≈ 400 px) : titre plafonné ; viser ≤ 25 caractères */ .split--narrow-left > :first-child h2 { font-size: clamp(1.95rem, 1.3rem + 1.6vw, 2.75rem); } .split--center { align-items: center; } .split__sticky { position: sticky; top: calc(var(--header-h) + 2rem); } @media (max-width: 959px) { .split, .split--even, .split--wide-left, .split--narrow-left { grid-template-columns: minmax(0, 1fr); } .split__sticky { position: static; } } .stack > * + * { margin-top: var(--stack, 1rem); } .stack--lg { --stack: 1.75rem; } .stack--sm { --stack: .5rem; } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, .75rem); } .cluster--lg { --cluster-gap: 1rem 1.25rem; } /* -------------------------------------------------------------------------- 4. TITRES DE SECTION -------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1.1rem; font-size: var(--fs-xs); font-weight: 750; line-height: 1.3; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-text); } .eyebrow::before { content: ""; flex: none; width: 10px; height: 11.55px; background: var(--orange); clip-path: var(--hexagon); } .eyebrow--plain::before { display: none; } .eyebrow--brand { font-family: var(--font-brand); font-weight: 400; font-size: .75rem; letter-spacing: .2em; line-height: 1.7; } .section-head { max-width: 780px; margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); } .section-head > h2 + p, .section-head > h2 + .lead { margin-top: 1.25rem; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } .section-head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.5rem clamp(2rem, 5vw, 6rem); align-items: end; } .section-head--split .section-head__aside { padding-bottom: .35rem; } .section-head--split .section-head__aside > * + * { margin-top: 1.25rem; } @media (max-width: 959px) { .section-head--split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 559px) { .section-head { margin-bottom: 2rem; } } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-2); font-weight: 450; } .text-accent { color: var(--accent-text); } .text-orange { color: var(--orange); } /* grands titres uniquement (≥ 24 px) */ .muted { color: var(--fg-3); } .title-display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.038em; font-weight: 800; } /* -------------------------------------------------------------------------- 5. BOUTONS ET LIENS FLÉCHÉS -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--surface-2); --btn-fg: var(--fg); --btn-bd: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .7rem 1.35rem; border: 1.5px solid var(--btn-bd); border-radius: var(--r-sm); background: var(--btn-bg); color: var(--btn-fg); font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -.005em; text-decoration: none; text-align: center; white-space: nowrap; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; } /* Primaire : fond orange, texte BLEU MARINE (5,1:1) */ .btn--primary { --btn-bg: var(--orange); --btn-fg: var(--navy); --btn-bd: var(--orange); } .btn--primary:hover { --btn-bg: var(--orange-light); --btn-bd: var(--orange-light); box-shadow: 0 10px 30px -12px rgba(255, 118, 24, .7); } /* Secondaire : marine plein (sur fond clair) */ .btn--secondary { --btn-bg: var(--navy); --btn-fg: var(--white); --btn-bd: var(--navy); } .btn--secondary:hover { --btn-bg: var(--navy-500); --btn-bd: var(--navy-500); } /* Fantôme : contour, s'adapte au fond (rôles) */ .btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--border-2); } .btn--ghost:hover { --btn-bd: var(--fg); --btn-bg: var(--surface-2); } /* Sur fond sombre : contour clair */ .btn--on-dark { --btn-bg: rgba(255, 255, 255, .04); --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, .34); } .btn--on-dark:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-bd: var(--white); } .btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: var(--fs-sm); } .btn--lg { min-height: 56px; padding: .95rem 1.7rem; font-size: 1.0625rem; } .btn--block { display: flex; width: 100%; } .btn__arrow { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); } .btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(3px); } .btn__arrow--down { transform: rotate(90deg); } .btn:hover .btn__arrow--down { transform: rotate(90deg) translateX(3px); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; } @media (max-width: 479px) { .btn-row--stack { flex-direction: column; align-items: stretch; } .btn-row--stack .btn { width: 100%; white-space: normal; } .btn--lg { padding-inline: 1.1rem; font-size: 1rem; } } .link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--link); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .32em; transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease); } .link-arrow svg { width: 18px; height: 18px; color: var(--accent-text); transition: transform var(--dur) var(--ease); } .link-arrow:hover, .link-arrow:focus-visible { text-decoration-color: var(--orange); } .link-arrow:hover svg, .link-arrow:focus-visible svg { transform: translateX(4px); } .link-arrow--sm { font-size: var(--fs-sm); } /* Cibles tactiles ≥ 44 px : téléphone, tablette et tout écran tactile. Seulement les vrais liens (pas les décoratifs des cartes). */ @media (max-width: 959px), (pointer: coarse) { a.link-arrow { min-height: 44px; } } /* -------------------------------------------------------------------------- 6. HEXAGONES -------------------------------------------------------------------------- */ /* Tuile d'icône hexagonale : … */ .hex { --hex-size: 56px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--hex-size); height: calc(var(--hex-size) * 1.1547); color: var(--hex-fg); } .hex::before, .hex::after { content: ""; position: absolute; clip-path: var(--hexagon); transition: background-color var(--dur) var(--ease); } .hex::before { inset: 0; background: var(--hex-bd); } .hex::after { inset: 1.5px; background: var(--hex-bg); } .hex > svg, .hex > .icon { position: relative; z-index: 1; width: 46%; height: auto; } .hex--sm { --hex-size: 40px; } .hex--lg { --hex-size: 76px; } .hex--xl { --hex-size: 104px; } .hex--solid { --hex-bg: var(--orange); --hex-bd: var(--orange); --hex-fg: var(--navy); } .hex--navy { --hex-bg: var(--navy); --hex-bd: var(--navy); --hex-fg: var(--orange); } .hex--num { font-weight: 800; font-size: calc(var(--hex-size) * .3); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .hex--num > span { position: relative; z-index: 1; } /* Icônes SVG en ligne : trait 1,75 px, couleur du texte */ .icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon--sm { width: 18px; height: 18px; } .icon--lg { width: 32px; height: 32px; } /* Motif nid d'abeille seul (bloc décoratif) */ .ruche { background: url("/assets/img/motifs/ruche-marine.svg") repeat; background-size: 48px 83.14px; } .theme-dark .ruche, .ruche--clair { background-image: url("/assets/img/motifs/ruche-clair.svg"); } .ruche--orange { background-image: url("/assets/img/motifs/ruche-orange.svg"); } /* -------------------------------------------------------------------------- 7. EN-TÊTE L'en-tête est FIXE et transparent sur le héros sombre ; il devient opaque (.is-scrolled, posé par site.js) dès que la page défile. Page sans héros sombre : ajouter .site-header--solid sur
. -------------------------------------------------------------------------- */ .site-header { --fg: var(--on-dark); --focus: var(--orange-light); position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: var(--header-h); color: var(--on-dark); border-bottom: 1px solid transparent; transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .site-header::before { /* voile très léger pour garder le menu lisible sur n'importe quelle image */ content: ""; position: absolute; inset: 0 0 -30px 0; pointer-events: none; z-index: -1; background: linear-gradient(to bottom, rgba(6, 25, 43, .55), rgba(6, 25, 43, 0)); transition: opacity .35s var(--ease); } .site-header.is-scrolled, .site-header--solid, .site-header.is-mega-open, body.menu-open .site-header { background: rgba(6, 25, 43, .97); /* bleu nuit franc : à .93 sur fond blanc, il virait au gris ardoise */ border-bottom-color: rgba(255, 255, 255, .08); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .site-header.is-scrolled, .site-header--solid { background: rgba(6, 25, 43, .97); -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px); } } .site-header.is-scrolled::before, .site-header--solid::before, .site-header.is-mega-open::before, body.menu-open .site-header::before { opacity: 0; } .site-header__inner { height: 100%; display: flex; align-items: center; gap: 1.5rem; } .brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; border-radius: var(--r-xs); } .brand img { height: 42px; width: auto; } @media (max-width: 1279px) { .brand img { height: 36px; } } .nav { margin-left: auto; display: flex; align-items: center; } .nav__list { display: flex; align-items: center; gap: .125rem; margin: 0; padding: 0; list-style: none; } .nav__link { position: relative; display: inline-flex; align-items: center; gap: .35rem; height: 44px; padding: 0 .8rem; border: 0; border-radius: var(--r-sm); background: transparent; color: rgba(255, 255, 255, .86); font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; text-decoration: none; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--white); background: rgba(255, 255, 255, .07); } .nav__link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 4px; height: 2px; background: var(--orange); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav__link[aria-current="page"], .nav__trigger.is-current { color: var(--white); } .nav__link[aria-current="page"]::after, .nav__trigger.is-current::after { transform: scaleX(1); } .nav__chevron { width: 14px; height: 14px; transition: transform .25s var(--ease); } .nav__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); } .header-actions { display: flex; align-items: center; gap: .75rem; margin-left: .5rem; } .header-cta { min-height: 42px; padding: .55rem 1.05rem; font-size: .9375rem; } /* Un seul bouton primaire par zone visible : tant que l'en-tête est transparent (au-dessus du héros, qui porte déjà le bouton orange), le bouton d'en-tête est en contour. Il redevient orange dès que la page défile (.is-scrolled) ou que le méga-menu est ouvert. */ .site-header:not(.is-scrolled):not(.is-mega-open):not(.site-header--solid) .header-cta { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, .34); box-shadow: none; } .site-header:not(.is-scrolled):not(.is-mega-open):not(.site-header--solid) .header-cta:hover { --btn-bg: var(--orange); --btn-fg: var(--navy); --btn-bd: var(--orange); } /* Sur /contact.html, le bouton mène à la page elle-même (aria-current posé par propager-partials) : masqué, pour ne pas doubler le bouton orange « Envoyer le message ». Même règle au pied (§24). */ .header-cta[aria-current="page"] { display: none; } /* Sélecteur de langue FR / EN */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--r-pill); } .lang-switch button { min-width: 36px; height: 30px; padding: 0 .55rem; border: 0; border-radius: var(--r-pill); background: transparent; color: rgba(255, 255, 255, .78); font-size: .75rem; font-weight: 800; letter-spacing: .08em; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .lang-switch button:hover { color: var(--white); } .lang-switch button[aria-pressed="true"] { background: var(--white); color: var(--navy); } /* Bouton du menu mobile */ .burger { display: none; align-items: center; justify-content: center; gap: .55rem; min-width: 44px; height: 44px; padding: 0 .75rem; margin-left: auto; border: 1px solid rgba(255, 255, 255, .26); border-radius: var(--r-sm); background: transparent; color: var(--white); font-size: .875rem; font-weight: 700; } .burger__lines { position: relative; width: 18px; height: 12px; } .burger__lines span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease); } .burger__lines span:nth-child(1) { top: 0; } .burger__lines span:nth-child(2) { top: 5px; } .burger__lines span:nth-child(3) { top: 10px; } .burger[aria-expanded="true"] .burger__lines span:nth-child(1) { top: 5px; transform: rotate(45deg); } .burger[aria-expanded="true"] .burger__lines span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__lines span:nth-child(3) { top: 5px; transform: rotate(-45deg); } @media (max-width: 1279px) { .nav, .header-actions { display: none; } .burger { display: inline-flex; } /* Sans JavaScript, le bouton Menu ne peut rien ouvrir : il cède la place à un lien de même aspect (a.burger.nav-fallback) vers le plan du site du pied de page (#plan-du-site). */ .js .nav-fallback, html:not(.js) button.burger { display: none; } } .burger.nav-fallback { text-decoration: none; } @media (max-width: 379px) { .burger__label { display: none; } } /* Sans JavaScript, ≥ 1280 px : le méga-menu s'ouvre au survol et au clavier (focus) */ @media (min-width: 1280px) { html:not(.js) [data-mega]:hover .mega, html:not(.js) [data-mega]:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } } /* -------------------------------------------------------------------------- 8. MÉGA-MENU « EXPERTISES » (dans
: position absolue sous l'en-tête) -------------------------------------------------------------------------- */ .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-mega); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --heading: var(--navy); --border: var(--line); --accent-text: var(--orange-dark); --link: var(--navy); --focus: var(--navy); --hex-bg: var(--orange-tint); --hex-bd: rgba(255, 118, 24, .38); --hex-fg: var(--navy); background: var(--white); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(6, 25, 43, .55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .3s var(--ease-out), visibility 0s linear .3s; } .mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .mega__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.08fr); gap: 2rem 2.25rem; padding-block: 2.25rem 2.5rem; } .mega__label { display: flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--orange-dark); } .mega__label::before { content: ""; width: 8px; height: 9.24px; background: var(--orange); clip-path: var(--hexagon); } .mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; } .mega__link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start; padding: .75rem .8rem; margin-inline: -.8rem; border-radius: var(--r-md); text-decoration: none; color: var(--ink); transition: background-color var(--dur) var(--ease); } .mega__link:hover, .mega__link:focus-visible { background: var(--mist); } .mega__link .hex { --hex-size: 38px; margin-top: .1rem; } .mega__link:hover .hex { --hex-bg: var(--orange); --hex-bd: var(--orange); } .mega__title { display: block; font-weight: 750; font-size: 1rem; line-height: 1.3; color: var(--navy); letter-spacing: -.01em; } .mega__desc { display: block; margin-top: .2rem; font-size: .875rem; line-height: 1.45; color: var(--ink-3); } .mega__link[aria-current="page"] { background: var(--orange-tint); } .mega__link[aria-current="page"] .mega__title { color: var(--orange-dark); } .mega__card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: .8rem; padding: 1.6rem 1.6rem 1.5rem; border-radius: var(--r-lg); background: var(--navy); color: var(--on-dark); --fg: var(--on-dark); --link: var(--on-dark); --accent-text: var(--orange-light); --focus: var(--orange-light); } .mega__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/img/motifs/ruche-clair.svg") repeat; background-size: 36px 62.35px; -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 70%); mask-image: linear-gradient(200deg, #000 10%, transparent 70%); } .mega__card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; z-index: -1; background: radial-gradient(circle, rgba(255, 118, 24, .45), transparent 65%); } .mega__card-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--white); } .mega__card-text { font-size: .9375rem; line-height: 1.5; color: var(--on-dark-2); } .mega__card-links { margin-top: auto; display: grid; gap: .55rem; padding-top: .4rem; } .mega__card .link-arrow svg { color: var(--orange-light); } .mega__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-3); } /* -------------------------------------------------------------------------- 9. MENU MOBILE PLEIN ÉCRAN (HORS de
: le flou casse position:fixed) -------------------------------------------------------------------------- */ .mobile-menu { position: fixed; inset: 0; z-index: var(--z-mobile); display: flex; flex-direction: column; padding: calc(var(--header-h) + 1rem) var(--gutter) calc(1.75rem + env(safe-area-inset-bottom)); background: var(--night); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility 0s linear .28s; } .mobile-menu::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("/assets/img/motifs/ruche-clair.svg") repeat; background-size: 48px 83.14px; -webkit-mask-image: radial-gradient(ellipse 80% 50% at 100% 100%, #000, transparent 70%); mask-image: radial-gradient(ellipse 80% 50% at 100% 100%, #000, transparent 70%); } .mobile-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; } .mobile-menu__nav { flex: 1 0 auto; } .mobile-menu__list { list-style: none; margin: 0; padding: 0; } .mobile-menu__list > li { border-bottom: 1px solid var(--line-dark); } .mobile-menu__link, .mobile-menu__acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: .6rem 0; color: var(--white); text-decoration: none; font-size: 1.3125rem; font-weight: 750; letter-spacing: -.02em; list-style: none; cursor: pointer; } .mobile-menu__acc > summary::-webkit-details-marker { display: none; } .mobile-menu__link[aria-current="page"] { color: var(--orange-light); } .mobile-menu__chev { width: 20px; height: 20px; color: var(--orange-light); transition: transform .25s var(--ease); } .mobile-menu__acc[open] .mobile-menu__chev { transform: rotate(180deg); } .mobile-menu__group { padding: .25rem 0 1rem; } .mobile-menu__group-label { margin: .9rem 0 .35rem; font-size: .75rem; font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--orange-light); } .mobile-menu__sub { list-style: none; margin: 0; padding: 0; } .mobile-menu__sub a { display: flex; align-items: center; min-height: 44px; padding: .35rem 0 .35rem .9rem; border-left: 2px solid var(--line-dark); color: var(--on-dark-2); font-size: 1.0625rem; font-weight: 600; text-decoration: none; } .mobile-menu__sub a:hover, .mobile-menu__sub a[aria-current="page"] { color: var(--white); border-left-color: var(--orange); } .mobile-menu__foot { display: grid; gap: 1.1rem; padding-top: 1.75rem; } .mobile-menu__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .mobile-menu__mail { color: var(--on-dark-2); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .mobile-menu__mail:hover { color: var(--white); } @media (min-width: 1280px) { .mobile-menu { display: none; } } /* -------------------------------------------------------------------------- 10. HÉROS D'ACCUEIL -------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(680px, 100svh, 960px); padding-top: calc(var(--header-h) + clamp(2.5rem, 7.5vh, 6rem)); padding-bottom: clamp(1.75rem, 3vw, 2.5rem); background: var(--night); } .hero__media { position: absolute; inset: 0; z-index: -3; } .hero__media picture, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__media img { object-fit: cover; object-position: 70% 45%; } @media (min-width: 1200px) { .hero__media { left: 9%; } .hero__glow { left: 72%; } } @media (min-width: 720px) and (max-width: 1199px) { .hero__media { left: 22%; } .hero__glow { left: 75%; } } .hero__media::after { /* lisibilité du texte : voile à gauche et en bas */ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 25, 43, .97) 0%, rgba(6, 25, 43, .9) 26%, rgba(6, 25, 43, .45) 52%, rgba(6, 25, 43, 0) 72%), linear-gradient(0deg, rgba(6, 25, 43, .96) 0%, rgba(6, 25, 43, 0) 34%); } /* lueur qui « respire » sur l'alvéole orange du visuel (décorative) */ .hero__glow { position: absolute; left: 69%; top: 42%; width: 34vw; height: 34vw; max-width: 560px; max-height: 560px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(circle, rgba(255, 118, 24, .38) 0%, rgba(255, 118, 24, .1) 40%, transparent 68%); mix-blend-mode: screen; opacity: .55; animation: hero-breathe 7s ease-in-out infinite; } @keyframes hero-breathe { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.94); } 50% { opacity: .75; transform: translate(-50%, -50%) scale(1.04); } } .hero__ruche { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: url("/assets/img/motifs/ruche-clair.svg") repeat; background-size: 48px 83.14px; -webkit-mask-image: radial-gradient(ellipse 55% 70% at 8% 30%, rgba(0, 0, 0, .9), transparent 72%); mask-image: radial-gradient(ellipse 55% 70% at 8% 30%, rgba(0, 0, 0, .9), transparent 72%); } .hero__inner { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2.5rem, 6vh, 5rem); } .hero__content { max-width: 760px; } .hero__title { font-size: var(--fs-display); line-height: 1.01; letter-spacing: -.04em; font-weight: 800; color: var(--white); } .hero__title > span { display: block; } .hero__accent { color: var(--orange); } .hero__lead { max-width: 660px; margin-top: clamp(1.4rem, 2.5vw, 2rem); font-size: var(--fs-lead); line-height: 1.6; color: var(--on-dark-2); } .hero__actions { margin-top: clamp(1.75rem, 3vw, 2.5rem); } /* Faits vérifiés (bas du héros) */ .hero__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark-2); } .fact { padding: 1.35rem 1.5rem 0 0; display: flex; flex-direction: column; gap: .3rem; } .fact + .fact { padding-left: 1.5rem; border-left: 1px solid var(--line-dark); } .fact__value { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--white); font-variant-numeric: tabular-nums; } .fact__value .unit { color: var(--orange); } .fact__label { font-size: var(--fs-sm); line-height: 1.45; color: var(--on-dark-2); max-width: 30ch; text-wrap: balance; } /* Animation d'entrée du héros (CSS seul : visible même sans JavaScript) */ .hero-in { animation: hero-in .9s var(--ease-out) both; } .hero-in.d-1 { animation-delay: .08s; } .hero-in.d-2 { animation-delay: .16s; } .hero-in.d-3 { animation-delay: .24s; } .hero-in.d-4 { animation-delay: .32s; } .hero-in.d-5 { animation-delay: .44s; } .hero-in.d-6 { animation-delay: .56s; } @keyframes hero-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } .hero__media img { animation: hero-zoom 2.4s var(--ease-out) both; } @keyframes hero-zoom { from { transform: scale(1.06); opacity: .4; } to { transform: none; opacity: 1; } } @media (max-width: 719px) { .hero { min-height: 0; padding-top: calc(var(--header-h) + min(62vw, 300px)); } .hero__media { inset: 0 0 auto 0; height: min(118vw, 560px); } .hero__media img { object-position: 58% 40%; } .hero__media::after { background: linear-gradient(0deg, var(--night) 0%, rgba(6, 25, 43, .88) 30%, rgba(6, 25, 43, .25) 62%, rgba(6, 25, 43, .5) 100%); } .hero__glow { left: 58%; top: 34%; width: 90vw; height: 90vw; } .hero__ruche { -webkit-mask-image: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .7) 70%, transparent); mask-image: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .7) 70%, transparent); } .hero__inner { gap: 2.5rem; } .hero__facts { grid-template-columns: minmax(0, 1fr); } .fact, .fact + .fact { display: grid; grid-template-columns: 7.75rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding: .9rem 0; border-left: 0; } .fact + .fact { border-top: 1px solid var(--line-dark); } .fact__value { font-size: 1.375rem; } } /* Sur-titre Michroma sur 2 lignes (390 px) : lignes équilibrées, puce alignée sur la 1re ligne */ @media (max-width: 479px) { .hero .eyebrow--brand { align-items: flex-start; text-wrap: balance; } .hero .eyebrow--brand::before { margin-top: calc((1.7em - 11.55px) / 2); } } /* -------------------------------------------------------------------------- 11. HÉROS COMPACT DE PAGE + FIL D'ARIANE -------------------------------------------------------------------------- */ .page-hero { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem)); padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); background: var(--night); } /* Pas de photo dans les héros de page : le visuel fort (photo nid d'abeille) est réservé au héros d'accueil (.hero) et au bandeau d'appel final (.cta-band). Ici : motif + lueur. */ .page-hero::before { /* motif nid d'abeille, à droite */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/assets/img/motifs/ruche-clair.svg") repeat; background-size: 48px 83.14px; -webkit-mask-image: radial-gradient(ellipse 55% 90% at 100% 20%, #000, transparent 70%); mask-image: radial-gradient(ellipse 55% 90% at 100% 20%, #000, transparent 70%); } .page-hero::after { /* lueur orange discrète, en haut à droite */ content: ""; position: absolute; right: -12%; top: -30%; width: 760px; height: 760px; z-index: -2; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 118, 24, .26), rgba(255, 118, 24, .08) 45%, transparent 72%); } /* Colonnes calées en haut : le sur-titre et le titre tombent au même endroit sur toutes les pages, quelle que soit la hauteur de l'encadré « En bref ». */ .page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(1.75rem, 3vw, 2.75rem); } .page-hero__grid--single { grid-template-columns: minmax(0, 820px); } .page-hero__title { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.035em; color: var(--white); } .page-hero__lead { margin-top: 1.4rem; max-width: 640px; font-size: var(--fs-lead); line-height: 1.6; color: var(--on-dark-2); } .page-hero__actions { margin-top: 2rem; } .page-hero__aside { margin-top: .4rem; padding: 1.6rem 1.6rem 1.4rem; border-radius: var(--r-lg); background: rgba(7, 30, 51, .72); border: 1px solid var(--line-dark-2); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .page-hero__aside { background: rgba(7, 30, 51, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .page-hero__aside-title { margin-bottom: 1rem; font-size: .75rem; font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--orange-light); } .facts-list { margin: 0; display: grid; gap: 0; } .facts-list > div { display: grid; gap: .2rem; padding: .8rem 0; border-top: 1px solid var(--line-dark); } .facts-list > div:first-child { border-top: 0; padding-top: 0; } .facts-list dt { font-size: .8125rem; font-weight: 700; color: var(--on-dark-3); } .facts-list dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--white); font-weight: 600; text-wrap: balance; } /* Sous 960 px, l'encadré passe sous le titre : faits sur 2 colonnes (même comportement sur toutes les pages). Sous 560 px : encadré resserré, sans son titre, et sans la ligne « Point de départ » (div.facts-list__start), redondante avec le bouton du héros. */ @media (max-width: 959px) { .page-hero__grid { grid-template-columns: minmax(0, 1fr); } .page-hero__aside { margin-top: 0; } .page-hero__aside .facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } .page-hero__aside .facts-list > div { align-content: start; } .page-hero__aside .facts-list > div:nth-child(2) { border-top: 0; padding-top: 0; } .page-hero::after { right: -40%; top: -20%; width: 560px; height: 560px; } } @media (max-width: 559px) { .page-hero__aside { padding: 1.1rem 1.2rem; } .page-hero__aside-title { display: none; } .page-hero__aside .facts-list__start { display: none; } .page-hero__aside .facts-list > div:has(+ .facts-list__start) { grid-column: 1 / -1; } /* 3 faits : le dernier sur toute la largeur */ .page-hero__aside .facts-list dd { font-size: .875rem; line-height: 1.45; } } .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; font-size: .875rem; } .breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; color: var(--on-dark-3); } .breadcrumb li + li::before { content: ""; width: 6px; height: 6.93px; background: var(--orange); clip-path: var(--hexagon); opacity: .9; } .breadcrumb a { color: var(--on-dark-2); text-decoration: none; font-weight: 600; display: inline-flex; min-height: 32px; align-items: center; } @media (max-width: 719px) { .breadcrumb a { min-height: 44px; } } /* cible tactile ≥ 44 px */ .breadcrumb a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--orange); } .breadcrumb [aria-current="page"] { color: var(--white); font-weight: 700; } /* -------------------------------------------------------------------------- 12. RÉFÉRENTIELS (accueil, sous le héros) : liste STATIQUE groupée
titre + note

Normes ISO

  • ISO/IEC 27001:2022
    • Pas de défilement (WCAG 2.2.2) ni de sigles en gras façon « barre de logos » : ce sont des outils de travail, pas des certifications (mention OBLIGATOIRE, .ref-band__note). -------------------------------------------------------------------------- */ /* Fond papier : bande distincte entre le bandeau des références (blanc) et les expertises (blanc) */ .ref-band { background: var(--paper); } .ref-band__inner { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 4vw, 4rem); align-items: start; padding-block: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); } .ref-band__title { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--orange-dark); } .ref-band__note { margin-top: .5rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); max-width: 34ch; } .ref-groups { display: grid; gap: .85rem; } .ref-group { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: .5rem 1.25rem; align-items: baseline; } .ref-group + .ref-group { padding-top: .85rem; border-top: 1px solid var(--line); } .ref-group__label { margin: 0; font-size: .8125rem; font-weight: 700; line-height: 1.4; color: var(--ink-3); } .chips--compact { gap: .4rem; } .chips--compact .chip { min-height: 32px; padding: .3rem .75rem; font-size: .8125rem; font-weight: 700; color: var(--navy); background: var(--surface); border-color: var(--line-2); } @media (max-width: 959px) { .ref-band__inner { grid-template-columns: minmax(0, 1fr); } .ref-band__note { max-width: none; } } @media (max-width: 559px) { .ref-band__inner { gap: 1.1rem; } .ref-groups, .ref-group + .ref-group { gap: .65rem; } .ref-group + .ref-group { padding-top: .65rem; } .ref-group { grid-template-columns: minmax(0, 1fr); gap: .4rem; } .chips--compact { gap: .35rem; } .chips--compact .chip { min-height: 30px; padding: .25rem .65rem; font-size: .78125rem; } } /* -------------------------------------------------------------------------- 12 bis. RÉFÉRENCES ET PARTENAIRE (accueil, juste sous le héros) Logos officiels, non retouchés. Hauteurs réglées logo par logo pour un poids visuel égal. -------------------------------------------------------------------------- */ .trust-band { background: var(--white); border-bottom: 1px solid var(--line); } .trust-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1.25rem clamp(2rem, 5vw, 5rem); padding-block: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); } .trust-band__refs { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; } .trust-band__label { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--orange-dark); white-space: nowrap; } .trust-band__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem clamp(1.5rem, 2.6vw, 2.5rem); min-height: 56px; margin: 0; padding: 0; list-style: none; } .trust-band__logo { display: flex; align-items: center; height: 56px; } .trust-band__logo img { display: block; width: auto; height: var(--logo-h, 38px); } .trust-band__logo--bnp { --logo-h: 33px; } .trust-band__logo--sofac { --logo-h: 38px; } .trust-band__logo--saham { --logo-h: 42px; } .trust-band__logo--uir { --logo-h: 56px; } .trust-band__logo--uir img { border-radius: var(--r-xs); } .trust-band__logo--cmim { --logo-h: 44px; } .trust-band__partner { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: .45rem 1.1rem; padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--line); } .trust-band__partner .trust-band__label { grid-column: 1 / -1; } .trust-band__partner-link { display: inline-flex; align-items: center; min-height: 44px; border-radius: var(--r-sm); transition: opacity var(--dur) var(--ease); } .trust-band__partner-link:hover { opacity: .85; } .trust-band__partner-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; } .trust-band__partner-link img { display: block; width: auto; height: 50px; } .trust-band__partner-text { margin: 0; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; color: var(--ink-3); max-width: 16ch; } @media (max-width: 1099px) { .trust-band__inner { grid-template-columns: minmax(0, 1fr); } .trust-band__partner { padding: 1.1rem 0 0; border-left: 0; border-top: 1px solid var(--line); } .trust-band__partner-text { max-width: none; } } @media (max-width: 559px) { .trust-band__logos { gap: .75rem 1.4rem; } .trust-band__logo { height: 46px; } .trust-band__logo--bnp { --logo-h: 27px; } .trust-band__logo--sofac { --logo-h: 31px; } .trust-band__logo--saham { --logo-h: 34px; } .trust-band__logo--uir { --logo-h: 46px; } .trust-band__logo--cmim { --logo-h: 36px; } .trust-band__partner-link img { height: 40px; } } /* -------------------------------------------------------------------------- 13. CARTES -------------------------------------------------------------------------- */ .card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--fg); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease); } .card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .card__num { font-size: .8125rem; font-weight: 800; letter-spacing: .08em; color: var(--fg-3); font-variant-numeric: tabular-nums; } .card__kicker { font-size: .75rem; font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-text); } .card__title { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -.02em; color: var(--heading); } .card__title a { color: inherit; text-decoration: none; } .card__text { color: var(--fg-2); font-size: var(--fs-body); line-height: 1.6; } .card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.45; } .card__list li { position: relative; padding-left: 1.15rem; } .card__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 8.08px; background: var(--orange); clip-path: var(--hexagon); } .card__foot { margin-top: auto; padding-top: .5rem; } /* Carte cliquable :
    …

    …

    */ .card--link { cursor: pointer; } .card--link::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } .card--link:hover, .card--link:focus-within { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--border-2); } .card--link:hover::before, .card--link:focus-within::before { transform: scaleX(1); } .card--link:hover .hex { --hex-bg: var(--orange); --hex-bd: var(--orange); --hex-fg: var(--navy); } .card--link:hover .link-arrow svg { transform: translateX(4px); } .card__stretch { color: inherit; text-decoration: none; } .card__stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; } .card__stretch:focus-visible { outline: none; } .card__stretch:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-lg); } .card .link-arrow { position: relative; z-index: 1; } /* Variantes */ .card--flat { background: var(--surface-2); border-color: transparent; } .card--paper { background: var(--paper); border-color: transparent; } .card--dark { --fg: var(--on-dark); --fg-2: var(--on-dark-2); --fg-3: var(--on-dark-3); --heading: var(--white); --accent-text: var(--orange-light); --link: var(--white); --focus: var(--orange-light); --border: var(--line-dark); --border-2: var(--line-dark-2); --hex-bg: #10314F; --hex-bd: rgba(255, 153, 79, .55); --hex-fg: var(--orange-light); background: var(--glass); } .theme-dark .card--link:hover, .section--dark .card--link:hover, .section--night .card--link:hover, .card--dark.card--link:hover { background: var(--glass-2); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7); } .card--cta { background: var(--navy); border-color: var(--navy); overflow: hidden; isolation: isolate; --fg: var(--on-dark); --fg-2: var(--on-dark-2); --fg-3: var(--on-dark-3); --heading: var(--white); --accent-text: var(--orange-light); --link: var(--white); --focus: var(--orange-light); --border: var(--line-dark); --hex-bg: var(--orange); --hex-bd: var(--orange); --hex-fg: var(--navy); } .card--cta::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9; background: url("/assets/img/motifs/ruche-clair.svg") repeat; background-size: 36px 62.35px; -webkit-mask-image: linear-gradient(160deg, transparent 30%, #000 100%); mask-image: linear-gradient(160deg, transparent 30%, #000 100%); } .card--cta.card--link:hover { background: var(--navy-600); } /* Carte d'expertise (accueil, liste des expertises, expertises liées) */ .xp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } @media (max-width: 1199px) { .xp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .xp-grid { grid-template-columns: minmax(0, 1fr); } } .xp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1099px) { .xp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .xp-grid--3 { grid-template-columns: minmax(0, 1fr); } } .xp-card { min-height: 100%; } .xp-card .card__title { font-size: 1.3125rem; } .xp-card .card__text { font-size: var(--fs-sm); line-height: 1.55; } .xp-card.is-filtered-out { display: none; } /* Titres sur 1 ou 2 lignes : même hauteur réservée, les paragraphes d'une rangée démarrent alignés */ @media (min-width: 640px) { .xp-grid:not(.xp-grid--3) .xp-card .card__title { min-height: calc(2 * 1.22em); } } /* Mobile : cartes compactes (sur-titre, titre, phrase), hexagone en haut à droite ; la carte reste entièrement cliquable (.card__stretch) */ @media (max-width: 639px) { .xp-card { padding: 1.1rem 1.25rem 1.2rem; gap: .35rem; } .xp-card .card__list, .xp-card .card__num, .xp-card .card__foot { display: none; } .xp-card .card__top { position: absolute; top: 1rem; right: 1.1rem; } .xp-card .card__top .hex { --hex-size: 36px; } .xp-card .card__kicker, .xp-card .card__title { padding-right: 3rem; } /* Carte sans sur-titre (expertises liées) : le titre seul est moins haut que l'hexagone ; on lui réserve cette hauteur pour que la phrase ne passe pas sous l'hexagone */ .xp-card .card__top + .card__title { min-height: 2.4rem; } } /* -------------------------------------------------------------------------- 14. FILTRES ET ONGLETS -------------------------------------------------------------------------- */ /* Filtres :