/* ==========================================================================
IVOIRE CONCORDE - Design System v2 (premium, léger, mobile-first)
Objectif : sobriété éditoriale (Apple / Linear / Stripe), < 2s en 3G,
Lighthouse >= 90, WCAG 2.2 AA. Aucune dépendance lourde.
========================================================================== */
/* ---------- Fonts (variable, display=swap, fallback système immédiat) ------ */
/* Chargées via dans le . Ici : piles de secours. */
/* ---------- Design tokens -------------------------------------------------- */
:root {
/* Marque (identité Manus : crème + noir profond + or) */
--gold: #D99A20; /* or de la marque */
--gold-soft: #F4BD45; /* or clair (accents lumineux) */
--sun: #DC7431; /* orange soleil */
--sun-deep: #B45F22; /* orange profond - texte accent, AA sur crème */
--civic: #17344F; /* bleu institutionnel profond (accent rare) */
/* Neutres chauds (crème) + noir profond - thème clair par défaut */
--paper: #FFFDF8; /* crème lumineuse */
--surface: #FFF6E3; /* crème solaire */
--surface-2: #F8E7BE; /* or pâle */
--ink: #141414; /* noir profond (ex-vert de charte) */
--ink-2: #4A4A44;
--ink-3: #65706A;
--hairline: #E9DFC9;
--hairline-2: #DBCBA8;
/* Rôles sémantiques */
--bg-primary: var(--paper);
--bg-secondary: var(--surface);
--bg-tertiary: var(--surface-2);
--text-primary: var(--ink);
--text-secondary: var(--ink-2);
--text-tertiary: var(--ink-3);
--border-color: var(--hairline);
--accent: var(--gold);
--accent-strong: #9C6B12;
/* Ombres - neutres, douces */
--shadow-xs: 0 1px 2px rgba(0,0,0,.05);
--shadow-sm: 0 2px 8px rgba(0,0,0,.06);
--shadow-md: 0 8px 24px -6px rgba(0,0,0,.10), 0 2px 6px -2px rgba(0,0,0,.06);
--shadow-lg: 0 24px 60px -20px rgba(0,0,0,.18), 0 8px 24px -12px rgba(0,0,0,.10);
--ring: 0 0 0 3px rgba(255,159,32,.30);
/* Rayons */
--radius-sm: .5rem;
--radius-md: .75rem;
--radius-lg: 1.125rem;
--radius-xl: 1.5rem;
--radius-2xl: 2rem;
/* Typo (identité Manus : Playfair Display + DM Sans) */
--font-sans: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
/* Échelle d'espacement (base 4px) */
--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
--space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem;
--space-12: 5rem; --space-16: 7rem; --space-20: 9rem;
/* Layout */
--max-width: 1180px;
--measure: 66ch;
--header-main-height: 82px;
--announcement-height: 34px;
/* Motion */
--ease-out: cubic-bezier(.22,1,.36,1);
--ease-in-out: cubic-bezier(.65,.05,.36,1);
--fast: .28s;
--medium: .55s;
--slow: .9s;
}
[data-theme="dark"] {
--paper: #171717;
--surface: #202020;
--surface-2: #2A2A2A;
--ink: #F5F5F5;
--ink-2: #D4D4D4;
--ink-3: #A3A3A3;
--hairline: #333333;
--hairline-2:#454545;
--bg-primary: var(--paper);
--bg-secondary: var(--surface);
--bg-tertiary: var(--surface-2);
--text-primary: var(--ink);
--text-secondary: var(--ink-2);
--text-tertiary: var(--ink-3);
--border-color: var(--hairline);
--gold: #F4BD45;
--accent: #DC7431;
--accent-strong: #F4BD45;
--shadow-xs: 0 1px 2px rgba(0,0,0,.4);
--shadow-sm: 0 2px 8px rgba(0,0,0,.45);
--shadow-md: 0 10px 28px -8px rgba(0,0,0,.6), 0 3px 8px -3px rgba(0,0,0,.5);
--shadow-lg: 0 28px 70px -22px rgba(0,0,0,.75), 0 10px 28px -14px rgba(0,0,0,.55);
--ring: 0 0 0 3px rgba(244,190,75,.34);
}
/* Thème clair (crème) par défaut, comme la refonte Manus.
Le mode sombre reste disponible via le bouton (data-theme="dark"). */
/* ---------- Reset ---------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
font-size: 1rem;
font-feature-settings: "cv02","cv03","cv04","ss01";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img,svg,video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul,ol { list-style: none; }
::selection { background: rgba(232,121,28,.22); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; top:-48px; left:12px; z-index:10000; background: var(--text-primary); color: var(--bg-primary); padding:.6rem 1rem; border-radius: var(--radius-sm); transition: top .2s; }
.skip-link:focus { top:12px; }
/* ---------- Layout --------------------------------------------------------- */
.container { width:100%; max-width: var(--max-width); margin:0 auto; padding:0 1.25rem; }
@media (min-width:640px){ .container{ padding:0 2rem; } }
@media (min-width:1024px){ .container{ padding:0 2.5rem; } }
.section { padding:clamp(2.5rem,4.5vw,4rem) 0; position: relative; }
@media (min-width:768px){ .section{ padding:clamp(3rem,4.5vw,4.5rem) 0; } }
.hero + .section { padding-top:clamp(1.75rem,3vw,2.5rem); }
.section--tight { padding: var(--space-8) 0; }
.section--alt { background:var(--bg-secondary); background-image:linear-gradient(115deg, rgba(255,253,248,.74), rgba(252,190,51,.10)); }
.section--ink { background: var(--ink); color: #F5F1E9; }
.section--ink .section-subtitle,
.section--ink .card-text { color: rgba(245,241,233,.72); }
.section-header { max-width: 760px; margin-bottom: var(--space-6); }
.section-header.text-center { margin-left:auto; margin-right:auto; }
.section-title { margin-bottom: .6rem; }
.section-subtitle { color: var(--text-secondary); font-size: 1.075rem; line-height: 1.65; max-width: var(--measure); }
.section-header.text-center .section-subtitle { margin-left:auto; margin-right:auto; }
/* Eyebrow / kicker */
.eyebrow {
display:inline-flex; align-items:center; gap:.55rem;
font-family: var(--font-sans);
font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
color: var(--accent-strong); margin-bottom: 1rem;
}
.section--ink .eyebrow { color: var(--gold-soft); }
/* ---------- Typographie ---------------------------------------------------- */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight:560; line-height:1.08; letter-spacing:-.015em; color: var(--text-primary); }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight:600; letter-spacing:-.01em; }
h4 { font-size: 1.075rem; font-weight:600; font-family: var(--font-sans); }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 1.2rem; line-height:1.6; color: var(--text-secondary); max-width: var(--measure); }
.text-center { text-align:center; }
.text-gold { color: var(--gold); }
.text-accent { color: var(--accent-strong); }
.display-serif { font-family: var(--font-display); }
/* Lien texte souligné animé */
.link-underline { color: var(--text-primary); position:relative; font-weight:500; }
.link-underline::after { content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:100%; background: var(--accent); transform: scaleX(0); transform-origin:left; transition: transform var(--fast) var(--ease-out); }
.link-underline:hover::after { transform: scaleX(1); }
/* ---------- Header --------------------------------------------------------- */
.site-header {
position: sticky; top:0; z-index:1000;
background:color-mix(in srgb, var(--bg-primary) 91%, transparent);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom:1px solid rgba(20,20,20,.10);
transition: border-color var(--fast) var(--ease-out), background var(--fast);
}
.site-header.is-scrolled { border-bottom-color:rgba(217,154,32,.28); background:color-mix(in srgb, var(--bg-primary) 97%, transparent); box-shadow:0 8px 24px rgba(113,76,19,.08); }
.site-announcement {
min-height:var(--announcement-height); display:flex; align-items:center; justify-content:center;
padding:.3rem 1rem; text-align:center; background:#0A0A0A; color:#F8EDD1;
border-bottom:1px solid rgba(245,197,87,.18); font-size:.7rem; font-weight:600;
letter-spacing:.12em; line-height:1.35; text-transform:uppercase;
}
.site-announcement strong { color:var(--gold-soft); font-weight:700; }
.site-announcement a { display:inline-flex; align-items:center; gap:.3rem; margin-left:.7rem; color:#FFD46B; font-weight:700; white-space:nowrap; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:min(1340px, calc(100% - 3rem)); height:var(--header-main-height); margin:0 auto; }
.site-header .container { max-width:none; padding:0; }
.logo-link { flex-shrink:0; display:flex; align-items:center; gap:.7rem; }
.logo-img { height:38px; width:auto; }
.logo-mark { height:46px; width:auto; }
.logo-word { display:flex; flex-direction:column; gap:.18rem; font-family:var(--font-sans); font-weight:700; letter-spacing:.11em; font-size:.82rem; text-transform:uppercase; color:var(--text-primary); white-space:nowrap; }
.logo-tagline { color:#7E897F; font-size:.6rem; font-weight:500; letter-spacing:.02em; text-transform:none; }
.logo-mark--blanc { display:none; }
[data-theme="dark"] .logo-mark--noir { display:none; }
[data-theme="dark"] .logo-mark--blanc { display:inline-block; }
.footer-logo--blanc { display:none; }
[data-theme="dark"] .footer-logo--noir { display:none; }
[data-theme="dark"] .footer-logo--blanc { display:block; }
@media (max-width:380px){
.header-inner { gap:.45rem; }
.logo-link { gap:.42rem; }
.logo-mark { height:36px; }
.logo-word { font-size:.7rem; letter-spacing:.055em; }
.nav-actions { gap:.15rem; }
.btn-icon { width:38px; height:38px; }
}
.nav-desktop { display:none; }
@media (min-width:1150px){ .nav-desktop { display:flex; flex:1; justify-content:center; align-items:center; flex-wrap:nowrap; gap:.42rem; } }
/* Items de nav : puces encadrées, filet fin doré au survol, actif légèrement coloré */
.nav-link {
padding:.5rem .55rem; border-radius:7px; white-space:nowrap;
font-size:.75rem; font-weight:600; color:#52605A;
border:1px solid transparent; background:transparent;
transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}
.nav-link:hover, .nav-link[aria-current="page"] {
color: var(--text-primary);
background: color-mix(in srgb, var(--gold) 20%, transparent);
border-color: color-mix(in srgb, var(--gold) 64%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-soft) 28%, transparent);
}
.nav-link[aria-current="page"] { color:var(--accent-strong); font-weight:700; }
.nav-actions { display:flex; align-items:center; gap:.75rem; }
.btn-icon { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-color); border-radius:50%; color:var(--text-primary); background:var(--bg-primary); transition: background var(--fast), color var(--fast), transform var(--fast) var(--ease-out); }
.btn-icon:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.btn-icon:active,.header-cta:active { transform:scale(.97); }
.btn-icon svg { width:20px; height:20px; }
.header-cta { display:inline-flex; align-items:center; gap:.55rem; padding:.8rem 1.05rem; border-radius:999px; background:#141414; color:#FFFDF8; white-space:nowrap; font-size:.76rem; font-weight:700; box-shadow:0 8px 20px rgba(20,20,20,.18); transition:transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), background var(--fast); }
.header-cta:hover { transform:translateY(-2px); background:#2B2113; box-shadow:0 12px 24px rgba(20,20,20,.25); }
.mobile-menu-btn { display:flex; }
@media (min-width:1150px){ .mobile-menu-btn { display:none; } }
.mobile-nav { position:fixed; inset:0; z-index:999; background: var(--bg-primary); padding:7.5rem 1.5rem 2rem; transform: translateX(100%); transition: transform var(--medium) var(--ease-out); overflow-y:auto; }
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-list { display:flex; flex-direction:column; gap:.15rem; }
.mobile-nav-link { display:block; padding:1rem .5rem; font-family: var(--font-display); font-size:1.4rem; font-weight:560; border-bottom:1px solid var(--border-color); color: var(--text-primary); }
.mobile-nav-link:hover { color: var(--accent-strong); }
@media (max-width:760px){
.header-inner { width:calc(100% - 2.1rem); height:70px; }
.logo-tagline,.header-cta { display:none; }
.mobile-nav { padding-top:7.75rem; }
}
.mobile-nav-close { position:absolute; top:1rem; right:1.25rem; }
/* ---------- Boutons -------------------------------------------------------- */
.btn {
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
min-height:46px; padding:0 18px; border-radius:8px; font-weight:700; font-size:.75rem;
line-height:1.2; text-align:center; letter-spacing:-.005em;
position:relative; overflow:hidden; isolation:isolate;
transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), background var(--fast), color var(--fast), border-color var(--fast);
will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary { background: var(--ink); color:#FBFAF7; box-shadow:0 12px 22px rgba(20,20,20,.2); }
.btn-primary:hover { background:#000; box-shadow:0 15px 28px rgba(20,20,20,.28); transform: translateY(-2px); }
[data-theme="dark"] .btn-primary { background: var(--gold); color:#14120E; }
.btn-accent { background: linear-gradient(135deg, var(--sun) 0%, var(--gold) 100%); color:#241a06; box-shadow:0 12px 22px rgba(20,20,20,.16); }
.btn-accent:hover { box-shadow:0 15px 28px rgba(20,20,20,.24); transform: translateY(-2px); }
.btn-secondary { background:rgba(255,255,255,.52); color:var(--ink); border:1px solid rgba(20,20,20,.25); }
.btn-secondary:hover { background:#fff; border-color:rgba(20,20,20,.45); transform: translateY(-2px); }
.btn-dark { background:var(--ink); color:#fff; box-shadow:0 10px 22px rgba(24,37,32,.15); }
.btn-dark:hover { background:#000; transform:translateY(-2px); box-shadow:0 15px 28px rgba(20,20,20,.22); }
.btn-ghost { padding:.6rem .5rem; color: var(--text-secondary); border-radius: var(--radius-sm); }
.btn-ghost:hover { color: var(--text-primary); }
.btn svg { width:18px; height:18px; }
.btn-lg { padding:1rem 1.9rem; font-size:1rem; }
/* ---------- Hero ----------------------------------------------------------- */
.hero { position:relative; padding:clamp(2rem,4vw,2.75rem) 0 clamp(1.5rem,2.5vw,2.15rem); overflow:hidden; isolation:isolate; }
/* Lueur d'aube sur TOUTES les pages (y compris pages internes) */
.hero::before {
content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
width:min(130vw,1300px); height:150%; z-index:-1; pointer-events:none;
background:
radial-gradient(58% 52% at 50% 0%, rgba(255,188,50,.31), rgba(252,184,20,.15) 40%, transparent 72%),
radial-gradient(40% 40% at 78% 6%, rgba(255,159,32,.18), transparent 70%);
}
[data-theme="dark"] .hero::before { background:
radial-gradient(58% 52% at 50% 0%, rgba(255,159,32,.22), rgba(252,184,20,.10) 42%, transparent 74%),
radial-gradient(40% 40% at 78% 6%, rgba(255,159,32,.12), transparent 72%); }
.hero-bg { position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
/* Aube dorée - respiration lente, GPU-cheap (opacités faibles) */
.hero-glow {
position:absolute; width:min(120vw,1400px); aspect-ratio:1; left:50%; top:-38%;
transform: translateX(-50%);
background:
radial-gradient(closest-side, rgba(232,121,28,.20), rgba(232,121,28,.06) 45%, transparent 72%),
radial-gradient(closest-side, rgba(233,161,28,.16), transparent 70%);
filter: blur(6px);
animation: hero-breathe 14s var(--ease-in-out) infinite;
}
.hero-rays {
position:absolute; inset:0;
background:
repeating-conic-gradient(from 0deg at 50% -8%,
rgba(232,121,28,.05) 0deg 3deg, transparent 3deg 9deg);
-webkit-mask-image: radial-gradient(120% 90% at 50% -10%, #000 0%, transparent 60%);
mask-image: radial-gradient(120% 90% at 50% -10%, #000 0%, transparent 60%);
opacity:.5;
}
.hero-grain {
position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
[data-theme="dark"] .hero-grain { mix-blend-mode:screen; opacity:.35; }
@keyframes hero-breathe {
0%,100% { transform: translateX(-50%) scale(1); opacity:.9; }
50% { transform: translateX(-50%) scale(1.08); opacity:1; }
}
.hero-content { max-width: 900px; }
.hero h1 { font-size:clamp(2.25rem,4.8vw,3.55rem); line-height:1.04; max-width:38ch; margin-bottom:1rem; text-wrap:balance; }
.hero-title { font-size:clamp(2.25rem,4.8vw,3.55rem); line-height:1.04; letter-spacing:-.028em; font-weight:560; margin-bottom:1rem; }
.hero-title em { font-style:italic; color: var(--accent-strong); font-weight:500; }
.hero-hook { font-size:clamp(1rem,1.25vw,1.13rem); color:var(--text-secondary); max-width:40rem; margin-bottom:1.25rem; line-height:1.58; }
.hero-hook strong { color: var(--text-primary); font-weight:600; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.hero-signature { margin-top:2.25rem; font-family: var(--font-display); font-style:italic; font-size:1.05rem; color: var(--text-tertiary); }
/* ---------- Stat callout --------------------------------------------------- */
.stat-callout {
position:relative; overflow:hidden;
background: linear-gradient(135deg, var(--gold) 0%, var(--sun) 100%); color: var(--ink);
padding: clamp(1.4rem,3.5vw,2.25rem) clamp(1.5rem,5vw,3rem); border-radius: var(--radius-xl); margin: var(--space-6) 0;
display:grid; gap:.5rem; box-shadow: var(--shadow-lg); text-align:center; justify-items:center;
}
.stat-callout::after {
content:""; position:absolute; right:-8%; top:-45%; width:55%; aspect-ratio:1;
background: radial-gradient(closest-side, rgba(255,255,255,.42), transparent 70%); opacity:.7;
}
.stat-number { font-family: var(--font-display); font-size: clamp(2.4rem,7vw,3.9rem); font-weight:600; line-height:1; letter-spacing:-.02em; color: var(--ink); position:relative; }
.stat-label { font-size:1.02rem; color: rgba(0,0,0,.78); max-width:56ch; margin-inline:auto; position:relative; }
.stat-callout--plain { background: var(--bg-secondary); color: var(--text-primary); border:1px solid var(--border-color); box-shadow: var(--shadow-sm); }
.stat-callout--plain .stat-number { color: var(--accent-strong); }
.stat-callout--plain .stat-label { color: var(--text-secondary); }
/* ---------- Cards ---------------------------------------------------------- */
.card-grid { display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:640px){ .card-grid--2{ grid-template-columns:repeat(2,1fr);} .card-grid--4{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:768px){ .card-grid--3{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:1024px){ .card-grid--4{ grid-template-columns:repeat(4,1fr);} }
.card {
background:linear-gradient(145deg, #FFFDF8, var(--bg-secondary)); border:1px solid color-mix(in srgb, var(--gold) 24%, var(--border-color));
border-radius: var(--radius-lg); padding:1.6rem;
transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), border-color var(--fast);
position:relative; overflow:hidden;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--hairline-2); }
.card--link::after { content:"→"; position:absolute; top:1.4rem; right:1.5rem; color: var(--accent-strong); opacity:0; transform: translateX(-6px); transition: opacity var(--fast), transform var(--fast) var(--ease-out); }
.card--link:hover::after { opacity:1; transform: translateX(0); }
.card-title { font-size:1.2rem; font-weight:600; margin-bottom:.5rem; color: var(--text-primary); font-family: var(--font-display); letter-spacing:-.01em; }
.card-text { font-size:.975rem; color: var(--text-secondary); line-height:1.6; }
.card-icon { width:48px; height:48px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.card-icon svg { width:24px; height:24px; }
.card-index { font-family: var(--font-display); font-size:.9rem; color: var(--text-tertiary); margin-bottom:.75rem; letter-spacing:.05em; }
/* ---------- Carte interactive --------------------------------------------- */
.map-container { background: var(--bg-secondary); border:1px solid var(--border-color); border-radius: var(--radius-xl); padding: clamp(1.25rem,3vw,2rem); position:relative; box-shadow: var(--shadow-sm); }
.map-svg { width:100%; height:auto; max-height:520px; }
.map-region { fill: var(--bg-tertiary); stroke: var(--hairline-2); stroke-width:1.25; cursor:pointer; transition: fill var(--fast) var(--ease-out), stroke var(--fast); }
.map-region:hover, .map-region:focus { fill: color-mix(in srgb, var(--gold) 55%, var(--bg-tertiary)); stroke: var(--accent-strong); outline:none; }
.map-region.is-active { fill: var(--accent); stroke: var(--accent-strong); }
/* Bulle d'information de la carte : une seule, claire, aux couleurs de la region
survolee (la variable --c est posee par js/enhance.js). */
.map-tooltip {
position:absolute; z-index:10; pointer-events:none;
max-width:250px; padding:.72rem .9rem .75rem .8rem;
background:color-mix(in srgb, var(--bg-primary) 97%, transparent);
color:var(--text-primary);
border:1px solid color-mix(in srgb, var(--c, var(--gold)) 28%, var(--border-color));
border-left:4px solid var(--c, var(--gold));
border-radius:14px;
box-shadow:0 20px 40px -16px rgba(20,20,20,.45);
backdrop-filter:blur(6px);
font-size:.84rem; line-height:1.5;
opacity:0; transform:translateY(6px) scale(.97);
transition:opacity .18s var(--ease-out), transform .22s var(--ease-out);
}
.map-tooltip.is-visible { opacity:1; transform:translateY(0) scale(1); }
.map-tooltip strong {
display:flex; align-items:center; gap:.45rem;
font-size:.95rem; font-weight:700; color:var(--text-primary);
margin-bottom:.3rem;
}
.map-tooltip strong::before {
content:""; width:10px; height:10px; border-radius:50%; flex:none;
background:var(--c, var(--gold));
box-shadow:0 0 0 3px color-mix(in srgb, var(--c, var(--gold)) 22%, transparent);
}
.map-tooltip .tip-seat { color:var(--text-secondary); font-weight:600; }
.map-tooltip .tip-benefit { color:var(--text-tertiary); display:block; margin-top:.2rem; }
/* Carte réelle Côte d'Ivoire (6 régions fédérales) */
.ci-map { width:100%; height:auto; max-height:min(72vh,600px); margin:0 auto; display:block; }
.ci-region { cursor:pointer; outline:none; }
.ci-region path { stroke: var(--surface); stroke-width:1.1; fill-opacity:.9; transition: fill-opacity var(--fast) var(--ease-out), filter var(--fast) var(--ease-out); }
[data-theme="dark"] .ci-region path { stroke:#14120E; }
.ci-region:hover path, .ci-region:focus-visible path { fill-opacity:1; filter: brightness(1.09) saturate(1.08); }
.ci-region:focus-visible path { stroke: var(--ink); stroke-width:2; }
.map-legend { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-top:1.25rem; padding-top:1.1rem; border-top:1px solid var(--border-color); }
.map-legend li { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color: var(--text-secondary); }
.map-legend span { width:14px; height:14px; border-radius:4px; flex-shrink:0; display:inline-block; }
/* Figures / visuels de campagne */
.media-figure { margin:1.5rem 0; }
.media-figure img { width:100%; height:auto; border-radius: var(--radius-lg); border:1px solid var(--border-color); box-shadow: var(--shadow-sm); background: var(--bg-secondary); }
.media-figure figcaption { margin-top:.65rem; font-size:.85rem; color: var(--text-tertiary); text-align:center; }
.media-figure--narrow { max-width:560px; margin-left:auto; margin-right:auto; }
/* Hero des pages region : texte + carte locator */
.region-hero { display:grid; gap:2rem; grid-template-columns:1fr; align-items:center; }
@media (min-width:860px){ .region-hero { grid-template-columns:1.35fr .8fr; } }
.region-seat { font-size:1.05rem; color: var(--text-secondary); margin:-.2rem 0 1.1rem; }
.region-seat strong { color: var(--accent-strong); font-weight:600; }
.region-locator { margin:0; }
.region-locator img { width:100%; max-width:330px; margin-inline:auto; display:block; filter: drop-shadow(0 12px 26px rgba(0,0,0,.12)); }
/* A propos : portraits + 7 piliers */
.about-portraits { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin:1.75rem 0; max-width:520px; }
.about-portraits img { width:100%; height:auto; border-radius: var(--radius-lg); border:1px solid var(--border-color); box-shadow: var(--shadow-sm); }
.about-portraits figcaption { grid-column:1 / -1; font-size:.85rem; color: var(--text-tertiary); text-align:center; margin-top:.3rem; }
.pillars-list { margin:1rem 0 1.5rem; padding-left:1.4rem; }
.pillars-list li { margin:.5rem 0; line-height:1.6; }
.pillars-grid { display:grid; gap:1.25rem; grid-template-columns:1fr; margin:1.5rem auto; max-width:960px; }
@media (min-width:768px){ .pillars-grid { grid-template-columns:repeat(2,1fr); } }
.pillars-grid figure { margin:0; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out); }
.pillars-grid figure:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pillars-grid img { width:100%; height:auto; display:block; }
/* Fil d'actualités / publications de campagne */
.feed-grid { display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:640px){ .feed-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .feed-grid { grid-template-columns:repeat(3,1fr); } }
.feed-card { display:flex; flex-direction:column; border:1px solid var(--border-color); border-radius: var(--radius-md); overflow:hidden; background: var(--bg-secondary); transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out); }
.feed-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feed-card img { width:100%; height:auto; display:block; border-bottom:1px solid var(--border-color); }
.feed-body { padding:1rem 1.1rem; }
.feed-tag { display:inline-block; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--accent-strong); margin-bottom:.35rem; }
.feed-card p { font-size:.9rem; color: var(--text-secondary); margin:0; }
/* Grille de citations (cartes visuelles) */
.quote-grid { display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:640px){ .quote-grid{ grid-template-columns:repeat(3,1fr);} }
.quote-card { display:block; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out); }
.quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.quote-card img { width:100%; height:auto; display:block; }
/* Galerie campagne (masonry léger) */
.gallery { columns: 2; column-gap: 1rem; }
@media (min-width:640px){ .gallery{ columns:3; } }
@media (min-width:1024px){ .gallery{ columns:4; } }
.gallery figure { break-inside: avoid; margin:0 0 1rem; }
.gallery button { display:block; width:100%; padding:0; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--border-color); background: var(--bg-secondary); cursor:zoom-in; transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out); }
.gallery button:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gallery img { width:100%; height:auto; display:block; }
.lightbox { position:fixed; inset:0; z-index:2000; background:rgba(10,10,10,.9); display:none; align-items:center; justify-content:center; padding:2rem; }
.lightbox.is-open { display:flex; }
.lightbox img { max-width:92vw; max-height:88vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.lightbox-close { position:absolute; top:1rem; right:1.25rem; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:1.5rem; line-height:1; }
.lightbox-close:hover { background:rgba(255,255,255,.22); }
/* ---------- Simulateur ----------------------------------------------------- */
.simulator { background: var(--bg-secondary); border:1px solid var(--border-color); border-radius: var(--radius-xl); padding: clamp(1.5rem,4vw,2.5rem); max-width:760px; margin:0 auto; box-shadow: var(--shadow-sm); }
.simulator-input-group { margin-bottom:1.5rem; }
.simulator-label { display:block; font-weight:600; margin-bottom:.5rem; font-size:.95rem; }
.simulator-input, .form-input, .form-textarea, .form-select {
width:100%; padding:.85rem 1rem; border:1px solid var(--hairline-2); border-radius: var(--radius-md);
background: var(--bg-primary); color: var(--text-primary); font-size:1rem; font-family:inherit;
transition: border-color var(--fast), box-shadow var(--fast);
}
.simulator-input:focus, .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--accent); outline:none; box-shadow: var(--ring); }
.simulator-results { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .simulator-results{ grid-template-columns:repeat(3,1fr);} }
.simulator-result-card { text-align:center; padding:1.5rem 1rem; border-radius: var(--radius-lg); background: var(--bg-primary); border:1px solid var(--border-color); }
.simulator-result-card.is-highlight { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--bg-primary)); }
.simulator-result-value { font-family: var(--font-display); font-size:1.7rem; font-weight:560; color: var(--accent-strong); display:block; line-height:1; margin-bottom:.35rem; }
.simulator-result-label { font-size:.85rem; font-weight:600; color: var(--text-secondary); }
/* ---------- Quiz ----------------------------------------------------------- */
.quiz-container { max-width:720px; margin:0 auto; }
.quiz-question { background: var(--bg-secondary); border:1px solid var(--border-color); border-radius: var(--radius-lg); padding:1.6rem; margin-bottom:1rem; }
.quiz-options { display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; }
.quiz-option { padding:.95rem 1.1rem; border:1px solid var(--hairline-2); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); text-align:left; font-size:.975rem; transition: border-color var(--fast), background var(--fast), transform var(--fast) var(--ease-out); }
.quiz-option:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-primary)); transform: translateX(3px); }
.quiz-option.is-selected { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--bg-primary)); font-weight:600; }
/* ---------- Formulaires ---------------------------------------------------- */
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-weight:600; font-size:.95rem; margin-bottom:.4rem; }
.form-textarea { min-height:130px; resize:vertical; }
.form-checkbox { display:flex; align-items:flex-start; gap:.75rem; font-size:.9rem; color: var(--text-secondary); cursor:pointer; }
.form-checkbox input { margin-top:.2rem; width:18px; height:18px; accent-color: var(--accent); flex-shrink:0; }
/* ---------- FAQ / accordéon ------------------------------------------------ */
.faq-item { border-bottom:1px solid var(--border-color); }
.faq-question { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.35rem 0; font-size:1.075rem; font-weight:600; text-align:left; color: var(--text-primary); font-family: var(--font-display); letter-spacing:-.01em; }
.faq-question svg { width:20px; height:20px; flex-shrink:0; transition: transform var(--fast) var(--ease-out); color: var(--accent-strong); }
.faq-item.is-open .faq-question svg { transform: rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition: max-height var(--medium) var(--ease-out), padding var(--medium) var(--ease-out); }
.faq-item.is-open .faq-answer { max-height:600px; padding-bottom:1.35rem; }
.faq-answer p { color: var(--text-secondary); font-size:.975rem; margin:0; }
/* ---------- Partage -------------------------------------------------------- */
.share-bar { display:flex; gap:.5rem; flex-wrap:wrap; }
.share-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .9rem; border-radius:3px; font-size:.85rem; font-weight:500; background: var(--bg-tertiary); color: var(--text-secondary); border:1px solid var(--border-color); transition: background var(--fast), color var(--fast), transform var(--fast) var(--ease-out); }
.share-btn:hover { background: var(--bg-secondary); color: var(--text-primary); transform: translateY(-1px); }
.share-btn svg { width:16px; height:16px; }
/* ---------- Parcours d'engagement ----------------------------------------- */
.engagement-path { display:grid; gap:.85rem; grid-template-columns:1fr; counter-reset: step; }
@media (min-width:768px){ .engagement-path{ grid-template-columns:repeat(5,1fr); gap:0; } }
.engagement-step { padding:1.6rem 1.25rem; background: var(--bg-secondary); border:1px solid var(--border-color); border-radius: var(--radius-lg); text-align:center; position:relative; transition: transform var(--fast) var(--ease-out), box-shadow var(--fast); }
@media (min-width:768px){
.engagement-step { border-radius:0; border-right:none; }
.engagement-step:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.engagement-step:last-child { border-radius:0 var(--radius-lg) var(--radius-lg) 0; border-right:1px solid var(--border-color); }
}
.engagement-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); z-index:2; border-radius: var(--radius-lg); }
.engagement-step-number { width:38px; height:38px; background: var(--accent); color:#1c1305; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:600; font-size:1rem; margin:0 auto .85rem; }
.engagement-step-title { font-weight:600; font-size:1rem; margin-bottom:.3rem; }
.engagement-step-desc { font-size:.85rem; color: var(--text-secondary); line-height:1.5; }
/* ---------- Table ---------------------------------------------------------- */
.data-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.data-table th, .data-table td { padding:.9rem 1rem; text-align:left; border-bottom:1px solid var(--border-color); }
.data-table th { font-weight:700; color: var(--text-primary); background: var(--bg-tertiary); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.data-table td { color: var(--text-secondary); }
.data-table tr:hover td { background: var(--bg-secondary); }
/* ---------- Divers --------------------------------------------------------- */
.breadcrumb { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:.85rem; color: var(--text-tertiary); margin-bottom:1.5rem; }
.breadcrumb a:hover { color: var(--text-primary); }
.tag { display:inline-flex; align-items:center; padding:.3rem .75rem; border-radius:999px; font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; background: var(--bg-tertiary); color: var(--text-secondary); border:1px solid var(--border-color); }
.tag-gold { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--accent-strong); border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.placeholder { background: var(--bg-tertiary); border:1px dashed var(--hairline-2); border-radius: var(--radius-lg); padding:3rem 1.5rem; text-align:center; color: var(--text-tertiary); }
.placeholder-icon { width:44px; height:44px; margin:0 auto 1rem; opacity:.5; }
.placeholder-text { font-size:.95rem; font-weight:500; }
/* Prose / articles */
.content article h2 { margin:2rem 0 .75rem; }
.content article > :first-child { margin-top:0; }
.content article h3 { margin:1.5rem 0 .65rem; }
.content article p { margin-bottom:.8rem; color:var(--text-secondary); max-width:var(--measure); line-height:1.62; }
.content article .mt-8 { margin-top:2.25rem !important; }
.content article ul, .content article ol { margin:0 0 1.1rem; padding-left:1.4rem; color: var(--text-secondary); max-width: var(--measure); }
.content article ul { list-style: disc; } .content article ol { list-style: decimal; }
.content article li { margin-bottom:.5rem; }
.content article blockquote { border-left:3px solid var(--gold); padding:.25rem 0 .25rem 1.4rem; margin:1.75rem 0; font-family: var(--font-display); font-style:italic; font-size:1.2rem; color: var(--text-primary); }
/* ---------- Footer --------------------------------------------------------- */
.site-footer { background: var(--bg-secondary); border-top:1px solid var(--border-color); padding: var(--space-10) 0 var(--space-6); margin-top: var(--space-12); }
.footer-grid { display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:640px){ .footer-grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr;} }
.footer-brand { max-width:320px; }
.footer-logo { height:46px; width:auto; margin-bottom:1rem; }
.footer-tagline { font-family: var(--font-display); font-style:italic; font-size:1.05rem; color: var(--text-secondary); margin-bottom:1.25rem; }
.footer-heading { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; color: var(--text-primary); }
.footer-links { display:flex; flex-direction:column; gap:.6rem; }
.footer-link { font-size:.95rem; color: var(--text-secondary); transition: color var(--fast); }
.footer-link:hover { color: var(--accent-strong); }
.footer-bottom { margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border-color); display:flex; flex-direction:column; gap:1rem; align-items:center; text-align:center; }
@media (min-width:640px){ .footer-bottom{ flex-direction:row; justify-content:space-between; text-align:left;} }
.footer-copyright { font-size:.85rem; color: var(--text-tertiary); }
/* ---------- Révélations au scroll (activées uniquement si JS + motion ok) --- */
.has-js .reveal { opacity:0; transform: translateY(22px); will-change: transform, opacity; transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out); }
.has-js .reveal.is-visible { opacity:1; transform: none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
/* ---------- Utilitaires ---------------------------------------------------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.gap-4{gap:1rem}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.max-w-3xl{max-width:48rem}.mx-auto{margin-left:auto;margin-right:auto}
/* ---------- Print ---------------------------------------------------------- */
@media print {
.site-header,.site-footer,.share-bar,.btn,.mobile-menu-btn,.nav-actions,.hero-bg,.hero-grain { display:none !important; }
body { background:#fff; color:#000; }
.card,.section { break-inside: avoid; }
}
/* ---------- Reduced motion : neutralise tout mouvement --------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior:auto; }
*,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
.has-js .reveal { opacity:1 !important; transform:none !important; }
.hero-glow { animation:none !important; }
}
/* ===== Iteration : carte simple (fond blanc, texte noir) + bouton S'engager doré ===== */
.card { background:#FFFFFF; border:1px solid rgba(20,20,20,.12); box-shadow:0 6px 18px rgba(20,20,20,.06); }
.card .card-title { color:#141414; }
.card .card-text { color:#3f3f3f; }
.card .card-index { color:#8a7a4f; }
[data-theme="dark"] .card { background:#FFFFFF; border-color:rgba(20,20,20,.14); box-shadow:0 12px 28px rgba(0,0,0,.45); }
[data-theme="dark"] .card .card-title { color:#141414; }
[data-theme="dark"] .card .card-text { color:#3f3f3f; }
[data-theme="dark"] .card .card-index { color:#8a7a4f; }
/* Bouton S'engager : noir a lettres dorees en clair, l'inverse exact en sombre. */
.header-cta { background:#141414; color:#F4BD45; box-shadow:0 8px 20px rgba(20,20,20,.22); }
.header-cta:hover { background:#232323; color:#FFD36E; box-shadow:0 12px 26px rgba(20,20,20,.3); }
[data-theme="dark"] .header-cta { background:var(--gold); color:#141414; box-shadow:0 8px 20px rgba(244,189,69,.28); }
[data-theme="dark"] .header-cta:hover { background:#FFD36E; color:#141414; box-shadow:0 12px 26px rgba(244,189,69,.36); }
/* ===== Footer unifié (adaptatif clair/sombre) ===== */
.site-footer{ background:var(--bg-secondary); color:var(--text-secondary); border-top:1px solid var(--border-color); }
.footer-top{ display:grid; grid-template-columns:1fr 1.2fr; gap:80px; padding:70px 0 50px; }
.footer-brand-link{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.footer-brand-link img{ width:38px; height:38px; }
.footer-brand-link span{ font-weight:700; letter-spacing:.08em; font-size:.95rem; color:var(--text-primary); text-transform:uppercase; }
.site-footer p{ color:var(--text-secondary); font-family:var(--font-display); margin:22px 0; font-size:14px; font-style:italic; line-height:1.5; }
.footer-social{ display:flex; flex-wrap:wrap; gap:9px; }
.footer-social a, .footer-social button{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 40%, var(--border-color)); color:var(--accent-strong); background:transparent; font-size:11px; font-weight:700; cursor:pointer; text-decoration:none; transition:transform .18s var(--ease-out), background .18s, color .18s, border-color .18s; }
.footer-social a:hover, .footer-social button:hover{ transform:translateY(-2px); background:var(--accent); color:#141414; border-color:var(--accent); }
.footer-social svg{ width:16px; height:16px; }
.footer-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.footer-links h4{ color:var(--accent-strong); letter-spacing:.08em; text-transform:uppercase; margin:0 0 15px; font-size:11px; }
.footer-links a{ display:block; color:var(--text-secondary); margin:9px 0; font-size:11px; text-decoration:none; }
.footer-links a:hover{ color:var(--accent-strong); }
.footer-bottom{ display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--border-color); padding:20px 0; font-size:10px; color:var(--text-tertiary); }
@media (max-width:760px){
.footer-top{ grid-template-columns:1fr; gap:38px; padding:50px 0 40px; }
.footer-links{ gap:17px; }
.footer-links h4,.footer-links a{ font-size:10px; }
.footer-bottom{ flex-direction:column; gap:7px; line-height:1.4; }
}
/* Bandeau d'annonce : doré en mode sombre, comme l'accueil */
[data-theme="dark"] .site-announcement { background:linear-gradient(90deg,#f8d36d,#e8ad2a); color:#14273b; border-bottom-color:rgba(255,255,255,.22); }
[data-theme="dark"] .site-announcement a { color:#14273b; font-weight:800; }
[data-theme="dark"] .site-announcement strong { color:#14273b; }
/* Icônes réseaux dans leurs couleurs de marque */
.footer-social .soc-fb{ background:#1877F2; border-color:#1877F2; color:#fff; }
.footer-social .soc-yt{ background:#FF0000; border-color:#FF0000; color:#fff; width:46px; border-radius:11px; }
.footer-social .soc-fb:hover, .footer-social .soc-yt:hover{ color:#fff; transform:translateY(-2px); filter:brightness(1.07); }
.footer-social .soc-fb:hover{ background:#1877F2; border-color:#1877F2; }
.footer-social .soc-yt:hover{ background:#FF0000; border-color:#FF0000; }
.footer-social .soc-fb svg, .footer-social .soc-yt svg{ width:17px; height:17px; }
.footer-social .soc-tt{ background:#010101; border-color:#010101; color:#fff; }
.footer-social .soc-tt:hover{ background:#010101; border-color:#010101; color:#fff; transform:translateY(-2px); filter:brightness(1.35); }
.footer-social .soc-tt svg{ width:17px; height:17px; }
[data-theme="dark"] .footer-social .soc-tt{ border-color:rgba(255,255,255,.34); }
/* ===== Dynamisme : barre de lecture, sommaire ancré, chiffres animés ======== */
/* 1) Barre de progression de lecture (fine ligne dorée tout en haut) */
.page-progress {
position:fixed; top:0; left:0; right:0; height:3px; z-index:1200;
pointer-events:none; background:transparent;
}
.page-progress > span {
display:block; height:100%; width:0;
background:linear-gradient(90deg, var(--gold), var(--sun));
box-shadow:0 0 12px rgba(217,154,32,.5);
}
/* 2) Sommaire ancré, visible seulement sur grand écran */
.page-toc { display:none; }
.content article h2 { scroll-margin-top: calc(var(--announcement-height) + 92px); }
@media (min-width:1120px) {
.content.has-toc {
display:grid; grid-template-columns:214px minmax(0,1fr);
gap:clamp(2rem,4vw,3.5rem); align-items:start;
}
.content.has-toc > *:not(.page-toc) { grid-column:2; }
.page-toc {
display:block; grid-column:1; grid-row:1;
position:sticky; top:calc(var(--announcement-height) + 92px);
}
.page-toc-title {
font-size:.67rem; font-weight:700; text-transform:uppercase;
letter-spacing:.13em; color:var(--text-tertiary); margin-bottom:.75rem;
}
.page-toc ol { list-style:none; margin:0; padding:0; border-left:1.5px solid var(--border-color); }
.page-toc li { margin:0; }
.page-toc a {
display:block; margin-left:-1.5px; padding:.44rem 0 .44rem .9rem;
border-left:1.5px solid transparent; text-decoration:none;
font-size:.82rem; line-height:1.35; color:var(--text-tertiary);
transition:color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.page-toc a:hover { color:var(--text-primary); }
.page-toc a.is-current { color:var(--accent-strong); border-left-color:var(--gold); font-weight:600; }
}
/* 3) Grille de chiffres clés */
.stat-grid { display:grid; gap:1rem; grid-template-columns:1fr; margin:var(--space-6) 0; }
@media (min-width:620px) {
.stat-grid--2 { grid-template-columns:repeat(2,1fr); }
.stat-grid--3 { grid-template-columns:repeat(3,1fr); }
.stat-grid--4 { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:980px) { .stat-grid--4 { grid-template-columns:repeat(4,1fr); } }
.stat-tile {
position:relative; overflow:hidden; text-align:center;
background:linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
border:1px solid color-mix(in srgb, var(--gold) 26%, var(--border-color));
border-radius:var(--radius-lg); padding:1.6rem 1.15rem 1.4rem;
box-shadow:var(--shadow-sm);
transition:transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), border-color var(--fast);
}
.stat-tile::before {
content:""; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg, var(--gold), var(--sun));
}
.stat-tile:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.stat-tile .stat-number {
display:block; font-size:clamp(2rem,5vw,2.85rem);
color:var(--accent-strong); font-variant-numeric:tabular-nums;
}
.stat-tile .stat-label {
display:block; margin-top:.5rem; font-size:.88rem; line-height:1.45;
color:var(--text-secondary); max-width:30ch;
}
@media (prefers-reduced-motion:reduce) {
.stat-tile:hover { transform:none; }
}
/* 4) Fiche région : identité, chips et barres comparatives (chantier 3) */
.region-fiche {
margin:var(--space-6) 0 0;
background:var(--bg-primary);
border:1px solid var(--border-color);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
overflow:hidden;
}
.region-fiche-row {
display:grid; grid-template-columns:1fr; gap:.35rem;
padding:1.05rem 1.25rem;
border-top:1px solid var(--border-color);
}
.region-fiche-row:first-child { border-top:0; }
@media (min-width:720px) {
.region-fiche-row { grid-template-columns:200px 1fr; gap:1.25rem; align-items:baseline; }
}
.region-fiche-key {
font-size:.7rem; font-weight:700; text-transform:uppercase;
letter-spacing:.12em; color:var(--text-tertiary);
}
.region-fiche-val { font-size:1rem; line-height:1.5; color:var(--text-primary); }
.region-fiche-val strong { font-family:var(--font-display); font-size:1.25rem; font-weight:600; }
.chip-row { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip {
display:inline-block; padding:.3rem .7rem;
font-size:.84rem; line-height:1.3; font-weight:600;
border-radius:999px;
color:var(--accent-strong);
background:color-mix(in srgb, var(--gold) 13%, transparent);
border:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}
.chip--plain {
font-weight:500; color:var(--text-secondary);
background:var(--bg-secondary);
border-color:var(--border-color);
}
.ic-bars { max-width:660px; margin:0 auto; }
.ic-bars-list { display:flex; flex-direction:column; gap:9px; }
.ic-bar { display:flex; align-items:center; gap:10px; }
.ic-bar-name {
width:98px; flex:0 0 98px; font-size:.78rem; font-weight:600;
line-height:1.25; color:var(--text-secondary);
}
.ic-bar-track {
flex:1; background:var(--bg-secondary); border-radius:6px; overflow:hidden;
border:1px solid var(--border-color);
}
.ic-bar-fill {
display:block; height:20px; width:0;
background:var(--c, var(--gold));
border-radius:6px 0 0 6px;
transition:width 1s var(--ease-out);
}
.ic-bar-val {
width:60px; flex:0 0 60px; text-align:right;
font-size:.83rem; font-variant-numeric:tabular-nums; color:var(--text-secondary);
}
.ic-bar.is-self .ic-bar-name { color:var(--accent-strong); font-weight:700; }
.ic-bar.is-self .ic-bar-val { color:var(--text-primary); font-weight:700; }
.ic-bar.is-self .ic-bar-track {
border-color:color-mix(in srgb, var(--gold) 55%, var(--border-color));
box-shadow:0 0 0 2px color-mix(in srgb, var(--gold) 20%, transparent);
}
@media (min-width:620px) {
.ic-bar-name { width:112px; flex:0 0 112px; font-size:.9rem; }
.ic-bar-val { width:64px; flex:0 0 64px; }
}
@media (prefers-reduced-motion:reduce) {
.ic-bar-fill { transition:none; }
}
/* 5) Simulateur 40-40-20 : curseur et barres en direct (chantier 4) */
/* Memes couleurs que le donut de l'accueil : or, terre cuite, vert d'esperance. */
:root {
--seg-region: #E2A32B;
--seg-federal: #C2683D;
--seg-solid: #6E9B5B;
}
[data-theme="dark"] {
--seg-region: #F0C04A;
--seg-federal: #E08A5E;
--seg-solid: #8FBF7A;
}
.sim40 { max-width:860px; }
.sim40-sr {
position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Montant choisi : la valeur que l'oeil doit lire en premier */
.sim40-amount {
display:block; margin:.15rem 0 .9rem;
font-family:var(--font-display); font-weight:600;
font-size:clamp(1.7rem,6vw,2.5rem); line-height:1.05;
color:var(--accent-strong); font-variant-numeric:tabular-nums;
}
/* Curseur */
.sim40-range {
-webkit-appearance:none; appearance:none;
display:block; width:100%; height:30px;
background:transparent; cursor:pointer;
}
.sim40-range:focus-visible { outline:none; }
.sim40-range::-webkit-slider-runnable-track {
height:10px; border-radius:999px; border:1px solid var(--border-color);
background:linear-gradient(90deg, var(--seg-region) var(--p,10%), var(--bg-tertiary) var(--p,10%));
}
.sim40-range::-moz-range-track {
height:10px; border-radius:999px;
background:var(--bg-tertiary); border:1px solid var(--border-color);
}
.sim40-range::-moz-range-progress {
height:10px; border-radius:999px; background:var(--seg-region);
}
.sim40-range::-webkit-slider-thumb {
-webkit-appearance:none; appearance:none;
width:28px; height:28px; margin-top:-10px;
border-radius:50%; background:var(--seg-region);
border:3px solid var(--bg-primary);
box-shadow:0 2px 10px rgba(0,0,0,.22);
transition:transform var(--fast) var(--ease-out);
}
.sim40-range::-moz-range-thumb {
width:28px; height:28px; border-radius:50%;
background:var(--seg-region); border:3px solid var(--bg-primary);
box-shadow:0 2px 10px rgba(0,0,0,.22);
}
.sim40-range:active::-webkit-slider-thumb { transform:scale(1.12); }
.sim40-range:focus-visible::-webkit-slider-thumb { box-shadow:var(--ring); }
.sim40-range:focus-visible::-moz-range-thumb { box-shadow:var(--ring); }
.sim40-scale {
display:flex; justify-content:space-between;
font-size:.72rem; font-weight:600; letter-spacing:.04em;
color:var(--text-tertiary); margin-top:-.25rem;
}
/* Exemples cliquables */
.sim40-presets {
display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
margin-top:1rem;
}
.sim40-presets-label {
font-size:.74rem; font-weight:700; text-transform:uppercase;
letter-spacing:.1em; color:var(--text-tertiary); margin-right:.2rem;
}
.chip--btn { cursor:pointer; font-family:inherit; transition:background var(--fast), border-color var(--fast), transform var(--fast) var(--ease-out); }
.chip--btn:hover { background:color-mix(in srgb, var(--gold) 24%, transparent); transform:translateY(-1px); }
.chip--btn:focus-visible { outline:none; box-shadow:var(--ring); }
.chip--btn.is-active { background:var(--seg-region); color:#141414; border-color:var(--seg-region); }
.sim40-hint { margin-top:.8rem; font-size:.85rem; line-height:1.5; color:var(--text-tertiary); }
/* Volume total collecte, puis sa decoupe 40-40-20 */
.sim40-viz { margin:var(--space-5) 0 var(--space-5); }
.sim40-track {
height:34px; border-radius:10px; overflow:hidden;
background:var(--bg-tertiary); border:1px solid var(--border-color);
}
.sim40-fill {
display:flex; height:100%; width:0;
transition:width .75s var(--ease-out);
}
.sim40-seg { display:block; height:100%; }
.sim40-seg--region { width:40%; background:var(--seg-region); }
.sim40-seg--federal { width:40%; background:var(--seg-federal); }
.sim40-seg--solid { width:20%; background:var(--seg-solid); }
.sim40-track-note {
margin-top:.55rem; font-size:.78rem; color:var(--text-tertiary);
}
/* Cartes de resultat : libelle, montant, barre proportionnelle */
.sim40-card { text-align:left; display:flex; flex-direction:column; gap:.45rem; }
.sim40-card .simulator-result-label {
display:flex; align-items:center; justify-content:space-between; gap:.5rem;
font-size:.78rem; text-transform:uppercase; letter-spacing:.09em;
color:var(--text-tertiary);
}
.sim40-card .simulator-result-label b {
font-size:.95rem; letter-spacing:0; color:var(--text-primary);
}
.sim40-card .simulator-result-value {
margin:0; font-size:clamp(1.15rem,3.6vw,1.45rem);
font-variant-numeric:tabular-nums; color:var(--text-primary);
}
.sim40-bar {
display:block; height:8px; border-radius:999px;
background:var(--bg-tertiary); overflow:hidden;
}
.sim40-bar i {
display:block; height:100%; width:0; border-radius:999px;
transition:width .75s var(--ease-out);
}
.sim40-card--region .sim40-bar i { background:var(--seg-region); }
.sim40-card--federal .sim40-bar i { background:var(--seg-federal); transition-delay:.08s; }
.sim40-card--solid .sim40-bar i { background:var(--seg-solid); transition-delay:.16s; }
.sim40-note { font-size:.8rem; line-height:1.45; color:var(--text-secondary); }
.sim40-horizon {
margin-top:var(--space-5); padding:1rem 1.15rem;
border-radius:var(--radius-md);
background:var(--bg-primary); border:1px dashed var(--hairline-2);
font-size:.92rem; line-height:1.55; color:var(--text-secondary);
}
.sim40-horizon strong {
font-family:var(--font-display); font-size:1.08rem; font-weight:600;
color:var(--accent-strong); font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion:reduce) {
.sim40-fill, .sim40-bar i { transition:none; }
.chip--btn:hover { transform:none; }
}
/* 6) Transitions douces entre pages (chantier 5)
100% natif : aucune interception des liens en JavaScript, donc aucun risque
de lien mort. Les navigateurs qui ne connaissent pas encore l'API ignorent
simplement ce bloc et naviguent normalement. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
animation: ic-page-out .18s var(--ease-out) both;
}
::view-transition-new(root) {
animation: ic-page-in .26s var(--ease-out) both;
}
@keyframes ic-page-out {
to { opacity:0; transform:translateY(-6px); }
}
@keyframes ic-page-in {
from { opacity:0; transform:translateY(10px); }
to { opacity:1; transform:none; }
}
/* L'en-tête et le pied de page ne clignotent pas : ils glissent d'une page
à l'autre comme un cadre fixe. */
.site-header { view-transition-name: ic-header; }
.site-footer { view-transition-name: ic-footer; }
::view-transition-old(ic-header), ::view-transition-new(ic-header),
::view-transition-old(ic-footer), ::view-transition-new(ic-footer) {
animation: none; mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
}
/* ==========================================================================
7) Kit motion (chantier 6) : le défilement doit se voir.
Tout est en transform/opacity (fluide), coupé si prefers-reduced-motion.
========================================================================== */
@property --ic-angle { syntax: ''; initial-value: 0deg; inherits: false; }
/* 7.0 Garde-fou : aucune page ne doit glisser sur le cote au telephone.
clip et non hidden, pour ne pas casser l'en-tete collant. */
html, body { overflow-x: clip; }
/* 7.1 Révélation plus franche : montée, léger zoom, flou qui se dissipe */
.has-js .reveal {
opacity:0; transform:translateY(30px) scale(.985); filter:blur(7px);
transition:opacity .72s var(--ease-out), transform .72s var(--ease-out), filter .72s var(--ease-out);
}
.has-js .reveal.is-visible { opacity:1; transform:none; filter:blur(0); }
.reveal[data-delay="1"]{ transition-delay:.07s; }
.reveal[data-delay="2"]{ transition-delay:.14s; }
.reveal[data-delay="3"]{ transition-delay:.21s; }
.reveal[data-delay="4"]{ transition-delay:.28s; }
.reveal[data-delay="5"]{ transition-delay:.35s; }
.reveal[data-delay="6"]{ transition-delay:.42s; }
.reveal[data-delay="7"]{ transition-delay:.49s; }
.reveal[data-delay="8"]{ transition-delay:.56s; }
/* 7.2 Titres révélés mot à mot */
.ic-word { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.04em; }
.ic-word > i {
display:inline-block; font-style:inherit;
transform:translateY(115%); opacity:0;
transition:transform .85s var(--ease-out), opacity .6s var(--ease-out);
transition-delay:calc(var(--i,0) * .055s);
}
.is-visible .ic-word > i, .ic-word.is-visible > i { transform:none; opacity:1; }
/* 7.3 Trait doré qui se dessine sous les titres de section */
.section-title { position:relative; }
.section-title::after {
content:""; position:absolute; left:0; bottom:-.4rem;
height:2px; width:0; border-radius:2px;
background:linear-gradient(90deg, var(--gold), transparent);
transition:width 1s var(--ease-out) .3s;
}
.reveal.is-visible .section-title::after,
.section-header.is-visible .section-title::after { width:78px; }
.text-center .section-title::after { left:50%; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--gold),transparent); }
/* 7.4 Images : volet qui s'ouvre + léger dézoom */
.has-js figure.reveal img, .has-js .media-figure.reveal img {
clip-path:inset(0 0 14% 0); transform:scale(1.05);
transition:clip-path 1s var(--ease-out), transform 1.3s var(--ease-out);
}
.has-js figure.reveal.is-visible img, .has-js .media-figure.reveal.is-visible img {
clip-path:inset(0 0 0 0); transform:none;
}
/* 7.5 Pastilles qui arrivent en cascade */
.has-js .reveal .chip {
opacity:0; transform:translateY(10px) scale(.94);
transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.has-js .reveal.is-visible .chip { opacity:1; transform:none; }
.reveal.is-visible .chip:nth-child(1){transition-delay:.05s}
.reveal.is-visible .chip:nth-child(2){transition-delay:.10s}
.reveal.is-visible .chip:nth-child(3){transition-delay:.15s}
.reveal.is-visible .chip:nth-child(4){transition-delay:.20s}
.reveal.is-visible .chip:nth-child(5){transition-delay:.25s}
.reveal.is-visible .chip:nth-child(6){transition-delay:.30s}
.reveal.is-visible .chip:nth-child(7){transition-delay:.35s}
.reveal.is-visible .chip:nth-child(n+8){transition-delay:.40s}
/* 7.6 Reflet qui balaie les barres pendant qu'elles se remplissent */
.ic-bar-fill, .sim40-bar i, .sim40-fill { position:relative; overflow:hidden; }
.ic-bar-fill::after, .sim40-bar i::after, .sim40-fill::after {
content:""; position:absolute; inset:0;
background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
transform:translateX(-130%);
animation:ic-sweep 2.1s var(--ease-out) .35s 2;
}
@keyframes ic-sweep { to { transform:translateX(130%); } }
/* 7.7 Aurore lente derrière les en-têtes de page */
.hero::after {
content:""; position:absolute; z-index:-1; inset:-30% -10% auto -10%; height:150%;
background:
radial-gradient(38% 42% at 18% 32%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
radial-gradient(34% 38% at 82% 18%, color-mix(in srgb, var(--sun) 12%, transparent), transparent 70%);
filter:blur(30px); opacity:.55; pointer-events:none;
animation:ic-aurora 22s ease-in-out infinite alternate;
}
@keyframes ic-aurora {
0% { transform:translate3d(0,0,0) scale(1); }
50% { transform:translate3d(3%, 2%, 0) scale(1.08); }
100% { transform:translate3d(-3%, -2%, 0) scale(1.04); }
}
/* 7.8 Halo doré qui suit la souris sur les blocs (ordinateur, pointeur fin) */
.ic-spot { position:relative; }
.ic-spot::after {
content:""; position:absolute; inset:0; border-radius:inherit;
padding:1.5px; pointer-events:none; opacity:0;
background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), var(--gold), transparent 70%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite:exclude;
transition:opacity .4s var(--ease-out);
}
.ic-spot:hover::after { opacity:1; }
/* 7.9 Bouton principal : éclat qui traverse au survol */
.btn-primary { position:relative; overflow:hidden; }
.btn-primary::after {
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.42) 50%, transparent 68%);
transform:translateX(-130%);
transition:transform .8s var(--ease-out);
}
.btn-primary:hover::after { transform:translateX(130%); }
/* 7.10 Dérive douce du titre de page quand on quitte le haut (100% natif) */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.hero h1, .hero .hero-hook {
animation:ic-drift linear both;
animation-timeline:view();
animation-range:exit 0% exit 90%;
}
@keyframes ic-drift { to { transform:translateY(-26px); opacity:.3; } }
}
}
@media (prefers-reduced-motion: reduce) {
.ic-word > i { transform:none; opacity:1; transition:none; }
.section-title::after { transition:none; width:78px; }
.hero::after { animation:none; }
.ic-bar-fill::after, .sim40-bar i::after, .sim40-fill::after { animation:none; display:none; }
.has-js figure.reveal img, .has-js .media-figure.reveal img { clip-path:none; transform:none; }
}
/* ==========================================================================
8) Legende de la carte en pastilles vivantes (reliees a la carte)
========================================================================== */
/* On neutralise d'abord l'ancienne legende : ses regles mettaient tous les
en carres de 14 px, ce qui ecrasait les libelles. */
.map-legend--pills { display:flex; flex-wrap:wrap; gap:.55rem; }
.map-legend--pills li { display:block; flex:0 0 auto; }
.map-legend--pills span { width:auto; height:auto; border-radius:0; display:inline; }
.map-legend--pills .legend-dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.legend-pill {
display:inline-flex; align-items:baseline; gap:.45rem; white-space:nowrap;
padding:.45rem .85rem .45rem .65rem; border-radius:999px;
text-decoration:none; color:var(--text-primary);
border:1px solid color-mix(in srgb, var(--c) 38%, var(--border-color));
background:color-mix(in srgb, var(--c) 9%, var(--bg-primary));
transition:background var(--fast) var(--ease-out), border-color var(--fast),
transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}
.legend-dot {
width:11px; height:11px; border-radius:50%; background:var(--c);
align-self:center; flex:none;
box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}
.legend-name { font-weight:700; font-size:.86rem; letter-spacing:.01em; }
.legend-seat { font-size:.78rem; color:var(--text-tertiary); }
.legend-pill:hover, .legend-pill:focus-visible {
background:color-mix(in srgb, var(--c) 20%, var(--bg-primary));
border-color:var(--c); outline:none;
transform:translateY(-2px);
box-shadow:0 10px 20px -8px color-mix(in srgb, var(--c) 55%, transparent);
}
.legend-pill:focus-visible { box-shadow:var(--ring); }
/* La carte repond a la pastille survolee */
.ci-region, .ci-region path {
transition:opacity .3s var(--ease-out), filter .3s var(--ease-out), transform .3s var(--ease-out);
}
/* Relief : la region survolee se souleve au-dessus des autres */
.ci-map { overflow:visible; }
.ci-region { transform-box:fill-box; transform-origin:center; cursor:pointer; }
.ci-region:hover, .ci-region:focus-visible {
transform:translateY(-7px) scale(1.04);
filter:drop-shadow(0 14px 20px rgba(20,20,20,.4)) saturate(1.15) brightness(1.07);
outline:none;
}
.map-container.is-focusing .ci-region { opacity:.25; }
.map-container.is-focusing .ci-region.is-lit { opacity:1; }
.ci-region.is-lit { filter:saturate(1.25) brightness(1.05) drop-shadow(0 6px 14px rgba(0,0,0,.28)); }
@media (prefers-reduced-motion:reduce) {
.legend-pill:hover { transform:none; }
.ci-region, .ci-region path { transition:none; }
}
.legend-pill.is-active { background:color-mix(in srgb, var(--c) 20%, var(--bg-primary)); border-color:var(--c); }
/* ==========================================================================
9) Touches de couleur (esprit Sanzo Wada, chaud)
La charte ne bouge pas : fond crème, noir profond, or. On ajoute seulement
des accents qui tournent d'un bloc à l'autre, pour la surprise heureuse.
Les versions "foncées" servent au texte, elles passent le contraste AA.
========================================================================== */
:root {
--ic-or:#E2A32B; --ic-or-fonce:#8A5E0F;
--ic-terre:#C2683D; --ic-terre-fonce:#8F4524;
--ic-espoir:#6E9B5B; --ic-espoir-fonce:#44663A;
--ic-prune:#7A4FA0; --ic-prune-fonce:#573377;
}
[data-theme="dark"] {
--ic-or-fonce:#F0C04A; --ic-terre-fonce:#E89363;
--ic-espoir-fonce:#9CC489; --ic-prune-fonce:#C3A2E0;
}
/* Blocs chiffrés : un accent par tuile */
.stat-grid .stat-tile:nth-child(4n+1){ --t:var(--ic-or); --tf:var(--ic-or-fonce); }
.stat-grid .stat-tile:nth-child(4n+2){ --t:var(--ic-terre); --tf:var(--ic-terre-fonce); }
.stat-grid .stat-tile:nth-child(4n+3){ --t:var(--ic-espoir); --tf:var(--ic-espoir-fonce); }
.stat-grid .stat-tile:nth-child(4n+4){ --t:var(--ic-prune); --tf:var(--ic-prune-fonce); }
.stat-tile { border-color:color-mix(in srgb, var(--t, var(--gold)) 26%, var(--border-color)); }
.stat-tile::before {
background:linear-gradient(90deg, var(--t, var(--gold)), color-mix(in srgb, var(--t, var(--sun)) 20%, transparent));
}
.stat-tile .stat-number { color:var(--tf, var(--accent-strong)); }
.stat-tile:hover {
border-color:var(--t, var(--gold));
box-shadow:0 16px 32px -16px color-mix(in srgb, var(--t, var(--gold)) 65%, transparent);
}
/* Pastilles de ressources : même rotation, les pastilles neutres restent neutres */
.chip-row .chip:not(.chip--plain):nth-child(4n+1){ --t:var(--ic-or); --tf:var(--ic-or-fonce); }
.chip-row .chip:not(.chip--plain):nth-child(4n+2){ --t:var(--ic-terre); --tf:var(--ic-terre-fonce); }
.chip-row .chip:not(.chip--plain):nth-child(4n+3){ --t:var(--ic-espoir); --tf:var(--ic-espoir-fonce); }
.chip-row .chip:not(.chip--plain):nth-child(4n+4){ --t:var(--ic-prune); --tf:var(--ic-prune-fonce); }
.chip:not(.chip--plain) {
color:var(--tf, var(--accent-strong));
background:color-mix(in srgb, var(--t, var(--gold)) 13%, transparent);
border-color:color-mix(in srgb, var(--t, var(--gold)) 36%, transparent);
}
/* Trait sous les titres : il change de couleur de section en section */
.section:nth-of-type(3n+1) .section-title::after { background:linear-gradient(90deg, var(--ic-or), transparent); }
.section:nth-of-type(3n+2) .section-title::after { background:linear-gradient(90deg, var(--ic-terre), transparent); }
.section:nth-of-type(3n+3) .section-title::after { background:linear-gradient(90deg, var(--ic-espoir), transparent); }
.text-center .section-title::after { background:linear-gradient(90deg, transparent, var(--gold), transparent); }
/* ==========================================================================
10) Tableau comparatif : couleur de region, barre de population, pastilles
========================================================================== */
.data-table tbody tr { border-left:4px solid var(--c, transparent); }
.data-table tbody tr:hover td { background:color-mix(in srgb, var(--c, var(--gold)) 7%, var(--bg-secondary)); }
.tc-region a {
display:inline-flex; align-items:center; gap:.5rem;
font-weight:700; color:var(--text-primary); text-decoration:none;
}
.tc-region a:hover { color:var(--c, var(--accent-strong)); }
.tc-dot {
width:11px; height:11px; border-radius:50%; flex:none; background:var(--c, var(--gold));
box-shadow:0 0 0 3px color-mix(in srgb, var(--c, var(--gold)) 22%, transparent);
}
.tc-pop { white-space:nowrap; }
.tc-num { display:block; font-variant-numeric:tabular-nums; font-weight:600; color:var(--text-primary); }
.tc-bar {
display:block; width:110px; height:7px; margin-top:.4rem;
background:var(--bg-tertiary); border-radius:999px; overflow:hidden;
}
.tc-fill {
display:block; height:100%; width:0; border-radius:999px;
background:var(--c, var(--gold));
transition:width 1s var(--ease-out);
}
.data-table .chip-row { gap:.3rem; }
.data-table .chip { font-size:.76rem; padding:.22rem .55rem; }
.tc-change { font-size:.88rem; line-height:1.45; min-width:200px; }
@media (max-width:720px) { .tc-bar { width:84px; } }
@media (prefers-reduced-motion:reduce) { .tc-fill { transition:none; } }
/* ==========================================================================
ic-pages v1 : LOT 5 du motion design.
Mouvement propre et continu des 23 pages interieures. Les revelations au
defilement existaient deja (kit du chantier 6) ; ce qui manquait, c'est que
les elements bougent d'eux-memes, comme sur l'accueil.
Meme grammaire que les lots 1 a 4 de index.html : un bloc autonome, un
prefixe de classes propre (icp-), le contenu d'origine jamais supprime mais
masque, des elements supplementaires porteurs de data-icp.
Tout est en transform / opacity / background-position, donc compose par le
GPU. Coupe par prefers-reduced-motion et mis en pause hors ecran (classe
.icp-vu posee par js/enhance.js).
Si le JS saute, aucune de ces regles ne s'active : les pages redeviennent
simplement celles d'avant, jamais blanches.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* --- 1) La bande du haut defile, comme sur l'accueil ---------------------- */
.site-announcement.icp-ann {
display:block; position:relative; overflow:hidden; cursor:pointer;
height:var(--announcement-height); min-height:var(--announcement-height);
padding:0; font-size:0; line-height:0;
--icp-or:#ffd46b; --icp-encre:#0a0a0a; --icp-pad:168px;
}
[data-theme="dark"] .site-announcement.icp-ann { --icp-or:#14273b; --icp-encre:#ffd46b; }
/* le texte et le lien d'origine restent dans le DOM, ils ne s'affichent plus */
.site-announcement.icp-ann > *:not([data-icp]) { display:none !important; }
.icp-ann-win {
position:absolute; inset:0; display:flex; align-items:center;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - var(--icp-pad)),transparent calc(100% - var(--icp-pad) + 26px));
mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - var(--icp-pad)),transparent calc(100% - var(--icp-pad) + 26px));
}
.icp-ann-track {
display:flex; flex:0 0 auto; align-items:center; width:max-content;
animation:icp-defile var(--icp-t,42s) linear infinite; will-change:transform;
}
.site-announcement:hover .icp-ann-track,
.site-announcement:focus-within .icp-ann-track { animation-play-state:paused; }
@keyframes icp-defile { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
.icp-ann-copy { display:flex; flex:0 0 auto; align-items:center; }
/* inline-block et non flex : en flex les espaces autour des disparaissent */
.icp-m {
display:inline-block; vertical-align:middle; white-space:nowrap;
padding:0 20px; color:inherit;
font-size:10px; line-height:var(--announcement-height); font-weight:600;
letter-spacing:.12em; text-transform:uppercase;
}
.icp-m b { color:var(--icp-or); font-weight:800; letter-spacing:.1em; }
.icp-s { flex:0 0 auto; color:var(--icp-or); font-size:11px; line-height:1; opacity:.75; transform:translateY(-1px); }
.site-announcement.icp-ann a.icp-cta {
position:absolute; top:50%; right:10px; transform:translateY(-50%);
display:inline-flex !important; align-items:center; gap:5px; margin:0;
height:22px; padding:0 10px; border-radius:999px;
background:var(--icp-or); color:var(--icp-encre) !important;
font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
text-decoration:none; white-space:nowrap;
transition:transform .25s var(--ease-out), box-shadow .25s;
}
.icp-cta i { font-style:normal; font-size:13px; line-height:1; transition:transform .25s; }
.site-announcement:hover .icp-cta { box-shadow:0 0 0 3px rgba(255,212,107,.22); }
.site-announcement:hover .icp-cta i { transform:translateX(3px); }
.icp-cta:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
@media (max-width:760px) {
.site-announcement.icp-ann { --icp-pad:56px; }
.icp-m { font-size:9px; padding:0 15px; letter-spacing:.1em; }
.site-announcement.icp-ann a.icp-cta { height:20px; padding:0 7px; gap:0; right:7px; }
.icp-cta span { display:none; }
.icp-cta i { font-size:14px; }
}
/* --- 2) Le hero de page respire ------------------------------------------- */
/* .hero-bg, .hero-glow, .hero-rays et .hero-grain existaient en feuille mais
n'etaient poses sur aucune page interieure ; enhance.js les injecte, et on
ajoute ici ce qui bouge en plus de hero-breathe. */
.hero .icp-aube {
position:absolute; left:50%; top:-32%; width:min(96vw,1080px); aspect-ratio:1.6;
transform:translateX(-50%); pointer-events:none;
background:radial-gradient(closest-side, rgba(255,188,50,.16), transparent 70%);
filter:blur(10px);
animation:icp-derive 26s var(--ease-in-out) infinite alternate;
}
@keyframes icp-derive {
from { transform:translateX(-66%) scale(1); opacity:.75; }
to { transform:translateX(-34%) scale(1.07); opacity:1; }
}
/* les rayons balaient tres lentement, pivot au point de fuite du degrade */
.hero .hero-rays {
transform-origin:50% -8%;
animation:icp-rayons 44s var(--ease-in-out) infinite alternate;
}
@keyframes icp-rayons {
from { transform:rotate(-1.4deg); opacity:.38; }
to { transform:rotate(1.4deg); opacity:.58; }
}
/* trait dore sous le titre : il se tire a l'arrivee, puis garde un reflet */
.hero .icp-rule {
display:block; position:relative; overflow:hidden;
width:0; height:2px; margin:-.35rem 0 1.15rem; border-radius:2px;
background:linear-gradient(90deg, var(--gold), var(--sun));
transition:width 1.1s var(--ease-out) .35s;
}
.hero .icp-rule.icp-tire { width:min(188px,44vw); }
.hero .icp-rule::after {
content:""; position:absolute; inset:0; transform:translateX(-120%);
background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
animation:icp-reflet 7.5s var(--ease-in-out) 1.6s infinite;
}
@keyframes icp-reflet {
0% { transform:translateX(-120%); }
26%, 100% { transform:translateX(220%); }
}
/* --- 3) Cartes et tuiles de chiffres : un reflet lent les traverse -------- */
/* element injecte plutot qu'un ::after, pour ne pas entrer en conflit avec
.card--link::after ni avec .stat-tile::before deja utilises par la feuille. */
.icp-sheen {
position:absolute; inset:-30% -60%; z-index:-1; pointer-events:none;
transform:translateX(-100%) rotate(12deg);
background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 24%, transparent), transparent);
animation:icp-passe 13s linear var(--icp-d,0s) infinite;
}
[data-theme="dark"] .icp-sheen {
background:linear-gradient(90deg, transparent, rgba(255,212,107,.12), transparent);
}
@keyframes icp-passe {
0% { transform:translateX(-100%) rotate(12deg); }
18%, 100% { transform:translateX(220%) rotate(12deg); }
}
/* Le reflet passe derriere le texte mais devant le fond du bloc : il suffit
que le bloc soit son propre contexte d'empilement. On ne touche donc a aucun
enfant, et rien ne peut bouger dans la mise en page existante. */
.card:has(.icp-sheen), .stat-tile:has(.icp-sheen) { isolation:isolate; }
/* l'or coule dans le filet du haut des tuiles de chiffres */
.stat-tile::before {
background:linear-gradient(90deg, var(--gold), var(--sun), var(--gold), var(--sun));
background-size:300% 100%;
animation:icp-coule 11s linear var(--icp-d,0s) infinite;
}
@keyframes icp-coule { to { background-position:-300% 0; } }
/* --- 4) La citation respire ----------------------------------------------- */
.content article blockquote {
animation:icp-citation 7.5s var(--ease-in-out) infinite;
}
@keyframes icp-citation {
0%,100% { border-left-color:var(--gold); }
50% { border-left-color:var(--sun); }
}
/* --- 5) FAQ : le chevron invite a ouvrir, discretement ------------------- */
.faq-item:not(.is-open) .faq-question svg { animation:icp-invite 6s var(--ease-in-out) infinite; }
.faq-item:hover .faq-question svg, .faq-item.is-open .faq-question svg { animation:none; }
@keyframes icp-invite {
0%, 84%, 100% { transform:translateY(0); }
90% { transform:translateY(3px); }
}
/* --- 6) Signature doree du pied de page, ruban lent (echo du lot 2) ------- */
.icp-sign {
position:relative; overflow:hidden; margin-top:2.25rem;
height:36px; border-top:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
border-bottom:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 9%, transparent), color-mix(in srgb, var(--sun) 13%, transparent));
}
.icp-sign-track {
position:absolute; top:0; left:0; display:flex; align-items:center; height:100%;
width:max-content;
animation:icp-defile var(--icp-t,66s) linear infinite; will-change:transform;
}
.icp-sign:hover .icp-sign-track { animation-play-state:paused; }
.icp-sign-track span {
flex:0 0 auto; padding:0 1.6rem;
font-family:var(--font-display); font-style:italic; font-size:.92rem;
letter-spacing:.04em; color:var(--accent-strong); white-space:nowrap;
}
.icp-sign-track span::after {
content:"\2726"; margin-left:1.6rem; font-style:normal; font-size:.7rem;
opacity:.6; vertical-align:middle;
}
/* un halo derive d'un bord a l'autre, jamais plante dans un coin (leçon lot 2) */
.icp-sign::after {
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(28% 150% at 0% 50%, rgba(255,212,107,.32), transparent 70%);
animation:icp-halo 19s var(--ease-in-out) infinite alternate;
}
@keyframes icp-halo { from { transform:translateX(-10%); } to { transform:translateX(110%); } }
/* --- 7) Pause hors ecran : rien ne tourne pour personne ------------------- */
/* .icp-vu est posee par l'observateur de enhance.js quand le bloc entre dans
l'ecran, et retiree quand il en sort. Sans elle, l'animation est en pause. */
.icp-sheen, .icp-sign-track, .icp-sign::after,
.hero .icp-aube, .hero .hero-rays, .hero .icp-rule::after,
.stat-tile::before, .content article blockquote,
.faq-item:not(.is-open) .faq-question svg { animation-play-state:paused; }
.card.icp-vu .icp-sheen,
.stat-tile.icp-vu .icp-sheen,
.stat-tile.icp-vu::before,
.hero.icp-vu .icp-aube,
.hero.icp-vu .hero-rays,
.hero.icp-vu .icp-rule::after,
.icp-sign.icp-vu .icp-sign-track,
.icp-sign.icp-vu::after,
.content article blockquote.icp-vu,
.faq-item.icp-vu:not(.is-open) .faq-question svg { animation-play-state:running; }
/* la bande du haut est toujours visible, elle n'a pas besoin d'etre observee */
.icp-ann-track { animation-play-state:running; }
} /* fin @media (prefers-reduced-motion: no-preference) */
/* --- Mouvement reduit : la bande reste lisible, fixe et centree ---------- */
@media (prefers-reduced-motion: reduce) {
.site-announcement.icp-ann { position:relative; }
.site-announcement.icp-ann .icp-ann-win { -webkit-mask-image:none; mask-image:none; justify-content:center; }
.site-announcement.icp-ann .icp-ann-track { animation:none; }
.site-announcement.icp-ann .icp-ann-copy + .icp-ann-copy { display:none; }
.site-announcement.icp-ann .icp-s, .site-announcement.icp-ann .icp-m ~ .icp-m { display:none !important; }
.icp-sign, .icp-aube, .icp-rule { display:none !important; }
.icp-sheen { display:none !important; }
}