/* =============================================================
   DESIGN 01 — Couche graphique des pages organiques (V2)
   Base claire par défaut + dark mode complet via html[data-theme="dark"]
   Chargée après global.css par agenceclic_enqueue_v2_assets().
   Ne s'applique jamais aux landing pages (namespace .design01 sur body).
   Réf. : docs/refonte/design/DESIGN01.md
   ============================================================= */


/* ---------- Variables de thème ---------- */
:root {
  --d1-canvas: #ffffff;
  --d1-title: #00102e;
  --d1-text: #33415e;
  --d1-text-muted: #5f6d8c;
  --d1-line: rgba(0, 16, 46, .1);
  --d1-line-strong: rgba(0, 16, 46, .2);
  --d1-accent: #0051ff;
  --d1-cell-bg: #ffffff;
  --d1-cell-border: rgba(0, 81, 255, .16);
  --d1-cell-shadow: 0 14px 44px rgba(0, 29, 99, .07);
  --d1-chip-bg: rgba(0, 81, 255, .06);
  --d1-chip-border: rgba(0, 81, 255, .18);
  --d1-span-grad: var(--ui-gradient-primary);
  --d1-quote-mark: rgba(0, 81, 255, .3);
  --d1-pill-text: var(--ui-text-dark);
  --d1-pill-border: rgba(0, 16, 46, 0.1);
  --d1-pill-bg: transparent;
  --d1-row-hover: rgba(0, 81, 255, .04);
}
html[data-theme="dark"] {
  --d1-canvas: #000817;
  --d1-title: #ffffff;
  --d1-text: #c3cde2;
  --d1-text-muted: #8f9bb7;
  --d1-line: rgba(255, 255, 255, .09);
  --d1-line-strong: rgba(255, 255, 255, .16);
  --d1-accent: #7bc3ff;
  --d1-cell-bg: var(--ui-surface-dark);
  --d1-cell-border: rgba(255, 255, 255, .09);
  --d1-cell-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  --d1-chip-bg: rgba(0, 81, 255, .1);
  --d1-chip-border: rgba(255, 255, 255, .12);
  --d1-span-grad: var(--ui-gradient-primary);
  --d1-quote-mark: rgba(55, 159, 255, .5);
  --d1-pill-text: #dfe9ff;
  --d1-pill-border: rgba(122, 178, 255, .35);
  --d1-pill-bg: transparent;
  --d1-row-hover: rgba(0, 81, 255, .06);
}

/* ---------- Canvas ---------- */
body.site-v2.design01 {
  background: var(--d1-canvas);
  color: var(--d1-text);
}

.design01 .section {
  width: 100%;
  padding-block: clamp(84px, 9vw, 136px);
  padding-inline: var(--ui-container-padding);
}

.design01 {
  --ui-max-width: var(--ui-container-wide);
  --ui-container-max: var(--ui-container-wide);
}

.design01 .site-header__inner { max-width: none; }

.design01 .pill,
.design01 .pill--glass {
  font-size: 13px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 8px 16px;
}

.design01 .d1-hero .pill {
  color: #dfe9ff;
  border-color: rgba(122, 178, 255, .4);
  background: rgba(0, 81, 255, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.design01 .section .pill,
.design01 .d1-contact-heading .pill {
  color: var(--d1-pill-text);
  border-color: var(--d1-pill-border);
  background: var(--d1-pill-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="dark"] .process .pill { background: transparent; }
html[data-theme="dark"] .process .pill--glass { background: transparent; }

/* ---------- Titres de section ---------- */
.d1-heading {
  width: 100%;
  max-width: var(--ui-container-wide);
  margin: 0 auto var(--ui-section-header-gap);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-space-5);
}

.d1-heading h2 {
  margin: 0;
  max-width: 21ch;
  font-size: var(--ui-font-case-heading);
  font-weight: 700;
  line-height: 1.02;
  color: var(--d1-title);
  text-wrap: balance;
}
.d1-heading h2 .text-gradient {
  background: var(--d1-span-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.d1-heading > p { margin: 0; max-width: var(--ui-measure-lead); font-size: var(--ui-font-body-lg); color: var(--d1-text-muted); }
.d1-heading--center { align-items: center; text-align: center; }
.d1-heading--center h2 { max-width: 24ch; }

/* =========================================================
   HERO
========================================================= */
.d1-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height:100dvh;
  padding-top: calc(var(--site-header-safe-area, 110px) + clamp(40px, 6vh, 72px));
  padding-bottom: 0;
  padding-inline: var(--ui-container-padding);
  background:    
	radial-gradient(ellipse 130% 110% at 50% -10%, var(--ui-black) 10%, var(--ui-dark-blue) 40%, var(--ui-primary) 66%, var(--ui-white) 100%),
    var(--d1-canvas);
;
}
html[data-theme="dark"] .d1-hero {
  background:
    radial-gradient(ellipse 130% 110% at 50% -10%, var(--ui-black) 10%, var(--ui-dark-blue) 40%, var(--ui-primary) 66%, var(--ui-bg-darker) 100%),
    var(--d1-canvas);
}
@media (max-width: 768px) {
  html[data-theme="dark"] .d1-hero {
    background:
      radial-gradient(ellipse 260% 110% at 50% -10%, var(--ui-black) 10%, var(--ui-dark-blue) 40%, var(--ui-primary) 66%, var(--ui-bg-darker) 100%),
      var(--d1-canvas);
  }
}
.d1-hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .55;
  mask-image: linear-gradient(to bottom, transparent 4%, #000 24%, #000 56%, transparent 84%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 24%, #000 56%, transparent 84%);
}
.d1-hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 46%;
  width: min(1100px, 120vw); height: 620px;
  transform: translateX(-50%);
  background: var(--ui-gradient-glow);
  opacity: .55;
  filter: blur(30px);
}
html[data-theme="dark"] .d1-hero__glow { opacity: .8; }
.d1-hero__inner {
  position: relative; z-index: 1;
  max-width: var(--ui-container-wide);
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--ui-space-6);
}
.d1-hero__title {
  margin: 0;
  font-size: clamp(46px, 6vw, 82px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--ui-white);
  text-wrap: balance;
}
.d1-hero__title span {
  background: var(--ui-gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.d1-hero__lead { margin: 0; max-width: 62ch; font-size: var(--ui-font-body-lg); color: var(--ui-light-blue); text-wrap: balance; }
.d1-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-3); margin-top: var(--ui-space-2); }
.d1-hero__note { margin: 0; display: flex; align-items: center; gap: 9px; font-size: var(--ui-font-body-sm); color: rgba(255,255,255,.8); }
.d1-hero__note span { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-secondary); box-shadow: 0 0 0 5px rgba(55,159,255,.16); }

.d1-hero__tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.d1-hero__tags li { padding: 7px 13px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; font-size: 12.5px; color: rgba(255,255,255,.85); background: rgba(0, 13, 40, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Hero compact (pages intérieures) */
.d1-hero--compact .d1-hero__title { font-size: clamp(38px, 4.6vw, 68px); max-width: 21ch; }
.d1-hero--compact .d1-hero__stage { width: min(860px, 100%); }
.d1-hero--nostage { padding-bottom: clamp(96px, 13vh, 170px); }

/* HERO — Preuve sociale (logos + étoiles), portage LP → D1 */
.d1-hero__satisfaction {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  padding: 0;
  border: 0;
  background: transparent;
}

.d1-hero__satisfaction-content {
  order: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
}

.d1-hero__satisfaction-label {
  font-family: var(--ui-font-heading);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, .66);
}

.d1-hero__satisfaction-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.d1-hero__satisfaction-rating strong {
  font-family: var(--ui-font-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .92);
}

.d1-hero__satisfaction-stars {
  display: flex;
  align-items: center;
  gap: 1px;
}

.d1-hero__satisfaction-stars svg {
  width: 11px;
  height: 11px;
  fill: rgba(55, 159, 255, .78);
}

/* Logos clients */
.d1-hero-trust__logos {
  order: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, .11);
}

