/* ============================================================================
   Esika Healthcare — Système de design « Soin & Clarté »
   ----------------------------------------------------------------------------
   Ossature utilitaire (la recherche au centre, information dense et lisible)
   et traitement chaleureux (formes douces, aplats pastel, typographie ample)
   autour du bleu de marque #16169B.

   Ce fichier remplace style.css sur les pages refondues : les deux ne sont
   jamais chargés ensemble, ils définissent les mêmes sélecteurs (.btn,
   .container…) avec des valeurs différentes.
   ========================================================================= */

:root {
  /* -- Marque -- */
  --navy-900: #0B0B52;
  --navy-800: #0E0E6E;
  --navy-700: #12127F;
  --navy:     #16169B;
  --navy-600: #2A2AB8;
  --navy-500: #4747CC;
  --navy-300: #9A9AE8;
  --navy-100: #DFDFFA;
  --navy-50:  #EEEFFF;

  --accent:     #C41212;
  --accent-600: #A50E0E;
  --accent-50:  #FEF2F2;

  /* -- Pastels de section : la chaleur, sans trahir le logo -- */
  --lavender: #EEF0FF;
  --sand:     #FDF6EC;
  --mint:     #ECFDF5;
  --sky-tint: #F0F9FF;

  /* -- Accents fonctionnels -- */
  --teal:    #0D9488;
  --amber:   #F59E0B;
  --success: #10B981;
  --info:    #0EA5E9;

  /* -- Neutres -- */
  --ink:        #111827;
  --ink-soft:   #374151;
  --muted:      #6B7280;
  --muted-soft: #9CA3AF;
  --line:       #E7E9F2;
  --line-soft:  #F1F3F9;
  --surface:    #FFFFFF;
  --canvas:     #FBFCFE;

  /* -- Rayons : généreux, c'est ce qui porte la douceur -- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* -- Ombres : diffuses et colorées, jamais grises -- */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, .05);
  --shadow-sm: 0 2px 8px rgba(22, 22, 155, .06);
  --shadow-md: 0 8px 24px rgba(22, 22, 155, .08);
  --shadow-lg: 0 18px 48px rgba(22, 22, 155, .12);
  --shadow-xl: 0 32px 80px rgba(22, 22, 155, .16);

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --header-h: 84px;
}

/* ============================================================
   BASE
   ============================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Les halos décoratifs du hero débordent volontairement de leur section ;
   « clip » les empêche de créer une barre de défilement horizontale sans
   créer de conteneur de défilement (ce que ferait « hidden »). */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 .5em;
  font-weight: 800;
}

p { margin: 0 0 1rem; }
a { color: var(--navy); text-decoration: none; }
img, svg { max-width: 100%; display: block; }

::selection { background: var(--navy-100); color: var(--navy-800); }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 20px;
}
.container-narrow { max-width: 820px; }

/* ============================================================
   TYPOGRAPHIE D'AFFICHAGE
   ============================================================ */

.display-1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); font-weight: 800; }
.display-2 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; }
.display-3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; }

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  color: var(--muted);
  line-height: 1.6;
}

.text-gradient {
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-500) 45%, var(--info) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  padding: .45rem 1rem;
  border-radius: var(--r-pill);
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-weight: 650;
  font-size: .94rem;
  line-height: 1;
  padding: .85rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background-color .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 3px solid var(--navy-300); outline-offset: 2px; }

.btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--navy-600); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(196, 18, 18, .22); }
.btn-accent:hover { background: var(--accent-600); transform: translateY(-2px); }

.btn-outline { background: #fff; color: var(--navy); border-color: var(--navy-100); }
.btn-outline:hover { border-color: var(--navy); background: var(--navy-50); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--line-soft); color: var(--navy); }

.btn-white { background: #fff; color: var(--navy); box-shadow: var(--shadow-md); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn-sm { padding: .6rem 1.1rem; font-size: .84rem; }
.btn-block { width: 100%; }

/* ============================================================
   SECTIONS & FONDS
   ============================================================ */

.section { padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; }
.section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }

