/* =========================================================================
   RUBEST CI — Feuille de style principale
   1. Variables      6. En-tête / navigation   11. Galerie
   2. Reset & base   7. Bannières              12. Formulaires
   3. Layout         8. Cartes & sections      13. Pied de page
   4. Typographie    9. Bandes sombres         14. Utilitaires flottants
   5. Composants    10. Partenaires / carte    15. Animations & responsive
   ====================================================================== */

/* ============================ 1. Variables ============================ */
:root {
  /* Palette de marque */
  --navy-950: #04101f;
  --navy-900: #071a2f;
  --navy-800: #0b2545;
  --navy-700: #123a63;
  --navy-600: #1d4f80;

  --red-400: #ff3b46;
  --red-500: #ee1c25;
  --red-600: #c8101a;

  --blue-400: #4fc0ff;
  --blue-500: #1ba0f0;
  --blue-600: #0b7fcb;
  --cyan-400: #38b6ff;

  --gold-500: #e9b949;
  --green-700: #1f6b46;

  /* Neutres */
  --ink: #1c2b3a;
  --body: #4b5b6b;
  --muted: #7d8b9a;
  --line: #e3eaf2;
  --white: #ffffff;
  --soft: #f4f7fb;
  --soft-2: #eef3f9;

  /* Rôles */
  --bg: var(--white);
  --brand: var(--red-500);
  --accent: var(--blue-500);

  /* Mesures — le contenu occupe 80 % de la largeur de la fenêtre. */
  --container: 80%;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Ombres */
  --shadow-xs: 0 1px 2px rgba(11, 37, 69, .06);
  --shadow-sm: 0 4px 14px rgba(11, 37, 69, .07);
  --shadow: 0 10px 30px rgba(11, 37, 69, .10);
  --shadow-lg: 0 24px 60px rgba(11, 37, 69, .16);
  --shadow-red: 0 10px 26px rgba(238, 28, 37, .32);

  /* Transitions */
  --t-fast: .18s cubic-bezier(.4, 0, .2, 1);
  --t: .32s cubic-bezier(.4, 0, .2, 1);
  --t-slow: .6s cubic-bezier(.22, .8, .28, 1);

  --header-h: 88px;
}

/* ============================ 2. Reset & base ========================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  font: 400 16px/1.7 "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--body);
  background: var(--bg);
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy-800);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.01em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

address { font-style: normal; }

::selection { background: var(--red-500); color: #fff; }

:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .8rem 1.2rem;
  background: var(--navy-800);
  color: #fff;
  font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ============================ 3. Layout ============================== */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--soft { background: var(--soft); }
