/* ==========================================================================
   GROUPE DLG — Design system Bricks
   Classes préfixées dlg- pour limiter les collisions.
   ========================================================================== */

:root {
  --dlg-navy-950: #07172f;
  --dlg-navy-900: #0b1d38;
  --dlg-navy-800: #122b4d;
  --dlg-anthracite: #202733;
  --dlg-ink: #0b1730;
  --dlg-grey-700: #465064;
  --dlg-grey-500: #718096;
  --dlg-grey-300: #cbd3df;
  --dlg-grey-200: #e3e8ef;
  --dlg-grey-100: #f3f6f9;
  --dlg-grey-050: #f8fafc;
  --dlg-white: #ffffff;
  --dlg-red: #e30613;
  --dlg-red-dark: #bd0010;
  --dlg-red-soft: #fff0f1;
  --dlg-font: Inter, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --dlg-fs-xs: clamp(.72rem, .7rem + .08vw, .8rem);
  --dlg-fs-sm: clamp(.86rem, .82rem + .12vw, .96rem);
  --dlg-fs-base: clamp(1rem, .95rem + .18vw, 1.1rem);
  --dlg-fs-lg: clamp(1.15rem, 1rem + .45vw, 1.45rem);
  --dlg-fs-h3: clamp(1.35rem, 1.05rem + .9vw, 2rem);
  --dlg-fs-h2: clamp(2rem, 1.35rem + 2vw, 3.6rem);
  --dlg-fs-h1: clamp(2.7rem, 1.7rem + 3.4vw, 6rem);
  --dlg-space-2xs: .4rem;
  --dlg-space-xs: .75rem;
  --dlg-space-sm: 1rem;
  --dlg-space-md: clamp(1.25rem, 1rem + 1vw, 2rem);
  --dlg-space-lg: clamp(2rem, 1.5rem + 2vw, 4rem);
  --dlg-space-xl: clamp(3.5rem, 2.3rem + 4vw, 7rem);
  --dlg-space-2xl: clamp(5rem, 3rem + 7vw, 10rem);
  --dlg-radius-sm: .5rem;
  --dlg-radius-md: .85rem;
  --dlg-radius-lg: 1.25rem;
  --dlg-radius-pill: 999px;
  --dlg-shadow-sm: 0 8px 24px rgba(7, 23, 47, .08);
  --dlg-shadow-md: 0 18px 50px rgba(7, 23, 47, .13);
  --dlg-shadow-focus: 0 0 0 4px rgba(227, 6, 19, .18);
  --dlg-container: 1440px;
  --dlg-container-narrow: 920px;
  --dlg-gutter: clamp(1.25rem, 3vw, 4rem);
  --dlg-transition: 220ms cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; }
body.dlg-site { color: var(--dlg-ink); font-family: var(--dlg-font); background: var(--dlg-white); }
body.dlg-site :where(h1, h2, h3, h4, p) { margin-block-start: 0; }
body.dlg-site :where(h1, h2, h3, h4) { color: inherit; font-family: var(--dlg-font); letter-spacing: -.035em; line-height: 1.05; }
body.dlg-site :where(p) { line-height: 1.7; }
body.dlg-site :where(img) { height: auto; }
body.dlg-site :where(a, button, input, textarea, select):focus-visible { outline: 0; box-shadow: var(--dlg-shadow-focus); }

