/* ============================================
   LE CAGIBI — Style principal
   ============================================ */

/* ──────────────── Variables ──────────────── */
:root {
  --cream:         #fff7f0;
  --cream-dark:    #f7ede4;
  --navy:          #171c2e;
  --body:          #394052;
  --brown:         #5a2528;
  --blue:          #376ab7;
  --blue-light:    #dfeafe;
  --orange:        #ffa959;
  --orange-light:  #fff0dc;
  --green:         #78ba87;
  --green-light:   #e4f2e7;
  --yellow:        #e8b40a;
  --yellow-light:  #fdf5cc;
  --purple-light:  #e9e8fc;

  --border:        rgba(23,28,46,0.08);
  --border-blue:   rgba(55,106,183,0.22);
  --border-orange: rgba(255,169,89,0.22);
  --border-green:  rgba(120,186,135,0.22);
  --border-yellow: rgba(232,180,10,0.28);

  --shadow:    0 12px 15px rgba(23,28,46,0.08);
  --shadow-lg: 0 24px 30px rgba(23,28,46,0.13);

  --radius-sm:   14px;
  --radius:      18px;
  --radius-lg:   28px;
  --radius-xl:   30px;
  --radius-full: 9999px;

  --container: 1200px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
}

/* ──────────────── Reset ──────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* Empêche iOS d'agrandir le texte en landscape */
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* Garde-fou : aucun élément ne doit déborder horizontalement */
}

main { flex: 1; }

a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; overflow-wrap: break-word; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font: inherit; }

/* Mots/URLs très longs : empêche le débordement sur petits écrans */
h1, h2, h3, p, li, span, strong { overflow-wrap: break-word; }

h1, h2, h3 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}

/* ──────────────── Header & Nav ──────────────── */
:root {
  --nav-h: 72px;
  --nav-h-scrolled: 56px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,247,240,0.92);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.site-header.scrolled {
  background: rgba(255,247,240,0.97);
  border-color: rgba(23,28,46,0.09);
  box-shadow: 0 1px 24px rgba(23,28,46,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  max-width: var(--container);
  margin: 0 auto;
  /* Retrecissement fluide de la hauteur, cale sur le fondu du logo (0.3s).
     Le burger est isole sur sa propre couche GPU (translateZ(0) plus bas),
     donc ses 3 barres restent nettes meme quand le conteneur traverse des
     hauteurs fractionnaires pendant l'animation. */
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: height;
}

.site-header.scrolled .header-inner {
  height: var(--nav-h-scrolled);
}

/* Brand */
.brand { display: flex; align-items: center; }

.brand-logo {
  height: 40px;
  width: auto;
  transition: height 0.3s ease, opacity 0.2s;
}

.site-header.scrolled .brand-logo { height: 32px; }
.brand-logo:hover { opacity: 0.75; }
.brand-logo--dark  { display: none; }

/* Nav links */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav a {
  position: relative;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brown);
  padding: 6px 11px;
  border-radius: var(--radius-full);
  transition: color 0.18s ease, background 0.18s ease;
  letter-spacing: 0.01em;
}

/* Hover */
.nav a:not(.nav-cta):hover { color: var(--blue); background: rgba(55,106,183,0.07); }

/* Active — {} orange, texte bleu comme dans Figma */
.nav a.active:not(.nav-cta) {
  color: var(--blue);
  font-weight: 700;
}
.nav a.active:not(.nav-cta):not(.nav-drop-link)::before { content: '{'; color: var(--orange); font-weight: 700; }
.nav a.active:not(.nav-cta):not(.nav-drop-link)::after  { content: '}'; color: var(--orange); font-weight: 700; }
/* Sur Services (inline-flex + chevron) : gap:0 pour coller {} au texte, margin-left remet l'espace avant le chevron */
.nav-parent.active { gap: 0; }
.nav-parent.active .nav-chevron { order: 1; margin-left: 6px; }

/* CTA button */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  margin-left: 10px;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 8px rgba(55,106,183,0.22);
}
.nav-cta:hover {
  background: #2a5ca6;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(55,106,183,0.38);
}
.nav-cta::before, .nav-cta::after { display: none !important; }

