/* =========================================================================
   style.css - Design-system DamElec Nord (.de-*) + pages
   Palette tirée du logo : indigo #312783 + rouge #C11718.
   ========================================================================= */

:root {
  /* Couleurs (logo) */
  --de-indigo: #000;
  --de-indigo-2: #000;
  --de-indigo-3: #000;
  --de-red: #C11718;
  --de-cream: #FFF;
  --de-ink: #1B1930;
  --de-body: #57536b;
  --de-muted: #6C6883;
  --de-soft: #8b8799;
  --de-lilac: #b7e1f7;
  --de-lilac-2: #a5d8f3;
  --de-line: #EDE9E1;
  --de-line-2: #E4DEF2;
  --de-white: #ffffff;
  /* Typo */
  --de-font-title: 'Bricolage Grotesque', system-ui, sans-serif;
  --de-font-sans: 'Public Sans', system-ui, sans-serif;
  --de-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Layout */
  --de-container: 1260px;
  --de-radius: 22px;

  /* ============================================================
     Surcharge des tokens Bootstrap 5.3 : les composants natifs
     (btn, card, navbar, form-control, alert...) héritent
     automatiquement du thème DamElec. Aucune classe .de-btn/etc.
     à réapprendre : Bootstrap standard suffit.
     ============================================================ */
  --bs-primary: var(--de-indigo);
  --bs-primary-rgb: 0, 0, 0;
  --bs-danger: var(--de-red);
  --bs-danger-rgb: 193, 23, 24;
  --bs-info: var(--de-lilac);
  --bs-info-rgb: 183, 225, 247;
  --bs-dark: var(--de-indigo);
  --bs-dark-rgb: 0, 0, 0;
  --bs-body-color: var(--de-ink);
  --bs-body-color-rgb: 27, 25, 48;
  --bs-body-bg: var(--de-cream);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-font-family: var(--de-font-sans);
  --bs-body-font-size: 16px;
  --bs-body-line-height: 1.6;
  --bs-link-color: var(--de-indigo);
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color: var(--de-red);
  --bs-link-hover-color-rgb: 193, 23, 24;
  --bs-border-color: var(--de-line);
  --bs-border-radius: 13px;
  --bs-border-radius-sm: 10px;
  --bs-border-radius-lg: 14px;
  --bs-border-radius-xl: var(--de-radius);
  --bs-border-radius-2xl: 26px;
  /* `inherit` et non var(--de-ink) : Bootstrap applique --bs-heading-color à
     TOUS les h1-h6, ce qui écrasait le blanc hérité des sections noires
     (hero, bande énergie, CTA, footer) et rendait les titres illisibles. */
  --bs-heading-color: inherit;
  --bs-font-monospace: var(--de-font-mono);
}

/* ------------------------------------------------------------------ base */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Empêche les animations d'apparition (translateX ±40px pré-révélation)
     de créer une scrollbar horizontale fantôme. */
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--de-indigo);
  color: #fff;
}

h1,
h2,
h3,
h4 {
  font-family: var(--de-font-title);
  margin: 0;
}

/* ---------------------------------------------------------- primitives */

/* Container : le site utilise .container-xl (Bootstrap) OU .de-container (alias).
   Les deux ont la même largeur max = 1260px, le padding horizontal du site.
   .de-container survivra tant que les pages de service n'ont pas été refactorées. */

.container-xl,
.de-container {
  max-width: var(--de-container);
  padding-inline: 30px;
  margin-inline: auto;
}

.de-section {
  padding-block: 58px;
}

/* Section rythmée : équivalent à Bootstrap py-* mais avec le rythme DamElec. */
.de-section-sm { padding-block: 40px; }
.de-section-lg { padding-block: 80px; }

/* =============================================================
   Navbar Bootstrap thémée DamElec.
   header.php utilise .navbar navbar-expand-lg + .navbar-collapse
   officiels : plus de menu burger custom, plus de scrim custom.
   ============================================================= */

.de-navbar {
  --bs-navbar-padding-y: 24px;
  --bs-navbar-padding-x: 0;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-brand-margin-end: 0;
  --bs-navbar-nav-link-padding-x: 16px;
  --bs-nav-link-font-weight: 600;
  --bs-nav-link-font-size: 15.5px;
  /* .navbar-nav réassigne --bs-nav-link-color à partir de --bs-navbar-color :
     surcharger --bs-nav-link-* seul ne suffit pas, les liens restaient au gris
     rgba(0,0,0,.65) de Bootstrap au lieu du noir DamElec. */
  --bs-navbar-color: var(--de-ink);
  --bs-navbar-hover-color: var(--de-ink);
  --bs-navbar-active-color: var(--de-ink);
  --bs-nav-link-color: var(--de-ink);
  --bs-nav-link-hover-color: var(--de-ink);
  background: #fff;
  border-bottom: 1px solid rgba(234,230,222,.8);
  position: relative;
  z-index: 60;
}

.de-navbar .navbar-brand img {
  height: 100px;
  width: auto;
}

.de-navbar .nav-link {
  --bs-nav-link-padding-y: 11px;
  /* .navbar-nav neutralise --bs-nav-link-font-weight : poids posé en dur. */
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background-color .18s ease;
}

/* Espacements de l'ancien header : 4px entre les liens de nav,
   26px entre la nav et les boutons, 14px entre les deux boutons. */
@media (min-width: 992px) {
  .de-navbar .navbar-nav {
    gap: 4px;
  }
  .de-navbar .de-navbar-actions {
    gap: 14px !important;
    margin-left: 26px !important;
  }
}

/* Chevron lucide à la place du caret CSS de Bootstrap. */
.de-navbar .dropdown-toggle::after {
  display: none;
}

.de-navbar .nav-link > svg {
  width: 16px;
  height: 16px;
  color: var(--de-soft);
}

.de-navbar .nav-link:hover,
.de-navbar .nav-link:focus {
  background: var(--de-lilac);
}

/* Bouton burger custom (le SVG lucide reste inline). */
.de-navbar .navbar-toggler {
  border: 1.5px solid var(--de-line-2);
  border-radius: 13px;
  width: 50px;
  height: 50px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--de-ink);
}

.de-navbar .navbar-toggler:focus {
  box-shadow: none;
}

.de-navbar .navbar-toggler svg {
  width: 22px;
  height: 22px;
}

/* Menu déroulant « Nos prestations » : panneau visuel.
   Base = comportement Bootstrap standard (display none/grid), utilisé tel quel
   sur mobile où le menu est déplié dans le collapse. */
.de-navbar .dropdown-menu {
  border: 1px solid var(--de-line);
  border-radius: 20px;
  box-shadow: 0 28px 66px rgba(30,20,80,.18);
  padding: 16px;
  min-width: 0;
  width: 540px;
  margin-top: 12px !important;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.de-navbar .dropdown-menu.show {
  display: grid;
}

/* Desktop : le panneau reste rendu en permanence pour retrouver l'animation en
   fondu-descente de l'ancien menu.
   Le positionnement est figé ici (top/right/left) car Bootstrap ne pose
   l'attribut [data-bs-popper] - qui porte son `left:0` / `right:0` - QUE
   pendant l'ouverture : sans ces règles le menu change de côté à la fermeture,
   ce qui est visible puisqu'il ne disparaît pas instantanément. */
@media (min-width: 992px) {
  .de-navbar .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    display: grid;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    /* Délai de fermeture 200ms : la souris peut traverser le gap sans perdre le hover. */
    transition: opacity .18s ease .2s, transform .18s ease .2s, visibility .18s ease .2s;
    pointer-events: none;
  }

  /* Pont invisible sur les 12px de gap : hover conservé quand souris passe du lien au panneau. */
  .de-navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
  }

  /* Ouverture au survol (ancien comportement) ou au clic (.show de Bootstrap). */
  .de-navbar .nav-item.dropdown:hover .dropdown-menu,
  .de-navbar .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    /* Ouverture immédiate. */
    transition-delay: 0s;
  }
}