/* Layout & utilitaires Bricks */
.dlg-container { width: min(100% - (2 * var(--dlg-gutter)), var(--dlg-container)); margin-inline: auto; }
.dlg-container--narrow { width: min(100% - (2 * var(--dlg-gutter)), var(--dlg-container-narrow)); margin-inline: auto; }
.dlg-section { position: relative; padding-block: var(--dlg-space-xl); }
.dlg-section--tight { padding-block: var(--dlg-space-lg); }
.dlg-section--dark { color: var(--dlg-white); background: linear-gradient(125deg, var(--dlg-navy-950), var(--dlg-navy-800)); }
.dlg-section--soft { background: var(--dlg-grey-050); }
.dlg-grid { display: grid; gap: var(--dlg-space-md); }
.dlg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dlg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dlg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dlg-stack { display: flex; flex-direction: column; gap: var(--dlg-space-md); }
.dlg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dlg-space-sm); }
.dlg-center { text-align: center; }
.dlg-overline { color: var(--dlg-red); font-size: var(--dlg-fs-xs); font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.dlg-title-xl { max-width: 13ch; font-size: var(--dlg-fs-h1); font-weight: 800; }
.dlg-title-section { font-size: var(--dlg-fs-h2); font-weight: 800; }
.dlg-lead { max-width: 65ch; color: var(--dlg-grey-700); font-size: var(--dlg-fs-lg); line-height: 1.55; }
.dlg-section--dark .dlg-lead { color: rgba(255,255,255,.74); }
.dlg-text-red { color: var(--dlg-red); }
.dlg-sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }

/* Boutons */
.dlg-btn { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: .75rem; padding: .9rem 1.35rem; border: 1px solid transparent; border-radius: var(--dlg-radius-sm); font-size: var(--dlg-fs-xs); font-weight: 800; letter-spacing: .025em; line-height: 1.1; text-decoration: none; text-transform: uppercase; transition: transform var(--dlg-transition), color var(--dlg-transition), background var(--dlg-transition), border-color var(--dlg-transition), box-shadow var(--dlg-transition); }
.dlg-btn::after { content: "→"; font-size: 1.15em; transition: transform var(--dlg-transition); }
.dlg-btn:hover { transform: translateY(-2px); }
.dlg-btn:hover::after { transform: translateX(.25rem); }
.dlg-btn--primary { color: var(--dlg-white); background: var(--dlg-red); box-shadow: 0 10px 24px rgba(227,6,19,.2); }
.dlg-btn--primary:hover { color: var(--dlg-white); background: var(--dlg-red-dark); }
.dlg-btn--secondary { color: var(--dlg-navy-950); background: transparent; border-color: var(--dlg-navy-950); }
.dlg-btn--secondary:hover { color: var(--dlg-white); background: var(--dlg-navy-950); }
.dlg-btn--light { color: var(--dlg-white); background: transparent; border-color: rgba(255,255,255,.5); }
.dlg-btn--light:hover { color: var(--dlg-navy-950); background: var(--dlg-white); border-color: var(--dlg-white); }

/* Header */
.dlg-header { position: relative; z-index: 50; min-height: 5.5rem; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--dlg-grey-200); }
.dlg-header--sticky { position: sticky; top: 0; backdrop-filter: blur(16px); }
.dlg-header__inner { display: flex; min-height: inherit; align-items: center; justify-content: space-between; gap: var(--dlg-space-md); }
.dlg-header__logo img { width: clamp(96px, 10vw, 150px); }
.dlg-header__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.5rem); }
.dlg-header__nav nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.5rem); }
.dlg-header__nav a { position: relative; color: var(--dlg-ink); font-size: var(--dlg-fs-xs); font-weight: 750; text-decoration: none; text-transform: uppercase; }
.dlg-header__nav a::after { position: absolute; right: 0; bottom: -.65rem; left: 0; height: 2px; content: ""; background: var(--dlg-red); transform: scaleX(0); transform-origin: left; transition: transform var(--dlg-transition); }
.dlg-header__nav a:hover::after, .dlg-header__nav .current-menu-item > a::after { transform: scaleX(1); }
.dlg-wordmark { display: inline-flex; flex-direction: column; color: var(--dlg-ink); font-size: 2.4rem; font-weight: 900; letter-spacing: -.08em; line-height: .78; text-decoration: none; }
.dlg-wordmark::first-letter { color: var(--dlg-red); }
.dlg-wordmark span { margin-top: .45rem; color: var(--dlg-grey-700); font-size: .54rem; font-weight: 750; letter-spacing: .01em; line-height: 1; text-transform: uppercase; }
.dlg-wordmark--light { color: var(--dlg-white); }
.dlg-wordmark--light span { color: rgba(255,255,255,.64); }

