/* ========================================================================== HUMAIN & PROGRÈS — style.css Feuille de style partagée du site (chargée sur toutes les pages). Contient : tokens, base, composants communs (nav, footer, boutons, CTA finale, formulaire) et fondations accessibilité. Le CSS propre à chaque page est chargé séparément (voir en bas de de chaque gabarit) pour rester lisible et modifiable page par page sans toucher au socle commun. ========================================================================== */ :root{ --navy: #0E1B2E; --navy-soft: #17293F; --navy-line: rgba(255,255,255,.14); --terracotta: #D4603A; --terracotta-dark: #AD4B2B; --paper: #F3EFE6; --paper-dim: #EAE4D6; --ink: #17202B; --ink-soft: #5C5648; --mist: rgba(255,255,255,.78); --mist-dim: rgba(255,255,255,.52); --line-dark: rgba(23,32,43,.12); --display: 'Fraunces', serif; --body: 'Public Sans', sans-serif; --mono: 'IBM Plex Mono', monospace; --wrap: 1180px; --gutter: clamp(24px, 5vw, 96px); } /* ============ RESET / BASE ============ */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; } img, svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } h1, h2, h3, h4{ font-family:var(--display); font-weight:520; margin:0; letter-spacing:-0.01em; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } .wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); } /* ============ ACCESSIBILITÉ — BASE ============ */ .skip-link{ position:absolute; left:12px; top:-60px; background:#fff; color:var(--navy); font-family:var(--body); font-weight:600; font-size:14px; padding:12px 18px; border-radius:2px; z-index:200; transition:top .15s ease; } .skip-link:focus{ top:12px; } :focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; } /* Sur fond bleu nuit, garder un focus visible avec un contraste suffisant */ .section-navy :focus-visible, .nav :focus-visible, .cta-final :focus-visible, .acc-contact :focus-visible, .site-footer :focus-visible{ outline-color:#fff; } @media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } /* ============ TYPO UTILITAIRES ============ */ .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); margin:0 0 18px; } .eyebrow--light{ color:var(--mist-dim); } /* ============ BOUTONS / LIENS ============ */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:600; font-size:15px; padding:14px 26px; border-radius:2px; border:none; cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease; white-space:nowrap; } .btn--cta{ background:var(--terracotta); color:#fff; } .btn--cta:hover{ background:var(--terracotta-dark); transform:translateY(-1px); } .btn--cta:disabled{ opacity:.6; cursor:default; transform:none; } .btn--lg{ padding:16px 34px; font-size:16px; } .btn--ghost{ border:1px solid var(--navy-line); color:var(--mist); background:transparent; } .btn--ghost:hover{ border-color:var(--mist); transform:translateY(-1px); } .link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--navy); border-bottom:1px solid var(--terracotta); padding-bottom:3px; } .link-arrow span{ transition:transform .18s ease; } .link-arrow:hover span{ transform:translateX(4px); } .link-arrow--light{ color:#fff; } /* ============ NAVIGATION ============ */ .nav{ position:sticky; top:0; z-index:50; background:rgba(14,27,46,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--navy-line); } .nav__inner{ max-width:var(--wrap); margin:0 auto; padding:18px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav__logo{ font-family:var(--display); font-size:18px; letter-spacing:.02em; color:#fff; } .nav__links{ display:flex; gap:34px; } .nav__links a{ font-size:14px; color:var(--mist-dim); transition:color .15s ease; padding:4px 0; } .nav__links a:hover{ color:#fff; } .nav__links a.is-active{ color:#fff; border-bottom:1px solid var(--terracotta); } .nav__cta{ padding:10px 20px; font-size:13px; } .nav__cta[aria-disabled="true"]{ opacity:.55; pointer-events:none; } .nav__toggle{ display:none; width:38px; height:38px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--navy-line); border-radius:2px; color:#fff; cursor:pointer; } .nav__toggle-icon, .nav__toggle-icon::before, .nav__toggle-icon::after{ content:""; display:block; width:16px; height:1px; background:#fff; position:relative; transition:transform .2s ease, opacity .2s ease; } .nav__toggle-icon::before{ position:absolute; top:-5px; } .nav__toggle-icon::after{ position:absolute; top:5px; } .nav.is-open .nav__toggle-icon{ background:transparent; } .nav.is-open .nav__toggle-icon::before{ transform:translateY(5px) rotate(45deg); } .nav.is-open .nav__toggle-icon::after{ transform:translateY(-5px) rotate(-45deg); } @media(max-width:760px){ .nav__toggle{ display:flex; } .nav__links{ display:flex; flex-direction:column; gap:0; position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px); background:var(--navy); padding:96px 32px 32px; transform:translateX(100%); transition:transform .28s ease; border-left:1px solid var(--navy-line); } .nav.is-open .nav__links{ transform:translateX(0); } .nav__links a{ font-size:17px; padding:16px 0; border-bottom:1px solid var(--navy-line); color:var(--mist); } .nav__links a.is-active{ color:#fff; } .nav__cta{ display:none; } .nav__links .nav__cta-mobile{ display:inline-flex; margin-top:28px; } .nav__scrim{ display:none; position:fixed; inset:0; background:rgba(14,27,46,.5); z-index:40; } .nav.is-open ~ .nav__scrim, .nav.is-open .nav__scrim{ display:block; } } @media(min-width:761px){ .nav__scrim{ display:none !important; } .nav__cta-mobile{ display:none; } } /* ============ SECTIONS — BASE ============ */ section{ position:relative; } .section-navy{ background:var(--navy); color:var(--mist); } .section-navy h1, .section-navy h2, .section-navy h3{ color:#fff; } .section-paper{ background:var(--paper); } .section-paper-dim{ background:var(--paper-dim); } .pad{ padding:clamp(76px,10vw,140px) 0; } .pad-tight{ padding:clamp(56px,7vw,92px) 0; } /* ============ REVEAL AU SCROLL ============ */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; } .reveal.is-visible{ opacity:1; transform:translateY(0); } @media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } } /* ============ CTA FINALE (composant partagé — Accueil / À propos / Notre approche / Formations) ============ */ .cta-final{ background:var(--navy); color:var(--mist); } .cta-final__inner{ max-width:640px; padding:clamp(90px,12vw,150px) 0; } .cta-final h2{ font-size:clamp(30px,4.2vw,48px); color:#fff; font-weight:500; max-width:18ch; } .cta-final p{ margin-top:22px; font-size:16px; line-height:1.75; color:var(--mist); max-width:50ch; } .cta-final .btn{ margin-top:40px; } .cta-final__signature{ margin-top:56px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist-dim); } /* ============ FOOTER DE RÉFÉRENCE (toutes les pages) ============ */ .site-footer{ background:var(--navy); color:var(--mist); padding:clamp(56px,7vw,80px) 0 32px; } .site-footer__top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; padding-bottom:clamp(36px,5vw,52px); border-bottom:1px solid var(--navy-line); } .site-footer__brand{ font-family:var(--display); font-size:19px; color:#fff; } .site-footer__baseline{ margin-top:10px; font-size:14px; color:var(--mist-dim); max-width:32ch; } .site-footer__nav{ display:flex; flex-wrap:wrap; gap:22px 28px; } .site-footer__nav a{ font-size:13.5px; color:var(--mist); } .site-footer__nav a:hover, .site-footer__nav a.is-active{ color:#fff; } .site-footer__bottom{ margin-top:28px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--mist-dim); } .site-footer__bottom a:hover{ color:#fff; } /* ============ RESPONSIVE GLOBAL — GARDE-FOUS ============ */ html, body{ max-width:100%; overflow-x:hidden; }