:root {
  --bg: #F7F4EF;
  --card: #FFFDFA;
  --text: #12284C;
  --accent: #F2604C;
  --muted: #5B6B82;
  --border: #E4E0D8;
  --green-soft: #DCF0E3;
  --grey-soft: #E8EBF0;
  --map-fill: #C9D4E4;
  --accent-soft: #FDE3DF;

  --radius-card: 16px;
  --radius-button: 12px;
  --shadow: 0 1px 2px rgba(18, 40, 76, 0.04), 0 4px 14px rgba(18, 40, 76, 0.05);
  --content-width: 430px;
  --tabbar-height: 68px;
  --bottom-nav-h: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  --peek-h: 64px;
  --navbar-h: 56px;
  --gap: 16px;
  --nav-height: 88px;
  --navy: #12284C;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* Coquille : colonne mobile centrée ------------------------------------ */

.app {
  width: 100%;
  max-width: var(--content-width);
  flex: 1 0 auto;
  margin: 0 auto;
  background: var(--bg);
  /* Mobile : la barre du haut est fixe et translucide, le contenu démarre dessous. */
  padding-top: var(--navbar-h);
  /* La place de la barre d'onglets fixe est réservée en bas du pied de page, pas ici. */
}

.brandbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1150;
  width: 100%;
  max-width: var(--content-width);
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 var(--gap);
}
/* Fond translucide sur un pseudo-élément : un backdrop-filter sur .brandbar piégerait le panneau .menu (position: fixed). */
.brandbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(247, 244, 238, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.brandbar__name { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 18px; font-weight: 800; letter-spacing: -0.035em; color: var(--navy); white-space: nowrap; }
.brandbar__actions { display: flex; align-items: center; gap: 4px; }
.brandbar__burger { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: none; color: var(--navy); cursor: pointer; }
.brandbar__burger svg { stroke-width: 2.2; }

/* Menu : panneau qui glisse depuis la droite (pleine largeur sur mobile, 480 px max au-delà), fond assombri. */
.menu { position: fixed; inset: 0; z-index: 1300; display: flex; justify-content: flex-end; background: rgba(11, 26, 53, 0); transition: background-color 280ms ease; }
.menu.is-open { background: rgba(11, 26, 53, 0.6); }
.menu__sheet {
  display: flex; flex-direction: column; width: 100%; max-width: 480px; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--gap) calc(24px + env(safe-area-inset-bottom)); background: var(--navy); color: #fff;
  transform: translateX(100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.menu.is-open .menu__sheet { transform: none; }
@media (prefers-reduced-motion: reduce) { .menu, .menu__sheet { transition: none; } }

.menu__head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.menu__brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: #fff; text-decoration: none; }
.menu__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }

.menu__links { display: flex; flex-direction: column; margin: 20px 0 auto; }
.menu__link { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; text-decoration: none; color: #fff; }
.menu__link:first-child { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.menu__link svg { flex: none; }
.menu__link.is-active { color: var(--accent); }

.menu__foot { display: grid; gap: 20px; margin-top: 28px; }
.menu__support { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 18px; border-radius: var(--radius-button); background: var(--accent); color: var(--navy); font-weight: 800; text-align: center; text-decoration: none; }
.menu__socials { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.menu__social { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: #fff; }
.menu__slogan { font-size: 14px; color: #B7C4DA; }

.screen { padding: 0 var(--gap) var(--gap); }

.screen__title { font-size: 30px; letter-spacing: -0.02em; margin: 18px 0 14px; }

/* Barre de navigation fixe ---------------------------------------------- */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--content-width);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(247, 244, 238, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(18, 40, 76, 0.1);
  min-height: var(--tabbar-height);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 1000;
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--tabbar-height);
  min-width: 0;
  padding: 0;
  text-align: center;
  text-decoration: none;
  font-size: 10.5px;
  line-height: 1.1;
  color: var(--text);
}

.tabbar__item.is-active { color: #C8341F; }

/* Éléments communs ------------------------------------------------------ */

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: var(--gap);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-button);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button--block { display: flex; width: 100%; }
.button--outline { background: transparent; color: var(--accent); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.55; cursor: default; }

.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--grey-soft);
  font-size: 14px;
}

.tag--green { background: var(--green-soft); }
.tag--accent { background: var(--accent-soft); color: #B8321F; }

.link { color: #1F4FB8; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Bandes : sur mobile, simple regroupement ; sur bureau, pleine largeur avec conteneur centré. */
.band__title { font-size: 22px; }
.screen:has(.prose) { padding-top: 12px; }
.pagehead__lead { display: none; }
.topnav { display: none; }

/* Version bureau : barre horizontale fixe, puis bandes pleine largeur ------- */

@media (min-width: 900px) {
  :root { --gap: 32px; }
  body { font-size: 17px; padding-top: var(--nav-height); }

  .app { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .brandbar, .tabbar, .menu { display: none; }
  .screen { flex: 1; padding: 0; }

  .band { padding: 72px 40px; }
  .band__inner { max-width: 1200px; margin: 0 auto; }
  .band--alt { background: #EDE7DB; }
  .band__title { font-size: 30px; letter-spacing: -0.02em; margin-bottom: 20px; }

  .pagehead {
    display: flex;
    align-items: center;
    height: 220px;
    padding: 0 40px;
    background: radial-gradient(ellipse 45% 120% at 85% 40%, #1C3C72 0%, rgba(18, 40, 76, 0) 80%), var(--navy);
    color: #fff;
  }
  .pagehead .band__inner { width: 100%; }
  .pagehead .screen__title { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
  .pagehead__lead { display: block; margin-top: 12px; max-width: 46em; font-size: 19px; color: #C9D4E4; }

  .topnav {
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-height);
    background: var(--bg);
    z-index: 1100;
    transition: box-shadow 0.2s ease;
  }
  .topnav.is-scrolled { box-shadow: 0 2px 18px rgba(18, 40, 76, 0.12); }
  .topnav__inner {
    height: 100%;
    padding: 0 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
  .topnav__brand { font-size: 40px; font-weight: 800; letter-spacing: -0.035em; text-decoration: none; white-space: nowrap; color: var(--navy); }
  .topnav__links { display: flex; gap: clamp(20px, 3vw, 44px); }
  .topnav__link {
    position: relative;
    padding: 34px 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
  }
  .topnav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 24px;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.18s ease-out;
  }
  .topnav__link:hover { color: var(--navy); }
  .topnav__link.is-active { color: var(--navy); }
  .topnav__link:hover::after, .topnav__link.is-active::after { transform: scaleX(1); }
  .topnav__link:not(.is-active):hover::after { background: var(--border); }
  .topnav__cta { justify-self: end; min-height: 52px; padding: 0 30px; border-radius: 8px; font-size: 17px; font-weight: 600; white-space: nowrap; }

  .card { padding: 20px; }
  .button { font-size: 17px; }
  .tag { font-size: 15px; }
}