.de-navbar .dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  color: var(--de-ink);
  white-space: normal;
}

.de-navbar .dropdown-item:hover,
.de-navbar .dropdown-item:focus {
  background: var(--de-lilac);
  color: var(--de-ink);
}

/* :not(.de-nav-pillar) : sur le pilier (fond noir), le glyphe doit rester blanc.
   Une règle sur le <svg> l'emporte sur la couleur héritée de .de-ico. */
.de-navbar .dropdown-item:not(.de-nav-pillar) svg {
  width: 19px;
  height: 19px;
  color: var(--de-indigo);
  flex-shrink: 0;
}

.de-navbar .de-nav-pillar .de-ico svg {
  color: #fff;
  flex-shrink: 0;
}

/* Item pilier (large, sur les 2 colonnes) */
/* Le pilier occupe les deux colonnes : la règle porte sur le <li>, seul
   enfant direct de la grille. */
.de-navbar .de-nav-pillar-cell {
  grid-column: 1 / -1;
  margin-bottom: 5px;
}

.de-navbar .dropdown-item.de-nav-pillar {
  background: linear-gradient(150deg, var(--de-indigo), var(--de-indigo-2));
  color: #fff;
  gap: 13px;
  padding: 14px;
  border-radius: 14px;
}

.de-navbar .dropdown-item.de-nav-pillar:hover {
  background: linear-gradient(150deg, var(--de-indigo), var(--de-indigo-2));
  filter: brightness(1.15);
}

.de-navbar .dropdown-item.de-nav-pillar b {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}

.de-navbar .dropdown-item.de-nav-pillar span {
  display: block;
  font-size: 12.5px;
  color: rgba(255,255,255,.6);
}

/* display redéclaré : la règle `.de-nav-pillar span { display:block }` ci-dessus
   attrape aussi .de-ico (c'est un <span>) et décentrait le glyphe. */
.de-navbar .dropdown-item.de-nav-pillar .de-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.16);
  color: #fff;
  width: 44px;
  height: 44px;
}

/* Sur mobile : dropdown déplié en pleine largeur, panneau centré. */
@media (max-width: 991.98px) {
  .de-navbar .navbar-brand img {
    height: 60px;
  }
  .de-navbar .dropdown-menu {
    position: static;
    width: auto;
    min-width: 0;
    grid-template-columns: 1fr;
    box-shadow: none;
    border: 0;
    padding: 8px 0;
  }
  .de-navbar .navbar-collapse {
    padding: 16px 0 8px;
  }
  .de-navbar .navbar-nav {
    gap: 4px;
  }
  .de-navbar .de-navbar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--de-line);
  }
  .de-navbar .de-navbar-actions .btn {
    justify-content: center;
    width: 100%;
  }
}

/* =============================================================
   Card Bootstrap thémée : sur fond blanc, aplat bleu clair,
   sans bordure. Reprend le rendu de l'ancien .de-card.
   ============================================================= */

/* Gouttières reprises des anciens composants flex/grid, que les échelons
   Bootstrap (g-3 = 16px, g-5 = 48px) n'atteignent pas exactement. */

.de-services-grid {
  --bs-gutter-x: 18px;
  --bs-gutter-y: 18px;
}

/* Ancien .de-split : deux colonnes séparées de 56px. */
.de-row-split {
  --bs-gutter-x: 56px;
  --bs-gutter-y: 56px;
}

/* Gouttière réduite sous 560px : sinon la marge négative Bootstrap de -28px déborde
   du .container-xl (padding 30) et coupe le contenu à droite. */
@media (max-width: 560px) {
  .de-row-split {
    --bs-gutter-x: 0;
    --bs-gutter-y: 40px;
  }
}

/* =============================================================
   UTILITAIRES DE GRILLE DamElec
   À poser sur un .row Bootstrap. L'échelle de gouttières de
   Bootstrap (g-3 = 16px, g-4 = 24px) ne propose ni 14 ni 18px,
   qui sont le rythme du site : d'où ces deux classes.
   Idem pour les marges verticales (40 / 26px).

   Usage type :
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 de-g18">
       <div class="col"><article class="de-tile">…</article></div>
     </div>
   ============================================================= */

.de-g14 { --bs-gutter-x: 14px; --bs-gutter-y: 14px; }
.de-g18 { --bs-gutter-x: 18px; --bs-gutter-y: 18px; }
.de-g30 { --bs-gutter-x: 30px; --bs-gutter-y: 30px; }

.de-mt-40 { margin-top: 40px; }
.de-mb-40 { margin-bottom: 40px; }
.de-my-26 { margin-block: 26px; }

/* En CSS grid les cartes s'étiraient d'office sur la hauteur de la rangée.
   Dans une grille Bootstrap c'est la COLONNE qui s'étire, pas son contenu :
   sans height:100% les cartes d'une même rangée n'ont plus la même hauteur. */
.de-tile,
.de-link,
.de-card,
.de-duo__item {
  height: 100%;
}

/* Pile des cartes de contact (ancien inline gap:14px). */
.de-contact-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.de-service-card {
  background: var(--de-lilac);
  border: 0;
  border-radius: var(--de-radius);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}

.de-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(30,20,80,.09);
}

.de-service-card .card-body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.de-service-card .card-title {
  font-family: var(--de-font-title);
  font-weight: 700;
  font-size: 23px;
  margin: 22px 0 9px;
  color: var(--de-ink);
}

.de-service-card .card-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--de-body);
  margin: 0;
  flex: 1;
}

.de-service-card .de-ico {
  width: 66px;
  height: 66px;
  border-radius: 18px;
}

.de-service-card .de-ico svg {
  width: 34px;
  height: 34px;
}

.de-service-card .de-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--de-indigo);
  margin-top: 20px;
}

.de-service-card .de-card__more svg {
  width: 16px;
  height: 16px;
}

/* Variante pilier : carte noire (Électricité générale sur la home). */

.de-service-card--pillar {
  background: linear-gradient(155deg, var(--de-indigo), var(--de-indigo-2));
  color: #fff;
}

.de-service-card--pillar .de-ico {
  background: var(--de-lilac);
  color: var(--de-indigo);
}

.de-service-card--pillar .card-title {
  color: #fff;
}

.de-service-card--pillar .card-text {
  color: rgba(255,255,255,.6);
}

.de-service-card--pillar .de-card__more {
  color: #fff;
}

/* Bandeau confiance : rangée de blocs sur fond bleu clair.
   .de-trust-band reprend le padding vertical de l'ancien .de-trust. */

.de-trust-band {
  padding-block: 8px 10px;
}

.de-trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--de-lilac);
  border-radius: 18px;
  padding: 20px 22px;
  height: 100%;
}

.de-trust-item .de-ico {
  width: 52px;
  height: 52px;
}

.de-trust-item .de-ico svg {
  width: 27px;
  height: 27px;
}

.de-trust-item strong {
  font-family: var(--de-font-title);
  font-size: 16.5px;
  display: block;
}

.de-trust-item small {
  font-size: 13.5px;
  color: var(--de-muted);
}

