/* =====================================================================
   NAKASH ENTERPRISES — Système de design
   ---------------------------------------------------------------------
   Palette d'origine : dégradé bordeaux profond vers orange feu, tel que
   défini au lancement du site. Un seul jeu de variables pour tout le
   site public. Aucune couleur n'est écrite en dur ailleurs que dans ce
   fichier (les alias --ne-ink/--ne-rust* existent pour les sections
   ajoutées depuis — dernière réalisation, vidéo du hero — et pointent
   vers les mêmes teintes que leurs équivalents historiques).
   ===================================================================== */

/* ---------- 1. Jetons ------------------------------------------------ */
:root {
  /* Marque, échantillonnée dans ressources/img/logo/logo.jpg */
  --ne-ember:     #EE8D2C;   /* haut du dégradé, réservé aux accents */
  --ne-orange:    #D9541A;   /* couleur d'action principale */
  --ne-orange-d:  #B8410F;   /* survol */
  --ne-red:       #B8080B;   /* rouge de marque */
  --ne-bordeaux:  #6B0D13;   /* surfaces sombres */
  --ne-bordeaux-d:#3D050B;   /* pied de page, bas du dégradé */
  --ne-night:     #140709;   /* fond « nuit » des sections technologiques de l'accueil */

  /* Alias utilisés par les sections ajoutées depuis (mêmes teintes) */
  --ne-ink:       var(--ne-bordeaux-d);
  --ne-rust:      var(--ne-orange);
  --ne-rust-d:    var(--ne-orange-d);
  --ne-rust-l:    #F4DCC9;

  /* Neutres, réchauffés pour s'accorder aux rouges */
  --ne-paper:     #FAF6F3;
  --ne-white:     #FFFFFF;
  --ne-stone:     #E7DBD5;   /* filets et bordures */
  --ne-stone-d:   #CFBEB6;
  --ne-text:      #251A18;
  --ne-muted:     #6E5C57;
  --ne-muted-l:   #B9A79F;   /* texte secondaire sur fond sombre */

  --ne-ok:        #1F7A4C;
  --ne-warn:      #A66A00;
  --ne-err:       #B3261E;

  /* Typographie */
  --font-ui:   'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-read: 'Lora', Georgia, 'Times New Roman', serif;
  --font-display: 'Space Grotesk', var(--font-ui);          /* grands titres */
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; /* libellés techniques */

  --step--1: clamp(.82rem, .8rem + .1vw, .875rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.0625rem);
  --step-1:  clamp(1.18rem, 1.1rem + .35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + .7vw, 1.85rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.25rem, 1.7rem + 2.6vw, 3.9rem);

  /* Rythme */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --shell: 1180px;
  --band: clamp(3.5rem, 7vw, 6.5rem);

  /* Formes — le rayon encode la hiérarchie, il n'est pas uniforme */
  --r-sharp: 2px;   /* vignettes, images */
  --r-soft:  6px;   /* champs, panneaux */
  --r-pill:  999px; /* étiquettes uniquement */

  --shadow-lift: 0 12px 28px -18px rgba(61, 5, 11, .55);
}

/* ---------- 2. Base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ne-paper);
  color: var(--ne-text);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1, h2 { font-family: var(--font-display); letter-spacing: -.03em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

/* Aligné à gauche : le texte justifié creuse des « rivières » d'espaces
   sur les colonnes étroites et les écrans de téléphone. */
p { margin: 0 0 1.1em; max-width: 68ch; text-wrap: pretty; }
a { color: var(--ne-orange-d); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ne-red); }

/* Contenu saisi avec l'éditeur enrichi de l'administration (Quill) :
   les balises sont filtrées à l'affichage, la mise en forme (couleurs,
   tailles, alignement…) reste celle enregistrée en base. */
.rich p:last-child { margin-bottom: 0; }
.rich img { border-radius: var(--r-sharp); margin-block: .75em; }
.rich a { text-decoration: underline; }
.rich blockquote {
  margin: 1.4em 0; padding-left: 1.1rem;
  border-left: 3px solid var(--ne-orange-d); font-style: italic; color: var(--ne-muted);
}

:focus-visible {
  outline: 3px solid var(--ne-ember);
  outline-offset: 2px;
  border-radius: var(--r-sharp);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ne-bordeaux); color: #fff; padding: .75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* Texte long : bascule en serif, mesure courte, interligne plus large */
.prose { font-family: var(--font-read); font-size: 1.06rem; line-height: 1.75; color: var(--ne-ink); }
.prose p, .prose ul, .prose ol { max-width: 66ch; }
.prose h3 { font-family: var(--font-ui); font-size: var(--step-1); margin-top: 2em; }
.prose ul, .prose ol { padding-left: 1.15em; margin-bottom: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
  margin: 1.8em 0; padding-left: 1.25rem;
  border-left: 3px solid var(--ne-ember); font-style: italic; color: var(--ne-muted);
}

/* ---------- 3. Ossature --------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * .6); }

.band--dark { background: var(--ne-bordeaux); color: var(--ne-paper); }
.band--dark h2, .band--dark h3 { color: #fff; }
.band--dark p { color: var(--ne-muted-l); }
.band--dark a { color: var(--ne-ember); }

.band--white { background: var(--ne-white); }
.band--edge { border-top: 1px solid var(--ne-stone); }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.15fr .85fr; }
  /* Alternance texte / encadré sur la page Services */
  .split--reverse > :first-child { order: 2; }
}

/* Marqueur de section : le dégradé du logo, réduit à un filet.
   Seul endroit du site où le dégradé apparaît. */
.rule {
  width: 3.5rem; height: 3px; border: 0; margin: 0 0 1.25rem;
  background: linear-gradient(90deg, var(--ne-bordeaux), var(--ne-red) 45%, var(--ne-ember));
}
.band--dark .rule { background: linear-gradient(90deg, var(--ne-ember), var(--ne-orange)); }

.lede { font-size: var(--step-1); color: var(--ne-muted); max-width: 54ch; line-height: 1.5; }
.band--dark .lede { color: var(--ne-muted-l); }

/* ---------- 4. En-tête et navigation --------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 246, 243, .93);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--ne-stone);
  transition: box-shadow .2s ease;
}
.masthead.is-scrolled { box-shadow: 0 6px 18px -14px rgba(61, 5, 11, .6); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; }
.brand img { width: 38px; height: 38px; object-fit: contain; border-radius: var(--r-sharp); }
.brand__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.1; }
.brand__name span { display: block; font-weight: 400; font-size: .72rem; color: var(--ne-muted); letter-spacing: .01em; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .5rem .8rem; border-radius: var(--r-soft);
  font-size: .95rem; font-weight: 500; color: var(--ne-text); text-decoration: none;
}
.nav a:hover { background: rgba(184, 8, 11, .07); color: var(--ne-red); }
.nav a[aria-current="page"] { color: var(--ne-red); box-shadow: inset 0 -2px 0 var(--ne-orange); border-radius: 0; }
/* « .nav a » l'emportait sur la couleur du bouton : texte brun sur fond orange */
.nav a.btn--primary, .nav a.btn--primary:hover { color: #fff; margin-left: .5rem; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--ne-stone-d);
  border-radius: var(--r-soft); padding: .5rem .7rem; cursor: pointer; color: var(--ne-text);
}

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; font-family: inherit; font-size: .9rem; }
  .nav {
    position: fixed; inset: 68px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--ne-white); border-bottom: 1px solid var(--ne-stone);
    padding: .5rem var(--gutter) 1.25rem; box-shadow: var(--shadow-lift);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .85rem .25rem; border-bottom: 1px solid var(--ne-stone); border-radius: 0; }
  .nav .btn { margin-top: .9rem; justify-content: center; border-bottom: 0; }
}

/* ---------- 5. Boutons ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .78rem 1.4rem; border: 1px solid transparent; border-radius: var(--r-soft);
  font-family: var(--font-ui); font-size: .96rem; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--ne-orange); color: #fff; }
.btn--primary:hover { background: var(--ne-orange-d); color: #fff; }
.btn--ghost { background: transparent; color: var(--ne-text); border-color: var(--ne-stone-d); }
.btn--ghost:hover { border-color: var(--ne-red); color: var(--ne-red); }
.btn--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--onDark:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: .95rem 1.75rem; font-size: 1.02rem; }
.btn[disabled] { opacity: .55; pointer-events: none; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- 6. Accueil ---------------------------------------------- */
/* Univers « agence digitale » : fond nuit teinté de bordeaux, grille
   lumineuse, halos aux couleurs du logo, écran de navigateur et
   cartes flottantes. Réservé à l'accueil (body.page-home). */

/* En-tête sombre et translucide, sur tout le site : il se pose sur
   l'accroche de l'accueil comme sur l'en-tête sombre des autres pages. */
.masthead { background: rgba(20, 7, 9, .6); border-bottom-color: rgba(255, 255, 255, .08); color: #fff; }
.masthead.is-scrolled { background: rgba(20, 7, 9, .92); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }
.brand__name span { color: var(--ne-muted-l); }
.nav a { color: #E6D8D4; }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--ne-ember); }
.nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .25); }
@media (max-width: 60rem) {
  .nav { background: #170A0D; border-bottom-color: rgba(255, 255, 255, .08); }
  .nav a { border-bottom-color: rgba(255, 255, 255, .08); }
}
/* L'accroche et les en-têtes de page remontent sous la barre de navigation
   (sauf si un message flash les précède). */
main > .hero:first-child { margin-top: -69px; padding-top: 69px; }
main > .pagehead:first-child { margin-top: -69px; padding-top: calc(69px + clamp(2.75rem, 6vw, 4.5rem)); }
/* Pages sans en-tête sombre (404) : fond sombre derrière la barre */
main > .band:first-child { border-top: 69px solid var(--ne-night); margin-top: -69px; }

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ne-night);
  color: #EDE3DF;
}
/* Image d'arrière-plan (réglage hero_bg_image) : faible opacité, teintée
   par le fond nuit grâce au mode « luminosité »… */
.hero__bg {
  position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: .38; mix-blend-mode: luminosity;
}
/* …et recouverte par le dégradé de la marque, plus dense à gauche pour
   que le titre reste parfaitement lisible. */
.hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(90% 80% at 90% 0%, rgba(107, 13, 19, .7) 0%, transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(61, 5, 11, .9) 0%, transparent 70%),
    linear-gradient(100deg, rgba(20, 7, 9, .92) 0%, rgba(20, 7, 9, .7) 45%, rgba(20, 7, 9, .35) 100%),
    linear-gradient(180deg, transparent 60%, var(--ne-night) 100%);
}
.hero::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--ne-orange) 30%, var(--ne-ember) 70%, transparent);
}
.promise__grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 65% 35%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 70% at 65% 35%, #000 25%, transparent 75%);
}
.hero__glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.hero__glow--a { width: 36rem; height: 36rem; right: -10rem; top: -12rem; opacity: .5;
  background: radial-gradient(circle, var(--ne-orange), transparent 65%); }