.d1-hero-trust__logo {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(0, 24, 63, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.d1-hero-trust__logo + .d1-hero-trust__logo { margin-left: -8px; }
.d1-hero-trust__logo--1 { z-index: 1; }
.d1-hero-trust__logo--2 { z-index: 2; }
.d1-hero-trust__logo--3 { z-index: 3; }
.d1-hero-trust__logo--more { z-index: 4; }

.d1-hero-trust__logo--1 svg { width: 66%; height: 66%; }
.d1-hero-trust__logo--1 .d1-logo-hero {
  fill: rgba(255, 255, 255, .84);
  stroke: rgba(255, 255, 255, .84);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d1-hero-trust__logo--1 > svg > rect:last-child { fill: rgba(255, 255, 255, .84); stroke: none; }

.d1-hero-trust__logo--2 svg { width: 84%; height: 84%; }
.d1-hero-trust__logo--2 .d1-logo-hero { fill: rgba(255, 255, 255, .84); }

.d1-hero-trust__logo--3 svg { width: 56%; height: 56%; }
.d1-hero-trust__logo--3 path { fill: rgba(255, 255, 255, .84); }

.d1-hero-trust__logo--more span {
  font-family: var(--ui-font-heading);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 255, 255, .8);
}

@media (max-width: 768px) {
  .d1-hero__satisfaction { gap: 10px; margin-top: 20px; }
  .d1-hero-trust__logos { padding-right: 10px; }
  .d1-hero-trust__logo { width: 30px; height: 30px; flex-basis: 30px; }
  .d1-hero-trust__logo + .d1-hero-trust__logo { margin-left: -7px; }
}

/* Scène projet */
.d1-hero__stage {
  position: relative;
  width: min(920px, 100%);
  margin-top: clamp(36px, 5vh, 60px);
}
.d1-hero__stage .project-browser {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -30px 120px rgba(0, 81, 255, .3), 0 24px 90px rgba(0, 10, 40, .35);
}
.project-browser__bar { min-height: 46px; padding: 0 16px; display: flex; align-items: center; gap: 7px; color: #52617a; background: #f7f9fd; border-bottom: 1px solid rgba(0,16,46,.08); }
.project-browser__bar > span { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,16,46,.15); }
.project-browser__bar > div { margin-left: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.project-browser__viewport { aspect-ratio: 1200/540; overflow: hidden; background: #eef3ff; }
.project-browser__viewport img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.d1-proof-float {
  position: absolute; z-index: 2;
  width: clamp(190px, 22vw, 250px);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  background: rgba(0, 13, 40, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 44px rgba(0, 81, 255, .22);
}
.d1-proof-float img { width: 100%; max-height: 150px; object-fit: cover; object-position: center top; border-radius: 9px; background: #fff; }
.d1-proof-float figcaption { padding: 9px 4px 2px; font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.7); }
.d1-proof-float strong { color: #fff; font-weight: 600; }
.d1-proof-float--serp { left: clamp(-140px, -9vw, -60px); bottom: 16%; transform: rotate(-4deg); }
.d1-proof-float--psi  { right: clamp(-130px, -8vw, -54px); bottom: 40%; transform: rotate(3deg); }

.d1-hero::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 120px;
  pointer-events: none;
}

/* =========================================================
   BENTO
========================================================= */
.d1-bento {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.d1-bento__cell {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column; justify-content: flex-start;
  border: 1px solid var(--d1-cell-border);
  border-radius: 24px;
  background: var(--d1-cell-bg);
  box-shadow: var(--d1-cell-shadow);
}
.d1-bento__cell h3 { margin: 0 0 9px; max-width: 24ch; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.12; color: var(--d1-title); }
.d1-bento__cell p { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--d1-text-muted); }
.d1-bento__cell--lg { grid-column: span 7; min-height: 330px; }
.d1-bento__cell--third { grid-column: span 4; }
.d1-bento__cell--wide { grid-column: span 12; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding-block: 24px; }
.d1-bento__cell--wide h3 { margin: 0; }
.d1-bento__cell--wide .d1-bento__list { margin: 0; }

/* Cellule photo : scrim sombre conservé dans les deux thèmes (texte blanc) */
.d1-bento__photo { position: absolute; inset: 0; z-index: 0; }
.d1-bento__photo img { width: 100%; height: 100%; object-fit: cover; }
.d1-bento__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,10,30,.9) 16%, rgba(0,10,30,.32) 60%, rgba(0,10,30,.12)); }
html[data-theme="dark"] .d1-bento__photo img { opacity: .55; }
.d1-bento__cell--lg > :not(.d1-bento__photo) { position: relative; z-index: 1; }
.d1-bento__cell--lg h2,
.d1-bento__cell--lg h3 { color: #fff; max-width:60%; }
.d1-bento__cell--lg p { color: rgba(255,255,255,.8); }
.d1-bento__list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.d1-bento__list li { padding: 8px 13px; border: 1px solid var(--d1-chip-border); border-radius: 999px; font-size: 13px; color: var(--d1-text); background: var(--d1-chip-bg); }


/* ---------- Bento v2 : icônes, logo en filigrane, chips ---------- */

/* Carte accentuée (dégradé primaire) — remplace .d1-bento__glow sur la carte "Du sur-mesure" */
.d1-bento__cell--accent {
  background: var(--ui-gradient-primary);
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(0,81,255,.24), 0 30px 70px rgba(0,20,80,.18);
}
.d1-bento__cell--accent h3 { color: #fff; }
.d1-bento__cell--accent p { color: rgba(255,255,255,.82); }

/* Logo en filigrane — utilise mask-image donc ignore les dégradés internes du SVG,
   se contente de la silhouette. Couleur pilotée par background, pas par le SVG. */
.d1-bento__mark {
  position: absolute;
  top: 50%;
  right: -16%;
  width: 62%;
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(-6deg);
  background: rgba(255, 255, 255, .16);
  -webkit-mask-image: var(--mark-url);
  mask-image: var(--mark-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}
.d1-bento__cell--accent > :not(.d1-bento__mark) { position: relative; z-index: 1; }

/* Badge flottant sur la carte photo (remplace le tag texte plein) */
.d1-bento__pin {
  position: absolute !important;
  z-index: 1;
  top: 20px; right: 20px;
  width: max-content;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px 8px 10px;
  border-radius: 999px;
  background: rgba(0,13,40,.55);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px; color: #fff;
}
.d1-bento__pin svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Cartes claires "third" (bento accueil) : fond bleu clair, police bleue */
.d1-bento__cell-one,
.d1-bento__cell-two {
  background: var(--ui-light-blue);
  border-color: rgba(0, 81, 255, .12);
}
.d1-bento__cell-one h3,
.d1-bento__cell-two h3 { color: var(--ui-dark-blue); }
.d1-bento__cell-one p,
.d1-bento__cell-two p { color: var(--ui-primary); opacity: .78; }
html[data-theme="dark"] .d1-bento__cell-one,
html[data-theme="dark"] .d1-bento__cell-two {
  background: rgba(0, 81, 255, .12);
  border-color: rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .d1-bento__cell-one h3,
html[data-theme="dark"] .d1-bento__cell-two h3 { color: #fff; }
html[data-theme="dark"] .d1-bento__cell-one p,
html[data-theme="dark"] .d1-bento__cell-two p { color: var(--ui-secondary); opacity: .85; }

/* Carte sombre "third" (bento accueil) : fond dégradé foncé */
.d1-bento__cell-three {
  background: linear-gradient(165deg, var(--ui-black) 0%, var(--ui-dark-blue) 100%);
  border-color: transparent;
}
.d1-bento__cell-three h3 { color: #fff; }
.d1-bento__cell-three p { color: rgba(255, 255, 255, .72); }

/* =========================================================
   BENTO ACCUEIL — agencement type "nue" (grille 4 colonnes / 3 lignes)
========================================================= */
.d1-bento--home {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(220px, auto) minmax(180px, auto) minmax(220px, auto);
  grid-template-areas:
    "brand   photo   photo   mockup"
    "third1  third2  accent  mockup"
    "wide    wide    accent  third3";
}
.d1-bento--home .d1-bento__cell { min-height: 0; border: none; }

/* Pas de bordures sur les cases du bento accueil */
.d1-bento--home .d1-bento__cell,
.d1-bento--home .d1-bento__cell--accent,
.d1-bento--home .d1-bento__cell-one,
.d1-bento--home .d1-bento__cell-two,
.d1-bento--home .d1-bento__cell-three { border-width: 0; border-style: none; }

/* Bleu clair plus affirmé pour les cases claires + pour les typos sur fond bleu primaire */
.d1-bento--home { --d1-light-blue: #d6e4ff; }

.d1-bento--home .d1-bento__cell--brand  { grid-area: brand; }
.d1-bento--home .d1-bento__cell--lg     { grid-area: photo; min-height: 0; }
.d1-bento--home .d1-bento__cell--mockup { grid-area: mockup; }
.d1-bento--home .d1-bento__cell-one     { grid-area: third1; }
.d1-bento--home .d1-bento__cell-two     { grid-area: third2; }
.d1-bento--home .d1-bento__cell--accent { grid-area: accent; justify-content: flex-start; }
.d1-bento--home .d1-bento__cell-three   { grid-area: third3; }

/* Cases claires : bleu clair franc plutôt que blanc */
.d1-bento--home .d1-bento__cell-one,
.d1-bento--home .d1-bento__cell-two {
  background: var(--d1-light-blue);
}

/* Cases à fond bleu primaire / sombre : la typo reprend ce même bleu clair au lieu du blanc */
.d1-bento--home .d1-bento__cell--accent h3,
.d1-bento--home .d1-bento__cell-three h3,
.d1-bento--home .d1-bento__cell--wide h3,
.d1-bento--home .d1-bento__cell--brand .d1-bento__brand span { color: var(--d1-light-blue); }
.d1-bento--home .d1-bento__cell--accent p,
.d1-bento--home .d1-bento__cell-three p,
.d1-bento--home .d1-bento__cell--wide p { color: rgba(214, 228, 255, .78); }

.d1-bento--home .d1-bento__cell--wide {
  grid-area: wide;
  background: linear-gradient(135deg, var(--ui-dark-blue) 0%, var(--ui-primary) 100%);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding: clamp(24px, 2.6vw, 34px);
}

/* Filigrane de la carte "accent" : repositionné pour la carte haute (2 lignes) */
.d1-bento--home .d1-bento__cell--accent .d1-bento__mark {
  top: auto; bottom: -12%; right: 50%; left: auto;
  width: 82%;
  transform: translateX(50%) rotate(-8deg);
}

/* CTA logé dans la carte "third3" (sombre) : aligné à gauche, collé au texte, pas centré/pleine largeur */
.d1-bento--home .d1-bento__cell-three .d1-section-cta {
  width: auto;
  margin-top: 16px;
  justify-content: flex-start;
}

/* Carte logo (marque, fond sombre) : logo agrandi à gauche, "Agence Clic" sur deux lignes à droite */
.d1-bento--home .d1-bento__cell--brand {
  align-items: center;
  justify-content: center;
  text-align: left;
  background: linear-gradient(155deg, var(--ui-black) 0%, var(--ui-dark-blue) 60%, var(--ui-primary) 145%);
}
.d1-bento--home .d1-bento__brand {
  display: flex; flex-direction: row; align-items: center; gap: 18px;
  margin-bottom: 0;
}
.d1-bento--home .d1-bento__brand img {
  width: clamp(76px, 7vw, 108px);
  height: clamp(76px, 7vw, 108px);
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
.d1-bento--home .d1-bento__brand-text {
  display: flex; flex-direction: column;
  font-family: var(--ui-font-heading);
  font-size: clamp(26px, 2vw, 34px);
  font-weight: 800;
  line-height: 1.08;
  color: var(--ui-white) !important;
}

/* Carte photo Compiègne : filtre bleu marqué appliqué à l'image (teinte réelle, pas un calque transparent) */
.d1-bento--home .d1-bento__cell--lg .d1-bento__photo img {
  filter: grayscale(80%) brightness(.7) contrast(1.1);
}
.d1-bento--home .d1-bento__cell--lg .d1-bento__photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(0, 20, 90, .98) 0%, var(--ui-primary) 55%, var(--ui-secondary) 100%);
  mix-blend-mode: color;
  opacity: .92;
}
.d1-bento--home .d1-bento__cell--lg .d1-bento__photo::after {
  background: linear-gradient(to top, rgba(0, 10, 30, .82) 12%, rgba(0, 16, 46, .18) 55%, transparent 82%);
}

/* Carte mockup : fond plus contrasté, image agrandie, calée en bas, débordant des bords */
.d1-bento--home .d1-bento__cell--mockup {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
  background: linear-gradient(165deg, var(--ui-dark-blue) 0%, var(--ui-primary) 68%, var(--ui-secondary) 130%);
  overflow: hidden;
}
.d1-bento--home .d1-bento__mockup {
  position: relative; inset: 12% 0 0;
  width: 110%; height: auto;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: visible;
}
.d1-bento--home .d1-bento__mockup img {
  width: 100%; height: auto; max-height: none;
  object-fit: contain;
	transform :rotatez(5deg);
  border-radius: 10px;
  filter: drop-shadow(0 18px 34px rgba(0, 10, 40, .45));
}
.d1-bento--home .d1-bento__mockup::after { content: none; }

@media (max-width: 980px) {
  .d1-bento--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "photo  photo"
      "brand  mockup"
      "third1 third2"
      "accent accent"
      "wide   wide"
      "third3 third3";
  }
  .d1-bento--home .d1-bento__cell { min-height: 220px; }
  .d1-bento--home .d1-bento__cell--mockup { min-height: 260px; }
  .d1-bento--home .d1-bento__cell--accent { min-height: 260px; }
}
@media (max-width: 640px) {
  .d1-bento--home {
    grid-template-columns: 1fr;
    grid-template-areas:
      "photo"
      "brand"
      "mockup"
      "third1"
      "third2"
      "accent"
      "wide"
      "third3";
  }
}
@media (max-width: 480px) {
.d1-bento__cell--lg h2 {max-width:100%; padding-top:36px;}
}

/* =========================================================
   RÉALISATIONS
========================================================= */
.d1-case {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
}
.d1-case__item { display: flex; flex-direction: column; gap: var(--ui-space-7); }
.d1-case__title { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.14; color: var(--d1-title); text-wrap: balance; }

.d1-case__media { position: relative; }

.d1-case__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
}
.d1-case__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-space-3); }
.d1-case__desc { margin: 0; max-width: 46ch; color: var(--d1-text-muted); }
.d1-case__facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.d1-case__facts li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--d1-text); }
.d1-case__facts li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--ui-gradient-primary); box-shadow: 0 0 0 4px rgba(0,81,255,.14); }
.d1-case__cta { justify-self: end; align-self: end; white-space: nowrap; }