.bg-lavender { background: var(--lavender); }
.bg-sand     { background: var(--sand); }
.bg-mint     { background: var(--mint); }
.bg-sky      { background: var(--sky-tint); }
.bg-canvas   { background: var(--canvas); }
.bg-navy     { background: var(--navy); color: #fff; }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy .lead { color: rgba(255,255,255,.78); }

/* Transition douce entre deux aplats : évite la cassure nette. */
.section-curve { position: relative; }
.section-curve::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 64px;
  background: inherit;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: scaleX(1.5);
}

.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(2.2rem, 4vw, 3.4rem); }
.section-head .lead { margin-top: .9rem; }

/* ============================================================
   CARTES
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  transition: transform .28s cubic-bezier(.34,1.3,.64,1), box-shadow .28s ease, border-color .28s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--navy-100); }

.card-soft { border: none; box-shadow: var(--shadow-sm); }
.card-flat:hover { transform: none; box-shadow: var(--shadow-sm); }

.card-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--navy-50);
  color: var(--navy);
  margin-bottom: 1.1rem;
}
.card-icon svg { width: 25px; height: 25px; }
.card-icon.is-mint  { background: var(--mint);     color: var(--teal); }
.card-icon.is-sand  { background: var(--sand);     color: #B45309; }
.card-icon.is-sky   { background: var(--sky-tint); color: var(--info); }
.card-icon.is-blush { background: var(--accent-50);color: var(--accent); }

.card h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.card p  { color: var(--muted); font-size: .93rem; margin: 0; }

.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* Grille imbriquée dans une colonne de .split : la place disponible y est
   deux fois moindre, un minimum de 300px la ferait retomber sur une colonne. */
.grid-compact { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 1rem; }

/* ============================================================
   BANDEAU DE CHIFFRES
   ============================================================ */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem 1rem;
}
.stat { text-align: center; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.03em;
}
.bg-navy .stat-value { color: #fff; }
.stat-label { font-size: .88rem; color: var(--muted); margin-top: .5rem; }
.bg-navy .stat-label { color: rgba(255,255,255,.72); }

/* ============================================================
   RECHERCHE — le héros de la page d'accueil
   ============================================================ */

.searchbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border-radius: var(--r-pill);
  padding: .5rem .5rem .5rem 1.35rem;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,.6);
}
.searchbar:focus-within { box-shadow: var(--shadow-xl), 0 0 0 4px var(--navy-100); }

.searchbar-icon { color: var(--navy); flex-shrink: 0; }
.searchbar input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  padding: .85rem 0;
}
.searchbar input::placeholder { color: var(--muted-soft); }
.searchbar-divider { width: 1px; height: 28px; background: var(--line); flex-shrink: 0; }

.searchbar-geo {
  display: inline-flex; align-items: center; gap: .4rem;
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: .86rem; font-family: var(--font-body);
  padding: .5rem .75rem; border-radius: var(--r-pill);
  white-space: nowrap;
}
.searchbar-geo:hover { background: var(--navy-50); color: var(--navy); }

@media (max-width: 640px) {
  .searchbar { flex-wrap: wrap; border-radius: var(--r-xl); padding: 1rem; gap: .75rem; }
  .searchbar input { padding: .35rem 0; }
  .searchbar-divider { display: none; }
  .searchbar .btn { width: 100%; }
}