/* ── Services dropdown ── */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-parent {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding-left: 16px;
  padding-right: 16px;
}
.nav-chevron {
  flex-shrink: 0;
  transition: transform 0.22s ease;
}
.nav-item:hover .nav-chevron,
.nav-item:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 300px;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 120;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown-inner {
  background: #fff;
  border: 1px solid rgba(23,28,46,0.08);
  border-radius: var(--radius);
  box-shadow: 0 14px 36px rgba(23,28,46,0.14), 0 2px 8px rgba(23,28,46,0.06);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-drop-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  background: transparent !important;
  text-decoration: none;
  font-weight: 600 !important;
  transition: background 0.15s ease;
}
.nav-drop-link:hover { background: rgba(55,106,183,0.08) !important; }
.nav-drop-link:hover .nav-drop-text strong { color: var(--blue); }
.nav-drop-link::before,
.nav-drop-link::after { content: none !important; display: none !important; }

.nav-drop-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-drop-icon svg { width: 18px; height: 18px; display: block; }
.nav-drop-icon--blue   { background: var(--blue-light);   color: var(--blue); }
.nav-drop-icon--green  { background: var(--green-light);  color: #2e7040; }
.nav-drop-icon--orange { background: var(--orange-light); color: var(--brown); }

.nav-drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
}
.nav-drop-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.nav-drop-text small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(57,64,82,0.65);
}


/* En-tête du drawer (logo + fermer) — mobile uniquement */
.nav-head { display: none; }

/* ── Burger ── */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(23,28,46,0.1);
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 110;
  transition: background 0.18s ease;
  /* Promotion sur une couche GPU : le header est fixed, donc le navigateur le
     redessine a chaque frame pendant le scroll, ce qui fait trembler les
     barres de 2px (sous-pixels). Isole sur sa propre couche, le burger est
     dessine une seule fois puis composite -> 3 barres nettes au scroll. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.burger:hover { background: rgba(255,255,255,0.9); }

/* 3 barres égales, nettes et régulières : hauteur entière (2px → pas de
   sous-pixel flou), même largeur, espacement constant de 5px.
   Entraxe entre deux barres = hauteur + gap = 2 + 5 = 7px → c'est la valeur
   de translateY qui ramène les barres extrêmes au centre pour former la croix. */
.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease, width 0.28s ease;
  transform-origin: center;
}

.burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; width: 0; }
.burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile overlay ── */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(23,28,46,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ──────────────── Hero ──────────────── */
/* Hauteur fluide : min absolu 440px, idéal 64vh, max 600px → s'adapte aux petits laptops et grands écrans */
.hero {
  position: relative;
  min-height: clamp(440px, 64vh, 600px);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background-image: url('/assets/pictures/banner/main-banner.png');
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(23,28,46,0.58)   27.638%,
    rgba(23,28,46,0.38)   55.375%,
    rgba(167,111,95,0.22) 84.961%,
    rgba(255,247,240,0.04) 112.7%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 88px 65px 60px;
  max-width: 800px;
}

.hero-eyebrow {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}

.hero-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.hero-chip {
  padding: 6px 13px;
  border: 1px solid rgba(255,247,240,0.5);
  border-radius: 20px;
  background: rgba(255,247,240,0.14);
  font-size: 12px;
  letter-spacing: 0.48px;
  color: rgba(255,247,240,0.95);
}

.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}

.hero-desc {
  font-size: 18px;
  color: var(--cream);
  margin-bottom: 40px;
  max-width: 560px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 1.75rem;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-full);
  border: none;
  box-shadow: 0 2px 8px rgba(55,106,183,0.20);
  transition: background 0.15s, box-shadow 0.15s;
}

.btn-hero-primary:hover {
  background: #2a5ca6;
  box-shadow: 0 6px 16px rgba(55,106,183,0.28);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 1.75rem;
  background: var(--orange);
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(255,169,89,0.22);
  transition: background 0.15s, box-shadow 0.15s;
}

.btn-hero-secondary:hover {
  background: #f09040;
  box-shadow: 0 6px 16px rgba(255,169,89,0.32);
}