.d1-case__logo-card {
  position: relative;
  aspect-ratio: 1200 / 620;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 11%;
  box-shadow: 0 30px 80px rgba(0, 29, 99, .18);
}
.d1-case__logo-card img {
  width: 80%;
  max-width: 300px;
  height: auto;
  filter: brightness(0) invert(1);
}

.d1-case__stats { display: flex; margin: 2px 0 4px; }
.d1-case__stat { display: flex; flex-direction: column; gap: 3px; padding-right: 28px; }
.d1-case__stat + .d1-case__stat { padding-left: 28px; border-left: 1px solid var(--d1-line); }
.d1-case__stat strong {
  font-family: var(--ui-font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--d1-title);
}
.d1-case__stat span { font-size: 12.5px; color: var(--d1-text-muted); }

.d1-case__logo-card::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  filter: blur(65px);
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: auroraDrift 24s ease-in-out infinite alternate;
}

.d1-case__logo-card--bouharrou {
  background: linear-gradient(180deg, #04060b 0%, #010306 100%);
}
.d1-case__logo-card--bouharrou::before {
  background:
    radial-gradient(circle at 12% 50%, rgba(43,86,229, 1), transparent 45%),
    radial-gradient(circle at 92% 10%, rgba(43,86,229,0.8), transparent 50%),
    radial-gradient(circle at 50% 85%, rgba(6,14,28,0.9), transparent 60%)
}

.d1-case__logo-card--kuphydro {
  background: linear-gradient(180deg, #03040a 0%, #070203 100%);
}
.d1-case__logo-card--kuphydro::before {
  background:
    radial-gradient(circle at 18% 20%, rgba(50,120,255,0.8), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(190,20,45,0.9), transparent 55%),
    radial-gradient(circle at 60% 25%, rgba(8,12,24,0.85), transparent 60%)
}

@media (max-width: 980px) {
.d1-case { grid-template-columns: 1fr; gap: 48px; }
.d1-case__footer { grid-template-columns: 1fr; gap: 14px; }
.d1-case__cta { justify-self: flex-start; }
}

/* =========================================================
   SERVICES — sommaire éditorial
========================================================= */
.d1-services { width: 100%; max-width: var(--ui-container-wide); margin-inline: auto; }
.d1-service-row {
  display: grid;
  grid-template-columns: minmax(180px, .32fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  padding-block: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--d1-line);
  text-decoration: none;
  transition: background .3s ease;
}
.d1-service-row:last-child { border-bottom: 1px solid var(--d1-line); }
.d1-service-row:hover { background: var(--d1-row-hover); }
.d1-service-row__label { margin: 0; font-family: var(--ui-font-heading); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--d1-accent); }
.d1-service-row__main h3 { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; color: var(--d1-title); }
.d1-service-row__main p { margin: 0; max-width: 66ch; font-size: 15px; color: var(--d1-text-muted); }
.d1-service-row__arrow {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--d1-line-strong); border-radius: 50%;
  color: var(--d1-title); background: transparent;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.d1-service-row__arrow svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-45deg); transition: transform .3s ease; }
.d1-service-row:hover .d1-service-row__arrow { background: var(--ui-gradient-primary); border-color: transparent; color: #fff; }
.d1-service-row:hover .d1-service-row__arrow svg { transform: rotate(0deg); }

/* Objectifs (contenu unique service) */
.d1-obj-grid {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 80px);
}
.d1-obj {
  padding-block: clamp(24px, 2.6vw, 36px);
  border-top: 1px solid var(--d1-line);
}
.d1-obj__label { margin: 0 0 10px; font-family: var(--ui-font-heading); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d1-accent); }
.d1-obj h3 { margin: 0 0 8px; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.12; color: var(--d1-title); }
.d1-obj p { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.62; color: var(--d1-text-muted); }

/* Table comparative — portage fidèle de .lp-comparison (layout + responsive LP) */
.d1-compare {
  --cmp-col-criterion: 30%;
  --cmp-col-clic: 40%;
  --cmp-col-without: 30%;
  --cmp-mobile-col: 72px;
  --cmp-mobile-col-compact: 56px;
  position: relative;
  width: 100%;
  max-width: var(--ui-container-wide);
  margin-inline: auto;
  isolation: isolate;
}
.d1-compare__label-mobile,
.d1-compare__criterion-detail { display: none; }

.d1-compare__featured-bg {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--cmp-col-criterion);
  z-index: 0;
  width: var(--cmp-col-clic);
  overflow: hidden;
  border: none;
  border-radius: var(--ui-radius-card);
  background: radial-gradient(ellipse 145% 110% at 50% -8%, var(--ui-black) 5%, var(--ui-dark-blue) 38%, var(--ui-primary) 72%, #126fff 100%);
  box-shadow: 0 20px 60px rgba(0, 81, 255, 0.16);
  pointer-events: none;
}
.d1-compare__row {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: var(--cmp-col-criterion) var(--cmp-col-clic) var(--cmp-col-without);
  align-items: stretch;
}
.d1-compare__row:not(.d1-compare__row--last)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: 1px;
  background: rgba(0, 16, 46, 0.08);
  pointer-events: none;
}
html[data-theme="dark"] .d1-compare__row:not(.d1-compare__row--last)::after { background: rgba(255, 255, 255, 0.08); }
.d1-compare__cell {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  font-family: var(--ui-font-body-family);
  font-size: var(--ui-font-body);
  line-height: 1.55;
  padding-block: 16px;
  padding-inline: 16px;
}
.d1-compare__cell--criterion {
  padding-left: 0;
  padding-right: 40px;
  font-family: var(--ui-font-heading);
  font-weight: 500;
  color: var(--d1-text-muted);
}
.d1-compare__cell--clic {
  padding-inline: 44px;
  font-weight: 500;
  color: var(--ui-white);
}
.d1-compare__cell--without {
  padding-left: 44px;
  padding-right: 0;
  color: var(--d1-text-muted);
}
.d1-compare__row--header { min-height: clamp(96px, 12svh, 140px); }
.d1-compare__row--header::after { background: rgba(0, 16, 46, 0.12) !important; }
html[data-theme="dark"] .d1-compare__row--header::after { background: rgba(255, 255, 255, 0.14) !important; }
.d1-compare__column-title {
  display: block;
  font-family: var(--ui-font-heading);
  font-size: clamp(20px, 1.6vw, 22px);
  font-weight: 700;
  line-height: var(--ui-line-heading);
  letter-spacing: var(--ui-letter-heading);
  color: var(--d1-title);
}
.d1-compare__row--header .d1-compare__cell--criterion {
  align-items: flex-end;
  padding-bottom: 40px;
  font-family: var(--ui-font-heading);
  font-weight: 600;
  color: var(--d1-text);
}
.d1-compare__cell--clic-header {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.d1-compare__cell--clic-header .d1-compare__column-title {
  font-size: clamp(24px, 1.9vw, 28px);
  color: var(--ui-white);
}
.d1-compare__badge {
  min-height: 32px;
  padding-inline: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--ui-radius-pill);
  font-family: var(--ui-font-heading);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ui-white);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.d1-compare__row--header .d1-compare__cell--without {
  align-items: flex-end;
  padding-bottom: 40px;
}
.d1-compare__row--header .d1-compare__cell--without .d1-compare__column-title {
  font-size: var(--ui-font-body-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--d1-text);
}