.de-eyebrow {
  font-family: var(--de-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--de-red);
}

.de-title {
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.022em;
  font-size: clamp(32px, 3.8vw, 48px);
  margin: 13px 0 0;
}

.de-title--sm {
  font-size: clamp(28px, 3.2vw, 40px);
}

.de-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--de-body);
  margin: 17px 0 0;
}

/* =============================================================
   Boutons = Bootstrap .btn thémé DamElec.
   Usage :
     .btn.btn-danger   -> rouge (CTA principal)
     .btn.btn-dark     -> noir (téléphone, actions secondaires)
     .btn.btn-light    -> blanc (sur fond noir)
     .btn.btn-outline-dark -> contour clair
     .btn.btn-lg       -> version large
   Le look reprend l'ancien .de-btn (font-weight 700, radius 13px,
   padding généreux, effet hover translateY).
   ============================================================= */

.btn {
  --bs-btn-font-family: inherit;
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: 16px;
  --bs-btn-padding-x: 26px;
  --bs-btn-padding-y: 17px;
  --bs-btn-border-radius: 13px;
  --bs-btn-border-width: 1.5px;
  --bs-btn-line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-lg {
  --bs-btn-font-size: 16.5px;
  --bs-btn-padding-x: 30px;
  --bs-btn-padding-y: 18px;
  --bs-btn-border-radius: 14px;
}

/* Rouge = CTA principal (Devis). */
.btn-danger {
  --bs-btn-bg: var(--de-red);
  --bs-btn-border-color: var(--de-red);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--de-red);
  --bs-btn-hover-border-color: var(--de-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--de-red);
  --bs-btn-active-border-color: var(--de-red);
}
.btn-danger:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
}

/* Noir = action secondaire (téléphone). */
.btn-dark {
  --bs-btn-bg: var(--de-indigo);
  --bs-btn-border-color: var(--de-indigo);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--de-indigo);
  --bs-btn-hover-border-color: var(--de-indigo);
  --bs-btn-hover-color: #fff;
}
.btn-dark:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

/* Blanc = action sur fond noir (hero, CTA final). */
.btn-light {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-color: var(--de-indigo);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: var(--de-indigo);
  box-shadow: 0 14px 30px rgba(10,6,35,.28);
}
.btn-light:hover {
  filter: brightness(.97);
  transform: translateY(-2px);
}

/* Contour clair (bandeau services). */
.btn-outline-dark {
  --bs-btn-color: var(--de-indigo);
  --bs-btn-border-color: var(--de-line-2);
  --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--de-lilac);
  --bs-btn-hover-border-color: var(--de-lilac);
  --bs-btn-hover-color: var(--de-indigo);
}

/* Ghost (contour translucide sur fond noir). */
.btn-ghost {
  --bs-btn-bg: rgba(255,255,255,.08);
  --bs-btn-border-color: rgba(255,255,255,.30);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: rgba(255,255,255,.16);
  --bs-btn-hover-border-color: rgba(255,255,255,.45);
  --bs-btn-hover-color: #fff;
}

/* Icône carrée (pastille) */

.de-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--de-white);
  color: var(--de-indigo);
}

.de-ico svg {
  width: 24px;
  height: 24px;
}

/* Placeholder image (en attendant les vraies photos du client) */

.de-ph {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  background: linear-gradient(150deg, #d7eefb, var(--de-lilac));
  color: var(--de-indigo);
}

.de-ph svg {
  width: 40px;
  height: 40px;
  opacity: .55;
}

.de-ph span {
  font-family: var(--de-font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--de-muted);
  max-width: 220px;
}

.de-hero__img .de-ph,
.de-energy__img .de-ph {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,0.6);
}

.de-hero__img .de-ph span,
.de-energy__img .de-ph span {
  color: #b7b0dd;
}

/* Ombre au scroll (header sticky) - conservé, référencé par main.js. */

.de-navbar.is-scrolled {
  box-shadow: 0 10px 34px rgba(30,20,80,.10);
}

/* ================================================================ HERO */

.de-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(140deg, var(--de-indigo) 0%, var(--de-indigo-2) 52%, var(--de-indigo-3) 100%);
}

.de-hero__glow-a {
  position: absolute;
  top: -160px;
  right: 8%;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183,225,247,.60), transparent 70%);
  filter: blur(20px);
}

.de-hero__glow-b {
  position: absolute;
  bottom: -180px;
  left: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.09), transparent 70%);
}

.de-hero__inner {
  position: relative;
  max-width: var(--de-container);
  margin: 0 auto;
  padding: 66px 30px 80px;
  display: flex;
  gap: 58px;
  align-items: center;
}

.de-hero__col {
  flex: 1.05;
  min-width: 400px;
}

.de-hero__media {
  flex: 1;
  min-width: 340px;
  position: relative;
}

.de-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--de-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--de-lilac);
  padding: 9px 16px;
  border-radius: 100px;
  color: rgba(0,0,0,0.7);
}

.de-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--de-red);
  animation: dePulse 2.2s infinite;
}

@keyframes dePulse {
  0% {
    box-shadow:0 0 0 0 rgba(193,23,24,.5);
  }
  70% {
    box-shadow:0 0 0 8px rgba(193,23,24,0);
  }
  100% {
    box-shadow:0 0 0 0 rgba(193,23,24,0);
  }
}

.de-hero h1 {
  font-weight: 800;
  font-size: clamp(42px, 5.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -.028em;
  margin: 26px 0 0;
}

.de-hero h1 .mark {
  box-shadow: inset 0 -.14em 0 var(--de-red);
  padding-right: .05em;
}

.de-hero__lead {
  font-size: 18px;
  line-height: 1.62;
  color: #FFF;
  max-width: 540px;
  margin: 26px 0 0;
}

.de-hero__cta {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.de-hero__checks {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.de-hero__checks span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: rgba(255,255,255,0.6);
}

.de-hero__checks svg {
  width: 18px;
  height: 18px;
  color: var(--de-red);
  stroke-width: 3;
}

.de-hero__img {
  aspect-ratio: 4/5;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 40px 80px rgba(10,6,35,.45);
}

.de-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.de-float {
  position: absolute;
  left: -24px;
  bottom: 40px;
  background: #fff;
  color: var(--de-ink);
  border-radius: 18px;
  padding: 17px 20px;
  box-shadow: 0 24px 50px rgba(10,6,35,.4);
  display: flex;
  align-items: center;
  gap: 14px;
  animation: deFloaty 6s ease-in-out infinite;
}

@keyframes deFloaty {
  0%,
  100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-9px);
  }
}

.de-float .de-ico {
  width: 48px;
  height: 48px;
  background: var(--de-indigo);
  color: #fff;
  display: flex;
}

.de-float b {
  display: block;
  font-family: var(--de-font-title);
  font-weight: 800;
  font-size: 23px;
  line-height: 1;
}

.de-float span {
  display: block;
  font-size: 12.5px;
  color: var(--de-muted);
}

.de-hero__wave {
  height: 36px;
  background: var(--de-cream);
  border-radius: 36px 36px 0 0;
  margin-top: -2px;
}

/* ============================================================ SERVICES */

.de-card {
  background: var(--de-lilac);
  /*border: 1px solid var(--de-line);*/
  border-radius: var(--de-radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.de-card:hover {
  transform: translateY(-4px);
  /*border-color: #D9D1F0;*/
  box-shadow: 0 20px 44px rgba(30,20,80,.09);
}

.de-card .de-ico {
  width: 66px;
  height: 66px;
  border-radius: 18px;
}

.de-card .de-ico svg {
  width: 34px;
  height: 34px;
}

.de-card h3 {
  font-weight: 700;
  font-size: 23px;
  margin: 22px 0 9px;
}

.de-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--de-body);
  margin: 0;
  flex: 1;
}

