/* ============================================================================
   ENEM — Feuille de styles principale (base + composants + layout).
   Mobile-first, Flex/Grid only, zéro débordement horizontal.
   Dépend de tokens.css (chargé avant).
   ============================================================================ */

/* ----------------------------------------------------------------- RESET --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; }
h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); }
a { color: inherit; text-decoration: none; transition: color .2s; }
img, svg, video { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 4px; }
::selection { background: hsl(var(--primary) / .2); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; padding: .75rem 1.5rem; border-radius: 0 0 var(--radius) var(--radius);
  background: hsl(var(--primary)); color: #fff; font-weight: 600; font-size: .875rem; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------- LAYOUT --- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.section { padding-block: var(--section-md); }
.section-lg { padding-block: var(--section-lg); }
.section-sm { padding-block: var(--section-sm); }

.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.grid { display: grid; gap: clamp(1rem, 3vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.text-center { text-align: center; }
.muted { color: hsl(var(--muted-foreground)); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--primary-200); background: var(--primary-50);
  color: var(--primary-700); border-radius: 9999px;
  padding: .375rem .875rem; font-size: .75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.dark .eyebrow { border-color: var(--primary-800); background: hsl(var(--primary) / .12); color: var(--primary-300); }
.gold-rule { height: 2px; width: 3.5rem; border-radius: 9999px; background: linear-gradient(90deg, transparent, var(--gold-500), var(--warning-500), transparent); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: hsl(var(--muted-foreground)); max-width: 60ch; }

/* --------------------------------------------------------------- BUTTONS --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 500; font-size: .875rem; line-height: 1; white-space: nowrap;
  padding: .7rem 1.25rem; border-radius: var(--radius); border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.1em; height: 1.1em; }
.btn-primary { background: hsl(var(--primary)); color: #fff; box-shadow: var(--shadow-soft-sm); }
.btn-primary:hover { background: var(--primary-600); box-shadow: var(--shadow-primary); }
.btn-accent { background: hsl(var(--accent)); color: #fff; }
.btn-accent:hover { background: var(--accent-600); }
.btn-outline { border-color: hsl(var(--primary)); color: hsl(var(--primary)); background: transparent; }
.btn-outline:hover { background: hsl(var(--primary) / .07); }
.btn-ghost { color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--muted)); }
.btn-white { background: #fff; color: var(--primary-700); }
.btn-white:hover { box-shadow: var(--shadow-soft-lg); }
.btn-lg { padding: .85rem 2rem; font-size: 1rem; border-radius: var(--radius-2xl); }
.btn-xl { padding: 1rem 2.5rem; font-size: 1.125rem; border-radius: var(--radius-2xl); }
.btn-sm { padding: .45rem .875rem; font-size: .75rem; }
.btn-block { width: 100%; }

/* ----------------------------------------------------------------- CARDS --- */
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft-sm); }
.card-body { padding: 1.5rem; }
.premium-card {
  position: relative; overflow: hidden; background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / .6); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft-md); transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
}
.premium-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-xl); border-color: hsl(var(--primary) / .35); }
.premium-card::after {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px; opacity: 0; transition: opacity .5s;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / .6), transparent);
}
.premium-card:hover::after { opacity: 1; }
.glass-card {
  background: hsl(var(--card) / .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid hsl(0 0% 100% / .25); border-radius: var(--radius-2xl); box-shadow: var(--shadow-glass);
}
.feature-icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius);
  background: hsl(var(--primary) / .1); color: hsl(var(--primary)); margin-bottom: 1rem;
}
.feature-icon svg { width: 1.5rem; height: 1.5rem; }

/* --------------------------------------------------------------- BADGES --- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 9999px; font-size: .72rem; font-weight: 600; border: 1px solid transparent; }
.badge-primary { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); border-color: hsl(var(--primary) / .2); }
.badge-success { background: var(--success-50); color: var(--success-700); border-color: var(--success-100, #ccf3e1); }
.badge-warning { background: var(--warning-50); color: var(--warning-700); }
.badge-error   { background: var(--error-50);   color: var(--error-700); border-color: var(--error-100); }
.badge-outline { border-color: currentColor; color: hsl(var(--muted-foreground)); }

/* ---------------------------------------------------------------- FORMS --- */
.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-size: .875rem; font-weight: 500; }
.input, .select, .textarea {
  width: 100%; padding: .7rem .9rem; border-radius: var(--radius);
  border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground));
  transition: border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .15); }
.textarea { min-height: 7.5rem; resize: vertical; }
.input-group { position: relative; }
.input-group .icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; }
.input-group .input { padding-left: 2.5rem; }
.check { display: flex; align-items: flex-start; gap: .6rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.check input { margin-top: .15rem; width: 1rem; height: 1rem; accent-color: hsl(var(--primary)); }
.form-hint { font-size: .8rem; color: hsl(var(--muted-foreground)); }

/* ---------------------------------------------------------------- ALERTS --- */
.alert { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--radius); font-size: .9rem; border: 1px solid transparent; margin-bottom: 1rem; }
.alert-success { background: var(--success-50); color: var(--success-700); border-color: var(--success-100, #ccf3e1); }
.alert-error   { background: var(--error-50);   color: var(--error-700);   border-color: var(--error-100); }
.alert-info    { background: hsl(var(--primary) / .07); color: hsl(var(--primary)); border-color: hsl(var(--primary) / .2); }

/* ---------------------------------------------------------------- TABLES --- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-2xl); border: 1px solid hsl(var(--border)); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: .75rem 1rem; text-align: left; }
.table thead th { color: hsl(var(--muted-foreground)); font-weight: 500; border-bottom: 1px solid hsl(var(--border)); }
.table tbody tr { border-bottom: 1px solid hsl(var(--border) / .6); }
.table tbody tr:hover { background: hsl(var(--muted) / .4); }
.mono { font-family: var(--font-mono); font-size: .8rem; }

/* -------------------------------------------------------------- SKELETON --- */
.skeleton { position: relative; overflow: hidden; background: hsl(var(--muted)); border-radius: var(--radius); }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, hsl(var(--muted-foreground) / .1) 50%, transparent 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

/* ---------------------------------------------------- TEXTE / GRADIENTS --- */
.text-gradient-hero {
  background-image: linear-gradient(110deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 30%, #2ed3f0 50%, hsl(var(--accent)) 70%, hsl(var(--primary)) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) { .text-gradient-hero { animation: textFlow 8s ease-in-out infinite; } }
@keyframes textFlow { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }
.text-shadow-soft { text-shadow: 0 2px 20px rgba(0,0,0,.25); }

/* =================================================== EFFETS HÉRO MARITIME === */
.hero { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, hsl(var(--primary) / .15), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, hsl(var(--accent) / .1), transparent),
    hsl(var(--background));
}
.fx-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.aurora-blob { position: absolute; border-radius: 9999px; filter: blur(64px); opacity: .55; will-change: transform; animation: aurora 18s ease-in-out infinite alternate; mix-blend-mode: multiply; }
.dark .aurora-blob { mix-blend-mode: screen; opacity: .4; }
.blob-1 { width: 38vw; height: 38vw; left: -6vw; top: -10vw; background: radial-gradient(circle, var(--primary-400), transparent 70%); }
.blob-2 { width: 32vw; height: 32vw; right: -4vw; top: 4vw; background: radial-gradient(circle, var(--accent-400), transparent 70%); animation-delay: -6s; }
.blob-3 { width: 28vw; height: 28vw; left: 30vw; bottom: -12vw; background: radial-gradient(circle, var(--gold-300), transparent 70%); animation-delay: -12s; }
.fx-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, hsl(var(--primary) / .12) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--primary) / .12) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 25%, transparent 75%);
  animation: gridDrift 24s linear infinite;
}
.fx-sonar { position: absolute; width: 240px; height: 240px; right: 8%; top: 30%; pointer-events: none; }
.fx-sonar span { position: absolute; inset: 0; border-radius: 9999px; border: 1px solid hsl(var(--accent) / .45); animation: sonar 3.2s ease-out infinite; }
.fx-sonar span:nth-child(2) { animation-delay: 1s; } .fx-sonar span:nth-child(3) { animation-delay: 2s; }