@media (max-width: 1024px) {
  .d1-compare { --cmp-col-criterion: 20%; --cmp-col-clic: 46%; --cmp-col-without: 34%; }
  .d1-compare__cell { min-height: 88px; padding-top: 12px; padding-bottom: 12px; font-size: var(--ui-font-body-sm); }
  .d1-compare__cell--criterion { padding-right: 20px; }
  .d1-compare__cell--clic { padding-inline: 28px; }
  .d1-compare__cell--without { padding-left: 28px; }
  .d1-compare__row--header { min-height: 100px; }
}
@media (max-width: 768px) {
  .d1-compare {
    max-width: none;
    overflow: hidden;
    border: 1px solid rgba(0, 16, 46, 0.1);
    border-radius: var(--ui-radius-card);
    background: var(--ui-white);
    box-shadow: 0 14px 40px rgba(0, 16, 46, 0.06);
  }
  html[data-theme="dark"] .d1-compare { border-color: rgba(255,255,255,.12); background: var(--ui-surface-dark); box-shadow: none; }
  .d1-compare__featured-bg { display: none; }
  .d1-compare__row, .d1-compare__row--header {
    grid-template-columns: minmax(0, 1fr) var(--cmp-mobile-col) var(--cmp-mobile-col);
    padding: 0;
    border-bottom: 1px solid rgba(0, 16, 46, 0.075);
    background: var(--ui-white);
  }
  html[data-theme="dark"] .d1-compare__row, html[data-theme="dark"] .d1-compare__row--header { border-bottom-color: rgba(255,255,255,.08); background: var(--ui-surface-dark); }
  .d1-compare__row--last { border-bottom: 0; }
  .d1-compare__row::after { display: none; }
  .d1-compare__row--header { min-height: 72px; background: rgba(238, 243, 255, 0.45); }
  html[data-theme="dark"] .d1-compare__row--header { background: rgba(255, 255, 255, 0.04); }
  .d1-compare__row--header .d1-compare__cell { min-height: 72px; padding: 12px 8px; }
  .d1-compare__row--header .d1-compare__cell--criterion {
    margin: 0;
    padding-left: 16px;
    display: flex;
    align-items: center;
    font-family: var(--ui-font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--d1-text-muted);
  }
  .d1-compare__cell--clic-header {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ui-white);
    background: radial-gradient(ellipse 145% 110% at 50% -8%, var(--ui-black) 5%, var(--ui-bg-darker) 25%, var(--ui-dark-blue) 60%, var(--ui-primary) 100%);
  }
  .d1-compare__cell--clic-header .d1-compare__column-title { font-size: 10px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--ui-white); }
  .d1-compare__badge { display: none; }
  .d1-compare__row--header .d1-compare__cell--without { padding: 12px 8px; display: flex; align-items: center; justify-content: center; text-align: center; }
  .d1-compare__row--header .d1-compare__cell--without .d1-compare__column-title { font-size: 10px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--d1-text); }
  .d1-compare__label-desktop { display: none; }
  .d1-compare__label-mobile { display: inline; }
  .d1-compare__cell { position: relative; min-width: 0; min-height: 84px; padding: 16px 8px; display: flex; align-items: center; border: 0; }
  .d1-compare__cell--criterion {
    margin: 0;
    padding: 16px 12px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    font-family: var(--ui-font-body-family);
    color: var(--d1-title);
  }
  .d1-compare__criterion-title { display: block; font-family: var(--ui-font-heading); font-size: var(--ui-font-body-sm); font-weight: 600; line-height: 1.15; color: var(--d1-title); }
  .d1-compare__criterion-detail { display: block; max-width: 26ch; font-family: var(--ui-font-body-family); font-size: 10px; font-weight: 400; line-height: 1.35; color: var(--d1-text-muted); }
  .d1-compare__row:not(.d1-compare__row--header) .d1-compare__cell--clic {
    padding: 12px 8px;
    display: grid;
    place-items: center;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background: rgba(0, 81, 255, 0.045);
    border-left: 1px solid rgba(0, 81, 255, 0.07);
    border-right: 1px solid rgba(0, 81, 255, 0.07);
  }
  html[data-theme="dark"] .d1-compare__row:not(.d1-compare__row--header) .d1-compare__cell--clic { background: rgba(0, 81, 255, 0.12); border-color: rgba(55,159,255,.12); }
  .d1-compare__row:not(.d1-compare__row--header) .d1-compare__cell--clic::before {
    content: "\2713";
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-family: Arial, sans-serif;
    font-size: var(--ui-font-body-sm);
    font-weight: 700;
    line-height: 1;
    color: var(--ui-white);
    background: var(--ui-primary);
    box-shadow: 0 6px 16px rgba(0, 81, 255, 0.2);
  }
  .d1-compare__row:not(.d1-compare__row--header) .d1-compare__cell--without { padding: 12px 8px; display: grid; place-items: center; font-size: 0; line-height: 0; color: transparent; background: var(--ui-white); }
  html[data-theme="dark"] .d1-compare__row:not(.d1-compare__row--header) .d1-compare__cell--without { background: var(--ui-surface-dark); }
  .d1-compare__row:not(.d1-compare__row--header) .d1-compare__cell--without::before {
    content: "\00d7";
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: rgba(0, 16, 46, 0.42);
    background: rgba(0, 16, 46, 0.045);
  }
  html[data-theme="dark"] .d1-compare__row:not(.d1-compare__row--header) .d1-compare__cell--without::before { color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
}
@media (max-width: 360px) {
  .d1-compare__row, .d1-compare__row--header { grid-template-columns: minmax(0, 1fr) var(--cmp-mobile-col-compact) var(--cmp-mobile-col-compact); }
  .d1-compare__cell--criterion { padding-left: 12px; padding-right: 8px; }
}

/* Périmètre — checklist utilitaire (distincte du comparatif d'arguments) */
.d1-scope {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 80px);
}
.d1-scope__item {
  display: flex; gap: 16px; align-items: flex-start;
  padding-block: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid var(--d1-line);
}
.d1-scope__check {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ui-primary);
  background: var(--ui-light-blue);
}
html[data-theme="dark"] .d1-scope__check { color: var(--ui-secondary); background: rgba(0, 81, 255, .16); }
.d1-scope__check svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.d1-scope__item h3 { margin: 0 0 5px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.2; color: var(--d1-title); }
.d1-scope__item p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--d1-text-muted); }
@media (max-width: 900px) { .d1-scope { grid-template-columns: 1fr; } }

/* Requêtes SEO — exemples */
.d1-query { width: 100%; max-width: var(--ui-container-wide); margin-inline: auto; }
.d1-query__row {
  display: grid;
  grid-template-columns: minmax(220px, .34fr) minmax(140px, .2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.6vw, 44px);
  padding-block: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--d1-line);
}
.d1-query__row:last-child { border-bottom: 1px solid var(--d1-line); }
.d1-query__row code {
  width: fit-content;
  padding: 9px 15px;
  border: 1px solid rgba(0, 81, 255, .2);
  border-radius: 10px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13.5px;
  color: var(--ui-primary);
  background: rgba(0, 81, 255, .05);
}
html[data-theme="dark"] .d1-query__row code { color: var(--ui-secondary); border-color: rgba(55,159,255,.28); background: rgba(0, 81, 255, .12); }
.d1-query__type { margin: 0; font-family: var(--ui-font-heading); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d1-accent); }
.d1-query__row > p:last-child { margin: 0; font-size: 14.5px; color: var(--d1-text-muted); }
@media (max-width: 900px) { .d1-query__row { grid-template-columns: 1fr; gap: 8px; } }

/* Preuves d'étude de cas — captures réelles + légendes sourcées */
.d1-evidence {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.d1-evidence__card {
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--d1-cell-border);
  border-radius: 20px;
  background: var(--d1-cell-bg);
  box-shadow: var(--d1-cell-shadow);
}
.d1-evidence__media { padding: 14px 14px 0; }
.d1-evidence__media img { width: 100%; height: 300px; object-fit: contain; object-position: center top; border-radius: 10px; border: 1px solid var(--d1-line); background: #fff; }
.d1-evidence__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 7px; }
.d1-evidence__body h3 { margin: 0; font-size: 17px; line-height: 1.25; color: var(--d1-title); }
.d1-evidence__body p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--d1-text-muted); }
.d1-evidence--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 980px) { .d1-evidence, .d1-evidence--two { grid-template-columns: 1fr; max-width: 560px; } }

/* Avis solo (étude de cas) */
.d1-review-solo { width: 100%; max-width: 760px; margin-inline: auto; }