.de-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--de-indigo);
  margin-top: 20px;
}

.de-card__more svg {
  width: 16px;
  height: 16px;
}

.de-card--pillar {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(155deg, var(--de-indigo), var(--de-indigo-2));
  border-color: transparent;
}

.de-card--pillar .de-ico {
  background: var(--de-lilac);
  color: var(--de-indigo);
}

.de-card--pillar h3 {
  color: #fff;
}

.de-card--pillar p {
  color: rgba(255,255,255,0.6);
}

.de-card--pillar .de-card__more {
  color: #fff;
}

.de-card__tag {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--de-font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  padding: 5px 11px;
  border-radius: 100px;
}

/* ========================================================= WHY / SPLIT */

.de-media {
  position: relative;
}

.de-media__img {
  aspect-ratio: 5/4;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--de-line-2);
  box-shadow: 0 30px 60px rgba(30,20,80,.10);
}

.de-media__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.de-media__badge {
  position: absolute;
  right: -20px;
  bottom: -20px;
  background: var(--de-red);
  color: #fff;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 20px 44px rgba(193,23,24,.32);
}

.de-media__badge b {
  display: block;
  font-family: var(--de-font-title);
  font-weight: 800;
  font-size: 33px;
  line-height: 1;
}

.de-media__badge span {
  display: block;
  font-size: 13px;
  margin-top: 5px;
  opacity: .92;
}

.de-feat {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.de-feat__row {
  display: flex;
  gap: 16px;
}

.de-feat__row .de-ico {
  width: 46px;
  height: 46px;
}

.de-feat__row .de-ico svg {
  width: 23px;
  height: 23px;
}

.de-feat__row strong {
  font-size: 17px;
  font-family: var(--de-font-title);
}

.de-feat__row p {
  font-size: 15px;
  color: var(--de-body);
  line-height: 1.55;
  margin: 4px 0 0;
}

/* ============================================================= PROCESS */

.de-process {
  background: #fff;
  border-block: 1px solid var(--de-line);
}

.de-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  gap: 18px;
}

.de-step {
  background: var(--de-cream);
  border: 1px solid var(--de-line);
  border-radius: 20px;
  padding: 28px;
}

.de-step__n {
  font-family: var(--de-font-title);
  font-weight: 800;
  font-size: 15px;
  color: var(--de-red);
}

.de-step .de-ico {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--de-indigo);
  color: #fff;
  margin: 14px 0 18px;
}

.de-step .de-ico svg {
  width: 26px;
  height: 26px;
}

.de-step h3 {
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 8px;
}

.de-step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--de-body);
  margin: 0;
}

/* ============================================================== ENERGY */

.de-energy {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--de-indigo), var(--de-indigo-2));
}

.de-energy__glow {
  position: absolute;
  top: -120px;
  right: 6%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183,225,247,.60), transparent 70%);
}

.de-energy .de-ico {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: rgba(255,255,255,.14);
  color: #fff;
  margin-bottom: 20px;
}

.de-energy .de-ico svg {
  width: 28px;
  height: 28px;
}

.de-energy h2 {
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 15px;
}

.de-energy p {
  font-size: 17px;
  line-height: 1.62;
  color: #FFF;
  margin: 0;
  max-width: 600px;
}

.de-energy__img {
  aspect-ratio: 4/3;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
}

.de-energy__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================ CONTACT */

.de-contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--de-line);
  border-radius: 16px;
  padding: 17px 20px;
}

.de-contact-card .de-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.de-contact-card--red .de-ico {
  background: var(--de-red);
  color: #fff;
}

.de-contact-card__k {
  display: block;
  font-size: 12.5px;
  color: var(--de-soft);
  font-weight: 600;
}

.de-contact-card__v {
  display: block;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--de-ink);
}

.de-contact-card__v--big {
  font-family: var(--de-font-title);
  font-weight: 800;
  font-size: 23px;
}

.de-form {
  background: var(--de-lilac);
  /*border: 1px solid var(--de-line);*/
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 28px 66px rgba(30,20,80,.08);
  /* Le formulaire est posé sur fond clair (accueil) ou sur le héros noir
     (devis, contact) : on fixe la couleur du texte pour ne pas hériter du
     blanc du héros. */
  color: var(--de-ink);
}

.de-form h3 {
  font-weight: 700;
  font-size: 21px;
  margin: 0 0 5px;
}

.de-form__sub {
  font-size: 13.5px;
  color: var(--de-body);
  margin: 0 0 24px;
}

.de-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #3d3a52;
  margin-bottom: 14px;
}

.de-field input,
.de-field select,
.de-field textarea {
  font-family: inherit;
  font-size: 14.5px;
  padding: 14px 15px;
  border: 1px solid var(--de-white);
  border-radius: 12px;
  background: var(--de-cream);
  outline: none;
  color: var(--de-ink);
  transition: border-color .15s ease, background .15s ease;
}

.de-field input:focus,
.de-field select:focus,
.de-field textarea:focus {
  border-color: var(--de-indigo);
  background: #fff;
}

.de-field textarea {
  resize: vertical;
}

.de-form__row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.de-form__row .de-field {
  flex: 1;
  min-width: 150px;
}

.de-form__note {
  font-size: 12px;
  color: var(--de-red);
  text-align: center;
  margin: 15px 0 0;
}

.de-form button {
  width: 100%;
  justify-content: center;
}

.de-req {
  color: var(--de-red);
  font-weight: 700;
}

.de-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #3d3a52;
  margin-bottom: 20px;
  cursor: pointer;
}

.de-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--de-indigo);
  flex-shrink: 0;
  cursor: pointer;
}

.de-check a {
  color: var(--de-indigo);
  font-weight: 600;
  text-decoration: underline;
}

/* =============================================================== FOOTER */

.de-footer {
  background: var(--de-indigo);
  color: #FFF;
}

/* Grille custom : proportions non reproductibles avec les colonnes Bootstrap. */

.de-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 44px;
}

@media (max-width: 992px) {
  .de-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .de-footer__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.de-footer img {
  height: 140px;
  width: auto;
  margin-bottom: 20px;
}

.de-footer p {
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(255,255,255,0.6);
}

.de-footer h4 {
  font-family: var(--de-font-title);
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 17px;
}

.de-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
}

.de-footer__links a {
  color: rgba(255,255,255,0.6);
}

.de-footer__links a:hover {
  color: #fff;
}

.de-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
}

.de-footer__contact a,
.de-footer__contact span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFF;
}

.de-footer__contact svg {
  width: 17px;
  height: 17px;
  color: var(--de-red);
}

.de-footer__bar {
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 46px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
}

.de-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: center;
}

/* Rouvre le panneau de préférences cookies (bouton, car c'est une action). */

.de-footer__cc {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.de-footer__cc:hover {
  color: #fff;
}

.de-footer__fb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  color: #FFF;
  font-weight: 600;
  font-size: 14px;
}

.de-footer__fb svg {
  width: 20px;
  height: 20px;
  color: #C11718;
}

.de-footer__fb:hover {
  color: #fff;
}

/* Rendu identique que ce soit un <a> (accueil) ou un <span role="link">
   (autres pages, lien obfusqué) : d'où le cursor posé explicitement. */