.scroll-down {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  animation: scrollBounce 2.2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* ──────────────── Services ──────────────── */
.services {
  background: #fff;
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}

.services-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.services-title {
  font-size: clamp(1.8rem, 3vw, 2.25rem);
  margin-bottom: 12px;
}

.services-bar {
  width: 80px;
  height: 4px;
  background: var(--orange);
  border-radius: 2px;
  margin: 0 auto 22px;
}

.services-lead {
  max-width: 580px;
  margin: 0 auto 44px;
  font-size: 16px;
  color: var(--body);
  line-height: 1.65;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
}

/* ── Offer cards (homepage services) ── */
.offer-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 28px rgba(23,28,46,0.12);
}
.offer-card--blue   { border-color: var(--border-blue); }
.offer-card--green  { border-color: var(--border-green); }
.offer-card--yellow { border-color: var(--border-yellow); }

.offer-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.offer-chip--blue   { background: var(--blue-light); }
.offer-chip--green  { background: var(--green-light); }
.offer-chip--yellow { background: var(--orange-light); }

.offer-title {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.offer-desc {
  font-size: 13px;
  color: var(--body);
  line-height: 1.55;
  margin-bottom: 16px;
}
.offer-features {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
}
.offer-feature {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 13px;
  color: var(--body);
  line-height: 1.45;
}
.offer-feature::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}
.offer-card--blue   .offer-feature::before { background: var(--blue); }
.offer-card--green  .offer-feature::before { background: #2e7040; }
.offer-card--yellow .offer-feature::before { background: var(--orange); }

.offer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  text-decoration: none;
  color: #fff;
  align-self: flex-start;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s, filter 0.18s;
}
.offer-cta svg { flex-shrink: 0; transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.offer-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.18); filter: brightness(1.08); }
.offer-cta:hover svg { transform: translateX(4px); }
.offer-cta--blue   { background: var(--blue); }
.offer-cta--green  { background: #2e7040; }
.offer-cta--yellow { background: var(--orange); color: #fff; }

/* ──────────────── Approche ──────────────── */
.approche {
  background: #fff;
  padding: 88px 0;
}

.approche-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}


.eyebrow {
  font-size: 16px;
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
}

.cta .eyebrow { color: var(--brown); }

.approche-title {
  font-size: clamp(1.8rem, 3vw, 2.25rem);
  margin-bottom: 18px;
}

.approche-body {
  font-size: 18px;
  color: var(--body);
  max-width: 460px;
  margin-bottom: 36px;
  line-height: 1.55;
}

.apc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.apc-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 27px;
  box-shadow: var(--shadow);
}

.apc-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.apc-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex-shrink: 0;
}

.apc-chip--orange { background: var(--orange-light); }
.apc-chip--blue   { background: var(--blue-light); }

.apc-icon-img {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

.apc-tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
  font-family: 'Inter', sans-serif;
}

.apc-tag--orange { color: var(--brown); }
.apc-tag--blue   { color: var(--blue); }

.apc-name {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  color: var(--navy);
  display: block;
}

.apc-desc {
  font-size: 14px;
  color: var(--body);
  margin-bottom: 14px;
  line-height: 1.5;
}

.apc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--body);
}

.apc-list li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.apc-list--orange li::before { background: var(--orange-light); color: var(--brown); }
.apc-list--blue   li::before { background: var(--blue-light);   color: var(--blue); }

/* ──────────────── Showcase card ──────────────── */
.approche-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: start;
}


.showcase-wrap {
  width: min(100%, 460px);
  margin-top: clamp(-60px, -5vw, -24px);
  display: flex;
  flex-direction: column;
}


/* Étiquette posée au-dessus de la vitrine : invite discrète et soignée à
   explorer les réalisations, avec une flèche qui pointe vers les étagères. */
.showcase-sticker {
  align-self: center;
  max-width: 100%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
}

.showcase-sticker-text {
  padding: 8px 18px;
  background: var(--cream);
  border: 1.5px dashed var(--yellow);
  border-radius: 999px;
  color: var(--brown);
  font-family: 'Sora', sans-serif;
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 4px 12px rgba(23,28,46,0.06);
}

.showcase-sticker-arrow {
  width: 18px;
  height: 18px;
  color: var(--yellow);
  animation: showcase-sticker-bob 1.9s ease-in-out infinite;
}

@keyframes showcase-sticker-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-sticker-arrow { animation: none; }
}

.showcase {
  width: 100%;
  position: relative;
}

.showcase-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 32px rgba(23,28,46,0.12));
}

/* Objets-projets posés sur la nouvelle étagère 595×520.
   Les top/width sont en % du meuble, pour garder les bases calées quand la
   vitrine change de taille. */