.search-suggestions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center; margin-top: 1.25rem;
}
.search-chip {
  font-size: .82rem; padding: .45rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  color: rgba(255,255,255,.92);
  transition: background .2s ease, transform .2s ease;
}
.search-chip:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5.5rem));
  padding-bottom: clamp(5rem, 11vw, 9rem);
  background:
    radial-gradient(120% 90% at 12% -5%, var(--navy-600) 0%, transparent 55%),
    radial-gradient(90% 80% at 92% 8%, #3B3BD6 0%, transparent 52%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy) 46%, var(--navy-700) 100%);
  color: #fff;
}
.hero h1 { color: #fff; }
.hero-content { position: relative; z-index: 2; text-align: center; max-width: 860px; margin: 0 auto; }
.hero-sub { color: rgba(255,255,255,.8); font-size: clamp(1rem, 1.8vw, 1.22rem); margin: 1.1rem auto 2.2rem; max-width: 620px; }

.hero-eyebrow {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}

/* Voile organique : donne la rondeur « Alan » sur un fond profond. */
.hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.hero-blob-1 { width: 460px; height: 460px; background: #4F46E5; top: -140px; left: -120px; }
.hero-blob-2 { width: 380px; height: 380px; background: #06B6D4; bottom: -150px; right: -90px; opacity: .35; }
.hero-blob-3 { width: 300px; height: 300px; background: #8B5CF6; top: 32%; right: 22%; opacity: .25; }

.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; }
.hero-wave svg { width: 100%; height: auto; }

/* ============================================================
   ILLUSTRATIONS & VISUELS
   ============================================================ */

.illus { position: relative; }
.illus svg { width: 100%; height: auto; overflow: visible; }

.media-frame {
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--lavender);
  position: relative;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  border-radius: inherit;
  pointer-events: none;
}

/* Tache organique derrière un visuel, à la Doctolib. */
.blob-backdrop { position: relative; }
.blob-backdrop::before {
  content: '';
  position: absolute;
  inset: -9% -7% -12% -9%;
  background: var(--navy-100);
  border-radius: 58% 42% 48% 52% / 46% 54% 46% 54%;
  z-index: 0;
  animation: blob-morph 16s ease-in-out infinite;
}
.blob-backdrop > * { position: relative; z-index: 1; }

@keyframes blob-morph {
  0%, 100% { border-radius: 58% 42% 48% 52% / 46% 54% 46% 54%; }
  33%      { border-radius: 44% 56% 62% 38% / 56% 44% 56% 44%; }
  66%      { border-radius: 52% 48% 38% 62% / 42% 62% 38% 58%; }
}

/* ============================================================
   LISTES & DIVERS
   ============================================================ */

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .96rem; }
.check-list .check {
  flex-shrink: 0; width: 23px; height: 23px; border-radius: 50%;
  background: var(--mint); color: var(--teal);
  display: grid; place-items: center; margin-top: 1px;
}
.check-list .check svg { width: 13px; height: 13px; }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 650;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--navy-50); color: var(--navy);
}
.badge-mint { background: var(--mint); color: var(--teal); }
.badge-sand { background: var(--sand); color: #B45309; }

.quote-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  position: relative;
}
.quote-card p { font-size: 1.02rem; color: var(--ink-soft); font-style: italic; }
.quote-author { display: flex; align-items: center; gap: .85rem; margin-top: 1.25rem; }
.quote-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy-100); color: var(--navy);
  display: grid; place-items: center; font-weight: 700; flex-shrink: 0;
}

/* ============================================================
   FORMULAIRES
   ============================================================ */

.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-size: .87rem; font-weight: 650;
  color: var(--ink); margin-bottom: .45rem;
}
.field .req { color: var(--accent); }

.input, .select, .textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: .82rem 1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px var(--navy-50);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-soft); }
.textarea { resize: vertical; min-height: 120px; }
.field-hint { font-size: .8rem; color: var(--muted); margin-top: .4rem; }