.section--soft-2 { background: linear-gradient(180deg, #fff 0%, var(--soft) 100%); }

.grid { display: grid; gap: clamp(1.2rem, 2.5vw, 1.9rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--wide-right { grid-template-columns: 0.9fr 1.1fr; }
.split--wide-left { grid-template-columns: 1.1fr 0.9fr; }

/* ============================ 4. Typographie ========================= */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .9rem;
  color: var(--red-500);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--red-500);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--blue { color: var(--blue-500); }
.eyebrow--blue::before { background: var(--blue-500); }
.eyebrow--gold { color: var(--gold-500); }
.eyebrow--gold::before { background: var(--gold-500); }

.section-title {
  font-size: clamp(1.65rem, 3.4vw, 2.45rem);
  margin-bottom: 1rem;
}
/* Seuls les enfants directs passent à la ligne : les <span> de couleur
   imbriqués doivent rester dans le flux du texte. */
.section-title > span { display: block; }

.section-lead {
  max-width: 62ch;
  color: var(--body);
  font-size: 1.02rem;
}

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }

.text-cyan { color: var(--cyan-400); }
.text-red { color: var(--red-500); }
.text-blue { color: var(--blue-500); }
.text-white { color: #fff; }

.lead-sm { font-size: .95rem; color: var(--muted); }

/* Note manuscrite reprise des maquettes */
.handwrite {
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  transform: rotate(-6deg);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.handwrite::after {
  content: "";
  display: block;
  width: 78%;
  height: 4px;
  margin-top: .35rem;
  margin-left: auto;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--red-500));
}

/* ============================ 5. Composants ========================== */
.icon { width: 22px; height: 22px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 30px; height: 30px; }

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  border-radius: var(--radius-pill);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(255, 255, 255, .28), transparent 55%);
  transform: translateX(-110%);
  transition: transform var(--t-slow);
}
.btn:hover::after { transform: translateX(0); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--red { background: var(--red-500); color: #fff; box-shadow: var(--shadow-red); }
.btn--red:hover { background: var(--red-600); box-shadow: 0 14px 32px rgba(238, 28, 37, .42); }

.btn--blue { background: var(--blue-500); color: #fff; box-shadow: 0 10px 26px rgba(27, 160, 240, .32); }
.btn--blue:hover { background: var(--blue-600); }

.btn--navy { background: var(--navy-800); color: #fff; }
.btn--navy:hover { background: var(--navy-700); }

.btn--gold { background: var(--gold-500); color: var(--navy-900); }

.btn--ghost {
  border: 2px solid rgba(255, 255, 255, .55);
  color: #fff;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { background: #fff; color: var(--navy-800); border-color: #fff; }

.btn--outline {
  border: 2px solid var(--line);
  color: var(--navy-800);
  background: #fff;
}
.btn--outline:hover { border-color: var(--blue-500); color: var(--blue-500); }

.btn--sm { padding: .7rem 1.25rem; font-size: .76rem; }
.btn--lg { padding: 1.1rem 2.2rem; font-size: .9rem; }
.btn--block { width: 100%; }

/* Lien fléché des cartes */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--navy-800);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.link-arrow .icon {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: var(--red-500);
  color: #fff;
  transition: transform var(--t), background var(--t);
}
.link-arrow:hover { color: var(--red-500); }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow--blue .icon { background: var(--blue-500); }
.link-arrow--navy .icon { background: var(--navy-700); }

/* --- Badges --- */
.badge {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .42rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.badge--red { background: var(--red-500); color: #fff; }
.badge--blue { background: var(--blue-500); color: #fff; }
.badge--light { background: rgba(255, 255, 255, .15); color: #fff; }

/* --- Pastilles d'icône --- */
.i-badge {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  flex: none;
  box-shadow: 0 8px 20px rgba(11, 37, 69, .18);
  transition: transform var(--t), box-shadow var(--t);
}
.i-badge--red { background: linear-gradient(140deg, var(--red-400), var(--red-600)); }
.i-badge--blue { background: linear-gradient(140deg, var(--blue-400), var(--blue-600)); }
.i-badge--navy { background: linear-gradient(140deg, var(--navy-600), var(--navy-900)); }
.i-badge--slate { background: linear-gradient(140deg, #8494a6, #4a5b6d); }
.i-badge--green { background: linear-gradient(140deg, #35855a, #12341f); }
.i-badge--gold { background: linear-gradient(140deg, #f3ce74, var(--gold-500)); color: var(--navy-900); }
.i-badge--sm { width: 44px; height: 44px; }
.i-badge--lg { width: 72px; height: 72px; }
.i-badge--outline {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .45);
  color: #fff;
  box-shadow: none;
}

/* --- Carte générique --- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

/* ============================ 6. En-tête ============================= */
.topbar {
  background: var(--navy-900);
  color: #c5d6e8;
  font-size: .8rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
}
.topbar__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  flex-wrap: wrap;
}
.topbar__list li, .topbar__list a {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.topbar__list .icon { color: var(--blue-400); }
.topbar__list a:hover { color: #fff; }

.topbar__social { display: flex; gap: .55rem; }
.topbar__social a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  transition: background var(--t-fast), transform var(--t-fast);
}
.topbar__social a:hover { background: var(--blue-500); color: #fff; transform: translateY(-2px); }

.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #fff;
  box-shadow: 0 1px 0 var(--line);
  transition: box-shadow var(--t), padding var(--t);
}
.header.is-stuck { box-shadow: 0 8px 30px rgba(11, 37, 69, .12); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* Le logo est un emblème circulaire : on pilote sa hauteur, pas sa largeur. */
.brand img {
  width: auto;
  height: clamp(54px, 5.6vw, 72px);
  transition: transform var(--t);
}
.brand:hover img { transform: scale(1.03); }

/* La marge automatique repousse le menu à droite, contre le bouton « Devis ».
   Sans effet sous 980px, où .nav devient un panneau hors écran en position fixed. */
.nav { display: flex; align-items: center; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); }

.nav__link {
  position: relative;
  display: block;
  padding: .5rem 0;
  color: var(--navy-800);
  font-size: .93rem;
  font-weight: 600;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--red-500);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t);
}
.nav__link:hover { color: var(--red-500); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--red-500); }

.nav__cta { display: none; }

.header__cta { display: inline-flex; }

/* Bouton hamburger */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--soft);
  padding: 12px 11px;
}
.burger span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--navy-800);
  transition: transform var(--t), opacity var(--t-fast), width var(--t);
}
.burger span + span { margin-top: 5px; }
.burger span:nth-child(2) { width: 70%; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 88;
  background: rgba(4, 16, 31, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t);
}
.nav-overlay.is-visible { opacity: 1; }

/* ============================ 7. Bannières =========================== */
/* --- Hero page d'accueil --- */
.hero {
  position: relative;
  display: grid;
  min-height: 90vh;
  min-height: 90dvh; /* évite le saut lié à la barre d'adresse mobile */
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
}

/* Carrousel : les diapositives sont superposées dans une même cellule de
   grille plutôt qu'en position absolue — la hauteur suit ainsi la plus haute
   d'entre elles et rien ne déborde sur petit écran. */
.hero__slides { display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 3vw, 2.8rem) 0 clamp(4.5rem, 7vw, 6rem);
  background: var(--navy-900) var(--hero-bg, none) center/cover no-repeat;
  opacity: 0;
  visibility: hidden;   /* retire aussi les liens du parcours au clavier */
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility 0s;
}

/* Le dégradé assombrit uniquement la colonne de texte : la photo reste
   lisible à droite, comme sur la maquette. */
.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(4, 16, 31, .94) 0%, rgba(5, 20, 37, .9) 30%, rgba(6, 23, 42, .74) 44%, rgba(7, 26, 47, .34) 58%, rgba(7, 26, 47, .06) 72%, rgba(7, 26, 47, 0) 84%),
    linear-gradient(180deg, rgba(4, 16, 31, .28) 0%, rgba(4, 16, 31, 0) 35%, rgba(4, 16, 31, .3) 100%);
}

/* Le conteneur garde la largeur de page : c'est le contenu qui est limité,
   sinon le bloc se retrouve centré au lieu d'être aligné à gauche. */
.hero__inner { position: relative; z-index: 2; }
.hero__content { max-width: min(56%, 680px); }

/* Le contenu de la diapositive active entre en fondu montant. */
.hero__slide.is-active .hero__content > * {
  animation: hero-in .7s cubic-bezier(.22, .8, .28, 1) both;
}
.hero__slide.is-active .hero__content > :nth-child(2) { animation-delay: .08s; }
.hero__slide.is-active .hero__content > :nth-child(3) { animation-delay: .16s; }
.hero__slide.is-active .hero__content > :nth-child(4) { animation-delay: .24s; }
.hero__slide.is-active .hero__content > :nth-child(5) { animation-delay: .32s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__title {
  color: #fff;
  font-size: clamp(2.15rem, 3.9vw, 3.85rem);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin-bottom: .9rem;
}
.hero__title > span { display: block; }

.hero__chip {
  display: inline-block;
  font-style: normal;
  margin-left: .6rem;
  padding: .28em .8em;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--navy-800);
  font-size: .48em;
  vertical-align: middle;
  letter-spacing: .02em;
  box-shadow: var(--shadow);
}

.hero__baseline {
  max-width: 42ch;
  margin-bottom: 1rem;
  font-size: clamp(1.1rem, 1.65vw, 1.55rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.hero__text {
  max-width: 52ch;
  margin-bottom: 1.9rem;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(1rem, 1.12vw, 1.15rem);
  line-height: 1.65;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Note manuscrite : posée sur le carrousel, alignée sur le conteneur. */
.hero__aside {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(4.5rem, 8vw, 7rem);
  z-index: 3;
  pointer-events: none;
}
.hero__note {
  margin-left: auto;
  width: min(24%, 250px);
  text-align: right;
}

/* --- Puces de défilement --- */
.hero__nav {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(1.4rem, 3vw, 2.4rem);
  z-index: 4;
  display: none;              /* affichées seulement si le carrousel tourne */
}
.hero.is-carousel .hero__nav { display: block; }

.hero__dots { display: flex; gap: .7rem; }
.hero__dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 22px;
  padding: 0;
}
.hero__dot span {
  display: block;
  width: 30px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .38);
  transition: background var(--t), width var(--t);
}
.hero__dot:hover span { background: rgba(255, 255, 255, .7); }
.hero__dot.is-active span { width: 46px; background: var(--red-500); }
.hero__dot.is-active { width: 50px; }

/* --- Bannière des pages intérieures --- */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 42vh, 420px);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--navy-900) var(--hero-bg, none) center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}
/* Duotone : recolore une photo dans la teinte de la charte en conservant ses
   valeurs. Utilisé pour les visuels fournis en déclinaison verte, afin qu'ils
   s'accordent au reste du site. Retirer la classe rétablit la couleur d'origine. */
.page-hero--tint, .band-photo--tint {
  background-color: #1d4f80;
  background-blend-mode: luminosity;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(4, 16, 31, .95) 0%, rgba(7, 26, 47, .82) 42%, rgba(7, 26, 47, .22) 78%, rgba(7, 26, 47, .08) 100%);
}
/* Même principe que le hero d'accueil : le conteneur garde la largeur de page,
   seul le contenu est limité, sinon le bloc se retrouve centré. */
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__content { max-width: min(58%, 660px); }
.page-hero__title {
  color: #fff;
  font-size: clamp(1.9rem, 4.8vw, 3.1rem);
  line-height: 1.06;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.page-hero__title > span { display: block; }
.page-hero__text {
  max-width: 54ch;
  color: rgba(255, 255, 255, .84);
  font-size: .98rem;
}
.page-hero .handwrite {
  position: absolute;
  right: clamp(1rem, 5vw, 3.5rem);
  bottom: clamp(1.5rem, 5vw, 3rem);
  max-width: 280px;
  text-align: right;
  z-index: 2;
}

/* --- Fil d'Ariane --- */
.breadcrumb { margin-bottom: 1.4rem; font-size: .84rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .7); }
.breadcrumb li + li::before { content: "›"; color: rgba(255, 255, 255, .5); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current] { color: #fff; font-weight: 600; }

/* ============================ 8. Cartes & sections =================== */
/* --- Bandeau de réassurance à cheval sur le hero --- */
.facts {
  position: relative;
  z-index: 5;
  margin-top: clamp(.9rem, 1.6vw, 1.4rem);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.facts__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.3rem clamp(.9rem, 1.4vw, 1.35rem);
  border-right: 1px solid var(--line);
}
.facts__item:last-child { border-right: 0; }
.facts__item h3 {
  font-size: .79rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: .15rem;
}
.facts__item p { font-size: .8rem; line-height: 1.5; color: var(--muted); margin: 0; }
.facts__item:hover .i-badge { transform: translateY(-4px) rotate(-6deg); }

/* --- Cartes activité --- */
.activity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t);
}
.activity-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.activity-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.activity-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.activity-card:hover .activity-card__media img { transform: scale(1.07); }
/* La pastille est ancrée au corps de la carte, pas au bloc image : celui-ci
   masque son débordement pour le zoom au survol, et coupait le picto en deux. */