/* Espaces réservés aux médias du kit d'installation */
.dlg-media-placeholder { display: grid; min-height: 100%; place-items: center; color: var(--dlg-grey-700); background: linear-gradient(135deg, var(--dlg-grey-100), var(--dlg-grey-200)); }
.dlg-media-placeholder--dark { color: rgba(255,255,255,.72); background: linear-gradient(135deg, var(--dlg-anthracite), var(--dlg-navy-800)); }
.dlg-media-placeholder__label { max-width: 25ch; padding: 1rem; font-size: var(--dlg-fs-xs); font-weight: 800; letter-spacing: .06em; line-height: 1.4; text-align: center; text-transform: uppercase; }

/* Hero split */
.dlg-hero { display: grid; min-height: min(760px, calc(100svh - 5.5rem)); grid-template-columns: minmax(0, 44%) minmax(0, 56%); overflow: hidden; background: var(--dlg-white); }
.dlg-hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: var(--dlg-space-xl) var(--dlg-gutter); padding-left: max(var(--dlg-gutter), calc((100vw - var(--dlg-container)) / 2)); }
.dlg-hero__content::after { position: absolute; z-index: -1; top: 0; right: -8rem; width: 14rem; height: 100%; content: ""; background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)); pointer-events: none; }
.dlg-hero__media { min-height: 520px; overflow: hidden; }
.dlg-hero__media :where(img, video) { width: 100%; height: 100%; object-fit: cover; }
.dlg-hero__proofs { display: grid; margin-block: var(--dlg-space-md); grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--dlg-space-sm); }
.dlg-proof { display: flex; align-items: center; gap: .65rem; color: var(--dlg-ink); font-size: var(--dlg-fs-xs); font-weight: 650; line-height: 1.35; }
.dlg-proof :where(svg, img) { width: 2rem; height: 2rem; flex: 0 0 auto; object-fit: contain; }

/* 9 expertises */
.dlg-expertise-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .35rem; }
.dlg-expertise-card { position: relative; display: flex; min-height: 230px; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.2rem .75rem; overflow: hidden; color: var(--dlg-ink); background: var(--dlg-white); border: 1px solid var(--dlg-grey-200); border-radius: var(--dlg-radius-md); text-align: center; text-decoration: none; transition: transform var(--dlg-transition), border-color var(--dlg-transition), box-shadow var(--dlg-transition); }
.dlg-expertise-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: var(--dlg-red); transform: scaleX(0); transition: transform var(--dlg-transition); }
.dlg-expertise-card:hover { z-index: 1; border-color: transparent; box-shadow: var(--dlg-shadow-md); transform: translateY(-6px); }
.dlg-expertise-card:hover::before { transform: scaleX(1); }
.dlg-expertise-card__icon { width: 3.4rem; height: 3.4rem; color: var(--dlg-navy-900); }
.dlg-expertise-card__title { max-width: 15ch; margin: 0; font-size: var(--dlg-fs-xs); font-weight: 800; line-height: 1.25; text-transform: uppercase; }

/* Déploiement multi-sites */
.dlg-deployment { position: relative; display: grid; min-height: 280px; place-items: center; padding: var(--dlg-space-lg); overflow: hidden; color: var(--dlg-white); background: linear-gradient(125deg, var(--dlg-navy-950), var(--dlg-navy-800)); border-radius: var(--dlg-radius-lg); text-align: center; box-shadow: var(--dlg-shadow-sm); }
.dlg-deployment::before, .dlg-deployment::after { position: absolute; width: 32%; height: 100%; content: ""; opacity: .18; background: radial-gradient(circle at center, transparent 0 30%, var(--dlg-red) 31% 32%, transparent 33%); pointer-events: none; }
.dlg-deployment::before { left: -8%; }
.dlg-deployment::after { right: -8%; transform: scaleX(-1); }
.dlg-deployment__content { position: relative; z-index: 1; max-width: 760px; }
.dlg-deployment__plus { display: grid; width: 3rem; height: 3rem; margin: -4.2rem auto 1.25rem; place-items: center; background: var(--dlg-red); border: 4px solid var(--dlg-white); border-radius: 50%; font-size: 1.5rem; }