.alert {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1.1rem; border-radius: var(--r-md);
  font-size: .89rem; margin-bottom: 1.1rem;
}
.alert svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.alert-success { background: var(--mint);      color: #065F46; }
.alert-error   { background: var(--accent-50); color: #991B1B; }
.alert-info    { background: var(--sky-tint);  color: #075985; }
.alert-warning { background: var(--sand);      color: #92400E; }

/* ============================================================
   ANIMATIONS
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .09s; }
.reveal-delay-2 { transition-delay: .18s; }
.reveal-delay-3 { transition-delay: .27s; }
.reveal-delay-4 { transition-delay: .36s; }

@keyframes float-soft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-13px) rotate(1.4deg); }
}
.float      { animation: float-soft 7s ease-in-out infinite; }
.float-slow { animation: float-soft 10s ease-in-out infinite; }
.float-lag  { animation-delay: -3.5s; }

@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .45; }
}
.pulse-dot { animation: pulse-dot 2.6s ease-in-out infinite; transform-origin: center; }

/* Respecte le réglage système : aucune animation imposée. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   EN-TÊTE DE NAVIGATION
   ============================================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 60;
  display: flex;
  align-items: center;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header .container { display: flex; align-items: center; gap: 1.5rem; }

.site-header.is-solid {
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}

.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }

/* Le logo bascule en version sombre quand l'en-tête devient opaque. */
.is-solid .brand-logo-light { display: none; }
.is-solid .brand-logo-dark  { display: block !important; }

.nav-sep { width: 1px; height: 22px; background: rgba(255,255,255,.22); margin: 0 .4rem; }
.is-solid .nav-sep { background: var(--line); }

.nav-cta { margin-left: .35rem; }

.nav-links { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav-link {
  font-size: .9rem; font-weight: 550;
  color: rgba(255,255,255,.85);
  padding: .55rem .8rem; border-radius: var(--r-pill);
  white-space: nowrap; /* « Trouver un établissement » passait sur deux lignes */
  transition: background-color .2s ease, color .2s ease;
}
.nav-link:hover { background: rgba(255,255,255,.14); color: #fff; }
.nav-link.is-active { color: #fff; background: rgba(255,255,255,.18); }

.is-solid .nav-link { color: var(--ink-soft); }
.is-solid .nav-link:hover { background: var(--navy-50); color: var(--navy); }
.is-solid .nav-link.is-active { color: var(--navy); background: var(--navy-50); }

.nav-toggle {
  display: none; background: transparent; border: none; cursor: pointer;
  color: #fff; padding: .5rem; margin-left: auto; border-radius: var(--r-sm);
}
.is-solid .nav-toggle { color: var(--ink); }

@media (max-width: 1080px) {
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .25rem;
    background: #fff; padding: 1rem 1.25rem 1.5rem;
    box-shadow: var(--shadow-lg);

    /* Le panneau part de top:76px. Un translateY(-120%) de sa *propre
       hauteur* ne suffit donc pas à le sortir de l'écran : pour un menu
       de moins de ~365px, son bord bas réapparaissait tout en haut sous
       la forme d'une bande blanche — qui interceptait aussi les touchers.
       On retranche explicitement la hauteur de l'en-tête. */
    transform: translateY(calc(-100% - var(--header-h)));
    visibility: hidden;
    transition: transform .34s cubic-bezier(.22,1,.36,1), visibility .34s;
    margin-left: 0;
  }
  .nav-links.is-open { transform: none; visibility: visible; }
  .nav-link { color: var(--ink-soft); padding: .8rem 1rem; }
  .nav-link:hover, .nav-link.is-active { background: var(--navy-50); color: var(--navy); }
  .nav-toggle { display: inline-flex; }
  .nav-sep { width: 100%; height: 1px; background: var(--line); margin: .5rem 0; }
  .nav-cta { margin-left: 0; margin-top: .4rem; justify-content: center; }
  .btn-white.nav-cta { background: var(--navy); color: #fff; }
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */

.site-footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.site-footer h4 { color: #fff; font-size: .92rem; margin-bottom: 1rem; letter-spacing: .01em; }
.site-footer a { color: rgba(255,255,255,.7); font-size: .9rem; transition: color .18s ease; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr)); gap: 2.5rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; font-size: .84rem;
}

/* ============================================================
   UTILITAIRES
   ============================================================ */

.text-center { text-align: center; }
.flex        { display: flex; }
.items-center{ align-items: center; }
.justify-center { justify-content: center; }
.gap-sm { gap: .6rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.75rem; }
.flex-wrap { flex-wrap: wrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: 2rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* ============================================================
   AUTHENTIFICATION
   ============================================================ */

.auth-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 100vh;
}

/* Colonne vitrine : argumentaire, visible seulement sur grand écran. */
.auth-aside {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background:
    radial-gradient(110% 80% at 10% 0%, var(--navy-600) 0%, transparent 55%),
    linear-gradient(165deg, var(--navy-800) 0%, var(--navy) 55%, var(--navy-700) 100%);
}
.auth-aside h2 { color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.auth-aside p  { color: rgba(255,255,255,.78); }
.auth-aside .check-list li { color: rgba(255,255,255,.9); }
.auth-aside .check-list .check { background: rgba(255,255,255,.16); color: #fff; }
.auth-aside-inner { position: relative; z-index: 1; max-width: 460px; }
.auth-aside-media {
  margin-top: 2.5rem;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.auth-aside-media img { width: 100%; height: 260px; object-fit: cover; }

/* Colonne formulaire */
.auth-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
  background: var(--surface);
}
.auth-card { width: 100%; max-width: 420px; margin: 0 auto; }
.auth-brand { margin-bottom: 2rem; }
.auth-brand img { height: 42px; }
.auth-card h1 { font-size: 1.65rem; margin-bottom: .4rem; }
.auth-card .lead { font-size: .95rem; margin-bottom: 1.75rem; }

.auth-sep {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.5rem 0; color: var(--muted-soft); font-size: .8rem;
}
.auth-sep::before, .auth-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.auth-foot { margin-top: 1.5rem; font-size: .89rem; color: var(--muted); text-align: center; }
.auth-foot a { font-weight: 600; }

.auth-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--muted); margin-top: 2rem;
}
.auth-back:hover { color: var(--navy); }

/* Révéler le mot de passe */
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 3rem; }
.password-toggle {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer;
  color: var(--muted-soft); padding: .45rem; border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.password-toggle:hover { color: var(--navy); background: var(--navy-50); }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}

/* ============================================================
   UTILITAIRES AUTONOMES
   ------------------------------------------------------------
   Les pages du système de design ne chargent pas Tailwind : les
   quelques classes utilitaires employées dans les gabarits sont
   définies ici, sinon elles n'auraient aucun effet.
   ============================================================ */

.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.items-start     { align-items: flex-start; }
.flex-1          { flex: 1; }
.w-full          { width: 100%; }
.relative        { position: relative; }

/* Tailles d'icônes Lucide, équivalentes aux classes de dimension de Tailwind. */
.w-3,   .h-3   { width: .75rem;  height: .75rem; }
.w-3\.5,.h-3\.5{ width: .875rem; height: .875rem; }
.w-4,   .h-4   { width: 1rem;    height: 1rem; }
.w-5,   .h-5   { width: 1.25rem; height: 1.25rem; }
.w-7,   .h-7   { width: 1.75rem; height: 1.75rem; }

/* Sans taille explicite, Lucide dessine un SVG de 24px qui déséquilibre
   les boutons et les listes. */
.btn svg, .check-list svg, .alert svg, .nav-link svg { flex-shrink: 0; }
.btn [data-lucide], .btn svg { width: 1rem; height: 1rem; }

/* ============================================================
   ADAPTATION MOBILE DU HERO
   ------------------------------------------------------------
   Sur un écran étroit, les retours à la ligne forcés et les
   grands espacements repoussaient la barre de recherche — le
   premier geste attendu — sous la ligne de flottaison.
   ============================================================ */

@media (max-width: 640px) {
  .hero {
    padding-top: calc(var(--header-h) + 1.75rem);
    padding-bottom: 4rem;
  }
  .hero .display-1 { font-size: clamp(2rem, 9vw, 2.6rem); margin-top: 1rem !important; }
  .hero-sub { font-size: 1rem; margin: .9rem auto 1.6rem; }

  /* Retour à la ligne décoratif : utile au-delà, nuisible ici. */
  .br-desktop { display: none; }

  .hero-eyebrow { font-size: .68rem; padding: .4rem .8rem; letter-spacing: .05em; }
  .brand img { height: 34px; }
  .search-suggestions { margin-top: 1rem; }
  .search-chip { font-size: .78rem; padding: .4rem .8rem; }

  .section { padding: 3rem 0; }
  .stat-strip { gap: 1.75rem 1rem; }
}

@media (max-width: 520px) {
  /* Le champ et sa loupe doivent rester sur la même ligne : en passant
     l'input en pleine largeur, la loupe se retrouvait seule au-dessus.
     La loupe et le champ forment donc un bloc, « Autour de moi » et le
     bouton d'envoi prennent chacun leur ligne en dessous. */
  .searchbar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .6rem;
    row-gap: .75rem;
    padding: .9rem 1.1rem;
  }
  .searchbar-icon { grid-column: 1; grid-row: 1; }
  .searchbar input { grid-column: 2; grid-row: 1; padding: .3rem 0; min-width: 0; }
  .searchbar-geo {
    grid-column: 1 / -1;
    justify-content: center;
    background: var(--navy-50);
    color: var(--navy);
  }
  .searchbar .btn { grid-column: 1 / -1; width: 100%; }
}

/* ============================================================
   MÉDIAS DE FOND (image ou vidéo pilotée depuis l'admin)
   ============================================================ */

.media-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Le média de fond doit rester visible : aucun aplat de couleur, aucun flou
   par-dessus. Seules deux ombres noires très diffuses subsistent — une en
   haut pour détacher la navigation, une derrière le bloc de texte — et
   laissent le reste de l'image ou de la vidéo intact. */
.media-veil::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.20) 16%, rgba(0,0,0,0) 34%),
    radial-gradient(ellipse 80% 46% at 50% 56%, rgba(0,0,0,.44) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,0) 74%),
    linear-gradient(0deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 22%);
  pointer-events: none;
}

/* Les halos décoratifs sont flous et colorés : ils masqueraient le média. */
.hero.has-media .hero-blob { display: none; }

/* Légère ombre portée sur le texte plutôt qu'un voile opaque : la lisibilité
   est assurée sans rien cacher derrière. */
.hero.has-media .hero-content {
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}
.hero.has-media .searchbar,
.hero.has-media .search-chip { text-shadow: none; }

/* Bandeau illustré entre deux sections. */
.media-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  min-height: clamp(220px, 32vw, 380px);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
}
.media-band .media-bg { z-index: 0; }
.media-band::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(110deg, rgba(14,14,110,.78) 0%, rgba(22,22,155,.42) 60%, rgba(22,22,155,.18) 100%);
}
.media-band-content { position: relative; z-index: 2; padding: clamp(1.75rem, 4vw, 3rem); color: #fff; }
.media-band-content h2, .media-band-content p { color: #fff; }

/* ============================================================
   PIED DE PAGE ILLUSTRÉ
   ------------------------------------------------------------
   Sur grand écran le contenu occupait la gauche et laissait un
   large vide à droite : un média le remplit, fondu vers le fond
   pour que le texte reste lisible. Masqué sur mobile, où la
   colonne unique ne laisse aucun vide.
   ============================================================ */

.site-footer { position: relative; overflow: hidden; }
.site-footer > .container { position: relative; z-index: 2; }

.footer-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  z-index: 0;
  overflow: hidden;
}
.footer-media .media-bg { object-position: center; }
.footer-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy-900) 0%, rgba(11,11,82,.92) 26%, rgba(11,11,82,.55) 62%, rgba(11,11,82,.35) 100%);
}