.activity-card .i-badge {
  position: absolute;
  left: 1.5rem;
  top: -29px;          /* moitié des 58px du picto : à cheval sur la limite */
  z-index: 2;
}
.activity-card__body {
  position: relative;
  padding: 2.4rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.activity-card__body h3 { font-size: 1.16rem; margin-bottom: .6rem; }
.activity-card__body p { font-size: .92rem; }
.activity-card__body .link-arrow { margin-top: auto; padding-top: 1.2rem; }

/* --- Section à propos avec collage d'images --- */
.collage { display: grid; grid-template-columns: 2.1fr 1fr; gap: 1rem; }
.collage__main, .collage__thumb { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.collage__main img { width: 100%; height: 100%; object-fit: cover; }
.collage__side { display: grid; gap: 1rem; }
.collage__thumb { aspect-ratio: 4 / 3; }
.collage__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.collage__thumb:hover img { transform: scale(1.08); }

.figure {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.figure img { width: 100%; object-fit: cover; }
.figure--framed { border: 8px solid #fff; }

/* --- Liste à puces cochées --- */
.checklist { display: grid; gap: .85rem; margin: 1.4rem 0; }
.checklist li { display: flex; align-items: flex-start; gap: .8rem; font-size: .94rem; }
.checklist .icon {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--red-500);
  color: #fff;
  margin-top: 2px;
}
.checklist--blue .icon { background: var(--blue-500); }

/* --- Cartes atouts (colonne icône + texte) --- */
.pillar {
  padding: 1.9rem 1.5rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t);
}
.pillar:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.pillar .i-badge { margin: 0 auto 1.1rem; }
.pillar:hover .i-badge { transform: rotateY(180deg); }
.pillar h3 {
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.pillar__lead {
  display: block;
  margin-bottom: .7rem;
  color: var(--red-500);
  font-size: .85rem;
  font-weight: 600;
}
.pillar--blue .pillar__lead { color: var(--blue-500); }
.pillar p { font-size: .88rem; color: var(--muted); }

/* --- Carrousel « Notre équipe » ---------------------------------------
   Défilement natif avec accroche (scroll-snap) plutôt qu'un translate
   piloté en JavaScript : le glissement au doigt et à la molette marche
   sans code, et la liste reste parcourable si le script ne se charge pas.
   Le nombre de cartes visibles est fixé par --team-per-view.            */
.team { --team-per-view: 5; --team-gap: 1.3rem; position: relative; }

.team__viewport { overflow: hidden; }

.team__track {
  display: grid;
  grid-auto-flow: column;
  /* Chaque carte occupe une fraction exacte de la largeur visible. */
  grid-auto-columns: calc(
    (100% - (var(--team-per-view) - 1) * var(--team-gap)) / var(--team-per-view)
  );
  gap: var(--team-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Place pour l'ombre des cartes, sans rogner au survol. */
  padding: 6px 2px 18px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.team__track::-webkit-scrollbar { display: none; }
.team__track:focus-visible { outline-offset: -3px; }

.team__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t);
}
.team__card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }

.team__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(140deg, var(--navy-700), var(--navy-900));
}
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__card:hover .team__photo img { transform: scale(1.05); }
.team__photo img { transition: transform var(--t-slow); }

/* Repli sans photo : les initiales sur un aplat de la charte. */
.team__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: .06em;
}