.vitrine-item {
  position: absolute;
  display: block;
  transform: translateX(-50%);
  cursor: pointer;
  text-decoration: none;
  /* Le survol ne fait que TRANSLATER (pas de scale) : l'image n'est jamais
     ré-échantillonnée -> elle reste parfaitement nette. Courbe légèrement
     rebondie pour un décollage vivant. */
  transition: transform .42s cubic-bezier(.34, 1.32, .46, 1);
  z-index: 2;
}

.vitrine-item img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 5px rgba(23,28,46,0.28));
  transition: filter .42s ease;
}

/* Survol/focus : l'objet décolle de l'étagère et son ombre s'étale + s'adoucit.
   PAS de scale ni de will-change (un scale upscalerait le rendu rasterisé du
   filtre drop-shadow = flou ; c'était la cause du flou au survol). */
.vitrine-item:hover,
.vitrine-item:focus-visible {
  transform: translateX(-50%) translateY(-9px);
  z-index: 5;
  outline: none;
}
.vitrine-item:hover img,
.vitrine-item:focus-visible img {
  filter:
    drop-shadow(0 13px 13px rgba(23,28,46,0.24))
    drop-shadow(0 4px 6px rgba(23,28,46,0.16));
}
.vitrine-item:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 6px;
  border-radius: 8px;
}

/* left = centre de l'objet (recentré via translateX(-50%)), top = bord haut. */
/* Étagère HAUTE */
.vitrine-item--scratch {
  width: 16%;
  left: 24%;
  top: 1.8%;
}
.vitrine-item--globe {
  width: 14.8%;
  left: 51.5%;
  top: 3.3%;
}
.vitrine-item--judoka {
  width: 9.6%;
  left: 77%;
  top: 1.7%;
}
/* Étagère BASSE */
.vitrine-item--tortue {
  width: 19.1%;
  left: 24%;
  top: 58.4%;
}
.vitrine-item--meeple {
  width: 15.4%;
  left: 52%;
  top: 53.4%;
}
.vitrine-item--lunettes {
  width: 18.7%;
  left: 79%;
  top: 61.5%;
}

@media (prefers-reduced-motion: reduce) {
  .vitrine-item { transition: filter .2s ease; }
  .vitrine-item:hover,
  .vitrine-item:focus-visible { transform: translateX(-50%) translateY(-5px); }
}

.showcase-label {
  width: min(100% - 104px, 356px);
  align-self: center;
  margin: -2px 0 0;
  padding: 12px 16px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.showcase-label-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 1;
}

.showcase-label-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brown);
}

.showcase-label p {
  margin: 0;
  color: var(--navy);
  font-family: 'Sora', sans-serif;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 700;
  line-height: 1.25;
}

.showcase-label-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
  /* séparateur discret entre le texte et le logo */
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

/* ──────────────── CTA Projet ──────────────── */
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(104deg, #fff7f0 0%, #fff0dc 58%, #f7ede4 100%);
  padding: 88px 0;
}

.cta-plane-left {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
  background: rgba(255,169,89,0.28);
  pointer-events: none;
}

.cta-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.cta-glow--orange {
  width: 300px;
  height: 300px;
  background: rgba(255,169,89,0.34);
  right: 60px;
  top: -120px;
}

.cta-glow--green {
  width: 220px;
  height: 220px;
  background: rgba(120,186,135,0.20);
  right: 0;
  top: 330px;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.cta-text { padding-top: 24px; min-width: 0; }

.cta-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 10px 0 20px;
  line-height: 1.1;
  color: var(--navy);
}

.cta-lead {
  font-size: 16px;
  line-height: 1.7;
  color: #394052;
  max-width: 38ch;
  margin: 0 0 24px;
}

.cta-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #394052;
}

.cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255,169,89,0.22);
  border-radius: 50%;
  font-size: 13px;
  color: var(--brown);
  flex-shrink: 0;
}

/* Form card */
.cta-form-card {
  background: rgba(255,247,240,0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 32px);
  box-shadow: 0 32px 48px rgba(0,0,0,0.28);
  width: min(100%, 448px);
  justify-self: end;
}

.form-title {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 8px;
}

.form-sub {
  font-size: 14px;
  color: rgba(57,64,82,0.72);
  margin-bottom: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-field span {
  font-size: 12px;
  font-weight: 600;
  color: rgba(23,28,46,0.86);
}

.form-field input,
.form-field textarea {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(23,28,46,0.1);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--navy);
  outline: none;
  width: 100%;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(57,64,82,0.56);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,169,89,0.18);
}

