/* =========================================================
   Digital Media Africa — refonte 2026
   Provisional tokens — see ../DESIGN.md. Swap on brand delivery.
   ========================================================= */

:root {
  --ink: #0B0D10;
  --ink-70: rgba(11, 13, 16, 0.7);
  --paper: #FAFAF8;
  --paper-alt: #F1F0EC;
  --accent: #DA6A27;
  --accent-dim: #FBE7D9;
  --accent-ink: #FFFFFF;
  --line: rgba(11, 13, 16, 0.12);
  --line-strong: rgba(11, 13, 16, 0.22);
  --muted: #6B6E76;

  /* Palette secondaire issue du logo (icônes, accents rotatifs) */
  --logo-maroon: #6C3C39;
  --logo-red: #932521;
  --logo-red-orange: #BC342A;
  --logo-gold: #F8B027;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-line: rgba(255, 255, 255, 0.16);
  /* Verre clair (cartes sur fond --paper) */
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-bg-soft: rgba(255, 255, 255, 0.32);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-blur: 18px;

  --font-display: "Unbounded", "Segoe UI", sans-serif;
  --font-body: "Public Sans", "Segoe UI", sans-serif;

  --container: 1600px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

p { margin: 0; color: var(--ink-70); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { border-top: 1px solid var(--line); }
.band--alt { background: var(--paper-alt); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.585rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow--accent { color: var(--accent); }
/* Titre "Solutions" de la section Solutions (accueil) : même typo/taille
   que le H1 de la Hero, en rouge-orangé du logo. */
.solutions-title-hero-style {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.16;
  font-size: clamp(25.6px, 2.8vw, 34.4px);
  color: #6F3E3C;
}
/* #solutions-preview/#agence .section-head .eyebrow--accent (plus bas dans
   la feuille) est plus spécifique et écraserait la règle ci-dessus : on la
   re-déclare ici avec une sélectivité au moins égale pour que ce titre
   garde bien la typo/taille du H1 de la Hero. */
#solutions-preview .section-head .eyebrow--accent.solutions-title-hero-style,
#agence .section-head .eyebrow--accent.solutions-title-hero-style {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.16;
  font-size: clamp(25.6px, 2.8vw, 34.4px);
  color: #6F3E3C;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.741rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 10px 26px -14px rgba(11, 13, 16, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.35s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  white-space: nowrap;
}
/* Reflet "verre liquide" : dégradé subtil sur le haut du bouton */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(11, 13, 16, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }

.sol-explore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.741rem;
  color: var(--accent);
  text-decoration: none;
}
.sol-explore-arrow { display: inline-block; transition: transform 0.25s var(--ease-out); }
.sol-explore:hover .sol-explore-arrow { transform: translateX(4px); }

.product-cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }

/* ---------- Header (carte flottante arrondie, façon digitalmediafrica.com) ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  border: none;
  border-radius: 0;
  /* Transparent en haut de page : le header se fond dans le fond de la
     Hero (même couleur papier + blobs) au lieu d'être une barre séparée.
     Il redevient plein (papier + ombre) au scroll, une fois au-dessus
     d'autres sections, pour rester lisible. Pas de transform ici : un
     ancêtre transformé devient le "containing block" de ses descendants
     position:fixed (ex. .mobile-nav), ce qui casserait le panneau de menu
     plein écran. */
  background: transparent;
  box-shadow: none;
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.site-header.scrolled {
  background: var(--paper);
  box-shadow: 0 4px 20px rgba(11, 13, 16, 0.25);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  padding-inline: 1.875rem;
  max-width: none;
  position: relative;
}
.header-actions { margin-left: auto; }
/* Zone de recouvrement Hero / cartes Étape (partagée par les deux sections). */
:root { --ov: clamp(80px, 8.7vw, 130px); }
@media (max-width: 1180px) { :root { --ov: 5.5rem; } }
/* ---------- Hero (photo plein écran, header transparent intégré) ---------- */
.hero-photo-banner {
  /* --hero-h : hauteur d'origine du Hero (texte et photo restent calés
     dessus). --ov : zone ajoutée en bas, où remontent les cartes Étape. */
  --hero-h: clamp(560px, 54vw, 720px);
  position: relative;
  width: 100%;
  background: var(--paper);
  overflow: hidden;
  min-height: calc(var(--hero-h) + var(--ov));
}
.hero-photo-banner-inner {
  display: none;
}
/* Fond "blobs" : taches de couleur floues façon glassmorphism, dans les
   couleurs de la marque, derrière le texte et le globe. */
.hero-blob {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.hero-blob-1 {
  width: clamp(220px, 22vw, 380px);
  height: clamp(220px, 22vw, 380px);
  background: var(--logo-gold);
  opacity: 0.5;
  top: -8%;
  left: -6%;
}
.hero-blob-2 {
  width: clamp(280px, 26vw, 460px);
  height: clamp(280px, 26vw, 460px);
  background: var(--logo-maroon);
  opacity: 0.32;
  bottom: -14%;
  right: 8%;
}
.hero-blob-3 {
  width: clamp(180px, 16vw, 280px);
  height: clamp(180px, 16vw, 280px);
  background: var(--accent);
  opacity: 0.38;
  top: 38%;
  right: -6%;
}
.hero-photo-banner-img {
  display: block;
  width: 100%;
  height: auto;
}
/* Texte (H1, description, CTA) posé sur la photo. */
.hero-photo-banner-content {
  position: absolute;
  z-index: 3;
  left: clamp(8rem, 25vw, 18rem);
  right: 50%;
  top: calc(var(--hero-h) * 0.58);
  transform: translateY(-50%);
  max-width: 640px;
  min-width: 280px;
}
.hero-photo-banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.16;
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  color: var(--ink);
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.hero-photo-banner-desc {
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-70);
  max-width: 36ch;
  margin: 0 0 1.7rem;
}
.hero-photo-banner-cta {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.65rem 1.3rem;
  font-size: 13.6px;
  border-radius: 999px;
  box-shadow: 0 12px 24px -14px rgba(218, 106, 39, 0.55);
  transition: background 0.25s var(--ease-out);
}
.hero-photo-banner-cta:hover { background: var(--ink); color: #fff; }
/* ---------- Globe 3D + cartes en orbite, à droite du Hero ---------- */
.hero-globe-wrap {
  position: absolute;
  z-index: 3;
  left: 47%;
  right: clamp(0.5rem, 2.5vw, 2rem);
  top: calc(var(--hero-h) * 0.56);
  transform: translateY(-50%);
  aspect-ratio: 1 / 1;
  max-width: 640px;
  max-height: calc(var(--hero-h) * 0.78);
  margin-inline: auto;
  pointer-events: none;
}
.hero-globe-stage {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 176, 39, 0.35), rgba(218, 106, 39, 0.12) 55%, transparent 72%);
  filter: blur(0.2px);
}
.hero-photo-slot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1.2);
}
/* ---------- Petites cartes flottantes autour de la photo ---------- */
.photo-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}
.photo-lines path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 2 2.4;
  stroke-linecap: round;
  opacity: 0.75;
}
.photo-lines marker path { fill: var(--accent); stroke: none; opacity: 0.85; }
.photo-cards {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.photo-card {
  pointer-events: auto;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border-radius: 999px;
  padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  box-shadow: 0 14px 30px -16px rgba(11, 13, 16, 0.35);
  text-decoration: none;
  white-space: nowrap;
  animation: photo-card-float 5.5s ease-in-out infinite;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.photo-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 38px -14px rgba(11, 13, 16, 0.42);
  z-index: 5;
}
.photo-card-icon {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c);
  color: #fff;
}
.photo-card-icon svg { width: 16px; height: 16px; }
.photo-card-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--ink);
}
@keyframes photo-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-card { animation: none; }
}
/* Chaque carte est alignée avec le niveau de marche correspondant de
   l'escalier (CROISSANCE, CONFIANCE, STRATÉGIE, VISIBILITÉ). */
.pc-1 { top: 62%; left: -4%; animation-delay: 0s; }   /* niveau CROISSANCE */
.pc-2 { top: 92%; left: -8%; animation-delay: 0.6s; } /* niveau VISIBILITÉ */
.pc-3 { top: 62%; right: -6%; animation-delay: 1.1s; } /* niveau CROISSANCE */
.pc-4 { top: 72%; right: -10%; animation-delay: 1.7s; } /* niveau CONFIANCE */
.pc-5 { top: 82%; right: -4%; animation-delay: 2.2s; }  /* niveau STRATÉGIE */
@media (max-width: 1180px) {
  .photo-card { padding: 0.35rem 0.9rem 0.35rem 0.35rem; }
  .photo-card-icon { width: 1.8rem; height: 1.8rem; }
  .photo-card-label { font-size: 0.7rem; }
}
@media (max-width: 760px) {
  .photo-card-label { font-size: 0.62rem; }
  .photo-card-icon { width: 1.5rem; height: 1.5rem; }
  .photo-card-icon svg { width: 12px; height: 12px; }
  .photo-card { padding: 0.3rem 0.7rem 0.3rem 0.3rem; gap: 0.4rem; }
}
.hero-globe-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* En dessous de 1180px : plus de place pour poser le texte à gauche et le
   globe à droite, donc tout s'empile en flux normal (texte, puis globe,
   puis les cartes en ligne qui s'enroulent) plutôt que d'être masqué. */
@media (max-width: 1180px) {
  .hero-photo-banner-content {
    position: static;
    transform: none;
    left: auto;
    right: auto;
    top: auto;
    max-width: min(640px, 92%);
    margin-inline: auto;
    padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) 0;
    text-align: center;
  }
  .hero-photo-banner-desc,
  .hero-photo-banner-title { margin-inline: auto; }
  /* Le globe et ses cartes gardent leur mise en scène "en orbite" : le
     wrap devient un carré centré dans le flux (au lieu d'être positionné à
     droite de la Hero), et le globe + les cartes restent positionnés en
     absolu à l'intérieur, disposés tout autour de la Terre comme sur
     desktop, juste à une échelle réduite. */
  .hero-globe-wrap {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: min(88vw, 460px);
    max-width: none;
    max-height: none;
    aspect-ratio: 1 / 1;
    margin: 2.5rem auto 0;
  }
  /* La photo de fond a été retirée (à toutes les tailles) : sans elle,
     rien ne pousse plus le texte sous le header flottant fixe ici non
     plus, donc on rajoute la même marge de dégagement qu'en dessous de
     760px. */
  .hero-photo-banner {
    padding-top: 120px;
    padding-bottom: calc(var(--ov) + 2.2rem);
  }
}
@media (max-width: 760px) {
  .hero-photo-banner-content { max-width: min(30ch, 88%); }
  .hero-globe-wrap { width: min(84vw, 320px); margin-top: 2rem; }
  /* Sur téléphone, la photo devient un fond décoratif derrière le texte
     plutôt qu'un bloc photo séparé (desktop/tablette non concernés). Comme
     l'image ne pousse plus le texte vers le bas, on rajoute la marge qui
     dégage le header flottant fixe (même valeur que les autres heros mobiles
     du site, ex. .hero-poster). */
  .hero-photo-banner {
    padding-top: 120px;
  }
  .hero-photo-banner-inner {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero-photo-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hero-photo-banner-content {
    position: relative;
    z-index: 2;
  }
}

/* ---------- Notre méthode : grandes cartes verticales "étapes" ---------- */
/* Les cartes remontent dans le bas du Hero (zone --ov) et pendent sous la
   ligne du Hero, dans le haut de la section Agence : le fond est le même
   des deux côtés, donc plus de séparation nette, les cartes font le lien. */
#methode {
  position: relative;
  z-index: 6;
  background: none;
  margin-top: calc(var(--ov) * -1);
  padding: 0 0 clamp(1rem, 2vw, 2rem);
  counter-reset: step;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem clamp(1rem, 1.8vw, 1.6rem);
  align-items: start;
}
.step-card {
  --lift: 0px;
  position: relative;
  counter-increment: step;
  min-height: clamp(300px, 28vw, 370px);
  margin-top: var(--lift);
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2vw, 1.8rem) clamp(1.1rem, 1.7vw, 1.6rem);
  border-radius: clamp(20px, 2.2vw, 30px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, color-mix(in srgb, var(--c) 13%, transparent) 100%),
    linear-gradient(165deg, #F7F6F3 0%, #ECEBE8 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.95),
    16px 26px 44px -12px rgba(11, 13, 16, 0.2),
    -10px -10px 26px rgba(255, 255, 255, 0.95),
    0 40px 40px -34px color-mix(in srgb, var(--c) 60%, rgba(11, 13, 16, 0.4));
  /* "translate" est indépendant du "transform" du système .reveal. */
  animation: step-float 6s ease-in-out infinite;
}
.step-card:nth-child(1) { --lift: 0px; animation-delay: 0s; }
.step-card:nth-child(2) { --lift: 56px; animation-delay: 0.8s; }
.step-card:nth-child(3) { --lift: 22px; animation-delay: 1.6s; }
.step-card:nth-child(4) { --lift: 78px; animation-delay: 2.4s; }
@keyframes step-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@media (prefers-reduced-motion: reduce) {
  .step-card { animation: none; }
}
.step-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 0;
}
.step-badge {
  flex: 0 0 auto;
  width: clamp(2.8rem, 4vw, 3.6rem);
  height: clamp(2.8rem, 4vw, 3.6rem);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ECEBE8;
  color: var(--c);
  box-shadow: inset 3px 3px 7px rgba(11, 13, 16, 0.13), inset -3px -3px 7px rgba(255, 255, 255, 0.95);
  margin-bottom: clamp(1.1rem, 2vw, 1.7rem);
}
.step-badge svg { width: 42%; height: 42%; }
.step-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c);
  margin-bottom: 0.4rem;
}
.step-label b { font-size: 0.68rem; margin-left: 0.15rem; }
.step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  margin: 0 0 0.6rem;
  color: var(--ink);
}
.step-text {
  position: relative;
  z-index: 1;
  font-size: clamp(0.76rem, 0.95vw, 0.88rem);
  line-height: 1.55;
  color: var(--ink-70);
  min-height: 0;
}
/* Grand numéro d'étape en filigrane, en pied de carte. */
.step-corner {
  display: block;
  position: absolute;
  right: 0.9rem;
  bottom: -0.25em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 9vw, 8.5rem);
  line-height: 1;
  color: var(--c);
  opacity: 0.13;
  pointer-events: none;
}
.step-corner::before { content: counter(step); }
@media (max-width: 900px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .step-card { min-height: clamp(280px, 46vw, 340px); }
  .step-card:nth-child(1) { --lift: 0px; }
  .step-card:nth-child(2) { --lift: 44px; }
  .step-card:nth-child(3) { --lift: 0px; }
  .step-card:nth-child(4) { --lift: 44px; }
}
@media (max-width: 560px) {
  .steps-grid { gap: 1rem 0.75rem; }
  .step-card { min-height: 290px; padding: 1.1rem 0.95rem; }
  .step-card:nth-child(2), .step-card:nth-child(4) { --lift: 34px; }
  .step-text { font-size: 0.72rem; }
}

/* ---------- Hashtags (façon weshore.com) ---------- */
.hashtag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.9rem;
}
.hashtag-row span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68rem;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
}