/* Caustiques / lueur sous-marine iridescente */
.fx-caustic {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 20% 20%, hsl(var(--accent) / .18), transparent 70%),
    radial-gradient(ellipse 35% 25% at 80% 30%, hsl(var(--primary) / .16), transparent 70%),
    radial-gradient(ellipse 30% 22% at 55% 75%, hsl(var(--gold-300, #f9db66) / .10), transparent 70%);
  animation: caustic 14s ease-in-out infinite;
}
/* Balayage HUD vertical (effet holographique) */
.fx-scanline {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 46%, hsl(var(--accent) / .5) 50%, transparent 54%);
  background-size: 100% 300%;
  animation: scanY 7s ease-in-out infinite;
}
/* Bulles ascendantes */
.fx-bubbles { position: absolute; inset: 0; }
.fx-bubbles span {
  position: absolute; border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, hsl(var(--accent) / .7), hsl(var(--primary) / .25));
  box-shadow: 0 0 8px hsl(var(--accent) / .4);
  animation: rise 13s linear infinite;
}
/* Vague diagonale (bandes) */
.fx-wave {
  position: absolute; inset: 0; width: 200%;
  background-image: repeating-linear-gradient(115deg, transparent 0, hsl(var(--accent) / .08) 40px, transparent 80px);
  animation: waveX 18s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .fx-caustic, .fx-scanline, .fx-bubbles span, .fx-wave, .fx-grid, .fx-sonar span { animation: none !important; }
}

/* ----------------------------------------------------- REVEAL ON SCROLL --- */
/* L'état masqué n'est appliqué QUE si JS est actif (classe .js posée tôt par le
   script inline). Sans JS, le contenu reste pleinement visible (SEO/a11y). */
.reveal { transition: opacity .7s ease-out, transform .85s cubic-bezier(.22,1,.36,1); }
.js .reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ====================================================== HEADER / NAV ======= */
.site-header { position: sticky; top: 0; z-index: 50; }
.topbar { background: linear-gradient(90deg, var(--primary-800), var(--accent-700)); color: #fff; font-size: .8rem; }
.topbar .container { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: space-between; padding-block: .4rem; }
.topbar a { color: #fff; opacity: .92; } .topbar a:hover { opacity: 1; }
.navbar { background: hsl(var(--background) / .85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid hsl(var(--border)); transition: box-shadow .3s; }
.site-header.scrolled .navbar { box-shadow: var(--shadow-soft-md); }
.navbar .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.brand img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.nav-links { display: none; align-items: center; gap: .35rem; }
.nav-links a { padding: .5rem .8rem; border-radius: var(--radius); font-weight: 500; font-size: .92rem; color: hsl(var(--muted-foreground)); }
.nav-links a:hover, .nav-links a.active { color: hsl(var(--primary)); background: hsl(var(--primary) / .07); }
.nav-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); color: hsl(var(--muted-foreground)); }
.icon-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.nav-toggle { display: grid; }
.mobile-menu { display: none; flex-direction: column; gap: .25rem; padding: 1rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--background)); }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: .7rem .8rem; border-radius: var(--radius); font-weight: 500; }
.mobile-menu a:hover { background: hsl(var(--muted)); }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* ====================================================== FOOTER ============= */
.site-footer { background: var(--primary-900); color: #cbd5e1; margin-top: var(--section-md); }
.dark .site-footer { background: #060c16; }
.site-footer a { color: #cbd5e1; } .site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); padding-block: var(--section-sm); }
.footer-grid h4 { color: #fff; font-size: .95rem; margin-bottom: .9rem; }
.footer-grid li { margin-bottom: .5rem; font-size: .9rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.25rem; font-size: .82rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; }

/* ====================================================== PORTAIL ============ */
.portal { min-height: 100dvh; background: hsl(var(--muted) / .3); }
.portal-sidebar {
  position: fixed; inset-block: 0; left: 0; width: var(--sidebar-width); z-index: 40;
  background: hsl(var(--background)); border-right: 1px solid hsl(var(--border));
  display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .3s;
}
.portal-sidebar.open { transform: none; }
.portal-sidebar .brand { height: var(--header-height); padding-inline: 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
.portal-nav { flex: 1; overflow-y: auto; padding: 1rem .75rem; }
.portal-nav a { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: var(--radius); font-size: .9rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.portal-nav a:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.portal-nav a.active { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.portal-nav .section-label { padding: .5rem .8rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--muted-foreground)); }
.portal-main { padding-inline: 0; }
.portal-header { position: sticky; top: 0; z-index: 30; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: clamp(1rem, 3vw, 1.5rem); background: hsl(var(--background) / .85); backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); }
.portal-content { padding: clamp(1rem, 3vw, 1.5rem); }
.portal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 35; display: none; }
.portal-backdrop.open { display: block; }

@media (min-width: 1024px) {
  .portal-sidebar { transform: none; }
  .portal-main { padding-left: var(--sidebar-width); }
  .portal-backdrop { display: none !important; }
  .portal-menu-btn { display: none; }
}

.stat-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.stat-card .value { font-size: 1.75rem; font-weight: 700; }
.stat-card .label { font-size: .85rem; color: hsl(var(--muted-foreground)); }

/* ====================================================== HÉRO ACCUEIL ======= */
.hero-inner { padding-block: clamp(3rem, 8vw, 6rem); max-width: 52rem; position: relative; z-index: 1; }
.hero-title { font-size: var(--text-display-xl); line-height: 1.1; max-width: 16ch; }
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; margin-top: 2.5rem; max-width: 40rem; }
.hero-stat .value { font-size: clamp(1.4rem, 3.4vw, 2.1rem); font-weight: 800; white-space: nowrap; }
.hero-stat .label { font-size: .82rem; }
@media (min-width: 768px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }

.page-header { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* CTA band */
.cta-band { border-radius: var(--radius-2xl); padding: clamp(2rem, 6vw, 4rem) 1.5rem; text-align: center;
  background: linear-gradient(135deg, var(--primary-700), var(--accent-700)); color: #fff; }
.cta-inner { position: relative; z-index: 1; max-width: 42rem; margin-inline: auto; }
.cta-band h2 { color: #fff; }

/* ====================================================== AUTH =============== */
.page-auth { background: hsl(var(--muted) / .3); }
.auth-shell { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.auth-aside { display: none; }
.auth-aside-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; gap: 1rem; padding: clamp(2rem, 5vw, 3.5rem); }
.auth-main { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 3rem) 1rem; }
.auth-card { width: 100%; max-width: 28rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft-lg); padding: clamp(1.5rem, 4vw, 2.25rem); }
.auth-card-head { text-align: center; margin-bottom: 1.5rem; }
.auth-card-head h1 { font-size: var(--text-h1); }
@media (min-width: 900px) {
  .auth-shell { grid-template-columns: 1.05fr 1fr; }
  .auth-aside { display: block; }
}

/* ====================================================== CONTACT =========== */
.contact-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 18rem 1fr; align-items: start; } }

/* Utilitaires responsive */
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: inline-flex; } }
code { font-family: var(--font-mono); font-size: .85em; background: hsl(var(--muted)); padding: .1em .4em; border-radius: 4px; }

/* ============================================ LMS / composants étape 2-6 === */
/* Barre de progression */
.progress { height: 8px; border-radius: 9999px; background: hsl(var(--muted)); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); transition: width .4s ease; }

/* Liste de leçons */
.lesson-link { color: inherit; transition: background .2s; }
.lesson-link:hover { background: hsl(var(--muted)); }
.lesson-check { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 9999px; border: 2px solid hsl(var(--border)); color: transparent; flex-shrink: 0; }
.lesson-check.done { border-color: var(--success-500); color: var(--success-600); }
.lesson-check svg { width: .9rem; height: .9rem; }

/* Options de quiz */
.quiz-option { display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); cursor: pointer; transition: border-color .2s, background .2s; }
.quiz-option:hover { border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .04); }
.quiz-option input { accent-color: hsl(var(--primary)); width: 1.1rem; height: 1.1rem; }