.team__body { padding: 1.1rem 1.1rem 1.3rem; text-align: center; }
.team__body h3 {
  font-size: .92rem;
  line-height: 1.35;
  margin-bottom: .35rem;
}
.team__body p {
  margin: 0;
  color: var(--red-500);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.45;
}

/* --- Commandes du carrousel --- */
.team__nav {
  display: none;                 /* affichées uniquement si le script tourne */
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.4rem;
}
.team.is-ready .team__nav { display: flex; }

.team__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy-800);
  box-shadow: var(--shadow-xs);
  transition: background var(--t), color var(--t), transform var(--t-fast), opacity var(--t);
}
.team__arrow:hover:not(:disabled) { background: var(--red-500); color: #fff; transform: translateY(-2px); }
.team__arrow:disabled { opacity: .35; cursor: default; }
.team__arrow:first-child .icon { transform: rotate(180deg); }

.team__dots { display: flex; gap: .55rem; }
.team__dot {
  width: 26px;
  height: 4px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: #cfd9e6;
  transition: background var(--t), width var(--t);
}
.team__dot:hover { background: #9fb2c8; }
.team__dot.is-active { width: 40px; background: var(--red-500); }

/* --- Avantage en ligne (icône + texte, sans carte) --- */
.feature {
  display: grid;
  align-content: start;
  gap: .8rem;
  padding: 0 1.4rem;
  border-left: 1px solid var(--line);
}
.feature:first-child { border-left: 0; padding-left: 0; }
.feature h3 { font-size: .92rem; }

/* Bandeau « Pourquoi nous choisir ? » : le texte d'intro occupe environ un
   tiers, les quatre engagements se partagent le reste (cf. maquette). */
.why {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.why__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}
.why__grid .feature h3 {
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.feature p { font-size: .85rem; color: var(--muted); margin: 0; }

/* --- Encart citation --- */
.quote {
  display: flex;
  gap: 1.2rem;
  padding: 1.6rem;
  background: var(--soft);
  border-radius: var(--radius);
  border-left: 4px solid var(--gold-500);
}
.quote__mark { color: var(--gold-500); }
.quote p { font-size: .96rem; font-style: italic; color: var(--ink); }
.quote__author { margin-top: .8rem; font-size: .88rem; font-style: normal; font-weight: 700; color: var(--navy-800); }
.quote__role { font-size: .8rem; color: var(--muted); }

/* ============================ 9. Bandes sombres ====================== */
.band-dark {
  position: relative;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: linear-gradient(115deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: rgba(255, 255, 255, .78);
  overflow: hidden;
}
.band-dark::before {
  content: "";
  position: absolute;
  right: -140px;
  top: -80px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 160, 240, .22), transparent 65%);
}
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .feature { border-left-color: rgba(255, 255, 255, .16); }
.band-dark .feature p { color: rgba(255, 255, 255, .62); }
.band-dark__inner { position: relative; z-index: 2; }

.band-photo {
  position: relative;
  padding: clamp(2.5rem, 5vw, 3.6rem) 0;
  background: var(--navy-900) var(--band-bg, none) center/cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.band-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 16, 31, .93) 20%, rgba(4, 16, 31, .62) 60%, rgba(4, 16, 31, .55));
}
.band-photo__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  flex-wrap: wrap;
}
.band-photo__body { flex: 1; min-width: 260px; }
.band-photo__body h2 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin-bottom: .35rem; }
.band-photo__body p { color: rgba(255, 255, 255, .78); font-size: .93rem; }