/* Pourquoi DLG */
.dlg-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dlg-benefit { padding: var(--dlg-space-md); text-align: center; }
.dlg-benefit + .dlg-benefit { border-left: 1px solid var(--dlg-grey-200); }
.dlg-benefit__icon { display: grid; width: 4rem; height: 4rem; margin: 0 auto 1rem; place-items: center; color: var(--dlg-red); }
.dlg-benefit__title { font-size: var(--dlg-fs-sm); font-weight: 800; text-transform: uppercase; }
.dlg-benefit__text { color: var(--dlg-grey-700); font-size: var(--dlg-fs-sm); }

/* Réalisations */
.dlg-project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dlg-space-sm); }
.dlg-project-card { position: relative; min-height: 390px; overflow: hidden; color: var(--dlg-white); background: var(--dlg-navy-900); border-radius: var(--dlg-radius-md); box-shadow: var(--dlg-shadow-sm); }
.dlg-project-card__media, .dlg-project-card__media :where(img, video) { width: 100%; height: 100%; }
.dlg-project-card__media :where(img, video) { object-fit: cover; transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.dlg-project-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 45%, rgba(2,10,25,.84)); pointer-events: none; }
.dlg-project-card__content { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding: 1.4rem; }
.dlg-project-card__title { margin: 0; font-size: var(--dlg-fs-sm); font-weight: 800; text-transform: uppercase; }
.dlg-project-card__meta { margin-top: .4rem; color: rgba(255,255,255,.72); font-size: var(--dlg-fs-xs); }
.dlg-project-card:hover .dlg-project-card__media :where(img, video) { transform: scale(1.045); }

/* Engagement et chiffres */
.dlg-stats-band { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 1fr)); align-items: stretch; overflow: hidden; color: var(--dlg-white); background: linear-gradient(125deg, var(--dlg-navy-950), var(--dlg-navy-800)); border-radius: var(--dlg-radius-lg); }
.dlg-stats-band__intro, .dlg-stat { padding: var(--dlg-space-lg); }
.dlg-stat { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.18); text-align: center; }
.dlg-stat__number { color: var(--dlg-red); font-size: var(--dlg-fs-h3); font-weight: 850; line-height: 1; }
.dlg-stat__label { margin-top: .6rem; color: rgba(255,255,255,.75); font-size: var(--dlg-fs-xs); }

/* CTA final */
.dlg-final-cta { display: grid; min-height: 430px; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); color: var(--dlg-white); background: var(--dlg-navy-950); }
.dlg-final-cta__media { min-height: 300px; }
.dlg-final-cta__media :where(img, video) { width: 100%; height: 100%; object-fit: cover; }
.dlg-final-cta__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr); align-items: center; gap: var(--dlg-space-lg); padding: var(--dlg-space-lg) var(--dlg-gutter); background: linear-gradient(120deg, var(--dlg-navy-800), var(--dlg-navy-950)); }
.dlg-final-cta__list { padding-left: var(--dlg-space-lg); border-left: 1px solid rgba(227,6,19,.6); }
.dlg-final-cta__item { display: flex; align-items: center; gap: .75rem; padding-block: .6rem; font-size: var(--dlg-fs-xs); font-weight: 750; text-transform: uppercase; }
.dlg-final-cta__item::before { width: .55rem; height: .55rem; flex: 0 0 auto; content: ""; background: var(--dlg-red); border-radius: 50%; }

/* Footer */
.dlg-footer { padding-block: var(--dlg-space-xl) var(--dlg-space-md); }
.dlg-footer__grid { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(180px, 1fr)); gap: var(--dlg-space-lg); }
.dlg-footer__title { margin-bottom: 1rem; font-size: var(--dlg-fs-sm); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.dlg-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.dlg-footer__links a { color: rgba(255,255,255,.72); text-decoration: none; transition: color var(--dlg-transition); }
.dlg-footer__links a:hover { color: var(--dlg-white); }
.dlg-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: var(--dlg-space-lg); padding-top: var(--dlg-space-md); color: rgba(255,255,255,.58); border-top: 1px solid rgba(255,255,255,.15); font-size: var(--dlg-fs-xs); }
.dlg-footer__bottom a { color: inherit; }