@media (max-width: 900px) {
  .footer-media { display: none; }
}

/* ============================================================
   PARALLAXE
   ------------------------------------------------------------
   Déplacement léger piloté en JS (translate3d) : discret, et
   entièrement neutralisé si la personne a demandé moins
   d'animations.
   ============================================================ */

.parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .parallax { transform: none !important; }
}

/* ============================================================
   ÉCRAN DE CHARGEMENT
   ============================================================ */

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, var(--navy-800) 0%, var(--navy) 60%, var(--navy-700) 100%);
  transition: opacity .55s ease, visibility .55s ease;
}
.site-loader.is-done { opacity: 0; visibility: hidden; }

.site-loader-inner { text-align: center; }
.site-loader img { height: 56px; margin: 0 auto 1.5rem; }

.site-loader-bar {
  width: 190px; height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.18);
  overflow: hidden;
  margin: 0 auto;
}
.site-loader-bar span {
  display: block; height: 100%; width: 0%;
  border-radius: inherit;
  background: #fff;
  transition: width .35s ease;
}
.site-loader-text {
  margin-top: 1rem;
  font-size: .8rem;
  color: rgba(255,255,255,.62);
  letter-spacing: .04em;
}

/* Rien ne doit rester caché derrière le voile si le JS ne s'exécute pas. */
.no-js .site-loader { display: none; }