/* ---------- À propos (section Agence) : visuel en collage + texte ---------- */
#agence {
  position: relative;
  background: var(--paper);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  padding-top: clamp(4rem, 9vw, 6.5rem);
}
.about-visual {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1.02;
  margin-inline: auto;
}
/* Bloc marron décalé derrière la photo principale. */
.about-block {
  position: absolute;
  right: 2%;
  top: 6%;
  width: 62%;
  height: 84%;
  border-radius: 30px 30px 30px 150px;
  background: linear-gradient(160deg, var(--logo-maroon) 0%, color-mix(in srgb, var(--logo-maroon) 70%, #000) 100%);
  transform: translate(7%, 5%);
}
.about-photo {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 30px 56px -28px rgba(11, 13, 16, 0.5);
}
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-photo--main {
  right: 2%;
  top: 6%;
  width: 62%;
  height: 84%;
  border-radius: 30px 30px 30px 150px;
}
.about-photo--round {
  left: 0;
  bottom: 4%;
  width: 46%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 8px solid var(--paper);
}
.about-award {
  position: absolute;
  left: 3%;
  top: 4%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem 0.75rem 0.75rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 40px -20px rgba(11, 13, 16, 0.4);
}
.about-award-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--logo-gold), var(--accent));
  color: #fff;
}
.about-award-icon svg { width: 1.3rem; height: 1.3rem; }
.about-award-text { display: flex; flex-direction: column; line-height: 1.15; }
.about-award-text b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
}
.about-award-text span { font-size: 0.74rem; color: var(--ink-70); }
.about-dots {
  position: absolute;
  z-index: 0;
  width: 92px;
  height: 92px;
  background-image: radial-gradient(circle, var(--accent) 2.2px, transparent 2.4px);
  background-size: 15px 15px;
  opacity: 0.55;
}
.about-dots--a { left: 4%; top: 30%; }
.about-dots--b { right: 0; bottom: -3%; width: 76px; height: 76px; background-image: radial-gradient(circle, var(--logo-maroon) 2.2px, transparent 2.4px); opacity: 0.4; }
.about-plane {
  position: absolute;
  z-index: 3;
  left: 40%;
  bottom: 2%;
  width: 3rem;
  height: 3rem;
  color: var(--accent);
  animation: about-plane 5s ease-in-out infinite;
}
@keyframes about-plane {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 8px -8px; rotate: 6deg; }
}
@media (prefers-reduced-motion: reduce) {
  .about-plane { animation: none; }
}
.about-content { position: relative; }
.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
}
.about-stars { color: var(--logo-gold); font-size: 0.8rem; letter-spacing: 0.15em; }
.about-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.1vw, 2.45rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--logo-maroon);
  margin: 0.8rem 0 1rem;
  max-width: 18ch;
  text-wrap: balance;
}
.about-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-70);
  max-width: 50ch;
  margin-bottom: 1.5rem;
}
.about-feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 34rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  border-radius: 14px;
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.about-feature-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
}
.about-feature-icon svg { width: 1.4rem; height: 1.4rem; }
.about-feature h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 0.2rem;
}
.about-feature p { font-size: 0.86rem; line-height: 1.5; color: var(--ink-70); margin: 0; }
.about-list {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.5rem;
  max-width: 34rem;
}
.about-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}
.about-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--logo-maroon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.about-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  text-decoration: none;
  box-shadow: 0 16px 28px -16px color-mix(in srgb, var(--accent) 80%, #000);
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.about-cta svg { width: 1rem; height: 1rem; transition: transform 0.25s var(--ease-out); }
.about-cta:hover { background: var(--logo-maroon); }
.about-cta:hover svg { transform: translateX(4px); }
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about-visual { max-width: 460px; }
}
@media (max-width: 480px) {
  .about-list { grid-template-columns: 1fr; }
  .about-award { padding: 0.55rem 0.9rem 0.55rem 0.55rem; }
  .about-award-text b { font-size: 1.1rem; }
}

/* Deux lignes (calquées sur le vrai visuel de marque, cercle retiré et
   repositionné pour tomber pile sur le cercle déjà présent dans la photo) :
   même cadrage (1536x1024) et même boîte que la photo, donc alignement
   pixel-perfect sur le cercle quelle que soit la largeur d'écran. */
.hero-photo-banner-lines-img {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 78%;
  max-width: 1400px;
  height: 100%;
  pointer-events: none;
}
/* Deux lignes qui sortent du cercle de la photo et montent au-dessus du
   Hero jusqu'à dépasser le header (z-index au-dessus du header pour que
   les lignes passent devant lui). */
.hero-photo-banner-riser {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 101;
  width: 78%;
  max-width: 1400px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hero-photo-banner-riser svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Motif décoratif à gauche (blob + cercle + points, repris du design de
   marque) : image dédiée, posée devant la photo pour qu'elle chevauche
   légèrement son bord gauche comme sur la maquette de référence. */
.hero-photo-banner-blob-img {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(260px, 32%, 480px);
  height: auto;
  display: block;
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero-photo-banner-blob-img { display: none; }
}
/* Forme décorative à gauche : blob orange à bord organique, cercle bordeaux
   au raccord, semis de points — écho du motif vague/cercle/points de la
   marque, pour occuper l'espace vide à gauche de la photo. */
.hero-photo-banner-blob {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 27%;
  height: 100%;
  background: var(--accent);
  border-radius: 0 58% 42% 0 / 0 46% 62% 0;
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 8px var(--logo-gold);
}
.hero-photo-banner-joint {
  position: absolute;
  left: calc(27% - 3.4rem);
  bottom: 12%;
  z-index: 3;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--logo-maroon);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 8px var(--logo-gold);
}
.hero-photo-banner-dots {
  position: absolute;
  left: 4%;
  bottom: 9%;
  z-index: 2;
  width: 150px;
  height: 52px;
  background-image: radial-gradient(circle, var(--accent) 2.3px, transparent 2.5px);
  background-size: 15px 15px;
}
@media (max-width: 900px) {
  .hero-photo-banner-blob,
  .hero-photo-banner-joint,
  .hero-photo-banner-dots { display: none; }
}
.logo {
  display: flex;
  align-items: center;
}
.logo-img {
  display: block;
  height: 52px;
  width: auto;
}
.footer-brand .logo {
  display: inline-flex;
  background: var(--paper);
  padding: 0.6rem 1rem;
  border-radius: 10px;
}
.footer-brand .logo .logo-img {
  height: 34px;
}
.nav-desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  flex: 1 1 auto;
  min-width: 0;
}
/* Fenêtres moyennes (juste au-dessus du menu mobile) : le logo agrandi et
   les 7 liens sont serrés, on resserre l'espacement pour éviter tout
   chevauchement avec le logo. */
@media (min-width: 761px) and (max-width: 1180px) {
  .nav-desktop { gap: 1.1rem; }
  .nav-desktop a { font-size: 13.8px; }
  .logo-img { height: 42px; }
}
.nav-desktop a {
  font-family: var(--font-display);
  font-size: 15.4px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out);
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right 0.3s var(--ease-out);
}
.nav-desktop a:hover { color: var(--ink); }
.nav-desktop a:hover::after,
.nav-desktop a.active::after { right: 0; }
.nav-desktop a.active { color: var(--ink); }

/* ---------- Sous-menus déroulants (Solutions / Produits) ----------
   Inspiré du menu de instrument.com/work : la liste de liens est cachée
   par défaut (display:none) et révélée en pur CSS au survol/focus ; chaque
   lien est une pilule qui "pop" en cascade (scale 0 -> 1.07 -> 1, délai
   croissant par lien), pas de fondu de panneau. */
.nav-drop { position: relative; }
.nav-drop-trigger {
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  margin: -0.3rem -0.7rem;
  transition: background-color 0.25s ease, color 0.25s var(--ease-out);
}
.nav-drop-trigger::after { display: none; }
.nav-drop:hover .nav-drop-trigger,
.nav-drop:focus-within .nav-drop-trigger,
.nav-drop.is-open .nav-drop-trigger {
  background: rgba(11, 13, 16, 0.1);
  color: var(--ink);
}
.nav-drop-panel {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  gap: 6px;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel,
.nav-drop.is-open .nav-drop-panel {
  display: flex;
}
.nav-drop-heading {
  font-family: var(--font-display);
  font-size: 10.24px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 13, 16, 0.4);
  white-space: nowrap;
  margin: 6px 0.7rem 0;
}
.nav-drop-heading:first-child { margin-top: 0; }
.nav-drop-panel a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 12.48px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  white-space: nowrap;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  opacity: 0;
  transform: scale(0);
  transform-origin: center top;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.nav-drop-panel a::after { display: none; }
.nav-drop-panel a:hover { background: var(--accent); }
.nav-drop:hover .nav-drop-panel a,
.nav-drop:focus-within .nav-drop-panel a,
.nav-drop.is-open .nav-drop-panel a {
  animation: navDropPop 0.3s ease-in-out forwards;
}
@keyframes navDropPop {
  0% { opacity: 0; transform: scale(0); }
  80% { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-drop-panel a { animation: none !important; opacity: 1; transform: scale(1); }
}
.nav-drop-chevron {
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 0.3rem;
  margin-bottom: 1px;
  transition: transform 0.2s ease;
}
.nav-drop:hover .nav-drop-chevron,
.nav-drop:focus-within .nav-drop-chevron,
.nav-drop.is-open .nav-drop-chevron { transform: rotate(225deg); margin-bottom: -2px; }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.tel-link { font-size: 14.4px; font-weight: 600; display: none; }
.btn-header-cta {
  background: #DA6A27;
  color: #fff;
  padding: 0.65rem 1.3rem;
  font-size: 13.6px;
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 12px 24px -14px rgba(218, 106, 39, 0.55);
}
.btn-header-cta:hover { background: var(--ink); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  border: none; background: none;
  padding: 0;
  position: relative;
  z-index: 10000;
  cursor: pointer;
}
.nav-toggle-bars {
  display: flex;
  width: 26px; height: 20px;
  flex-shrink: 0;
  flex-direction: column; justify-content: center; gap: 5px;
}
.nav-toggle-bars span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.35s cubic-bezier(.65,0,.35,1), opacity 0.2s ease;
  transform-origin: center;
}
.nav-toggle-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.4px;
  color: var(--ink);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Menu : panneau plein écran clair et centré (façon weshore.com) ---------- */
/* Le panneau glisse horizontalement depuis la droite (comme sur
   weshore.com), pas un simple fondu vertical. */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 100px 0 0 0;
  /* Glitch tech : fond noir profond + scanlines fines en surimpression. */
  background: #050505;
  overflow: hidden auto;
  z-index: 9999;
  padding: 1.6rem var(--gutter) 2rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: left;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(.65,0,.35,1), visibility 0s linear 0.8s;
}
.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.8s cubic-bezier(.65,0,.35,1);
}
.mobile-nav::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.05;
  background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
}
.mobile-nav::after {
  content: "[ SYSTEM.NAV_v2 ]";
  position: absolute; right: var(--gutter); bottom: 1.4rem; z-index: 1;
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: #2ec4ff;
  opacity: 0.7;
}

/* Deux colonnes : liens à gauche, contact/réseaux à droite (plan de site
   façon studio moderne, plutôt qu'une simple liste centrée). */