/* Fiches dynamiques */
.dlg-single-hero { padding-bottom: 0; }
.dlg-single__featured { width: 100%; max-height: 680px; margin-top: var(--dlg-space-md); overflow: hidden; border-radius: var(--dlg-radius-lg) var(--dlg-radius-lg) 0 0; }
.dlg-single__featured img { width: 100%; height: min(58vw, 680px); object-fit: cover; }
.dlg-richtext { color: var(--dlg-anthracite); font-size: var(--dlg-fs-base); line-height: 1.75; }
.dlg-richtext :where(h2, h3) { margin-top: var(--dlg-space-lg); }
.dlg-richtext :where(ul, ol) { padding-left: 1.25em; }
.dlg-richtext a { color: var(--dlg-red-dark); text-decoration-thickness: .08em; text-underline-offset: .16em; }

/* Révélation progressive optionnelle */
.dlg-js :where([data-dlg-reveal], .dlg-reveal) { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
.dlg-js :where([data-dlg-reveal], .dlg-reveal).is-visible { opacity: 1; transform: none; }

@media (max-width: 1200px) {
  .dlg-expertise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dlg-space-sm); }
  .dlg-expertise-card { min-height: 190px; }
  .dlg-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlg-stats-band { grid-template-columns: repeat(3, 1fr); }
  .dlg-stats-band__intro { grid-column: 1 / -1; }
  .dlg-stat:first-of-type { border-left: 0; }
}

@media (max-width: 991px) {
  .dlg-header__nav { display: none; }
  .dlg-hero { min-height: auto; grid-template-columns: 1fr; }
  .dlg-hero__content { padding: var(--dlg-space-xl) var(--dlg-gutter); }
  .dlg-hero__content::after { display: none; }
  .dlg-hero__media { min-height: 440px; order: -1; }
  .dlg-benefits { grid-template-columns: repeat(2, 1fr); }
  .dlg-benefit + .dlg-benefit { border-left: 0; }
  .dlg-benefit:nth-child(even) { border-left: 1px solid var(--dlg-grey-200); }
  .dlg-benefit:nth-child(n+3) { border-top: 1px solid var(--dlg-grey-200); }
  .dlg-final-cta { grid-template-columns: 1fr; }
  .dlg-final-cta__media { max-height: 420px; }
  .dlg-footer__grid { grid-template-columns: 1fr 1fr; }
  .dlg-footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  :root { --dlg-gutter: 1.25rem; }
  .dlg-grid--2, .dlg-grid--3, .dlg-grid--4 { grid-template-columns: 1fr; }
  .dlg-hero__media { min-height: 300px; }
  .dlg-hero__proofs { grid-template-columns: 1fr; }
  .dlg-expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlg-expertise-card { min-height: 165px; }
  .dlg-deployment { padding: var(--dlg-space-lg) var(--dlg-space-sm); }
  .dlg-deployment__plus { margin-top: -3.7rem; }
  .dlg-benefits, .dlg-project-grid, .dlg-stats-band { grid-template-columns: 1fr; }
  .dlg-benefit:nth-child(even), .dlg-stat { border-left: 0; }
  .dlg-benefit:nth-child(n+2), .dlg-stat { border-top: 1px solid var(--dlg-grey-200); }
  .dlg-stat { padding: var(--dlg-space-md); }
  .dlg-final-cta__body { grid-template-columns: 1fr; }
  .dlg-final-cta__list { padding-top: var(--dlg-space-md); padding-left: 0; border-top: 1px solid rgba(227,6,19,.6); border-left: 0; }
  .dlg-footer__grid { grid-template-columns: 1fr; }
  .dlg-footer__grid > :first-child { grid-column: auto; }
  .dlg-footer__bottom { flex-direction: column; }
}

@media (max-width: 420px) {
  .dlg-expertise-grid { grid-template-columns: 1fr; }
  .dlg-expertise-card { min-height: 145px; }
}

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

@media print {
  .dlg-header, .dlg-btn { display: none!important; }
  .dlg-section--dark, .dlg-deployment, .dlg-stats-band, .dlg-final-cta { color: #000!important; background: #fff!important; }
}