.form-submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.btn-submit {
  background: var(--orange);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  padding: 0 1.6rem;
  height: 44px;
  border-radius: 22px;
  box-shadow: 0 8px 12px rgba(255,169,89,0.2);
  transition: background 0.15s, box-shadow 0.15s;
}

.btn-submit:hover {
  background: #f0983c;
  box-shadow: 0 10px 16px rgba(255,169,89,0.3);
}

/* ──────────────── Clients band ──────────────── */
.clients-band {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid rgba(23,28,46,0.14);
  padding: clamp(40px, 6vw, 72px) 0;
  overflow: hidden;
}
.clients-head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
  padding: 0 var(--gutter);
}
.clients-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--brown);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: 'Inter', sans-serif;
}
.clients-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--navy);
  margin: 0;
  font-weight: 700;
}
.clients-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  /* Fallback sans JS : défilement CSS continu (la pause au hover est gérée
     en JS via la Web Animations API, voir clientsMarquee.js). */
  animation: clients-scroll 42s linear infinite;
}
/* Quand le JS prend la main (WAAPI), on coupe l'animation CSS pour ne pas
   piloter `transform` à deux endroits. */
.clients-track.is-interactive { animation: none; }
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.client-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(28px, 5vw, 56px);
  flex-shrink: 0;
  height: clamp(54px, 7vw, 76px);
  text-decoration: none;
}
.client-item img {
  height: 100%;
  width: auto;
  max-width: clamp(140px, 18vw, 220px);
  object-fit: contain;
  filter: grayscale(1) opacity(0.42);
  transition: filter 0.3s ease;
  pointer-events: none;
}
.client-item:hover img {
  filter: grayscale(0) opacity(1);
}
.clients-track a[href*="cartes-interactives"] img {
  transform: scale(1.45);
}
/* ──────────────── Footer ──────────────── */
.site-footer {
  background: var(--navy);
  padding: 48px 0 0;
}

.footer-body {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  display: grid;
  grid-template-columns: minmax(260px, 333px) 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.footer-logo {
  height: 44px;
  width: auto;
  margin-bottom: 16px;
}

.footer-tagline {
  font-size: 15px;
  color: rgba(255,247,240,0.72);
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 300px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,247,240,0.05);
  border: 1px solid rgba(255,247,240,0.22);
  color: rgba(255,247,240,0.72);
  transition: background 0.2s, color 0.2s;
}

.footer-social-link:hover {
  background: rgba(255,169,89,0.18);
  border-color: rgba(255,169,89,0.5);
  color: var(--orange);
}

.footer-social-link svg { width: 16px; height: 16px; }

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-left: 48px;
  align-self: start;
}

.footer-col-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: 'Inter', sans-serif;
}

.footer-col-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col-links a,
.footer-col-links p {
  font-size: 14px;
  color: rgba(255,247,240,0.72);
  margin: 0;
  transition: color 0.15s;
}

.footer-col-links a:hover { color: rgba(255,247,240,1); }

.footer-address {
  display: flex;
  align-items: center;
  gap: 7px;
}

.footer-legal {
  border-top: 1px solid rgba(255,247,240,0.1);
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-legal p,
.footer-legal a {
  font-size: 13px;
  color: rgba(255,247,240,0.52);
  margin: 0;
}

.footer-legal a { color: rgba(255,247,240,0.4); transition: color 0.15s; }
.footer-legal a:hover { color: rgba(255,247,240,0.75); }

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ── Pages légales ── */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px var(--gutter) 80px;
}