/* Champs compacts (tables d'admin, formulaires inline) */
.select-sm, .input-sm { height: 2rem; padding: .25rem .5rem; font-size: .82rem; border-radius: var(--radius-sm); border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.inline-form { display: inline; }

/* Éditeur léger */
.wysiwyg-toolbar { display: flex; gap: .25rem; margin-bottom: .35rem; }
.wysiwyg-toolbar .btn { min-width: 2rem; padding: .25rem .5rem; }

/* Corps d'article / contenu riche */
.article-body { font-size: 1.05rem; line-height: 1.8; color: hsl(var(--foreground)); }
.article-body p { margin-bottom: 1rem; }

/* Graphiques en barres CSS (statistiques) */
.bars { display: grid; gap: .6rem; }
.bar-row { display: grid; grid-template-columns: 4.5rem 1fr 2rem; align-items: center; gap: .6rem; }
.bar-label { font-size: .8rem; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 12px; border-radius: 9999px; background: hsl(var(--muted)); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 9999px; background: hsl(var(--primary)); transition: width .5s ease; }
.bar-fill.accent { background: hsl(var(--accent)); }

/* ============================================================================
   ACCUEIL VITRINE — sections & effets premium (port fidèle de l'original)
   ============================================================================ */
@keyframes glowPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.08); } }
@keyframes pingk { 75%,100% { transform: scale(2); opacity: 0; } }

/* Décors */
.bg-grid { background-image: linear-gradient(to right, hsl(var(--border) / .5) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--border) / .5) 1px, transparent 1px); background-size: 24px 24px; }
.bg-grid-fade {
  background-image: linear-gradient(to right, hsl(var(--primary) / .08) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--primary) / .08) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
}
.bg-noise { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; }
.glow-conic { background: conic-gradient(from 180deg at 50% 50%, hsl(var(--primary) / .25), hsl(var(--accent) / .25), hsl(46 100% 50% / .18), hsl(var(--primary) / .25)); }
.glow-pulse { animation: glowPulse 3.5s ease-in-out infinite; }

/* Pastille "ping" de l'eyebrow */
.ping-dot { position: relative; display: inline-flex; width: .5rem; height: .5rem; }
.ping-dot::before { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: hsl(var(--primary)); opacity: .75; animation: pingk 1.4s cubic-bezier(0,0,.2,1) infinite; }
.ping-dot::after { content: ''; position: relative; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--primary-600); }

/* Icônes flottantes (héro) */
.float-animation { animation: float 6s ease-in-out infinite; }
.fad-1 { animation-delay: .5s; } .fad-2 { animation-delay: 1s; } .fad-3 { animation-delay: 1.5s; }
.floating-icons { position: absolute; inset: 0; pointer-events: none; }
.floating-icons > span { position: absolute; display: inline-flex; }
.floating-icons svg { width: 1em; height: 1em; }
@media (max-width: 1023px) { .floating-icons { display: none; } }

/* CTA du héro : empilés sur mobile, côte à côte (gauche) sur desktop */
.hero-cta { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.75rem; align-items: center; }
@media (min-width: 640px) { .hero-cta { flex-direction: row; justify-content: center; } }
@media (min-width: 1024px) { .hero-cta { align-items: flex-start; justify-content: flex-start; } }

/* Wave divider */
.wave-divider { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; }
.wave-divider svg { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
.wave-divider .fill-bg { fill: hsl(var(--background)); }

/* Reflet (sheen) au survol */
.shine-hover { position: relative; overflow: hidden; }
.shine-hover::before { content: ''; position: absolute; inset-block: 0; left: -33%; width: 33%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-120%) skewX(-20deg); pointer-events: none; }
.shine-hover:hover::before { animation: shine 1.2s ease-out; }

/* Marquee (partenaires) */
.marquee-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; align-items: center; gap: 4rem; animation: marquee 35s linear infinite; }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
.marquee-track .pitem { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: hsl(var(--muted-foreground) / .7); }

/* ── HÉRO split (image + cartes glass) ── */
.hero-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .hero-split { grid-template-columns: 1fr 1fr; } }
.hero-copy { text-align: center; }
@media (min-width: 1024px) { .hero-copy { text-align: left; } }
.hero-copy .hero-stats { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid hsl(var(--border) / .5); grid-template-columns: repeat(3, 1fr); }
.hero-media { position: relative; display: none; }
@media (min-width: 1024px) { .hero-media { display: block; } }
.hero-media .frame { position: relative; aspect-ratio: 4/3; border-radius: 2rem; overflow: hidden; box-shadow: var(--shadow-soft-xl); outline: 1px solid hsl(0 0% 100% / .2); }
.hero-media .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.hero-media .frame:hover img { transform: scale(1.05); }
.hero-media .frame .scrim { position: absolute; inset: 0; background: linear-gradient(to top, hsl(210 100% 8% / .7), transparent 60%); }
.hero-media .frame .loc { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.92); font-size: .85rem; font-weight: 500; }
.hero-media .glowbg { position: absolute; inset: -1.5rem; z-index: -1; border-radius: 2.5rem; opacity: .6; filter: blur(40px); }
.float-card { position: absolute; display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: var(--radius-2xl); background: hsl(var(--card) / .8); backdrop-filter: blur(14px); border: 1px solid hsl(0 0% 100% / .25); box-shadow: var(--shadow-soft-xl); animation: float 6s ease-in-out infinite; }
.float-card .ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius); }
.float-card .t { font-size: .85rem; font-weight: 600; } .float-card .s { font-size: .72rem; color: hsl(var(--muted-foreground)); }

/* Bands & sections accueil */
.trust-band { border-block: 1px solid hsl(var(--border) / .6); background: hsl(var(--muted) / .3); }
.trust-band .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 2rem; padding-block: 1.25rem; font-size: .9rem; }
.trust-item { display: inline-flex; align-items: center; gap: .5rem; color: hsl(var(--muted-foreground)); font-weight: 500; }
.trust-item svg { width: 1.1rem; height: 1.1rem; color: hsl(var(--primary)); }
.section-blue { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--primary-700), var(--primary-700) 40%, var(--accent-700)); }
.section-blue .container { position: relative; z-index: 1; }
.about-media { position: relative; }
.about-media .pic { position: relative; aspect-ratio: 1; border-radius: 2rem; overflow: hidden; box-shadow: var(--shadow-soft-xl); }
.about-media .pic img { width: 100%; height: 100%; object-fit: cover; }
/* Effet « caméra drône » : zoom + panoramique lent (image unique, ex. héros Histoire) */
@media (prefers-reduced-motion: no-preference) {
  .about-media .pic:not(.slideshow) img { animation: droneCam 26s ease-in-out infinite; will-change: transform; transform-origin: center; }
  .about-media .pic:not(.slideshow):hover img { animation-play-state: paused; }
}