.de-footer__3clics {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
}

.de-footer__3clics span {
  font-size: 12px;
  line-height: 1;
}

.de-footer__3clics img {
  height: 22px;
  width: auto;
  margin: 0;
  display: block;
  opacity: .85;
  transition: opacity .2s ease;
}

.de-footer__3clics:hover img {
  opacity: 1;
}

/* ============================================================ RESPONSIVE */

@media (max-width: 992px) {
  .de-hero__inner {
    flex-direction: column;
  }
  .de-hero__col,
  .de-hero__media {
    min-width: 0;
    width: 100%;
  }
  .de-section {
    padding-block: 52px;
  }
}

@media (max-width: 560px) {
  .container-xl,
  .de-container,
  .de-hero__inner {
    padding-inline: 18px;
  }
  .de-hero__cta {
    flex-direction: column;
  }
  .de-hero__cta .btn {
    width: 100%;
    justify-content: center;
  }
  .de-float {
    left: 8px;
  }
}

/* =========================================================================
   PAGES DE SERVICE - blocs réutilisables (héros de page, sommaire, tuiles…)
   Mêmes règles que l'accueil : aplats bleu clair sur fond blanc,
   bandes noires pour les respirations, rouge en accent.
   ========================================================================= */

/* --------------------------------------------------- héros de page (compact) */

.de-phero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(140deg, var(--de-indigo) 0%, var(--de-indigo-2) 52%, var(--de-indigo-3) 100%);
}

.de-phero__glow {
  position: absolute;
  top: -200px;
  right: 4%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183,225,247,.60), transparent 70%);
  filter: blur(20px);
}

.de-phero__inner {
  position: relative;
  max-width: var(--de-container);
  margin: 0 auto;
  padding: 46px 30px 72px;
  display: flex;
  gap: 56px;
  align-items: center;
}

.de-phero__col {
  flex: 1.2;
  min-width: 400px;
}

.de-phero__media {
  flex: 1;
  min-width: 300px;
  position: relative;
}

/* Variante sans visuel : le texte occupe toute la largeur. */

.de-phero--slim .de-phero__inner {
  padding-bottom: 56px;
}

.de-phero--slim .de-phero__col {
  flex: 1;
  min-width: 0;
}

.de-phero--slim h1 {
  max-width: 20ch;
}

/* Variante « formulaire dans le héros » : le but de la page est immédiatement
   actionnable, sans scroll. Le formulaire remplace la colonne visuelle. */

.de-phero--form .de-phero__inner {
  align-items: flex-start;
  gap: 48px;
}

.de-phero--form .de-phero__col {
  flex: 1;
  min-width: 320px;
  padding-top: 8px;
}

.de-phero--form h1 {
  max-width: 13ch;
}

.de-phero__aside {
  position: relative;
  flex: 0 0 470px;
  min-width: 0;
}

/* Alternative au formulaire, pour qui préfère appeler. */

.de-phero__tel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 14px 22px 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  transition: background .18s ease;
}

.de-phero__tel:hover {
  background: rgba(255,255,255,.12);
}

.de-phero__tel .de-ico {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--de-red);
  color: #fff;
}

.de-phero__tel-k {
  display: block;
  font-size: 12.5px;
  color: rgba(255,255,255,.6);
}

.de-phero__tel-v {
  display: block;
  font-family: var(--de-font-title);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  line-height: 1.2;
}

/* ------------------------------------------- états des formulaires */

/* Champ en erreur */

.de-field--err input,
.de-field--err select,
.de-field--err textarea {
  border-color: var(--de-red);
  background: #fff;
}

.de-field__err {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--de-red);
  margin-top: -2px;
}

/* Bandeau d'erreur global (échec d'envoi) */

.de-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 14px;
  padding: 15px 17px;
  margin: 0 0 20px;
  background: #fff;
  border-left: 4px solid var(--de-red);
}

.de-alert svg {
  width: 19px;
  height: 19px;
  color: var(--de-red);
  flex-shrink: 0;
  margin-top: 2px;
}

.de-alert p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--de-body);
}

.de-alert strong {
  display: block;
  color: var(--de-ink);
  margin-bottom: 2px;
}

/* Confirmation d'envoi : remplace le formulaire */

.de-sent {
  text-align: center;
  padding: 20px 10px 10px;
}

.de-sent .de-ico {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: var(--de-white);
  color: var(--de-red);
  margin: 0 auto 22px;
}

.de-sent .de-ico svg {
  width: 34px;
  height: 34px;
  stroke-width: 2.5;
}

.de-sent h3 {
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 10px;
}

.de-sent p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--de-body);
  margin: 0 auto 22px;
  max-width: 44ch;
}

.de-sent__tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15px;
  color: var(--de-indigo);
}

.de-sent__tel svg {
  width: 17px;
  height: 17px;
}

/* Champ leurre anti-spam : masqué à l'écran ET aux lecteurs d'écran. */

.de-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------- page rédactionnelle (légal) */

.de-prose {
  max-width: 780px;
  margin-inline: auto;
}

.de-prose h2 {
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 46px 0 14px;
  scroll-margin-top: 90px;
}

.de-prose h2:first-child {
  margin-top: 0;
}

.de-prose h3 {
  font-weight: 700;
  font-size: 18px;
  margin: 26px 0 8px;
}

.de-prose p {
  font-size: 16px;
  line-height: 1.68;
  color: var(--de-body);
  margin: 0 0 14px;
}

.de-prose a {
  color: var(--de-indigo);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.de-prose a:hover {
  color: var(--de-red);
}

.de-prose ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.de-prose li {
  font-size: 16px;
  line-height: 1.68;
  color: var(--de-body);
  margin-bottom: 8px;
}

.de-prose strong {
  color: var(--de-ink);
}

/* Encadré d'identité (éditeur, hébergeur…) */

.de-idcard {
  background: var(--de-lilac);
  border-radius: var(--de-radius);
  padding: 26px 28px;
  margin: 0 0 14px;
}

.de-idcard p {
  margin: 0;
  color: var(--de-ink);
}

.de-idcard dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 22px;
  margin: 0;
}

/* Même typo que les paragraphes (pas de mono) : noir et gras. */

.de-idcard dt {
  font-family: var(--de-font-sans);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--de-ink);
}

.de-idcard dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--de-ink);
}

@media (max-width: 560px) {
  .de-idcard dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .de-idcard dd {
    margin-bottom: 12px;
  }
}

/* -------------------------------------------------- grille de coordonnées */

.de-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.de-phero .de-badge {
  margin-top: 24px;
}

.de-phero h1 {
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -.026em;
  margin: 24px 0 0;
  max-width: 16ch;
}

.de-phero__lead {
  font-size: 17.5px;
  line-height: 1.62;
  color: #fff;
  /*max-width: 560px;*/
  margin: 24px 0 0;
}

