/* * components.css — Composants UI réutilisables. * Ordre : boutons → navigation → header actions → cards → badges → * qualifs-bar → cookie banner → breadcrumb → formulaires → hero → * blocs génériques. */ /* ════════════════════════════════════════════════════════════════════ * BOUTONS * ════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.625rem 1.25rem; /* 10px 20px */ font-size: var(--text-sm); font-weight: var(--fw-semi); line-height: 1; border-radius: var(--radius-sm); border: 2px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer; /* Annule explicitement la couleur bleue des liens génériques sur les */ color: var(--fg); transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); } .btn:focus-visible { outline: 2px solid var(--bw-blue); outline-offset: 2px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ── btn-primary — Signature rouge Brightway ─────────────────────── */ .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); letter-spacing: 0.02em; /* P10 core */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); /* E4 hairline */ } .btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); /* E4 hover variant */ } .btn-primary:active { background: var(--bw-red-hover); } /* ── btn-secondary — Contour, pas de fond ────────────────────────── */ .btn-secondary { background: transparent; color: var(--accent); border-color: var(--accent); } .btn-secondary:hover, .btn-secondary:focus-visible { background: var(--bw-red-light); color: var(--accent-hover); border-color: var(--accent-hover); } [data-theme="dark"] .btn-secondary:hover { background: rgba(255, 82, 71, 0.12); } /* ── btn-ghost — Texte seul, effet discret ───────────────────────── */ .btn-ghost { background: transparent; color: var(--fg-muted); border-color: transparent; } .btn-ghost:hover, .btn-ghost:focus-visible { background: var(--surface); color: var(--fg); } /* ── btn-neutral — Contour gris (non-CTA, ex: cookie banner) ─────── */ .btn-neutral { background: transparent; color: var(--fg-muted); border-color: var(--border); } .btn-neutral:hover, .btn-neutral:focus-visible { background: var(--surface); color: var(--fg); border-color: var(--bw-gray-dark); } /* ── Tailles ─────────────────────────────────────────────────────── */ .btn-sm { padding: 0.375rem 0.875rem; font-size: var(--text-xs); } .btn-lg { padding: 0.875rem 1.75rem; font-size: var(--text-base); } .btn-full { width: 100%; justify-content: center; } /* ── État loading ────────────────────────────────────────────────── */ .btn.is-loading { position: relative; color: transparent; pointer-events: none; } .btn.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: bw-spin 0.6s linear infinite; } @keyframes bw-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation: none; } } /* ════════════════════════════════════════════════════════════════════ * NAVIGATION PRINCIPALE * Cibles : sortie réelle de wp_nav_menu() avec menu_class="primary-nav__list" * * ════════════════════════════════════════════════════════════════════ */ /* ── Conteneur desktop ───────────────────────────────────────────── */ .primary-nav { display: flex; align-items: center; } /* Reset liste */ .primary-nav__list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; } /* ── Items de premier niveau ─────────────────────────────────────── */ .primary-nav__list > .menu-item { position: relative; flex-shrink: 0; } /* * Items avec sous-menu : flex pour aligner lien + .dropdown-toggle * sur la même ligne. flex-wrap est appliqué uniquement en mobile * (cf. @media max-width: 1023px) pour permettre au .sub-menu en * position:static de basculer sous le lien+bouton dans le drawer. * En desktop, le sub-menu est en position:absolute → flex-wrap * provoquait le retour à la ligne du chevron quand l'item rétrécissait. */ .primary-nav__list > .menu-item-has-children { display: flex; align-items: center; } .primary-nav__list > .menu-item-has-children > a { flex: 1; } .primary-nav__list > .menu-item > a { display: block; padding: var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--fg-muted); border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; transition: color var(--transition), background-color var(--transition); } .primary-nav__list > .menu-item > a:hover, .primary-nav__list > .menu-item > a:focus-visible, .primary-nav__list > .menu-item.current-menu-item > a, .primary-nav__list > .menu-item.current-menu-ancestor > a { color: var(--fg); background: var(--surface); } .primary-nav__list > .menu-item.current-menu-item > a { color: var(--accent); } /* ── Label non-cliquable (ex: "Pour qui ?") ─────────────────────── */ .primary-nav__list > .menu-item.is-label > a { cursor: default; pointer-events: none; color: var(--fg-muted); } /* ── Bouton dropdown (injecté par nav.js) ────────────────────────── */ .dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: -6px; padding: 0; background: none; border: none; cursor: pointer; color: var(--fg-muted); border-radius: var(--radius-sm); vertical-align: middle; transition: color var(--transition), background-color var(--transition); } .dropdown-toggle:hover, .dropdown-toggle:focus-visible { background: var(--surface); color: var(--fg); } .dropdown-toggle svg { display: block; transition: transform var(--transition); pointer-events: none; } .dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* ── Sous-menus (dropdowns) ──────────────────────────────────────── */ .primary-nav__list > .menu-item > .sub-menu { position: absolute; top: calc(100% + var(--space-2)); left: 0; min-width: 220px; list-style: none; margin: 0; padding: var(--space-2); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); z-index: 50; } /* * Desktop : le hover/focus-within réactive l'affichage même quand * nav.js a posé l'attribut hidden (= UA display:none, spécificité 0,1,0). * Notre sélecteur (0,3,0) prend le dessus sans !important. */ @media (min-width: 1024px) { .primary-nav__list > .menu-item-has-children:hover > .sub-menu, .primary-nav__list > .menu-item-has-children:focus-within > .sub-menu { display: block; } } /* Ouverture via JS clavier / clic bouton (toutes tailles d'écran) */ .primary-nav__list > .menu-item-has-children.dropdown-open > .sub-menu { display: block; } /* Links dans le dropdown */ .primary-nav__list > .menu-item > .sub-menu .menu-item > a { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--fg-muted); border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; transition: background-color var(--transition), color var(--transition); } .primary-nav__list > .menu-item > .sub-menu .menu-item > a:hover, .primary-nav__list > .menu-item > .sub-menu .menu-item > a:focus-visible { background: var(--surface); color: var(--fg); } /* ── CTA "Nous contacter" — contour rouge, même hauteur que btn-sm ─── */ /* * Menu principal : item .nav-cta → contour rouge Brightway, gabarit btn-sm. * Seul CTA du header depuis 2026-04-23 (le bouton "Demander un devis" a * été retiré pour lever la redondance : les 2 menaient déjà vers /contact/). */ .primary-nav__list > .menu-item.nav-cta > a { padding: 0.375rem 0.875rem; /* identique à .btn-sm */ font-size: var(--text-xs); font-weight: var(--fw-semi); line-height: 1; background: transparent; color: var(--accent); border: 2px solid var(--accent); border-radius: var(--radius-sm); } .primary-nav__list > .menu-item.nav-cta > a:hover, .primary-nav__list > .menu-item.nav-cta > a:focus-visible { background: var(--bw-red-light); color: var(--accent-hover); border-color: var(--accent-hover); } [data-theme="dark"] .primary-nav__list > .menu-item.nav-cta > a:hover, [data-theme="dark"] .primary-nav__list > .menu-item.nav-cta > a:focus-visible { background: rgba(255, 82, 71, 0.12); } /* Spacer DOM injecté par nav.js — caché par défaut, activé en mobile. Sur desktop, la nav est horizontale ; sans display:none le spacer prendrait 120px d'espace dans la rangée et pousserait les items. */ .drawer-spacer { display: none; } /* ── Mobile : overlay plein écran (.primary-nav.is-open via nav.js) ─ */ @media (max-width: 1023px) { .primary-nav { position: fixed; /* On remplace inset:0 par top/left/right + height explicite pour pouvoir utiliser 100dvh : la "dynamic viewport height" s'adapte à la barre URL iOS Safari (collapsed/expanded), ce que 100vh ou inset:0 ne font pas → le bas du drawer (et donc le CTA) restait masqué par la barre URL. Fallback 100vh pour navigateurs sans dvh. */ top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 80; background: var(--bg); overflow-y: auto; /* padding-inline = 0 pour que les séparateurs des items soient edge-to-edge (le padding horizontal est porté par les ). Pas de padding-bottom ici : WebKit iOS (Safari + Brave/Chrome iOS, tous WebKit-only) n'inclut pas le padding-bottom d'un scroll container dans le scroll extent → espace inatteignable. Le coussin de fin est porté par .primary-nav__list (enfant). */ padding: var(--space-6) 0; transform: translateX(100%); transition: transform 250ms ease; } .primary-nav.is-open { transform: translateX(0); } /* Scroll-lock du body quand le drawer est ouvert (classe posée par nav.js). Évite que le contenu glisse derrière l'overlay sur iOS Safari notamment. */ body.nav-open { overflow: hidden; } /* Drawer ouvert : le logo et les actions du header (lang, thème, BURGER) doivent rester cliquables au-dessus de l'overlay. Sans ça, .primary-nav (position:fixed; inset:0; z-index:80) recouvre le burger (statique → peint sous les positionnés z>0) et l'utilisateur ne peut plus refermer le menu. z-index:90 = au-dessus du drawer (80), sous les modales (≥100). */ body.nav-open .site-logo, body.nav-open .site-header__actions { position: relative; z-index: 90; } .primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; margin-top: var(--space-8); /* Défensif : force le UL à 100% du drawer. Normalement déjà 100% par défaut, mais évite tout résidu d'override Customizer ou plugin qui contraindrait la largeur et tronquerait les séparateurs. */ width: 100%; /* (padding-bottom retiré : même le padding-bottom sur le UL était tronqué par WebKit iOS dans certaines conditions. Le coussin est désormais un vrai
  • injecté par nav.js — voir règle .drawer-spacer ci-dessous.) */ } /* Spacer DOM injecté par nav.js. Solution de dernier recours après échec des approches padding/margin (cf. commentaire .primary-nav). La hauteur d'un élément DOM réel est toujours incluse dans le scroll extent WebKit iOS, contrairement à padding/margin. 120px couvre les barres UI iOS les plus hautes (Brave ~90px) ; env() ajoute ~34px pour le home indicator iPhone X+. */ .drawer-spacer { display: block; flex-shrink: 0; height: calc(120px + env(safe-area-inset-bottom)); } /* Drawer : .sub-menu (position:static) doit basculer sous le lien+bouton du parent. flex-wrap autorise ce retour à la ligne. */ .primary-nav__list > .menu-item-has-children { flex-wrap: wrap; } /* Séparateurs : portés par le LI (et non le ) pour s'étendre sur toute la largeur du drawer, y compris la zone du chevron .dropdown-toggle dans les items has-children. */ .primary-nav__list > .menu-item { width: 100%; /* défensif (cf. .primary-nav__list) */ border-bottom: 1px solid var(--border); } /* Override desktop : pas de fond gris en mobile sur hover/focus/current. Le padding-inline élargi des liens en drawer transformait ce gris en grosse bande peu lisible. Le rouge accent sur l'item courant reste via la règle .current-menu-item > a { color: var(--accent) }. */ .primary-nav__list > .menu-item > a:hover, .primary-nav__list > .menu-item > a:focus-visible, .primary-nav__list > .menu-item.current-menu-item > a, .primary-nav__list > .menu-item.current-menu-ancestor > a { background: transparent; } .primary-nav__list > .menu-item.nav-cta { border-bottom: none; /* margin-bottom retiré : non inclus dans le scroll extent WebKit iOS quand c'est le dernier enfant d'un overflow:auto. Le coussin est désormais sur .primary-nav__list (padding-bottom). */ } .primary-nav__list > .menu-item > .sub-menu .menu-item { border-bottom: 1px solid var(--border); } .primary-nav__list > .menu-item > .sub-menu .menu-item:last-child { border-bottom: none; } /* Chevron : marge à droite (le drawer n'a plus de padding-inline). */ .primary-nav__list > .menu-item-has-children > .dropdown-toggle { margin-right: var(--space-4); } .primary-nav__list > .menu-item > a { padding: var(--space-3) var(--space-6); font-size: var(--text-base, 1rem); font-weight: var(--fw-semi); color: var(--fg); border-bottom: none; border-radius: 0; white-space: normal; } .primary-nav__list > .menu-item > .sub-menu { position: static; flex-basis: 100%; /* repasse en dessous du lien+bouton (flex-wrap) */ border: none; box-shadow: none; border-radius: 0; /* padding 0 : l'indent visuel des sous-items est porté par le padding-left des ci-dessous, pour que les séparateurs restent edge-to-edge. */ padding: 0; background: transparent; } .primary-nav__list > .menu-item > .sub-menu .menu-item > a { /* padding-left = --space-12 (48px = 2× --space-6) → indent visuel sous le parent. padding-right = --space-6 = aligné à droite. */ padding: var(--space-2) var(--space-6) var(--space-2) var(--space-12); border-bottom: none; border-radius: 0; color: var(--fg-muted); white-space: normal; } .primary-nav__list > .menu-item.nav-cta > a { margin-top: var(--space-4); /* margin-inline pour que le bouton CTA ne touche pas les bords du drawer (qui n'a plus de padding-inline). */ margin-inline: var(--space-6); text-align: center; border-radius: var(--radius-sm); border-bottom: none; } } /* ── Toggle thème (soleil / lune) ────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--fg-muted); transition: background-color var(--transition), color var(--transition); flex-shrink: 0; } .theme-toggle:hover { background: var(--surface); color: var(--fg); } .theme-toggle svg { width: 20px; height: 20px; flex-shrink: 0; } /* Icône lune visible en light, soleil visible en dark */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* ── Burger (mobile) ─────────────────────────────────────────────── */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--fg); flex-shrink: 0; } @media (max-width: 1023px) { .nav-toggle { display: flex; } /* .primary-nav géré par l'overlay dans le bloc mobile ci-dessus */ .site-header__cta { display: none; } } .nav-toggle__bar { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--transition), opacity var(--transition); transform-origin: center; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Menu mobile overlay ─────────────────────────────────────────── */ .mobile-nav { position: fixed; inset: 0; z-index: 90; background: var(--bg); overflow-y: auto; padding: var(--space-6); transform: translateX(100%); transition: transform 250ms ease; } .mobile-nav.is-open { transform: translateX(0); } .mobile-nav__list { margin-top: var(--space-8); } .mobile-nav__link { display: block; padding: var(--space-4) 0; font-size: var(--text-lg); font-weight: var(--fw-semi); color: var(--fg); border-bottom: 1px solid var(--border); } .mobile-nav__link:hover { color: var(--accent); } .mobile-nav__sub { padding-left: var(--space-4); } .mobile-nav__sub a { display: block; padding: var(--space-3) 0; font-size: var(--text-base); color: var(--fg-muted); border-bottom: 1px solid var(--border); } /* ════════════════════════════════════════════════════════════════════ * CARDS * ════════════════════════════════════════════════════════════════════ */ .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition-md); } .card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } } .card__image { aspect-ratio: 3 / 2; overflow: hidden; } .card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; } .card:hover .card__image img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .card:hover .card__image img { transform: none; } } .card__body { padding: var(--space-6); } .card__meta { font-size: var(--text-xs); font-weight: var(--fw-semi); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-3); } .card__title { font-size: var(--text-lg); font-weight: var(--fw-semi); color: var(--fg); margin-bottom: var(--space-3); line-height: var(--lh-snug); } .card__title a { color: var(--fg); text-decoration: none; transition: color var(--transition); } .card__title a:hover, .card__title a:focus-visible { color: var(--accent); } .card__excerpt { font-size: var(--text-sm); color: var(--fg-muted); line-height: var(--lh-relaxed); } .card__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } /* Card expertise — avec icône et accroche */ .card-expertise { display: flex; flex-direction: column; height: 100%; /* occupe toute la hauteur de la cellule grid */ } /* Le body s'étire pour pousser le footer en bas — sans ça les boutons "En savoir plus" s'alignent à des hauteurs différentes selon la longueur de l'excerpt. */ .card-expertise .card__body { flex: 1 1 auto; } /* Force le titre à ~2 lignes pour aligner les excerpts entre cards — "Formation & sensibilisation" wrap sur 2 lignes tandis que les 3 autres tiennent sur 1. align-items: flex-end pousse les titres courts en bas de la zone réservée → 1ère ligne des titres courts = 2e ligne des titres longs → excerpts alignés. */ .card-expertise .card__title { min-height: 3.6rem; display: flex; align-items: flex-end; } .card-expertise .card__icon { width: 48px; height: 48px; background: var(--bw-red-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); } [data-theme="dark"] .card-expertise .card__icon { background: rgba(255, 82, 71, 0.12); } .card-expertise .card__icon svg { width: 24px; height: 24px; color: var(--accent); } /* Card référence — logo client + résumé */ .card-reference { display: flex; flex-direction: column; } .card-reference .card__body { flex: 1 0 auto; } .card-reference .card__footer { margin-top: auto; } /* Card formation — footer (séparateur + bouton Programme) aligné en bas indépendamment de la hauteur du body, comme .card-reference. */ .card-formation { display: flex; flex-direction: column; } .card-formation .card__body { flex: 1 0 auto; } .card-formation .card__footer { margin-top: auto; } .card-reference .card__logo { height: 60px; display: flex; align-items: center; margin-bottom: var(--space-4); } .card-reference .card__logo img { max-height: 48px; width: auto; max-width: 160px; object-fit: contain; } /* ════════════════════════════════════════════════════════════════════ * BADGES * ════════════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.2em 0.6em; font-size: var(--text-xs); font-weight: var(--fw-semi); border-radius: 999px; line-height: 1.2; white-space: nowrap; } .badge-success { background: rgba(30, 126, 52, 0.12); color: var(--bw-green); } [data-theme="dark"] .badge-success { background: rgba(76, 175, 114, 0.15); color: var(--bw-green); } .badge-warn { background: rgba(199, 119, 0, 0.12); color: var(--bw-orange); } .badge-neutral { background: var(--surface); color: var(--fg-muted); border: 1px solid var(--border); } .badge-red { background: var(--bw-red-light); color: var(--accent); } /* ════════════════════════════════════════════════════════════════════ * QUALIFS BAR — Bandeau des 5 qualifications (sous le header) * Règle : discret mais lisible, aucun effet clinquant. * ════════════════════════════════════════════════════════════════════ */ /* * Les styles de structure sont dans layout.css (.qualifs-bar, .qualifs-bar__list). * Ici uniquement les variantes et états spécifiques au composant. */ .qualifs-bar__item img { height: 18px; width: auto; opacity: 0.7; filter: grayscale(1); transition: opacity var(--transition), filter var(--transition); } .qualifs-bar__item:hover img { opacity: 1; filter: grayscale(0); } [data-theme="dark"] .qualifs-bar__item img { filter: grayscale(1) brightness(1.4); opacity: 0.6; } [data-theme="dark"] .qualifs-bar__item:hover img { filter: grayscale(0) brightness(1); opacity: 1; } /* ════════════════════════════════════════════════════════════════════ * COOKIE BANNER — Conformité CNIL * Règle : "Refuser" doit être aussi visible que "Accepter". * Les deux boutons ont le même poids visuel (même taille, même border). * ════════════════════════════════════════════════════════════════════ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 800; background: var(--bg); border-top: 1px solid var(--border); box-shadow: 0 -4px 24px rgb(0 0 0 / .10); padding: var(--space-4) 0; transform: translateY(0); transition: transform 300ms ease; } .cookie-banner.is-hidden { transform: translateY(110%); } .cookie-banner__inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; } @media (max-width: 767px) { .cookie-banner__inner { flex-direction: column; align-items: flex-start; } } .cookie-banner__text { flex: 1; font-size: var(--text-sm); color: var(--fg-muted); line-height: var(--lh-relaxed); min-width: 0; } .cookie-banner__text a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } @media (max-width: 767px) { .cookie-banner__actions { width: 100%; } .cookie-banner__actions .btn { flex: 1; justify-content: center; } } /* * Les deux boutons utilisent .btn + taille identique. * Accepter = .btn-secondary (contour rouge) — signal de confirmation * Refuser = .btn-neutral (contour gris) — même taille, même poids * → Conformité CNIL : aucun des deux n'est "caché" ou dévalorisé. */ .cookie-banner__accept, .cookie-banner__reject { min-width: 120px; } /* ════════════════════════════════════════════════════════════════════ * BREADCRUMB * ════════════════════════════════════════════════════════════════════ */ .breadcrumb { font-size: var(--text-sm); color: var(--fg-muted); padding: var(--space-3) 0; } /* Le conteneur flex réel est l'
      , pas le