.hero__glow--b { width: 30rem; height: 30rem; left: -12rem; bottom: -14rem; opacity: .45;
  background: radial-gradient(circle, var(--ne-red), transparent 65%); }

.hero__inner {
  display: grid; gap: clamp(3rem, 6vw, 4.5rem); align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4.5rem, 9vw, 7.5rem);
}
@media (min-width: 62rem) { .hero__inner { grid-template-columns: 1.05fr .95fr; } }

.pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .42rem .95rem .42rem .75rem; margin: 0 0 1.6rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em; color: #F3D9C9;
}
.pill__dot { width: .5rem; height: .5rem; border-radius: 50%; background: #3DDC84; animation: ping 2.2s infinite; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, .55); }
  70%  { box-shadow: 0 0 0 .55rem rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.hero h1 {
  color: #fff; max-width: 12ch; margin-bottom: .4em;
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.75rem); line-height: 1.02; letter-spacing: -.04em;
}
.grad {
  background: linear-gradient(95deg, var(--ne-ember) 0%, var(--ne-orange) 45%, #FF5A5F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede { font-size: var(--step-1); color: #CDB9B3; max-width: 46ch; line-height: 1.55; margin-bottom: 2.1rem; }

.btn--glow { box-shadow: 0 12px 32px -12px rgba(217, 84, 26, .9); }
.btn--glow:hover { box-shadow: 0 16px 36px -12px rgba(238, 141, 44, .95); }
.btn .bi-arrow-right { transition: transform .2s ease; }
.btn:hover .bi-arrow-right { transform: translateX(3px); }

.kpis { display: flex; flex-wrap: wrap; margin: 2.9rem 0 0; }
.kpis div { display: flex; flex-direction: column-reverse; padding-right: 2rem; margin-right: 2rem; border-right: 1px solid rgba(255, 255, 255, .12); }
.kpis div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.kpis dd {
  margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; /* les chiffres ne « sautent » pas pendant le comptage */
  font-size: clamp(1.75rem, 3vw, 2.35rem); color: #fff;
}
.kpis dt { font-size: .78rem; color: var(--ne-muted-l); margin-top: .45rem; }

/* Écran de navigateur et cartes flottantes */
.hero__visual { position: relative; padding: 1.75rem .5rem 2.5rem; }
.device {
  position: relative; overflow: hidden; border-radius: 14px;
  background: #1B0C10; border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 70px -15px rgba(217, 84, 26, .45);
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.hero__visual:hover .device { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.device__bar {
  display: flex; align-items: center; gap: .4rem; padding: .65rem .9rem;
  background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.device__bar > span { width: .62rem; height: .62rem; border-radius: 50%; background: #FF5F57; }
.device__bar > span:nth-child(2) { background: #FEBC2E; }
.device__bar > span:nth-child(3) { background: #28C840; }
.device__url {
  margin-left: .8rem; flex: 1; max-width: 17rem; padding: .3rem .65rem; border-radius: 6px;
  background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .55);
  font-family: var(--font-mono); font-size: .7rem; white-space: nowrap; overflow: hidden;
}
.device__url .bi { color: #3DDC84; margin-right: .2rem; }
.device__screen { aspect-ratio: 16 / 10; background: #0E0507; }
.device__screen video, .device__screen img { width: 100%; height: 100%; object-fit: cover; }

.float {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; border-radius: 12px; color: #fff;
  background: rgba(28, 11, 15, .74); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .85);
  animation: float 6s ease-in-out infinite;
}
.float small { display: block; font-size: .7rem; color: var(--ne-muted-l); line-height: 1.2; }
.float strong { font-size: .88rem; font-weight: 600; }
.float__icon {
  width: 2.2rem; height: 2.2rem; flex: none; display: grid; place-items: center; border-radius: 9px;
  background: linear-gradient(135deg, var(--ne-ember), var(--ne-orange) 50%, var(--ne-red)); font-size: 1rem;
}
.float__icon--ok { background: linear-gradient(135deg, #2BB673, #1F7A4C); }
.float--project { left: -1.5rem; bottom: .5rem; }
.float--reply   { right: -.75rem; top: .5rem; animation-delay: -3s; }
.float--code {
  right: -1.25rem; bottom: 26%; display: block; padding: .85rem 1.05rem; animation-delay: -1.5s;
  font-family: var(--font-mono); font-size: .72rem; line-height: 1.65; color: #E7D6D1;
}
.c-k { color: #FF8A65; } .c-v { color: #7FDBCA; } .c-s { color: #F2C14E; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (max-width: 61.99rem) {
  .hero__visual { width: 100%; max-width: 36rem; margin-inline: auto; }
  .device { transform: none; }
}
@media (max-width: 40rem) {
  .float--code { display: none; }
  .float--project { left: 0; bottom: 0; }
  .float--reply { right: 0; top: .25rem; }
  .kpis div { padding-right: 1.1rem; margin-right: 1.1rem; }
  .kpis dt { font-size: .72rem; }
}

/* Bandeau défilant des technologies */
.stack-band { background: var(--ne-night); color: var(--ne-muted-l); padding-block: 1.35rem; overflow: hidden; }
.stack-band__inner { display: flex; align-items: center; gap: 2rem; }
.stack-band__label {
  margin: 0; flex: none; font-family: var(--font-mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ne-ember);
}
.marquee {
  display: flex; flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__list {
  display: flex; flex: none; gap: 2.5rem; margin: 0; padding: 0 2.5rem 0 0; list-style: none;
  animation: marquee 45s linear infinite;
}
.marquee:hover .marquee__list { animation-play-state: paused; }
.marquee__list li {
  display: flex; align-items: center; gap: .6rem; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: #D9C8C3;
}
.marquee__dot { width: .38rem; height: .38rem; border-radius: 50%; background: var(--ne-orange); }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (max-width: 40rem) { .stack-band__label { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__list { flex-wrap: wrap; flex: 1; gap: .6rem 1.75rem; animation: none; }
  .marquee__list[aria-hidden] { display: none; }
}

/* En-têtes de section */
.section-head {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head h2 { margin-bottom: .3em; max-width: 22ch; }
.section-head .lede { margin-bottom: 0; }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center h2, .section-head--center .lede { margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .9rem;
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ne-orange-d);
}
.eyebrow::before { content: ''; width: 1.6rem; height: 2px; background: linear-gradient(90deg, var(--ne-red), var(--ne-ember)); }
.eyebrow--light { color: var(--ne-ember); }

/* Carrousel des derniers projets */
.slider__controls { display: flex; align-items: center; gap: .6rem; }
.slider__count { margin-right: .4rem; font-family: var(--font-mono); font-size: .85rem; color: var(--ne-muted); font-variant-numeric: tabular-nums; }
.icon-btn {
  width: 2.9rem; height: 2.9rem; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--ne-stone-d); background: var(--ne-white);
  color: var(--ne-text); font-size: 1.05rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.icon-btn:hover { background: var(--ne-bordeaux); border-color: var(--ne-bordeaux); color: #fff; }

.slider__track {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.slider__track::-webkit-scrollbar { display: none; }
/* Réglage « réduire les animations » : défilement instantané des carrousels */
@media (prefers-reduced-motion: reduce) { .slider__track { scroll-behavior: auto; } }
.slide {
  flex: 0 0 100%; scroll-snap-align: start; display: grid; overflow: hidden;
  background: var(--ne-white); border: 1px solid var(--ne-stone); border-radius: 20px;
  box-shadow: 0 30px 60px -45px rgba(61, 5, 11, .5);
}
@media (min-width: 62rem) { .slide { grid-template-columns: 1.3fr 1fr; } }
.slide__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ne-night); }
@media (min-width: 62rem) { .slide__media { aspect-ratio: auto; min-height: 27rem; } }
.slide__media img, .slide__media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .7, .3, 1);
}
.slide:hover .slide__media img { transform: scale(1.04); }
.slide__index {
  position: absolute; left: 1.1rem; top: 1rem; padding: .3rem .7rem; border-radius: var(--r-pill);
  background: rgba(20, 7, 9, .72); backdrop-filter: blur(6px); color: #fff;
  font-family: var(--font-mono); font-size: .78rem;
}
.slide__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; color: rgba(255, 255, 255, .3); }
.slide__play {
  position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ne-bordeaux); font-size: 1.8rem;
}
.slide__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(1.6rem, 4vw, 2.9rem); }
.slide__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.1rem; }
.slide__date { font-size: .82rem; color: var(--ne-muted); }
.slide h3 { font-family: var(--font-display); font-size: var(--step-3); letter-spacing: -.03em; margin-bottom: .45rem; }
.slide h3 a { color: inherit; text-decoration: none; }
.slide h3 a:hover { color: var(--ne-red); }
.slide__client { margin-bottom: 1rem; font-size: .93rem; font-weight: 600; color: var(--ne-orange-d); }
.slide__text { margin-bottom: 1.4rem; color: var(--ne-muted); }
.chips-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.chips-row li {
  padding: .3rem .6rem; border-radius: 6px; border: 1px solid var(--ne-stone);
  background: var(--ne-paper); font-family: var(--font-mono); font-size: .72rem; color: var(--ne-text);
}
.slider__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.slider__dots button { padding: .6rem .15rem; background: none; border: 0; cursor: pointer; }
.slider__dots span { display: block; width: 1.6rem; height: 4px; border-radius: 4px; background: var(--ne-stone-d); transition: width .35s ease, background-color .35s ease; }
.slider__dots [aria-current="true"] span { width: 3rem; background: linear-gradient(90deg, var(--ne-red), var(--ne-ember)); }
.showcase__more { margin: 2rem 0 0; max-width: none; text-align: center; }
.showcase__more a { font-weight: 600; text-decoration: none; color: var(--ne-orange-d); }
.showcase__more a:hover { color: var(--ne-red); }

/* Services en cartes */
.svc-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.svc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 1.75rem 1.6rem 1.6rem; border-radius: 18px;
  background: var(--ne-paper); border: 1px solid var(--ne-stone);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.svc::before {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease;
  background: radial-gradient(26rem 14rem at 100% 0%, rgba(238, 141, 44, .18), transparent 60%);
}
.svc:hover { transform: translateY(-4px); background: #fff; border-color: rgba(217, 84, 26, .45); box-shadow: 0 26px 50px -32px rgba(107, 13, 19, .6); }
.svc:hover::before { opacity: 1; }
.svc__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.4rem; }
.svc__icon {
  width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 12px;
  color: #fff; font-size: 1.35rem;
  background: linear-gradient(135deg, var(--ne-ember), var(--ne-orange) 40%, var(--ne-red) 80%);
  box-shadow: 0 10px 22px -10px rgba(184, 8, 11, .75);
}
.svc__num { font-family: var(--font-mono); font-size: .8rem; color: var(--ne-stone-d); }
.svc h3 { font-family: var(--font-display); font-size: 1.28rem; letter-spacing: -.02em; margin-bottom: .5rem; }
.svc h3 a { color: inherit; text-decoration: none; }
.svc h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* toute la carte est cliquable */
.svc__text { margin-bottom: 1.25rem; font-size: .95rem; line-height: 1.55; color: var(--ne-muted); }
.svc__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: auto 0 0; padding-right: 3rem; font-size: .78rem; }
.svc__meta span { padding: .28rem .65rem; border-radius: var(--r-pill); background: rgba(217, 84, 26, .09); color: var(--ne-orange-d); font-weight: 600; }
.svc__arrow {
  position: absolute; right: 1.4rem; bottom: 1.4rem; width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ne-stone-d); color: var(--ne-text);
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}
.svc:hover .svc__arrow { transform: rotate(45deg); background: var(--ne-orange); border-color: var(--ne-orange); color: #fff; }

/* Engagements, sur fond nuit */
.promise { position: relative; overflow: hidden; isolation: isolate; background: var(--ne-night); color: #E9DCD8; }
.promise::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: -14rem; width: 56rem; height: 30rem;
  transform: translateX(-50%); filter: blur(20px);
  background: radial-gradient(closest-side, rgba(217, 84, 26, .38), transparent);
}
.promise__grid-bg {
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
}
.promise h2 { color: #fff; }
.promise .lede { color: var(--ne-muted-l); }
.promise__cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.promise__card {
  padding: 1.85rem 1.6rem; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(6px);
  transition: border-color .25s ease, transform .25s ease;
}
.promise__card:hover { border-color: rgba(238, 141, 44, .55); transform: translateY(-3px); }
.promise__card > .bi { display: block; margin-bottom: 1.3rem; font-size: 1.45rem; color: var(--ne-ember); }
.promise__value {
  display: block; margin-bottom: .35rem; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -.035em;
  background: linear-gradient(95deg, #fff 20%, var(--ne-ember)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.promise__card h3 { margin-bottom: .6rem; font-size: 1.05rem; color: #fff; }
.promise__card p { margin: 0; font-size: .9rem; color: var(--ne-muted-l); }

/* Secteurs : onglets + panneau sombre */
.sectors__wrap { display: grid; gap: 1.25rem; }
@media (min-width: 62rem) { .sectors__wrap { grid-template-columns: 22rem 1fr; align-items: start; } }
.sectors__tabs { display: flex; flex-direction: column; gap: .6rem; }
.sectors__tab {
  display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 1.1rem; text-align: left;
  border: 1px solid var(--ne-stone); border-radius: 14px; background: var(--ne-white); cursor: pointer;
  font: inherit; color: var(--ne-text);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sectors__tab strong { display: block; font-size: .98rem; line-height: 1.25; }
.sectors__tab small { display: block; font-size: .8rem; color: var(--ne-muted); margin-top: .15rem; }
.sectors__tab:hover { border-color: rgba(217, 84, 26, .45); }
.sectors__tab[aria-selected="true"] {
  border-color: transparent; background: var(--ne-night); color: #fff;
  box-shadow: 0 18px 36px -24px rgba(61, 5, 11, .9);
}
.sectors__tab[aria-selected="true"] small { color: var(--ne-muted-l); }
.sectors__tab-icon {
  width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: rgba(217, 84, 26, .1); color: var(--ne-orange-d); font-size: 1.2rem;
  transition: background .2s ease, color .2s ease;
}
.sectors__tab[aria-selected="true"] .sectors__tab-icon { background: linear-gradient(135deg, var(--ne-ember), var(--ne-orange) 45%, var(--ne-red)); color: #fff; }
@media (max-width: 61.99rem) {
  /* Petits écrans : onglets en ruban horizontal défilant */
  .sectors__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
  .sectors__tabs::-webkit-scrollbar { display: none; }
  .sectors__tab { flex: 0 0 auto; width: auto; padding: .7rem .9rem; }
  .sectors__tab small { display: none; }
  .sectors__tab-icon { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
}

.sectors__panel {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 2rem; align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem); border-radius: 20px; color: #E9DCD8;
  background:
    radial-gradient(34rem 20rem at 100% 0%, rgba(217, 84, 26, .35), transparent 65%),
    var(--ne-night);
}
.sectors__panel + .sectors__panel { margin-top: 1.25rem; } /* sans JavaScript : panneaux empilés */
.js .sectors__panel:not(.is-active) { display: none; }
.js .sectors__panel + .sectors__panel { margin-top: 0; }
@media (min-width: 48rem) { .sectors__panel { grid-template-columns: 1fr 13rem; } }
.sectors__panel h3 { font-family: var(--font-display); font-size: var(--step-2); color: #fff; margin-bottom: .6rem; }
.sectors__pitch { color: var(--ne-muted-l); margin-bottom: 1.5rem; }
.sectors__list { list-style: none; padding: 0; margin: 0 0 1.9rem; display: grid; gap: .85rem; }
.sectors__list li { display: flex; gap: .75rem; align-items: flex-start; }
.sectors__list > li > .bi { color: #3DDC84; font-size: 1.15rem; line-height: 1.4; flex: none; }
.sectors__list a {
  display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem;
  font-size: .75rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  padding: .12rem .5rem; border-radius: var(--r-pill);
  background: rgba(238, 141, 44, .14); color: var(--ne-ember);
}
.sectors__list a:hover { background: rgba(238, 141, 44, .28); color: #fff; }
.sectors__art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
@media (max-width: 47.99rem) { .sectors__art { display: none; } }
.sectors__orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(238, 141, 44, .35); }
.sectors__orbit--1 { inset: 0; animation: spin 40s linear infinite; }
.sectors__orbit--2 { inset: 18%; border-style: solid; border-color: rgba(255, 255, 255, .1); }
.sectors__orbit--1::after {
  content: ''; position: absolute; top: 12%; left: 12%; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--ne-ember); box-shadow: 0 0 14px var(--ne-ember);
}
@keyframes spin { to { transform: rotate(360deg); } }
.sectors__big {
  position: relative; width: 44%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 28%;
  font-size: 2.6rem; color: #fff;
  background: linear-gradient(135deg, var(--ne-ember), var(--ne-orange) 45%, var(--ne-red));
  box-shadow: 0 20px 50px -15px rgba(217, 84, 26, .8);
}

/* Simulateur de devis */
.est { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 62rem) { .est { grid-template-columns: 1fr 22rem; } }
.est__steps { display: grid; gap: 1.75rem; }
.est__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.est__step legend {
  display: flex; align-items: center; gap: .65rem; padding: 0; margin-bottom: .9rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
}
.est__step legend small { font-family: var(--font-ui); font-weight: 400; font-size: .82rem; color: var(--ne-muted); }
.est__n {
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--ne-night); color: #fff; font-family: var(--font-mono); font-size: .78rem;
}
.est__grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt__box {
  display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: .95rem 1rem .95rem 1rem;
  border: 1px solid var(--ne-stone); border-radius: 12px; background: var(--ne-paper);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.opt__box strong { font-size: .93rem; line-height: 1.3; padding-right: 1.4rem; }
.opt__box small { font-size: .8rem; color: var(--ne-muted); line-height: 1.4; }
.opt__icon { font-size: 1.15rem; color: var(--ne-orange-d); margin-bottom: .35rem; }
/* Pastille de sélection (rond pour un choix unique, carré pour les options) */
.opt__box::after {
  content: ''; position: absolute; top: .95rem; right: .95rem; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; border: 1.5px solid var(--ne-stone-d); background: #fff;
  transition: background-color .18s ease, border-color .18s ease;
}
.opt--check .opt__box::after { border-radius: 5px; }
.opt:hover .opt__box { border-color: rgba(217, 84, 26, .5); }
.opt input:checked + .opt__box {
  border-color: var(--ne-orange); background: #fff; box-shadow: 0 0 0 3px rgba(217, 84, 26, .14);
}
.opt input:checked + .opt__box::after {
  border-color: var(--ne-orange);
  background: var(--ne-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.5 4.5 6.5 11.5 3 8l1-1 2.5 2.5 6-6z'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.opt input:focus-visible + .opt__box { outline: 3px solid var(--ne-ember); outline-offset: 2px; }

.est__result {
  position: sticky; top: 88px; padding: 1.75rem 1.6rem; border-radius: 20px; color: #E9DCD8; overflow: hidden;
  background:
    radial-gradient(22rem 14rem at 100% 0%, rgba(217, 84, 26, .4), transparent 65%),
    var(--ne-night);
  box-shadow: 0 30px 60px -35px rgba(61, 5, 11, .9);
}
.est__label { margin: 0 0 .5rem; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ne-ember); }
.est__range {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin: 0 0 1.25rem;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.35rem);
  line-height: 1.1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums;
}
.est__sep { font-family: var(--font-ui); font-weight: 400; font-size: .95rem; color: var(--ne-muted-l); letter-spacing: 0; }
.est__summary { list-style: none; margin: 0 0 1.5rem; padding: 1rem 0 0; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: .55rem; font-size: .88rem; }
.est__summary .bi { color: var(--ne-ember); margin-right: .35rem; }
.est__note { margin: 1rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ne-muted-l); }
.est__range.is-updating { animation: pop .35s ease; }
@keyframes pop { 50% { transform: scale(1.04); } }

/* =====================================================================
   Pages intérieures : Services, fiche service, L'agence, Réalisations,
   Journal. Même univers que l'accueil (nuit, dégradé, libellés « mono »).
   ===================================================================== */

/* --- En-tête de page : accès rapide et icône ------------------------- */
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.25rem; }
.jump a {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem .5rem .6rem;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05); backdrop-filter: blur(6px);
  color: #EDE3DF; font-size: .88rem; font-weight: 500; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.jump a:hover { background: rgba(217, 84, 26, .25); border-color: var(--ne-orange); color: #fff; }
.jump .bi { color: var(--ne-ember); }
.jump__n { font-family: var(--font-mono); font-size: .7rem; color: var(--ne-muted-l); padding: .1rem .4rem; border-radius: 6px; background: rgba(255, 255, 255, .07); }

.pagehead__icon {
  width: 3.6rem; height: 3.6rem; display: grid; place-items: center; margin-bottom: 1.4rem; border-radius: 16px;
  font-size: 1.6rem; color: #fff;
  background: linear-gradient(135deg, var(--ne-ember), var(--ne-orange) 45%, var(--ne-red));
  box-shadow: 0 16px 40px -14px rgba(217, 84, 26, .9);
}
.pagehead__lede, .pagehead__lede p { color: #CDB9B3; font-size: var(--step-1); line-height: 1.55; max-width: 58ch; }

/* --- Services : une grande section par métier ------------------------ */
.svc-page { padding-top: clamp(2.5rem, 5vw, 4rem); }
.svc-row {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; scroll-margin-top: 90px;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.svc-row + .svc-row { border-top: 1px solid var(--ne-stone); }
@media (min-width: 62rem) {
  .svc-row { grid-template-columns: 1.1fr .9fr; }
  .svc-row:nth-child(even) .svc-row__main { order: 2; }
}
.svc-row__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.svc-row__num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1;
  letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--ne-stone-d);
}
.svc-row h2 { margin-bottom: .45rem; }
.svc-row__tagline, .svc-row__tagline p { font-size: var(--step-1); color: var(--ne-orange-d); font-weight: 500; line-height: 1.45; }
.svc-row__desc { color: var(--ne-muted); margin: 1rem 0 1.75rem; }

/* Fiche « console » de la prestation */
.spec {
  border-radius: 18px; overflow: hidden; color: #E9DCD8;
  background: radial-gradient(26rem 16rem at 100% 0%, rgba(217, 84, 26, .3), transparent 65%), var(--ne-night);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 34px 70px -40px rgba(61, 5, 11, .9);
  transition: transform .35s ease;
}
.svc-row:hover .spec { transform: translateY(-4px) rotate(-.3deg); }
.spec__bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.spec__bar > span { width: .6rem; height: .6rem; border-radius: 50%; background: #FF5F57; }
.spec__bar > span:nth-child(2) { background: #FEBC2E; }
.spec__bar > span:nth-child(3) { background: #28C840; }
.spec__bar code { margin-left: .7rem; font-family: var(--font-mono); font-size: .72rem; color: var(--ne-muted-l); }
.spec__body { padding: 1.5rem 1.6rem 1.6rem; }
.spec__label { margin: 0 0 1rem; font-family: var(--font-mono); font-size: .75rem; color: #7FDBCA; }
.spec__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .9rem; }
.spec__list li { display: flex; gap: .75rem; }
.spec__list .bi {
  width: 1.4rem; height: 1.4rem; flex: none; display: grid; place-items: center; border-radius: 6px;
  background: rgba(61, 220, 132, .14); color: #3DDC84; font-size: .9rem;
}
.spec__list strong { display: block; font-size: .94rem; color: #fff; font-weight: 600; }
.spec__list small { display: block; font-size: .82rem; color: var(--ne-muted-l); margin-top: .1rem; }
.spec__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem; margin: 0; padding-top: 1.2rem; border-top: 1px dashed rgba(255, 255, 255, .14); }
.spec__facts dt { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ne-muted-l); }
.spec__facts dd { margin: .3rem 0 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }

/* --- Questions fréquentes en deux colonnes --------------------------- */
.faq-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .faq-layout { grid-template-columns: .85fr 1.15fr; } .faq-layout__side { position: sticky; top: 100px; } }
.faq-layout__side h2 { margin-bottom: .6rem; }
.helpcard {
  display: flex; gap: 1rem; margin: 1.75rem 0 1.25rem; padding: 1.25rem; border-radius: 16px;
  background: var(--ne-white); border: 1px solid var(--ne-stone);
}
.helpcard__icon { width: 2.8rem; height: 2.8rem; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(217, 84, 26, .1); color: var(--ne-orange-d); font-size: 1.25rem; }
.helpcard strong { display: block; margin-bottom: .2rem; }
.helpcard p { margin: 0 0 .5rem; font-size: .9rem; color: var(--ne-muted); }
.helpcard a { font-weight: 600; text-decoration: none; font-size: .92rem; }

.faq--cards { border-top: 0; display: grid; gap: .75rem; }
.faq--cards details {
  border: 1px solid var(--ne-stone); border-radius: 14px; background: var(--ne-white); padding-inline: 1.25rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq--cards details[open] { border-color: rgba(217, 84, 26, .45); box-shadow: 0 20px 40px -32px rgba(107, 13, 19, .6); }
.faq--cards summary::after {
  content: '+'; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%;
  background: rgba(217, 84, 26, .1); font-size: 1.15rem;
}
.faq--cards details[open] summary::after { content: '−'; background: var(--ne-orange); color: #fff; }

/* --- Fiche d'un service ---------------------------------------------- */
.svc-detail { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .svc-detail { grid-template-columns: 1fr 23rem; } .svc-detail__aside { position: sticky; top: 100px; } }
.svc-detail__main .prose { font-size: 1.1rem; }
.svc-detail__features { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.feature-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.feature {
  position: relative; padding: 1.5rem 1.4rem; border-radius: 16px; background: var(--ne-white); border: 1px solid var(--ne-stone);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.feature:hover { border-color: rgba(217, 84, 26, .45); transform: translateY(-3px); box-shadow: 0 24px 44px -32px rgba(107, 13, 19, .55); }
.feature__n { position: absolute; top: 1.2rem; right: 1.3rem; font-family: var(--font-mono); font-size: .75rem; color: var(--ne-stone-d); }
.feature__check {
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 10px;
  background: linear-gradient(135deg, var(--ne-ember), var(--ne-orange) 45%, var(--ne-red)); color: #fff; font-size: 1.1rem;
}
.feature h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.feature p { margin: 0; font-size: .9rem; color: var(--ne-muted); }

.quote-card {
  padding: 1.8rem 1.6rem; border-radius: 20px; color: #E9DCD8;
  background: radial-gradient(22rem 14rem at 100% 0%, rgba(217, 84, 26, .4), transparent 65%), var(--ne-night);
  box-shadow: 0 30px 60px -35px rgba(61, 5, 11, .9);
}
.quote-card__facts { margin: 0 0 1.5rem; display: grid; gap: .9rem; }
.quote-card__facts div { padding-bottom: .9rem; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.quote-card__facts dt { font-size: .78rem; color: var(--ne-muted-l); }
.quote-card__facts dd { margin: .2rem 0 0; font-weight: 600; color: #fff; }
.quote-card__price { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700 !important; letter-spacing: -.03em; line-height: 1.1; }
.quote-card .btn + .btn { margin-top: .6rem; }
.quote-card__wa { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1rem; font-size: .88rem; font-weight: 600; color: #7FE0A7; text-decoration: none; }
.quote-card__wa:hover { color: #fff; }

/* --- L'agence : histoire --------------------------------------------- */
.story { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 62rem) { .story { grid-template-columns: 1fr 1fr; } }
.story__lead { font-family: var(--font-ui); font-size: var(--step-1); font-weight: 500; color: var(--ne-text); line-height: 1.5; }
.story__visual { position: relative; margin: 0; padding: 1.5rem 1.5rem 2.5rem 0; }
.story__visual::before {
  content: ''; position: absolute; right: 0; top: 0; width: 70%; height: 80%; border-radius: 24px; z-index: 0;
  background: linear-gradient(135deg, var(--ne-ember), var(--ne-orange) 40%, var(--ne-red) 80%, var(--ne-bordeaux));
}
.story__frame { position: relative; z-index: 1; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(61, 5, 11, .8); margin-right: 1.5rem; }
.story__frame img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.story__badge {
  position: absolute; z-index: 2; left: -1rem; bottom: 0; padding: 1rem 1.3rem; border-radius: 16px;
  background: var(--ne-night); color: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7);
}
.story__badge strong { display: block; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; letter-spacing: -.03em; background: linear-gradient(95deg, #fff 20%, var(--ne-ember)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story__badge span { font-size: .78rem; color: var(--ne-muted-l); }
.story__chip {
  position: absolute; z-index: 2; right: 0; top: 2.5rem; display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .95rem; border-radius: var(--r-pill); background: #fff; font-size: .85rem; font-weight: 600;
  box-shadow: 0 16px 32px -18px rgba(61, 5, 11, .7);
}
.story__chip .bi { color: var(--ne-red); }
/* Texte plus long que la photo : la photo reste visible pendant la lecture */
@media (min-width: 62rem) { .story { align-items: start; } .story__visual { position: sticky; top: 110px; } }

/* Les quatre défis des organisations, en grille compacte */
.challenges { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.challenges li {
  display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 14px;
  background: var(--ne-white); border: 1px solid var(--ne-stone); font-size: .9rem; line-height: 1.45; color: var(--ne-muted);
}
.challenges .bi {
  width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: rgba(217, 84, 26, .1); color: var(--ne-orange-d); font-size: 1rem;
}
.challenges strong { display: block; color: var(--ne-text); font-size: .93rem; }
@media (max-width: 40rem) { .story__badge { left: .25rem; } }

/* Bandeau de chiffres */
.numbers { position: relative; overflow: hidden; isolation: isolate; background: var(--ne-night); color: #fff; padding-block: clamp(2.75rem, 6vw, 4rem); }
.numbers::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: -10rem; width: 50rem; height: 22rem; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(217, 84, 26, .35), transparent); filter: blur(10px);
}
.numbers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; }
.numbers__grid div { padding-left: 1.25rem; border-left: 2px solid; border-image: linear-gradient(180deg, var(--ne-ember), transparent) 1; }
.numbers__grid strong {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(95deg, #fff 30%, var(--ne-ember)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.numbers__grid span { display: block; margin-top: .5rem; font-size: .88rem; color: var(--ne-muted-l); }

/* Règles */
.rules { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.rule-card {
  position: relative; overflow: hidden; padding: 2rem 1.75rem 1.9rem; border-radius: 20px;
  background: var(--ne-white); border: 1px solid var(--ne-stone);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rule-card:hover { transform: translateY(-4px); border-color: rgba(217, 84, 26, .45); box-shadow: 0 28px 50px -34px rgba(107, 13, 19, .6); }
.rule-card__n {
  position: absolute; right: 1.2rem; top: .4rem; font-family: var(--font-display); font-weight: 700; font-size: 5rem; line-height: 1;
  letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--ne-stone);
  transition: -webkit-text-stroke-color .25s ease;
}
.rule-card:hover .rule-card__n { -webkit-text-stroke-color: rgba(217, 84, 26, .45); }
.rule-card .svc__icon { margin-bottom: 1.4rem; }
.rule-card h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .6rem; }
.rule-card p { margin: 0; color: var(--ne-muted); font-size: .95rem; }

/* Frise de la méthode */
.timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 58rem; position: relative; }
.timeline::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 1.6rem; width: 2px;
  background: linear-gradient(180deg, var(--ne-ember), var(--ne-red) 60%, transparent);
}
.timeline__item { position: relative; padding-left: 4.5rem; padding-bottom: 1.75rem; }
.timeline__dot {
  position: absolute; left: 0; top: 0; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--ne-night); color: var(--ne-ember); font-size: 1.2rem;
  box-shadow: 0 0 0 5px var(--ne-white), 0 0 0 6px rgba(217, 84, 26, .35);
}
.timeline__card { padding: 1.35rem 1.5rem; border-radius: 16px; background: var(--ne-paper); border: 1px solid var(--ne-stone); transition: border-color .25s ease, transform .25s ease; }
.timeline__item:hover .timeline__card { border-color: rgba(217, 84, 26, .45); transform: translateX(4px); }
.timeline__when { margin: 0 0 .5rem; font-family: var(--font-mono); font-size: .74rem; color: var(--ne-orange-d); }
.timeline__when span { padding: .1rem .4rem; border-radius: 5px; background: var(--ne-night); color: #fff; margin-right: .3rem; }
.timeline__card h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.timeline__card p:last-child { margin: 0; color: var(--ne-muted); font-size: .94rem; }
@media (min-width: 62rem) {
  /* Grand écran : frise centrale, cartes en quinconce */
  .timeline::before { left: 50%; transform: translateX(-1px); }
  .timeline__item { width: 50%; padding-left: 0; padding-right: 3.25rem; }
  .timeline__item:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: 3.25rem; }
  .timeline__dot { left: auto; right: -1.6rem; }
  .timeline__item:nth-child(even) .timeline__dot { right: auto; left: -1.6rem; }
  .timeline__item:nth-child(odd) .timeline__card { text-align: right; }
  .timeline__item:nth-child(odd):hover .timeline__card { transform: translateX(-4px); }
  .timeline__item + .timeline__item { margin-top: -2.5rem; }
}

/* Équipe */
.team { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.member { border-radius: 20px; overflow: hidden; background: var(--ne-white); border: 1px solid var(--ne-stone); transition: transform .3s ease, box-shadow .3s ease; }
.member:hover { transform: translateY(-5px); box-shadow: 0 30px 55px -36px rgba(61, 5, 11, .7); }
.member__photo { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--ne-night); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.05); transition: filter .5s ease, transform .6s ease; }
.member:hover .member__photo img { filter: none; transform: scale(1.04); }
.member__photo::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(20, 7, 9, .75)); pointer-events: none; }
.member__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 4rem; color: var(--ne-ember); }
.member__li {
  position: absolute; z-index: 1; right: 1rem; bottom: 1rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: 12px; background: #fff; color: #0A66C2; font-size: 1.15rem; text-decoration: none;
  transform: translateY(8px); opacity: .9; transition: transform .25s ease, opacity .25s ease;
}
.member:hover .member__li, .member__li:focus-visible { transform: none; opacity: 1; }
.member__body { padding: 1.35rem 1.4rem 1.5rem; }
.member__body h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: .2rem; }
.member__role { margin: 0 0 .7rem; font-family: var(--font-mono); font-size: .76rem; color: var(--ne-orange-d); }
.member__bio { font-size: .9rem; color: var(--ne-muted); }

/* Mur de logos */
.logo-wall { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: 1.5rem; }
.logo-wall__item {
  display: grid; place-items: center; height: 6rem; padding: 1rem; border-radius: 14px;
  background: var(--ne-paper); border: 1px solid var(--ne-stone); transition: border-color .2s ease, background-color .2s ease;
}
.logo-wall__item img { max-height: 3.2rem; width: auto; object-fit: contain; filter: grayscale(1) opacity(.7); transition: filter .25s ease; }
.logo-wall__item:hover { background: #fff; border-color: rgba(217, 84, 26, .4); }
.logo-wall__item:hover img { filter: none; }

/* --- Filtres segmentés (portfolio, journal) --------------------------- */
.toolbar--panel { padding: .6rem; border-radius: 18px; background: var(--ne-white); border: 1px solid var(--ne-stone); }
.filters.filters--segmented { gap: .35rem; margin-bottom: 0; }
.filters.filters--segmented a { display: inline-flex; align-items: center; gap: .45rem; border-color: transparent; color: var(--ne-text); font-weight: 500; }
.filters.filters--segmented a span {
  min-width: 1.4rem; padding: .05rem .4rem; border-radius: var(--r-pill); text-align: center;
  font-family: var(--font-mono); font-size: .7rem; background: var(--ne-paper); color: var(--ne-muted);
}
.filters.filters--segmented a:hover { background: var(--ne-paper); border-color: transparent; }
.filters.filters--segmented a[aria-current="true"] { background: var(--ne-night); color: #fff; }
.filters.filters--segmented a[aria-current="true"] span { background: rgba(255, 255, 255, .14); color: #fff; }
.toolbar--panel .search .input { background: var(--ne-paper); border-color: transparent; }

/* --- Réalisations : grille mosaïque ---------------------------------- */
.works { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
@media (min-width: 62rem) { .work-card--feature { grid-column: span 2; grid-row: span 2; } }
.work-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; text-decoration: none; color: inherit;
  background: var(--ne-white); border: 1px solid var(--ne-stone);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.work-card:hover { transform: translateY(-5px); border-color: rgba(217, 84, 26, .4); box-shadow: 0 30px 60px -38px rgba(61, 5, 11, .7); color: inherit; }
.work-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--ne-night); }
.work-card--feature .work-card__media { aspect-ratio: auto; flex: 1; min-height: 22rem; }
.work-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .3, 1); }
.work-card:hover .work-card__media img { transform: scale(1.06); }
.work-card__media::after {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(180deg, rgba(20, 7, 9, 0) 40%, rgba(20, 7, 9, .7));
}
.work-card:hover .work-card__media::after { opacity: 1; }
.work-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; color: rgba(255, 255, 255, .3); }
.work-card__cat {
  position: absolute; z-index: 1; left: 1rem; top: 1rem; padding: .3rem .75rem; border-radius: var(--r-pill);
  background: rgba(20, 7, 9, .75); backdrop-filter: blur(6px); color: #fff; font-size: .74rem; font-weight: 600;
}
.work-card__go {
  position: absolute; z-index: 1; right: 1rem; bottom: 1rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--ne-orange); color: #fff; font-size: 1.1rem;
  opacity: 0; transform: translateY(10px) scale(.9); transition: opacity .3s ease, transform .3s ease;
}
.work-card:hover .work-card__go { opacity: 1; transform: none; }
.work-card__body { padding: 1.35rem 1.4rem 1.5rem; }
.work-card__meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0 0 .45rem; font-family: var(--font-mono); font-size: .72rem; color: var(--ne-orange-d); }
.work-card h2 { font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .4rem; }
.work-card--feature h2 { font-size: var(--step-2); }
.work-card:hover h2 { color: var(--ne-red); }
.work-card__text { font-size: .92rem; color: var(--ne-muted); margin-bottom: 1rem; }
.work-card .chips-row { margin-bottom: 0; }

.work-card--cta {
  align-items: flex-start; justify-content: center; padding: 2rem 1.75rem; min-height: 22rem; color: #E9DCD8;
  background: radial-gradient(24rem 16rem at 100% 0%, rgba(217, 84, 26, .45), transparent 65%), var(--ne-night);
  border: 1px dashed rgba(238, 141, 44, .5);
}
.work-card--cta:hover { color: #E9DCD8; }
.work-card--cta h2 { color: #fff; font-size: var(--step-2); max-width: 14ch; }
.work-card--cta:hover h2 { color: #fff; }
.work-card--cta p { color: var(--ne-muted-l); font-size: .93rem; margin-bottom: 1.5rem; }
.work-card__plus {
  width: 3.2rem; height: 3.2rem; display: grid; place-items: center; margin-bottom: 1.4rem; border-radius: 14px;
  border: 1px dashed var(--ne-ember); color: var(--ne-ember); font-size: 1.4rem; transition: transform .35s ease;
}
.work-card--cta:hover .work-card__plus { transform: rotate(90deg); }

/* --- Journal ---------------------------------------------------------- */
.filters.blog-filters { margin-bottom: 2rem; padding: .5rem; border-radius: 18px; background: var(--ne-white); border: 1px solid var(--ne-stone); width: fit-content; max-width: 100%; }
.post-feature {
  display: grid; overflow: hidden; margin-bottom: 2rem; border-radius: 22px;
  background: var(--ne-white); border: 1px solid var(--ne-stone); box-shadow: 0 30px 60px -45px rgba(61, 5, 11, .55);
}
@media (min-width: 62rem) { .post-feature { grid-template-columns: 1.2fr 1fr; } }
.post-feature__media { position: relative; display: block; min-height: 18rem; overflow: hidden; background: var(--ne-stone); }
.post-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .3, 1); }
.post-feature:hover .post-feature__media img { transform: scale(1.04); }
.post-feature__badge {
  position: absolute; left: 1.1rem; top: 1.1rem; display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem; border-radius: var(--r-pill); color: #fff; font-size: .78rem; font-weight: 600;
  background: linear-gradient(135deg, var(--ne-orange), var(--ne-red));
}
.post-feature__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.6rem, 4vw, 2.75rem); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-bottom: 1rem; font-size: .84rem; color: var(--ne-muted); }
.post-feature h2 { font-size: var(--step-3); margin-bottom: .7rem; }
.post-feature h2 a { color: inherit; text-decoration: none; }
.post-feature h2 a:hover { color: var(--ne-red); }
.post-feature__text { color: var(--ne-muted); margin-bottom: 1.75rem; }
.post-feature__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.author { display: inline-flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; }
.author__avatar {
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--ne-night); color: var(--ne-ember); font-family: var(--font-display);
}
.article-card__media { position: relative; }
/* auto-fill : un article seul garde la largeur d'une colonne au lieu de s'étirer */
.posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.article-card__cat {
  position: absolute; left: .9rem; top: .9rem; padding: .28rem .7rem; border-radius: var(--r-pill);
  background: rgba(20, 7, 9, .75); backdrop-filter: blur(6px); color: #fff; font-size: .72rem; font-weight: 600;
}
.article-card__title { font-size: var(--step-1); margin: 0 0 .5rem; letter-spacing: -.02em; }
.article-card__title a { color: inherit; text-decoration: none; }
.article-card__title a:hover { color: var(--ne-red); }

.nl-panel {
  display: grid; gap: 1.5rem; align-items: center; margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.6rem, 4vw, 2.5rem); border-radius: 22px; color: #E9DCD8;
  background: radial-gradient(30rem 16rem at 100% 0%, rgba(217, 84, 26, .4), transparent 65%), var(--ne-night);
}
@media (min-width: 62rem) { .nl-panel { grid-template-columns: 1.2fr 1fr; } }
.nl-panel__text { display: flex; gap: 1.1rem; align-items: flex-start; }
.nl-panel__icon {
  width: 3rem; height: 3rem; flex: none; display: grid; place-items: center; border-radius: 14px; font-size: 1.35rem; color: #fff;
  background: linear-gradient(135deg, var(--ne-ember), var(--ne-orange) 45%, var(--ne-red));
}
.nl-panel h2 { color: #fff; font-size: var(--step-2); margin-bottom: .35rem; }
.nl-panel p { margin: 0; color: var(--ne-muted-l); }
.nl-panel__form { display: flex; gap: .6rem; flex-wrap: wrap; }
.nl-panel__form .input { flex: 1 1 14rem; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: #fff; }
.nl-panel__form .input::placeholder { color: rgba(255, 255, 255, .45); }

/* Pagination plus ronde, assortie aux filtres */
.pagination a, .pagination span { border-radius: 12px; display: inline-flex; align-items: center; gap: .35rem; }
.pagination .is-current { background: var(--ne-night); border-color: var(--ne-night); }
.pagination .is-disabled { opacity: .45; cursor: default; }
.pagination__info { margin: .9rem 0 0; max-width: none; text-align: center; font-family: var(--font-mono); font-size: .75rem; color: var(--ne-muted); }

/* --- Fiche d'une réalisation (étude de cas) -------------------------- */
.pagehead.pagehead--case { padding-bottom: clamp(9rem, 18vw, 14rem); }
.pagehead.pagehead--case h1 { max-width: 20ch; }

/* Visuel principal : écran de navigateur qui chevauche l'en-tête */
.case-cover { position: relative; z-index: 2; margin-top: calc(-1 * clamp(7rem, 15vw, 11.5rem)); }
.device--flat { transform: none; max-width: 68rem; margin-inline: auto; border-radius: 18px; }
.device__screen--auto { aspect-ratio: auto; max-height: 40rem; overflow: hidden; }
.device__screen--auto img, .device__screen--auto video { display: block; width: 100%; height: auto; max-height: 40rem; object-fit: cover; object-position: top center; }
.case-cover__pdf { display: grid; justify-items: center; gap: .9rem; padding: 4rem 1.5rem; text-align: center; color: #E9DCD8; }
.case-cover__pdf .bi { font-size: 3.2rem; color: var(--ne-ember); }
.case-cover__pdf p { margin: 0; color: var(--ne-muted-l); }

/* Mise en page : fiche + sommaire à gauche, récit à droite */
.case { padding-top: clamp(3rem, 6vw, 5rem); }
.case__layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) {
  .case__layout { grid-template-columns: 19rem 1fr; }
  .case__side { position: sticky; top: 96px; }
}
.case__side { display: grid; gap: 1.25rem; }

.case-card {
  padding: 1.6rem 1.5rem; border-radius: 20px; color: #E9DCD8;
  background: radial-gradient(18rem 12rem at 100% 0%, rgba(217, 84, 26, .38), transparent 65%), var(--ne-night);
  box-shadow: 0 30px 60px -40px rgba(61, 5, 11, .9);
}
.case-card__facts { margin: 0 0 1.25rem; display: grid; }
.case-card__facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.case-card__facts dt { font-size: .82rem; color: var(--ne-muted-l); }
.case-card__facts dd { margin: 0; font-size: .9rem; font-weight: 600; color: #fff; text-align: right; }
.case-card__facts a { color: var(--ne-ember); }
.case-card__label { margin: 0 0 .7rem; font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ne-muted-l); }
.chips-row--dark li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #EDE3DF; }
.case-card .chips-row { margin-bottom: 1.25rem; }

.case__toc { display: grid; gap: .2rem; padding: 1.1rem 1.1rem 1rem; border-radius: 18px; background: var(--ne-white); border: 1px solid var(--ne-stone); }
.case__toc .case-card__label { color: var(--ne-muted); margin-left: .5rem; }
.case__toc a {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 10px;
  font-size: .92rem; font-weight: 500; color: var(--ne-text); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.case__toc a span { font-family: var(--font-mono); font-size: .72rem; color: var(--ne-muted); }
.case__toc a:hover { background: var(--ne-paper); }
.case__toc a[aria-current="true"] { background: var(--ne-night); color: #fff; }
.case__toc a[aria-current="true"] span { color: var(--ne-ember); }
@media (max-width: 61.99rem) { .case__toc { display: none; } }

/* Chapitres du récit */
.case__content { display: grid; gap: clamp(1.5rem, 3vw, 2rem); min-width: 0; }
.chapter { scroll-margin-top: 96px; padding: clamp(1.6rem, 4vw, 2.5rem); border-radius: 22px; background: var(--ne-white); border: 1px solid var(--ne-stone); }
.chapter__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.chapter__n {
  font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px var(--ne-stone-d);
}
.chapter__icon {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 12px; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, var(--ne-ember), var(--ne-orange) 45%, var(--ne-red));
}
.chapter__head h2 { margin: 0; font-size: var(--step-2); }
.chapter .prose { max-width: none; }
.chapter .prose p, .chapter .prose ul { max-width: 68ch; }
.chapter .prose ul { padding-left: 1.2rem; }
/* Puce discrète : les textes saisis contiennent souvent déjà leurs propres emojis (✅…) */
.chapter .prose li::marker { color: var(--ne-orange); }

/* Le résultat : chapitre mis en valeur sur fond nuit */
.chapter--result {
  position: relative; overflow: hidden; isolation: isolate; border: 0; color: #E9DCD8;
  background: radial-gradient(30rem 18rem at 100% 0%, rgba(217, 84, 26, .4), transparent 65%), var(--ne-night);
}
.chapter--result h2 { color: #fff; }
.chapter--result .chapter__n { -webkit-text-stroke-color: rgba(238, 141, 44, .55); }
.chapter--result .prose { color: #E2D3CE; }
.chapter--result .prose strong { color: #fff; }
.chapter--result .prose li::marker { color: #3DDC84; }

/* Galerie */
.case-gallery { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.case-gallery__item { margin: 0; }
.case-gallery__item:first-child { grid-column: 1 / -1; }
.case-gallery__item button {
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  cursor: zoom-in; background: var(--ne-stone); aspect-ratio: 4 / 3;
}
.case-gallery__item:first-child button { aspect-ratio: 16 / 8; }
.case-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case-gallery__item button:hover img { transform: scale(1.05); }
.case-gallery__zoom {
  position: absolute; right: .8rem; bottom: .8rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 10px; background: rgba(20, 7, 9, .75); color: #fff; opacity: 0; transition: opacity .25s ease;
}
.case-gallery__item button:hover .case-gallery__zoom, .case-gallery__item button:focus-visible .case-gallery__zoom { opacity: 1; }
.case-gallery__item figcaption { margin-top: .45rem; font-size: .82rem; color: var(--ne-muted); }

/* Appel à l'action en fin de récit */
.case-cta {
  display: grid; gap: 1.5rem; align-items: center; padding: clamp(1.6rem, 4vw, 2.5rem); border-radius: 22px; color: #E9DCD8;
  background:
    radial-gradient(26rem 16rem at 0% 100%, rgba(184, 8, 11, .35), transparent 65%),
    radial-gradient(26rem 16rem at 100% 0%, rgba(238, 141, 44, .35), transparent 65%),
    var(--ne-night);
}
@media (min-width: 48rem) { .case-cta { grid-template-columns: 1fr auto; } }
.case-cta h2 { color: #fff; font-size: var(--step-2); margin-bottom: .35rem; }
.case-cta p:last-child { margin: 0; color: var(--ne-muted-l); }
.case-cta__actions { display: grid; gap: .6rem; }

/* Projet précédent / suivant */
.case-pager { border-top: 1px solid var(--ne-stone); background: var(--ne-white); }
.case-pager__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.case-pager__link { display: block; padding: 1.6rem 0; text-decoration: none; color: var(--ne-text); }
.case-pager__link small { display: flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .72rem; color: var(--ne-muted); text-transform: uppercase; letter-spacing: .08em; }
.case-pager__link strong { display: block; margin-top: .35rem; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -.02em; }
.case-pager__link:hover strong { color: var(--ne-red); }
.case-pager__link--next { text-align: right; }
.case-pager__link--next small { justify-content: flex-end; }

.work-card__title { font-size: 1.2rem; letter-spacing: -.02em; margin: 0; }
.work-card:hover .work-card__title { color: var(--ne-red); }

/* Visionneuse plein écran */
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 3, 5, .94); color: #fff;
}
.lightbox::backdrop { background: rgba(10, 3, 5, .6); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { margin: 0; padding: 4rem 1rem 2rem; display: grid; justify-items: center; gap: .9rem; max-width: 100%; }
.lightbox__figure img { max-width: min(92vw, 1400px); max-height: 80vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
.lightbox__figure figcaption { font-family: var(--font-mono); font-size: .8rem; color: var(--ne-muted-l); text-align: center; }
.lightbox__close, .lightbox__nav {
  position: fixed; z-index: 2; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.2rem;
  transition: background-color .2s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--ne-orange); border-color: var(--ne-orange); }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 1.2rem; }
.lightbox__nav--next { right: 1.2rem; }

/* --- Campagnes en cours : carrousel sur fond nuit ---------------------- */
.ads-band { position: relative; overflow: hidden; isolation: isolate; background: var(--ne-night); color: #E9DCD8; }
.ads-band::before {
  content: ''; position: absolute; z-index: -1; right: -10rem; top: -12rem; width: 44rem; height: 30rem;
  border-radius: 50%; filter: blur(60px); opacity: .45;
  background: radial-gradient(circle, var(--ne-orange), transparent 65%);
}
.ads-band h2 { color: #fff; }
.ads-band .lede { color: var(--ne-muted-l); }
.icon-btn--dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }
.icon-btn--dark:hover { background: var(--ne-orange); border-color: var(--ne-orange); }

/* Plusieurs cartes visibles : 3 sur grand écran, 2 sur tablette, 1,15 sur téléphone */
.slider--multi .slider__track { gap: 1.25rem; padding-bottom: .5rem; }
.slider--multi [data-slide] { flex: 0 0 calc((100% - 2.5rem) / 3); scroll-snap-align: start; }
@media (max-width: 61.99rem) { .slider--multi [data-slide] { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 40rem)    { .slider--multi [data-slide] { flex-basis: 86%; } }

.ad-card { min-width: 0; }
.ad-card__open {
  display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; text-align: left; cursor: pointer;
  border-radius: 20px; overflow: hidden; font: inherit; color: inherit;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.ad-card__open:hover { transform: translateY(-5px); border-color: rgba(238, 141, 44, .55); background: rgba(255, 255, 255, .08); }
.ad-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0B0405; }
.ad-card__media img, .ad-card__media video { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.ad-card__open:hover .ad-card__media img, .ad-card__open:hover .ad-card__media video { transform: scale(1.05); }
.ad-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; color: rgba(255, 255, 255, .3); }
.ad-card__play {
  position: absolute; inset: 0; margin: auto; width: 3.6rem; height: 3.6rem; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ne-bordeaux); font-size: 1.7rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7);
}
.ad-card__live {
  position: absolute; left: .9rem; top: .9rem; display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: var(--r-pill); background: rgba(20, 7, 9, .75); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #fff;
}
.ad-card__live span { width: .45rem; height: .45rem; border-radius: 50%; background: #FF4D4F; animation: ping-red 1.8s infinite; }
@keyframes ping-red { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 79, .6); } 70% { box-shadow: 0 0 0 .45rem rgba(255, 77, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); } }
.ad-card__body { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: 1.2rem 1.25rem 1.3rem; }
.ad-card__client { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ne-ember); }
.ad-card__title { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; color: #fff; }
.ad-card__text { font-size: .86rem; line-height: 1.5; color: var(--ne-muted-l); }
.ad-card__more { margin-top: auto; padding-top: .7rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--ne-ember); }

/* Fenêtre de détail */
.ad-modal {
  width: min(64rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 22px;
  overflow: auto; color: #E9DCD8; background: var(--ne-night);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9);
}
.ad-modal::backdrop { background: rgba(10, 3, 5, .78); backdrop-filter: blur(4px); }
.ad-modal[open] { animation: modal-in .3s cubic-bezier(.2, .7, .3, 1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.ad-modal .lightbox__close { position: absolute; }
.ad-modal__inner { display: grid; }
@media (min-width: 52rem) { .ad-modal__inner { grid-template-columns: 1.1fr 1fr; } }
.ad-modal__media { position: relative; display: grid; place-items: center; min-height: 16rem; background: #0B0405; }
.ad-modal__media img, .ad-modal__media video { width: 100%; height: 100%; max-height: 80vh; object-fit: contain; }
.ad-modal__body { padding: clamp(1.6rem, 4vw, 2.5rem); padding-top: clamp(2.6rem, 5vw, 3.2rem); }
.ad-modal__body h2 { color: #fff; font-size: var(--step-2); margin-bottom: .6rem; }
.ad-modal__client, .ad-modal__dates { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; font-size: .88rem; color: var(--ne-muted-l); }
.ad-modal__client .bi, .ad-modal__dates .bi { color: var(--ne-ember); }
.ad-modal__text { margin: 1.25rem 0 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .1); color: #E2D3CE; }
.ad-modal__text p { max-width: none; }

/* --- Témoignages : un à la fois, en défilement ------------------------ */
.testimonials { position: relative; overflow: hidden; }
.slider--quotes { max-width: 52rem; margin-inline: auto; }
.slider--quotes .slider__track { gap: 1.5rem; }
.tquote {
  flex: 0 0 100%; scroll-snap-align: center; margin: 0; position: relative; text-align: center;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3.5rem);
  border-radius: 24px; background: var(--ne-white); border: 1px solid var(--ne-stone);
  box-shadow: 0 30px 60px -45px rgba(61, 5, 11, .55);
}
.tquote__mark {
  display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 1rem; border-radius: 50%;
  font-size: 2rem; color: #fff; background: linear-gradient(135deg, var(--ne-ember), var(--ne-orange) 45%, var(--ne-red));
}
.tquote__stars { margin: 0 0 1rem; color: #F2A541; letter-spacing: .15em; font-size: .95rem; }
.tquote__text { margin: 0 auto 1.75rem; max-width: 40rem; font-family: var(--font-read); font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.65; color: var(--ne-text); }
.tquote__text p { max-width: none; }
.tquote__who { display: inline-flex; align-items: center; gap: .85rem; text-align: left; }
.tquote__who img, .tquote__initial {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 3px var(--ne-white), 0 0 0 5px rgba(217, 84, 26, .35);
}
.tquote__initial { display: grid; place-items: center; background: var(--ne-night); color: var(--ne-ember); font-family: var(--font-display); font-size: 1.3rem; }
.tquote__who strong { display: block; font-size: 1rem; }
.tquote__who span span, .tquote__who > span > span { display: block; font-size: .85rem; color: var(--ne-muted); }
.tquote__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.tquote__nav .slider__dots { margin-top: 0; }

/* Version compacte, en fin de page après le Journal : plus discrète que lui */
.testimonials--compact .section-head { margin-bottom: 1.5rem; }
.testimonials--compact .section-head h2 { font-size: var(--step-2); }
.testimonials--compact .slider--quotes { max-width: 40rem; }
.testimonials--compact .tquote { padding: 1.5rem 1.75rem 1.4rem; border-radius: 18px; box-shadow: none; background: var(--ne-paper); }
.testimonials--compact .tquote__mark { width: 2.3rem; height: 2.3rem; font-size: 1.4rem; margin-bottom: .6rem; }
.testimonials--compact .tquote__stars { margin-bottom: .6rem; font-size: .8rem; }
.testimonials--compact .tquote__text { margin-bottom: 1.1rem; font-size: 1rem; line-height: 1.6; }
.testimonials--compact .tquote__who img, .testimonials--compact .tquote__initial { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.testimonials--compact .tquote__who strong { font-size: .92rem; }
.testimonials--compact .tquote__nav { margin-top: 1rem; }
.testimonials--compact .icon-btn { width: 2.4rem; height: 2.4rem; font-size: .9rem; }

/* Apparition au défilement (uniquement si JavaScript est actif) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .hero__copy > *, .hero__visual { animation: rise .8s cubic-bezier(.2, .7, .3, 1) both; }
  .hero__copy > :nth-child(2) { animation-delay: .08s; }
  .hero__copy > :nth-child(3) { animation-delay: .16s; }
  .hero__copy > :nth-child(4) { animation-delay: .24s; }
  .hero__copy > :nth-child(5) { animation-delay: .32s; }
  .hero__visual { animation-delay: .3s; animation-duration: 1.1s; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* Bandeau d'ouverture d'une fiche projet : plafonné pour qu'une capture
   verticale ne repousse pas le texte hors de l'écran. */
.cover {
  width: 100%; max-height: 520px; object-fit: cover; object-position: top center;
  border-radius: var(--r-sharp) var(--r-sharp) 0 0; transform: translateY(1px);
}

/* ---------- 7. En-tête des pages intérieures ------------------------- */
/* Même univers que l'accroche de l'accueil : fond nuit, halo orange,
   image éventuelle en transparence (réglages pagehead_*), filet lumineux. */
.pagehead {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ne-night); color: #fff;
  padding-block: clamp(3.5rem, 8vw, 5.75rem) clamp(3.25rem, 7vw, 5rem);
}
.pagehead::before {
  content: ''; position: absolute; z-index: -1; right: -12rem; top: -14rem; width: 40rem; height: 36rem;
  border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none;
  background: radial-gradient(circle, var(--ne-orange), transparent 65%);
}
.pagehead::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--ne-orange) 30%, var(--ne-ember) 70%, transparent);
}
.pagehead > .shell { position: relative; z-index: 1; }
.pagehead h1 {
  color: #fff; margin-bottom: .4em; max-width: 18ch;
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); line-height: 1.04; letter-spacing: -.04em;
}
.pagehead p { color: #CDB9B3; max-width: 58ch; margin-bottom: 0; font-size: var(--step-1); line-height: 1.55; }
.pagehead .eyebrow { margin-bottom: 1rem; font-size: .74rem; line-height: 1.4; color: var(--ne-ember); }

/* Image de fond : teintée par le fond nuit (mode luminosité) puis voilée
   par un dégradé plus dense à gauche, où se trouve le texte. */
.pagehead__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(100deg, rgba(20, 7, 9, .95) 15%, rgba(20, 7, 9, .72) 50%, rgba(20, 7, 9, .45) 100%),
    linear-gradient(180deg, transparent 55%, var(--ne-night) 100%),
    var(--pagehead-image) center / cover no-repeat;
  background-color: var(--ne-night);
  background-blend-mode: normal, normal, luminosity;
}

/* Pastilles d'information sous le titre (délai, prix, nombre…) */
.pagehead__meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; padding: 0; list-style: none; }
.pagehead__meta li {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px);
  font-size: .86rem; color: #EDE3DF;
}
.pagehead__meta .bi { color: var(--ne-ember); }
.pagehead__meta strong { color: #fff; }

.crumbs { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em; color: var(--ne-muted-l); margin-bottom: 1.4rem; }
.crumbs a { color: var(--ne-muted-l); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: var(--ne-ember); }
.crumbs span[aria-hidden] { margin-inline: .35rem; opacity: .5; }

/* ---------- 8. Cartes ------------------------------------------------ */
.card {
  background: var(--ne-white); border: 1px solid var(--ne-stone);
  border-radius: var(--r-soft); padding: 1.6rem 1.5rem; height: 100%;
}
.card h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.card p { font-size: .95rem; color: var(--ne-muted); margin-bottom: 0; }
.card__icon { font-size: 1.55rem; color: var(--ne-orange); margin-bottom: .9rem; display: block; }
.card__link {
  display: inline-block; margin-top: 1.1rem; font-size: .92rem; font-weight: 600;
  color: var(--ne-orange-d); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.card__link:hover { color: var(--ne-red); }
.card__meta { font-size: .82rem; color: var(--ne-muted); margin-top: 1rem; }

.card--service {
  display: flex; flex-direction: column; position: relative;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card--service:hover { border-color: var(--ne-stone-d); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
/* Toute la carte est cliquable, pas seulement le lien du bas */
.card--service .card__link::after { content: ''; position: absolute; inset: 0; }
.card__icon--boxed {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  font-size: 1.3rem; border-radius: var(--r-soft); background: rgba(217, 84, 26, .1);
}
.card--service .card__link { margin-top: auto; align-self: flex-start; padding-top: 1.1rem; }

/* Carte d'article : image en tête, détails en dessous, description limitée. */
.article-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--ne-white); border: 1px solid var(--ne-stone); border-radius: 16px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.article-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -32px rgba(107, 13, 19, .55); }
.article-card__media { display: block; aspect-ratio: 16 / 10; background: var(--ne-stone); overflow: hidden; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ne-muted); font-size: 2rem; }
.article-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.article-card__meta { font-size: .82rem; color: var(--ne-orange-d); font-weight: 600; margin-bottom: .4rem; }
.article-card__body h3 { font-size: var(--step-1); margin: 0 0 .5rem; }
.article-card__body h3 a { color: inherit; text-decoration: none; }
.article-card__body h3 a:hover { color: var(--ne-red); }
.article-card__body p { font-size: .95rem; color: var(--ne-muted); margin-bottom: 0; }
.article-card .card__link { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; }

/* ---------- 9. Vignettes de projets ---------------------------------- */
.work { display: block; text-decoration: none; color: inherit; }
.work__frame {
  position: relative; overflow: hidden; border-radius: var(--r-sharp);
  background: var(--ne-stone); aspect-ratio: 3 / 2;
}
.work__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.work:hover .work__frame img, .work:focus-visible .work__frame img { transform: scale(1.04); }
.work__cat {
  position: absolute; top: .75rem; left: .75rem;
  background: rgba(250,246,243,.94); color: var(--ne-bordeaux);
  font-size: .74rem; font-weight: 600; padding: .28rem .6rem; border-radius: var(--r-pill);
}
.work__body { padding-top: .95rem; }
.work__title { font-size: 1.08rem; font-weight: 700; line-height: 1.25; margin: 0 0 .25rem; }
.work:hover .work__title { color: var(--ne-red); }
.work__client { font-size: .87rem; color: var(--ne-muted); }

.work__placeholder {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--ne-bordeaux); color: rgba(255,255,255,.35); font-size: 2rem;
}

/* Filtres du portfolio */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.filters a {
  padding: .45rem 1rem; border: 1px solid var(--ne-stone-d); border-radius: var(--r-pill);
  font-size: .89rem; font-weight: 500; color: var(--ne-muted); text-decoration: none;
}
.filters a:hover { border-color: var(--ne-red); color: var(--ne-red); }
.filters a[aria-current="true"] { background: var(--ne-bordeaux); border-color: var(--ne-bordeaux); color: #fff; }

/* Barre filtres + recherche du portfolio */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  margin-bottom: 2.5rem;
}
.toolbar .filters { margin-bottom: 0; }
.search { position: relative; flex: 0 1 17rem; }
.search .bi { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--ne-muted); pointer-events: none; }
.search .input { padding-left: 2.4rem; border-radius: var(--r-pill); }
@media (max-width: 40rem) { .search { flex-basis: 100%; } }

/* ---------- 10. Chiffres, étapes, témoignages ------------------------ */
.stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.stats__cell { padding: 1.4rem 1.5rem 1.4rem 0; border-left: 1px solid var(--ne-stone); padding-left: 1.5rem; }
.stats__cell:first-child { border-left: 0; padding-left: 0; }
.stats__n { display: block; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; line-height: 1; color: var(--ne-bordeaux); letter-spacing: -.03em; }
.stats__l { font-size: .87rem; color: var(--ne-muted); }
.band--dark .stats__cell { border-color: rgba(255,255,255,.16); }
.band--dark .stats__n { color: var(--ne-ember); }
.band--dark .stats__l { color: var(--ne-muted-l); }

/* La numérotation n'apparaît qu'ici, parce que le contenu est
   réellement une séquence chronologique. Cartes façon « tarifs » :
   un bandeau numéro + icône en tête, le texte en dessous. */
.steps {
  counter-reset: step;
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.step {
  counter-increment: step;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-soft);
  overflow: hidden;
  transition: background .2s, border-color .2s;
}
.step:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .3); }
.step__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(135deg, var(--ne-bordeaux-d), var(--ne-red));
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.step__num {
  font-size: 1.7rem; font-weight: 700; line-height: 1;
  color: rgba(255, 255, 255, .38); font-variant-numeric: tabular-nums;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step__icon {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  font-size: 1.2rem; color: var(--ne-ember);
  background: rgba(238, 141, 44, .14); border-radius: var(--r-pill);
}
.step__body { padding: 1.4rem 1.4rem 1.6rem; }
.step h3 { font-size: var(--step-1); margin-bottom: .5rem; color: #fff; }
.step p { margin-bottom: 0; color: var(--ne-muted-l); font-size: .94rem; }
.step__when {
  display: block; font-size: .8rem; color: var(--ne-ember); font-weight: 600; margin-top: 1rem;
}

.quote {
  background: var(--ne-white); border: 1px solid var(--ne-stone);
  border-left: 3px solid var(--ne-ember); border-radius: var(--r-soft);
  padding: 1.75rem 1.6rem; height: 100%;
}
.quote blockquote { margin: 0 0 1.25rem; font-family: var(--font-read); font-size: 1.03rem; line-height: 1.65; color: var(--ne-ink); }
.quote figcaption { display: flex; align-items: center; gap: .75rem; }
.quote img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.quote__who { font-weight: 600; font-size: .93rem; }
.quote__role { font-size: .82rem; color: var(--ne-muted); }

/* Logos partenaires */
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.75rem, 5vw, 3.5rem); }
.logos img {
  height: 48px; width: auto; object-fit: contain;
  filter: grayscale(.75) opacity(.85); transition: filter .25s ease;
}
.logos img:hover { filter: none; }
.band--dark .logos img { filter: grayscale(1) brightness(3) opacity(.7); }
.band--dark .logos img:hover { filter: grayscale(1) brightness(3) opacity(1); }

/* ---------- 11. Formulaires ------------------------------------------ */
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .4rem; }
.field .hint { font-size: .82rem; color: var(--ne-muted); margin: .35rem 0 0; }
.req { color: var(--ne-err); }

.input, .select, .textarea {
  width: 100%; padding: .78rem .9rem;
  font-family: inherit; font-size: .98rem; color: var(--ne-text);
  background: var(--ne-white); border: 1px solid var(--ne-stone-d); border-radius: var(--r-soft);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--ne-orange);
  box-shadow: 0 0 0 3px rgba(217, 84, 26, .16);
}
.textarea { min-height: 8.5rem; resize: vertical; line-height: 1.55; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--ne-err); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; padding: .5rem 1rem; cursor: pointer;
  border: 1px solid var(--ne-stone-d); border-radius: var(--r-pill);
  font-size: .89rem; color: var(--ne-muted);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip input:checked + span { background: var(--ne-bordeaux); border-color: var(--ne-bordeaux); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--ne-ember); outline-offset: 2px; }

.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; font-weight: 400; color: var(--ne-muted); }
.field label.check { display: flex; font-weight: 400; }
.check input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--ne-orange); flex: none; }

/* Piège à robots : invisible pour l'humain, rempli par les automates */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.panel {
  background: var(--ne-white); border: 1px solid var(--ne-stone);
  border-top: 3px solid var(--ne-orange); border-radius: var(--r-soft);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* ---------- 12. Alertes ---------------------------------------------- */
.alert {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1rem 1.15rem; border-radius: var(--r-soft);
  border: 1px solid; font-size: .94rem; margin-bottom: 1.5rem;
}
.alert i { font-size: 1.15rem; line-height: 1.3; flex: none; }
.alert p { margin: 0; }
.alert--ok   { background: #EBF6F0; border-color: #B9DCC9; color: #14563a; }
.alert--err  { background: #FBECEB; border-color: #EFC5C2; color: #8E1D17; }
.alert--warn { background: #FDF4E3; border-color: #EBD5A8; color: #7A4E00; }
.alert--info { background: #F2F0FA; border-color: #D3CDE9; color: #3E3670; }

/* ---------- 13. Accordéon (FAQ) -------------------------------------- */
.faq { border-top: 1px solid var(--ne-stone); }
.faq details { border-bottom: 1px solid var(--ne-stone); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; font-weight: 600; font-size: 1.02rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--ne-orange);
  line-height: 1; flex: none; transition: transform .2s ease;
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--ne-red); }
.faq .faq__body { padding: 0 0 1.35rem; color: var(--ne-muted); max-width: 66ch; }
.faq .faq__body p:last-child { margin-bottom: 0; }

/* ---------- 14. Appel à l'action ------------------------------------- */
/* Seule bande en aplat de couleur d'accent du site : volontairement vive,
   jamais sombre, pour rester un appel à l'action et non un mur sombre. */
.cta-band {
  background:
    radial-gradient(50rem 18rem at 85% 0%, rgba(217, 84, 26, .35), transparent 70%),
    radial-gradient(30rem 14rem at 0% 100%, rgba(184, 8, 11, .3), transparent 70%),
    var(--ne-night);
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: #fff;
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
}
.cta-band__inner { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 52rem) { .cta-band__inner { grid-template-columns: 1fr auto; } }
.cta-band h2 { color: #fff; margin-bottom: .3em; font-size: var(--step-2); }
.cta-band p { color: var(--ne-muted-l); margin: 0; }

/* ---------- 15. Pied de page ----------------------------------------- */
.footer {
  background: linear-gradient(180deg, #0F0507, var(--ne-night));
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--ne-muted-l); padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 1rem; }
.footer p { font-size: .9rem; line-height: 1.65; color: var(--ne-muted-l); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .55rem; }
.footer a { color: var(--ne-muted-l); text-decoration: none; font-size: .9rem; }
.footer a:hover { color: var(--ne-ember); text-decoration: underline; }
.footer__brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.footer__brand img { width: 40px; height: 40px; object-fit: contain; }
.footer__brand strong { color: #fff; font-size: 1.05rem; }

.socials { display: flex; gap: .5rem; margin-top: 1.25rem; }
.socials a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-soft); font-size: 1rem;
}
.socials a:hover { background: var(--ne-orange); border-color: var(--ne-orange); color: #fff; }

.footer__base {
  margin-top: 3rem; padding-block: 1.35rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .83rem;
}

.newsletter { display: flex; gap: .5rem; margin-top: .5rem; }
.newsletter .input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: #fff; }
.newsletter .input::placeholder { color: rgba(255,255,255,.45); }

/* Bouton WhatsApp flottant — canal principal en RDC */
.wa {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 55;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1FA855; color: #fff; font-size: 1.5rem;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.5); text-decoration: none;
}
.wa:hover { background: #17913f; color: #fff; }

/* ---------- 16. Utilitaires ------------------------------------------ */
.tag {
  display: inline-block; padding: .3rem .7rem; border-radius: var(--r-pill);
  background: rgba(217, 84, 26, .1); color: var(--ne-orange-d);
  font-size: .78rem; font-weight: 600;
}
.band--dark .tag { background: rgba(238, 141, 44, .16); color: var(--ne-ember); }
.tag--ok   { background: rgba(31,122,76,.12); color: var(--ne-ok); }
.tag--muted{ background: rgba(110,92,87,.1); color: var(--ne-muted); }

.divider { border: 0; border-top: 1px solid var(--ne-stone); margin-block: var(--band); }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.muted { color: var(--ne-muted); }
.small { font-size: var(--step--1); }
.head-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; margin-bottom: 2.5rem; }
.head-row h2 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 2.4rem; padding: .5rem .75rem; text-align: center;
  border: 1px solid var(--ne-stone-d); border-radius: var(--r-soft);
  text-decoration: none; color: var(--ne-muted); font-size: .92rem;
}
.pagination a:hover { border-color: var(--ne-red); color: var(--ne-red); }
.pagination .is-current { background: var(--ne-bordeaux); border-color: var(--ne-bordeaux); color: #fff; }

.empty {
  border: 1px dashed var(--ne-stone-d); border-radius: var(--r-soft);
  padding: 3rem 1.5rem; text-align: center; color: var(--ne-muted);
}
.empty h3 { color: var(--ne-text); }

@media print {
  .masthead, .footer, .wa, .cta-band { display: none; }
  body { background: #fff; }
}