.de-phero__cta {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.de-phero__checks {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.de-phero__checks span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: rgba(255,255,255,.6);
}

.de-phero__checks svg {
  width: 18px;
  height: 18px;
  color: var(--de-red);
  stroke-width: 3;
}

.de-phero__img {
  aspect-ratio: 1/1;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
}

.de-phero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.de-phero__img .de-ph {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
}

.de-phero__img .de-ph span {
  color: rgba(255,255,255,.5);
}

.de-phero .de-float b {
  font-size: 19px;
}

/* ----------------------------------------------------------- fil d'ariane */

.de-crumb {
  font-family: var(--de-font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.de-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Séparateur décoratif : généré en CSS pour ne pas insérer, au milieu du
   BreadcrumbList, un <li> qui ne serait pas un itemListElement. */
.de-crumb li + li::before {
  content: "/";
  margin-right: 9px;
  opacity: .55;
}

.de-crumb a {
  color: inherit;
  text-decoration: none;
}

.de-crumb a:hover {
  color: var(--de-lilac);
}

.de-crumb [aria-current] {
  color: #fff;
  cursor: default;
}

/* Variante fond clair : le style par défaut est blanc, prévu pour les héros
   sombres des pages de prestation. Sans elle, le fil d'ariane des pages sur
   fond blanc (Réalisations, Mentions légales) était blanc sur blanc. */
.de-crumb--light {
  color: var(--de-muted);
}

.de-crumb--light a:hover {
  color: var(--de-red);
}

.de-crumb--light [aria-current] {
  color: var(--de-ink);
}

/* --------------------------------------------------------- sommaire ancré */

.de-toc {
  background: #fff;
  border-bottom: 1px solid var(--de-line);
  position: sticky;
  top: 0;
  z-index: 40;
}

.de-toc__inner {
  max-width: var(--de-container);
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.de-toc__inner::-webkit-scrollbar {
  display: none;
}

.de-toc__label {
  font-family: var(--de-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--de-soft);
  white-space: nowrap;
  margin-right: 14px;
}

.de-toc a {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--de-ink);
  padding: 17px 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.de-toc a:hover {
  color: var(--de-red);
  border-bottom-color: var(--de-red);
}

/* ----------------------------------------------------------- encart notice */

.de-note {
  background: var(--de-lilac);
  border-radius: var(--de-radius);
  padding: 32px;
}

.de-note .de-ico {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  color: var(--de-red);
}

.de-note .de-ico svg {
  width: 28px;
  height: 28px;
}

.de-note h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  margin: 20px 0 10px;
}

.de-note p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--de-body);
  margin: 0;
}

.de-note strong {
  color: var(--de-ink);
}

.de-note__stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 9px 15px;
  border-radius: 100px;
  background: var(--de-white);
  color: var(--de-indigo);
  font-family: var(--de-font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.de-note__stamp svg {
  width: 15px;
  height: 15px;
}

/* -------------------------------------------------- tuiles de prestations */

.de-tile {
  position: relative;
  background: var(--de-lilac);
  border-radius: var(--de-radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.de-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(30,20,80,.09);
}

.de-tile__n {
  position: absolute;
  top: 24px;
  right: 26px;
  font-family: var(--de-font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--de-soft);
}

.de-tile .de-ico {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

.de-tile .de-ico svg {
  width: 28px;
  height: 28px;
}

.de-tile h3 {
  font-weight: 700;
  font-size: 19px;
  margin: 20px 0 8px;
}

.de-tile p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--de-body);
  margin: 0;
  flex: 1;
}

/* Tuile sans titre (puce de liste rendue telle quelle) : le texte prend le relais. */

.de-tile > .de-ico + p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--de-ink);
}

/* Pas de modificateur de « mise en avant » ici : les tuiles rendent des puces
   de même niveau dans le contenu, elles restent donc visuellement identiques.
   La hiérarchie se joue entre sections (bandes noires), pas entre pairs. */

/* Liste imbriquée dans une tuile : marges resserrées. */

.de-tile .de-list {
  margin: 18px 0 0;
  gap: 10px;
}

.de-tile .de-list li {
  font-size: 14.5px;
}

/* Chiffre-clé en tête de tuile (puissances, délais…) */

.de-tile__kpi {
  display: block;
  font-family: var(--de-font-title);
  font-weight: 800;
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 20px 0 0;
}

.de-tile__kpi small {
  font-family: var(--de-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--de-muted);
  display: block;
  margin-top: 8px;
}


/* ------------------------------------------- pastilles de contexte (chips) */

.de-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0;
  padding: 0;
  list-style: none;
}

.de-chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--de-lilac);
  border-radius: 100px;
  padding: 11px 18px;
  font-weight: 600;
  font-size: 14.5px;
}

.de-chips svg {
  width: 17px;
  height: 17px;
  color: var(--de-indigo);
  flex-shrink: 0;
}

/* ------------------------------------------- duo de définitions (2 niveaux) */

.de-duo__item {
  background: var(--de-lilac);
  border-radius: 16px;
  padding: 18px 20px;
}

.de-duo__k {
  display: block;
  font-family: var(--de-font-title);
  font-weight: 700;
  font-size: 15.5px;
  margin-bottom: 6px;
}

.de-duo__item p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--de-body);
  margin: 0;
}


/* --------------------------------------------------------- liste à coches */

.de-list {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.de-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--de-body);
}

.de-list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--de-red);
  stroke-width: 3;
}

.de-list a {
  color: var(--de-indigo);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.de-list a:hover {
  color: var(--de-red);
}

/* ------------------------------------- cartes de maillage (sur bande noire) */

.de-link {
  background: rgba(255,255,255,.06);
  border-radius: var(--de-radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  color: #fff;
  transition: transform .2s ease, background .2s ease;
}

.de-link:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.12);
}

.de-link .de-ico {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--de-lilac);
  color: var(--de-indigo);
  margin: 0;
}

.de-link .de-ico svg {
  width: 28px;
  height: 28px;
}

.de-link h3 {
  font-weight: 700;
  font-size: 20px;
  margin: 20px 0 8px;
}

.de-link p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.6);
  margin: 0;
  flex: 1;
}

.de-link__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.de-link__more svg {
  width: 15px;
  height: 15px;
}

/* ------------------------------ en-tête de section sur fond noir + eyebrow */

.de-sec-head--light h2 {
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 13px 0 0;
}
.de-sec-head--light h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  margin: 13px 0 0;
}
.de-sec-head--light p {
  font-size: 17px;
  line-height: 1.62;
  color: rgba(255,255,255,.6);
  margin: 17px 0 0;
  max-width: inherit;
}

.de-eyebrow--light {
  color: var(--de-lilac);
}

/* --------------------------------------------- engagements (grille de rows) */

.de-feat--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px 34px;
}

/* Sur fond blanc, la pastille blanche par défaut disparaîtrait. */

.de-feat--grid .de-ico {
  background: var(--de-lilac);
}

/* -------------------------------------------------------------- CTA final */

.de-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 46px;
  align-items: center;
  flex-wrap: wrap;
  border-radius: var(--de-radius);
  padding: 48px;
  color: #fff;
  background: linear-gradient(135deg, var(--de-indigo), var(--de-indigo-3));
}

.de-cta__glow {
  position: absolute;
  top: -180px;
  right: -60px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183,225,247,.45), transparent 70%);
}

.de-cta__col {
  position: relative;
  flex: 1.4;
  min-width: 320px;
}

.de-cta h2 {
  font-weight: 800;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 13px 0 14px;
}

.de-cta p {
  font-size: 16px;
  line-height: 1.62;
  color: rgba(255,255,255,.6);
  margin: 0;
  max-width: 620px;
}

.de-cta__zone {
  font-size: 13.5px;
  color: rgba(255,255,255,.5);
  margin-top: 16px;
}

.de-cta__actions {
  position: relative;
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.de-cta__actions .btn {
  width: 100%;
  justify-content: center;
}

.de-cta__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
}

.de-cta__note svg {
  width: 16px;
  height: 16px;
  color: var(--de-red);
  stroke-width: 3;
}

/* ------------------------------------------- responsive des pages service */