.legal-content h2 {
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  color: var(--navy);
  margin: 2.5rem 0 0.6rem;
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content h3 {
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  color: var(--navy);
  margin: 1.6rem 0 0.4rem;
}

.legal-content p,
.legal-content li {
  font-size: 15px;
  color: var(--body);
  line-height: 1.72;
  margin-bottom: 0.7rem;
}

.legal-content .legal-note {
  font-size: 13.5px;
  color: var(--brown);
  background: var(--orange-light);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  margin: 0.4rem 0 1rem;
}

.legal-content ul {
  padding-left: 1.4rem;
  margin-bottom: 0.75rem;
}

.legal-content a { color: var(--blue); }

.legal-content strong {
  color: var(--navy);
  font-weight: 600;
}

.legal-info-block {
  background: rgba(23,28,46,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 1.5rem;
}

.legal-info-block p { margin-bottom: 0.35rem; }
.legal-info-block p:last-child { margin-bottom: 0; }

/* ──────────────── Responsive ──────────────── */

/* ─ 1 024 px : tablette paysage ─ */
@media (max-width: 1024px) {
  .header-inner { padding: 0 clamp(1rem, 3vw, 2rem); }

  .approche-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .approche-visual { align-items: center; }
  .showcase-wrap {
    width: clamp(300px, 72%, 460px);
    margin: 0 auto;
  }

  .footer-body {
    grid-template-columns: 280px 1fr;
    gap: 40px;
  }
  .footer-cols { padding-left: 0; }
}

/* ─ 900 px : CTA en colonne, form centré ─ */
@media (max-width: 900px) {
  .cta-inner      { grid-template-columns: 1fr; }
  .cta-text       { padding-top: 0; }
  .cta-plane-left { display: none; }
  .cta-glow       { display: none; }
  .cta-form-card  { justify-self: center; } /* Évite l'alignement à droite hérité du desktop */

  .footer-body { grid-template-columns: 1fr; gap: 36px; }
}

/* ─ Landscape mobile (paysage téléphone) : hero court et padding réduit ─ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100vh; }
  .hero-content { padding-top: clamp(72px, 12vh, 96px); padding-bottom: clamp(24px, 8vh, 48px); }
  .scroll-down { display: none; } /* Trop d'encombrement vertical */
}

/* ─ 768 px : mobile ─ */
@media (max-width: 768px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .burger { display: flex; }
  /* Menu ouvert : le X flottant cède la place au bouton fermer du drawer */
  .nav.open ~ .burger { opacity: 0; pointer-events: none; }

  /* ── En-tête du drawer : logo + fermer ── */
  .nav .nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(23,28,46,0.08);
  }
  .nav-head-logo { height: 30px; width: auto; }
  .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid rgba(23,28,46,0.1);
    background: rgba(255,255,255,0.7);
    color: var(--navy);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease;
  }
  .nav-close:hover  { background: #fff; }
  .nav-close:active { transform: scale(0.94); }

  /* ── Drawer latéral droit ── */
  .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 380px);
    z-index: 95;
    background: rgba(255,247,240,0.99);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: -16px 0 48px rgba(23,28,46,0.16);
    padding: max(0.85rem, env(safe-area-inset-top)) clamp(1.25rem, 6vw, 1.75rem)
             max(1.5rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition:
      transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.3s ease,
      visibility 0.42s;
  }
  .nav.open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  .nav > a,
  .nav .nav-parent {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    padding: 16px 0;
    border-bottom: 1px solid rgba(23,28,46,0.07);
    border-radius: 0;
    text-align: left;
    background: none;
    letter-spacing: 0;
  }
  /* Retour tactile au tap */
  .nav > a:not(.nav-cta):active,
  .nav .nav-parent:active { background: rgba(23,28,46,0.04); }

  /* Entrée échelonnée — joue à chaque ouverture (l'en-tête reste fixe) */
  .nav.open > *:not(.nav-head) {
    opacity: 0;
    transform: translateX(18px);
    animation: navLinkIn 0.34s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  }
  .nav.open > *:nth-child(2) { animation-delay: 0.10s; }
  .nav.open > *:nth-child(3) { animation-delay: 0.15s; }
  .nav.open > *:nth-child(4) { animation-delay: 0.20s; }
  .nav.open > *:nth-child(5) { animation-delay: 0.25s; }
  .nav.open > *:nth-child(6) { animation-delay: 0.30s; }

  .nav .nav-item {
    width: 100%;
    display: block;
    position: relative;
  }
  .nav .nav-parent {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
  }
  /* Chevron = indicateur d'accordéon sur mobile */
  .nav .nav-chevron {
    display: block;
    width: 13px;
    height: 8px;
    transition: transform 0.26s ease;
  }
  .nav-parent.active .nav-chevron { margin-left: 0; }
  /* Dépliage = action neutre : seul le chevron tourne, aucune surbrillance */
  .nav-item.expanded .nav-chevron { transform: rotate(180deg); }
  .nav-item.expanded .nav-parent { border-bottom-color: transparent; }

  /* Repère de page courante : accolades {} sobres (comme le desktop) */
  .nav > a.active:not(.nav-cta),
  .nav .nav-parent.active { color: var(--blue); }

  /* Sur Services, les {} sont portées par le label (pas par le <a> flex) */
  .nav .nav-parent.active::before,
  .nav .nav-parent.active::after { content: none !important; display: none !important; }

  .nav > a.active:not(.nav-cta)::before,
  .nav > a.active:not(.nav-cta)::after,
  .nav .nav-parent.active .nav-parent-label::before,
  .nav .nav-parent.active .nav-parent-label::after {
    content: '' !important;
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    color: var(--orange);
    font-weight: 700;
  }
  .nav > a.active:not(.nav-cta)::before,
  .nav .nav-parent.active .nav-parent-label::before { content: '{\00a0' !important; }
  .nav > a.active:not(.nav-cta)::after,
  .nav .nav-parent.active .nav-parent-label::after  { content: '\00a0}' !important; }

  /* Accordéon : sous-pages Services */
  .nav .nav-dropdown {
    display: block;
    position: static;
    top: auto;
    left: auto;
    transform: none !important;
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.32s cubic-bezier(0.32, 0.72, 0, 1), padding 0.2s ease;
  }
  .nav-item.expanded .nav-dropdown {
    max-height: 360px;
    /* indenté à gauche → la carte se lit comme imbriquée sous Services */
    padding: 0.5rem 0 0.85rem 14px;
    transform: none !important;
  }
  .nav .nav-dropdown-inner {
    width: 100%;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(23,28,46,0.06);
    border-radius: 16px;
    box-shadow: none;
    padding: 0.4rem;
    gap: 0.15rem;
  }
  .nav .nav-drop-link {
    width: 100%;
    min-width: 0;
    display: flex !important;
    align-items: center;
    gap: 0.85rem;
    padding: 0.72rem 0.9rem !important;
    border-radius: 12px !important;
    color: var(--navy);
    background: transparent !important;
  }
  .nav .nav-drop-link:active,
  .nav .nav-drop-link:hover { background: rgba(23,28,46,0.05) !important; }
  .nav .nav-drop-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .nav .nav-drop-icon svg {
    width: 18px;
    height: 18px;
  }
  .nav .nav-drop-text {
    min-width: 0;
    gap: 3px;
  }
  .nav .nav-drop-text strong {
    font-size: 14px;
    line-height: 1.15;
  }
  .nav .nav-drop-text small {
    font-size: 12.5px;
    line-height: 1.2;
  }

  .nav .nav-cta {
    margin-left: 0;
    margin-top: auto;
    width: 100%;
    height: auto;
    justify-content: center;
    font-size: 16px;
    padding: 15px 24px;
    background: var(--blue);
    box-shadow: none;
    border-radius: var(--radius);
    border-bottom: 0;
  }
  .nav .nav-cta {
    gap: 8px;
    box-shadow: 0 6px 18px rgba(55,106,183,0.28);
  }
  .nav .nav-cta::after {
    content: '' !important;
    display: inline-block !important;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .nav .nav-cta:hover  { transform: none; }
  .nav a.active        { color: var(--blue); }
  .nav a.active::before,
  .nav a.active::after { color: var(--orange); }

  .nav-overlay { display: block; }

  /* Hero */
  .hero         { min-height: 520px; }
  .hero-content { padding: 72px 1.5rem 56px; max-width: 100%; }
  .hero-title   { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .hero-desc    { font-size: 15px; max-width: 100%; }
  .hero-actions { flex-direction: column; gap: 12px; }
  .btn-hero-primary,
  .btn-hero-secondary { width: 100%; justify-content: center; }

  /* Services */
  .services       { padding: 56px 0 64px; }
  .services-inner { padding: 0 1.25rem; }
  .services-grid  { grid-template-columns: 1fr; gap: 12px; }

  /* Approche */
  .approche       { padding: 56px 0; }
  .approche-inner { padding: 0 1.25rem; gap: 32px; }
  .approche-body  { font-size: 16px; margin-bottom: 28px; }
  .apc-grid       { grid-template-columns: 1fr; }
  .showcase-wrap  { width: 100%; max-width: 420px; }
  .showcase-label {
    gap: 12px;
    padding: 11px 15px;
    border-radius: 15px;
    width: min(100% - 36px, 340px);
    margin: -2px 0 0;
  }
  .showcase-label p { font-size: 13px; }
  .showcase-label-icon { width: 32px; height: 32px; padding-left: 11px; }

  /* CTA */
  .cta           { padding: 56px 0; }
  .cta-inner     { padding: 0 1.25rem; gap: 32px; }
  .cta-title     { font-size: clamp(1.75rem, 6vw, 2.25rem); }
  .cta-form-card { padding: 28px 22px; }

  /* Footer */
  .footer-cols  { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-body  { padding: 0 1.25rem 32px; }
  .footer-legal {
    padding: 16px 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-legal-links { gap: 16px; }
}

/* ─ 600 px : petits mobiles ─ */
@media (max-width: 600px) {
  .hero-chips { gap: 6px; }
  .hero-chip  { font-size: 11px; padding: 5px 11px; }

  .services-grid { grid-template-columns: 1fr; }
  .apc-grid      { grid-template-columns: 1fr; }

  .cta           { padding: 48px 0; }
  .cta-inner     { gap: 24px; }
  .cta-form-card { padding: 22px 16px; }
  .cta-bullets li { font-size: 13px; }

  .footer-social { flex-wrap: wrap; }
}

/* ─ 480 px : très petits écrans ─ */
@media (max-width: 480px) {
  .hero-content { padding: 60px 1.25rem 48px; }
  .hero-actions { gap: 10px; }

  .apc-card { padding: 20px; }

  .cta-title { font-size: clamp(1.6rem, 8vw, 1.9rem); }
  .form-row  { grid-template-columns: 1fr; }
  .cta-icon  { width: 24px; height: 24px; font-size: 11px; }

  .showcase-wrap { max-width: 100%; }
  .showcase-sticker-text { padding-inline: 14px; }
  .showcase-label { width: min(100% - 24px, 340px); }

  .footer-cols        { grid-template-columns: 1fr; }
  .footer-social-link { width: 36px; height: 36px; }
}

/* ─ 380 px : iPhone SE & petits Androids ─ */
@media (max-width: 380px) {
  :root { --nav-h: 60px; }

  .hero-content { padding: 52px 1rem 44px; }
  .hero-title   { font-size: 1.65rem; }
  .hero-desc    { font-size: 14px; }

  .services-inner { padding: 0 1rem; }

  .cta-title     { font-size: 1.5rem; }
  .cta-inner     { padding: 0 1rem; }

  .apc-card { padding: 16px; }

  .footer-body  { padding: 0 1rem 24px; }
  .footer-legal { padding: 12px 1rem; }
  .footer-cols  { gap: 20px; }
}

@keyframes navLinkIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ──────────────── Accessibility ──────────────── */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ──────────────── Hero entrance animations ──────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.hero-eyebrow { animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.1s  both; }
.hero-chips   { animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
.hero-title   { animation: heroFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.4s  both; }
.hero-desc    { animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both; }
.hero-actions { animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.7s  both; }

/* ──────────────── Scroll reveal ──────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.reveal--left  { transform: translateX(-28px); }
.reveal.reveal--right { transform: translateX(28px); }

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }
.reveal[data-delay="4"] { transition-delay: 0.48s; }
.reveal[data-delay="5"] { transition-delay: 0.60s; }

/* Sécurité : si le JS ne charge pas, l'IntersectionObserver ne tourne pas et
   les éléments .reveal resteraient invisibles. On les rend visibles par défaut
   dès que le JS est absent (la classe .js est posée par app.js au démarrage). */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ──────────────── CTA form status ──────────────── */
.cta-form-status {
  font-size: 13px;
  font-weight: 500;
  margin-top: 10px;
  min-height: 1.4em;
  text-align: right;
  transition: color 0.2s;
}
.cta-form-status.success { color: #2e7040; }
.cta-form-status.error   { color: #b95e65; }

/* ──────────────── Submit button loading state ──────────────── */
.btn-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
}

/* ──────────────── Transitions de page ──────────────── */
main {
  animation: pageFadeIn 0.28s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.page-leaving main {
  animation: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

/* Entrée staggerée des sous-pages */
.page-hero .eyebrow   { animation: heroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
.page-hero h1         { animation: heroFadeUp 0.7s  cubic-bezier(0.16, 1, 0.3, 1) 0.2s  both; }
.page-hero .page-lead { animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both; }