/* Canaux de contact (page contact) */
.d1-channels {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.d1-channel {
  display: flex; align-items: center; gap: 15px;
  padding: 20px 22px;
  border: 1px solid var(--d1-cell-border);
  border-radius: 18px;
  background: var(--d1-cell-bg);
  box-shadow: var(--d1-cell-shadow);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}
.d1-channel:hover { border-color: var(--ui-primary); transform: translateY(-2px); }
.d1-channel__icon { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--ui-primary); background: var(--ui-light-blue); }
html[data-theme="dark"] .d1-channel__icon { color: var(--ui-secondary); background: rgba(0, 81, 255, .16); }
.d1-channel__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d1-channel__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d1-channel__name { font-family: var(--ui-font-heading); font-weight: 600; font-size: 16px; color: var(--d1-title); }
.d1-channel__hint { font-size: 13.5px; color: var(--d1-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d1-channel__arrow { margin-left: auto; flex-shrink: 0; width: 16px; height: 16px; stroke: var(--d1-text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease, stroke .25s ease; }
.d1-channel:hover .d1-channel__arrow { transform: translateX(3px); stroke: var(--ui-primary); }
@media (max-width: 980px) { .d1-channels { grid-template-columns: 1fr; max-width: 560px; } }

/* Blog — filtres + cartes d'articles */
.d1-blog-filters { width: 100%; max-width: var(--ui-container-wide); margin: 0 auto clamp(28px, 3vw, 44px); display: flex; flex-wrap: wrap; gap: 8px; }
.d1-filter-btn {
  padding: 9px 16px;
  border: 1px solid var(--d1-line-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--ui-font-heading);
  font-size: 13.5px; font-weight: 500;
  color: var(--d1-text);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.d1-filter-btn:hover { border-color: var(--ui-primary); color: var(--d1-title); }
.d1-filter-btn.is-active { border-color: transparent; background: var(--ui-gradient-primary); color: #fff; }
.d1-blog-grid {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.d1-post-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 2.2vw, 28px);
  border: 1px solid var(--d1-cell-border);
  border-radius: 20px;
  background: var(--d1-cell-bg);
  box-shadow: var(--d1-cell-shadow);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}
.d1-post-card:hover { border-color: var(--ui-primary); transform: translateY(-3px); }
.d1-post-card__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--d1-text-muted); }
.d1-post-card__cat { padding: 5px 11px; border: 1px solid rgba(0, 81, 255, .2); border-radius: 999px; font-family: var(--ui-font-heading); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--d1-accent); background: rgba(0, 81, 255, .05); }
html[data-theme="dark"] .d1-post-card__cat { border-color: rgba(55,159,255,.3); background: rgba(0,81,255,.14); }
.d1-post-card h3 { margin: 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.25; color: var(--d1-title); }
.d1-post-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--d1-text-muted); }
.d1-post-card__link { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui-font-heading); font-size: 14px; font-weight: 600; color: var(--d1-title); }
.d1-post-card__link svg { width: 15px; height: 15px; stroke: var(--ui-primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
html[data-theme="dark"] .d1-post-card__link svg { stroke: var(--ui-secondary); }
.d1-post-card:hover .d1-post-card__link svg { transform: translateX(3px); }
.d1-blog-notice {
  width: 100%; max-width: var(--ui-container-wide); margin: 0 auto clamp(24px, 2.6vw, 36px);
  padding: 14px 18px;
  border: 1px dashed var(--d1-line-strong);
  border-radius: 14px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--d1-text-muted);
  background: var(--d1-chip-bg);
}
.d1-blog-pagination { width: 100%; max-width: var(--ui-container-wide); margin: clamp(32px, 4vw, 52px) auto 0; display: flex; justify-content: center; gap: 8px; }
.d1-blog-pagination span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--d1-line-strong); border-radius: 50%; font-family: var(--ui-font-heading); font-size: 14px; color: var(--d1-text); }
.d1-blog-pagination span.is-active { border-color: transparent; background: var(--ui-gradient-primary); color: #fff; }
@media (max-width: 980px) { .d1-blog-grid { grid-template-columns: 1fr; max-width: 560px; } }

/* Rangées numérotées (stratégie) */
.d1-num-row {
  display: grid;
  grid-template-columns: minmax(120px, .2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 56px);
  padding-block: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--d1-line);
}
.d1-num-row:last-child { border-bottom: 1px solid var(--d1-line); }
.d1-num-row__number { margin: 0; font-family: var(--ui-font-heading); font-size: clamp(34px, 3vw, 46px); font-weight: 700; line-height: 1; background: var(--d1-span-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.d1-num-row__main h3 { margin: 0 0 6px; font-size: clamp(21px, 2vw, 28px); line-height: 1.12; color: var(--d1-title); }
.d1-num-row__main p { margin: 0; max-width: 68ch; font-size: 15px; color: var(--d1-text-muted); }

/* Cellule bento demi + quart */
.d1-bento__cell--half { grid-column: span 6; }
.d1-bento__cell--quarter { grid-column: span 3; min-height: 230px; }

/* Bande deux colonnes (après-livraison) */
.d1-band {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--d1-cell-border);
  border-radius: 26px;
  background: var(--d1-cell-bg);
  box-shadow: var(--d1-cell-shadow);
}
.d1-band h2 { margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.08; color: var(--d1-title); text-wrap: balance; }
.d1-band > div > p { margin: 0; color: var(--d1-text-muted); }

/* =========================================================
   PROCESS (composant LP) — override dark uniquement
========================================================= */
html[data-theme="dark"] .process { background: var(--ui-bg-darker); }
html[data-theme="dark"] .process__title { color: #fff; }
html[data-theme="dark"] .process .pill { color: #dfe9ff; border-color: rgba(122,178,255,.4); }
html[data-theme="dark"] .process .pill--glass { background: rgba(0,81,255,.16); }
html[data-theme="dark"] .process__lead { color: var(--d1-text-muted); }
html[data-theme="dark"] .process__progress { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .process-step__number { color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.14); background-color: #050e22; }
html[data-theme="dark"] .process-step.is-accent .process-step__number { color: var(--ui-secondary); border-color: rgba(55,159,255,.4); background-color: #0b1c3f; }
html[data-theme="dark"] .process-step.is-active .process-step__number { color: #fff; }
html[data-theme="dark"] .process-step__title { color: rgba(255,255,255,.32); }
html[data-theme="dark"] .process-step__desc { color: rgba(255,255,255,.28); }
html[data-theme="dark"] .process-step.is-accent .process-step__title { color: rgba(255,255,255,.66); }
html[data-theme="dark"] .process-step.is-accent .process-step__desc { color: rgba(255,255,255,.5); }
html[data-theme="dark"] .process-step.is-active .process-step__title { color: #fff; }
html[data-theme="dark"] .process-step.is-active .process-step__desc { color: var(--d1-text); }

/* =========================================================
   PROXIMITÉ / CARTE
========================================================= */
.d1-local__layout {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center; gap: clamp(40px, 6vw, 90px);
}
.d1-local__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-space-5); }
.d1-local__copy h2 { margin: 0; max-width: 18ch; font-size: var(--ui-font-case-heading); line-height: 1.02; color: var(--d1-title); text-wrap: balance; }
.d1-local__copy h2 .text-gradient { background: var(--d1-span-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.d1-local__copy p { margin: 0; max-width: 54ch; color: var(--d1-text-muted); }
.d1-local__points { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.d1-local__points li { position: relative; padding-left: 22px; color: var(--d1-text); font-size: 15px; }
.d1-local__points li::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-gradient-primary); box-shadow: 0 0 0 4px rgba(0,81,255,.14); }

.d1-map {
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--d1-cell-border);
  border-radius: 26px;
  background: var(--ui-surface-light);
  box-shadow: var(--d1-cell-shadow);
}
html[data-theme="dark"] .d1-map { background: var(--ui-surface-dark); }
.d1-map .carte-zone { display: block; width: 100%; height: auto; }
.d1-map .carte-zone__region { fill: #e0eaff; stroke: #c7d3ea; stroke-width: .6; stroke-linejoin: round; }
.d1-map .carte-zone__region--sud { stroke: none; }
.d1-map .carte-zone__region--hdf { fill: #c8dbff; stroke: var(--ui-primary); stroke-opacity: .55; stroke-width: .7; }
html[data-theme="dark"] .d1-map .carte-zone__region { fill: #142547; stroke: rgba(255,255,255,.13); }
html[data-theme="dark"] .d1-map .carte-zone__region--hdf { fill: #1e3c78; stroke: var(--ui-secondary); stroke-opacity: .5; }
.d1-map .carte-zone__marqueur { cursor: pointer; text-decoration: none; }
.d1-map .carte-zone__marqueur-hitzone { fill: transparent; stroke: none; }
.d1-map .carte-zone__marqueur-point { fill: var(--d1-title); }
.d1-map .carte-zone__marqueur-anneau { fill: none; stroke: var(--ui-primary); stroke-width: .7; opacity: 0; transform-box: fill-box; transform-origin: center; animation: d1-pulse 2.6s ease-out infinite; animation-delay: var(--marqueur-delay, 0s); }
html[data-theme="dark"] .d1-map .carte-zone__marqueur-anneau { stroke: var(--ui-secondary); }
.d1-map .carte-zone__marqueur-anneau--2 { animation-delay: calc(var(--marqueur-delay, 0s) + 1.3s); }
.d1-map .carte-zone__marqueur-ligne { stroke: rgba(0, 16, 46, .38); stroke-width: .45; }
html[data-theme="dark"] .d1-map .carte-zone__marqueur-ligne { stroke: rgba(255,255,255,.4); }
.d1-map .carte-zone__marqueur-label { font-family: var(--ui-font-heading); font-size: 6.4px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; fill: var(--d1-title); }
.d1-map .carte-zone__marqueur--agence .carte-zone__marqueur-label { fill: var(--ui-primary); }
html[data-theme="dark"] .d1-map .carte-zone__marqueur--agence .carte-zone__marqueur-label { fill: var(--ui-secondary); }
.d1-map .carte-zone__marqueur:hover .carte-zone__marqueur-label { fill: var(--ui-secondary); }
.d1-map__badge {
  position: absolute; left: clamp(16px, 2vw, 26px); bottom: clamp(16px, 2vw, 26px);
  display: flex; align-items: center; gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--d1-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 13px; color: var(--d1-text);
}
html[data-theme="dark"] .d1-map__badge { border-color: rgba(255,255,255,.16); background: rgba(0, 8, 23, .72); }
.d1-map__badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-secondary); box-shadow: 0 0 0 4px rgba(55,159,255,.16); }
@keyframes d1-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .d1-map .carte-zone__marqueur-anneau { animation: none; opacity: 0; } }

/* =========================================================
   AVIS — 3 cartes témoignage
========================================================= */
.d1-reviews__grid {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.d1-review-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid var(--d1-cell-border);
  border-radius: 22px;
  background: var(--d1-cell-bg);
  box-shadow: var(--d1-cell-shadow);
}
.d1-review-card::before {
  content: "\201C";
  font-family: var(--ui-font-heading);
  font-size: 86px; line-height: .6;
  color: var(--d1-quote-mark);
  display: block; margin: 6px 0 18px;
}
.d1-review-card blockquote { margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--d1-text); }
.d1-review-card footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--d1-line); display: flex; flex-direction: column; gap: 3px; }
.d1-review-card cite { font-style: normal; font-family: var(--ui-font-heading); font-weight: 600; color: var(--d1-title); }
.d1-review-card footer span { font-size: 13px; color: var(--d1-text-muted); }
.d1-review-card--pending { border-style: dashed; }
.d1-review-card--pending blockquote { font-style: italic; color: var(--d1-text-muted); }

/* =========================================================
   FAQ (composant LP) — override dark uniquement
   (le hero card FAQ reste identique : il est déjà sombre)
========================================================= */
html[data-theme="dark"] .faq { background: var(--d1-canvas); }
html[data-theme="dark"] .faq__categories { border-color: rgba(255,255,255,.1); background: var(--ui-surface-dark); }
html[data-theme="dark"] .faq__categories-header span { color: #fff; }
html[data-theme="dark"] .faq-category { color: var(--d1-text-muted); }
html[data-theme="dark"] .faq-category::after { background: rgba(255,255,255,.18); }
html[data-theme="dark"] .faq-category:hover { color: #fff; }
html[data-theme="dark"] .faq-category.is-active { color: var(--ui-secondary); }
html[data-theme="dark"] .faq-panel { border-color: rgba(255,255,255,.1); background: var(--ui-surface-dark); }
html[data-theme="dark"] .faq-panel__header { border-bottom-color: rgba(255,255,255,.07); background: rgba(255,255,255,.03); }
html[data-theme="dark"] .faq-panel__header h3 { color: #fff; }
html[data-theme="dark"] .faq-item + .faq-item { border-top-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .faq-item__question { color: #eef3ff; }
html[data-theme="dark"] .faq-item__trigger:hover .faq-item__question { color: var(--ui-secondary); }
html[data-theme="dark"] .faq-item.is-open { background: rgba(0,81,255,.07); }
html[data-theme="dark"] .faq-item.is-open .faq-item__question { color: var(--ui-secondary); }
html[data-theme="dark"] .faq-item__icon { border-color: rgba(255,255,255,.14); background: rgba(0,81,255,.16); }
html[data-theme="dark"] .faq-item__icon span { background: var(--ui-secondary); }
html[data-theme="dark"] .faq-item__answer p { color: var(--d1-text); }

/* =========================================================
   CONTACT — horizon (deux versions du glow)
========================================================= */
.design01 .contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--d1-canvas);
  padding-block: clamp(96px, 11vw, 150px) clamp(84px, 9vw, 128px);
  padding-inline: var(--ui-container-padding);
}
/* Mode clair : le dégradé case-study de la LP, tel quel */
.design01 .contact-section__glow {
  background: var(--ui-case-study-gradient);
}
/* Mode sombre : mêmes stops, terminaison blanche remplacée par le canvas */
html[data-theme="dark"] .design01 .contact-section__glow {
  background: radial-gradient(ellipse 130% 110% at 50% 110%, var(--ui-black) 10%, var(--ui-dark-blue) 30%, var(--ui-primary) 50%, var(--ui-bg-darker) 100%);
}
@media (max-width: 768px) {
  html[data-theme="dark"] .design01 .contact-section__glow {
    background: radial-gradient(ellipse 260% 100% at 50% 110%, var(--ui-black) 10%, var(--ui-dark-blue) 30%, var(--ui-primary) 50%, var(--ui-bg-darker) 100%);
  }
}
.design01 .contact-section__background-grid { --ui-hero-grid-color: rgba(0, 81, 255, .08); }
html[data-theme="dark"] .design01 .contact-section__background-grid { --ui-hero-grid-color: rgba(255, 255, 255, .06); }

.d1-contact-heading {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--ui-container-wide);
  margin: 0 auto clamp(52px, 6vw, 84px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ui-space-5);
}
.d1-contact-heading h2 { margin: 0; max-width: 20ch; font-size: var(--ui-font-case-heading); line-height: 1.02; color: var(--d1-title); text-wrap: balance; }
.d1-contact-heading p { margin: 0; max-width: 52ch; color: var(--d1-text-muted); }
html[data-theme="dark"] .d1-contact-heading p { color: rgba(255,255,255,.78); }

.design01 .contact-section > .container { position: relative; z-index: 2; }
.design01 .contact-section__grid {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: stretch;
}
.design01 .contact-section__column-header h3 { margin: 0 0 18px; font-size: 20px; color: var(--d1-title); }
.design01 .contact-section__booking,
.design01 .contact-section__form-area {
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--d1-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0, 29, 99, .08);
}
html[data-theme="dark"] .design01 .contact-section__booking,
html[data-theme="dark"] .design01 .contact-section__form-area {
  border-color: rgba(255,255,255,.16);
  background: rgba(0, 8, 23, .55);
  box-shadow: none;
}
.design01 .contact-section__iframe-wrap { overflow: hidden; height: clamp(420px, 52vh, 560px); border-radius: 14px; background: rgba(0, 81, 255, .05); border: 1px solid var(--d1-line); display: grid; place-items: center; color: var(--d1-text-muted); font-size: 14px; }
html[data-theme="dark"] .design01 .contact-section__iframe-wrap { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.design01 .contact-form { display: flex; flex-direction: column; gap: 16px; }
.design01 .contact-form__honeypot { position: absolute; left: -9999px; }
.design01 .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.design01 .contact-form__field { display: flex; flex-direction: column; gap: 7px; }
.design01 .contact-form__field label { font-size: 13px; font-weight: 500; color: var(--d1-text); }
.design01 .contact-form__field label span { color: var(--ui-primary); }
html[data-theme="dark"] .design01 .contact-form__field label { color: rgba(255,255,255,.85); }
html[data-theme="dark"] .design01 .contact-form__field label span { color: var(--ui-secondary); }
.design01 .contact-form__field input,
.design01 .contact-form__field select,
.design01 .contact-form__field textarea {
  padding: 13px 15px;
  border: 1px solid var(--d1-line-strong);
  border-radius: 12px;
  background: #fbfcff;
  color: var(--d1-title);
  transition: border-color .2s ease, background .2s ease;
}
.design01 .contact-form__field input::placeholder,
.design01 .contact-form__field textarea::placeholder { color: rgba(0, 16, 46, .35); }
html[data-theme="dark"] .design01 .contact-form__field input,
html[data-theme="dark"] .design01 .contact-form__field select,
html[data-theme="dark"] .design01 .contact-form__field textarea { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; }

/* Select custom (.project-select) : même apparence que les autres champs */
.design01 .project-select__trigger {
  padding: 13px 15px;
  border: 1px solid var(--d1-line-strong);
  border-radius: 12px;
  background: #fbfcff;
  color: var(--d1-title);
  min-height: 0;
  transition: border-color .2s ease, background .2s ease;
}
.design01 .project-select__trigger:hover,
.design01 .project-select.is-open .project-select__trigger { border-color: var(--ui-primary); background: #fbfcff; box-shadow: none; }
.design01 .project-select__value { color: rgba(0, 16, 46, .35); }
.design01 .project-select.has-value .project-select__value,
.design01 .project-select__value.is-selected { color: var(--d1-title); }
.design01 .project-select__arrow { color: rgba(0, 16, 46, .4); }
.design01 .project-select__dropdown {
  border: 1px solid var(--d1-line-strong);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 20, 80, .12);
}
.design01 .project-select__option { color: var(--d1-text); }
.design01 .project-select__option:hover,
.design01 .project-select__option.is-selected { background: rgba(0, 81, 255, .06); color: var(--d1-title); }
html[data-theme="dark"] .design01 .project-select__trigger { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; }
html[data-theme="dark"] .design01 .project-select__trigger:hover,
html[data-theme="dark"] .design01 .project-select.is-open .project-select__trigger { border-color: var(--ui-secondary); background: rgba(255,255,255,.06); }
html[data-theme="dark"] .design01 .project-select__value { color: rgba(255,255,255,.45); }
html[data-theme="dark"] .design01 .project-select.has-value .project-select__value,
html[data-theme="dark"] .design01 .project-select__value.is-selected { color: #fff; }
html[data-theme="dark"] .design01 .project-select__arrow { color: rgba(255,255,255,.5); }
html[data-theme="dark"] .design01 .project-select__dropdown { border-color: rgba(255,255,255,.14); background: #0a1630; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
html[data-theme="dark"] .design01 .project-select__option { color: rgba(255,255,255,.75); }
html[data-theme="dark"] .design01 .project-select__option:hover,
html[data-theme="dark"] .design01 .project-select__option.is-selected { background: rgba(0, 81, 255, .2); color: #fff; }
html[data-theme="dark"] .design01 .contact-form__field input::placeholder,
html[data-theme="dark"] .design01 .contact-form__field textarea::placeholder { color: rgba(255,255,255,.38); }
html[data-theme="dark"] .design01 .contact-form__field select { color: rgba(255,255,255,.8); }
.design01 .contact-form__field select option { color: #00102e; }
.design01 .contact-form__field input:focus,
.design01 .contact-form__field select:focus,
.design01 .contact-form__field textarea:focus { outline: none; border-color: var(--ui-primary); background: #fff; }
html[data-theme="dark"] .design01 .contact-form__field input:focus,
html[data-theme="dark"] .design01 .contact-form__field select:focus,
html[data-theme="dark"] .design01 .contact-form__field textarea:focus { border-color: var(--ui-secondary); background: rgba(255,255,255,.09); }
.design01 .contact-form__submit { margin-top: 4px; align-self: flex-start; }
.design01 .contact-form__footer { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--d1-text-muted); }
html[data-theme="dark"] .design01 .contact-form__footer { color: rgba(255,255,255,.66); }
.design01 .contact-form__response { display: inline-flex; align-items: center; gap: 8px; }
.design01 .contact-form__response > span { width: 8px; height: 8px; border-radius: 50%; background: #17b26a; box-shadow: 0 0 0 4px rgba(23,178,106,.16); }
html[data-theme="dark"] .design01 .contact-form__response > span { background: #47e28c; box-shadow: 0 0 0 4px rgba(71,226,140,.16); }

/* =========================================================
   FOOTER
========================================================= */
.design01 .site-footer {
  position: relative;
  padding: clamp(64px, 7vw, 96px) var(--ui-container-padding) 34px;
  color: var(--d1-text);
  background: var(--d1-canvas);
  border-top: 1px solid var(--d1-line);
}
html[data-theme="dark"] .design01 .site-footer { background: var(--ui-bg-darker); }
.design01 .site-footer__inner {
  max-width: var(--ui-container-wide); margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 3fr;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--d1-line);
}
.design01 .site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.design01 .site-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.design01 .site-footer__logo .site-footer__logo-text,
.design01 .site-footer__logo-text { font-family: var(--ui-font-heading); font-size: 28px; font-weight: 700; color: var(--d1-title); }
.d1-footer-logo { display: flex; align-items: baseline; gap: 2px; font-family: var(--ui-font-heading); font-size: 30px; font-weight: 700; color: var(--d1-title); text-decoration: none; }
.d1-footer-logo span { color: var(--ui-primary); }
html[data-theme="dark"] .d1-footer-logo span { color: var(--ui-secondary); }
.design01 .site-footer__baseline { margin: 0; max-width: 30ch; font-size: 14.5px; line-height: 1.65; color: var(--d1-text-muted); }
.design01 .site-footer__trust { display: flex; align-items: center; gap: 12px; }
.design01 .site-footer__francenum { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--d1-line); border-radius: 999px; font-size: 12.5px; color: var(--d1-text); }
.design01 .site-footer__francenum svg { width: 15px; height: 15px; fill: var(--d1-accent); }
.design01 .site-footer__social { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--d1-line); border-radius: 50%; color: var(--d1-text); transition: color .2s ease, border-color .2s ease; }
.design01 .site-footer__social:hover { color: var(--d1-title); border-color: var(--ui-secondary); }
.design01 .site-footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.design01 .site-footer__title { margin: 0 0 16px; font-family: var(--ui-font-heading); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d1-text-muted); }
.design01 .site-footer__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.design01 .site-footer__links a, .design01 .site-footer__links span { font-size: 14.5px; color: var(--d1-text); text-decoration: none; }
.design01 .site-footer__links a:hover { color: var(--d1-title); }
.design01 .site-footer__bottom {
  max-width: var(--ui-container-wide); margin: 0 auto;
  padding-top: 26px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  font-size: 13px; color: var(--d1-text-muted);
}
.design01 .site-footer__bottom p { margin: 0; }
.design01 .site-footer__legal { display: flex; gap: 18px; }
.design01 .site-footer__legal a { color: var(--d1-text-muted); text-decoration: none; }
.design01 .site-footer__legal a:hover { color: var(--d1-title); }

/* =========================================================
   Header — logo & toggle
========================================================= */
.design01 .site-header__nav-indicator { display: none; }
html:not([data-theme="dark"]) .design01 .site-header.is-over-hero .site-logo__wordmark { color: #fff; }
html:not([data-theme="dark"]) .design01 .site-header.is-over-hero .d1-theme-toggle { color: #fff; border-color: rgba(255,255,255,.32); }
html[data-theme="dark"] .design01 .site-logo__wordmark { color: #fff; }
.d1-theme-toggle {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--d1-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--d1-title);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.d1-theme-toggle:hover { border-color: var(--ui-primary); background: var(--d1-row-hover); }
.d1-theme-toggle svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .d1-theme-toggle .d1-icon-moon { display: none; }
html:not([data-theme="dark"]) .d1-theme-toggle .d1-icon-sun { display: none; }

.d1-section-cta {
  width: 100%;
  margin-top: clamp(48px, 5vw, 76px);
  display: flex;
  justify-content: center;
}

/* =========================================================
   Reveal
========================================================= */
.d1-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.d1-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .d1-reveal { opacity: 1; transform: none; transition: none; } }

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 1180px) {
  .d1-proof-float--serp { left: 10px; bottom: -24px; }
  .d1-proof-float--psi { right: 10px; bottom: auto; top: -26px; }
}
@media (max-width: 980px) {
  .d1-bento__cell--lg, .d1-bento__cell--third, .d1-bento__cell--half { grid-column: span 12; }
  .d1-bento__cell--quarter { grid-column: span 6; }
  .d1-band { grid-template-columns: 1fr; }
  .d1-num-row { grid-template-columns: 1fr; gap: 8px; }
  .d1-bento__cell--lg { min-height: 300px; }
  .d1-case, .d1-case--reverse { grid-template-columns: 1fr; }
  .d1-case--reverse .d1-case__media { order: 0; }
  .d1-case--reverse .d1-case__body { order: 1; }
  .d1-local__layout { grid-template-columns: 1fr; }
  .design01 .contact-section__grid { grid-template-columns: 1fr; }
  .d1-reviews__grid { grid-template-columns: 1fr; max-width: 640px; }
  .design01 .site-footer__inner { grid-template-columns: 1fr; }
  .design01 .site-footer__nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .d1-bento__cell--quarter { grid-column: span 12; }
  .d1-service-row { grid-template-columns: 1fr; gap: 10px; }
  .d1-service-row__arrow { display: none; }
  .design01 .contact-form__row { grid-template-columns: 1fr; }
  .design01 .site-footer__inner { grid-template-columns: 1fr; }
  .d1-hero__stage { margin-inline: -8px; }
  .d1-proof-float { position: relative; inset: auto; transform: none; width: 100%; margin-top: 12px; }
  .d1-proof-float--psi { display: none; }
}

/* Fil d'Ariane dans le hero sombre */
.design01 .d1-hero .breadcrumbs, .design01 .d1-hero [class*="breadcrumb"] { position: relative; z-index: 2; margin-bottom: 14px; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.design01 .d1-hero .breadcrumbs a, .design01 .d1-hero [class*="breadcrumb"] a { color: rgba(255, 255, 255, .7); }
.design01 .d1-hero .breadcrumbs a:hover, .design01 .d1-hero [class*="breadcrumb"] a:hover { color: #fff; }
.design01 .d1-hero .breadcrumbs svg, .design01 .d1-hero [class*="breadcrumb"] svg { stroke: rgba(255,255,255,.4); }

/* =============================================================
   BLOG — restyle des classes V1/V2 existantes (markup inchangé,
   filtres + pagination AJAX intacts : .filter-btn, containers, .page-numbers)
   ============================================================= */
.design01 .blog-list-section { padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 48px) clamp(90px, 10vw, 140px); }
.design01 .blog-list-section .container { max-width: var(--ui-container-wide); margin-inline: auto; }

.design01 .blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3vw, 44px); }
.design01 .filter-btn {
  padding: 9px 16px;
  border: 1px solid var(--d1-line-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--ui-font-heading);
  font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--d1-text);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.design01 .filter-btn:hover { border-color: var(--ui-primary); color: var(--d1-title); background: transparent; }
.design01 .filter-btn.active { border-color: transparent; background: var(--ui-gradient-primary); color: #fff; }

.design01 .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1024px) { .design01 .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .design01 .blog-grid { grid-template-columns: 1fr; } }

.design01 .blog-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--d1-cell-border);
  border-radius: 20px;
  background: var(--d1-cell-bg);
  box-shadow: var(--d1-cell-shadow);
  transition: border-color .25s ease, transform .25s ease;
}
.design01 .blog-card:hover { border-color: var(--ui-primary); transform: translateY(-3px); }
.design01 .blog-card-image { aspect-ratio: 16 / 9; overflow: hidden; }
.design01 .blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.design01 .blog-card:hover .blog-card-image img { transform: scale(1.04); }
.design01 .blog-card-content { display: flex; flex-direction: column; gap: 11px; padding: clamp(20px, 2vw, 26px); flex: 1; }
.design01 .blog-card-categories { display: flex; flex-wrap: wrap; gap: 6px; }
.design01 .category-badge {
  padding: 5px 11px;
  border: 1px solid rgba(0, 81, 255, .2);
  border-radius: 999px;
  font-family: var(--ui-font-heading);
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--d1-accent);
  background: rgba(0, 81, 255, .05);
}
html[data-theme="dark"] .design01 .category-badge { border-color: rgba(55,159,255,.3); background: rgba(0,81,255,.14); }
.design01 .blog-card-title { margin: 0; font-family: var(--ui-font-heading); font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; line-height: 1.25; }
.design01 .blog-card-title a { color: var(--d1-title); text-decoration: none; }
.design01 .blog-card-title a:hover { color: var(--ui-primary); }
html[data-theme="dark"] .design01 .blog-card-title a:hover { color: var(--ui-secondary); }
.design01 .blog-card-meta { font-size: 12.5px; color: var(--d1-text-muted); }
.design01 .blog-card-excerpt { font-size: 14px; line-height: 1.6; color: var(--d1-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.design01 .blog-card-link {
  margin-top: auto; padding-top: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui-font-heading); font-size: 14px; font-weight: 600;
  color: var(--d1-title); text-decoration: none;
  transition: color .2s ease;
}
.design01 .blog-card-link:hover { color: var(--ui-primary); text-decoration: none; }
html[data-theme="dark"] .design01 .blog-card-link:hover { color: var(--ui-secondary); }
.design01 .no-posts { color: var(--d1-text-muted); }

.design01 .blog-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: clamp(32px, 4vw, 52px); }
.design01 .blog-pagination .page-numbers {
  min-width: 40px; height: 40px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--d1-line-strong);
  border-radius: 999px;
  font-family: var(--ui-font-heading); font-size: 14px; font-weight: 500;
  color: var(--d1-text); text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.design01 .blog-pagination .page-numbers:hover { border-color: var(--ui-primary); color: var(--d1-title); }
.design01 .blog-pagination .page-numbers.current { border-color: transparent; background: var(--ui-gradient-primary); color: #fff; }
.design01 .blog-pagination .page-numbers.dots { border: none; }

/* Correctifs QA propriétaire (2026-08-17) */
.design01 .faq__hero { border: none; }

/* Navigation : le pill est sombre dans tous les états et les deux modes -> liens clairs en permanence */
.design01 .site-header__nav-link {
  font-family: var(--ui-font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .72);
}
.design01 .site-header__nav-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.design01 .site-header__nav-link.is-active {
  color: var(--ui-primary);
  background: #fff;
  border-radius: 999px;
}
.design01 .site-header__nav-link.is-active:hover { color: var(--ui-primary); background: #fff; }
.design01 .site-header__chevron { stroke: rgba(255, 255, 255, .6); }

/* Sous-menu Services : carte claire en light, verre sombre en dark */
.design01 .site-header__dropdown {
  padding: 8px;
  border: 1px solid var(--d1-line-strong);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 20, 80, .14);
}
.design01 .site-header__dropdown-link { padding: 12px 14px; border-radius: 12px; transition: background .18s ease; }
.design01 .site-header__dropdown-link:hover { background: rgba(0, 81, 255, .06); }
.design01 .site-header__dropdown-title {
  font-family: var(--ui-font-heading);
  font-size: 14.5px; font-weight: 600;
  color: var(--d1-title);
}
.design01 .site-header__dropdown-link:hover .site-header__dropdown-title { color: var(--ui-primary); }
.design01 .site-header__dropdown-text { font-size: 12.5px; color: var(--d1-text-muted); }
html[data-theme="dark"] .design01 .site-header__dropdown { border-color: rgba(255, 255, 255, .12); background: #0a1630; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .design01 .site-header__dropdown-link:hover { background: rgba(0, 81, 255, .22); }
html[data-theme="dark"] .design01 .site-header__dropdown-title { color: #fff; }
html[data-theme="dark"] .design01 .site-header__dropdown-link:hover .site-header__dropdown-title { color: var(--ui-secondary); }
html[data-theme="dark"] .design01 .site-header__dropdown-text { color: rgba(255, 255, 255, .55); }
html[data-theme="dark"] .design01 .site-header.is-scrolled { background: rgba(3, 12, 34, .88); box-shadow: 0 1px 0 rgba(122, 178, 255, .12), 0 8px 32px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .design01 .site-header__burger-bar { background: rgba(255, 255, 255, .85); }
html[data-theme="dark"] .design01 .site-header.menu-is-open,
html[data-theme="dark"] .design01 .site-header__mobile { background: rgba(3, 12, 34, .97); }
html[data-theme="dark"] .design01 .site-header__mobile-link { color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .08); }

/* =============================================================
   CRÉER / REFAIRE — visuels SVG animés (split-choice)
   ============================================================= */
.d1-choice-anim { width: 100%; margin-bottom: 20px; }
.d1-choice-anim svg { display: block; width: 100%; height: auto; }
.d1-choice-anim {
  --a-line: rgba(0, 29, 99, .2);
  --a-surface: rgba(255, 255, 255, .6);
  --a-fill: rgba(0, 81, 255, .12);
  --a-accent: var(--ui-primary);
  --a-old: rgba(0, 29, 99, .16);
}
html[data-theme="dark"] .d1-choice-anim {
  --a-line: rgba(255, 255, 255, .22);
  --a-surface: rgba(255, 255, 255, .03);
  --a-fill: rgba(55, 159, 255, .18);
  --a-accent: var(--ui-secondary);
  --a-old: rgba(255, 255, 255, .14);
}
.d1-choice-anim .a-frame { fill: var(--a-surface); stroke: var(--a-line); stroke-width: 1.4; }
.d1-choice-anim .a-sep { stroke: var(--a-line); stroke-width: 1.2; }
.d1-choice-anim .a-dot { fill: var(--a-line); }
.d1-choice-anim .a-stage { animation: d1a-stage 6.5s ease-in-out infinite; }
@keyframes d1a-stage { 0% { opacity: 0; } 3%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* — Création : les blocs se dessinent puis se remplissent — */
.d1-anim-create .a-draw { stroke: var(--a-accent); stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linejoin: round; fill: var(--a-fill); fill-opacity: 0; }
.d1-anim-create .a-hero { animation: d1a-draw-fill 6.5s ease-in-out infinite; }
.d1-anim-create .a-img { animation: d1a-draw-fill 6.5s ease-in-out .5s infinite; }
@keyframes d1a-draw-fill {
  0%, 7% { stroke-dashoffset: 100; fill-opacity: 0; }
  28% { stroke-dashoffset: 0; fill-opacity: 0; }
  38%, 100% { stroke-dashoffset: 0; fill-opacity: 1; }
}
.d1-anim-create .a-line { fill: var(--a-line); opacity: 0; }
.d1-anim-create .a-l1 { animation: d1a-in 6.5s ease infinite; animation-delay: 0s; }
.d1-anim-create .a-l2 { animation: d1a-in 6.5s ease infinite; animation-delay: .18s; }
@keyframes d1a-in { 0%, 40% { opacity: 0; transform: translateY(4px); } 50%, 100% { opacity: 1; transform: translateY(0); } }
.d1-anim-create .a-cta { fill: var(--a-accent); opacity: 0; animation: d1a-cta 6.5s ease infinite; }
.d1-anim-create .a-cta-label { fill: #fff; opacity: 0; animation: d1a-cta 6.5s ease infinite; }
@keyframes d1a-cta { 0%, 52% { opacity: 0; } 62%, 100% { opacity: 1; } }

/* — Refonte : balayage, l'ancien s'efface, le nouveau se met en place — */
.d1-anim-refonte .a-old rect { fill: var(--a-old); }
.d1-anim-refonte .a-old { animation: d1a-old 6.5s ease-in-out infinite; }
@keyframes d1a-old { 0%, 30% { opacity: 1; } 58%, 100% { opacity: 0; } }
.d1-anim-refonte .a-new { opacity: 0; animation: d1a-new 6.5s ease-in-out infinite; }
@keyframes d1a-new { 0%, 34% { opacity: 0; } 62%, 100% { opacity: 1; } }
.d1-anim-refonte .a-new .a-blue { fill: var(--a-fill); stroke: var(--a-accent); stroke-width: 1.4; }
.d1-anim-refonte .a-new .a-line { fill: var(--a-line); }
.d1-anim-refonte .a-new .a-cta { fill: var(--a-accent); }
.d1-anim-refonte .a-scan { fill: var(--a-accent); opacity: 0; animation: d1a-scan 6.5s ease-in-out infinite; }
@keyframes d1a-scan {
  0%, 28% { opacity: 0; transform: translateX(0); }
  32% { opacity: .9; }
  60% { opacity: .9; transform: translateX(262px); }
  66%, 100% { opacity: 0; transform: translateX(262px); }
}

@media (prefers-reduced-motion: reduce) {
  .d1-choice-anim * { animation: none !important; }
  .d1-choice-anim .a-stage { opacity: 1; }
  .d1-anim-create .a-draw { stroke-dashoffset: 0; fill-opacity: 1; }
  .d1-anim-create .a-line, .d1-anim-create .a-cta, .d1-anim-create .a-cta-label { opacity: 1; transform: none; }
  .d1-anim-refonte .a-old { opacity: 0; }
  .d1-anim-refonte .a-new { opacity: 1; }
  .d1-anim-refonte .a-scan { opacity: 0; }
}

/* =============================================================
   SINGLE POST — variantes dark (structure light : pages/blog.css)
   ============================================================= */
html[data-theme="dark"] .design01 .single-v2 { background: var(--ui-bg-darker); }
html[data-theme="dark"] .design01 .single-post { background: transparent; }
html[data-theme="dark"] .design01 .single-hero--no-image { background: transparent; }
html[data-theme="dark"] .design01 .single-hero--no-image .single-hero-title { color: #fff; }
html[data-theme="dark"] .design01 .single-post__content { color: rgba(223, 233, 255, .82); }
html[data-theme="dark"] .design01 .single-post__content h2,
html[data-theme="dark"] .design01 .single-post__content h3,
html[data-theme="dark"] .design01 .single-post__content h4,
html[data-theme="dark"] .design01 .single-post__content strong { color: #fff; }
html[data-theme="dark"] .design01 .single-post__content a { color: var(--ui-secondary); }
html[data-theme="dark"] .design01 .single-post__content blockquote { background: rgba(255, 255, 255, .05); border-left-color: var(--ui-secondary); color: rgba(223, 233, 255, .8); }
html[data-theme="dark"] .design01 .single-post__content code { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: #cfe0ff; }
html[data-theme="dark"] .design01 .single-post__content img { border: 1px solid rgba(255, 255, 255, .1); }

html[data-theme="dark"] .design01 .sidebar-widget { background: #0a1630; border-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .design01 .widget-title { color: var(--ui-secondary); }
html[data-theme="dark"] .design01 .toc-list a { color: rgba(223, 233, 255, .6); }
html[data-theme="dark"] .design01 .toc-list a:hover,
html[data-theme="dark"] .design01 .toc-list a.is-active { color: var(--ui-secondary); border-left-color: var(--ui-secondary); }
html[data-theme="dark"] .design01 .category-list a { color: rgba(223, 233, 255, .6); border-bottom-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .design01 .category-list a:hover { color: var(--ui-secondary); }
html[data-theme="dark"] .design01 .category-list .count { color: rgba(223, 233, 255, .35); }
html[data-theme="dark"] .design01 .recent-posts-list a { color: rgba(223, 233, 255, .75); }
html[data-theme="dark"] .design01 .recent-posts-list a:hover { color: var(--ui-secondary); }

html[data-theme="dark"] .design01 .social-share { border-top-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .design01 .social-share__title { color: rgba(223, 233, 255, .55); }
html[data-theme="dark"] .design01 .share-btn { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: rgba(223, 233, 255, .8); }
html[data-theme="dark"] .design01 .share-btn:hover { border-color: var(--ui-secondary); color: var(--ui-secondary); }
html[data-theme="dark"] .design01 .post-nav { background: var(--d1-cell-bg); border-color: var(--d1-cell-border); }
html[data-theme="dark"] .design01 .post-nav:hover { border-color: var(--ui-secondary); }
html[data-theme="dark"] .design01 .post-nav__title { color: #fff; }
html[data-theme="dark"] .design01 .related-posts { border-top-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .design01 .related-posts__title { color: #fff; }

/* =============================================================
   SERVICES HOMEPAGE — 4 cartes à icônes animées
   ============================================================= */
.d1-service-cards {
  width: 100%; max-width: var(--ui-container-wide); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.d1-service-card {
  display: flex; flex-direction: column; gap: 11px;
  padding: clamp(22px, 2vw, 28px);
  border: 1px solid var(--d1-cell-border);
  border-radius: 22px;
  background: var(--d1-cell-bg);
  box-shadow: var(--d1-cell-shadow);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}
.d1-service-card:hover { border-color: var(--ui-primary); transform: translateY(-4px); }
.d1-service-card .btn { margin-top: auto; align-self: flex-start; }
.d1-service-card h3 { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.25; color: var(--d1-title); }
.d1-service-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--d1-text-muted); }
@media (max-width: 1180px) { .d1-service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .d1-service-cards { grid-template-columns: 1fr; } }

.d1-service-card__icon {
  height: 92px; margin-bottom: 4px;
  display: grid; place-items: start;
  --a-line: rgba(0, 29, 99, .3);
  --a-strong: rgba(0, 29, 99, .5);
  --a-fill: rgba(0, 81, 255, .12);
  --a-accent: var(--ui-primary);
}
html[data-theme="dark"] .d1-service-card__icon {
  --a-line: rgba(255, 255, 255, .32);
  --a-strong: rgba(255, 255, 255, .55);
  --a-fill: rgba(55, 159, 255, .2);
  --a-accent: var(--ui-secondary);
}
.d1-service-card__icon svg { width: 92px; height: 92px; overflow: visible; }
.d1-service-card__icon .i-line { fill: none; stroke: var(--a-line); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.d1-service-card__icon .i-acc  { fill: none; stroke: var(--a-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* — Icônes v4 : SVG animés par GSAP (assets/js/v2/design01-icons.js) —
   Tokens opaques : aucune superposition de traits ne fonce. Sans JS : icônes statiques. */
.d1-service-card__icon {
  height: 134px; place-items: center;
  --line: #b6c1da; --strong: #7e8db3; --fill: #e7eeff;
  --accent: var(--ui-primary); --accent-soft: #7aa8ff;
  --detail: var(--ui-primary); --on-accent: #ffffff;
  --ink: var(--d1-title); --card: var(--d1-cell-bg);
}
html[data-theme="dark"] .d1-service-card__icon {
  --line: #3d4f78; --strong: #7d92c4; --fill: #0f2751;
  --accent: var(--ui-secondary); --accent-soft: #2f6db8;
  --detail: var(--ui-secondary);
}
.d1-service-card__icon svg { width: 130px; height: 130px; overflow: visible; display: block; }
.d1-service-card__icon .st  { fill: none; stroke: var(--line);   stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.d1-service-card__icon .stg { fill: none; stroke: var(--strong); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.d1-service-card__icon .sa  { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d1-service-card__icon .sd  { fill: none; stroke: var(--detail); stroke-linecap: round; stroke-linejoin: round; }
.d1-service-card__icon svg text { font-family: var(--ui-font-heading); }

/* — Cartes 1 & 3 : fond dégradé primaire, texte blanc, palette d'icône dédiée — */
.design01 .d1-service-card--primary {
  background: var(--ui-gradient-primary);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 4px 10px rgba(0, 40, 140, .18), 0 20px 46px rgba(0, 81, 255, .35);
}
.design01 .d1-service-card--primary:hover { border-color: rgba(255, 255, 255, .6); }
.design01 .d1-service-card--primary h3 { color: #fff; }
.design01 .d1-service-card--primary p { color: rgba(255, 255, 255, .82); }
.design01 .d1-service-card--primary .d1-service-card__icon {
  --line: #a9c9ff; --strong: #e9f2ff; --fill: #dbe9ff;
  --accent: #ffffff; --accent-soft: #cfe2ff;
  --detail: #0051ff; --on-accent: #0051ff;
}