/* Bande d'appel à l'action de bas de page */
.cta-band {
  position: relative;
  padding: clamp(2.2rem, 4.5vw, 3rem) 0;
  background: var(--navy-900) var(--cta-bg, none) center/cover no-repeat;
  background-attachment: fixed;
  color: #fff;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 16, 31, .92), rgba(9, 32, 56, .74) 55%, rgba(9, 32, 56, .6));
}
.cta-band__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
}
.cta-band__icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4);
  flex: none;
}
.cta-band__icon .icon { width: 30px; height: 30px; }
.cta-band__body { flex: 1; min-width: 260px; }
.cta-band__eyebrow {
  margin-bottom: .2rem;
  color: rgba(255, 255, 255, .7);
  font-size: .85rem;
}
.cta-band__title { color: #fff; font-size: clamp(1.3rem, 2.7vw, 1.85rem); margin-bottom: .25rem; }
.cta-band__text { color: rgba(255, 255, 255, .78); font-size: .93rem; margin: 0; }

/* ============================ 10. Carte & partenaires ================ */
.map-ci {
  display: grid;
  place-items: center;
  padding: 1rem;
}
.map-ci__figure {
  position: relative;
  width: 100%;
  max-width: 280px;
}
.map-ci__figure img { width: 100%; height: auto; }

/* Repère d'Abidjan : coordonnées en % de l'image (voir includes/map-ci.php). */
.map-ci__marker {
  position: absolute;
  left: 73.4%;
  top: 84.4%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: var(--red-500);
  border: 3px solid #fff;
  box-shadow: 0 0 0 7px rgba(238, 28, 37, .2);
}

.map-ci__pin {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: -1.5rem;
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--shadow);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.map-ci__pin .icon { color: var(--red-500); }

.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.partner {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: .9rem .6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  transition: transform var(--t), box-shadow var(--t);
}
.partner:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.partner img { max-height: 46px; width: auto; }
.partner--empty {
  background: var(--soft);
  border-style: dashed;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Bande galerie compacte (accueil) */
.strip {
  position: relative;
  padding: clamp(2rem, 4vw, 2.6rem) 0;
  background: linear-gradient(115deg, var(--navy-900), var(--navy-700));
  color: #fff;
}
.strip__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  flex-wrap: wrap;
}
.strip__intro { flex: 1 1 260px; display: flex; gap: 1rem; align-items: center; }
.strip__intro h3 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.strip__intro p { font-size: .84rem; color: rgba(255, 255, 255, .68); margin: 0; }
.strip__thumbs { display: flex; gap: .8rem; flex: 2 1 420px; }
.strip__thumb { flex: 1; min-width: 0; }
.strip__thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: transform var(--t), border-color var(--t);
}
.strip__thumb:hover img { transform: translateY(-4px); border-color: var(--red-500); }
.strip__thumb span {
  display: block;
  margin-top: .45rem;
  font-size: .74rem;
  color: rgba(255, 255, 255, .7);
  text-align: center;
}