/* ── Diaporama (section À propos) : drône sur chaque photo + 3 transitions ── */
.slideshow { position: relative; isolation: isolate; } /* contient les z-index → le badge reste au-dessus */
.slideshow .slide { position: absolute; inset: 0; opacity: 0; z-index: 1; }
.slideshow .slide.is-active { opacity: 1; transform: none; z-index: 2; }
.slideshow .slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .slideshow .slide { transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; }
  /* États de départ (le JS pose une de ces 3 classes sur l'élément entrant) */
  .slideshow .slide.s-slide { transform: translateX(7%); }
  .slideshow .slide.s-zoom  { transform: scale(1.12); }
  .slideshow .slide.s-rise  { transform: translateY(7%) scale(1.05); }
  /* Effet « caméra drône » (zoom + panoramique lent) sur la photo affichée */
  .slideshow .slide.is-active img { animation: slideDrone 20s ease-in-out infinite; will-change: transform; transform-origin: center; }
  .slideshow .slide:not(.is-active) img { animation: none; }
  .slideshow:hover .slide.is-active img { animation-play-state: paused; }
}
@keyframes slideDrone {
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  50%  { transform: scale(1.18) translate3d(-2.6%, -1.6%, 0); }
  100% { transform: scale(1.05) translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .slideshow .slide { transition: opacity .4s ease; } }
@keyframes droneCam {
  0%   { transform: scale(1.18) translate3d(0, 0, 0); }
  22%  { transform: scale(1.30) translate3d(-4.2%, -2.6%, 0); }
  46%  { transform: scale(1.42) translate3d(3.8%, -3.6%, 0); }
  70%  { transform: scale(1.34) translate3d(4.4%, 3%, 0); }
  88%  { transform: scale(1.24) translate3d(-3%, 3.4%, 0); }
  100% { transform: scale(1.18) translate3d(0, 0, 0); }
}
.about-media .badge-float { position: absolute; z-index: 3; left: -1.25rem; bottom: -1.25rem; display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: var(--radius-2xl); border: 1px solid hsl(var(--border) / .5); background: hsl(var(--background) / .95); box-shadow: var(--shadow-soft-xl); backdrop-filter: blur(8px); }
.grad-icon { display: grid; place-items: center; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary-500), var(--accent-600)); color: #fff; }
.checklist { display: grid; gap: .75rem; }
.checklist li { display: flex; align-items: flex-start; gap: .75rem; color: hsl(var(--muted-foreground)); }
.checklist li svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .1rem; color: hsl(var(--primary)); }
.pill-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { border: 1px solid hsl(var(--border)); border-radius: 9999px; padding: .25rem .7rem; font-size: .8rem; }
.pill-white { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; }
.media-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .7s; }
.media-card:hover img { transform: scale(1.08); }
.tone-primary { background: var(--primary-100); color: var(--primary-600); }
.tone-accent { background: var(--accent-100); color: var(--accent-600); }
.tone-gold { background: var(--gold-100); color: var(--gold-700); }
.tone-success { background: var(--success-100); color: var(--success-600); }
.dark .tone-primary { background: var(--primary-900); color: var(--primary-300); }
.dark .tone-accent { background: var(--accent-900); color: var(--accent-300); }
.dark .tone-gold { background: var(--gold-700); color: var(--gold-100); }
.dark .tone-success { background: var(--success-700); color: var(--success-100); }
.avatar-ring { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 9999px; overflow: hidden; outline: 2px solid hsl(var(--primary) / .25); flex-shrink: 0; }
.avatar-ring img { width: 100%; height: 100%; object-fit: cover; }
.badge-gold { background: var(--gold-50); color: var(--gold-700); border-color: var(--gold-200); }
.badge-secondary { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.quote-icon { width: 2.25rem; height: 2.25rem; color: hsl(var(--primary) / .35); }
.director-grid { grid-template-columns: 1fr; }
@media (min-width: 768px) { .director-grid { grid-template-columns: auto 1fr; gap: 3rem !important; } }
/* L'icône de filière en overlay sur l'image (taille fixe) */
.media-card .ic svg { width: 1.25rem; height: 1.25rem; }

/* ============================================================================
   HEADER & FOOTER (port fidèle de l'original)
   ============================================================================ */
/* Bandeau d'annonce */
.announce { background: linear-gradient(90deg, var(--primary-800), var(--primary-700) 50%, var(--accent-700)); color: #fff; }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; height: 2.5rem; overflow: hidden; font-size: .81rem; }
.announce-inner > svg { width: 1rem; height: 1rem; color: var(--gold-300); flex-shrink: 0; }
.announce-text { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce-pill { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; background: rgba(255,255,255,.15); border-radius: 9999px; padding: .12rem .65rem; font-size: .72rem; font-weight: 600; color: #fff; }
.announce-pill:hover { background: rgba(255,255,255,.28); }
.announce-pill svg { width: .85rem; height: .85rem; }

/* Barre de contact */
.contactbar { display: none; background: var(--primary-950); color: #cbd5e1; border-bottom: 1px solid hsl(210 80% 10% / .5); font-size: .78rem; }
@media (min-width: 768px) { .contactbar { display: block; } }
.contactbar-inner { display: flex; align-items: center; justify-content: space-between; height: 2.25rem; }
.contactbar a { color: #bcd0e8; } .contactbar a:hover { color: #fff; }
.contactbar svg { width: .85rem; height: .85rem; }
.hide-lg-inline { display: none; }
@media (min-width: 1024px) { .hide-lg-inline { display: inline-flex; align-items: center; gap: .35rem; } }

/* Navbar (réutilise .navbar/.brand/.nav-links existants) */
.navbar-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: 1rem; }
.brand-text { display: none; line-height: 1.05; }
@media (min-width: 480px) { .brand-text { display: block; } }
.brand-name { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; }
.brand-sub { display: block; font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: hsl(var(--muted-foreground)); }
.navlink { position: relative; padding: .5rem .8rem; border-radius: var(--radius); font-weight: 500; font-size: .92rem; color: hsl(var(--foreground)); }
.navlink::after { content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .12rem; height: 2px; border-radius: 9999px; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.navlink:hover { color: hsl(var(--primary)); } .navlink:hover::after, .navlink.active::after { transform: scaleX(1); }
.navlink.active { color: hsl(var(--primary)); }

/* Logo en relief 3D */
.logo-3d-wrap { position: relative; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
.logo-3d-wrap::before { content: ''; position: absolute; inset: -22%; border-radius: 9999px; background: radial-gradient(circle at 50% 38%, hsl(var(--primary)/.45), hsl(var(--accent)/.18) 45%, transparent 72%); filter: blur(6px); opacity: .55; z-index: 0; }
.logo-3d-wrap .logo-3d { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 -0.5px 0 hsl(0 0% 100% / .35)) drop-shadow(0 1.5px 1px hsl(210 60% 4% / .55)) drop-shadow(0 5px 9px hsl(210 60% 4% / .45)); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.brand:hover .logo-3d { transform: translateY(-1.5px) scale(1.05) rotate(-3deg); }
/* Médaillon clair derrière le logo navy en mode sombre / auth / portail (sinon invisible) */
.dark .brand .logo-3d-wrap, body.page-auth .logo-3d-wrap, body.page-portal .logo-3d-wrap {
  background: radial-gradient(circle, #fdfeff 68%, #e9f1fb 100%);
  border-radius: 9999px; box-shadow: 0 2px 9px rgba(0, 0, 0, .35), inset 0 0 0 1px hsl(210 50% 88% / .7);
}
.dark .brand .logo-3d-wrap .logo-3d, body.page-auth .logo-3d, body.page-portal .logo-3d {
  padding: 9%; filter: drop-shadow(0 1px 1px hsl(210 40% 40% / .25));
}
.dark .brand .logo-3d-wrap::before { opacity: 0; }

/* ── Footer riche ── */
.site-footer { position: relative; overflow: hidden; background: var(--primary-950); color: #cbd5e1; margin-top: var(--section-md); }
.footer-top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-top { grid-template-columns: 1.3fr 1.6fr; } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: 2fr 2.3fr 1.8fr; } }
.footer-cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.site-footer h4 { color: #fff; font-family: var(--font-display); font-size: .95rem; margin-bottom: .9rem; }
.footer-cols li { margin-bottom: .55rem; }
.footer-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: #94a3b8; }
.footer-link:hover { color: #fff; }
.footer-link .dash { display: inline-block; width: 0; height: 1px; background: var(--primary-400); transition: width .3s; }
.footer-link:hover .dash { width: .75rem; }
.social-link { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: rgba(255,255,255,.1); color: #cbd5e1; transition: transform .2s, background .2s, color .2s; }
.social-link:hover { background: hsl(var(--primary)); color: #fff; transform: translateY(-2px); }
.social-link svg { width: 1.05rem; height: 1.05rem; }
.footer-contact svg { color: var(--primary-400); width: 1rem; height: 1rem; flex-shrink: 0; }
.footer-accr { border-top: 1px solid rgba(255,255,255,.1); }
.footer-accr svg { width: 1rem; height: 1rem; color: var(--primary-400); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.1); }
.footer-legal .footer-bottom { border-top: 0; }
.footer-legal a:hover { color: #cbd5e1; }

/* ── Méga-menus déroulants (desktop) ── */
.navdrop { position: relative; }
.navdrop-trigger { display: inline-flex; align-items: center; gap: .25rem; background: none; border: none; cursor: pointer; }
.navdrop-trigger svg { width: 1rem; height: 1rem; opacity: .5; transition: transform .3s, opacity .3s; }
.navdrop:hover .navdrop-trigger svg, .navdrop:focus-within .navdrop-trigger svg { transform: rotate(180deg); opacity: 1; }
.navdrop:hover .navdrop-trigger, .navdrop:focus-within .navdrop-trigger { color: hsl(var(--primary)); }
.navdrop:hover .navdrop-trigger::after, .navdrop:focus-within .navdrop-trigger::after { transform: scaleX(1); }
.navdrop-panel { position: absolute; left: 0; top: 100%; padding-top: .6rem; width: 23rem; max-width: calc(100vw - 2rem); z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.navdrop:hover .navdrop-panel, .navdrop:focus-within .navdrop-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.navdrop-inner { display: grid; gap: .15rem; padding: .5rem; background: hsl(var(--popover)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft-xl), 0 0 0 1px hsl(var(--border) / .5); }
.megaitem { position: relative; display: flex; gap: .75rem; padding: .75rem; border-radius: var(--radius); overflow: hidden; }
.megaitem:hover { background: hsl(var(--primary) / .06); }
.megaitem::before { content: ''; position: absolute; left: 0; top: 50%; height: 0; width: 3px; transform: translateY(-50%); border-radius: 9999px; background: linear-gradient(to bottom, hsl(var(--primary)), hsl(var(--accent))); transition: height .3s cubic-bezier(.16,1,.3,1); }
.megaitem:hover::before { height: 2.25rem; }
.megaicon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: var(--radius); background: hsl(var(--primary) / .1); color: hsl(var(--primary)); box-shadow: var(--shadow-soft-sm); transition: transform .3s, background .3s, color .3s; }
.megaitem:hover .megaicon { transform: scale(1.1); background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); color: #fff; box-shadow: 0 6px 18px -4px hsl(var(--primary) / .55); }
.megaicon svg { width: 1.15rem; height: 1.15rem; }
.megatext { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.megatitle { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: hsl(var(--foreground)); font-size: .92rem; }
.mega-arrow { width: .85rem; height: .85rem; color: hsl(var(--primary)); opacity: 0; transform: translateX(-4px); transition: all .3s; }
.megaitem:hover .mega-arrow { opacity: 1; transform: translateX(0); }
.megadesc { font-size: .78rem; line-height: 1.35; color: hsl(var(--muted-foreground)); }

/* ── Menu mobile : accordéon ── */
.m-link, .m-trigger { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem .8rem; border-radius: var(--radius); font-weight: 500; color: hsl(var(--foreground)); background: none; border: none; cursor: pointer; text-align: left; }
.m-trigger { justify-content: space-between; }
.m-link { justify-content: flex-start; }
.m-link svg, .m-trigger svg { width: 1.1rem; height: 1.1rem; }
.m-link:hover, .m-trigger:hover { background: hsl(var(--muted)); }
.m-link.active { background: hsl(var(--primary) / .08); color: hsl(var(--primary)); }
.m-chev { transition: transform .3s; opacity: .6; }
.m-group.open .m-chev { transform: rotate(180deg); }
.m-sub { display: none; flex-direction: column; gap: .1rem; margin: .25rem 0 .25rem 1.1rem; padding-left: .75rem; border-left: 2px solid hsl(var(--primary) / .25); }
.m-group.open .m-sub { display: flex; }
.m-subitem { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: var(--radius); font-size: .9rem; color: hsl(var(--muted-foreground)); }
.m-subitem:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.m-subitem svg { width: 1rem; height: 1rem; }

/* ── Chronologie (page Histoire) ── */
.timeline { position: relative; max-width: 56rem; margin-inline: auto; }
.timeline::before { content: ''; position: absolute; left: 1.3rem; top: 0; bottom: 0; width: 3px; border-radius: 9999px; background: linear-gradient(to bottom, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--primary))); }
.tl-row { position: relative; padding-left: 3.75rem; margin-bottom: 2rem; }
.tl-card-hl { border-color: hsl(var(--primary)); box-shadow: var(--shadow-soft-lg); }
.tl-dot { position: absolute; left: 0; top: .5rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 9999px; background: hsl(var(--background)); border: 2px solid hsl(var(--primary)); color: hsl(var(--primary)); box-shadow: var(--shadow-soft-md); z-index: 1; }
.tl-dot.hl { background: hsl(var(--primary)); color: #fff; }
.tl-dot svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 900px) {
  .timeline::before { left: 50%; transform: translateX(-50%); }
  .tl-row { padding-left: 0; display: flex; }
  .tl-card { width: calc(50% - 2.5rem); }
  .tl-left { justify-content: flex-start; }
  .tl-left .tl-card { text-align: right; }
  .tl-right { justify-content: flex-end; }
  .tl-left .tl-card .badge { flex-direction: row-reverse; }
  .tl-dot { left: 50%; transform: translateX(-50%); top: 1rem; }
}
.accr-logo svg { width: 2.5rem; height: 2.5rem; }

/* ── Page Contact ── */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 2fr; align-items: start; } }
.ci-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: var(--primary-100); color: var(--primary-600); flex-shrink: 0; }
.ci-ic svg { width: 1.25rem; height: 1.25rem; }
.dark .ci-ic { background: hsl(var(--primary) / .2); color: var(--primary-300); }
.quicklink { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: hsl(var(--muted-foreground)); transition: color .2s; }
.quicklink:hover { color: hsl(var(--primary)); }
.quicklink svg { width: 1rem; height: 1rem; }

/* ── Page Actualités ── */
.news-filters { padding-block: 2rem; border-bottom: 1px solid hsl(var(--border)); position: sticky; top: var(--header-height); background: hsl(var(--background) / .95); backdrop-filter: blur(8px); z-index: 40; }
.news-search { position: relative; width: 100%; max-width: 24rem; }
.news-search > svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); }
.news-search .input { padding-left: 2.5rem; }
.news-cats { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.news-chip { flex-shrink: 0; }
.news-feat-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .news-feat-grid { grid-template-columns: 1fr 1fr; } }
.news-card { border-radius: var(--radius-2xl); overflow: hidden; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .6); box-shadow: var(--shadow-soft-md); transition: box-shadow .3s, transform .3s; }
.news-card:hover { box-shadow: var(--shadow-soft-lg); transform: translateY(-3px); }
.news-card-ov { border: 0; box-shadow: var(--shadow-soft-lg); }
.news-media { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.news-card-ov .news-media { border-radius: var(--radius-2xl); }
.news-card-lg .news-media { aspect-ratio: 4 / 3; }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-card:hover .news-media img { transform: scale(1.05); }
.news-card-ov .news-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.2) 40%, transparent); z-index: 1; }
.news-cat { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
.news-overlay { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 2; color: #fff; }
.news-meta { display: flex; gap: 1rem; font-size: .8rem; margin-bottom: .5rem; }
.news-overlay .news-meta { color: rgba(255,255,255,.8); }
.news-meta-dark { color: hsl(var(--muted-foreground)); font-size: .75rem; margin-bottom: .75rem; }
.news-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.news-meta svg { width: .9rem; height: .9rem; }
.news-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.news-card-lg .news-title { font-size: clamp(1.5rem, 3vw, 1.875rem); }
.news-excerpt-ov { color: rgba(255,255,255,.85); margin-top: .5rem; font-size: .9rem; }
.news-body { padding: 1.25rem; }
.news-title-d { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.news-title-d a:hover { color: hsl(var(--primary)); }

/* ── Mot du Directeur Général (section marine premium) ── */
.dg-section { position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding-block: clamp(5rem, 9vw, 8rem);
  background:
    radial-gradient(135% 60% at 50% 4%, hsl(205 92% 17%), transparent 58%),
    linear-gradient(to bottom, hsl(215 82% 12%), hsl(214 80% 11%) 50%, hsl(216 84% 10%)); }
/* Vagues à fondu (séparation douce avec les sections voisines) */
.dg-wave { position: absolute; left: 0; right: 0; z-index: 1; line-height: 0; pointer-events: none; }
.dg-wave svg { display: block; width: 100%; height: clamp(70px, 9vw, 130px); }
.dg-wave-top { top: -1px; }
.dg-wave-bottom { bottom: -1px; }
/* Fond en carreaux (grille fixe, non animée) — comme la bannière, sans mouvement */
.dg-section::before {
  content: ''; position: absolute; inset: -60px 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, hsl(195 90% 70% / .11) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(195 90% 70% / .11) 1px, transparent 1px);
  background-size: 46px 46px;
  background-position: 0 var(--grid-y, 0px);
  -webkit-mask-image: radial-gradient(ellipse 120% 95% at 50% 32%, #000 45%, transparent 88%);
  mask-image: radial-gradient(ellipse 120% 95% at 50% 32%, #000 45%, transparent 88%);
  will-change: background-position;
}
/* Brume sombre moderne (fumée) — très lente, douce, non saturante */
.dg-section::after {
  content: ''; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 48% at 16% 24%, hsl(220 85% 2% / .55), transparent 70%),
    radial-gradient(44% 54% at 84% 74%, hsl(222 80% 2% / .5), transparent 72%),
    radial-gradient(30% 42% at 64% 10%, hsl(205 70% 6% / .38), transparent 70%),
    radial-gradient(34% 40% at 40% 88%, hsl(214 75% 3% / .42), transparent 72%);
  animation: smokeDrift 55s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes smokeDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .82; }
  50%  { transform: translate3d(2.5%, -1.6%, 0) scale(1.07); opacity: 1; }
  100% { transform: translate3d(-1.8%, 1.4%, 0) scale(1.04); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .dg-section::after { animation: none; } }
.dg-section .eyebrow.dg-eyebrow { background: hsl(0 0% 100% / .08); border-color: hsl(0 0% 100% / .22); color: #bfe3ff; }
.dg-section .wave-divider { z-index: 1; }
.dg-section .wave-top { top: -1px; bottom: auto; transform: scaleY(-1); }
.dg-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .dg-grid { grid-template-columns: 15rem 1fr; gap: 2.5rem; } }
@media (min-width: 1200px) { .dg-grid { grid-template-columns: 16.5rem 1fr; gap: 3rem; } }

.dg-portrait { position: relative; }
@media (min-width: 900px) { .dg-portrait { position: sticky; top: 6rem; } }
/* Effet flottant (va-et-vient doux + légère oscillation) */
@media (prefers-reduced-motion: no-preference) {
  .dg-portrait-float { animation: dgFloat 7.5s ease-in-out infinite; will-change: transform; }
}
@keyframes dgFloat {
  0%   { transform: translateY(0) rotate(-0.7deg); }
  50%  { transform: translateY(-15px) rotate(0.7deg); }
  100% { transform: translateY(0) rotate(-0.7deg); }
}
.dg-halo { position: absolute; inset: -2rem -1.5rem -3rem; border-radius: 9999px; opacity: .55; filter: blur(52px); z-index: 0; animation: glowPulse 6s ease-in-out infinite; }
.dg-frame { position: relative; z-index: 1; border-radius: var(--radius-2xl); overflow: hidden; padding: 4px;
  background: linear-gradient(150deg, hsl(var(--primary)), hsl(var(--accent)) 55%, #f7cf33); box-shadow: var(--shadow-soft-xl); }
.dg-frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius-2xl) - 3px);
  background: radial-gradient(circle at 50% 30%, hsl(205 60% 22%), hsl(216 80% 8%)); }
.dg-plate { position: relative; z-index: 2; margin: -2rem .85rem 0; display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem;
  border-radius: var(--radius); background: hsl(216 80% 10% / .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid hsl(0 0% 100% / .14); box-shadow: var(--shadow-soft-lg); }
.dg-anchor { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 9999px; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); color: #fff; }
.dg-anchor svg { width: 1.05rem; height: 1.05rem; }
.dg-name { font-family: var(--font-display); font-weight: 700; font-size: .85rem; line-height: 1.2; }
.dg-role { font-size: .72rem; color: rgba(255,255,255,.65); margin-top: .1rem; }

.dg-quote { position: relative; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius-2xl);
  background: hsl(0 0% 100% / .05); border: 1px solid hsl(0 0% 100% / .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-soft-lg); }
.dg-bigquote { position: absolute; right: 1.1rem; top: .55rem; color: hsl(var(--accent) / .2); pointer-events: none; }
.dg-bigquote svg { width: 2.75rem; height: 2.75rem; }
.dg-intro { position: relative; font-size: clamp(.96rem, 1.1vw, 1.05rem); line-height: 1.65; color: rgba(255,255,255,.92); font-style: italic; }
.dg-intro::before { content: '« '; color: hsl(var(--accent)); font-weight: 700; font-style: normal; }
.dg-axes { display: grid; gap: .7rem; margin: 1.35rem 0; }
@media (min-width: 1024px) { .dg-axes { grid-template-columns: 1fr 1fr; } }
.dg-axis { position: relative; display: flex; gap: .8rem; padding: .9rem 1rem .9rem 1.15rem; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--c) / .12), hsl(0 0% 100% / .02));
  border: 1px solid hsl(var(--c) / .22);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
.dg-axis::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(hsl(var(--c)), hsl(var(--c) / .25)); }
.dg-axis:hover { transform: translateY(-3px); border-color: hsl(var(--c) / .55); box-shadow: 0 12px 28px -14px hsl(var(--c) / .7); }
.dg-axis-ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: var(--radius);
  background: linear-gradient(135deg, hsl(var(--c)), hsl(var(--c) / .5)); color: #fff; box-shadow: 0 6px 16px -5px hsl(var(--c) / .85); }
.dg-axis-ic svg { width: 1.15rem; height: 1.15rem; }
.dg-axis-body { position: relative; min-width: 0; }
.dg-axis-num { position: absolute; right: 0; top: -.15rem; font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1; color: hsl(var(--c) / .38); letter-spacing: -.03em; }
.dg-axis-title { font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: #fff; line-height: 1.3; padding-right: 1.8rem; }
.dg-axis-desc { font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.74); margin-top: .25rem; }
.dg-closing { font-size: clamp(.92rem, 1.1vw, 1rem); line-height: 1.65; color: rgba(255,255,255,.92); }
.dg-closing::after { content: ' »'; color: hsl(var(--accent)); font-weight: 700; }
.dg-closing strong { color: #fff; font-weight: 700; }
.dg-sign { display: flex; align-items: center; gap: .75rem; margin-top: 1.35rem; padding-top: 1.15rem; border-top: 1px solid hsl(0 0% 100% / .12); }
.dg-sign .grad-icon { width: 2.3rem !important; height: 2.3rem !important; }
.dg-sign-name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.dg-sign-role { font-size: .78rem; color: rgba(255,255,255,.62); }

/* ── Effets 3D sur les textes (section Mot du DG) ── */
.dg-section h2 {
  text-shadow:
    0 1px 0 hsl(205 75% 58% / .35),
    0 2px 0 hsl(216 68% 22%),
    0 3px 0 hsl(216 68% 17%),
    0 4px 1px hsl(216 68% 13%),
    0 8px 18px rgba(0, 0, 0, .55);
}
.dg-section .dg-eyebrow { text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.dg-intro, .dg-closing { text-shadow: 0 2px 10px rgba(0, 8, 24, .55); }
.dg-intro::before { text-shadow: 0 2px 8px hsl(var(--accent) / .6); }
.dg-bigquote { text-shadow: 0 6px 18px hsl(var(--accent) / .35); }
/* Gros numéros 01–06 en relief 3D */
.dg-axis-num {
  text-shadow:
    0 1px 0 hsl(var(--c) / .55),
    0 2px 0 hsl(var(--c) / .32),
    0 3px 1px hsl(var(--c) / .2),
    0 5px 10px hsl(var(--c) / .4);
}
/* Profondeur 3D au survol des cartes d'axes : titre, icône et numéro avancent */
.dg-axes { perspective: 1000px; }
.dg-axis { transform-style: preserve-3d; }
.dg-axis-ic, .dg-axis-title, .dg-axis-num, .dg-axis-desc { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: no-preference) {
  .dg-axis:hover { transform: translateY(-4px) rotateX(4deg); }
  .dg-axis:hover .dg-axis-ic    { transform: translateZ(34px) translateY(-2px); }
  .dg-axis:hover .dg-axis-num   { transform: translateZ(42px); }
  .dg-axis:hover .dg-axis-title { transform: translateZ(20px); }
  .dg-axis:hover .dg-axis-desc  { transform: translateZ(10px); }
}
.dg-axis-ic { box-shadow: 0 6px 16px -5px hsl(var(--c) / .85), 0 2px 4px rgba(0,0,0,.4); }

/* ── Portraits du DG (pages À-propos & Équipe) ── */
.dg-photo-cover { overflow: hidden; background: linear-gradient(135deg, var(--primary-100), var(--accent-50)); }
.dark .dg-photo-cover { background: linear-gradient(135deg, hsl(var(--primary) / .22), hsl(var(--accent) / .14)); }
.dg-photo-panel { display: grid; place-items: center; padding: 1.85rem; background: linear-gradient(135deg, var(--primary-50), var(--accent-50)); }
.dark .dg-photo-panel { background: linear-gradient(135deg, hsl(var(--primary) / .16), hsl(var(--accent) / .12)); }
.dg-photo-round { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; object-position: center top; border: 4px solid hsl(var(--card)); box-shadow: var(--shadow-soft-lg), 0 0 0 5px hsl(var(--primary) / .12); background: #fff; }
.dg-photo-hero { position: relative; width: clamp(10rem, 22vw, 12.5rem); aspect-ratio: 1; display: grid; place-items: center; }
.dg-photo-hero img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center top; border: 5px solid hsl(var(--card)); box-shadow: var(--shadow-soft-xl); background: #fff; }
.dg-photo-glow { position: absolute; inset: -14%; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 180deg, hsl(var(--primary) / .55), hsl(var(--accent) / .55), #f7cf3399, hsl(var(--primary) / .55));
  filter: blur(22px); opacity: .5; animation: spin 16s linear infinite; }
@media (prefers-reduced-motion: reduce) { .dg-photo-glow { animation: none; } }

/* ════════════════════════════════════════════════════════════════════
   SYSTÈME D'ANIMATIONS GLOBAL — révélations variées au scroll + survol
   Appliqué automatiquement (app.js) à tous les blocs de toutes les pages.
   Flash-free : l'état masqué est posé par sélecteur sous .js (présent au 1er
   rendu). Hover préservé : l'animation est retirée (.anim-done) à la fin.
   ════════════════════════════════════════════════════════════════════ */
@keyframes revUp    { from { opacity: 0; transform: translate3d(0, 46px, 0); }            to { opacity: 1; transform: none; } }
@keyframes revLeft  { from { opacity: 0; transform: translate3d(-54px, 0, 0); }           to { opacity: 1; transform: none; } }
@keyframes revRight { from { opacity: 0; transform: translate3d(54px, 0, 0); }            to { opacity: 1; transform: none; } }
@keyframes revZoom  { from { opacity: 0; transform: scale(.86); }                         to { opacity: 1; transform: none; } }
@keyframes revRise  { from { opacity: 0; transform: translate3d(0, 64px, 0) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes revClip  { from { opacity: 0; clip-path: inset(0 0 100% 0 round 1rem); transform: translate3d(0, 14px, 0); } to { opacity: 1; clip-path: inset(0 0 0 0 round 1rem); transform: none; } }
@keyframes revPop   { 0% { opacity: 0; transform: translate3d(0, 30px, 0) scale(.92); } 60% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.01); } 100% { opacity: 1; transform: none; } }
/* — Effets d'apparition modernes & uniques — */
@keyframes revFlip    { from { opacity: 0; transform: perspective(1300px) rotateX(22deg) translateY(38px); } to { opacity: 1; transform: perspective(1300px) rotateX(0) translateY(0); } }
@keyframes revUnfold  { 0% { opacity: 0; transform: perspective(1400px) rotateX(-18deg) translateY(-12px); } 70% { opacity: 1; } 100% { opacity: 1; transform: perspective(1400px) rotateX(0) translateY(0); } }
@keyframes revSwoosh  { from { opacity: 0; transform: translateX(-52px) skewX(5deg); } to { opacity: 1; transform: none; } }
@keyframes revSwooshR { from { opacity: 0; transform: translateX(52px) skewX(-5deg); } to { opacity: 1; transform: none; } }
@keyframes spin     { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  /* État masqué avant révélation (hors blocs déjà gérés par .reveal) */
  .js main :is(.premium-card, .card, .media-card, .glass-card, .news-card, .dg-axis, .tl-row, .statchip, .pic, .about-media, figure, .feature-icon):not(.reveal):not(.in) { opacity: 0; }

  /* Révélation : animation fluide premium, base = montée douce */
  .js main :is(.premium-card, .card, .media-card, .glass-card, .news-card, .dg-axis, .tl-row, .statchip, .pic, .about-media, figure, .feature-icon).in {
    animation: revUp .85s cubic-bezier(.22, 1, .36, 1) both; backface-visibility: hidden;
  }
  /* Effets variés, modernes & uniques selon la position dans la grille */
  .js main .grid > *.in:nth-child(4n+1) { animation-name: revFlip;   animation-duration: .9s;  transform-origin: center bottom; }
  .js main .grid > *.in:nth-child(4n+2) { animation-name: revUnfold; animation-duration: .9s;  transform-origin: center top; }
  .js main .grid > *.in:nth-child(4n+3) { animation-name: revSwoosh; animation-duration: .8s; }
  .js main .grid > *.in:nth-child(4n+4) { animation-name: revPop;    animation-duration: .9s; }
  /* Photos / médias : zoom doux (GPU, sans coupure d'éléments en débordement) */
  .js main :is(.pic, .about-media, figure, .media-card, .news-card).in { animation-name: revZoom; animation-duration: .9s; }
  /* Petits éléments : pop */
  .js main :is(.statchip, .feature-icon).in { animation-name: revPop; }
  /* Axes du DG : dépliage 3D ; timeline : swoosh latéral selon le côté */
  .js main .dg-axis.in { animation-name: revFlip; transform-origin: center bottom; }
  .js main .tl-left.in  { animation-name: revSwoosh; }
  .js main .tl-right.in { animation-name: revSwooshR; }

  /* Une fois terminée, on coupe l'animation → le survol reste libre */
  .js main .anim-done { animation: none !important; }

  /* ── Micro-interactions au survol (premium, fluides) ── */
  .media-card img, .pic img, figure img, .news-media img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
  .media-card:hover img, figure:hover img, a.news-card:hover .news-media img { transform: scale(1.06); }
  .card { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .35s; }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-lg); }
  .statchip { transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s, background .3s; }
  .statchip:hover { transform: translateY(-2px); border-color: hsl(var(--primary) / .45); }
}

/* ── Page Formations ── */
.statchip { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid hsl(var(--border) / .6); background: hsl(var(--background) / .7); backdrop-filter: blur(8px); border-radius: 9999px; padding: .5rem 1rem; font-size: .88rem; }
.statchip svg { width: 1rem; height: 1rem; color: hsl(var(--primary)); }
.statchip strong { font-family: var(--font-display); }
.filiere-head { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid hsl(var(--border) / .6); background: hsl(var(--muted) / .3); }
.filiere-ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius); color: #fff; box-shadow: var(--shadow-soft-md); flex-shrink: 0; }
.filiere-ic svg { width: 1.5rem; height: 1.5rem; }
.filiere-list { display: flex; flex-direction: column; }
.filiere-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .85rem 1.25rem; border-bottom: 1px solid hsl(var(--border) / .5); transition: background .2s; }
.filiere-list li:last-child { border-bottom: 0; }
.filiere-list li:hover { background: hsl(var(--muted) / .4); }

