/* =============================================================
   Design System — Commune de Monceaux-en-Bessin v2.0
   Redesign 2026 — Mobile-first, moderne, accessible RGAA
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ─── Couleurs ────────────────────────────────────────────── */
:root {
  --navy-950: #05111f;
  --navy-900: #091e39;
  --navy-800: #0e2d55;
  --navy-700: #133c71;
  --navy-600: #184b8d;
  --navy-500: #1e5aaa;
  --navy-400: #3c74c8;
  --navy-300: #6e9fd8;
  --navy-200: #a9caea;
  --navy-100: #d8eaf9;
  --navy-50:  #eef6fc;

  --gold-700: #7a4e00;
  --gold-600: #a36800;
  --gold-500: #c98200;
  --gold-400: #df9e18;
  --gold-300: #efbb45;
  --gold-200: #f8d880;
  --gold-100: #fef0c2;

  --gray-950: #09090b;
  --gray-900: #18181b;
  --gray-800: #27272a;
  --gray-700: #3f3f46;
  --gray-600: #52525b;
  --gray-500: #71717a;
  --gray-400: #a1a1aa;
  --gray-300: #d4d4d8;
  --gray-200: #e4e4e7;
  --gray-100: #f4f4f5;
  --gray-50:  #fafafa;

  /* Sémantique */
  --bg:           #f0f4fa;
  --surface:      #ffffff;
  --text:         #09090b;
  --text-muted:   #52525b;
  --text-subtle:  #a1a1aa;
  --text-invert:  #ffffff;

  --primary:       var(--navy-700);
  --primary-dark:  var(--navy-900);
  --primary-hover: var(--navy-800);
  --primary-light: var(--navy-50);

  --accent:       var(--gold-500);
  --accent-dark:  var(--gold-700);
  --accent-light: var(--gold-100);

  --success: #16a34a;
  --warning: #d97706;
  --error:   #dc2626;

  --border:       var(--gray-200);
  --border-focus: var(--navy-500);

  /* Dégradés */
  --gradient-hero:
    radial-gradient(ellipse 75% 55% at 80% 40%, rgba(60,116,200,.28) 0%, transparent 65%),
    linear-gradient(158deg, #05111f 0%, #0e2d55 42%, #184b8d 100%);
  --gradient-primary:  linear-gradient(135deg, var(--navy-900), var(--navy-600));
  --gradient-gold:     linear-gradient(135deg, var(--gold-600), var(--gold-400));
  --gradient-citykomi: linear-gradient(140deg, #0e2d55 0%, #1e5aaa 60%, #3c74c8 100%);
  --gradient-card-img: linear-gradient(180deg, transparent 45%, rgba(5,17,31,.82) 100%);
}

/* ─── Typographie ─────────────────────────────────────────── */
:root {
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  --text-xs:   .75rem;  --text-sm:  .875rem; --text-base: 1rem;
  --text-lg:  1.125rem; --text-xl:  1.25rem; --text-2xl:  1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl:  3rem;
  --text-6xl: 3.75rem;  --text-7xl: 4.5rem;

  --w-normal:400; --w-medium:500; --w-semibold:600; --w-bold:700; --w-extrabold:800;

  --lh-none:1; --lh-tight:1.2; --lh-snug:1.35; --lh-normal:1.55; --lh-relaxed:1.7;
  --ls-tight:-.03em; --ls-normal:0; --ls-wide:.04em;
}

/* ─── Espacement ──────────────────────────────────────────── */
:root {
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;  --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem;   --s-10:2.5rem;--s-12:3rem; --s-16:4rem;
  --s-20:5rem;  --s-24:6rem;  --s-32:8rem;
}

/* ─── Radius & ombres ─────────────────────────────────────── */
:root {
  --r-xs:4px; --r-sm:8px; --r:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-full:9999px;

  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 2px 6px rgba(0,0,0,.07);
  --shadow:     0 4px 14px rgba(0,0,0,.09);
  --shadow-md:  0 8px 24px rgba(0,0,0,.10);
  --shadow-lg:  0 16px 40px rgba(0,0,0,.12);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.15);
  --shadow-card:      0 2px 10px rgba(9,30,57,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-card-hover:0 10px 36px rgba(9,30,57,.14), 0 2px 8px rgba(0,0,0,.06);
  --shadow-header:    0 1px 0 rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);
  --shadow-btn:       0 2px 8px rgba(19,60,113,.25);
  --shadow-btn-hover: 0 6px 20px rgba(19,60,113,.35);

  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --t-fast:150ms var(--ease); --t:250ms var(--ease); --t-slow:400ms var(--ease);
  --t-spring:360ms var(--ease-spring);
}

/* ─── Layout ──────────────────────────────────────────────── */
:root {
  --max-w:1200px; --max-w-wide:1360px; --max-w-narrow:720px;
  --pad:1.125rem; --header-h:64px;
  --z-raised:10; --z-dropdown:100; --z-sticky:200; --z-overlay:300; --z-modal:400; --z-toast:500;
}
@media (min-width:640px)  { :root { --pad:1.5rem; } }
@media (min-width:1024px) { :root { --pad:2.5rem; --header-h:72px; } }

/* ─── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width:100%; height:auto; display:block; }

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
a:hover { color: var(--primary-hover); }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  color: var(--text);
  margin: 0 0 var(--s-4);
  letter-spacing: var(--ls-tight);
}
p  { margin: 0 0 var(--s-4); }
ul,ol { margin:0; padding:0; list-style:none; }
button { cursor:pointer; font-family:inherit; }
input,textarea,select { font-family:inherit; }

/* ─── Accessibilité ───────────────────────────────────────── */
.skip-link {
  position:absolute; top:-100%; left:var(--s-4);
  z-index:var(--z-toast);
  padding:var(--s-2) var(--s-6);
  background:var(--primary); color:#fff;
  border-radius:var(--r);
  font-weight:var(--w-semibold);
  text-decoration:none;
  transition:top var(--t-fast);
  white-space:nowrap;
}
.skip-link:focus { top:var(--s-3); }

:focus-visible {
  outline:2.5px solid var(--border-focus);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* ─── Bandeau alerte ──────────────────────────────────────── */
.site-alert {
  background:var(--error); color:#fff;
  padding:var(--s-3) var(--pad);
  text-align:center;
  font-size:var(--text-sm); font-weight:var(--w-medium);
  z-index:var(--z-sticky); line-height:var(--lh-snug);
}
.site-alert a { color:#fff; font-weight:var(--w-bold); text-decoration:underline; }

/* ─── Bandeau CityKomi ────────────────────────────────────── */
.citykomi-banner {
  display:flex; align-items:center; justify-content:center;
  gap:var(--s-2);
  padding:var(--s-2) calc(var(--pad) + 2rem);
  background:linear-gradient(90deg,#125e2a,#1f9040);
  color:#fff;
  font-size:var(--text-sm); font-weight:var(--w-medium);
  position:relative; text-align:center; line-height:var(--lh-snug);
}
.citykomi-banner a { color:#fff; font-weight:var(--w-bold); text-decoration:underline; }
.citykomi-banner__close {
  position:absolute; right:var(--s-3); top:50%; transform:translateY(-50%);
  background:none; border:none; color:rgba(255,255,255,.8);
  font-size:1.25rem; line-height:1;
  padding:var(--s-1) var(--s-2); border-radius:var(--r-sm);
  transition:all var(--t-fast);
}
.citykomi-banner__close:hover { color:#fff; background:rgba(255,255,255,.15); }

/* ─── Animations ──────────────────────────────────────────── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }

.anim-fade-up  { animation:fadeUp  .65s var(--ease-out) both; }
.anim-fade-in  { animation:fadeIn  .5s  var(--ease-out) both; }
.anim-scale-in { animation:scaleIn .4s  var(--ease-spring) both; }
.anim-delay-1  { animation-delay:.1s; }
.anim-delay-2  { animation-delay:.2s; }
.anim-delay-3  { animation-delay:.3s; }
.anim-delay-4  { animation-delay:.4s; }