.mobile-nav-inner {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.mobile-nav-links > .mobile-nav-item {
  position: relative;
  display: flex; align-items: baseline; gap: 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: #3a3a3a;
  text-decoration: none;
  padding: 0.15rem 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease, color 0.15s ease, text-shadow 0.15s ease;
}
.mobile-nav-links > .mobile-nav-item::before {
  counter-increment: mnav;
  content: counter(mnav, decimal-leading-zero);
  font-family: "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.8rem;
  color: #2ec4ff;
  opacity: 0.6;
  transition: opacity 0.25s ease;
}
.mobile-nav-links { counter-reset: mnav; }
.mobile-nav-links > a.active {
  color: #fff;
  text-shadow: 2px 0 var(--accent), -2px 0 #2ec4ff;
}
.mobile-nav.is-open .mobile-nav-links > .mobile-nav-item { opacity: 1; transform: translateY(0); }
.mobile-nav-links > a:hover,
.mobile-nav-links > a:active,
.mobile-nav-group:hover > .mobile-nav-group-trigger {
  color: #fff;
  text-shadow: 2px 0 var(--accent), -2px 0 #2ec4ff;
}
.mobile-nav-links > a:hover::before,
.mobile-nav-group:hover > .mobile-nav-group-trigger::before { opacity: 1; }
.mobile-nav.is-open .mobile-nav-links > .mobile-nav-item:nth-child(1) { transition-delay: .08s; }
.mobile-nav.is-open .mobile-nav-links > .mobile-nav-item:nth-child(2) { transition-delay: .13s; }
.mobile-nav.is-open .mobile-nav-links > .mobile-nav-item:nth-child(3) { transition-delay: .18s; }
.mobile-nav.is-open .mobile-nav-links > .mobile-nav-item:nth-child(4) { transition-delay: .23s; }
.mobile-nav.is-open .mobile-nav-links > .mobile-nav-item:nth-child(5) { transition-delay: .28s; }
.mobile-nav.is-open .mobile-nav-links > .mobile-nav-item:nth-child(6) { transition-delay: .33s; }
.mobile-nav.is-open .mobile-nav-links > .mobile-nav-item:nth-child(7) { transition-delay: .38s; }

/* Colonne info : contact + réseaux, séparée par un fin trait vertical. */
.mobile-nav-info {
  position: relative; z-index: 1;
  flex: 0 0 auto;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding-left: clamp(2rem, 4vw, 3rem);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  transition-delay: .3s;
}
.mobile-nav.is-open .mobile-nav-info { opacity: 1; transform: translateY(0); }
.mobile-nav-info-label {
  font-family: "Courier New", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2ec4ff;
  margin-bottom: 0.2rem;
}
.mobile-nav-info-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mobile-nav-info-link:hover { color: #fff; }
.mobile-nav-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.mobile-nav-social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mobile-nav-social a:hover { background: #2ec4ff; border-color: #2ec4ff; color: #050505; }
@media (max-width: 900px) {
  .mobile-nav-inner { flex-direction: column; align-items: stretch; gap: 1.6rem; }
  .mobile-nav-info {
    width: auto;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-left: 0;
    padding-top: 1.4rem;
  }
}

/* ---------- Menu mobile : groupes déroulants (Solutions / Produits) ---------- */
.mobile-nav-group-trigger {
  appearance: none; border: none; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; letter-spacing: inherit;
  display: inline-flex; align-items: center; gap: 0.7rem;
  cursor: pointer;
}
.mobile-nav-group-trigger .mobile-nav-chevron {
  width: 11px; height: 11px; flex-shrink: 0;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform 0.3s var(--ease-out);
}
.mobile-nav-group.is-open .mobile-nav-group-trigger .mobile-nav-chevron { transform: rotate(-135deg); }
.mobile-nav-group-trigger.active { color: var(--accent); }

.mobile-nav-sub {
  flex: 0 0 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  padding-left: 2.4rem;
  transition: max-height 0.4s var(--ease-out), opacity 0.3s ease, margin-top 0.4s var(--ease-out);
}
.mobile-nav-group.is-open .mobile-nav-sub {
  max-height: 640px;
  opacity: 1;
  margin-top: 0.3rem;
}
.mobile-nav-sub-heading {
  font-family: var(--font-display);
  font-size: 10.4px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0.6rem 0 0.1rem;
}
.mobile-nav-sub-heading:first-child { margin-top: 0; }
.mobile-nav-sub a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  padding: 0.3rem 0;
  transition: color 0.2s ease;
}
.mobile-nav-sub a:hover, .mobile-nav-sub a:active { color: #2ec4ff; }

/* Rangée de boutons rectangulaires pleins (façon weshore.com : RECRUTEMENT /
   DEMANDE DEVIS / téléphone) plutôt qu'un simple bouton pilule + texte. */
.mobile-nav-foot {
  position: relative; z-index: 1;
  margin-top: 2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  width: auto;
  max-width: 100%;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.8rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.mobile-nav.is-open .mobile-nav-foot { opacity: 1; transform: translateY(0); transition-delay: .42s; }
.mobile-nav-cta,
.mobile-nav-foot .tel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  text-align: center;
  background: #2ec4ff;
  color: #050505;
  padding: 0.85rem 1.7rem;
  border-radius: 4px;
  border: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.mobile-nav-cta:hover,
.mobile-nav-foot .tel-link:hover { transform: translateY(-2px); background: var(--accent); color: #fff; }

/* Menu hamburger + panneau plein écran à TOUTES les tailles (façon
   weshore.com) : plus de liens visibles en permanence dans le header,
   uniquement le logo et le bouton Menu. */
.nav-desktop { display: none; }
.nav-toggle { display: flex; }
.mobile-nav { display: flex; }
.header-actions .btn-accent { display: none; }
.btn-header-cta { display: none; }
@media (max-width: 860px) {
  .site-header .container { padding-inline: 1rem; }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-group > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* =========================================================
   HERO — scène 3D Spline confinée à droite (design intact, interactif)
   ========================================================= */
.hero-tech {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  max-height: 900px;
  background: #f5f6fa;
  --hero-accent: #DA6A27;
}
.hero-spline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Décale la scène 3D du Hero vers la droite (le débord droit est masqué par
   overflow:hidden sur .hero-tech). Le fond blanc couvre tout le Hero pour
   qu'aucune bande noire ne soit visible, même décalé. */
#hero .hero-spline {
  background: #000;
}
/* La scène Spline garde son ratio d'origine (letterboxing) dans un Hero
   très large : on la surdimensionne pour qu'elle couvre tout le Hero,
   le débord étant masqué par overflow:hidden sur .hero-tech. */
#hero .hero-spline iframe {
  top: -12%;
  height: 124%;
}
.hero-spline iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* L'animation de cette scène tourne toute seule (déclenchée au chargement,
     boucle infinie) : bloquer la souris n'arrête rien, et garantit que le
     scroll de la page n'est jamais capté par le zoom caméra de Spline. */
  pointer-events: none;
}
/* Web component officiel <spline-viewer> (fichier .splinecode). Interaction
   souris activée pour garder la balle qui suit le curseur : le scroll
   molette se bloque quand la souris survole la scène (limite du moteur
   Spline, sans solution côté site), c'est un choix assumé. */
.hero-spline spline-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
}

/* --- Texte en overlay, colonne gauche, au-dessus de la scène 3D --- */
.htx-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.htx-copy {
  max-width: 640px;
  pointer-events: auto;
}
.htx-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.4992rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--hero-accent);
  border: 1px solid var(--line-strong);
  background: var(--paper-alt);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
}
.htx-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hero-accent);
  box-shadow: 0 0 10px rgba(218, 106, 39, 0.6);
}
.htx-title {
  font-size: clamp(1.872rem, 3.6vw,2.652rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-top: 1.9rem;
  color: var(--ink);
  white-space: normal;
}
.htx-title .accent {
  color: var(--hero-accent);
  font-style: italic;
}
/* Page Agence uniquement : "digitale" dans la même couleur que le reste du titre */
#a-propos-scene .htx-title .accent {
  color: var(--ink);
  font-style: normal;
}
/* Page Agence uniquement : H1 centré au milieu du Hero */
#a-propos-scene .htx-inner { justify-content: center; }
#a-propos-scene .htx-copy { text-align: center; margin-inline: auto; }
#a-propos-scene .htx-actions { justify-content: center; margin-top: 7rem; }
.htx-lede {
  margin-top: 1.6rem;
  max-width: 36ch;
  font-size: 0.819rem;
  line-height: 1.55;
  color: var(--ink-70);
}
/* Description positionnée sur la forme blanche de la scène 3D (page Agence) */
.htx-lede--on-scene {
  position: absolute;
  z-index: 2;
  right: 22%;
  top: 68%;
  transform: translateY(-50%);
  width: clamp(255px, 21vw, 320px);
  margin-top: 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  color: var(--ink);
}
@media (max-width: 1080px) {
  .htx-lede--on-scene {
    position: static;
    width: auto;
    max-width: 36ch;
    margin-top: 1.6rem;
    font-size: 0.819rem;
    color: var(--ink-70);
  }
}
.htx-actions { margin-top: 2.5rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.htx-actions .btn { font-size: 0.663rem; padding: 0.7rem 1.3rem; }
.htx-proof {
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
/* Copie affichée uniquement là où la liste 01-04 (donc la version desktop du bloc) est masquée */
.htx-proof--inline { display: none; }
.htx-proof-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.htx-proof-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.897rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.htx-proof-label {
  font-size: 0.5304rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.btn-hero {
  background: var(--hero-accent, var(--accent));
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 16px 34px -16px rgba(218, 106, 39, 0.45);
}
.btn-hero:hover { background: var(--ink); box-shadow: 0 20px 40px -16px rgba(11, 13, 16, 0.4); }

/* --- Liste de navigation, ancrée dans le Hero (pas fixe à l'écran) --- */
.htx-scrollnav {
  position: absolute;
  left: clamp(6rem, 15vw, 13rem);
  top: 50%;
  transform: translateY(calc(-50% - 1.4rem));
  z-index: 45;
}
.htx-scrollnav-list {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
}
/* Séparateur vertical entre la liste et le bloc de texte (H1/description) */
.htx-scrollnav::after {
  content: "";
  position: absolute;
  right: -2.75rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--line-strong);
}
.htx-scrollnav-item {
  display: block;
  cursor: default;
  opacity: 0.4;
  transform: scale(0.9) translateX(0);
  transform-origin: left center;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.htx-scrollnav-item.is-active {
  opacity: 1;
  transform: scale(1.08) translateX(4px);
}
.htx-scrollnav-row { display: flex; align-items: baseline; gap: 0.6rem; }
.htx-scrollnav-num {
  font-family: var(--font-display);
  font-size: 0.5304rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hero-accent);
}
.htx-scrollnav-label {
  font-family: var(--font-display);
  font-size: 0.6396rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: font-size 0.45s var(--ease-out);
}
.htx-scrollnav-item.is-active .htx-scrollnav-label { font-size: 0.7956rem; }
.htx-scrollnav-rule {
  display: block;
  width: 30px;
  height: 1px;
  margin-top: 0.55rem;
  background: var(--line-strong);
}
@media (max-width: 1080px) {
  .htx-scrollnav { display: none; }
  .htx-proof--inline { display: flex; }
}


/* --- Hero "créatif / graphique" : fond noir, texte clair --- */
.hero-tech--creative { background: #0B0D10; }
.hero-tech--creative .htx-title { color: #fff; }
.hero-tech--creative .htx-lede { color: rgba(250, 250, 248, 0.65); }
.hero-tech--creative .htx-sketch-note { color: rgba(250, 250, 248, 0.55); }
.hero-tech--creative .btn-hero-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.hero-tech--creative .btn-hero-ghost:hover { background: #fff; color: #0B0D10; border-color: #fff; }

/* --- Hero "créatif / graphique" : titre XXL capitales + annotations croquis --- */
.htx-title--creative {
  margin-top: 0;
  font-size: clamp(2.028rem, 4.4vw,3.198rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 800;
}
.htx-title--creative .accent { font-style: normal; }
.htx-creative-underline {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--hero-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.htx-sketch {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.htx-sketch-note {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-family: "Caveat", cursive;
  font-size: 1.17rem;
  font-weight: 700;
  color: var(--ink-70);
}
.htx-sketch-arrow { width: 70px; height: 46px; }
.htx-sketch-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.55;
}
.htx-sketch-arrow--flip { transform: scaleX(-1); }

.htx-sketch-note--strategie { top: 10%; right: 42%; text-align: right; }
.htx-sketch-note--creation { top: 6%; right: 3%; text-align: left; }
.htx-sketch-note--digital { bottom: 16%; right: 44%; text-align: right; }
.htx-sketch-note--resultats { bottom: 10%; right: 2%; text-align: left; }

@media (max-width: 1000px) {
  .htx-sketch { display: none; }
}

/* --- Hero "art direction / éditorial" : 3 zones horizontales ---
   [ 01 / colonne étroite ]  [ bloc texte, aligné à gauche ]  (visuel 3D en fond, à droite)
   .htx-inner reste pointer-events:none / justify-content:flex-start (hérité) ;
   les deux zones sont des flex-items normaux, rien n'est centré ni absolu. */
.htx-inner--split {
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: -1rem;
}
.htx-inner--split .htx-copy { text-align: left; }
.htx-inner--split .htx-actions { justify-content: flex-start; margin-top: 5.8rem; }

/* --- Hero plein écran (page d'accueil) : typographie surdimensionnée,
   calée en bas à gauche par-dessus la scène 3D --- */
.htx-inner--oversized {
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: clamp(3rem, 8vh, 6rem);
}
.htx-inner--oversized .htx-copy { text-align: left; }
.htx-title--oversized {
  margin-top: 0;
  font-size: clamp(2.652rem, 9vw,6.396rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: #fff;
}
.htx-title--oversized .accent {
  color: var(--hero-accent, var(--accent));
  font-style: normal;
}
.htx-lede--oversized {
  margin-top: 1.8rem;
  max-width: 34ch;
  font-size: clamp(0.78rem, 1.3vw,0.897rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 760px) {
  .htx-inner--oversized { padding-bottom: 2.6rem; }
  .htx-title--oversized { font-size: clamp(2.028rem, 12vw,3.12rem); }
}

/* --- Hero plein écran (page d'accueil) : variante centrée, élégante et
   minimale — même typographie, beaucoup d'air autour --- */
.htx-inner--centered {
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}
.htx-inner--centered .htx-copy {
  text-align: left;
  max-width: 1200px;
}
/* Même typographie que le H1 du Hero de la page Solutions (.sol-intro-title
   dans css/solutions.css) : Inter 700, tracking -0.04em, line-height 0.98,
   même échelle clamp. */
.htx-inner--centered .htx-title--oversized {
  font-family: "Inter", var(--font-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.04em;
  line-height: 0.98;
  font-size: clamp(1.872rem, 5vw,3.432rem);
}
.htx-inner--centered .htx-actions {
  justify-content: flex-start;
  margin-top: 2.6rem;
}
.htx-actions .btn-hero-ghost--minimal {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.6084rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 2.2rem;
}
.btn-hero-ghost--minimal:hover {
  background: #fff;
  color: #0B0D10;
  border-color: #fff;
}

.htx-num-tag {
  flex-shrink: 0;
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.htx-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.028rem, 4.4vw,3.12rem);
  line-height: 1;
  color: var(--line-strong);
}
.htx-taglist {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 1rem;
  margin-top: 0.3rem;
  border-left: 1px solid var(--line-strong);
  list-style: none;
}
.htx-taglist li {
  font-family: var(--font-display);
  font-size: 0.5304rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  white-space: nowrap;
}
.htx-title--editorial {
  margin-top: 0;
  font-family: "Playfair Display", serif;
  text-transform: none;
  font-weight: 600;
  font-size: clamp(2.184rem, 4.6vw,3.432rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.htx-title--editorial .accent {
  font-family: "Playfair Display", serif;
  font-weight: 600;
}

@media (max-width: 1000px) {
  .htx-inner--split { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .htx-num-tag { display: none; }
}

.btn-hero-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.btn-hero-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

@media (max-width: 760px) {
  .hero-tech { height: auto; min-height: 100vh; min-height: 100svh; padding-block: 6.5rem 3rem; }
  .htx-inner { height: auto; align-items: flex-start; }
  .htx-inner--split { margin-top: 0; }
  .htx-inner--split .htx-actions { margin-top: 2rem; }
  .htx-copy { max-width: 100%; }
  .htx-proof { margin-top: 2rem; flex-direction: row; gap: 0; }
  .htx-proof-item { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0 0.6rem; }
  .htx-proof-num { font-size: 0.975rem; }
  .htx-proof-label { font-size: 0.468rem; }

  /* Scène 3D : bande dédiée sous le texte, plus en fond plein écran */
  .hero-tech { display: flex; flex-direction: column; }
  .container.htx-inner { order: 1; }
  .hero-spline {
    order: 2;
    position: relative;
    inset: auto;
    width: auto;
    height: 300px;
    margin: 2.2rem 1.25rem 0;
    border-radius: 18px;
    overflow: hidden;
  }
}

/* ---------- Section heading ---------- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.56rem, 4vw,2.34rem); max-width: 20ch; }
.section-head .section-desc { max-width: 40ch; font-size: clamp(1.25rem, 1.7vw, 1.5rem); color: var(--ink); }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }


/* ---------- Services : Card Stack (empilement / fan-out) ---------- */
.services-stack {
  position: relative;
  height: clamp(320px, 38vw, 400px);
  margin-top: 0;
  outline: none;
}
/* Titres de section homogenes avec Agence / Solutions sur toute la page d'accueil */
#agence .section-head,
#solutions-preview .section-head,
#produits .section-head,
#pourquoi .section-head,
#chiffres .section-head {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
#agence .section-head {
  margin-top: clamp(-1.5rem, -2vw, -0.75rem);
}
#solutions-preview .section-head {
  margin-bottom: 0;
}
#agence .section-head .section-desc,
#solutions-preview .section-head .section-desc {
  margin-top: 0.6rem;
}
#agence .section-head .eyebrow--accent,
#solutions-preview .section-head .eyebrow--accent,
#produits .section-head .eyebrow--accent,
#pourquoi .section-head .eyebrow--accent,
#chiffres .section-head .eyebrow--accent {
  display: block;
  text-transform: none;
  font-family: var(--font-solutions, var(--font-body));
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  font-size: clamp(2.028rem, 6.4vw,4.68rem);
  margin-bottom: 0.4rem;
}
#agence .section-head .section-desc,
#solutions-preview .section-head .section-desc,
#produits .section-head .section-desc,
#pourquoi .section-head .section-desc,
#chiffres .section-head .section-desc {
  max-width: 50ch;
  margin-top: 0.6rem;
}
#agence .section-head h2,
#solutions-preview .section-head h2,
#produits .section-head h2,
#pourquoi .section-head h2,
#chiffres .section-head h2 {
  font-family: var(--font-solutions, var(--font-body));
}
.stack-card {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px;
  padding: 1.5rem 1.4rem;
  background: #fff;
  border-radius: 18px;
  box-shadow:
    9px 9px 0 0 var(--sc, var(--accent)),
    0 20px 40px -24px rgba(17, 15, 20, 0.2),
    0 2px 8px -2px rgba(17, 15, 20, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  transform-origin: center 85%;
  transform: translate(-50%, -50%)
    rotate(calc((var(--i) - 2.5) * 5deg))
    translateY(calc(var(--i) * 3px));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s var(--ease-out);
  z-index: calc(10 - var(--i));
  will-change: transform;
}
.services-stack:hover .stack-card,
.services-stack:focus-within .stack-card,
.services-stack.is-open .stack-card {
  transform: translate(-50%, -50%)
    rotate(calc((var(--i) - 2.5) * 5deg))
    translateX(calc((var(--i) - 2.5) * 150px));
  transition-delay: calc(var(--i) * 35ms);
}
.stack-card:hover, .stack-card:focus-visible {
  z-index: 20 !important;
  box-shadow:
    13px 13px 0 0 var(--sc, var(--accent)),
    0 26px 46px -22px rgba(17, 15, 20, 0.24),
    0 2px 8px -2px rgba(17, 15, 20, 0.06);
  transform: translate(-50%, -50%)
    rotate(calc((var(--i) - 2.5) * 5deg))
    translateX(calc((var(--i) - 2.5) * 150px))
    translateY(-10px) !important;
}
.stack-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  color: var(--sc, var(--accent));
  background: color-mix(in srgb, var(--sc, var(--accent)) 14%, transparent);
}
.stack-card h3 {
  position: relative;
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  margin: 0;
  padding-bottom: 0.55rem;
}
.stack-card h3::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px; border-radius: 2px;
  background: var(--sc, var(--accent));
}
.stack-card p { font-size: 0.6396rem; color: var(--ink-70); margin: 0; line-height: 1.4; }
.stack-card-cta {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.6396rem;
  font-weight: 600;
  color: var(--sc, var(--accent));
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.stack-card-arrow { transition: transform 0.25s var(--ease-out); }
.stack-card:hover .stack-card-arrow { transform: translateX(3px); }
.services-stack-hint {
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.6396rem;
  color: var(--ink-70);
}

@media (max-width: 900px) and (min-width: 641px) {
  .stack-card { width: 176px; padding: 1.2rem 1.1rem; }
  .services-stack:hover .stack-card,
  .services-stack:focus-within .stack-card,
  .services-stack.is-open .stack-card {
    transform: translate(-50%, -50%)
      rotate(calc((var(--i) - 2.5) * 5deg))
      translateX(calc((var(--i) - 2.5) * 108px));
  }
}

@media (max-width: 640px) {
  .services-stack { height: 210px; }
  .stack-card {
    width: min(84%, 300px);
    transform: translate(-50%, -50%)
      rotate(calc((var(--i) - 2.5) * 2deg))
      translateY(calc(var(--i) * 6px));
  }
  .services-stack:hover .stack-card,
  .services-stack:focus-within .stack-card {
    transform: translate(-50%, -50%) rotate(calc((var(--i) - 2.5) * 2deg)) translateY(calc(var(--i) * 6px));
  }
  .services-stack.is-open {
    height: auto;
    padding-bottom: 1rem;
  }
  .services-stack.is-open .stack-card {
    position: static;
    width: 100%;
    margin-bottom: 0.9rem;
    transform: none !important;
    transition-delay: calc(var(--i) * 45ms);
  }
  .services-stack-hint { display: none; }
  .services-stack.is-open + .services-stack-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-card { transition: none; }
}

/* ---------- Products ---------- */
.product-card {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.product-card:last-child { border-bottom: none; }
.product-media {
  aspect-ratio: 4 / 3;
  background: var(--ink);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.product-media .product-mark { font-family: var(--font-display); color: var(--accent); font-size: clamp(1.872rem, 5vw,2.652rem); font-weight: 700; letter-spacing: -0.03em; position: relative; z-index: 1; }
.product-media::after {
  content: "";
  position: absolute;
  width: 62%; aspect-ratio: 1;
  border: 1px solid rgba(218,106,39,0.4);
  border-radius: 50%;
  right: -18%; bottom: -22%;
}
.product-media::before {
  content: "";
  position: absolute;
  width: 38%; aspect-ratio: 1;
  border: 1px solid rgba(250,250,248,0.14);
  border-radius: 50%;
  left: -10%; top: -14%;
}
.product-attrib { font-size: 0.6084rem; color: var(--muted); margin-top: 1rem; letter-spacing: 0.02em; }
.product-attrib strong { color: var(--ink); font-weight: 600; }
.product-body h3 { font-size: clamp(1.248rem, 2.8vw,1.716rem); }
.product-body .eyebrow { margin-bottom: 0.6rem; }
.product-body p { margin-top: 1rem; max-width: 52ch; }
.product-features { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.product-feature { font-size: 0.6396rem; font-weight: 500; padding: 0.4rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.product-body .btn { margin-top: 1.6rem; }

@media (max-width: 800px) { .product-card { grid-template-columns: 1fr; } .product-media { aspect-ratio: 16/9; } }

/* ---------- Cartes produits (app-card) ---------- */
.app-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 300px;
  padding: 2.6rem 1.6rem 1.8rem;
  background: #fff;
  border-radius: 26px;
  color: var(--ink);
  text-decoration: none;
  box-shadow:
    9px 9px 0 0 var(--pc, var(--accent)),
    0 20px 40px -24px rgba(17, 15, 20, 0.2),
    0 2px 8px -2px rgba(17, 15, 20, 0.06);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.app-card:hover {
  transform: translateY(-6px);
  box-shadow:
    13px 13px 0 0 var(--pc, var(--accent)),
    0 26px 46px -22px rgba(17, 15, 20, 0.24),
    0 2px 8px -2px rgba(17, 15, 20, 0.06);
}
.app-card--nfc { --pc: #E5473A; }
.app-card--saas { --pc: #5B3FD6; }
.app-card--cm { --pc: #1591A8; }
.app-card-badge {
  position: absolute;
  top: -24px; left: 1.7rem;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--pc, var(--accent)) 14%, #fff);
  color: var(--pc, var(--accent));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 22px -10px rgba(11, 13, 16, 0.2);
}
.app-card h3 {
  position: relative;
  margin: 0.8rem 0 0;
  padding-bottom: 0.55rem;
  font-size: 1.014rem;
}
.app-card h3::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px; border-radius: 2px;
  background: var(--pc, var(--accent));
}
.app-card p { margin: 0; flex: 1; font-size: 0.88rem; line-height: 1.55; color: var(--ink-70); }
.app-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.app-card-link { color: color-mix(in srgb, var(--pc, var(--accent)) 52%, black); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.app-card-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pc, var(--accent)) 14%, #fff);
  color: var(--pc, var(--accent));
  flex-shrink: 0;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.app-card:hover .app-card-arrow { background: var(--pc, var(--accent)); color: #fff; transform: translateX(3px); }
@media (max-width: 860px) {
  .app-cards { grid-template-columns: 1fr; }
}

/* ---------- Méthode (timeline) ---------- */
.method-band { background: var(--ink); color: var(--paper); }
.method-band .eyebrow--accent { color: var(--logo-gold); }
.method-band .section-desc { color: rgba(250, 250, 248, 0.6); }
.method-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.method-timeline::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 1.7rem;
  height: 1px;
  background: rgba(250, 250, 248, 0.16);
}
.method-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.method-icon {
  position: relative;
  z-index: 1;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.702rem;
  color: #fff;
  background: var(--chip, var(--accent));
  transform: rotate(45deg);
}
.method-icon span { transform: rotate(-45deg); }
.method-step:nth-child(1) .method-icon { --chip: var(--accent); }
.method-step:nth-child(2) .method-icon { --chip: var(--logo-gold); }
.method-step:nth-child(3) .method-icon { --chip: var(--logo-red-orange); }
.method-step:nth-child(4) .method-icon { --chip: var(--logo-maroon); }
.method-step:nth-child(5) .method-icon { --chip: var(--logo-red); }
.method-step:nth-child(6) .method-icon { --chip: var(--accent); }
.method-label { font-family: var(--font-display); font-size: 0.5304rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--logo-gold); }
.method-step h3 { font-size: 0.78rem; margin: 0.1rem 0 0; color: var(--paper); }
.method-step p { font-size: 0.6396rem; color: rgba(250, 250, 248, 0.55); line-height: 1.5; }

@media (max-width: 900px) {
  .method-timeline { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.2rem; }
  .method-timeline::before { display: none; }
}
@media (max-width: 560px) {
  .method-timeline { grid-template-columns: 1fr; }
}

/* ---------- Réalisations / placeholders ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.proof-card {
  aspect-ratio: 3/2;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  color: var(--muted);
  text-align: center;
  padding: 1rem;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.proof-card:hover { border-color: var(--accent); background: var(--accent-dim); }
.proof-card .proof-tag { font-family: var(--font-display); font-size: 0.507rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.55rem; border: 1px solid var(--line-strong); border-radius: 999px; }
.proof-card span.label { font-size: 0.6396rem; }
.proof-note { margin-top: 1.5rem; font-size: 0.663rem; color: var(--muted); }

@media (max-width: 860px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Chiffres + témoignage ---------- */
.trust-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.stat-cell {
  background: #fff;
  border-radius: 14px;
  padding: 1.7rem 1.2rem;
  text-align: center;
  box-shadow:
    6px 6px 0 0 var(--sc, var(--accent)),
    0 18px 34px -22px rgba(17, 15, 20, 0.2),
    0 2px 8px -2px rgba(17, 15, 20, 0.06);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.stat-cell:hover {
  transform: translateY(-4px);
  box-shadow:
    9px 9px 0 0 var(--sc, var(--accent)),
    0 22px 40px -20px rgba(17, 15, 20, 0.24),
    0 2px 8px -2px rgba(17, 15, 20, 0.06);
}
.stat-cell:nth-child(1) { --sc: #2B4C8C; }
.stat-cell:nth-child(2) { --sc: #1FB8B0; }
.stat-cell:nth-child(3) { --sc: #7B5CF0; }
.stat-num { font-family: var(--font-display); font-size: clamp(1.404rem, 4vw,1.872rem); font-weight: 700; color: color-mix(in srgb, var(--sc, var(--accent)) 55%, black); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.82rem; color: var(--ink-70); margin-top: 0.3rem; }
@media (max-width: 640px) { .stats-row { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: 1fr; } }

.testimonial-card {
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--ink-70);
}
.testimonial-card .proof-tag { align-self: flex-start; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.55rem; border: 1px solid var(--line-strong); border-radius: 999px; }
.testimonial-card p { font-size: 0.95rem; line-height: 1.55; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.5rem;
  width: 100%; background: none; border: none; text-align: left;
  font-family: var(--font-display); font-size: 0.819rem; font-weight: 600; color: var(--ink);
}
.faq-q .plus { font-size: 1.014rem; color: var(--accent); transition: transform 0.35s var(--ease-out); flex-shrink: 0; }
.faq-item.is-open .faq-q .plus { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-out); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; padding-bottom: 1.6rem; max-width: 65ch; font-size: 0.7488rem; min-height: 0; }

/* ---------- Contact / devis ---------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 5vw, 5rem); }
.contact-info, .form-card { min-width: 0; }
.contact-info h2 { font-size: clamp(1.482rem, 3.6vw,2.028rem); }
.contact-info p { margin-top: 1.2rem; max-width: 40ch; }
.contact-detail { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1rem; }
.contact-detail a { font-family: var(--font-display); font-weight: 600; font-size: 0.819rem; word-break: break-word; }
.contact-detail span { display: block; font-size: 0.624rem; color: var(--muted); margin-bottom: 0.2rem; }

.form-card { background: var(--paper-alt); border: 1px solid var(--line); padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: var(--radius); box-sizing: border-box; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-width: 0; }
.field { margin-bottom: 1.1rem; min-width: 0; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; box-sizing: border-box; padding: 0.8rem 0.9rem; font-family: var(--font-body); font-size: 0.741rem;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); border-radius: var(--radius);
  transition: border-color 0.25s var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 96px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.chip { font-size: 0.663rem; padding: 0.5rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; user-select: none; transition: all 0.2s var(--ease-out); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip.is-checked { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.radio-row { display: flex; gap: 1.2rem; }
.radio-row label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.702rem; cursor: pointer; }
.form-submit { width: 100%; justify-content: center; margin-top: 0.6rem; }
.form-note { font-size: 0.6084rem; color: var(--muted); margin-top: 0.9rem; }
.form-success { display: none; text-align: center; padding: 2.5rem 1rem; }
.form-success.is-visible { display: block; }
.form-success h3 { font-size: 1.092rem; margin-bottom: 0.6rem; }

@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Pourquoi nous ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: clamp(2rem, 5vw, 3rem); }
.why-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow:
    7px 7px 0 0 var(--chip, var(--accent)),
    0 20px 40px -24px rgba(17, 15, 20, 0.2),
    0 2px 8px -2px rgba(17, 15, 20, 0.06);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow:
    10px 10px 0 0 var(--chip, var(--accent)),
    0 24px 44px -22px rgba(17, 15, 20, 0.24),
    0 2px 8px -2px rgba(17, 15, 20, 0.06);
}
.why-card:nth-child(4n+1) { --chip: var(--accent); }
.why-card:nth-child(4n+2) { --chip: var(--logo-maroon); }
.why-card:nth-child(4n+3) { --chip: var(--logo-red-orange); }
.why-card:nth-child(4n+4) { --chip: var(--logo-red); }
.why-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  color: color-mix(in srgb, var(--chip, var(--accent)) 52%, black); border: 1.5px solid var(--chip, var(--accent));
}
.why-card h3 {
  position: relative;
  padding-bottom: 0.5rem;
  font-size: 1.05rem;
}
.why-card h3::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 24px; height: 2px; border-radius: 2px;
  background: var(--chip, var(--accent));
}
.why-card p { font-size: 0.88rem; color: var(--ink-70); }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- CTA final ---------- */
.cta-final { background: var(--ink); color: var(--paper); text-align: center; position: relative; overflow: hidden; }
.cta-final::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(218,106,39,0.28), transparent 55%),
              radial-gradient(circle at 75% 80%, rgba(248,176,39,0.16), transparent 50%);
  pointer-events: none;
}
.cta-final .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.cta-final h2 { max-width: 22ch; color: var(--paper); }
.cta-final p { max-width: 52ch; color: rgba(250,250,248,0.65); }
.cta-final .btn-hero { margin-top: 0.6rem; }

/* ---------- Footer ---------- */
/* Page Agence sans Hero : espace vide sous le header (fixe) pour ne pas
   coller le footer juste en dessous. */
.empty-main { display: block; min-height: 60vh; padding-top: 130px; background: var(--paper); }

/* ---------- Hero (photo à droite, en attente d'un nouveau design) ---------- */
.hero-photo {
  display: block;
  padding-top: 165px;
  padding-bottom: clamp(2rem, 6vw, 4rem);
  min-height: 70vh;
  background: var(--paper);
}
.hero-photo-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(2rem, 6vw, 4rem);
  min-height: calc(70vh - 130px);
}
.hero-photo-left { flex: 1 1 auto; max-width: 58ch; }
.hero-photo-inner { padding-left: max(0.75rem, calc(var(--gutter) - 3.5rem)); }
.hero-photo-title {
  font-family: "Poppins", var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(1.794rem, 4vw,2.808rem);
  color: var(--ink);
  margin: 0;
}
.hero-photo-title-accent {
  color: var(--accent);
}
.hero-photo-title-rule {
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  margin-top: 1.3rem;
}
.hero-photo-desc {
  margin: 1.2rem 0 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--ink);
  max-width: 42ch;
}
.hero-photo-cta {
  margin-top: 1.6rem;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  background: #DA6A27;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 24px -14px rgba(218, 106, 39, 0.55);
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.hero-photo-cta:hover { background: var(--ink); transform: translateY(-2px); }
@media (max-width: 1024px) {
  .hero-photo-left { max-width: none; margin-left: 0; text-align: left; }
}
.hero-photo-right { position: relative; flex: 0 0 auto; width: min(100%, 540px); }

/* Interfaces digitales flottantes autour de l'écran (effet "emerging from screen") */
.hero-deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-deco-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hero-deco-float 6s ease-in-out infinite;
  transform: translateY(0) rotate(var(--rot, 0deg)) scale(var(--depth, 1));
}
@keyframes hero-deco-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)) scale(var(--depth, 1)); }
  50% { transform: translateY(-12px) rotate(var(--rot, 0deg)) scale(var(--depth, 1)); }
}
.hero-ui-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 9px 10px;
  box-shadow: 0 20px 38px -18px rgba(11, 13, 16, 0.3);
}
.ui-card-head { display: flex; align-items: center; gap: 4px; }
.ui-card-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); display: inline-block; }
.ui-card-head i.r { background: #FF6B6B; }
.ui-card-head i.y { background: #FFC24D; }
.ui-card-head i.g { background: #4DBE5A; }
.ui-tab { margin-left: auto; width: 32px; height: 6px; border-radius: 3px; background: #EDECE8; }
.ui-card-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ui-title-bar { width: 42%; height: 8px; border-radius: 4px; background: #2B2E33; }
.ui-badge { font-family: var(--font-body); font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 20px; white-space: nowrap; }
.ui-badge.up { color: #1F8A3D; background: #E4F6E8; }
.ui-chart-wrap { position: relative; }
.ui-card-chart { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.ui-card-chart span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #2F8FE0, #8AD0D9); }
.ui-chart-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui-row { display: flex; align-items: center; gap: 6px; }
.ui-avatar { width: 16px; height: 16px; border-radius: 50%; background: #E9E4FB; flex-shrink: 0; }
.ui-avatar.grad1 { background: linear-gradient(135deg, #8AD0D9, #2F8FE0); }
.ui-avatar.grad2 { background: linear-gradient(135deg, #C4B5FA, #7B5CF0); }
.ui-avatar.grad3 { background: linear-gradient(135deg, #FFC79A, #FF7A45); }
.ui-row-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ui-line { height: 5px; border-radius: 3px; background: #EDECE8; }
.ui-row .ui-line { flex: 1; }
.ui-line.short { width: 55%; flex: none; }
.ui-line.xs { height: 4px; width: 40%; background: #F1F0EC; }
.ui-pill { width: 16px; height: 7px; border-radius: 6px; flex-shrink: 0; }
.ui-pill.green { background: #B6E6C1; }
.ui-pill.blue { background: #BBD8F5; }
.ui-pill.orange { background: #FFD8B8; }
.ui-block { height: 22px; border-radius: 6px; background: linear-gradient(135deg, #FFE3CC, #FFC79A); }
.ui-addr { margin-left: 4px; flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; background: #F1F0EC; border-radius: 6px; padding: 3px 6px; }
.ui-lock { width: 6px; height: 6px; border: 1.3px solid #9A968C; border-radius: 1px; flex-shrink: 0; }
.ui-addr-line { flex: 1; height: 4px; border-radius: 2px; background: #DAD7CE; }
.ui-nav { display: flex; align-items: center; gap: 5px; }
.ui-nav-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF8A5C; flex-shrink: 0; }
.ui-nav-line { width: 16px; height: 4px; border-radius: 2px; background: #EDECE8; }
.ui-nav-line.short { width: 10px; }
.ui-nav-cta { margin-left: auto; width: 26px; height: 9px; border-radius: 5px; background: #FF7A45; }
.ui-cta-btn { width: 46px; height: 12px; border-radius: 6px; background: #FF7A45; margin-top: 2px; }
.hero-ui-card--flow { flex-direction: row; align-items: center; padding: 14px 11px; box-shadow: 0 16px 30px -16px rgba(11, 13, 16, 0.24); }
.ui-node { width: 22px; height: 22px; border-radius: 50%; background: #F1F0EC; border: 1.5px solid #DAD7CE; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ui-node.accent { background: #7B5CF0; border-color: #7B5CF0; }
.ui-node-line { flex: 1; height: 2px; background: #E3E0D8; margin: 0 3px; }
.hero-ui-card--mobile { border-radius: 18px; padding: 9px 9px 11px; box-shadow: 0 16px 28px -16px rgba(11, 13, 16, 0.26); }
.ui-mobile-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.ui-mobile-time { width: 16px; height: 4px; border-radius: 2px; background: #2B2E33; }
.ui-mobile-batt { width: 11px; height: 6px; border-radius: 1.5px; border: 1px solid #2B2E33; }
.ui-mobile-notch { width: 20px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto 4px; }
.ui-mobile-grid { display: flex; gap: 5px; margin-bottom: 5px; }
.ui-mobile-tile { flex: 1; height: 24px; border-radius: 7px; background: #DCEFFB; }
.ui-mobile-tile.alt { background: #EAE1FB; }
.ui-mobile-block { height: 15px; border-radius: 6px; background: #DCEFFB; }
.ui-mobile-block.small { height: 9px; width: 65%; background: #EDECE8; }
.ui-mobile-nav { display: flex; align-items: center; justify-content: space-around; margin-top: 6px; }
.ui-mobile-nav i { width: 5px; height: 5px; border-radius: 50%; background: #DAD7CE; display: inline-block; }
.ui-mobile-nav i.active { background: #2F8FE0; }

/* ---- Composants : cartes stat + badges de marque ---- */
.hero-stat-card {
  width: 100%;
  background: #fff;
  border-radius: 14px;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 20px 38px -18px rgba(11, 13, 16, 0.3);
}
.hero-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 9px;
  color: var(--sc, var(--accent));
  background: color-mix(in srgb, var(--sc, var(--accent)) 15%, #fff);
}
.hero-stat-label { font-size: 0.72rem; color: var(--ink-70); }
.hero-stat-value { font-family: var(--font-display); font-weight: 700; font-size: 0.819rem; color: var(--ink); }
.hero-stat-value--sm { font-family: var(--font-body); font-weight: 600; font-size: 0.6084rem; }
.hero-stat-trend.up { color: #1F8A3D; font-size: 0.5616rem; font-weight: 700; margin-left: 0.2rem; }
.hero-stat-spark { display: block; width: 100%; height: 20px; margin-top: 2px; }
.hero-brand-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px;
  box-shadow: 0 14px 26px -12px rgba(11, 13, 16, 0.32);
}
.hero-brand-icon--lg { width: 58px; height: 58px; border-radius: 16px; }

/* ---- Zone haute ---- */
.hero-stat--audience { top: -9%; left: -8%; width: 132px; z-index: 3; animation-delay: -0.4s; }
.hero-stat--growth { top: -10%; right: -7%; width: 128px; z-index: 3; animation-delay: -2.2s; }
.hero-brand--instagram { top: -8%; left: 33%; z-index: 4; animation-delay: -1.1s; }
.hero-brand--facebook { top: -7%; left: 46%; z-index: 4; animation-delay: -3.3s; }

/* ---- Zone droite ---- */
.hero-brand--google { top: -7%; left: 62%; z-index: 4; animation-delay: -1.7s; }
.hero-icon--target { bottom: 14%; left: 4%; z-index: 2; animation-delay: -0.6s; }
.hero-brand--youtube { top: 68%; right: -5%; z-index: 2; animation-delay: -2.9s; }

/* ---- Zone basse ---- */
.hero-stat--analytics { top: 29%; right: -9%; width: 118px; z-index: 1; animation-delay: -2.7s; }
.hero-brand--envelope { bottom: -15%; left: 38%; z-index: 2; animation-delay: -1.4s; }
.hero-stat--leads { top: 20%; left: 4%; width: 128px; z-index: 1; animation-delay: -3.6s; }

/* ---- Zone gauche ---- */
.hero-deco--code {
  top: 46%; left: -9%;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, #2FE0C0, #7ED957);
  box-shadow: 0 16px 30px -12px rgba(11, 13, 16, 0.35);
  z-index: 4;
  animation-delay: 0s;
}
.hero-deco--gear-lg {
  bottom: -4%; right: 14%;
  width: 62px; height: 62px;
  z-index: 2;
  animation-delay: -0.6s;
}
.hero-deco--server {
  bottom: -1%; left: 38%;
  width: 56px; height: 56px;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 18px 34px -12px rgba(123, 92, 240, 0.3);
  z-index: 1;
  animation-delay: -2.7s;
}
.hero-ui--flow { top: 60%; right: 0%; width: 98px; --rot: 7deg; --depth: 0.88; z-index: 1; animation-delay: -3.4s; }
.hero-brand--linkedin { top: 60%; left: -13%; z-index: 2; animation-delay: -2.1s; }
@media (max-width: 1024px) {
  .hero-deco-item { --depth: 0.56; }
  .hero-deco-mobile-hide { display: none; }
}
.hero-photo-img {
  display: block; width: 100%; height: auto; object-fit: contain;
  animation: hero-photo-drift 6s ease-in-out infinite;
}
@keyframes hero-photo-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-0.6deg); }
}
@media (max-width: 1024px) {
  .hero-photo-inner { flex-direction: column-reverse; align-items: stretch; }
  .hero-photo-right { width: min(100%, 320px); margin-inline: auto; }
}
/* Mobile uniquement : éloigner davantage les cartes du laptop (tablette non concernée) */
@media (max-width: 760px) {
  .hero-stat--audience { top: -17%; left: -6%; }
  .hero-stat--growth { top: -18%; right: -14%; }
  .hero-brand--instagram { top: -17%; }
  .hero-brand--facebook { top: -17%; }
  .hero-brand--google { top: -17%; }
  .hero-icon--target { bottom: 4%; left: -4%; }
  .hero-stat--analytics { top: 21%; right: -10%; }
  .hero-stat--leads { top: 14%; left: -10%; }
  .hero-deco--code { top: -2%; left: 22%; bottom: auto; }
  .hero-deco--gear-lg { right: 18%; bottom: -12%; }
  .hero-deco--server { bottom: -9%; }
  .hero-ui--flow { right: -10%; }
}

/* Photo pleine largeur section Agence */
.agence-photo {
  display: block;
  width: 100%;
  height: auto;
  animation: agence-photo-float 7s ease-in-out infinite;
}
@keyframes agence-photo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .agence-photo { animation: none; }
}
.agence-photo-wrap { position: relative; }
.agence-photo-cta-pos {
  position: absolute;
  left: 50%;
  top: 72.5%;
  transform: translate(-50%, -50%);
  width: 15%;
}
.agence-photo-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  margin: -14px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(0.468rem, 1.3vw,0.663rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  animation: agence-photo-float 7s ease-in-out infinite;
  transition: opacity 0.25s var(--ease-out);
}
.agence-photo-cta:hover { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) {
  .agence-photo-cta { animation: none; }
}

/* Cartes glass flottantes (bas du Hero) */
.hero-glass-wrap { position: relative; margin-top: clamp(2rem, 5vw, 3.5rem); }
.hero-glass-bg { position: absolute; inset: -30% 0 -10% 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-glass-bg span { position: absolute; border-radius: 50%; filter: blur(54px); opacity: 0.24; }
.hero-glass-bg span:nth-child(1) { width: 220px; height: 220px; left: 4%; top: 0%; background: #FFB37A; }
.hero-glass-bg span:nth-child(2) { width: 180px; height: 180px; left: 36%; top: 30%; background: #8AD0D9; }
.hero-glass-bg span:nth-child(3) { width: 200px; height: 200px; right: 6%; top: 5%; background: #B7A6F5; }
.hero-glass-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.3rem);
  flex-wrap: wrap;
}
.glass-card {
  position: relative;
  flex: 1 1 210px;
  padding: 1.15rem 1.25rem;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    9px 9px 0 0 var(--gc, var(--accent)),
    0 20px 40px -24px rgba(17, 15, 20, 0.2),
    0 2px 8px -2px rgba(17, 15, 20, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 1;
  animation: hero-glass-float 6.5s ease-in-out infinite;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.glass-card:hover {
  animation-play-state: paused;
  transform: translateY(-5px);
  box-shadow:
    13px 13px 0 0 var(--gc, var(--accent)),
    0 26px 46px -22px rgba(17, 15, 20, 0.24),
    0 2px 8px -2px rgba(17, 15, 20, 0.06);
}
.glass-card:nth-child(1) { animation-delay: 0s; }
.glass-card:nth-child(2) { animation-delay: -1.6s; }
.glass-card:nth-child(3) { animation-delay: -3.2s; }
.glass-card:nth-child(4) { animation-delay: -4.8s; }
@keyframes hero-glass-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.glass-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 9px;
  color: var(--gc, var(--accent));
  background: color-mix(in srgb, var(--gc, var(--accent)) 14%, transparent);
}
.glass-card-name {
  position: relative;
  font-size: 0.741rem; font-weight: 700; letter-spacing: -0.01em;
  padding-bottom: 0.55rem;
}
.glass-card-name::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px; border-radius: 2px;
  background: var(--gc, var(--accent));
}
.glass-card-tag { font-size: 0.6084rem; color: var(--ink-70); }
@media (max-width: 760px) {
  .hero-glass-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.4rem; margin-inline: -1rem; padding-inline: 1rem; }
  .glass-card { flex: 0 0 200px; scroll-snap-align: start; }
}

.site-footer { padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; border-top: 1px solid var(--line); background: var(--ink); color: var(--paper); }
.footer-top { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(250,250,248,0.14); }
.footer-brand p { color: rgba(250,250,248,0.6); margin-top: 1rem; max-width: 32ch; font-size: 0.702rem; }
.footer-col h4 { font-family: var(--font-display); font-size: 0.6084rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250,250,248,0.5); margin-bottom: 1.1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a, .footer-col span { font-size: 0.7176rem; color: rgba(250,250,248,0.85); }
.footer-col a { transition: color 0.25s var(--ease-out); }
.footer-col a:hover { color: var(--accent); }
.footer-newsletter p { font-size: 0.663rem; color: rgba(250,250,248,0.6); margin-bottom: 1rem; }
.footer-newsletter-form { display: flex; border: 1px solid rgba(250,250,248,0.22); border-radius: 999px; overflow: hidden; }
.footer-newsletter-form input { flex: 1; min-width: 0; background: transparent; border: none; padding: 0.7rem 1rem; color: var(--paper); font-size: 0.663rem; }
.footer-newsletter-form input::placeholder { color: rgba(250,250,248,0.4); }
.footer-newsletter-form input:focus { outline: none; }
.footer-newsletter-form button {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.6rem; background: var(--accent); border: none; color: #fff; cursor: pointer;
}
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.6rem; flex-wrap: wrap; gap: 1rem; font-size: 0.624rem; color: rgba(250,250,248,0.5); }
.footer-bottom .footer-social { display: flex; gap: 0.9rem; }
.footer-bottom .footer-social a { color: rgba(250,250,248,0.6); transition: color 0.25s var(--ease-out); }
.footer-bottom .footer-social a:hover { color: var(--accent); }

@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- Utility ---------- */
.text-accent { color: var(--accent); }
.mt-0 { margin-top: 0 !important; }

/* =========================================================
   GLASS — page d'accueil uniquement (Hero -> Footer)
   Verre dépoli réel (backdrop-filter) + lueurs de couleur en
   arrière-plan pour que le flou ait quelque chose à refléter.
   Scopé par id de section (uniques à index.html) : ne touche
   ni le header ni les autres pages.
   ========================================================= */
.hero-photo, #agence, #solutions-preview, #produits, #pourquoi, #chiffres {
  position: relative;
}
.hero-photo-inner { position: relative; z-index: 1; }
#agence > .container, #solutions-preview > .container, #produits > .container,
#pourquoi > .container, #chiffres > .container { position: relative; z-index: 1; }

.hero-photo::before,
#agence::before, #solutions-preview::before, #produits::before,
#pourquoi::before, #chiffres::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 640px;
  max-height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(30px) saturate(160%);
}
.hero-photo::before {
  background:
    radial-gradient(360px 360px at 82% 20%, #2F8FE0, transparent 70%),
    radial-gradient(300px 300px at 92% 70%, #4DBE5A, transparent 70%),
    radial-gradient(280px 280px at 60% 90%, var(--accent), transparent 70%);
}
#agence::before {
  background:
    radial-gradient(320px 320px at 8% 15%, var(--accent), transparent 70%),
    radial-gradient(300px 300px at 92% 80%, #1E5F5C, transparent 70%);
}
#solutions-preview::before {
  background:
    radial-gradient(300px 300px at 90% 8%, #2B4C8C, transparent 70%),
    radial-gradient(300px 300px at 4% 60%, #B5502E, transparent 70%),
    radial-gradient(260px 260px at 55% 95%, #1E5F5C, transparent 70%);
  opacity: 0.4;
}
#produits::before {
  background:
    radial-gradient(300px 300px at 8% 10%, #E5473A, transparent 70%),
    radial-gradient(300px 300px at 88% 30%, #5B3FD6, transparent 70%),
    radial-gradient(280px 280px at 50% 95%, #1591A8, transparent 70%);
}
#pourquoi::before {
  background:
    radial-gradient(280px 280px at 90% 15%, var(--accent), transparent 70%),
    radial-gradient(260px 260px at 8% 85%, var(--logo-maroon), transparent 70%);
}
#chiffres::before {
  background:
    radial-gradient(300px 300px at 10% 20%, #2B4C8C, transparent 70%),
    radial-gradient(280px 280px at 90% 75%, #7B5CF0, transparent 70%),
    radial-gradient(260px 260px at 50% 5%, #1FB8B0, transparent 70%);
}

/* ---- Hero : cartes flottantes en verre liquide ---- */
.hero-stat-card, .hero-ui-card {
  position: relative;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 45%),
    color-mix(in srgb, var(--sc, #2F8FE0) 22%, var(--glass-bg));
  border: 1.5px solid color-mix(in srgb, var(--sc, #2F8FE0) 30%, var(--glass-border));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  box-shadow:
    0 20px 38px -14px rgba(11, 13, 16, 0.32),
    0 0 34px -4px color-mix(in srgb, var(--sc, #2F8FE0) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ---- Solutions preview : voir css/solutions.css (chargé après, priorité de cascade) ---- */

/* ---- Produits : cartes en verre liquide, saturées à la couleur du produit ---- */
.app-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 42%),
    color-mix(in srgb, var(--pc, var(--accent)) 34%, var(--glass-bg-soft));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1.5px solid color-mix(in srgb, var(--pc, var(--accent)) 45%, var(--glass-border));
  box-shadow:
    9px 9px 0 0 var(--pc, var(--accent)),
    0 20px 40px -24px rgba(17, 15, 20, 0.2),
    0 0 44px -6px color-mix(in srgb, var(--pc, var(--accent)) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.app-card:hover {
  box-shadow:
    13px 13px 0 0 var(--pc, var(--accent)),
    0 26px 46px -22px rgba(17, 15, 20, 0.24),
    0 0 54px -4px color-mix(in srgb, var(--pc, var(--accent)) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* ---- Pourquoi : cartes en verre liquide, saturées à la couleur du chip ---- */
.why-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 42%),
    color-mix(in srgb, var(--chip, var(--accent)) 30%, var(--glass-bg-soft));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1.5px solid color-mix(in srgb, var(--chip, var(--accent)) 42%, var(--glass-border));
  box-shadow:
    7px 7px 0 0 var(--chip, var(--accent)),
    0 20px 40px -24px rgba(17, 15, 20, 0.2),
    0 0 40px -6px color-mix(in srgb, var(--chip, var(--accent)) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* ---- Chiffres : stat cells + carte témoignage en verre liquide ---- */
.stat-cell {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 42%),
    color-mix(in srgb, var(--sc, var(--accent)) 32%, var(--glass-bg-soft));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1.5px solid color-mix(in srgb, var(--sc, var(--accent)) 44%, var(--glass-border));
  box-shadow:
    6px 6px 0 0 var(--sc, var(--accent)),
    0 18px 34px -22px rgba(17, 15, 20, 0.2),
    0 0 36px -6px color-mix(in srgb, var(--sc, var(--accent)) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.testimonial-card {
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%),
    color-mix(in srgb, var(--accent) 16%, var(--glass-bg-soft));
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--glass-border));
  box-shadow: 0 0 30px -8px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ---- Footer : logo + newsletter en verre liquide sombre ---- */
.footer-brand .logo {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%),
    color-mix(in srgb, var(--accent) 24%, var(--glass));
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--glass-line));
  box-shadow: 0 0 30px -6px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.footer-newsletter-form {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 50%),
    color-mix(in srgb, var(--accent) 16%, var(--glass));
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-line));
  box-shadow: 0 0 24px -8px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- Agence : mosaïque color-block (remplace la photo) ---------- */
.ag-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(96px, auto)) auto;
  gap: 0.9rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.ag-m {
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 16px 30px -20px rgba(11, 13, 16, 0.4);
}
.ag-m span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
}
.ag-m-cta {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background: var(--ink);
  color: var(--paper);
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  align-items: flex-start;
  text-decoration: none;
  transition: transform 0.35s var(--ease-out);
}
.ag-m-cta:hover { transform: translateY(-4px); }
.ag-m-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ag-m-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.15; color: #fff; }
.ag-m-arrow { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; display: inline-flex; gap: 0.4rem; align-items: center; color: #fff; }
.ag-m-arrow span { display: inline-block; transition: transform 0.25s var(--ease-out); }
.ag-m-cta:hover .ag-m-arrow span { transform: translateX(4px); }

.ag-m-1 { grid-column: 3 / 4; grid-row: 1 / 2; background: color-mix(in srgb, var(--accent) 75%, black); }
.ag-m-2 { grid-column: 4 / 5; grid-row: 1 / 2; background: var(--logo-maroon); }
.ag-m-3 { grid-column: 3 / 4; grid-row: 2 / 3; background: color-mix(in srgb, #1FB8B0 58%, black); }
.ag-m-4 { grid-column: 4 / 5; grid-row: 2 / 3; background: var(--logo-gold); }
.ag-m-4 span { color: #4A2E00; }
.ag-m-1 span, .ag-m-2 span, .ag-m-3 span { color: #fff; }
.ag-m-5 { grid-column: 1 / 5; grid-row: 3 / 4; background: var(--logo-red-orange); align-items: center; padding-block: 0.9rem; }
.ag-m-5 span { color: #fff; }

@media (max-width: 760px) {
  .ag-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, auto); }
  .ag-m-cta { grid-column: 1 / 3; grid-row: 1 / 2; min-height: 190px; }
  .ag-m-1 { grid-column: 1 / 2; grid-row: 2 / 3; }
  .ag-m-2 { grid-column: 2 / 3; grid-row: 2 / 3; }
  .ag-m-3 { grid-column: 1 / 2; grid-row: 3 / 4; }
  .ag-m-4 { grid-column: 2 / 3; grid-row: 3 / 4; }
  .ag-m-5 { grid-column: 1 / 3; grid-row: 4 / 5; }
}

/* ---------- Transitions en vague clair / sombre (Hero + Footer) ---------- */
.hero-wave {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: clamp(70px, 12vw, 140px);
  z-index: 0;
  pointer-events: none;
  display: block;
}
.hero-wave path { fill: var(--ink); }

.site-footer { position: relative; overflow: hidden; }
.footer-wave {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  height: clamp(52px, 9vw, 104px);
  z-index: 0;
  pointer-events: none;
  display: block;
}
.footer-wave path { fill: var(--paper); }
.site-footer .container { position: relative; z-index: 1; }

/* =========================================================
   HERO + AGENCE — affiche diagonale (poster style)
   ========================================================= */
#agence::before { display: none; }

.hero-poster {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding-top: 150px;
  padding-bottom: clamp(3rem, 7vw, 5rem);
  min-height: 82vh;
  display: flex;
  align-items: center;
}
.hero-poster > .container { margin-inline: 0; width: 100%; }
.hero-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--paper);
  clip-path: url(#heroDiagClip);
}
.hero-poster::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: clamp(60px, 6vw, 96px);
  height: clamp(60px, 6vw, 96px);
  background: linear-gradient(135deg, var(--paper-alt) 50%, #D8D5C9 50%);
  clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
  box-shadow: -6px -6px 14px -10px rgba(11, 13, 16, 0.35);
}
.hero-poster-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.hero-poster-text { max-width: 900px; flex: 1 1 auto; min-width: 0; margin-left: clamp(2.5rem, 5.5vw, 5rem); }
.hero-poster-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.6rem;
}
.hero-poster-title {
  font-family: "Poppins", var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: #fff;
  margin: 0;
}
.hero-poster-tagline {
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, 0.68);
  max-width: 36ch;
  margin: 1.3rem 0 0;
}
.hero-poster-cta {
  margin-top: 1.8rem;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.65rem 1.3rem;
  font-size: 13.6px;
  border-radius: 999px;
  box-shadow: 0 12px 24px -14px rgba(218, 106, 39, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-poster-cta:hover { background: var(--ink); color: #fff; }
.hero-poster-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.4rem;
}
.hp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.4rem 1rem 0.4rem 0.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.hp-link:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); }
.hp-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.hero-poster-mark {
  position: absolute;
  z-index: 2;
  top: clamp(90px, 11vw, 130px);
  right: clamp(1.5rem, 5vw, 4rem);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px -10px rgba(11, 13, 16, 0.4);
}
.hero-poster-mark-img { width: 34px; height: 34px; object-fit: contain; }

.hero-poster-diamonds {
  position: relative;
  z-index: 1;
  pointer-events: none;
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 340px);
  height: clamp(420px, 50vw, 540px);
}
.hp-d {
  position: absolute;
  width: clamp(72px, 8vw, 118px);
  height: clamp(72px, 8vw, 118px);
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 34px -16px rgba(11, 13, 16, 0.45);
}
.hp-d svg { transform: rotate(-45deg); }
.hp-d-photo {
  background-size: cover;
  background-position: center;
  background-color: #E4E1D6;
  color: rgba(11, 13, 16, 0.28);
  border: 1.5px dashed rgba(11, 13, 16, 0.18);
}
.hp-d-1 { top: 6%; left: 60%; }
.hp-d-2 { top: 24%; left: 38%; }
.hp-d-3 { top: 42%; left: 62%; }
.hp-d-4 { top: 60%; left: 38%; background: var(--accent); }
.hp-d-5 { top: 78%; left: 62%; }
.hp-d-6 { top: 95%; left: 40%; }

@media (max-width: 900px) {
  .hero-poster { padding-top: 120px; min-height: auto; }
  .hero-poster::after { display: none; }
  .hero-poster-inner { flex-direction: column; align-items: flex-start; }
  .hero-poster-diamonds { display: none; }
  .hero-poster-mark { display: none; }
  .hero-poster-text { max-width: none; }
}

/* ---- Agence : suite de la même affiche diagonale ---- */
.agence-poster {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.agence-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--paper);
  clip-path: url(#agenceDiagClip);
}
.agence-poster-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.ap-text { max-width: 480px; }
.ap-desc { color: rgba(255, 255, 255, 0.72); font-size: 1.05rem; line-height: 1.5; margin: 0.8rem 0 1.6rem; max-width: 42ch; }
.ap-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  background: var(--accent);
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out);
}
.ap-cta:hover { transform: translateY(-2px); }
.ap-cta span { display: inline-block; transition: transform 0.25s var(--ease-out); }
.ap-cta:hover span { transform: translateX(4px); }

.ap-diamonds { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; display: flex; gap: 1.4rem; flex: 0 0 auto; }
.ap-d {
  width: clamp(76px, 8vw, 108px);
  height: clamp(76px, 8vw, 108px);
  border-radius: 16px;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 26px -14px rgba(11, 13, 16, 0.4);
}
.ap-d span { display: block; transform: rotate(-45deg); text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; line-height: 1.15; padding: 0 6px; }
.ap-d-1 { background: var(--accent); color: #fff; }
.ap-d-2 { background: var(--paper); color: var(--ink); margin-top: 1.6rem; }
.ap-d-3 { background: var(--logo-maroon); color: #fff; margin-top: 3.2rem; }
.ap-d-4 { background: var(--paper); color: var(--ink); margin-top: 1.6rem; }
.ap-d-5 { background: var(--accent); color: #fff; }

@media (max-width: 900px) {
  .agence-poster::after { display: none; }
  .agence-poster-inner { flex-direction: column; align-items: flex-start; }
  .ap-diamonds { flex-wrap: wrap; }
  .ap-d { margin-top: 0 !important; }
}

/* =========================================================
   HERO + AGENCE — affiche "blob" (fond clair, gros bloc coloré)
   ========================================================= */
.hero-events {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(rgba(11, 13, 16, 0.05) 1px, transparent 1.4px) 0 0 / 16px 16px,
    var(--paper);
  padding-top: 150px;
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.he-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 2.2rem);
}
.he-blob {
  position: relative;
  z-index: 2;
  background: linear-gradient(155deg, var(--accent) 0%, #A8431A 130%);
  border-radius: 28px 28px clamp(80px, 16vw, 220px) 28px;
  padding: clamp(2.2rem, 5vw, 3.2rem) clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 4.5rem);
  max-width: 640px;
  margin-left: clamp(2.5rem, 5.5vw, 5rem);
  box-shadow: 0 30px 60px -30px rgba(11, 13, 16, 0.45);
}
.he-title {
  font-family: "Poppins", var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: #fff;
  margin: 0;
}
.he-rule { display: block; width: 64px; height: 3px; background: rgba(255, 255, 255, 0.65); border-radius: 2px; margin: 1.2rem 0; }
.he-tagline { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: rgba(255, 255, 255, 0.85); max-width: 38ch; margin: 0 0 1.7rem; line-height: 1.5; }
.he-cta {
  background: #fff;
  color: var(--ink);
  border: none;
  padding: 0.65rem 1.3rem;
  font-size: 13.6px;
  border-radius: 999px;
  box-shadow: 0 12px 24px -14px rgba(11, 13, 16, 0.35);
}
.he-cta:hover { background: var(--ink); color: #fff; }

.he-photo {
  position: relative;
  z-index: 1;
  flex: 1 1 260px;
  align-self: stretch;
  min-height: 320px;
  margin-top: 30px;
  border-radius: clamp(60px, 10vw, 140px) 28px 28px 28px;
  background: #E4E1D6;
  border: 1.5px dashed rgba(11, 13, 16, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(11, 13, 16, 0.28);
}

@media (max-width: 860px) {
  .hero-events { padding-top: 120px; }
  .he-inner { flex-direction: column; }
  .he-blob { margin-left: 0; max-width: none; }
  .he-photo { width: 100%; min-height: 220px; margin-top: 0; }
}

/* ---- Agence : cartes services avec étiquette (suite de l'affiche) ---- */
.agence-events {
  position: relative;
  background: var(--paper-alt);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.ae-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.8rem;
}
.ae-cards { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.ae-card {
  flex: 1 1 180px;
  max-width: 220px;
  background: var(--paper);
  border: 2px solid var(--accent);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 30px -20px rgba(11, 13, 16, 0.3);
}
.ae-card-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #E4E1D6;
  color: rgba(11, 13, 16, 0.28);
  border-bottom: 2px solid var(--accent);
}
.ae-card-label {
  display: block;
  text-align: center;
  padding: 0.75rem 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  background: var(--accent);
}
.ae-desc { font-size: 1.05rem; color: var(--ink-70); text-align: center; max-width: 60ch; margin: 0 auto 1.5rem; line-height: 1.5; }
.ae-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent);
  text-decoration: none;
}
.ae-cta span { display: inline-block; transition: transform 0.25s var(--ease-out); }
.ae-cta:hover span { transform: translateX(4px); }

/* =========================================================
   Solutions (accueil) : emblème central + pilules dégradées
   ========================================================= */
#solutions-preview { background: #fff; }
#solutions-preview::before { display: none; }
.sx { position: relative; }
.sx-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.sx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--logo-maroon);
}
.sx-eyebrow::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--logo-gold), var(--accent));
}
.sx-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0.7rem 0 0;
  text-wrap: balance;
  background: linear-gradient(90deg, var(--logo-gold) 0%, var(--accent) 45%, var(--logo-maroon) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}
.sx-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(210px, 24vw, 310px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.sx-col { display: flex; flex-direction: column; gap: clamp(1rem, 1.8vw, 1.5rem); }
/* Les pilules du milieu s'écartent de l'emblème : l'ensemble dessine un arc. */
.sx-col--left { align-items: flex-end; }
.sx-col--left .sx-pill:nth-child(2) { margin-right: clamp(0px, 2.6vw, 2.6rem); width: min(calc(100% - clamp(0px, 2.6vw, 2.6rem)), 25rem); }
.sx-col--right { align-items: flex-start; }
.sx-col--right .sx-pill:nth-child(2) { margin-left: clamp(0px, 2.6vw, 2.6rem); width: min(calc(100% - clamp(0px, 2.6vw, 2.6rem)), 25rem); }
.sx-emblem svg {
  display: block;
  width: 100%;
  height: auto;
  animation: sx-spin 70s linear infinite;
  filter: drop-shadow(0 22px 26px rgba(108, 60, 57, 0.22));
}
@keyframes sx-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .sx-emblem svg { animation: none; }
}
.sx-pill {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
  width: min(100%, 25rem);
  padding: 0.7rem clamp(1.3rem, 2vw, 1.8rem) 0.7rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(100deg, #7B3B3D 0%, var(--accent) 58%, var(--logo-gold) 100%);
  box-shadow: 0 22px 34px -22px color-mix(in srgb, var(--logo-maroon) 75%, transparent);
  transition: translate 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.sx-pill:hover {
  translate: 0 -4px;
  box-shadow: 0 30px 40px -22px color-mix(in srgb, var(--logo-maroon) 85%, transparent);
}
.sx-pill:active { scale: 0.985; }
.sx-pill:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sx-pill-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(3.2rem, 4.6vw, 4rem);
  height: clamp(3.2rem, 4.6vw, 4rem);
  border-radius: 50%;
  background: #fff;
  color: var(--logo-maroon);
}
.sx-pill-icon svg { width: 46%; height: 46%; }
.sx-pill-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.sx-pill-text b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  line-height: 1.2;
}
.sx-pill-text span { font-size: clamp(0.72rem, 0.85vw, 0.8rem); line-height: 1.4; opacity: 0.92; }
.sx-foot {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3.2rem);
  padding-top: 1.1rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, rgba(248, 176, 39, 0.15), var(--logo-gold) 30%, var(--accent) 70%, var(--logo-maroon)) 1;
}
.sx-foot-label {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
}
.sx-foot-text { flex: 1; margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--ink-70); max-width: 62ch; }
.sx-foot-link {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.sx-foot-link:hover { color: var(--accent); }
@media (max-width: 900px) {
  .sx-stage { grid-template-columns: 1fr; gap: 1rem; }
  .sx-emblem { order: -1; width: 150px; margin: 0 auto 0.5rem; }
  .sx-col--left, .sx-col--right { align-items: stretch; }
  .sx-col--left .sx-pill:nth-child(2), .sx-col--right .sx-pill:nth-child(2) { margin: 0; width: 100%; }
  .sx-pill { width: 100%; }
  .sx-foot { flex-wrap: wrap; }
  .sx-foot-text { flex-basis: 100%; order: 3; }
}

/* =========================================================
   Produits (accueil) : description à gauche, disques superposés à droite
   ========================================================= */
#produits { background: linear-gradient(180deg, #FFF7F0 0%, #FBE7D9 100%); }
#produits::before { display: none; }
.pr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.pr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--logo-maroon);
}
.pr-eyebrow::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--logo-gold), var(--accent));
}
.pr-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--logo-maroon);
  max-width: 20ch;
  margin: 0.8rem 0 1rem;
  text-wrap: balance;
}
.pr-desc { font-size: 1rem; line-height: 1.65; color: var(--ink-70); max-width: 46ch; margin: 0 0 1.6rem; }
.pr-list { display: flex; flex-direction: column; gap: 0.8rem; max-width: 38rem; }
.pr-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem 0.9rem 0.9rem;
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 16px 30px -22px rgba(11, 13, 16, 0.4);
  transition: translate 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.pr-item:hover { translate: 0 -3px; box-shadow: 0 22px 34px -22px rgba(11, 13, 16, 0.5); }
.pr-item:active { scale: 0.99; }
.pr-item:focus-visible, .pr-disc:focus-visible, .pr-all:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pr-item-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
}
.pr-item-icon svg { width: 1.3rem; height: 1.3rem; }
.pr-item-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.pr-item-body b { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.pr-item-body span { font-size: 0.8rem; line-height: 1.45; color: var(--ink-70); }
.pr-item-arrow { flex: 0 0 auto; color: var(--c); transition: translate 0.25s var(--ease-out); }
.pr-item-arrow svg { width: 1.1rem; height: 1.1rem; display: block; }
.pr-item:hover .pr-item-arrow { translate: 4px 0; }
.pr-all {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.pr-all:hover { color: var(--accent); }

/* Disques blancs superposés, chacun avec un secteur coloré. */
.pr-visual {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.pr-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pr-arcs path { fill: none; stroke-width: 0.6; stroke-linecap: round; opacity: 0.7; vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.pr-disc {
  position: absolute;
  container-type: inline-size;
  border-radius: 50%;
  text-decoration: none;
  color: var(--ink);
  background: radial-gradient(circle at 30% 24%, #fff 0%, #F6F6F8 60%, #EBEBEF 100%);
  box-shadow:
    0 34px 44px -22px rgba(30, 30, 50, 0.32),
    0 8px 14px -8px rgba(30, 30, 50, 0.16),
    inset 0 -8px 16px rgba(30, 30, 50, 0.04);
  transition: translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.pr-disc:hover { translate: 0 -6px; }
.pr-disc:active { scale: 0.985; }
.pr-pie { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.12)); }
.pr-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 17%;
  height: 17%;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  border: 0.9cqw solid #fff;
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.35), 0 0 0 1.4cqw rgba(255, 255, 255, 0.7);
}
.pr-badge svg { width: 55%; height: 55%; }
.pr-name {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #3a3a44;
}
.pr-tag {
  position: absolute;
  font-size: 4.6cqw;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-70);
  white-space: nowrap;
}
/* A : grand disque au premier plan */
.pr-disc--nfc { left: 38%; top: 31%; width: 60%; aspect-ratio: 1; z-index: 3; }
.pr-disc--nfc .pr-name { left: 53%; top: 15%; font-size: 14cqw; }
.pr-disc--nfc .pr-tag { left: 53%; top: 32%; width: 34%; white-space: normal; line-height: 1.35; font-size: 3.8cqw; }
/* B : disque du haut, sous A */
.pr-disc--saas { left: 8%; top: 0; width: 50%; aspect-ratio: 1; z-index: 2; }
.pr-disc--saas .pr-name { left: 12%; top: 64%; font-size: 15cqw; }
.pr-disc--saas .pr-tag { left: 12%; top: 82%; }
/* C : disque de gauche, sous A */
.pr-disc--cm { left: 0; top: 50%; width: 40%; aspect-ratio: 1; z-index: 1; }
.pr-disc--cm .pr-name { left: 12%; top: 66%; font-size: 9.5cqw; line-height: 1.1; }
.pr-disc--cm .pr-tag { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pr-disc, .pr-item { transition: none; }
}
@media (max-width: 900px) {
  .pr { grid-template-columns: 1fr; }
  .pr-visual { max-width: 460px; order: 2; }
}

/* =========================================================
   Hero : pont de puzzle "Marketing digital" entre le business et la croissance
   ========================================================= */
.hero-bridge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateY(-20%);
}
.hero-bridge .br-side rect, .hero-bridge .br-side circle { fill: #A6420C; }
.hero-bridge .br-top rect, .hero-bridge .br-top circle:not(.br-notch) { fill: url(#brOrange); }
.hero-bridge .br-notch { fill: #C64C0E; opacity: 0.55; }
.hero-bridge .br-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.04em;
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(120, 40, 0, 0.45);
  stroke-width: 1.5px;
}
.hero-bridge .br-label text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.02em;
  paint-order: stroke;
  stroke-linejoin: round;
}
.hero-bridge .br-label--dark text { fill: #F4F4F6; stroke: #8b8b92; stroke-width: 1.5px; filter: drop-shadow(2px 3px 0 #0d0d0f); }
.hero-bridge .br-label--light text { fill: #3A3A40; stroke: #fff; stroke-width: 1px; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.25)); font-size: 24px; }
/* Le pont flotte : montée/descente lente de l'ensemble, plus un léger
   décalage de chaque pièce ("translate" est indépendant du "transform"). */
.hero-bridge .br-float { animation: br-float 5s ease-in-out infinite; }
@keyframes br-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-13px); }
}
.hero-bridge .br-piece {
  animation: br-in 0.9s var(--ease-out) both, br-bob 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) * 2 + 0.9s);
}
@keyframes br-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@keyframes br-in {
  from { opacity: 0; transform: translateY(46px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-bridge .br-city { animation: br-fade 1.4s var(--ease-out) 0.2s both; }
@keyframes br-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-bridge .br-piece, .hero-bridge .br-city, .hero-bridge .br-float { animation: none; }
}
.hero-bridge .br-word--sm { font-size: 14.5px; letter-spacing: 0.03em; }
.hero-bridge .br-word--lg { font-size: 22px; letter-spacing: 0.08em; }

/* =========================================================
   Pourquoi Digital Media Africa : ampoule en papier froissé + 4 raisons
   ========================================================= */
#pourquoi {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFF7F0 0%, #FBE7D9 100%);
  padding-bottom: clamp(6.5rem, 12vw, 9rem);
}
#pourquoi::before { display: none; }
.wy {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.wy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--logo-maroon);
}
.wy-eyebrow::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--logo-gold), var(--accent));
}
.wy-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--logo-maroon);
  margin: 0.9rem 0 0.5rem;
  max-width: 17ch;
}
.wy-title span {
  background: linear-gradient(90deg, var(--accent), var(--logo-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}
.wy-underline { display: block; width: min(320px, 70%); height: 14px; margin-bottom: 2rem; }
.wy-note {
  position: relative;
  max-width: 30rem;
  padding: 1.6rem 1.4rem 1.3rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 24px 34px -22px rgba(108, 60, 57, 0.5), 0 4px 10px -4px rgba(108, 60, 57, 0.18);
  rotate: -3deg;
}
.wy-note-tape {
  position: absolute;
  left: 50%;
  top: -14px;
  width: 6.2rem;
  height: 1.7rem;
  translate: -50% 0;
  background: color-mix(in srgb, var(--accent) 78%, transparent);
  rotate: -2deg;
}
.wy-note-quote {
  position: absolute;
  left: 1rem;
  top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
}
.wy-note p {
  margin: 1.2rem 0 0;
  padding-left: 0.4rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
.wy-scene {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 560 / 600;
  margin-inline: auto;
}
.wy-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wy-ball { animation: wy-float 6s ease-in-out infinite; }
@keyframes wy-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.wy-glow { animation: wy-glow 4s ease-in-out infinite; transform-origin: 290px 212px; }
@keyframes wy-glow { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
.wy-tags { position: absolute; inset: 0; }
.wy-tag {
  position: absolute;
  width: 28%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.wy-tag-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: #fff;
  color: var(--logo-maroon);
  box-shadow: 0 12px 20px -12px rgba(108, 60, 57, 0.6);
  margin-bottom: 0.3rem;
}
.wy-tag-icon svg { width: 1.35rem; height: 1.35rem; }
.wy-tag b { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.72rem, 1vw, 0.88rem); line-height: 1.25; color: var(--ink); }
.wy-tag > span:last-child { font-size: clamp(0.66rem, 0.85vw, 0.76rem); line-height: 1.4; color: var(--ink-70); }
.wy-t1 { left: 0; top: 4%; }
.wy-t2 { right: 0; top: 0; }
.wy-t3 { right: 0; top: 42%; }
.wy-t4 { left: 0; top: 47%; }
.wy-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(70px, 10vw, 130px);
  z-index: 0;
  pointer-events: none;
}
#pourquoi > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .wy-ball, .wy-glow { animation: none; }
}
@media (max-width: 900px) {
  .wy { grid-template-columns: 1fr; }
  .wy-title { max-width: none; }
  .wy-scene { aspect-ratio: auto; max-width: 460px; }
  .wy-art { position: relative; height: auto; aspect-ratio: 560 / 600; }
  .wy-tags { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1rem; margin-top: 1.4rem; }
  .wy-tag { position: static; width: auto; }
}

/* Clearance sous le header (position: fixed) pour la première section de
   la page : par défaut une simple marge, mais le Hero (ci-dessous) la
   remplace par du padding pour que son propre fond continue sous le
   header au lieu de laisser apparaître le fond uni de la page. */
main#top > section:first-child { margin-top: 100px; }
main#top > #hero.hero-why:first-child {
  margin-top: 0;
  padding-top: calc(100px + clamp(4.5rem, 8.5vw, 7rem));
}

/* La Hero reprend le design de "Pourquoi Digital Media Africa" (mêmes
   classes .wy-*), avec les réglages de section (fond, position, marge pour
   la vague) répétés ici puisque #pourquoi les déclare pour lui-même,
   plus le bouton d'appel à l'action propre au Hero. */
#hero.hero-why {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFF7F0 0%, #FBE7D9 100%);
  padding-bottom: clamp(6.5rem, 12vw, 9rem);
}
#hero.hero-why > .container { position: relative; z-index: 1; }
.hw-cta { margin-top: 1.4rem; border-radius: 999px; }
.hero-why .wy-note { margin-bottom: 0; max-width: 21rem; }
/* Remonte le bloc de texte (titre, citation, bouton) en haut de sa colonne
   au lieu de le centrer verticalement sur la hauteur de l'illustration. */
.hero-why .wy-text { align-self: start; margin-top: 4.6rem; }
.hero-why .wy-scene { align-self: start; margin-top: 0; }
/* Le titre du Hero est une vraie phrase (plus long que "Penser. Créer.
   Performer.") : on lui laisse plus de largeur et une taille plus sobre,
   et le texte prend un peu plus de place que l'illustration. */

/* ---------- Hero : preuves de confiance (Maroc + solutions + Google Partner) ---------- */
.hero-proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  margin-top: 1.9rem;
  max-width: 34rem;
}
.hero-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.hero-proof-row .hero-proof-badge {
  flex: 1 1 200px;
  max-width: 250px;
  min-width: 0;
}
.hero-proof-row .hero-proof-text { min-width: 0; }
.hero-proof-badge {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 1.4rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 34px -18px rgba(108, 60, 57, 0.42);
  animation: hero-proof-float 5.5s ease-in-out infinite;
}
.hero-proof-badge--1 { animation-delay: 0s; }
.hero-proof-badge--2 { animation-delay: 0.7s; }
.hero-proof-badge--3 { animation-delay: 1.4s; }
@keyframes hero-proof-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero-proof-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
}
.hero-proof-icon svg { width: 1.5rem; height: 1.5rem; }
.hero-proof-text { display: flex; flex-direction: column; gap: 0.15rem; }
.hero-proof-text b { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); line-height: 1.25; }
.hero-proof-text span { font-size: 0.8rem; color: var(--ink-70); line-height: 1.35; }
.hero-proof-badge--google {
  padding: 0.75rem 1.1rem;
  background: transparent;
  box-shadow: none;
}
.hero-proof-badge--google img {
  display: block;
  width: 196px;
  height: auto;
  border-radius: 12px;
  filter: drop-shadow(0 18px 26px rgba(108, 60, 57, 0.36));
}
@media (max-width: 480px) {
  .hero-proof { max-width: none; }
  .hero-proof-row { flex-direction: column; }
  .hero-proof-badge { padding: 0.85rem 1.1rem; }
  .hero-proof-icon { width: 2.6rem; height: 2.6rem; }
  .hero-proof-icon svg { width: 1.25rem; height: 1.25rem; }
  .hero-proof-text b { font-size: 0.9rem; }
  .hero-proof-badge--google img { width: 160px; }
  .hero-proof-text span { display: none; }
}

/* =========================================================
   Menu plein écran : style "Verre chaud"
   Remplace l'ancien style sombre "Glitch tech" (les anciennes règles
   restent plus haut, ce bloc les surcharge : couleurs, fond, liens en
   pastilles de verre translucide).
   ========================================================= */
.mobile-nav {
  background: linear-gradient(150deg, #FCEBD8 0%, #F6C9A0 55%, #E58A5A 100%);
}
/* Deux taches floues (une claire, une marron) derrière le verre. */
.mobile-nav::before {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  inset: auto;
  top: -18%; left: -10%;
  width: min(60vw, 620px); height: min(60vw, 620px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
  filter: blur(46px);
}
.mobile-nav::after {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  left: auto; top: auto;
  right: -12%; bottom: -20%;
  width: min(52vw, 560px); height: min(52vw, 560px);
  border-radius: 50%;
  background: rgba(108, 60, 57, 0.4);
  opacity: 1;
  filter: blur(50px);
}
.mobile-nav-links { gap: 0.75rem; max-width: 36rem; }
.mobile-nav-links > .mobile-nav-item {
  font-size: clamp(1.1rem, 2.3vw, 1.6rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  padding: 0.95rem 1.4rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 18px 30px -22px rgba(108, 60, 57, 0.55);
  flex-wrap: wrap;
  transition: opacity 0.45s ease, transform 0.45s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.mobile-nav-links > .mobile-nav-item::before {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--logo-maroon);
  opacity: 0.55;
}
.mobile-nav-links > a.active,
.mobile-nav-links > a:hover,
.mobile-nav-links > a:active,
.mobile-nav-group:hover > .mobile-nav-group-trigger {
  color: var(--ink);
  text-shadow: none;
}
.mobile-nav-links > a.active,
.mobile-nav-links > .mobile-nav-group:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.9);
}
.mobile-nav-links > a:hover,
.mobile-nav-links > .mobile-nav-group:hover {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 34px -22px rgba(108, 60, 57, 0.65);
}
/* Le délai d'apparition en cascade ne doit pas ralentir le survol. */
.mobile-nav-links > .mobile-nav-item:hover { transition-delay: 0s !important; }
.mobile-nav-links > a:focus-visible,
.mobile-nav-group-trigger:focus-visible { outline: 3px solid var(--logo-maroon); outline-offset: 3px; border-radius: 8px; }
.mobile-nav-group-trigger .mobile-nav-chevron { border-color: var(--logo-maroon); }
.mobile-nav-group-trigger.active { color: var(--accent); }
.mobile-nav-sub-heading { color: rgba(11, 13, 16, 0.45); }
.mobile-nav-sub a { color: var(--ink-70); }
.mobile-nav-sub a:hover, .mobile-nav-sub a:active { color: var(--accent); }

.mobile-nav-info { border-left-color: rgba(108, 60, 57, 0.22); }
.mobile-nav-info-label {
  font-family: var(--font-display);
  color: var(--logo-maroon);
  letter-spacing: 0.12em;
}
.mobile-nav-info-link { color: var(--ink-70); }
.mobile-nav-info-link:hover { color: var(--accent); }
.mobile-nav-social a {
  border-color: rgba(108, 60, 57, 0.3);
  color: var(--logo-maroon);
  background: rgba(255, 255, 255, 0.35);
}
.mobile-nav-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 900px) {
  .mobile-nav-info { border-top-color: rgba(108, 60, 57, 0.22); }
}
.mobile-nav-foot { border-top-color: rgba(108, 60, 57, 0.22); }
.mobile-nav-cta,
.mobile-nav-foot .tel-link {
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 16px 26px -16px rgba(108, 60, 57, 0.7);
}
.mobile-nav-cta:hover,
.mobile-nav-foot .tel-link:hover { background: var(--logo-maroon); color: #fff; }

/* Pas d'espace résiduel sous les groupes repliés, et le contenu ne se
   coupe plus en haut quand il est plus haut que l'écran (marges auto au
   lieu de justify-content: center). */
.mobile-nav-links > .mobile-nav-group { row-gap: 0; }
.mobile-nav { justify-content: flex-start; }
.mobile-nav-inner { margin: auto; }

/* =========================================================
   Pourquoi nous choisir (accueil) : texte à gauche, escalier à droite
   ========================================================= */
.pn { background: linear-gradient(180deg, #fff 0%, #FFF7F0 100%); padding-block: clamp(4rem, 9vw, 7rem); }
.pn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.pn-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.pn-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 1rem 0 0;
}
.pn-title span { color: var(--accent); }
.pn-desc { margin: 1.3rem 0 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.65; color: var(--muted); }
.pn-list { list-style: none; margin: 2rem 0 2.2rem; padding: 0; display: grid; gap: 1.15rem; }
.pn-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.pn-list b { display: block; font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.pn-list li span:not(.pn-check) { display: block; margin-top: 0.2rem; font-size: 0.92rem; line-height: 1.5; color: var(--muted); }
.pn-check {
  flex: none;
  position: relative;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--logo-gold), var(--accent));
  box-shadow: 0 6px 14px -6px rgba(218, 106, 39, 0.7);
}
.pn-check::after {
  content: "";
  position: absolute;
  left: 0.56rem; top: 0.3rem;
  width: 0.4rem; height: 0.75rem;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.pn-visual {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1.05;
  justify-self: end;
}
.pn-halo {
  position: absolute;
  inset: 8% 0 0 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(248, 176, 39, 0.28), rgba(218, 106, 39, 0.1) 60%, transparent 100%);
  filter: blur(20px);
  z-index: 0;
}
.pn-head { position: absolute; top: 1%; left: 0; z-index: 2; font-size: 5.2cqw; line-height: 1.25; }
.pn-head b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15em; color: #1E2A5A; letter-spacing: -0.01em; }
.pn-head span { display: block; margin-top: 0.3em; font-size: 0.68em; line-height: 1.35; color: var(--logo-maroon); max-width: 11em; }
.pn-head b::after { content: ""; display: block; width: 2.4em; height: 3px; margin-top: 0.5em; border-radius: 3px; background: linear-gradient(90deg, var(--logo-gold), var(--accent)); }
.pn-target { position: absolute; top: 0; right: 2%; width: 26%; z-index: 2; filter: drop-shadow(0 12px 14px rgba(108, 60, 57, 0.25)); }
.pn-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 8px rgba(248, 176, 39, 0.9)); }
.pn-path path { stroke-dasharray: 2 9; animation: pnFlow 3s linear infinite; }
@keyframes pnFlow { to { stroke-dashoffset: -44; } }

.pn-steps { position: absolute; inset: 0; z-index: 2; }
.pn-step {
  position: absolute;
  width: 62%;
  height: 15.5%;
  display: flex;
  align-items: center;
  gap: 4cqw;
  padding: 0 4cqw;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6E9DD 100%);
  box-shadow: 0 2.2cqw 0 #E8D4C3, 0 6cqw 6cqw -3cqw rgba(108, 60, 57, 0.4);
  transition: translate 0.4s var(--ease-out);
}
.pn-step:hover { translate: 0 -4px; }
.pn-s1 { left: 0; bottom: 5%; }
.pn-s2 { left: 12.5%; bottom: 24%; }
.pn-s3 { left: 25%; bottom: 43%; }
.pn-s4 { left: 37.5%; bottom: 62%; }
.pn-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 9.5cqw; height: 9.5cqw;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--logo-gold), var(--accent));
  box-shadow: 0 8px 16px -8px rgba(218, 106, 39, 0.8);
}
.pn-ico svg { width: 52%; height: 52%; }
.pn-s2 .pn-ico { background: linear-gradient(135deg, var(--accent), var(--logo-red-orange)); }
.pn-s3 .pn-ico { background: linear-gradient(135deg, var(--logo-red-orange), var(--logo-maroon)); }
.pn-s4 .pn-ico { background: linear-gradient(135deg, var(--logo-maroon), #3A1B16); }
.pn-step-txt { display: block; min-width: 0; }
.pn-step-txt b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 5.4cqw; line-height: 1.1; letter-spacing: -0.01em; color: #1E2A5A; text-transform: uppercase; }
.pn-step-txt span { display: block; margin-top: 0.35em; font-size: 2.5cqw; line-height: 1.3; color: var(--muted); }
.pn-foot { position: absolute; right: 0; bottom: 0; z-index: 2; font-family: var(--font-display); font-size: 2.2cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--logo-maroon); }
@media (max-width: 900px) {
  .pn-grid { grid-template-columns: 1fr; }
  .pn-visual { justify-self: center; }
}
@media (max-width: 480px) {
  .pn-step { width: 68%; }
  .pn-s2 { left: 10.5%; } .pn-s3 { left: 21%; } .pn-s4 { left: 32%; }
  .pn-step-txt span { font-size: 2.9cqw; }
  .pn-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pn-path path { animation: none; } }

/* =========================================================
   Section Contact / CTA finale (accueil) : conclusion avant le footer
   ========================================================= */
.cta-final { background: var(--paper); padding-block: clamp(4rem, 9vw, 7.5rem) clamp(6rem, 11vw, 9rem); }
.cta-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--paper);
  background: linear-gradient(160deg, #15100F 0%, #2A1613 55%, #3A1B16 100%);
  border-radius: 28px;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.5rem, 6vw, 5rem);
  box-shadow: 0 40px 80px -40px rgba(58, 27, 22, 0.55);
}
.cta-panel::before,
.cta-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.cta-panel::before { width: 46%; aspect-ratio: 1; top: -28%; left: -8%; background: var(--accent); opacity: 0.55; animation: ctaFloat 14s ease-in-out infinite alternate; }
.cta-panel::after { width: 40%; aspect-ratio: 1; bottom: -30%; right: -6%; background: var(--logo-gold); opacity: 0.32; animation: ctaFloat 18s ease-in-out infinite alternate-reverse; }
@keyframes ctaFloat { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4%, 6%, 0) scale(1.12); } }
.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--logo-gold);
}
.cta-eyebrow::before, .cta-eyebrow::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.6; }
.cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 1.4rem auto 0;
  color: #fff;
}
.cta-title span { color: var(--logo-gold); }
.cta-text {
  max-width: 34rem;
  margin: 1.5rem auto 0;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.cta-actions { margin-top: clamp(2rem, 4vw, 2.8rem); display: flex; justify-content: center; }
.cta-btn {
  font-size: clamp(0.8rem, 1.1vw, 0.9rem);
  padding: 1.15rem 2.4rem;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 18px 40px -14px rgba(218, 106, 39, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.cta-btn:hover { background: #fff; color: var(--ink); }
.cta-btn .cta-arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }
.cta-btn:hover .cta-arrow { transform: translateX(5px); }
@media (max-width: 640px) {
  .cta-panel { border-radius: 20px; }
  .cta-eyebrow::before, .cta-eyebrow::after { width: 1rem; }
  .cta-btn { width: 100%; justify-content: center; white-space: normal; padding-inline: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-panel::before, .cta-panel::after { animation: none; }
}

/* =========================================================
   Footer moderne : même fond que le Hero (dégradé pêche), texte sombre
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #FFF7F0 0%, #FBE7D9 100%);
  color: var(--ink);
  border-top: 0;
  padding-block: clamp(5.5rem, 10vw, 8rem) 1.6rem;
}
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.site-footer::before { width: 34vw; aspect-ratio: 1; top: 8%; left: -10vw; background: var(--logo-gold); opacity: 0.28; }
.site-footer::after { width: 30vw; aspect-ratio: 1; bottom: -14vw; right: -6vw; background: var(--accent); opacity: 0.22; }
.footer-wave path { fill: var(--paper); }
.footer-top {
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.3fr;
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  padding-bottom: 2.75rem;
  border-bottom: 1px solid rgba(108, 60, 57, 0.16);
}
.footer-brand .logo {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  border-radius: 0;
}
.footer-brand .logo .logo-img { height: 46px; }
.footer-brand p { color: var(--logo-maroon); opacity: 0.8; max-width: 34ch; font-size: 0.9rem; line-height: 1.65; margin-top: 1.2rem; }
.footer-col h4 {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--logo-maroon);
  margin-bottom: 1.3rem;
  padding-bottom: 0.55rem;
  background: linear-gradient(90deg, var(--logo-gold), var(--accent)) left bottom / 1.8rem 2px no-repeat;
}
.footer-col ul { gap: 0.55rem; }
.footer-col a, .footer-col span { font-size: 0.92rem; color: rgba(11, 13, 16, 0.78); }
.footer-col a {
  position: relative;
  display: inline-block;
  transition: color 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.footer-col a:hover { color: var(--accent); transform: translateX(4px); }
.footer-col a:hover::after { transform: scaleX(1); }
.footer-newsletter p { font-size: 0.9rem; color: rgba(11, 13, 16, 0.65); margin-bottom: 1rem; }
.footer-newsletter-form {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(218, 106, 39, 0.28);
  padding: 0.3rem;
  box-shadow: 0 14px 30px -16px rgba(108, 60, 57, 0.4);
  transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.footer-newsletter-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(218, 106, 39, 0.16), 0 14px 30px -16px rgba(108, 60, 57, 0.4); }
.footer-newsletter-form input { color: var(--ink); font-size: 0.88rem; padding: 0.6rem 0.9rem; }
.footer-newsletter-form input::placeholder { color: rgba(11, 13, 16, 0.42); }
.footer-newsletter-form button {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--logo-gold), var(--accent));
  transition: transform 0.3s var(--ease-out);
}
.footer-newsletter-form button:hover { transform: translateX(3px) scale(1.05); }
.footer-bottom { padding-top: 1.5rem; font-size: 0.82rem; color: rgba(108, 60, 57, 0.85); }
.footer-bottom .footer-social { gap: 0.6rem; }
.footer-bottom .footer-social a {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: #fff;
  color: var(--logo-maroon);
  font-size: 0.8rem;
  box-shadow: 0 8px 18px -10px rgba(108, 60, 57, 0.5);
  transition: transform 0.3s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.footer-bottom .footer-social a svg { width: 1.05rem; height: 1.05rem; }
.footer-bottom .footer-social a:hover { background: var(--accent); color: #fff; transform: translateY(-3px); }
.footer-mark {
  position: relative;
  z-index: 0;
  margin-top: clamp(1rem, 3vw, 2rem);
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 9.4vw, 9.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, rgba(218, 106, 39, 0.28), rgba(218, 106, 39, 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  user-select: none;
  pointer-events: none;
}
.pn { position: relative; overflow: hidden; }
.footer-mark { font-size: clamp(1.5rem, 6.3vw, 8.5rem); }
@media (max-width: 1100px) { .footer-top { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-newsletter { grid-column: 1 / -1; } .footer-bottom { justify-content: center; text-align: center; } }
@media (max-width: 460px) { .footer-top { grid-template-columns: 1fr; } }

/* =========================================================
   Responsive mobile : ajustements ciblés (espacements, proportions)
   ========================================================= */
@media (max-width: 900px) {
  /* Hero : rapproche le contenu du header (le header mobile fait ~76px) */
  main#top > #hero.hero-why:first-child { padding-top: calc(76px + 2.75rem); }
  .hero-why .wy-text { margin-top: 0.4rem; }
  /* Pourquoi nous choisir : escalier plus haut, entête et cible sans chevauchement */
  .pn-visual { aspect-ratio: 1 / 1.2; max-width: 460px; }
  .pn-head { font-size: 6cqw; }
  .pn-head span { max-width: 13em; }
  .pn-target { width: 24%; right: 0; }
  .pn-step { height: 14%; }
  .pn-s1 { bottom: 4%; }
  .pn-s2 { bottom: 21%; }
  .pn-s3 { bottom: 38%; }
  .pn-s4 { bottom: 55%; }
  .pn-step-txt b { font-size: 5.2cqw; white-space: nowrap; }
  .pn-step-txt span { font-size: 3cqw; }
  /* Sous-menus mobile : cibles tactiles plus confortables */
  .mobile-nav-sub a { padding-block: 0.5rem; }
}