/* ========================================================================== Refonte — Partenariat de Ouagadougou -------------------------------------------------------------------------- Portage de la feuille de la maquette « Partenariat Ouagadougou-11 ». Le corps de la feuille est repris tel quel pour rester diffable avec la maquette d'origine : seul le bloc :root a été remplacé par les alias ci-dessous, qui branchent les noms de variables de la maquette sur les tokens du thème (assets/css/tokens.css, source unique de la charte). La direction de design est fixée sur « organique » via l'attribut data-dir posé sur dans header.php. Changer cet attribut suffit pour basculer sur sobre, dynamique ou impact : les blocs correspondants sont conservés plus bas. ========================================================================== */ :root { /* Alias maquette -> tokens du thème */ --navy: var(--po-navy); --navy-700: var(--po-navy-700); --navy-900: var(--po-navy-900); --gold: var(--po-gold); --gold-600: var(--po-gold-600); --gold-200: var(--po-gold-200); --gold-050: var(--po-gold-050); --cream: var(--po-cream); --paper: var(--po-paper); --ink: var(--po-ink); --muted: var(--po-muted); --line: var(--po-line); /* Composantes RGB : voiles, ombres et transparences. */ --navy-rgb: var(--po-navy-rgb); --navy-900-rgb: var(--po-navy-900-rgb); --navy-950-rgb: var(--po-navy-950-rgb); --gold-rgb: var(--po-gold-rgb); --white-rgb: var(--po-white-rgb); --ink-800-rgb: var(--po-ink-800-rgb); --blue-veil-rgb: var(--po-blue-veil-rgb); --blue-glow-rgb: var(--po-blue-glow-rgb); --state-error-rgb: var(--po-state-error-rgb); /* Nuances et états. */ --white: var(--po-white); --navy-800: var(--po-navy-800); --navy-050: var(--po-navy-050); --gold-light: var(--po-gold-light); --gold-deep: var(--po-gold-deep); --ink-800: var(--po-ink-800); --line-soft: var(--po-line-soft); --grey-050: var(--po-grey-050); --grey-500: var(--po-grey-500); --state-ok-bg: var(--po-state-ok-bg); --state-ok-ink: var(--po-state-ok-ink); --state-error: var(--po-state-error); --font-display: var(--po-font-display); --font-body: var(--po-font-body); --serif: var(--po-font-serif); --display-weight: var(--po-display-weight); --display-spacing: var(--po-display-spacing); --display-transform: none; --h1: var(--po-h1); --h2: var(--po-h2); --h3: var(--po-h3); --lede: var(--po-lede); --body: var(--po-body); --small: var(--po-small); --kicker: var(--po-kicker); --section-y: var(--po-section-y); --gap: var(--po-gap); --radius: var(--po-radius); --radius-sm: var(--po-radius); --radius-lg: var(--po-radius); --shadow-sm: var(--po-shadow-sm); --shadow-md: var(--po-shadow-md); --shadow-lg: var(--po-shadow-lg); --ease: var(--po-ease); --reveal-y: var(--po-reveal-y); --maxw: var(--po-maxw); /* Largeur de la barre de défilement verticale, mesurée au chargement par initScrollbarWidth(). Les blocs pleine largeur se calaient sur 100vw, qui compte la barre : le document débordait d'une quinzaine de pixels sur les navigateurs à barre classique (Windows, macOS « toujours afficher »), d'où le léger défilement horizontal. Ils retranchent désormais --sbw. */ --sbw: 0px; --vw: calc(100vw - var(--sbw)); } /* ---------- Direction: SOBRE (editorial / institutional) ---------- */ [data-dir="sobre"] { --font-display: "Spectral", Georgia, serif; --display-weight: 600; --display-spacing: -0.005em; --display-transform: none; --h1: clamp(2.5rem, 1.7rem + 3.2vw, 4rem); --radius: 8px; --radius-sm: 8px; --radius-lg: 8px; --reveal-y: 22px; } /* ---------- Direction: DYNAMIQUE (modern / engaged) ---------- */ [data-dir="dynamique"] { --font-display: "Bricolage Grotesque", system-ui, sans-serif; --display-weight: 800; --display-spacing: -0.02em; --display-transform: none; --h1: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); --radius: 8px; --radius-sm: 8px; --radius-lg: 8px; --reveal-y: 34px; } /* ---------- Direction: IMPACT (data / map forward) ---------- */ [data-dir="impact"] { --font-display: "Space Grotesk", system-ui, sans-serif; --display-weight: 600; --display-spacing: -0.015em; --display-transform: none; --h1: clamp(2.3rem, 1.6rem + 2.8vw, 3.6rem); --radius: 8px; --radius-sm: 8px; --radius-lg: 8px; --reveal-y: 24px; } /* ---------- Density ---------- */ [data-density="compact"] { --section-y: clamp(3.2rem, 2.4rem + 4vw, 5.5rem); --gap: clamp(1.1rem,.8rem+1.4vw,2rem); } [data-density="spacieux"] { --section-y: clamp(5.5rem, 3.6rem + 8vw, 10rem); --gap: clamp(2rem,1.4rem+2.6vw,4rem); } /* ---------- Normalisation ---------- Ces regles venaient du reset de Bootstrap et de l'ancienne feuille du theme. Elles sont reprises ici, une fois ces deux dependances retirees : ce sont les seules dont le site se servait, mesurees selecteur par selecteur sur quinze pages. */ svg { vertical-align: middle; } button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, select { text-transform: none; } button { border-radius: 0; } [type="button"], [type="reset"], [type="submit"], button { -webkit-appearance: button; } [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) { cursor: pointer; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } label { display: inline-block; } textarea { resize: vertical; } select { word-wrap: normal; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { float: left; width: 100%; padding: 0; margin-bottom: .5rem; line-height: inherit; } legend + * { clear: left; } iframe { border: 0; } small { font-size: .875em; } b, strong { font-weight: bolder; } sub, sup { position: relative; font-size: .75em; line-height: 0; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } dl, ol, ul { margin-top: 0; margin-bottom: 1rem; } ol, ul { padding-left: 2rem; } dt { font-weight: 700; } dd { margin-bottom: .5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } figure { margin: 0 0 1rem; } table { caption-side: bottom; border-collapse: collapse; } th { text-align: inherit; } thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; /* Colonne flexible : le pied de page reste en bas des pages courtes. */ display: flex; flex-direction: column; min-height: 100vh; font-family: var(--font-body); font-size: var(--body); line-height: 1.6; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [data-texture="on"] body { background-image: radial-gradient(rgb(var(--navy-rgb) / .018) 1px, transparent 1px); background-size: 4px 4px; } /* L'attribut hidden doit l'emporter sur le display d'un composant : une carte en display:flex resterait visible sinon. C'est le reset de Bootstrap qui rendait ce service ; il ne l'est plus. */ [hidden] { display: none !important; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); line-height: 1.08; margin: 0; text-wrap: pretty; } /* Les tailles de base venaient de Bootstrap : sans elles, un titre qu'aucun composant ne dimensionne retombait sur la valeur du navigateur. Elles suivent maintenant l'echelle de la charte. */ h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } h4 { font-size: 1.05rem; } h5, h6 { font-size: 1rem; } p { margin: 0; text-wrap: pretty; } /* ---- Titres en Chelsea Market (assets ouaga) ---- */ :root { --font-title: "Chelsea Market", "Bricolage Grotesque", system-ui, cursive; } h1, h2, .htitle, .pc-title, .mtitle, .cfeat-body h3, .profil-intro h1, .hero-copy h1, .hero-split h1, .hero-impact h1, .page-hero h1, .section-head h2, .bio-block .bio-h3, .pc-head .pc-title { font-family: var(--font-title); font-weight: 400; letter-spacing: 0; line-height: 1.12; } /* ---- (souligné pinceau géré par la direction organique ci-dessous) ---- */ .wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2.5rem, 920px); margin-inline: auto; } /* ---------- Kicker / section heading ---------- */ .kicker { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-body); font-size: var(--kicker); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-600); } .kicker::before { content: ""; width: 26px; height: 2px; background: var(--gold); border-radius: 2px; } .section-head { margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); } .section-head h2 { font-size: var(--h2); color: var(--navy); margin-top: .7rem; } .section-head .lede { font-size: var(--lede); color: var(--muted); margin-top: .85rem; max-width: 60ch; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .98rem; letter-spacing: .005em; padding: .92rem 1.5rem; border-radius: var(--radius-sm); border: 1.5px solid transparent; transition: transform .25s var(--ease), background .25s, box-shadow .25s, color .25s; will-change: transform; } .btn svg { width: 18px; height: 18px; } .btn-gold { background: var(--gold); color: var(--navy-900); box-shadow: 0 8px 20px rgb(var(--gold-rgb) / .32); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(var(--gold-rgb) / .42); background: var(--gold-light); } .btn-navy { background: var(--navy); color: var(--white); } .btn-navy:hover { transform: translateY(-2px); background: var(--navy-700); box-shadow: var(--shadow-md); } .btn-ghost { border-color: var(--line); color: var(--navy); background: transparent; } .btn-ghost:hover { border-color: var(--navy); transform: translateY(-2px); } .btn-light { background: rgb(var(--white-rgb) / .12); color:var(--white); border-color: rgb(var(--white-rgb) / .35); backdrop-filter: blur(6px); } .btn-light:hover { background: rgb(var(--white-rgb) / .2); transform: translateY(-2px); } /* ---------- Reveal animation ---------- */ [data-anim="on"] .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity .7s var(--ease), transform .7s var(--ease); } [data-anim="on"] .reveal.in { opacity: 1; transform: none; } [data-anim="on"] .reveal[data-d="1"] { transition-delay: .08s; } [data-anim="on"] .reveal[data-d="2"] { transition-delay: .16s; } [data-anim="on"] .reveal[data-d="3"] { transition-delay: .24s; } [data-anim="on"] .reveal[data-d="4"] { transition-delay: .32s; } [data-anim="on"] .reveal[data-d="5"] { transition-delay: .40s; } @media (prefers-reduced-motion: reduce) { [data-anim="on"] .reveal { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } } /* =========================================================== HEADER =========================================================== */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--white); border-bottom: 1px solid var(--line); transition: box-shadow .3s; } .site-header.scrolled { box-shadow: var(--shadow-sm); } /* Topbar marine : contact + réseaux + langue */ .topbar { background: var(--navy); color: rgb(var(--white-rgb) / .78); font-size: .8rem; } .topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; flex-wrap: wrap; } .tb-contact { display: flex; align-items: center; gap: 1.6rem; } .tb-contact a { display: inline-flex; align-items: center; gap: .45rem; color: rgb(var(--white-rgb) / .82); transition: color .2s; } .tb-contact a:hover { color: var(--gold); } .tb-contact svg { width: 15px; height: 15px; color: var(--gold); } .tb-right { display: flex; align-items: center; gap: 1rem; } .tb-socials { display: flex; align-items: center; gap: .15rem; } .tb-socials a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: rgb(var(--white-rgb) / .85); transition: all .2s; } .tb-socials a:hover { background: rgb(var(--white-rgb) / .12); color: var(--white); } .tb-socials svg { width: 18px; height: 18px; } .tb-lang { display: flex; gap: .2rem; } .tb-lang button { border: none; background: none; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: rgb(var(--white-rgb) / .6); padding: .22rem .55rem; border-radius: 6px; transition: all .2s; } .tb-lang button.on { background: var(--gold); color: var(--navy-900); } /* Barre principale : logo | recherche centrée | actions */ .header-main { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); padding: 1rem 0; } .brand { display:flex; align-items:center; gap:.7rem; flex: none; } .brand .logo-mark { width: 50px; height: 50px; flex:none; } .brand .logo-text { line-height: 1.12; } .brand .logo-text b { display:block; font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: 1rem; letter-spacing: .01em; } .brand .logo-text span { font-size: .76rem; color: var(--muted); } .brand .logo-text span strong { color: var(--navy); font-weight: 800; } .header-search { flex: 1 1 auto; max-width: 420px; display: flex; align-items: center; background: var(--white); border: 1.5px solid var(--line); border-radius: 8px; padding: .15rem .15rem .15rem .95rem; transition: border-color .2s, box-shadow .2s; } .header-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .16); } .header-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: .92rem; color: var(--ink); padding: .55rem 0; } .header-search input::placeholder { color: var(--muted); } .header-search .hs-icon { flex: none; width: 38px; height: 38px; border: none; background: none; cursor: pointer; display: grid; place-items: center; color: var(--navy); border-radius: 8px; transition: color .2s; } .header-search .hs-icon:hover { color: var(--gold-600); } .header-search .hs-icon svg { width: 19px; height: 19px; } .header-actions { display: flex; align-items: center; gap: .7rem; flex: none; margin-left: auto; } .ha-rapo { display: inline-flex; align-items: center; gap: .5rem; background: var(--gold); color: var(--navy-900); font-family: var(--font-display); font-weight: 700; font-size: .9rem; padding: .7rem 1.1rem; border-radius: 8px; transition: transform .2s, box-shadow .2s; } .ha-rapo:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgb(var(--gold-rgb) / .7); } .ha-rapo svg { width: 16px; height: 16px; } .ha-contact { display: inline-flex; align-items: center; background: var(--navy); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: .9rem; padding: .7rem 1.2rem; border-radius: 8px; transition: background .2s, transform .2s; } .ha-contact:hover { background: var(--navy-700); transform: translateY(-2px); } .icon-btn { width: 44px; height: 44px; display:grid; place-items:center; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--navy); transition: all .2s; } .icon-btn:hover { border-color: var(--gold); color: var(--gold-600); } .icon-btn svg { width: 20px; height: 20px; } .burger { display:none; } /* =========================================================== HEADER — version « Timeline » (HeaderV2) — sans menu tiroir =========================================================== */ .hv2 { position: sticky; top: 0; z-index: 60; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 6px 24px -18px rgb(var(--navy-950-rgb) / .5); } /* Tier 1 — bandeau utilitaire (navy) */ .hv2-utility { background: var(--navy); color: rgb(var(--white-rgb) / .85); font-size: .8rem; max-height: 44px; overflow: hidden; transition: max-height .35s var(--ease), opacity .3s; } .hv2.is-scrolled .hv2-utility { max-height: 0; opacity: 0; } .hv2-utility-inner { display: flex; align-items: center; justify-content: space-between; height: 44px; } .hv2-util-left { display: flex; align-items: center; gap: 1rem; } .hv2-util-left a { display: inline-flex; align-items: center; gap: .45rem; color: rgb(var(--white-rgb) / .85); transition: color .2s; text-decoration: none; } .hv2-util-left a:hover { color: var(--gold); } .hv2-util-left svg { width: 15px; height: 15px; color: var(--gold); } .hv2-util-sep { width: 1px; height: 14px; background: rgb(var(--white-rgb) / .22); } .hv2-util-right { display: flex; align-items: center; gap: 1.1rem; } .hv2-socials { display: flex; gap: .05rem; } .hv2-socials a { width: 30px; height: 30px; display: grid; place-items: center; color: rgb(var(--white-rgb) / .7); transition: color .2s, transform .2s; } .hv2-socials a:hover { color: var(--gold); transform: translateY(-1px); } .hv2-socials svg { width: 15px; height: 15px; } .lang-switch { display: flex; border: 1px solid rgb(var(--white-rgb) / .22); border-radius: 8px; overflow: hidden; flex: none; } .lang-switch button { border: none; background: none; cursor: pointer; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: .28rem .6rem; color: rgb(var(--white-rgb) / .72); transition: background .2s, color .2s; } .lang-switch button:hover { color: var(--white); } .lang-switch button.on { background: var(--gold); color: var(--navy-900); } /* Tier 2 — marque + recherche + actions */ .hv2-main { background: var(--white); } .hv2-main-inner { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); padding: .95rem 0; transition: padding .3s var(--ease); } .hv2-main-inner .brand { flex: none; } .hv2-main-inner .logo-img { height: 56px; width: auto; display: block; transition: height .3s var(--ease); } .hv2.is-scrolled .hv2-main-inner { padding: .5rem 0; } .hv2.is-scrolled .hv2-main-inner .logo-img { height: 44px; } .hv2-search { flex: 1 1 auto; max-width: 380px; margin: 0; } .hv2-actions { display: flex; align-items: center; gap: .6rem; flex: none; margin-left: auto; } .btn-hdr { height: 42px; box-sizing: border-box; padding: 0 1.05rem; font-size: .8rem; white-space: nowrap; border: 1.5px solid transparent; } .btn-gold.btn-hdr { border-color: var(--gold); } .btn-navy.btn-hdr { border-color: var(--navy); } /* Tier 3 — barre de menu (fond blanc, titres bleus, filet gris clair) */ .hv2-menubar { background: var(--white); position: relative; z-index: 2; } .hv2-menubar-inner { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; justify-content: space-between; border-top: 1px solid var(--line-soft); } .hv2-trigger { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: 0 1.15rem; height: 44px; line-height: 1; font-family: inherit; font-size: .92rem; font-weight: 700; letter-spacing: .01em; color: var(--navy); text-decoration: none; transition: color .2s; } .hv2-trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease); } .hv2-trigger:hover { color: var(--gold-600); } .hv2-trigger:hover::after { transform: scaleX(1); } /* Menus déroulants */ .hv2-item { position: relative; display: flex; align-items: stretch; } .hv2-item .hv2-trigger svg { width: 12px; height: 12px; opacity: .55; transition: transform .25s var(--ease); } .hv2-item:hover .hv2-trigger svg, .hv2-item:focus-within .hv2-trigger svg { transform: rotate(180deg); opacity: 1; } .hv2-dropdown { position: absolute; top: 100%; left: 0; min-width: 244px; background: var(--white); border: 1px solid var(--line); border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 24px 44px -26px rgb(var(--navy-950-rgb) / .45); padding: .5rem; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 40; } /* Le dernier menu à sous-rubriques touche le bord droit de la barre : ouvert vers la droite, son panneau sortait de la zone du menu. Il s'ancre donc par la droite et se déploie vers la gauche, contenu aligné à droite. */ .hv2-item.has-sub:not(:has(~ .hv2-item.has-sub)) .hv2-dropdown { left: auto; right: 0; max-width: calc(100vw - 2rem); } .hv2-item.has-sub:not(:has(~ .hv2-item.has-sub)) .hv2-dropdown a { justify-content: flex-end; } .hv2-item:hover .hv2-dropdown, .hv2-item:focus-within .hv2-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .hv2-dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border-radius: 8px; color: var(--navy); font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .18s, color .18s; } .hv2-dropdown a svg { width: 14px; height: 14px; opacity: 0; transform: translateX(-4px); color: var(--gold-600); transition: opacity .18s, transform .18s; } .hv2-dropdown a:hover { background: var(--cream); color: var(--gold-600); } .hv2-dropdown a:hover svg { opacity: 1; transform: none; } /* Bord papier déchiré (liaison header → hero) */ .header-torn { position: absolute; left: 0; right: 0; top: calc(100% - 8px); height: 34px; pointer-events: none; line-height: 0; } .header-torn img { width: 100%; height: 100%; display: block; } .hv2-torn { z-index: 1; top: calc(100% - 41px); height: 49px; } /* Barre de progression de lecture */ .hv2-progress { position: fixed; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; z-index: 120; transition: transform .1s linear; } /* Bouton burger — n'apparaît qu'en mobile (voir le palier 900px plus bas) */ .hv2-burger { display: none; width: 44px; height: 44px; margin-left: auto; place-items: center; flex: none; border: none; border-radius: 8px; background: var(--white); color: var(--navy); cursor: pointer; transition: color .2s; } .hv2-burger:hover { color: var(--gold-600); } .hv2-burger svg { width: 22px; height: 22px; } /* Responsive — entre 900 et 1080px la barre de menu défile horizontalement */ @media (max-width: 1080px) { .hv2-menubar-inner { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hv2-menubar-inner::-webkit-scrollbar { display: none; } .hv2-trigger { flex: none; white-space: nowrap; } .hv2-actions { display: none; } .hv2-search { max-width: none; } } /* Sous 900px la navigation passe entièrement dans le tiroir : la barre de menu et la recherche quittent le header, le burger les remplace. */ @media (max-width: 900px) { .hv2-burger { display: grid; } .hv2-menubar, .hv2-search { display: none; } /* Le bord déchiré remonte de 41px dans l'en-tête pour se glisser derrière la barre de menu, qui le recouvre. Celle-ci disparue, plus rien ne le masque et il mordait sur le logo et le burger : il ne déborde plus que par le bas, comme le bord déchiré de l'en-tête historique. */ .hv2-torn { top: calc(100% - 8px); height: 34px; } } @media (max-width: 680px) { .hv2-utility-inner { justify-content: center; } .hv2-util-left .hv2-util-phone, .hv2-util-sep { display: none; } } @media (max-width: 600px) { .hv2-main-inner .logo-img { height: 44px; } } /* =========================================================== TIROIR DE NAVIGATION MOBILE Panneau qui entre par la droite, voile derrière lui. =========================================================== */ .mnav-scrim { position: fixed; inset: 0; z-index: 200; background: rgb(var(--navy-950-rgb) / .55); opacity: 0; transition: opacity .3s var(--ease); } .mnav-scrim.is-open { opacity: 1; } .mnav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 201; width: min(88vw, 380px); display: flex; flex-direction: column; background: var(--navy); color: var(--white); transform: translateX(100%); transition: transform .35s var(--ease); box-shadow: -18px 0 44px -22px rgb(var(--navy-950-rgb) / .8); } .mnav.is-open { transform: none; } .mnav-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid rgb(var(--white-rgb) / .14); } .mnav-brand img { height: 40px; width: auto; display: block; background: var(--white); border-radius: 6px; padding: .3rem .45rem; } .mnav-close { flex: none; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; border: 1px solid rgb(var(--white-rgb) / .24); border-radius: 8px; background: rgb(var(--white-rgb) / .06); color: var(--white); transition: background .2s, border-color .2s, color .2s; } .mnav-close:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-900); } .mnav-close svg { width: 20px; height: 20px; } /* Seul le corps défile : l'en-tête du tiroir reste accessible. */ .mnav-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.1rem 1.1rem 1.6rem; } .mnav-search { max-width: none; margin: 0 0 1.2rem; } .mnav-item { border-bottom: 1px solid rgb(var(--white-rgb) / .12); } .mnav-row { display: flex; align-items: stretch; } .mnav-link { flex: 1; padding: .95rem .2rem; color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: .98rem; text-decoration: none; transition: color .2s; } .mnav-link:hover, .mnav-item.is-current > .mnav-row > .mnav-link { color: var(--gold); } .mnav-toggle { flex: none; width: 46px; display: grid; place-items: center; cursor: pointer; border: none; background: none; color: rgb(var(--white-rgb) / .7); transition: color .2s, transform .25s var(--ease); } .mnav-toggle:hover { color: var(--gold); } .mnav-toggle svg { width: 16px; height: 16px; } .mnav-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--gold); } .mnav-sub { display: flex; flex-direction: column; padding: 0 0 .7rem .9rem; border-left: 2px solid rgb(var(--gold-rgb) / .4); margin: 0 0 .5rem .2rem; } .mnav-sub[hidden] { display: none; } .mnav-sublink { padding: .55rem .2rem; color: rgb(var(--white-rgb) / .8); font-size: .9rem; text-decoration: none; transition: color .2s; } .mnav-sublink:hover { color: var(--gold); } .mnav-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.4rem; } .mnav-actions .btn { justify-content: center; } /* Le bouton Contact est marine : sur le fond marine du tiroir il se fondrait dans le décor, il passe donc en bouton détouré. */ .mnav-actions .btn-navy { background: transparent; border-color: rgb(var(--white-rgb) / .45); color: var(--white); } .mnav-actions .btn-navy:hover { background: var(--white); border-color: var(--white); color: var(--navy-900); } .mnav-foot { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgb(var(--white-rgb) / .14); display: flex; flex-direction: column; gap: .6rem; font-size: .86rem; } .mnav-foot > a { display: inline-flex; align-items: center; gap: .5rem; color: rgb(var(--white-rgb) / .82); text-decoration: none; } .mnav-foot > a:hover { color: var(--gold); } .mnav-foot svg { width: 15px; height: 15px; color: var(--gold); } .mnav-socials { display: flex; gap: .4rem; margin-top: .5rem; } .mnav-socials a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--white-rgb) / .1); color: var(--white); transition: background .2s, color .2s; } .mnav-socials a:hover { background: var(--gold); color: var(--navy-900); } .mnav-socials svg { width: 17px; height: 17px; color: currentColor; } /* La page ne défile plus derrière le tiroir ouvert. */ html.mnav-lock, html.mnav-lock body { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .mnav, .mnav-scrim { transition: none; } } /* Navigation */ .header-nav { border-top: 1px solid var(--line); background: var(--white); } .header-nav-inner { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; } .header-nav-inner a { position: relative; padding: .9rem 1.1rem; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); display:flex; align-items:center; gap:.35rem; transition: color .2s; } .header-nav-inner a::after { content:""; position:absolute; left:1.1rem; right:1.1rem; bottom:.55rem; height:2px; background: var(--gold); border-radius:2px; transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); } .header-nav-inner a:hover { color: var(--gold-600); } .header-nav-inner a:hover::after { transform: scaleX(1); } .header-nav-inner a.has-caret svg { width: 12px; height: 12px; opacity:.55; } @media (max-width: 1080px) { .header-nav-inner { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .header-nav-inner::-webkit-scrollbar { display: none; } .header-nav-inner a { white-space: nowrap; flex: none; } .topbar-in { justify-content: center; } .header-search { max-width: none; } .ha-rapo, .ha-contact { display: none; } } @media (max-width: 680px) { .tb-contact { display: none; } .brand .logo-text { display: none; } } .mm-rapo { background: var(--gold); color: var(--navy-900) !important; border-radius: 8px; text-align: center; margin-top: 1rem; border-bottom: none !important; } /* mobile menu */ .mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); z-index: 80; background: var(--navy); color:var(--white); padding: 1.5rem 1.4rem; transform: translateX(100%); transition: transform .4s var(--ease); display:flex; flex-direction:column; gap:.2rem; overflow:auto; } .mobile-menu.open { transform: none; box-shadow: var(--shadow-lg); } .mobile-menu a { padding: .9rem .4rem; border-bottom: 1px solid rgb(var(--white-rgb) / .1); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.9rem; } .mm-socials { display: flex; gap: .4rem; margin-top: 1.2rem; } .mm-socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--white-rgb) / .1); color: var(--white); } .mm-socials a:hover { background: var(--gold); color: var(--navy-900); } .mm-socials svg { width: 19px; height: 19px; } .menu-scrim { position: fixed; inset:0; background: rgb(var(--navy-950-rgb) / .5); z-index:70; opacity:0; pointer-events:none; transition: opacity .3s; } .menu-scrim.open { opacity:1; pointer-events:auto; } /* =========================================================== HERO (shared + per-direction tweaks) =========================================================== */ .hero { position: relative; } .hero-copy h1, .hero-split h1, .hero-impact h1 { text-wrap: normal; } .hero-slide-img { filter: grayscale(0); } /* Dynamique / default full-bleed hero */ .hero-bleed { position: relative; min-height: clamp(520px, 78vh, 760px); overflow: hidden; display:flex; align-items:center; /* Les flèches sont posées à égale distance des deux bords de la fenêtre. Le texte doit donc commencer après la flèche de gauche : tant que la gouttière (l'espace entre le bord de la fenêtre et le conteneur) suffit à la loger, on garde le retrait de la maquette ; en dessous, on pousse le texte ET les puces d'autant qu'il faut pour dégager la flèche. */ --hero-arrow-size: 48px; --hero-arrow-inset: clamp(.5rem, 1.4vw, 2rem); --hero-arrow-zone: calc(var(--hero-arrow-inset) + var(--hero-arrow-size) + 1.25rem); --hero-gutter: max(1.25rem, (100vw - var(--maxw)) / 2); --hero-indent: max(clamp(0px, 2vw, 58px), calc(var(--hero-arrow-zone) - var(--hero-gutter))); } .hero-bleed .bg { position:absolute; inset:0; } .hero-bleed .bg img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center 18%; filter: grayscale(1) contrast(1.04) brightness(.96); opacity:0; transition: opacity .8s var(--ease); } .hero-bleed .bg img.on { opacity:1; } .hero-bleed .scrim { position:absolute; inset:0; background: linear-gradient(0deg, rgb(var(--navy-900-rgb) / .6), rgb(var(--navy-900-rgb) / .12) 55%), linear-gradient(90deg, rgb(var(--navy-900-rgb) / .9) 0%, rgb(var(--navy-900-rgb) / .62) 42%, rgb(var(--navy-900-rgb) / .4) 75%, rgb(var(--navy-900-rgb) / .5) 100%), rgb(var(--blue-veil-rgb) / .34); } .hero-bleed .hero-content { position: relative; z-index:3; padding-block: clamp(2.5rem,5vw,5rem); width: min(100% - 2.5rem, var(--maxw)); margin-inline:auto; } .hero-copy { max-width: 620px; color:var(--white); margin-left: var(--hero-indent); } .hero-copy .kicker { color: var(--gold); justify-content: flex-start; text-align: left; width: 100%; } .hero-copy .kicker::before { background: var(--gold); } .hero-copy h1 { font-size: 48px !important; color:var(--white); margin: 1rem 0 1.1rem; } .hero-copy h1 .accent { color: var(--gold); } .hero-copy p { font-size: var(--lede); color: rgb(var(--white-rgb) / .9); max-width: 52ch; } .hero-cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top: 1.8rem; } /* play badge */ .play-badge { width: clamp(64px,8vw,92px); height: clamp(64px,8vw,92px); border-radius:50%; background: rgb(var(--white-rgb) / .16); backdrop-filter: blur(6px); border:2px solid rgb(var(--white-rgb) / .7); display:grid; place-items:center; color:var(--white); transition: transform .3s var(--ease), background .3s; } .play-badge:hover { transform: scale(1.06); background: var(--gold); border-color: var(--gold); color: var(--navy-900); } .play-badge svg { width: 34%; height:34%; margin-left: 8%; } .play-float { position:absolute; right: clamp(1.5rem,6vw,7rem); top: 50%; transform: translateY(-50%); z-index:3; } /* slide controls */ /* Les puces partent du même bord que le titre et le bouton. */ .hero-dots { display:flex; gap:.5rem; margin-top: 2rem; margin-left: var(--hero-indent); } .hero-dots button { width: 34px; height:5px; border-radius:3px; border:none; background: rgb(var(--white-rgb) / .35); padding:0; overflow:hidden; position:relative; } .hero-dots button.active { background: rgb(var(--white-rgb) / .4); } .hero-dots button.active .fill { position:absolute; inset:0; background: var(--gold); transform-origin:left; animation: dotfill 7s linear forwards; } /* Les diapositives déjà passées gardent leur puce pleine : le cycle se lit d'un coup d'œil, et tout se vide au retour sur la première. */ .hero-dots button.done .fill { position:absolute; inset:0; background: var(--gold); } @keyframes dotfill { from { transform: scaleX(0);} to { transform: scaleX(1);} } /* Sans animation, pas de fin d'animation : le carrousel n'avance plus tout seul, la puce active est simplement pleine. */ @media (prefers-reduced-motion: reduce) { .hero-dots button.active .fill { animation: none; transform: scaleX(1); } } .hero-arrows { position:absolute; z-index:4; top:50%; left: var(--hero-arrow-inset); right: var(--hero-arrow-inset); transform: translateY(-50%); display:flex; justify-content:space-between; pointer-events:none; } .hero-arrows button { pointer-events:auto; width: var(--hero-arrow-size); height: var(--hero-arrow-size); border-radius:50%; border:1px solid rgb(var(--white-rgb) / .4); background: rgb(var(--navy-900-rgb) / .3); color:var(--white); display:grid; place-items:center; backdrop-filter: blur(4px); transition: all .2s; } .hero-arrows button:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); } .hero-arrows svg { width:18px; height:18px; } /* Sous 900px il ne reste plus de marge pour loger les flèches sans manger le texte : la navigation passe par les puces, qui restent cliquables. */ @media (max-width: 900px) { .hero-bleed { --hero-indent: 0px; } .hero-arrows { display:none; } } /* Sobre split hero */ .hero-split { display:grid; grid-template-columns: 1.05fr 1fr; align-items:stretch; gap:0; min-height: clamp(480px,72vh,680px); } .hero-split .text-col { background: var(--cream); display:flex; align-items:center; padding: clamp(2.5rem,5vw,5rem) clamp(1.5rem,4vw,4rem) clamp(2.5rem,5vw,5rem) 0; } .hero-split .text-col .inner { max-width: 540px; } .hero-split .text-col .kicker { color: var(--gold-600); } .hero-split h1 { font-size: var(--h1); color: var(--navy); margin: 1rem 0 1.2rem; } .hero-split h1 .accent { color: var(--gold-600); font-style: italic; } .hero-split p { font-size: var(--lede); color: var(--muted); } .hero-split .img-col { position:relative; overflow:hidden; min-height: 360px; } .hero-split .img-col img { width:100%; height:100%; object-fit:cover; object-position: center 20%; } .hero-split .img-col .frame-tag { position:absolute; left: 1.5rem; bottom:1.5rem; background: rgb(var(--navy-900-rgb) / .78); color:var(--white); padding:.7rem 1.1rem; border-radius: var(--radius-sm); font-size:.85rem; backdrop-filter: blur(6px); display:flex; align-items:center; gap:.6rem; } @media (max-width: 860px){ .hero-split { grid-template-columns: 1fr; } .hero-split .text-col { padding: 2.5rem 1.25rem; } .hero-split .img-col { min-height: 320px; order:-1; } } /* Impact compact hero */ .hero-impact { position:relative; background: var(--navy); color:var(--white); overflow:hidden; } .hero-impact::before { content:""; position:absolute; inset:0; background: radial-gradient(700px 500px at 85% -10%, rgb(var(--gold-rgb) / .22), transparent 60%), radial-gradient(500px 400px at 0% 110%, rgb(var(--gold-rgb) / .10), transparent 60%); } .hero-impact .grid { position:relative; display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center; padding-block: clamp(2.8rem,5vw,4.5rem); } .hero-impact .kicker { color: var(--gold); } .hero-impact .kicker::before { background: var(--gold); } .hero-impact h1 { font-size: var(--h1); color:var(--white); margin: 1rem 0 1.1rem; } .hero-impact h1 .accent { color: var(--gold); } .hero-impact p { color: rgb(var(--white-rgb) / .85); font-size: var(--lede); max-width: 46ch; } .hero-impact .mini-stats { display:flex; flex-wrap:wrap; gap: 1.6rem 2.4rem; margin-top: 1.8rem; } .hero-impact .mini-stats .v { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2rem; color: var(--gold); line-height:1; } .hero-impact .mini-stats .l { font-size:.82rem; color: rgb(var(--white-rgb) / .75); margin-top:.3rem; max-width: 16ch; } .hero-impact .visual { position:relative; } .hero-impact .visual .photo { border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); border:1px solid rgb(var(--white-rgb) / .1); } .hero-impact .visual .photo img { width:100%; aspect-ratio: 4/5; object-fit:cover; } .hero-impact .visual .badge { position:absolute; left:-1.2rem; bottom:1.5rem; background: var(--gold); color: var(--navy-900); padding:.9rem 1.2rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); } .hero-impact .visual .badge b { display:block; font-family: var(--font-display); font-size:1.5rem; line-height:1; } .hero-impact .visual .badge span { font-size:.74rem; font-weight:600; } @media (max-width: 860px){ .hero-impact .grid { grid-template-columns: 1fr; } .hero-impact .visual .photo img { aspect-ratio: 16/10; } } /* =========================================================== HISTOIRE + MAP =========================================================== */ .section { padding-block: var(--section-y); } .section.section-tight { padding-block: calc(var(--section-y) * 0.55); } .section.cream { background: var(--cream); } .section.paper { background: var(--paper); } .section.navy { background: var(--navy); color:var(--white); } .histoire-grid { display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,5rem); align-items:center; } [data-dir="impact"] .histoire-grid { grid-template-columns: 1.05fr 1fr; } .histoire-text h2 { color: var(--navy); font-size: var(--h2); } .histoire-text p { color: var(--muted); margin-top:1.1rem; font-size: var(--body); } .histoire-text .facts { display:flex; gap: 1.8rem; margin: 1.6rem 0; flex-wrap:wrap; } .histoire-text .facts .f b { display:block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.8rem; color: var(--gold-600); line-height:1; } .histoire-text .facts .f span { font-size:.82rem; color: var(--muted); } @media (max-width: 860px){ .histoire-grid { grid-template-columns: 1fr; } } /* interactive map */ .map-wrap { position:relative; } .map-card { position:relative; border-radius: var(--radius-lg); padding: clamp(1rem,2.5vw,2rem); } [data-dir="dynamique"] .map-card { background: linear-gradient(160deg, var(--gold-050), var(--white)); box-shadow: var(--shadow-md); } [data-dir="impact"] .map-card { background: var(--paper); border:1px solid var(--line); box-shadow: var(--shadow-sm); } .map-stage { position:relative; } .map-stage img.base { width:100%; height:auto; } .hotspot { position:absolute; transform: translate(-50%,-50%); width: 26px; height:26px; background:none; border:0; padding:0; cursor:pointer; } .hotspot .pin { position:absolute; left:50%; top:50%; width:13px; height:13px; transform: translate(-50%,-50%); border-radius:50%; background: var(--gold); box-shadow: 0 0 0 4px var(--white), 0 0 0 5px rgb(var(--navy-900-rgb) / .18), 0 2px 6px rgb(var(--navy-900-rgb) / .35); transition: transform .25s var(--ease), background .25s, box-shadow .25s; } .hotspot .pin::after { content:none; } @keyframes pinPulse { 0%,100%{ box-shadow:0 4px 10px -2px rgb(var(--navy-900-rgb) / .55), 0 0 0 0 rgb(var(--gold-rgb) / .45);} 50%{ box-shadow:0 4px 10px -2px rgb(var(--navy-900-rgb) / .55), 0 0 0 7px rgb(var(--gold-rgb) / 0);} } .hotspot::after { content:""; position:absolute; left:50%; top:50%; width:13px; height:13px; border-radius:50%; transform: translate(-50%,-50%); background: var(--gold); opacity:.5; animation: ping 2.6s ease-out infinite; } .hotspot:nth-child(2)::after { animation-delay:.3s;} .hotspot:nth-child(3)::after { animation-delay:.6s;} .hotspot:nth-child(4)::after { animation-delay:.9s;} .hotspot:nth-child(5)::after { animation-delay:1.2s;} .hotspot:nth-child(6)::after { animation-delay:1.5s;} .hotspot:nth-child(7)::after { animation-delay:1.8s;} @keyframes ping { 0%{ transform:translate(-50%,-50%) scale(1); opacity:.5;} 70%,100%{ transform:translate(-50%,-50%) scale(3.4); opacity:0;} } /* Chaque point porte un transform : il crée son propre contexte d'empilement, donc le z-index de son étiquette ne vaut qu'à l'intérieur du point. Sans remonter le point lui-même, son étiquette passe sous les points suivants dans le DOM (visible sur le Burkina Faso, deuxième de la liste). */ .hotspot:hover, .hotspot:focus-visible, .hotspot.active { z-index:12; } .hotspot:hover .pin, .hotspot.active .pin { transform: translate(-50%,-50%) scale(1.25); background: var(--navy); box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--gold), 0 2px 8px rgb(var(--navy-900-rgb) / .45); } .hotspot .tip { position:absolute; bottom: calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(6px); background: var(--navy); color:var(--white); padding:.55rem .8rem; border-radius:8px; white-space:nowrap; font-size:.82rem; box-shadow: var(--shadow-md); opacity:0; pointer-events:none; transition: opacity .2s, transform .2s; z-index:5; } .hotspot .tip b { color: var(--gold); } .hotspot .tip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color: var(--navy); } .hotspot:hover .tip, .hotspot.active .tip { opacity:1; transform: translateX(-50%) translateY(0); } .map-legend { display:flex; gap:1.2rem; margin-top:1rem; flex-wrap:wrap; font-size:.82rem; color: var(--muted); } .map-legend .lg { display:flex; align-items:center; gap:.45rem; } .map-legend .sw { width:14px; height:14px; border-radius:4px; } .country-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; } .country-pills button { font-size:.8rem; font-weight:600; padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--navy); transition: all .2s; } .country-pills button:hover, .country-pills button.active { background: var(--navy); color:var(--white); border-color:var(--navy); } .country-pills { margin-top: 1.4rem; } .histoire-text .btn { margin-top: 1.7rem; } /* dots decorative accent (from Figma assets) */ .dots-accent { position:absolute; right:8px; top:-20px; width:58px; height:auto; z-index:3; pointer-events:none; opacity:.92; } @media (max-width:860px){ .dots-accent { width:46px; right:6px; top:-22px; } } /* smaller CTA (histoire) */ .btn-sm { font-size:.9rem; white-space:nowrap; } [data-dir="organique"] .btn-sm { padding:.34rem .38rem .34rem 1.1rem; gap:.55rem; } [data-dir="organique"] .btn-sm svg { width:28px; height:28px; padding:7px; } /* dynamic country fiche (M1 split) */ .country-fiche { margin-top: 1.4rem; padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--paper); border:1px solid var(--line); box-shadow: var(--shadow-sm); } [data-dir="organique"] .country-fiche { border-radius: var(--radius); } .country-fiche .cf-head { display:flex; align-items:center; gap:.8rem; } .country-fiche .cf-flag { width:42px; height:42px; flex:none; border-radius:50%; background: var(--gold-050); color: var(--gold-600); display:grid; place-items:center; } .country-fiche .cf-flag svg { width:22px; height:22px; } .country-fiche .cf-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.45rem; color: var(--navy); line-height:1.05; } .country-fiche .cf-sub { font-size:.78rem; color: var(--muted); margin-top:2px; white-space:nowrap; } .country-fiche .cf-meta { display:flex; gap: 2rem; margin-top: 1.2rem; } .country-fiche .cf-meta b { display:block; font-family: var(--font-display); font-weight: var(--display-weight); color: var(--gold-600); font-size: 1.1rem; line-height:1; } .country-fiche .cf-meta span { font-size:.74rem; color: var(--muted); } .country-fiche .cf-fact { margin-top: 1rem; padding-top: 1rem; border-top:1px solid var(--line); color: var(--muted); font-size:.92rem; max-width: 44ch; } /* =========================================================== VISION / OBJECTIF =========================================================== */ .vo-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } @media (max-width: 760px){ .vo-grid { grid-template-columns: 1fr; } } .vo-card { position:relative; padding: clamp(1.6rem,3vw,2.4rem); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); border:1px solid var(--line); overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s; } .vo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .vo-card .num { position:absolute; right: 1rem; top:.3rem; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 5rem; color: var(--gold-050); line-height:1; z-index:0; } [data-dir="dynamique"] .vo-card.accent { background: var(--navy); color:var(--white); } [data-dir="dynamique"] .vo-card.accent .num { color: rgb(var(--white-rgb) / .08); } [data-dir="dynamique"] .vo-card.accent h3 { color:var(--white); } [data-dir="dynamique"] .vo-card.accent p { color: rgb(var(--white-rgb) / .85); } .vo-card .ico { width:48px; height:48px; border-radius: var(--radius-sm); background: var(--gold-050); color: var(--gold-600); display:grid; place-items:center; margin-bottom:1rem; position:relative; z-index:1; } .vo-card .ico svg { width:24px; height:24px; } .vo-card h3 { position:relative; z-index:1; color: var(--navy); font-size: var(--h3); } .vo-card p { position:relative; z-index:1; color: var(--muted); margin-top:.7rem; } .vo-card p .hi { color: var(--navy); font-weight:700; } /* =========================================================== IMPACT (stats band) =========================================================== */ .impact-band { background: var(--gold); color: var(--navy-900); position:relative; overflow:hidden; } .impact-band.torn-top::before, .impact-band.torn-bottom::after { content:""; position:absolute; left:0; right:0; height:24px; background-size: 40px 24px; } .impact-inner { padding-block: clamp(3rem,5vw,5rem); position:relative; z-index:1; } .impact-head { text-align:center; margin-bottom: clamp(2rem,4vw,3.2rem); } .impact-head .kicker { color: var(--navy); justify-content:center; } .impact-head .kicker::before { background: var(--navy); } .impact-head h2 { color: var(--navy-900); font-size: var(--h2); margin-top:.6rem; } .impact-head p { color: rgb(var(--navy-900-rgb) / .72); margin-top:.6rem; } .impact-stats { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,1.8vw,1.4rem); } @media (max-width:760px){ .impact-stats { grid-template-columns: repeat(2,1fr); } } .stat { text-align:left; position:relative; padding: clamp(1.3rem,2.2vw,1.8rem); background: var(--navy); color:var(--white); border-radius: 8px; overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s; } .stat::before { content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background: rgb(var(--white-rgb) / .05); } .stat:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -22px rgb(var(--navy-900-rgb) / .7); } .stat-ico { width:48px; height:48px; border-radius:50%; background: var(--gold); color: var(--navy-900); display:grid; place-items:center; margin-bottom:1rem; position:relative; } .stat-ico svg { width:24px; height:24px; } .stat .v { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.8rem, 2.2rem + 2.4vw, 4rem); color:var(--white); line-height:1; } .stat .v .suffix { color: var(--gold); } .stat .l { font-size: .95rem; font-weight:600; color: rgb(var(--white-rgb) / .82); margin-top:.7rem; line-height:1.3; padding-top:.7rem; border-top:1px solid rgb(var(--white-rgb) / .16); } [data-dir="impact"] .impact-stats { gap: clamp(1rem,1.8vw,1.4rem); } [data-dir="impact"] .stat { background: var(--navy); border-radius: 8px; padding: clamp(1.3rem,2.2vw,1.8rem); } [data-dir="impact"] .stat::after { display:none; } /* =========================================================== NEWSLETTER =========================================================== */ .section.news-letter, .news-letter { position:relative; padding-block: 0; background: transparent; } .nl-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem,4vw,4rem); align-items:stretch; background: var(--navy); border-radius: 0; width: var(--vw); margin-inline: calc(50% - var(--vw) / 2); margin-block: 0; padding: clamp(2.4rem,4vw,3.4rem) max(clamp(1.6rem,4vw,3rem), calc(var(--vw) / 2 - 620px)); position: relative; overflow: visible; } .nl-grid::before, .nl-grid::after { content:""; position:absolute; left:0; right:0; height: clamp(16px,2.2vw,26px); overflow:hidden; background: url("../img/refonte/torn-navy.svg") no-repeat center bottom / 100% auto; pointer-events:none; z-index:3; } .nl-grid::before { bottom: calc(100% - 1px); transform: scaleY(-1); } .nl-grid::after { top: calc(100% - 1px); } .nl-grid .nl-copy h2, .nl-grid h2 { color: var(--white); } .nl-grid .nl-copy p, .nl-grid p { color: rgb(var(--white-rgb) / .82); } .nl-grid .kicker { color: var(--gold); } .nl-grid .kicker::before { background: var(--gold); } .nl-grid input { background: rgb(var(--white-rgb) / .1); border: 1.5px solid rgb(var(--white-rgb) / .22); color: var(--white); transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .nl-grid input::placeholder { color: rgb(var(--white-rgb) / .55); } .nl-grid input:focus { border-color: var(--gold); background: rgb(var(--white-rgb) / .14); } .nl-grid .nl-consent { color: rgb(var(--white-rgb) / .7); } @media (max-width:820px){ .nl-grid { grid-template-columns:1fr; } } .nl-photo { border-radius: 8px; overflow:hidden; box-shadow: var(--shadow-md); } .nl-photo img { width:100%; height:100%; min-height: 240px; aspect-ratio: auto; object-fit:cover; object-position: center 25%; display:block; } /* Les colonnes du bloc peuvent se réduire : sans min-width:0 la largeur intrinsèque du champ e-mail (304 px) tenait la grille ouverte et faisait déborder la page sous 340 px. */ .nl-copy, .nl-photo { min-width: 0; } .nl-copy h2 { color: var(--navy); font-size: var(--h2); } .nl-copy p { color: var(--muted); margin-top:.8rem; } .nl-form { margin-top:1.5rem; display:flex; flex-direction:column; gap:.9rem; max-width: 480px; } .nl-field { display:flex; gap:.6rem; flex-wrap:wrap; } .nl-field input { flex:1; min-width: 220px; padding: .95rem 1.1rem; border-radius: 8px; border:1.5px solid var(--line); background: var(--paper); font-size:1rem; color: var(--ink); transition: border-color .2s, box-shadow .2s; } .nl-field input:focus { outline:none; border-color: var(--gold); box-shadow: 0 0 0 4px rgb(var(--gold-rgb) / .18); } .nl-consent { font-size:.82rem; color: var(--muted); display:flex; align-items:flex-start; gap:.5rem; } .nl-consent input { margin-top:.15rem; accent-color: var(--gold-600); width: 20px; height: 20px; flex: none; cursor: pointer; } .nl-ok { color: var(--gold); font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:.5rem; animation: nlOk .45s var(--ease) both; } @keyframes nlOk { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } } /* =========================================================== ACTUALITÉS =========================================================== */ .news-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); } @media (max-width:980px){ .news-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width:620px){ .news-grid { grid-template-columns: 1fr; } } .news-card { background: var(--paper); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid var(--line); display:flex; flex-direction:column; transition: transform .3s var(--ease), box-shadow .3s; } .news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .news-card .thumb { position:relative; aspect-ratio: 16/10; overflow:hidden; } .news-card .thumb img { width:100%; height:100%; object-fit:cover; object-position:center top; transform: scale(1.24); transform-origin:center top; transition: transform .5s var(--ease); } .news-card:hover .thumb img { transform: scale(1.3); } .news-card .date { display: none; } .news-card .news-meta { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.2rem; } .news-card .news-meta .news-date { font-size:.76rem; font-weight:600; color:var(--muted); } .news-card .news-meta .news-date::before { content:"·"; margin-right:.6rem; color:var(--gold-600); } .news-card .play { position:absolute; inset:0; display:grid; place-items:center; } .news-card .play .pb { width:54px; height:54px; border-radius:50%; background:rgb(var(--navy-900-rgb) / .45); border:1.5px solid rgb(var(--white-rgb) / .7); display:grid; place-items:center; color:var(--white); backdrop-filter: blur(3px); transition: all .25s; } .news-card:hover .play .pb { background: var(--gold); color: var(--navy-900); transform: scale(1.08); } .news-card .play svg { width:18px; height:18px; margin-left:3px; } .news-card .body { padding: 1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1; } .news-card .tag { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-600); } .news-card h3 { font-size: 1.12rem; color: var(--navy); line-height:1.25; } .news-card p { font-size:.92rem; color: var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .news-card .more { margin-top:auto; font-weight:700; color: var(--gold-600); font-size:.9rem; display:inline-flex; align-items:center; gap:.4rem; transition: gap .2s; } .news-card:hover .more { gap:.7rem; } .news-card.feature { grid-column: span 1; } .news-actions { display:flex; justify-content:center; margin-top: clamp(2rem,4vw,3rem); } /* Au survol, « Toutes les actualités » passe son texte et sa flèche en doré. */ .news-actions .btn-navy:hover { color: var(--gold); } /* =========================================================== PARTENAIRES =========================================================== */ .partners-wall { display:grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; } @media (max-width:900px){ .partners-wall { grid-template-columns: repeat(3,1fr); } } @media (max-width:560px){ .partners-wall { grid-template-columns: repeat(2,1fr); } } .partner-cell { background: var(--paper); aspect-ratio: 3/2; display:grid; place-items:center; padding: 1.4rem; transition: background .25s; } .partner-cell:hover { background: var(--gold-050); } .partner-cell img { max-height: 64px; width:auto; object-fit:contain; filter: grayscale(1); opacity:.62; transition: filter .3s, opacity .3s, transform .3s; } .partner-cell:hover img { filter: grayscale(0); opacity:1; transform: scale(1.04); } /* logo strips — multiply blends the near-white texture into the cream section */ .partners-strip { display:flex; flex-direction:column; gap: clamp(.5rem,2vw,1.5rem); } .partners-strip img { width:100%; border-radius: var(--radius); mix-blend-mode: multiply; } /* logos partenaires — vectoriels, sans contour ni fond */ .partners-section { position:relative; background-color: var(--cream); padding-block: clamp(1.6rem,3vw,2.4rem); } .partners-section .section-head { margin-bottom: 0; } .partners-logos { margin-top: clamp(1.2rem,2.5vw,1.8rem) !important; } .partners-section::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.15; background-image: none; background-size: 220px 220px; mix-blend-mode: multiply; } .partners-section::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgb(var(--navy-rgb) / .05) 100%); } .partners-section > .wrap { position:relative; z-index:1; } .partners-logos { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.4rem,3vw,2.8rem) clamp(1.2rem,3vw,2.4rem); align-items:center; margin-top: clamp(2rem,4vw,3rem); } .partners-logos .pl { display:grid; place-items:center; padding: .4rem .6rem; } .partners-logos .pl img { max-width:100%; max-height: 58px; width:auto; height:auto; display:block; transition: transform .25s var(--ease), opacity .25s; } .partners-logos .pl:hover img { transform: translateY(-3px); } @media (max-width: 760px) { .partners-logos { grid-template-columns: repeat(2,1fr); gap: 1.8rem 1.2rem; } } /* =========================================================== FOOTER =========================================================== */ .site-footer { background: var(--navy); color: rgb(var(--white-rgb) / .78); position:relative; } .site-footer::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-600) 100%); z-index:3; pointer-events:none; } .footer-top { padding-top: clamp(3.4rem,5.5vw,5rem); } /* Ruban défilant des pays — fond blanc, texte bleu, séparateurs tirets */ .footer-ribbon { background:var(--white); overflow:hidden; white-space:nowrap; position:relative; z-index:2; border-bottom:1px solid rgb(var(--navy-900-rgb) / .08); } .footer-ribbon:hover .fr-track { animation-play-state:paused; } .fr-track { display:inline-flex; align-items:center; padding:.85rem 0; animation:frscroll 34s linear infinite; will-change:transform; } .fr-item { display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:.02em; color:var(--navy); text-transform:uppercase; } .fr-dash { color:var(--gold); margin:0 1.6rem; font-weight:600; } @keyframes frscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .fr-track { animation:none; } } /* ============================================================ FOOTER (Version D — compact + ruban des pays) — partagé ============================================================ */ .ft { background: var(--navy-900); color: rgb(var(--white-rgb) / .75); font-family: var(--font-body); } .ft a { text-decoration: none; color: inherit; } .ft h4 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.1rem; } .ft .ft-logo { height: 52px; width: auto; display: block; background: var(--white); padding: .6rem .85rem; border-radius: 8px; box-sizing: content-box; } .ft .ft-tag { color: rgb(var(--white-rgb) / .7); font-size: .95rem; line-height: 1.6; max-width: 38ch; margin-top: 1rem; } .ft .wrap { width: min(100% - 2.5rem, var(--maxw)); max-width: none; margin-inline: auto; padding-inline: 0; } .ft-socials { display: flex; flex-wrap: wrap; gap: .55rem; } .ft-socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--white-rgb) / .08); color: var(--white); transition: background .2s, color .2s, transform .2s; } .ft-socials a:hover { background: var(--gold); color: var(--navy-900); transform: translateY(-3px); } .ft-socials svg { width: 17px; height: 17px; } .ft-nav a { color: rgb(var(--white-rgb) / .8); font-size: .95rem; transition: color .2s; } .ft-nav a:hover { color: var(--gold); } .ft-field { display: flex; gap: .6rem; flex-wrap: wrap; } .ft-field input { flex: 1; min-width: 190px; height: 46px; padding: 0 1rem; border: 0; background: var(--white); color: var(--ink-800); font-size: .95rem; border-radius: 8px; } .ft-field input:focus { outline: none; box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .5); } .ft-field button { height: 46px; flex: none; padding: 0 1.2rem; border: 0; cursor: pointer; background: var(--gold); color: var(--navy-900); font-family: var(--font-display); font-weight: var(--display-weight); font-size: .92rem; border-radius: 7px; display: inline-flex; align-items: center; gap: .4rem; transition: background .2s; } .ft-field button:hover { background: var(--gold-light); } .ftD-ok { display: inline-flex; align-items: center; gap: .5rem; color: var(--gold); font-weight: 600; } .ft-bottom { border-top: 1px solid rgb(var(--white-rgb) / .12); padding-block: 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: rgb(var(--white-rgb) / .55); } .ft-bottom .lg { display: flex; gap: 1.3rem; flex-wrap: wrap; align-items: center; } .ft-bottom a { color: rgb(var(--white-rgb) / .7); } .ft-bottom a:hover { color: var(--gold); } .ft-lang { display: inline-flex; border: 1px solid rgb(var(--white-rgb) / .2); border-radius: 999px; overflow: hidden; } .ft-lang button { background: none; border: 0; cursor: pointer; color: rgb(var(--white-rgb) / .65); font-size: .76rem; font-weight: 700; padding: .3rem .7rem; } .ft-lang button.on { background: var(--gold); color: var(--navy-900); } /* Ruban des pays — fond blanc, texte bleu, séparateurs tirets */ .ftD .ftD-ribbon { background: var(--white); color: var(--navy); overflow: hidden; border-bottom: 1px solid rgb(var(--navy-900-rgb) / .08); } /* Le bandeau répète quatre fois la liste des pays et se décale d'un quart : à la fin du cycle la deuxième copie occupe la place de la première, le retour à zéro est invisible et il reste toujours deux copies pour couvrir l'écran, même très large. Avec deux copies seulement, un vide apparaissait à droite avant le bouclage. */ .ftD .ftD-rib-track { display: flex; width: max-content; animation: ftD-marquee 38s linear infinite; } .ftD .ftD-ribbon:hover .ftD-rib-track { animation-play-state: paused; } .ftD .ftD-rib-group { display: flex; flex: none; } .ftD .ftD-rib-item { display: inline-flex; align-items: center; gap: 1.4rem; padding: .7rem 0; padding-right: 1.4rem; white-space: nowrap; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); } .ftD .ftD-rib-dash { color: var(--gold); font-weight: 600; } @keyframes ftD-marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } } .ftD .ftD-main { display: grid; grid-template-columns: 1.3fr 1.4fr 1.3fr; gap: clamp(1.6rem, 3vw, 3rem); align-items: start; padding-block: clamp(2.2rem, 3.5vw, 3rem); } .ftD .ftD-nav { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.4rem; } .ftD .ftD-right { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .ftD .ftD-right h4 { margin-bottom: .6rem; } .ftD .ftD-right .ftD-news { margin-bottom: 1.7rem; } .ftD .ftD-news { width: 100%; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: .35rem; background: var(--white); border: 1.5px solid transparent; border-radius: 8px; padding: .32rem .32rem .32rem .95rem; transition: box-shadow .2s, border-color .2s; } .ftD .ftD-news:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(var(--gold-rgb) / .28); } .ftD .ftD-news input { flex: 1; min-width: 0; height: 44px; background: transparent; border: 0; border-radius: 0; color: var(--ink-800); padding: 0; font-size: .95rem; } .ftD .ftD-news input::placeholder { color: rgb(var(--ink-800-rgb) / .5); } .ftD .ftD-news input:focus { outline: none; box-shadow: none; } .ftD .ftD-news button { height: 44px; flex: none; border-radius: 6px; padding: 0 1.2rem; } .ftD .ftD-news button, .ft-field button { border-radius: 8px; } .ftD .ftD-news button svg { transition: transform .2s; } .ftD .ftD-news button:hover svg { transform: translateX(3px); } .ftD .ftD-news .ftD-ok { padding: .5rem 0; } @media (max-width: 820px) { .ftD .ftD-main { grid-template-columns: 1fr 1fr; } .ftD .ftD-brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .ftD .ftD-main { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ftD .ftD-rib-track { animation: none; flex-wrap: wrap; } } .footer-accent { height:4px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-600) 100%); } .footer-top { padding-block: clamp(3rem,5vw,4.8rem); display:grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: clamp(2rem,4vw,4rem); } @media (max-width:820px){ .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width:520px){ .footer-top { grid-template-columns: 1fr; gap:2.4rem; } } .footer-brand .fb { display:inline-flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; background:var(--white); padding:.7rem .95rem; border-radius:8px; } .footer-brand .fb .fb-logo { height:46px; width:auto; display:block; } .footer-brand .fb b { font-family: var(--font-display); font-weight:var(--display-weight); color:var(--white); font-size:1.05rem; line-height:1.15; } .footer-mission { color: rgb(var(--white-rgb) / .66); font-size:.92rem; line-height:1.5; max-width:38ch; margin-bottom:1.4rem; } .footer-socials { display:flex; gap:.5rem; } .footer-socials a { width:40px; height:40px; border-radius:50%; background: rgb(var(--white-rgb) / .08); border:1px solid rgb(var(--white-rgb) / .14); color:var(--white); display:grid; place-items:center; transition: all .22s var(--ease); } .footer-socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-900); transform: translateY(-3px); } .footer-socials svg { width:18px; height:18px; } .footer-col h4 { font-family: var(--font-display); font-weight:var(--display-weight); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color: var(--gold); margin-bottom:1.2rem; } .footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; } .footer-col ul a { color: rgb(var(--white-rgb) / .82); font-size:.94rem; transition: color .2s, padding-left .2s; } .footer-col:not(.footer-contact) ul a:hover { color: var(--gold); padding-left:.3rem; } .footer-contact ul li, .footer-contact ul a { display:flex; align-items:flex-start; gap:.7rem; } .footer-contact ul li { color: rgb(var(--white-rgb) / .82); font-size:.92rem; line-height:1.4; } .footer-contact .ic { width:34px; height:34px; border-radius:8px; background: rgb(var(--white-rgb) / .08); border:1px solid rgb(var(--white-rgb) / .14); color: var(--gold); display:grid; place-items:center; flex:none; transition: all .2s; } .footer-contact .ic svg { width:16px; height:16px; } .footer-contact a:hover .ic { background: var(--gold); color: var(--navy-900); border-color: var(--gold); } .footer-bottom { border-top:1px solid rgb(var(--white-rgb) / .12); padding-block:1.3rem; font-size:.82rem; color: rgb(var(--white-rgb) / .55); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; } .footer-bottom .fb-links { display:flex; align-items:center; gap:1.4rem; } .footer-bottom a { color: rgb(var(--white-rgb) / .7); transition: color .2s; } .footer-bottom a:hover { color: var(--gold); } .footer-bottom .to-top { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color: var(--gold); } .footer-bottom .to-top svg { transform: rotate(-90deg); } /* torn paper edges (brand DNA, used in dynamique) */ .torn { position:relative; } .edge-torn-top { --c: var(--cream); } /* =========================================================== VISUAL ENRICHMENTS: stat icons, chips, doubling diagram, timeline, terrain gallery =========================================================== */ /* stat icons */ .stat-ico svg { width:27px; height:27px; } /* vision chips */ .vo-chips { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.2rem; position:relative; z-index:1; } .chip { display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; padding:.42rem .85rem; border-radius:999px; background:var(--gold-050); color:var(--navy); border:1px solid var(--gold-200); } .chip svg { width:16px; height:16px; color:var(--gold-600); } /* doubling diagram */ .doubling-wrap { margin-top:1.5rem; position:relative; z-index:1; } .doubling { display:flex; align-items:flex-end; justify-content:center; gap:clamp(1.2rem,3vw,2.6rem); } .db-col { flex:0 1 150px; text-align:center; } .db-chip { display:inline-flex; align-items:baseline; gap:.12em; font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.5rem; color:var(--navy); background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-sm); border-radius:999px; padding:.3rem .9rem; margin-bottom:.7rem; line-height:1; } .db-chip i { font-style:normal; font-size:.62em; color:var(--muted); } .db-chip.big { font-size:2rem; color:var(--gold-600); border-color:var(--gold-200); background:var(--gold-050); } .db-chip.big i { color:var(--gold-600); } .db-track { height:170px; display:flex; align-items:flex-end; justify-content:center; border-bottom:2.5px solid var(--navy); } .db-fill { position:relative; width:clamp(64px,9vw,88px); transform-origin:bottom; } .db-fill.from { background:linear-gradient(var(--gold-200), var(--gold)); } .db-ref { position:absolute; top:0; left:50%; transform:translateX(-50%); width:230px; max-width:44vw; border-top:2px dashed var(--navy); opacity:.4; } .db-ref i { position:absolute; right:0; top:-1.35rem; font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); opacity:.85; white-space:nowrap; } .db-fill.stack { width:clamp(64px,9vw,88px); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-sm); } .db-seg { display:block; width:100%; } .db-seg.base { background:linear-gradient(var(--gold-200), var(--gold)); } .db-seg.add { background:linear-gradient(var(--navy-700), var(--navy)); display:flex; align-items:center; justify-content:center; border-bottom:2px solid var(--white); } .db-seg.add i { font-style:normal; font-size:.82rem; font-weight:800; color:var(--white); letter-spacing:.01em; } [data-anim="on"] .doubling-wrap.reveal .db-fill { transform:scaleY(0); transition:transform 1s var(--ease); } [data-anim="on"] .doubling-wrap.reveal.in .db-fill { transform:scaleY(1); } .db-val { font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.6rem; color:var(--navy); margin-top:.6rem; line-height:1; } .db-val.big { font-size:2.1rem; color:var(--gold-600); } .db-val span { font-size:.66em; } .db-lab { font-size:.82rem; font-weight:600; color:var(--muted); margin-top:.55rem; } .db-mid { display:flex; flex-direction:column; align-items:center; gap:.35rem; padding-bottom:4.2rem; } .db-x2 { font-family:var(--font-display); font-weight:800; font-size:1.9rem; color:var(--navy); background:var(--gold); width:62px; height:62px; border-radius:50%; display:grid; place-items:center; box-shadow:0 8px 20px -8px rgb(var(--gold-rgb) / .8); } .db-mid svg { width:22px; height:22px; } .db-caption { text-align:center; margin-top:1.3rem; font-size:.9rem; color:var(--muted); } .db-caption b { color:var(--gold-600); } /* doubling on dynamique's navy objectif card */ [data-dir="dynamique"] .vo-card.accent .db-val { color:var(--white); } [data-dir="dynamique"] .vo-card.accent .db-val.big { color:var(--gold); } [data-dir="dynamique"] .vo-card.accent .db-lab { color:rgb(var(--white-rgb) / .72); } [data-dir="dynamique"] .vo-card.accent .db-fill.from { background:linear-gradient(rgb(var(--white-rgb) / .45), rgb(var(--white-rgb) / .75)); } [data-dir="dynamique"] .vo-card.accent .db-seg.add { background:linear-gradient(var(--gold-200), var(--gold)); } [data-dir="dynamique"] .vo-card.accent .db-seg.base { background:linear-gradient(rgb(var(--white-rgb) / .55), rgb(var(--white-rgb) / .8)); } [data-dir="dynamique"] .vo-card.accent .db-caption { color:rgb(var(--white-rgb) / .72); } [data-dir="dynamique"] .vo-card.accent .db-caption b { color:var(--gold); } [data-dir="dynamique"] .vo-card.accent .db-mid { color:var(--gold); } [data-dir="dynamique"] .vo-card.accent .db-x2 { background:rgb(var(--white-rgb) / .15); border-color:rgb(var(--white-rgb) / .3); color:var(--white); } /* timeline */ .timeline { list-style:none; margin:clamp(1.5rem,3vw,2.5rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; position:relative; } .timeline::before { content:""; position:absolute; left:8%; right:8%; top:27px; height:3px; background:repeating-linear-gradient(90deg, var(--gold) 0 13px, transparent 13px 25px); border-radius:3px; z-index:0; } .tl-step { text-align:center; position:relative; z-index:1; } .tl-dot { width:56px; height:56px; border-radius:50%; margin:0 auto .9rem; display:grid; place-items:center; background:var(--paper); border:3px solid var(--gold); color:var(--navy); box-shadow:var(--shadow-sm); } .tl-dot svg { width:26px; height:26px; } .tl-year { font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.5rem; color:var(--gold-600); } .tl-step h3 { font-size:1.05rem; color:var(--navy); margin-top:.2rem; } .tl-step p { font-size:.86rem; color:var(--muted); margin-top:.45rem; text-wrap:pretty; } @media (max-width:780px){ .timeline { grid-template-columns:1fr 1fr; } .timeline::before { display:none; } } @media (max-width:430px){ .timeline { grid-template-columns:1fr; } } /* parcours — accordéon horizontal (page « Notre histoire ») */ .parcours-acc { display:flex; gap:14px; margin-top:clamp(1.8rem,3.5vw,2.8rem); height:360px; } .pa-panel { position:relative; flex:1; border-radius:8px; overflow:hidden; cursor:pointer; background:var(--navy); color:var(--white); transition:flex .5s var(--ease), box-shadow .4s var(--ease); box-shadow:var(--shadow-sm); outline:none; } .pa-panel:focus-visible { box-shadow:0 0 0 3px var(--gold); } .pa-panel.on { flex:3.6; box-shadow:var(--shadow-md); } .pa-img { position:absolute; inset:0; opacity:.32; transition:opacity .5s var(--ease), transform .8s var(--ease); } .pa-img img { width:100%; height:100%; object-fit:cover; } .pa-panel.on .pa-img { opacity:.5; transform:scale(1.04); } .pa-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgb(var(--navy-900-rgb) / .96), rgb(var(--navy-900-rgb) / .55) 55%, rgb(var(--navy-900-rgb) / .25)); } .pa-body { position:absolute; inset:0; z-index:2; padding:26px; display:flex; flex-direction:column; justify-content:flex-end; } .pa-ic { position:absolute; top:24px; left:24px; z-index:2; width:48px; height:48px; border-radius:50%; background:rgb(var(--white-rgb) / .14); display:grid; place-items:center; color:var(--gold); } .pa-ic svg { width:23px; height:23px; } .pa-year { font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.4rem; color:var(--gold); line-height:1; transition:font-size .45s var(--ease); } .pa-panel.on .pa-year { font-size:clamp(1.8rem,1.4rem+1.2vw,2.4rem); } .pa-panel h3 { font-family:var(--font-display); font-weight:var(--display-weight); font-size:1rem; color:var(--white); margin:.45rem 0 0; transition:font-size .45s var(--ease); } .pa-panel.on h3 { font-size:1.45rem; } .pa-text { font-size:.95rem; color:rgb(var(--white-rgb) / .84); margin-top:.55rem; max-width:44ch; opacity:0; max-height:0; overflow:hidden; transition:opacity .45s var(--ease) .1s, max-height .45s var(--ease); } .pa-panel.on .pa-text { opacity:1; max-height:160px; } @media (min-width:781px){ /* Douze étapes tiennent désormais dans l'accordéon : une lame fermée ne fait plus qu'une soixantaine de pixels. L'année et le titre s'y lisent donc à la verticale, de bas en haut, et redeviennent horizontaux dès que la lame s'ouvre. */ .pa-panel:not(.on) .pa-body { flex-direction:row; align-items:flex-end; justify-content:flex-start; gap:10px; padding:22px 16px; } .pa-panel:not(.on) .pa-year, .pa-panel:not(.on) h3 { writing-mode:vertical-rl; text-orientation:sideways; transform:rotate(180deg); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-height:100%; } .pa-panel:not(.on) h3 { font-size:.95rem; color:rgb(var(--white-rgb) / .82); } .pa-panel:not(.on) .pa-text { display:none; } } @media (max-width:780px){ .parcours-acc { flex-direction:column; height:auto; } /* Empilés, les panneaux fermés étaient plus courts que le picto posé en absolu : l'année et le titre, calés en bas, lui passaient dessus. Sur mobile le picto et le texte reviennent dans le flux, l'un sous l'autre, et le panneau se dimensionne sur son contenu. */ .pa-panel { min-height:92px; display:flex; flex-direction:column; } .pa-panel.on { min-height:240px; } .pa-ic { position:static; flex:none; margin:24px 0 0 24px; } .pa-body { position:static; padding:18px 26px 26px; } } /* parcours — onglets par année (frise de la page d'accueil, C3) */ .parcours-tabs { display:grid; grid-template-columns:minmax(96px,150px) minmax(0,1fr); gap:clamp(1.2rem,3vw,2.6rem); margin-top:clamp(1.8rem,3.5vw,2.8rem); align-items:start; } .pt-years { position:relative; display:flex; flex-direction:column; padding-left:18px; } /* Le filet pointillé doré de la frise, repris de .timeline, mis à la verticale. */ .pt-years::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px; background:repeating-linear-gradient(180deg, var(--gold) 0 13px, transparent 13px 25px); opacity:.5; } .pt-year { appearance:none; -webkit-appearance:none; background:none; border:0; padding:.34rem 0; text-align:left; cursor:pointer; font-family:var(--font-display); font-weight:var(--display-weight); font-size:1.25rem; line-height:1.15; color:var(--navy); opacity:.45; transition:color .3s var(--ease), font-size .3s var(--ease), opacity .3s var(--ease); } .pt-year:hover { opacity:.8; } .pt-year.on { color:var(--gold-600); opacity:1; font-size:clamp(1.7rem,1.3rem+1vw,2.2rem); } .pt-year:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; } .pt-panel { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.2rem,2.5vw,2rem); align-items:start; min-height:360px; padding:clamp(1.6rem,3vw,2.4rem); border-radius:8px; background:var(--navy); color:var(--white); box-shadow:var(--shadow-md); outline:none; } /* Le visuel suit la hauteur du texte, sans s'étirer indéfiniment sur les années les plus fournies. */ .pt-panel.has-media { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:stretch; } .pt-panel + .pt-panel { margin-top:14px; } .pt-panel.is-in { animation:ptIn .45s var(--ease) both; } .pt-panel:focus-visible { box-shadow:0 0 0 3px var(--gold), var(--shadow-md); } @keyframes ptIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } /* Sans visuel, le panneau occupe toute la largeur : on borne la colonne de texte pour que les lignes restent lisibles. */ .pt-copy { max-width:78ch; } .pt-head { display:flex; align-items:center; gap:14px; margin-bottom:1rem; } .pt-ic { flex:none; width:48px; height:48px; border-radius:50%; background:rgb(var(--white-rgb) / .14); display:grid; place-items:center; color:var(--gold); } .pt-ic svg { width:23px; height:23px; } .pt-panel h3 { font-family:var(--font-display); font-weight:var(--display-weight); font-size:clamp(1.2rem,1rem+.8vw,1.6rem); color:var(--white); margin:0; } .pt-text { font-size:.95rem; line-height:1.65; color:rgb(var(--white-rgb) / .84); max-width:62ch; } .pt-text p { margin:0 0 .75rem; } .pt-text p:last-child { margin-bottom:0; } /* Les listes (les piliers de la stratégie) suivent le rythme des paragraphes. */ .pt-text ul, .pt-text ol { margin:0 0 .75rem; padding-left:1.2rem; } .pt-text ul:last-child, .pt-text ol:last-child { margin-bottom:0; } .pt-text li { margin:0 0 .3rem; } .pt-text li::marker { color:var(--gold); } /* Les intertitres du contenu sont en gras : on les traite comme des relances. */ .pt-text strong { color:var(--gold); font-weight:600; } .pt-media img { display:block; width:100%; height:100%; min-height:220px; max-height:520px; object-fit:cover; border-radius:6px; } @media (max-width:780px){ /* Empilé, le rail des années passe au-dessus du panneau, en défilement horizontal, et le filet doré se couche sous les onglets. */ .parcours-tabs { grid-template-columns:1fr; gap:1.2rem; } .pt-years { flex-direction:row; gap:1.1rem; padding:0 0 .7rem; overflow-x:auto; scrollbar-width:none; } .pt-years::-webkit-scrollbar { display:none; } .pt-years::before { left:0; right:0; top:auto; bottom:0; width:auto; height:3px; background:repeating-linear-gradient(90deg, var(--gold) 0 13px, transparent 13px 25px); } .pt-year { flex:none; padding:0 0 .2rem; font-size:1.15rem; } .pt-year.on { font-size:1.45rem; } .pt-panel, .pt-panel.has-media { grid-template-columns:1fr; min-height:0; } .pt-media img { max-height:220px; } } /* terrain gallery (image slots) */ .terrain-grid { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:150px; gap:1rem; margin-top:clamp(1.5rem,3vw,2.5rem); } .terrain-grid .tslot { width:100%; height:100%; display:block; box-shadow:var(--shadow-sm); } .tslot.s0 { grid-column:span 3; grid-row:span 2; } .tslot.s1, .tslot.s2, .tslot.s3, .tslot.s4 { grid-column:span 3; } @media (max-width:760px){ .terrain-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; } .tslot { grid-column:span 1 !important; grid-row:span 1 !important; } .tslot.s0 { grid-column:span 2 !important; } } /* organique: round the new elements & arch the big gallery slot */ [data-dir="organique"] .tl-dot { border-radius:50%; } [data-dir="organique"] .db-fill { border-radius:0; } [data-dir="organique"] .db-fill.stack { border-radius:0; } [data-dir="organique"] .terrain-grid .tslot { border-radius:8px; } /* keep kicker on its own line above the title (h2 is inline-block in organique) */ .section-head .kicker, .impact-head .kicker, .histoire-text .kicker { display:flex; } /* =========================================================== DIRECTION: ORGANIQUE (nature / brush-stroke, Econest-inspired) Marine + or, organic shapes, brushed underlines, leaf motif, pill buttons with a circular arrow knob. =========================================================== */ [data-dir="organique"] { /* Le titrage reste en Chelsea Market, la police du site depuis wp_2 : on reprend les tokens au lieu de réimposer Bricolage Grotesque, héritée du prototype. C'est cette direction qui est active (voir header.php). */ --font-display: var(--po-font-display); --display-weight: var(--po-display-weight); --display-spacing: var(--po-display-spacing); --h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.3rem); --radius: 26px; --radius-sm: 16px; --radius-lg: 40px; --reveal-y: 30px; --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DCA63F'%3E%3Cpath d='M12 22c0-5 0-7.5-2.2-9.7C7.5 10 2.5 10 2.5 10s0 4.2 2.2 6.4C6.9 18.6 9.8 19.5 12 22zm0-3.2c.1-5.4 1-7.8 3.3-10C17.6 6.5 22 7 22 7s-.3 4.4-2.5 6.4c-2 1.9-5 2.4-7.5 5.4z'/%3E%3C/svg%3E"); --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none' fill='%23DCA63F'%3E%3Cpath d='M3 9c34-4 70-6 108-5 24 .6 56 1.4 86 3.4-22 1.8-52 1.6-84 1.4-34-.2-72 .4-104 1.6-4 .2-7-.2-6-1.4z'/%3E%3Cpath d='M18 13c40-2 96-2 150-1-44 2-110 2-150 1z' opacity='.55'/%3E%3C/svg%3E"); } /* leaf kicker */ [data-dir="organique"] .kicker { color: var(--gold-600); } [data-dir="organique"] .kicker::before { width: 18px; height: 18px; background: var(--leaf) center/contain no-repeat; border-radius: 0; } [data-dir="organique"] .hero-copy .kicker::before { filter: none; } /* brushed underline under section titles */ [data-dir="organique"] .section-head h2, [data-dir="organique"] .impact-head h2, [data-dir="organique"] .histoire-text h2 { display: inline-block; position: relative; padding-bottom: .55rem; } [data-dir="organique"] .section-head h2::after, [data-dir="organique"] .impact-head h2::after, [data-dir="organique"] .histoire-text h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 14px; background: var(--brush) left bottom/clamp(140px, 55%, 300px) 100% no-repeat; } [data-dir="organique"] .center-head h2::after { background-position: center bottom; } [data-dir="organique"] .impact-head h2::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none' fill='%23161a40'%3E%3Cpath d='M3 9c34-4 70-6 108-5 24 .6 56 1.4 86 3.4-22 1.8-52 1.6-84 1.4-34-.2-72 .4-104 1.6-4 .2-7-.2-6-1.4z'/%3E%3C/svg%3E"); } /* pill buttons + circular arrow knob */ [data-dir="organique"] .btn { border-radius: 8px; padding: .85rem 1.4rem; gap: .55rem; font-weight: 700; } [data-dir="organique"] .btn svg { width: 18px; height: 18px; padding: 0; background: none; border-radius: 0; box-sizing: content-box; transition: transform .3s var(--ease); } [data-dir="organique"] .btn:hover svg { transform: translateX(2px); } [data-dir="organique"] .btn-gold svg { background: none; color: currentColor; } [data-dir="organique"] .btn-navy svg { background: none; color: currentColor; } [data-dir="organique"] .btn-light svg { background: none; color: currentColor; } [data-dir="organique"] .btn-ghost { border-color: var(--navy); } [data-dir="organique"] .btn-ghost svg { background: none; color: currentColor; } [data-dir="organique"] .news-card .more svg, [data-dir="organique"] .topbar svg, [data-dir="organique"] .footer-col svg, [data-dir="organique"] .nav-links svg, [data-dir="organique"] .hero-arrows svg { width: 1em; height: 1em; padding: 0; background: none; border-radius: 0; } /* organic arched images */ [data-dir="organique"] .hero-split .img-col { border-radius: 240px 240px var(--radius-lg) var(--radius-lg) / 120px 120px var(--radius-lg) var(--radius-lg); } [data-dir="organique"] .nl-photo { border-radius: 8px; } [data-dir="organique"] .hero-impact .visual .photo { border-radius: 200px 200px var(--radius-lg) var(--radius-lg) / 120px 120px var(--radius-lg) var(--radius-lg); } [data-dir="organique"] .map-card { border-radius: var(--radius-lg); } /* softer organic cards */ [data-dir="organique"] .vo-card, [data-dir="organique"] .news-card { border-radius: var(--radius); box-shadow: 0 18px 40px rgb(var(--navy-rgb) / .08); } [data-dir="organique"] .news-card .thumb img { border-radius: 0; } [data-dir="organique"] .vo-card .ico { border-radius: 8px; } /* numbered service-style badge on news thumbs */ [data-dir="organique"] .news-card .thumb::before { counter-increment: pocard; content: "0" counter(pocard); position: absolute; top: 1rem; right: 1rem; z-index: 2; background: var(--navy); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: .82rem; letter-spacing: .04em; padding: .35rem .65rem; border-radius: 999px; } [data-dir="organique"] .news-grid { counter-reset: pocard; } /* organique uses the cream/paper rhythm; nudge hero kicker color on dark */ [data-dir="organique"] .hero-copy .kicker, [data-dir="organique"] .hero-impact .kicker { color: var(--gold); } /* =========================================================== CARTES À ANGLES DROITS (accueil) — suppression des arrondis =========================================================== */ .vo-card, .news-card, .map-card, .country-fiche, .partners-wall, [data-dir="organique"] .vo-card, [data-dir="organique"] .news-card, [data-dir="organique"] .map-card { border-radius: 0 !important; } /* ---- Fix lisibilité kicker sur bandeau Impact (gold bg) ---- */ [data-dir="organique"] .impact-head .kicker, .impact-head .kicker { color: var(--navy-900); } [data-dir="organique"] .impact-head .kicker::before { display: none; } /* Retours client v2 */ .kicker, .fcta-kicker { display: none !important; } [data-dir="organique"] .impact-head h2::after { background-position: center bottom; }