/* ============================ 11. Galerie ============================ */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 2rem;
}
.filter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--navy-800);
  font-size: .85rem;
  font-weight: 600;
  transition: all var(--t-fast);
}
.filter:hover { border-color: var(--red-500); color: var(--red-500); }
.filter .icon { width: 18px; height: 18px; }
.filter.is-active {
  background: var(--red-500);
  border-color: var(--red-500);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform var(--t), box-shadow var(--t), opacity var(--t), scale var(--t);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.gallery__item:hover img { transform: scale(1.08); }
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 16, 31, .85) 0%, rgba(4, 16, 31, .18) 45%, transparent 70%);
}
.gallery__caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  transition: transform var(--t);
}
.gallery__item:hover .gallery__caption { transform: translateY(-4px); }
.gallery__caption .icon { width: 18px; height: 18px; }
.gallery__item.is-hidden { display: none; }

/* Visionneuse */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 16, 31, .93);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { max-width: min(1000px, 100%); text-align: center; }
.lightbox__figure img {
  max-height: 76vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transform: scale(.94);
  transition: transform var(--t);
}
.lightbox.is-open .lightbox__figure img { transform: scale(1); }
.lightbox__caption { margin-top: 1rem; color: #fff; font-weight: 600; }
.lightbox__count { display: block; margin-top: .25rem; font-size: .82rem; color: rgba(255, 255, 255, .6); font-weight: 400; }
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  transition: background var(--t-fast), transform var(--t-fast);
}
.lightbox__btn:hover { background: var(--red-500); transform: scale(1.06); }
.lightbox__btn--close { top: 1.2rem; right: 1.2rem; }
.lightbox__btn--prev { left: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__btn--prev:hover, .lightbox__btn--next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__btn--prev .icon { transform: rotate(90deg); }
.lightbox__btn--next .icon { transform: rotate(-90deg); }

/* ============================ 12. Formulaires ======================== */
.form-card {
  padding: clamp(1.5rem, 3vw, 2.6rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.4rem;
}
.field--full { grid-column: 1 / -1; }

.field { display: grid; gap: .45rem; }
.field label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--navy-800);
}
.field label .req { color: var(--red-500); }

.field__control { position: relative; display: flex; align-items: center; }
.field__control > .icon {
  position: absolute;
  left: 1rem;
  color: var(--muted);
  pointer-events: none;
  transition: color var(--t-fast);
}
.field__control:focus-within > .icon { color: var(--blue-500); }

/* L'icône se cale en haut lorsque le champ est un textarea */
.field__control:has(.textarea) { align-items: flex-start; }
.field__control:has(.textarea) > .icon { top: 1.05rem; }

.input, .select, .textarea {
  width: 100%;
  padding: .92rem 1rem .92rem 2.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: #a9b6c4; }
.input:hover, .select:hover, .textarea:hover { border-color: #c8d5e3; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(27, 160, 240, .14);
}
.textarea { min-height: 140px; resize: vertical; padding-top: .9rem; }

.select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8b9a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.8rem;
}

/* États de validation */
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  border-color: var(--red-500);
  background: #fff6f6;
}
.field.has-error .input:focus,
.field.has-error .textarea:focus { box-shadow: 0 0 0 4px rgba(238, 28, 37, .12); }
.field.is-valid .input,
.field.is-valid .select,
.field.is-valid .textarea { border-color: #3fae6a; }

.field__error {
  display: none;
  font-size: .8rem;
  color: var(--red-600);
  font-weight: 500;
}
.field.has-error .field__error { display: block; animation: shake .32s ease; }

/* Compteur de caractères */
.field__count { font-size: .75rem; color: var(--muted); text-align: right; }

/* Leurre anti-robot */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bouton d'envoi : largeur ajustée au libellé plutôt que pleine largeur. */
.form-card__submit { margin-top: 1.6rem; }

.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.2rem;
  font-size: .8rem;
  color: var(--muted);
}
.form-note .icon { width: 15px; height: 15px; }