/* ============================================================================
   HEADER (annonce + contact + nav glass) & FOOTER — port fidèle de l'original
   ============================================================================ */
.announce { background: linear-gradient(90deg, var(--primary-800), var(--primary-700) 50%, var(--accent-700)); color: #fff; font-size: 13px; }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; height: 2.5rem; text-align: center; }
.announce > .container { overflow: hidden; }
.announce svg { width: 1rem; height: 1rem; color: var(--gold-300); flex-shrink: 0; }
.announce-text { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce-pill { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; border-radius: 9999px; background: rgba(255,255,255,.15); padding: .12rem .65rem; font-size: .72rem; font-weight: 600; color: #fff; transition: background .2s; }
.announce-pill:hover { background: rgba(255,255,255,.25); }
.announce-pill svg { width: .85rem; height: .85rem; color: #fff; }

.contactbar { display: none; background: var(--primary-950); color: #cbd5e1; font-size: .75rem; }
@media (min-width: 768px) { .contactbar { display: block; } }
.contactbar-inner { display: flex; align-items: center; justify-content: space-between; height: 2.25rem; }
.contactbar a, .contactbar span { display: inline-flex; align-items: center; gap: .4rem; color: #cbd5e1; }
.contactbar a:hover { color: #fff; }
.contactbar svg { width: .85rem; height: .85rem; }
.hide-lg-inline { display: none; }
@media (min-width: 1024px) { .hide-lg-inline { display: inline-flex; } }

.navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--header-height); }
@media (min-width: 1024px) { .navbar-inner { height: 4.5rem; } }
.brand-text { display: none; line-height: 1.1; }
@media (min-width: 640px) { .brand-text { display: block; } }
.brand-name { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.brand-sub { display: block; font-size: .65rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: hsl(var(--muted-foreground)); }

.navlink { position: relative; padding: .5rem .8rem; border-radius: var(--radius); font-size: .9rem; font-weight: 500; color: hsl(var(--foreground)); }
.navlink::after { content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .15rem; height: 2px; border-radius: 9999px; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent))); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.navlink:hover { color: hsl(var(--primary)); }
.navlink:hover::after, .navlink.active::after { transform: scaleX(1); }
.navlink.active { color: hsl(var(--primary)); }

/* Logo en relief 3D */
.logo-3d-wrap { position: relative; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
.logo-3d-wrap::before { content: ''; position: absolute; inset: -22%; border-radius: 9999px; background: radial-gradient(circle at 50% 38%, hsl(var(--primary)/.45), hsl(var(--accent)/.18) 45%, transparent 72%); filter: blur(6px); opacity: .55; z-index: 0; }
.logo-3d { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 -.5px 0 hsl(0 0% 100%/.35)) drop-shadow(0 1.5px 1px hsl(210 60% 4%/.55)) drop-shadow(0 5px 9px hsl(210 60% 4%/.45)); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.brand:hover .logo-3d { transform: translateY(-1.5px) scale(1.05) rotate(-3deg); }

/* Footer riche */
.footer-top { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .footer-top { grid-template-columns: 4fr 5fr 3fr; gap: 3rem; } }
.footer-brand h4, .footer-cols h4, .footer-contact h4 { color: #fff; font-family: var(--font-display); font-weight: 600; margin-bottom: 1rem; font-size: .95rem; }
.footer-cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.footer-cols ul { display: grid; gap: .6rem; }
.footer-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: #94a3b8; }
.footer-link:hover { color: #fff; }
.footer-link .dash { height: 1px; width: 0; background: var(--primary-400); transition: width .3s; }
.footer-link:hover .dash { width: .75rem; }
.social-link { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: rgba(255,255,255,.1); color: #cbd5e1; transition: transform .2s, background .2s, color .2s; }
.social-link:hover { background: hsl(var(--primary)); color: #fff; transform: translateY(-2px); }
.social-link svg { width: 1rem; height: 1rem; }
.footer-accr { border-top: 1px solid rgba(255,255,255,.1); }
.footer-accr svg { width: 1rem; height: 1rem; color: var(--primary-400); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.1); }
.footer-legal a:hover { color: #cbd5e1 !important; }

/* ════════════════════════════════════════════════════════════════════
   EFFETS PREMIUM GLOBAUX — appliqués à TOUTES les pages
   Survols enrichis (lueurs colorées, profondeur), couleurs vivantes.
   Gated prefers-reduced-motion ; n'entrent pas en conflit avec le reveal
   (uniquement des transitions de survol + animations sur éléments hors-reveal).
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Cartes : survol = élévation + lueur colorée */
  .premium-card:hover { box-shadow: var(--shadow-soft-xl), 0 22px 50px -22px hsl(var(--primary) / .55); }
  .card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s; }
  .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft-lg), 0 16px 40px -20px hsl(var(--primary) / .42); border-color: hsl(var(--primary) / .32); }

  /* Icônes en dégradé : avancent + lueur quand on survole leur carte */
  .feature-icon, .grad-icon, .filiere-ic, .ci-ic { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s; }
  .premium-card:hover .feature-icon, .premium-card:hover .grad-icon, .premium-card:hover .filiere-ic,
  .card:hover .feature-icon, .card:hover .ci-ic {
    transform: translateY(-3px) scale(1.08); box-shadow: 0 12px 26px -8px hsl(var(--primary) / .6);
  }

  /* Boutons : survol = soulèvement + halo coloré */
  .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary), 0 0 30px -6px hsl(var(--primary) / .6); }
  .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px hsl(var(--accent) / .6); }
  .btn-outline:hover, .btn-white:hover, .btn-ghost:hover { transform: translateY(-2px); }

  /* Badges & puces : micro-réactions */
  .badge { transition: transform .25s, box-shadow .25s; }
  .premium-card:hover .badge, .card:hover .badge { transform: translateY(-1px); }

  /* Liens de navigation : reflet déjà géré ; on ajoute une transition douce */
  .quicklink, .footer-link, .social-link { transition: transform .3s, color .3s, background .3s; }
  .social-link:hover { transform: translateY(-3px) scale(1.05); }
}

/* ════════ Logo agrandi + anneau dégradé rotatif (barre de menu) ════════ */
.navbar { position: relative; }
.navbar .brand .logo-3d-wrap { width: 3.5rem; height: 3.5rem; }
.navbar .brand .brand-name { font-size: 1.32rem; }
.navbar .brand .logo-3d { z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .navbar .brand .logo-3d-wrap::after {
    content: ''; position: absolute; inset: -4px; border-radius: 9999px; z-index: 0; pointer-events: none;
    background: conic-gradient(from 0deg, hsl(var(--accent)), hsl(var(--primary)), #2ed3f0, #f7cf33, hsl(var(--accent)));
    -webkit-mask: radial-gradient(circle, transparent calc(100% - 6px), #000 calc(100% - 5px));
    mask: radial-gradient(circle, transparent calc(100% - 6px), #000 calc(100% - 5px));
    animation: spin 7s linear infinite; opacity: .9;
  }
}

/* ════════ Vague moderne + fondu sur la ligne du bas du menu ════════ */
.navbar { border-bottom-color: hsl(var(--border) / .3); }
.nav-wave {
  position: absolute; left: 0; right: 0; bottom: -5px; height: 11px; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='11' viewBox='0 0 240 11'%3E%3Cpath d='M0 6 Q 60 1 120 6 T 240 6' fill='none' stroke='%2326c6da' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 240px 11px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  filter: drop-shadow(0 0 5px hsl(var(--accent) / .55));
  opacity: .85;
}
@media (prefers-reduced-motion: no-preference) { .nav-wave { animation: navWaveSlide 7s linear infinite; } }
@keyframes navWaveSlide { to { background-position: 240px 0; } }

/* ════════ Optimisation : pause des animations CONTINUES hors écran (perf) ════════
   Seules les animations décoratives infinies sont mises en pause — PAS les
   révélations one-shot (qui doivent se terminer même en défilement rapide). */
@media (prefers-reduced-motion: no-preference) {
  .sec-off::before, .sec-off::after,
  .sec-off .aurora-blob, .sec-off .fx-grid, .sec-off .fx-caustic, .sec-off .fx-scanline,
  .sec-off .fx-sonar span, .sec-off .fx-bubbles span, .sec-off .float-animation,
  .sec-off .text-gradient-hero, .sec-off .dg-portrait-float, .sec-off .dg-halo,
  .sec-off .pic img, .sec-off .dg-axis-ic {
    animation-play-state: paused !important;
  }
}