/* Quand un média occupe la droite du pied de page, le contenu se resserre
   à gauche : sinon les colonnes s'étalent sous l'image et deviennent
   illisibles par-dessus. */
@media (min-width: 901px) {
  .site-footer:has(.footer-media) .footer-grid,
  .site-footer:has(.footer-media) .footer-bottom { max-width: 56%; }

  /* Dans cette largeur réduite, la colonne de marque en 1.6fr ne laissait
     plus assez de place aux trois colonnes de liens, qui retombaient les
     unes sous les autres : elle passe sur sa propre ligne. */
  .site-footer:has(.footer-media) .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
  .site-footer:has(.footer-media) .footer-grid > :first-child { grid-column: 1 / -1; }
}

/* ============================================================
   CORRESPONDANCE AVEC L'ANCIEN SYSTÈME
   ------------------------------------------------------------
   Les pages éditoriales (À propos, Notre approche) portent un
   contenu rédigé qu'il serait absurde de réécrire pour changer
   d'habillage. Leurs classes historiques sont redéfinies ici
   sur les jetons du nouveau système : le texte ne bouge pas,
   seule l'apparence suit.
   ============================================================ */

.text-h2    { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.14; letter-spacing: -.022em; color: var(--ink); }
.text-h3    { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--ink); }
.text-h4    { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.text-lead  { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--muted); line-height: 1.65; }
.text-body  { font-size: .98rem; color: var(--muted); line-height: 1.7; }
.text-small { font-size: .89rem; color: var(--muted); line-height: 1.6; }
.text-sky   { color: var(--navy); }