@media (max-width: 1100px) {
  }

@media (max-width: 992px) {
  .de-phero__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 56px;
  }
  .de-phero__col,
  .de-phero__media,
  .de-phero__aside {
    min-width: 0;
    width: 100%;
    flex: 1 1 auto;
  }
  .de-phero h1 {
    max-width: none;
  }
  /* Page devis : en colonne, tout ce qui s'intercale entre le titre et le
     formulaire l'éloigne de l'écran. Le téléphone et les garanties sont
     repris juste sous le héros (grille de coordonnées) : on les retire ici. */
  .de-phero--form .de-phero__tel,
  .de-phero--form .de-phero__checks {
    display: none;
  }
  .de-phero--form .de-phero__inner {
    gap: 28px;
  }
}

@media (max-width: 700px) {
  .de-cta {
    padding: 34px 26px;
    gap: 30px;
    /* Stacking vertical propre : sinon col + actions tentent de partager la largeur
       et deviennent illisibles. */
    flex-direction: column;
    align-items: stretch;
  }
  /* Sous 992px : viewport souvent < 380px, min-width 320/280 déborderait. */
  .de-cta__col,
  .de-cta__actions {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .de-phero__inner,
  .de-toc__inner {
    padding-inline: 18px;
  }
  .de-phero__cta {
    flex-direction: column;
  }
  .de-phero__cta .btn {
    width: 100%;
    justify-content: center;
  }
  .de-note {
    padding: 26px 22px;
  }
  /* Composants avec `min-width` >= 300px : sur viewport 360px et container
     padding 30px, les colonnes débordent et coupent leur contenu. Neutralisation
     du min-width mobile : `flex-wrap` gère déjà l'empilement vertical. */
  .de-phero__col,
  .de-phero__media {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
  }
  /* Phero: force stacking vertical (sinon les deux cols essaient de partager 324px). */
  .de-phero__inner {
    flex-direction: column;
    flex-wrap: wrap;
  }
  /* Split idem : évite le partage forcé quand les cols retombent à 134px chacune. */
  }

/* =============================================================
   MENU OVERLAY (bouton Menu/Fermer + panneau dropdown)
   Remplace l'ancienne nav (Nos prestations / Contact) sur toutes
   les pages. Markup dans includes/header.php, JS dans main.js.
   ============================================================= */

/* --- Bouton Menu (dans le header) --- */
.de-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 22px 0 18px;
  border: 1.5px solid var(--de-line-2);
  border-radius: 13px;
  background: #fff;
  color: var(--de-ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  position: relative;
  z-index: 220;
}
.de-menu-btn:hover {
  background: var(--de-indigo);
  border-color: var(--de-indigo);
  color: #fff;
}
/* Ouvert : blanc, bordure + texte rouge = « fermer », contraste avec le panneau. */
.de-menu-btn[aria-expanded="true"],
.de-menu-btn[aria-expanded="true"]:hover {
  background: #fff;
  border-color: var(--de-red);
  color: var(--de-red);
}
.de-menu-btn__bars { position: relative; display: inline-block; width: 20px; height: 14px; }
.de-menu-btn__bars span {
  position: absolute; left: 0; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .35s cubic-bezier(.7,0,.3,1), width .35s ease, top .35s ease;
}
.de-menu-btn__bars span:first-child { top: 3px; width: 100%; }
.de-menu-btn__bars span:last-child  { top: 9px; width: 65%; left: auto; right: 0; }
.de-menu-btn:hover .de-menu-btn__bars span:last-child { width: 100%; }
.de-menu-btn[aria-expanded="true"] .de-menu-btn__bars span { top: 6px; width: 100%; left: 0; right: auto; }
.de-menu-btn[aria-expanded="true"] .de-menu-btn__bars span:first-child { transform: rotate(45deg); }
.de-menu-btn[aria-expanded="true"] .de-menu-btn__bars span:last-child  { transform: rotate(-45deg); }
.de-menu-btn__l-close { display: none; }
.de-menu-btn[aria-expanded="true"] .de-menu-btn__l-open  { display: none; }
.de-menu-btn[aria-expanded="true"] .de-menu-btn__l-close { display: inline; }
@media (max-width: 767px) {
  .de-menu-btn__label { display: none; }
  .de-menu-btn { padding: 0; width: 50px; justify-content: center; }
}

/* --- Voile flouté --- */
.de-scrim {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.de-scrim.is-open { opacity: 1; pointer-events: auto; }

/* --- Panneau : styles communs --- */
.de-menu {
  position: fixed; z-index: 210;
  background: var(--de-indigo);
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
.de-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.de-menu__inner { padding: 26px 28px; }

.de-menu__eyebrow {
  display: block;
  font-family: var(--de-font-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--de-red);
  margin-bottom: 12px;
}

.de-menu__list, .de-menu__nav { list-style: none; padding: 0; margin: 0; }

/* Stagger fade+up */
.de-menu__list li, .de-menu__nav li, .de-menu__contact {
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
}
.de-menu.is-open .de-menu__list li,
.de-menu.is-open .de-menu__nav li,
.de-menu.is-open .de-menu__contact {
  opacity: 1; transform: none;
  transition-delay: calc(.2s + var(--i, 0) * .04s);
}

/* Ligne service */
.de-menu__link {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 12px; padding: 8px 10px 8px 8px;
  border-radius: 10px; color: #fff;
  transition: background-color .2s ease;
}
.de-menu__link:hover { background: rgba(255,255,255,.06); }
.de-menu__link-ico {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.de-menu__link:hover .de-menu__link-ico { background: var(--de-red); }
.de-menu__link-ico svg { width: 17px; height: 17px; color: #fff; }
.de-menu__link-title {
  display: block; font-family: var(--de-font-title);
  font-weight: 700; font-size: 15.5px; line-height: 1.2;
}
.de-menu__link-sub { display: block; font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 1px; }

/* Nav secondaire (même taille/interaction que les services, aligné sur l'eyebrow) */
.de-menu__nav { margin-inline: -12px; }
.de-menu__nav li + li { margin-top: 2px; }
.de-menu__navlink {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-family: var(--de-font-title); font-weight: 700;
  font-size: 15.5px; line-height: 1.2; color: #fff;
  padding: 9px 12px; border-radius: 10px;
  transition: background-color .2s ease, padding .2s ease;
}
.de-menu__navlink:hover { background: rgba(255,255,255,.06); padding-left: 16px; }
.de-menu__navlink-arrow {
  display: inline-flex;
  color: rgba(255,255,255,.35);
  transform: translateX(-6px); opacity: 0;
  transition: transform .25s ease, opacity .25s ease, color .25s ease;
}
.de-menu__navlink-arrow svg { width: 16px; height: 16px; }
.de-menu__navlink:hover .de-menu__navlink-arrow { transform: none; opacity: 1; color: var(--de-red); }

/* Contact compact */
.de-menu__contact { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.09); }
.de-menu__tel {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--de-font-title); font-weight: 700; font-size: 18px; color: #fff;
}
.de-menu__tel svg { width: 18px; height: 18px; color: var(--de-red); }
.de-menu__addr {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: rgba(255,255,255,.6); margin: 6px 0 0;
}
.de-menu__addr svg { width: 15px; height: 15px; color: var(--de-red); flex-shrink: 0; }

/* CTA devis mis en avant dans le menu (seul accès au devis sur mobile). */
.de-menu__cta {
  display: flex !important;
  width: 100%;
  justify-content: center;
  margin-bottom: 16px;
  --bs-btn-padding-y: 14px;
}

/* --- Variante dropdown (ancrée sous le header, alignée au container) --- */
.de-menu--dropdown {
  top: calc(var(--de-header-h, 108px) + 8px);
  right: max(30px, calc((100vw - 1260px) / 2 + 30px));
  width: 980px;
  max-width: calc(100vw - 60px);
  max-height: calc(100vh - var(--de-header-h, 108px) - 24px);
  overflow-y: auto;
  transform: translateY(-12px) scale(.98);
  transform-origin: top right;
  transition: opacity .3s ease, transform .35s cubic-bezier(.7,0,.3,1), visibility 0s linear .35s;
  scrollbar-width: none;
}
.de-menu--dropdown::-webkit-scrollbar { display: none; }
.de-menu--dropdown.is-open {
  transform: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.7,0,.3,1), visibility 0s;
}
.de-menu--dropdown .de-menu__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 34px; }
.de-menu--dropdown .de-menu__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.de-menu--dropdown .de-menu__inner { padding: 30px 34px; }

/* Écran bas : compaction pour tenir sans scrollbar. */
@media (max-height: 740px) {
  .de-menu--dropdown .de-menu__inner { padding: 20px 30px; }
  .de-menu--dropdown .de-menu__link { padding: 5px 8px 5px 6px; }
  .de-menu--dropdown .de-menu__link-sub { display: none; }
  .de-menu--dropdown .de-menu__navlink { padding-top: 7px; padding-bottom: 7px; }
  .de-menu--dropdown .de-menu__nav li + li { margin-top: 0; }
  .de-menu--dropdown .de-menu__contact { margin-top: 12px; padding-top: 12px; }
  .de-menu--dropdown .de-menu__cta { margin-bottom: 10px; --bs-btn-padding-y: 11px; }
  .de-menu--dropdown .de-menu__eyebrow { margin-bottom: 8px; }
}

/* Sous 900 : une colonne, panneau bord à bord. */
@media (max-width: 900px) {
  .de-menu--dropdown .de-menu__grid { grid-template-columns: 1fr; gap: 18px; }
  .de-menu--dropdown { right: 10px; left: 10px; width: auto; max-width: none; }
  .de-menu--dropdown .de-menu__col--aside { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.09); }
}