/* Messages d'état */
.alert {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.6rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size: .92rem;
  animation: slide-down .4s var(--t-slow) both;
}
/* `display:flex` sur .alert l'emporte sur le [hidden] du navigateur :
   on rétablit explicitement le masquage. */
.alert[hidden] { display: none; }
.alert__icon { flex: none; margin-top: 2px; }
.alert strong { display: block; margin-bottom: .2rem; }
.alert ul { margin-top: .5rem; display: grid; gap: .25rem; }
.alert li { position: relative; padding-left: 1rem; font-size: .87rem; }
.alert li::before { content: "•"; position: absolute; left: 0; }
.alert--success { background: #eefaf2; border-color: #3fae6a; color: #1d6b3c; }
.alert--error { background: #fef2f2; border-color: var(--red-500); color: #a3121a; }
.alert--info { background: #eff7fe; border-color: var(--blue-500); color: #0c5f97; }

/* Le libellé regroupe l'icône et le texte dans un seul enfant du bouton :
   il doit donc porter sa propre disposition. Sans cela, le <svg> — passé en
   display:block par le reset global — se place sur une ligne à part. */
.btn__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

/* Bouton en cours d'envoi */
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading .btn__label { visibility: hidden; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* Encarts latéraux des pages formulaire */
.aside-card {
  padding: 1.6rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.aside-card--soft { background: var(--soft); border-color: transparent; }
.aside-card--dark {
  background: linear-gradient(140deg, var(--navy-900), var(--navy-700));
  border-color: transparent;
  color: rgba(255, 255, 255, .78);
}
.aside-card--dark h3 { color: #fff; }
.aside-card h3 { font-size: 1.12rem; margin-bottom: .8rem; }

.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-top: 1.2rem;
}
.contact-method {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 1rem .4rem;
  border-radius: var(--radius-sm);
  text-align: center;
  transition: background var(--t-fast), transform var(--t-fast);
}
.contact-method:hover { background: rgba(255, 255, 255, .07); transform: translateY(-3px); }
.contact-method strong {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.contact-method span { font-size: .74rem; color: rgba(255, 255, 255, .62); word-break: break-word; }
.contact-method .i-badge { width: 48px; height: 48px; }
.i-badge--wa { background: linear-gradient(140deg, #45d267, #1faa4d); }

/* Cartes de contact rapides (page Contact) */
.contact-tile {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t);
}
.contact-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.contact-tile h3 {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.contact-tile p { font-size: .9rem; color: var(--ink); margin: 0; }
.contact-tile small { font-size: .78rem; color: var(--blue-500); }

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 200px;
  background: var(--soft);
}
.map-embed iframe { width: 100%; height: 100%; min-height: 200px; border: 0; display: block; }

/* Carte photo avec légende superposée */
.photo-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 230px;
  box-shadow: var(--shadow-sm);
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  height: 100%;
  min-height: 230px;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(4, 16, 31, .92), rgba(4, 16, 31, .25) 60%, transparent);
  color: #fff;
}
.photo-card__body h3 { color: #fff; font-size: 1.25rem; margin-bottom: .2rem; }
.photo-card__body p { font-size: .87rem; color: rgba(255, 255, 255, .8); margin: 0; }

/* ============================ 13. Pied de page ======================= */
.footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, .68);
  font-size: .9rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  padding: clamp(2.6rem, 5vw, 4rem) 0 2.4rem;
}
.footer__brand img {
  width: auto;
  height: 92px;
  margin-bottom: 1.2rem;
  padding: .5rem;
  background: #fff;
  border-radius: var(--radius-sm);
}
.footer__brand p { font-size: .88rem; line-height: 1.7; }
.footer__signature {
  margin-top: 1rem;
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  color: var(--gold-500);
}
.footer__title {
  margin-bottom: 1.2rem;
  color: #fff;
  font-size: .95rem;
  letter-spacing: .04em;
}
.footer__links { display: grid; gap: .65rem; }
.footer__links li, .footer__links a { display: flex; align-items: flex-start; gap: .6rem; }
.footer__links .icon { color: var(--blue-400); margin-top: 3px; }
.footer__links a:hover { color: #fff; }
.footer__links a.is-active { color: var(--red-400); font-weight: 600; }
.footer__links--dash li::before { content: "–"; color: var(--red-400); }
.footer__contact { word-break: break-word; }

.social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.social__link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  transition: transform var(--t-fast), filter var(--t-fast);
}
.social__link:hover { transform: translateY(-4px); filter: brightness(1.12); }
.social__link--fb { background: #1877f2; }
.social__link--li { background: #0a66c2; }
.social__link--yt { background: #ff0000; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: var(--navy-950);
  font-size: .82rem;
}
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 0;
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; gap: 1.2rem; }
.footer__legal a:hover { color: #fff; }

/* ============================ 14. Flottants ========================== */
.quick-actions {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: none;
  gap: .6rem;
}
.quick-actions__btn {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform var(--t-fast);
}
.quick-actions__btn:hover { transform: scale(1.08); }
.quick-actions__btn--wa { background: #25d366; }
.quick-actions__btn--tel { background: var(--red-500); }

.to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all var(--t);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--red-500); }
.to-top .icon { transform: rotate(180deg); }

.scroll-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 3px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--red-500), var(--blue-500));
  transition: width .1s linear;
}

/* ============================ 15. Animations ========================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--t-slow), transform .7s var(--t-slow);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="zoom"].is-visible { transform: none; }

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.is-floating { animation: float 5s ease-in-out infinite; }

/* Compteurs animés */
.counter { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; color: #fff; line-height: 1; }
.counter-item { text-align: center; }
.counter-item p { margin-top: .5rem; font-size: .85rem; color: rgba(255, 255, 255, .65); }

/* ============================ 16. Responsive ========================= */
@media (max-width: 1080px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .team { --team-per-view: 4; }
  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .facts__item:nth-child(2) { border-right: 0; }
  .facts__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .split, .split--wide-right, .split--wide-left { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
  .hero__aside { display: none; }
  .hero__content { max-width: min(80%, 640px); }
  .page-hero__content { max-width: min(85%, 660px); }
  .hero__slide::before {
    background: linear-gradient(96deg, rgba(4, 16, 31, .94) 0%, rgba(6, 23, 42, .84) 45%, rgba(7, 26, 47, .42) 72%, rgba(7, 26, 47, .18) 100%);
  }
}

@media (max-width: 980px) {
  .team { --team-per-view: 3; }
  .header__cta { display: none; }
  .burger { display: block; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 89;
    width: min(340px, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.5rem 1.6rem 2rem;
    background: #fff;
    box-shadow: -20px 0 60px rgba(4, 16, 31, .2);
    transform: translateX(105%);
    transition: transform var(--t);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__link { padding: 1rem 0; font-size: 1rem; }
  .nav__link::after { display: none; }
  .nav__cta { display: block; margin-top: 1.8rem; }
  .nav__cta .btn { width: 100%; }

  .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .partners { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .feature { border-left: 0; padding-left: 0; }
  .cta-band { background-attachment: scroll; }
  .quick-actions { display: flex; }
  .to-top { bottom: 5rem; }
}

@media (max-width: 760px) {
  /* Sur mobile, seules les gouttières délimitent le contenu : 80 % serait
     bien trop étroit. */
  :root { --header-h: 72px; --container: 100%; }
  .topbar__list li:not(:first-child) { display: none; }
  .topbar { font-size: .74rem; }
  .team { --team-per-view: 2; --team-gap: 1rem; }
  .hero { text-align: left; }
  .hero__content, .page-hero__content { max-width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__slide { padding-bottom: clamp(4rem, 12vw, 5.5rem); }
  /* Les puces sont centrées : en bas à gauche elles buteraient sur les
     boutons flottants WhatsApp / Appeler. */
  .hero__dots { justify-content: center; }
  .hero__dot { width: 26px; }
  .hero__dot span { width: 22px; }
  .hero__dot.is-active { width: 40px; }
  .hero__dot.is-active span { width: 36px; }
  .facts { margin-top: 1rem; }
  .facts__grid { grid-template-columns: 1fr; }
  .facts__item { border-right: 0; border-bottom: 1px solid var(--line); }
  .facts__item:last-child { border-bottom: 0; }
  .collage { grid-template-columns: 1fr; }
  .collage__side { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .page-hero .handwrite { display: none; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__inner .btn { width: 100%; }
  .strip__thumbs { flex-wrap: wrap; }
  .strip__thumb { flex: 1 1 30%; }
}

@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  /* Sur un écran étroit, une cible tactile pleine largeur reste préférable. */
  .form-card__submit { width: 100%; }
  .gallery { grid-template-columns: 1fr; }
  .contact-methods { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom-inner { flex-direction: column; text-align: center; }
  .band-photo__inner { flex-direction: column; align-items: flex-start; }
  .lightbox__btn--prev { left: .4rem; }
  .lightbox__btn--next { right: .4rem; }
}

/* ============================ 17. Préférences & impression =========== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .topbar, .header, .cta-band, .quick-actions, .to-top,
  .scroll-progress, .nav, .burger { display: none !important; }
  body { color: #000; }
  .page-hero, .hero { min-height: auto; color: #000; background: none; }
  .page-hero__overlay, .hero::before { display: none; }
  .page-hero__title, .hero__title { color: #000; }
}