.gradient-text {
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-500) 45%, var(--info) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card-feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  height: 100%;
  transition: transform .28s cubic-bezier(.34,1.3,.64,1), box-shadow .28s ease, border-color .28s ease;
}
.card-feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--navy-100); }

.icon-badge {
  width: 46px; height: 46px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--navy-50);
  color: var(--navy);
  flex-shrink: 0;
}
.icon-badge-lg  { width: 56px; height: 56px; border-radius: var(--r-lg); }
.icon-badge-sky { background: var(--sky-tint); color: var(--info); }

/* La révélation au défilement s'appelait « fade-up » : même comportement
   que .reveal, piloté par le même observateur. */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.fade-up.is-visible { opacity: 1; transform: none; }

.page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(110% 85% at 12% 0%, var(--navy-600) 0%, transparent 55%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy) 50%, var(--navy-700) 100%);
  color: #fff;
}
.page-hero h1, .page-hero .text-h2 { color: #fff; }
.page-hero .text-lead, .page-hero .text-body { color: rgba(255,255,255,.78); }
.page-hero .eyebrow { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }
.page-hero-glow, .page-hero-glow-2 {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .42; pointer-events: none;
}
.page-hero-glow   { width: 420px; height: 420px; background: #4F46E5; top: -150px; left: -110px; }
.page-hero-glow-2 { width: 340px; height: 340px; background: #06B6D4; bottom: -140px; right: -80px; opacity: .3; }

.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: rgba(255,255,255,.65); }
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb-sep { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; }
}