/* Sous 640 : services empilés, descriptions masquées. */
@media (max-width: 640px) {
  .de-menu--dropdown { right: 8px; left: 8px; top: calc(var(--de-header-h, 108px) + 6px); border-radius: 16px; }
  .de-menu--dropdown .de-menu__inner { padding: 20px 20px; }
  .de-menu--dropdown .de-menu__list { grid-template-columns: 1fr; }
  .de-menu--dropdown .de-menu__link-sub { display: none; }
  .de-menu--dropdown .de-menu__link { padding: 10px 10px 10px 8px; }
}

body.is-menu-open { overflow: hidden; }

/* Header au-dessus du scrim pendant toute l'ouverture (sinon bouton flouté).
   Porté par .is-elevated (retiré en fin d'anim) pour éviter le micro-flou. */
#site-header.is-elevated { z-index: 215; }

/* =============================================================
   PAGE RÉALISATIONS - galerie masonry + lightbox plein écran
   ============================================================= */

/* Galerie : colonnes masonry, chaque photo garde son ratio. */
.de-gallery {
  columns: 3;
  column-gap: 18px;
}
@media (max-width: 900px) { .de-gallery { columns: 2; column-gap: 14px; } }
@media (max-width: 560px) { .de-gallery { columns: 1; } }

.de-gallery__item {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  border-radius: var(--de-radius);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 10px 30px rgba(30,20,80,.08);
}
@media (max-width: 900px) { .de-gallery__item { margin-bottom: 14px; } }

.de-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s cubic-bezier(.7,0,.3,1);
}
.de-gallery__item:hover img { transform: scale(1.05); }

/* Voile + titre au survol (si titre renseigné). */
.de-gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 18px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  text-align: left;
  pointer-events: none;
}
.de-gallery__item:hover .de-gallery__cap { opacity: 1; transform: none; }
.de-gallery__cap strong {
  display: block;
  font-family: var(--de-font-title);
  font-weight: 700;
  font-size: 16px;
}
/* Pastille loupe en haut à droite, toujours visible au survol. */
.de-gallery__zoom {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s ease, transform .3s ease;
}
.de-gallery__item:hover .de-gallery__zoom { opacity: 1; transform: none; }
.de-gallery__zoom svg { width: 18px; height: 18px; }

/* --- Lightbox plein écran --- */
.de-lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8, 6, 18, .97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.de-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
body.is-lightbox-open { overflow: hidden; }

.de-lightbox__stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 70px 80px 20px;
  min-height: 0;
}
.de-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  opacity: 0;
  transform: scale(.97);
  transition: opacity .35s ease, transform .35s ease;
}
.de-lightbox__img.is-shown { opacity: 1; transform: none; }

.de-lightbox__cap {
  flex-shrink: 0;
  text-align: center;
  color: #fff;
  padding: 0 24px 26px;
  min-height: 10px;
}
.de-lightbox__cap strong {
  display: block;
  font-family: var(--de-font-title);
  font-weight: 700;
  font-size: 18px;
}
.de-lightbox__desc {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
  max-width: 640px;
  margin-inline: auto;
}
.de-lightbox__count {
  font-family: var(--de-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}

/* Boutons lightbox (fermer + navigation). */
.de-lightbox__btn {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.de-lightbox__btn:hover { background: rgba(255,255,255,.14); }
.de-lightbox__btn svg { width: 24px; height: 24px; }
.de-lightbox__close { top: 18px; right: 18px; }
.de-lightbox__close:hover { transform: rotate(90deg); border-color: var(--de-red); }
.de-lightbox__nav { top: 50%; transform: translateY(-50%); }
.de-lightbox__nav:hover { transform: translateY(-50%) scale(1.08); }
.de-lightbox__prev { left: 18px; }
.de-lightbox__next { right: 18px; }

@media (max-width: 640px) {
  .de-lightbox__stage { padding: 64px 12px 12px; }
  .de-lightbox__btn { width: 44px; height: 44px; }
  .de-lightbox__nav { top: auto; bottom: 18px; transform: none; }
  .de-lightbox__nav:hover { transform: scale(1.08); }
  .de-lightbox__prev { left: 50%; margin-left: -54px; }
  .de-lightbox__next { right: 50%; margin-right: -54px; }
  .de-lightbox__cap { padding-bottom: 74px; }
}

/* ------------------------------------------ adresses e-mail obfusquées */
/* L'adresse n'est jamais écrite en clair dans le HTML : le "@" est posé par
   CSS et le mailto reconstitué au clic par main.js (data-mail en base64).
   Un aspirateur d'adresses ne trouve donc aucune chaîne exploitable. */

.de-mail {
  cursor: pointer;
}

.de-at::before {
  content: "@";
}

/* Empêche la sélection du libellé : un copier-coller ne doit pas produire
   une adresse valide (le "@" issu de ::before ne serait pas copié). */
.de-mail__v {
  user-select: none;
}

/* Rendu de lien quand l'adresse est posée dans du texte courant. */
.de-prose .de-mail {
  color: var(--de-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.de-prose .de-mail:hover {
  text-decoration: none;
}

/* Focus clavier : le span remplace un <a>, il doit rester repérable. */
.de-mail:focus-visible {
  outline: 2px solid var(--de-red);
  outline-offset: 3px;
  border-radius: 4px;
}