/* =========================================================
   Ardès — Thème CSS
   Styles décoratifs uniquement. Pas de layout essentiel :
   la structure vient des blocs Gutenberg natifs (Group,
   Columns, Cover, Image, Heading, Paragraph, Buttons).
   ========================================================= */

:root {
  --ardes-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ardes-border: #e3e4ea;
  --ardes-border-strong: #c9cbd4;
  --ardes-accent: #060c8a;
  --ardes-accent-hover: #1a209e;
  --ardes-accent-press: #04064d;
  --ardes-fg-strong: #0a0b10;
  --ardes-fg-muted: #3a3c4a;
  --ardes-fg-subtle: #787b8c;
  --ardes-sand-100: #f3f3f1;
  --ardes-ink-050: #f6f7f9;
  --ardes-navy-050: #f4f5fb;
  --ardes-navy-100: #e8e9f7;
  --ardes-navy-800: #060c8a;
  --ardes-navy-900: #04064d;
  /* Hauteur du header fixe — sert de base pour le full-page */
  --ardes-header-h: 80px;
}

* { box-sizing: border-box; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

/* ------- Typography helpers ------- */
.ardes-fraunces-em em,
.ardes-fraunces em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.ardes-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--ardes-fg-subtle);
}

/* ------- Eyebrow (style pastille, bubble) -------
   Format : "01 · À PROPOS" dans un cartouche blanc arrondi
   avec point noir au début. */
.ardes-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ardes-fg-strong);
  background: #ffffff;
  border: 1px solid var(--ardes-border);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  box-shadow: 0 1px 2px rgba(10,11,16,.04);
  width: fit-content;
}
.ardes-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ardes-fg-strong);
  display: inline-block;
  flex-shrink: 0;
}
/* Sur fonds beige (sand-100) : le cartouche blanc ressort bien. */
.ardes-hero .ardes-eyebrow,
.ardes-faq .ardes-eyebrow,
.ardes-showcase .ardes-eyebrow { /* OK */ }
/* Sur fonds foncés (navy CTA) : cartouche transparent + texte blanc */
.ardes-cta-section .ardes-eyebrow,
.ardes-contact .ardes-eyebrow.is-inverse {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: #ffffff;
  box-shadow: none;
}
.ardes-cta-section .ardes-eyebrow::before,
.ardes-contact .ardes-eyebrow.is-inverse::before {
  background: #ffffff;
}
.ardes-eyebrow.has-text-align-center { justify-content: center; }
.ardes-eyebrow.is-inverse { color: #fff; }

/* ------- Buttons (WP core button override) ------- */
.wp-block-button .wp-block-button__link {
  transition: background 240ms var(--ardes-ease), transform 240ms var(--ardes-ease), box-shadow 240ms var(--ardes-ease);
}
.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(6,12,138,.18), 0 2px 6px rgba(6,12,138,.12);
}
.wp-block-button.is-style-ardes-ghost .wp-block-button__link {
  background: transparent !important;
  color: var(--ardes-fg-strong) !important;
  border: 1px solid var(--ardes-border-strong) !important;
}
.wp-block-button.is-style-ardes-ghost .wp-block-button__link:hover {
  border-color: var(--ardes-fg-strong) !important;
  box-shadow: none;
}
.wp-block-button.is-style-ardes-inverse .wp-block-button__link {
  background: #ffffff !important;
  color: var(--ardes-navy-900) !important;
}

/* ------- Selection ------- */
::selection { background: var(--ardes-accent); color: #fff; }

/* =========================================================
   HEADER + SCROLL-REVEAL NAV
   État par défaut : menu invisible, header transparent.
   Scroll au-delà de 80 px (via JS qui ajoute .is-scrolled) :
   fond blanc flouté + menu apparaît.
   ========================================================= */
/* =========================================================
   Racine : aucun gap entre sections (ni root, ni dans main)
   Chaque section est full-bleed avec sa propre couleur de fond.
   ========================================================= */
html { overflow-x: clip; overflow-y: auto; scroll-padding-top: 76px; }
body { overflow-x: clip; background: #ffffff; margin: 0 !important; }

/* Smooth scroll UNIQUEMENT sur desktop (évite bug de bounce iOS) */
@media (hover: hover) and (pointer: fine) {
  html { scroll-behavior: smooth; }
}
@media (hover: none), (pointer: coarse) {
  html { scroll-behavior: auto !important; }
  /* Empêche WebKit de déclencher un scroll-to-anchor parasite sur bounce mobile */
  html { overscroll-behavior-y: none; }
  body { overscroll-behavior-y: none; }
}

/* =========================================================
   FULL-PAGE : UNIQUEMENT LE HERO
   Les autres sections suivent le flow naturel (pas de snap,
   pas de hauteur imposée) → plus de problèmes en grand écran.
   ========================================================= */
@media (min-width: 1025px) and (hover: hover) {
  /* Le hero occupe exactement la hauteur du viewport */
  main > section.alignfull.ardes-hero,
  main > .wp-block-group.alignfull.ardes-hero {
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(80px, 8vw, 120px) !important;
    padding-bottom: clamp(110px, 11vw, 170px) !important;
    position: relative;
  }
  /* Avec la barre d'admin WP (32px) : on compense pour rester plein écran */
  body.admin-bar main > section.alignfull.ardes-hero,
  body.admin-bar main > .wp-block-group.alignfull.ardes-hero {
    min-height: calc(100vh - 32px);
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
  }
  /* Garde le hero équilibré sur très grand écran (> 1800px) */
  .ardes-hero h1 { font-size: clamp(2rem, 3.8vw, 3.8rem) !important; }
  .ardes-hero-image .ardes-corner-pill img,
  .ardes-hero .ardes-corner-pill img {
    max-height: 72vh;
    width: 100%;
    object-fit: cover;
  }
  .ardes-hero .wp-block-columns { min-height: auto !important; }
}

/* Plafond max pour l'image hero sur ultra-large (évite la déformation) */
@media (min-width: 1600px) {
  .ardes-hero-image,
  .ardes-hero .ardes-corner-pill {
    max-width: 720px;
    margin-left: auto;
  }
}

/* =========================================================
   Scroll indicator "DÉCOUVRIR" (bas du hero — desktop)
   - ::after = texte "DÉCOUVRIR" + ligne grise statique
   - ::before = fill bleu animé qui descend à l'intérieur de la ligne
   On le dessine à l'intérieur des bornes du hero (overflow:hidden safe).
   ========================================================= */
@media (min-width: 881px) {
  main > section.alignfull.ardes-hero,
  .ardes-hero { position: relative; }
  /* Le texte "DÉCOUVRIR" */
  main > section.alignfull.ardes-hero::after,
  .ardes-hero::after {
    content: "DÉCOUVRIR";
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--ardes-fg-subtle);
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    z-index: 3;
  }
  /* La ligne grise statique (track) + fill bleu animé qui descend dedans.
     Dessinés via un seul pseudo (::before) = background double-layer. */
  main > section.alignfull.ardes-hero::before,
  .ardes-hero::before {
    content: "";
    position: absolute;
    bottom: 50px;
    left: 50%;
    width: 1px;
    height: 44px;
    transform: translateX(-50%);
    background:
      linear-gradient(to bottom, var(--ardes-navy-800) 0%, var(--ardes-navy-800) 100%) no-repeat,
      rgba(120,123,140,0.3);
    background-size: 1px 14px, 100% 100%;
    background-position: 0 -14px, 0 0;
    animation: ardesScrollHint 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
    z-index: 3;
  }
}
@keyframes ardesScrollHint {
  0%   { background-position: 0 -14px, 0 0; opacity: 0; }
  20%  { opacity: 1; }
  80%  { background-position: 0 44px, 0 0; opacity: 1; }
  100% { background-position: 0 44px, 0 0; opacity: 0; }
}
/* Sur tablette/mobile : le hero n'est pas forcé en 100vh
   → contenu + image + boutons rentrent naturellement */
@media (max-width: 1024px) {
  main > section.alignfull.ardes-hero,
  main > .wp-block-group.alignfull.ardes-hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
  }
}

.wp-site-blocks,
.wp-site-blocks > * {
  overflow: visible !important;
}
/* Tue TOUS les gaps verticaux au niveau root ET à l'intérieur du main */
.wp-site-blocks > * + *,
main.wp-block-group > * + *,
main.wp-block-group .wp-block-group.alignfull + .wp-block-group.alignfull {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
main.wp-block-group {
  margin: 0 !important;
  padding: 0 !important;
}
/* Chaque section alignfull occupe 100% de la largeur, sans marge */
main > .wp-block-group.alignfull,
main > section.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* =========================================================
   Header fixe (plus robuste que sticky)
   Au top : fond sable, menu caché. Au scroll : fond blanc, menu visible.
   ========================================================= */
.ardes-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 50;
  /* État par défaut (tout en haut) : fond beige qui fusionne avec le hero */
  background: var(--ardes-sand-100);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: background 320ms var(--ardes-ease),
              border-color 320ms var(--ardes-ease),
              box-shadow 320ms var(--ardes-ease),
              transform 320ms var(--ardes-ease);
}
/* Le header est fixe — on réserve sa hauteur sous lui pour toutes les
   pages (legal, services, blog...). Le hero front-page utilise un
   margin-top négatif pour "remonter" sous le header et fusionner
   visuellement (fond beige identique au header au top). */
body { padding-top: var(--ardes-header-h); }

@media (min-width: 1025px) and (hover: hover) {
  main > section.alignfull.ardes-hero:first-child,
  main > .wp-block-group.alignfull.ardes-hero:first-child,
  main > .ardes-hero:first-child {
    margin-top: calc(-1 * var(--ardes-header-h));
  }
}

/* Décalage avec la barre d'admin WP */
body.admin-bar .ardes-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar .ardes-header { top: 46px !important; }
}
/* (Plus besoin : l'ajustement admin-bar est intégré au bloc hero ci-dessus) */
/* Menu toujours visible */
.ardes-header .ardes-nav,
.ardes-header .wp-block-navigation {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 320ms var(--ardes-ease);
}
/* Scroll vers le haut depuis le bas : header revient avec fond blanc flouté */
.ardes-header.is-scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--ardes-border);
  box-shadow: 0 1px 2px rgba(10,11,16,0.04);
}
/* Scroll vers le bas : header slide hors du viewport */
.ardes-header.is-hidden {
  transform: translateY(-110%);
  box-shadow: none;
  pointer-events: none;
}

/* Style des liens du menu */
.ardes-header .wp-block-navigation .wp-block-navigation-item__content {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ardes-fg-strong);
  transition: color 200ms ease;
}
.ardes-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--ardes-accent);
}

/* =========================================================
   Submenu "Services" (dropdown)
   — toujours dans le DOM, caché par opacity/visibility
   — transition douce à l'ouverture
   — "pont" invisible de 14px pour que la souris puisse
     traverser sans perdre le hover
   — la carte visible est dessinée via ::before (sous le pont)
   ========================================================= */
.ardes-header .wp-block-navigation__submenu-container {
  position: absolute !important;
  top: 100% !important;
  margin: 0 !important;
  padding: 14px 8px 8px 8px !important;
  min-width: 240px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ardes-ease), visibility 220ms, transform 220ms var(--ardes-ease);
  pointer-events: none;
  display: block !important;
  z-index: 60;
}
/* La carte visible (blanche, arrondie, ombrée) */
.ardes-header .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border: 1px solid var(--ardes-border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(10,11,16,.08), 0 4px 10px rgba(10,11,16,.04);
  z-index: -1;
}

/* Ouvert au hover / focus de l'item parent (ou via l'état WP) */
.ardes-header .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.ardes-header .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container,
.ardes-header .has-child.is-menu-open > .wp-block-navigation__submenu-container,
.ardes-header .has-child--open > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.ardes-header .wp-block-navigation__submenu-container .wp-block-navigation-item { margin: 0 !important; }
.ardes-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: var(--ardes-fg-strong) !important;
  transition: background 180ms ease, color 180ms ease;
}
.ardes-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--ardes-navy-050) !important;
  color: var(--ardes-accent) !important;
}
.ardes-header .wp-block-navigation__submenu-icon {
  margin-left: 4px;
  fill: currentColor;
  transition: transform 220ms var(--ardes-ease);
}
.ardes-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}

/* Sur mobile, le burger fait son taf — on force l'affichage du conteneur */
@media (max-width: 1024px) {
  .ardes-header .wp-block-navigation {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* =====================================================
     Sous-menu "Services" dans l'overlay burger (mobile / iPad)
     Layout : [ Services ▾ ]———————————(ligne fine)
              [  sous-items éventuels  ]
     Chevron en pastille discrète juste à droite du texte.
     ===================================================== */

  /* 1) <li> Services : flex-wrap — texte + chevron sur la même ligne,
     le sous-menu passe en-dessous si ouvert. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    /* Border déplacée de .content vers <li> pour qu'elle traverse
       toute la ligne (au lieu d'être collée sous le texte seul) */
    border-bottom: 1px solid var(--ardes-border) !important;
  }
  /* Texte "Services" : taille naturelle, inline-block, pas de border propre */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    flex: 0 0 auto !important;
    display: inline-block !important;
    width: auto !important;
    max-width: max-content !important;
    padding: 18px 0 !important;
    margin: 0 !important;
    text-align: left !important;
    border-bottom: 0 !important;
    align-self: center !important;
  }
  /* Pastille chevron — juste à droite du texte, ronde, discrète */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
    position: static !important;
    flex: 0 0 auto !important;
    order: 2 !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid var(--ardes-border) !important;
    border-radius: 999px !important;
    color: var(--ardes-fg-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle:hover,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle:active {
    background: var(--ardes-navy-050) !important;
    color: var(--ardes-accent) !important;
    border-color: var(--ardes-accent) !important;
  }
  /* Chevron SVG : petit, fill uniforme, rotation à l'ouverture */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    fill: currentColor !important;
    transition: transform 240ms var(--ardes-ease) !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.is-menu-open > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
  .wp-block-navigation__responsive-container.is-menu-open [aria-expanded="true"] .wp-block-navigation__submenu-icon {
    transform: rotate(180deg) !important;
  }
  /* Sous-menu : 3e enfant flex, nouvelle ligne, pleine largeur */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    order: 3 !important;
    flex: 1 1 100% !important;
  }

  /* 2) Conteneur du sous-menu : CACHÉ par défaut (display:none),
        VISIBLE quand le li parent a .is-menu-open (toggle JS).
        — On repart de zéro sur les props héritées du desktop. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    display: none !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.is-menu-open > .wp-block-navigation__submenu-container {
    display: block !important;
    padding: 4px 0 12px 20px !important;
  }
  /* Pas de carte blanche ::before sur mobile */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before {
    display: none !important;
    content: none !important;
  }
  /* Items du sous-menu : plus petits, discrets */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 17px !important;
    font-weight: 400 !important;
    color: var(--ardes-fg-muted) !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--ardes-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-right: 0 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: transparent !important;
    color: var(--ardes-fg-strong) !important;
  }
  /* Social links (Facebook / Instagram) à la fin du menu mobile —
     ajoutés via ::after sur le dernier item avec pseudo + fallback JS.
     Version simple : on les affiche via un bloc social-links injecté
     par le thème dans le header pattern si besoin. Ici on laisse le
     footer pour les liens sociaux (toujours visible en scrollant). */
}

/* Dans le Site Editor (admin WP), on force l'affichage du menu
   pour que l'utilisateur puisse le voir et l'éditer */
.editor-styles-wrapper .ardes-header .wp-block-navigation,
.block-editor-block-list__layout .ardes-header .wp-block-navigation,
.is-root-container .ardes-header .wp-block-navigation,
body.wp-admin .ardes-header .wp-block-navigation {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* Logo header : hauteur fixée, largeur auto (préserve le ratio) */
.ardes-header .ardes-logo,
.ardes-header figure.ardes-logo {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex-shrink: 0;
  line-height: 0;
}
.ardes-header .ardes-logo img,
.ardes-header figure.ardes-logo img {
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 44px !important;
  min-width: 0 !important;
  object-fit: contain;
  display: block;
}

/* =========================================================
   MOBILE BURGER MENU (FIX)
   Ensures the Gutenberg navigation overlay is full-width,
   vertical, with close button, proper spacing.
   ========================================================= */
@media (max-width: 1024px) {
  /* Force le burger jusqu'à 1024px (inclut iPad portrait).
     Par défaut WP affiche le menu inline dès 600px, ce qui serre
     les items sur tablette. Ici on montre toujours le bouton burger. */
  .ardes-header .wp-block-navigation__responsive-container-open {
    display: flex !important;
    color: var(--ardes-fg-strong);
    padding: 8px;
  }
  .ardes-header .wp-block-navigation__responsive-container-open svg {
    width: 28px;
    height: 28px;
  }
  /* Masque la liste inline du menu tant que l'overlay n'est pas ouvert.
     (Quand `is-menu-open` est ajouté par WP, d'autres règles plus bas
     prennent le relais et transforment la container en modal plein écran.) */
  .ardes-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.has-modal-open) {
    display: none !important;
  }
  /* Même via media-query WP : on force la visibilité du bouton close */
  .ardes-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    display: flex !important;
  }
  /* Réduit le CTA "Demander un devis" sur iPad pour ne pas serrer le logo */
  .ardes-header .ardes-header-cta .wp-block-button__link {
    font-size: 13px !important;
    padding: 9px 14px !important;
  }
}

/* Mobile étroit : on cache le CTA en trop, seul logo + burger */
@media (max-width: 600px) {
  .ardes-header .ardes-header-cta { display: none !important; }
}

/* iPad / tablette (601–1024px) : on place le burger complètement à droite.
   Ordre visuel : [Logo] ——— [CTA] [Burger]. */
@media (min-width: 601px) and (max-width: 1024px) {
  .ardes-header .ardes-logo { order: 1 !important; }
  .ardes-header .ardes-header-cta { order: 2 !important; margin-left: auto !important; }
  .ardes-header .ardes-nav,
  .ardes-header .wp-block-navigation {
    order: 3 !important;
    margin-left: 12px !important;
    flex: 0 0 auto !important;
  }
}

/* Mobile overlay plein écran, items alignés à gauche, pleine largeur */
html .wp-block-navigation__responsive-container.is-menu-open,
html .wp-block-navigation__responsive-container.has-modal-open,
body .wp-block-navigation__responsive-container.is-menu-open,
body .wp-block-navigation__responsive-container.has-modal-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background: #ffffff !important;
  color: var(--ardes-fg-strong) !important;
  padding: 88px 28px 40px !important;
  margin: 0 !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  transform: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  text-align: left !important;
}

.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100% !important;
  text-align: left !important;
  display: block !important;
}

/* Typographie partagée par TOUS les items du menu mobile */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: 'Inter', sans-serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  color: var(--ardes-fg-strong) !important;
  text-decoration: none !important;
  text-align: left !important;
  padding: 18px 0 !important;
  margin: 0 !important;
}
/* Mise en page pleine largeur + border UNIQUEMENT pour les items
   sans sous-menu. Les items avec sous-menu (ex: Services) ont leur
   propre mise en page flex (chevron à droite du texte) + border sur <li>. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.has-child):not(.wp-block-navigation-submenu) > .wp-block-navigation-item__content {
  width: 100% !important;
  display: block !important;
  border-bottom: 1px solid var(--ardes-border) !important;
}

/* Bouton X : positionné + stylé UNIQUEMENT quand le menu est ouvert.
   Sans ça, WordPress laisse le bouton caché (display:none) en desktop. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  color: var(--ardes-fg-strong) !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 28px !important;
  height: 28px !important;
}

/* Désactive le scroll du body quand le menu est ouvert */
body.has-modal-open {
  overflow: hidden;
}

/* =========================================================
   HERO SECTION
   ========================================================= */
.ardes-hero-image { position: relative; }

.ardes-corner-pill img {
  border-radius: 220px 28px 220px 28px;
  box-shadow: 0 30px 80px rgba(10,11,16,.14), 0 10px 24px rgba(10,11,16,.06);
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
}

/* Floating badge — native Group block, icon via CSS pseudo-element */
.ardes-badge-float {
  position: absolute !important;
  left: -24px;
  bottom: 42px;
  background: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(10, 11, 16, 0.08), 0 4px 10px rgba(10, 11, 16, 0.04);
  border: 1px solid var(--ardes-border);
  gap: 12px !important;
  z-index: 2;
  min-width: auto !important;
  width: auto !important;
}
/* Badge icon — rendu sur tous les .ardes-badge-float, même sans has-ico-check */
.ardes-badge-float::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--ardes-navy-100);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11l3 3 7-7'/><path d='M20 12v5a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
.ardes-badge-label {
  font-size: 12px !important;
  color: var(--ardes-fg-subtle) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}
.ardes-badge-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ardes-fg-strong) !important;
  line-height: 1.25 !important;
}

/* Stats row */
.ardes-stat-number {
  font-size: 30px !important;
  font-weight: 500;
  color: var(--ardes-fg-strong) !important;
  letter-spacing: -0.02em;
  line-height: 1 !important;
  font-family: 'Inter', sans-serif;
}
.ardes-stat-label {
  font-size: 12px !important;
  color: var(--ardes-fg-subtle) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
}

/* =========================================================
   SERVICES — native Group blocks act as cards
   ========================================================= */
.ardes-service-card {
  background: #fff;
  border: 1px solid rgba(10,11,16,0.06);
  border-radius: 20px;
  padding: 28px !important;
  transition: transform 320ms var(--ardes-ease), box-shadow 320ms var(--ardes-ease);
  box-shadow: 0 2px 6px rgba(10, 11, 16, 0.03);
  height: 100%;
  position: relative;   /* nécessaire pour le stretched-link */
  cursor: pointer;      /* signale que la carte entière est cliquable */
}
.ardes-service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(10, 11, 16, 0.08), 0 4px 10px rgba(10, 11, 16, 0.04);
  border-color: transparent;
}
.ardes-service-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100%;
}

/* Service icons rendered via CSS ::after on the service-head group.
   Le fallback ::after sans classe garantit toujours un carré visible. */
.ardes-service-head::after {
  content: "";
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--ardes-navy-050);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  flex-shrink: 0;
  transition: background-color 320ms var(--ardes-ease), background-image 320ms var(--ardes-ease);
}
.ardes-service-card:hover .ardes-service-head::after {
  background-color: var(--ardes-accent);
}
.ardes-service-head.has-ico-bolt::after    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4.5 13.5h6L9 22l9.5-11.5h-6L13 2z'/></svg>"); }
.ardes-service-head.has-ico-home::after    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10l9-7 9 7v10a2 2 0 01-2 2h-4v-7H10v7H6a2 2 0 01-2-2V10z'/></svg>"); }
.ardes-service-head.has-ico-intercom::after{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><circle cx='12' cy='12' r='3'/><path d='M12 6h.01'/></svg>"); }
.ardes-service-head.has-ico-ev::after      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 21V6a2 2 0 012-2h6a2 2 0 012 2v15'/><path d='M5 21h14M17 10h2a2 2 0 012 2v4a2 2 0 01-2 2M11 8l-2 4h4l-2 4'/></svg>"); }
.ardes-service-head.has-ico-net::after     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='6' rx='1'/><rect x='3' y='14' width='18' height='6' rx='1'/><path d='M7 7h.01M7 17h.01'/></svg>"); }
/* On hover, swap the stroke color of the SVG to white */
.ardes-service-card:hover .ardes-service-head.has-ico-bolt::after    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2L4.5 13.5h6L9 22l9.5-11.5h-6L13 2z'/></svg>"); }
.ardes-service-card:hover .ardes-service-head.has-ico-home::after    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10l9-7 9 7v10a2 2 0 01-2 2h-4v-7H10v7H6a2 2 0 01-2-2V10z'/></svg>"); }
.ardes-service-card:hover .ardes-service-head.has-ico-intercom::after{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2'/><circle cx='12' cy='12' r='3'/><path d='M12 6h.01'/></svg>"); }
.ardes-service-card:hover .ardes-service-head.has-ico-ev::after      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 21V6a2 2 0 012-2h6a2 2 0 012 2v15'/><path d='M5 21h14M17 10h2a2 2 0 012 2v4a2 2 0 01-2 2M11 8l-2 4h4l-2 4'/></svg>"); }
.ardes-service-card:hover .ardes-service-head.has-ico-net::after     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='6' rx='1'/><rect x='3' y='14' width='18' height='6' rx='1'/><path d='M7 7h.01M7 17h.01'/></svg>"); }

/* Learn more link inside services */
.ardes-learn-more {
  font-size: 13px !important;
  font-weight: 500 !important;
}
.ardes-learn-more a {
  color: var(--ardes-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Pas de position:relative ici — sinon le ::before ci-dessous
     serait scope au lien et pas à la carte. */
}

/* Stretched link pattern : l'overlay invisible ::before sur le <a>
   remonte jusqu'au premier ancêtre positionné (= .ardes-service-card
   qui est en position:relative). Click n'importe où sur la carte
   = navigue vers l'URL du lien "En savoir plus". Un seul lien par
   carte → parfait pour SEO et accessibilité. */
.ardes-service-card .ardes-learn-more a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
}
.ardes-learn-more a::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  transition: transform 240ms var(--ardes-ease);
}
.ardes-service-card:hover .ardes-learn-more a::after { transform: translateX(4px); }

/* =========================================================
   SHOWCASE (version light — harmonisée avec Nos Métiers)
   ========================================================= */
.ardes-showcase-light { background: #ffffff !important; }
.ardes-showcase-card {
  background: #fff;
  border: 1px solid var(--ardes-border);
  border-radius: 20px;
  padding: 20px !important;
  transition: transform 320ms var(--ardes-ease), box-shadow 320ms var(--ardes-ease);
  box-shadow: 0 1px 2px rgba(10, 11, 16, 0.04);
  height: 100%;
}
.ardes-showcase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(10, 11, 16, 0.08);
}
.ardes-showcase-card .ardes-showcase-image {
  margin: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.ardes-showcase-card .ardes-showcase-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ardes-ease);
}
.ardes-showcase-card:hover .ardes-showcase-image img {
  transform: scale(1.04);
}

/* =========================================================
   FEATURES (pages services — 2×3 grid, même design que nos métiers)
   ========================================================= */
.ardes-feature {
  background: var(--ardes-ink-050);
  border-radius: 16px;
  padding: 24px !important;
  height: 100%;
  transition: background-color 240ms var(--ardes-ease);
}
.ardes-feature:hover { background: var(--ardes-navy-050); }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.ardes-testimonial {
  background: #fff;
  border: 1px solid var(--ardes-border);
  border-radius: 20px;
  padding: 32px !important;
  height: 100%;
}
.ardes-quote-mark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 56px !important;
  font-style: italic;
  font-weight: 300;
  line-height: 0.8 !important;
  color: var(--ardes-accent) !important;
  height: 28px;
}

/* =========================================================
   BLOG CARDS
   ========================================================= */
.ardes-blog-card {
  transition: transform 240ms var(--ardes-ease), box-shadow 240ms var(--ardes-ease);
  border: 1px solid var(--ardes-border);
}
.ardes-blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(10, 11, 16, 0.08);
}
.ardes-blog-card .wp-block-post-featured-image img {
  border-radius: 12px !important;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.ardes-blog-card .wp-block-post-date,
.ardes-blog-card .wp-block-post-date time {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ardes-blog-card .wp-block-post-title a {
  color: var(--ardes-fg-strong);
  text-decoration: none;
}
.ardes-blog-card .wp-block-post-title a:hover { color: var(--ardes-accent); }

/* =========================================================
   CTA SECTION (bannière intermédiaire)
   Force le navy foncé (même que le footer) sur TOUTES les bannières,
   peu importe la couleur stockée en base de données sur les pages
   existantes — fusion propre avec le footer sombre qui suit.
   ========================================================= */
/* Force le beige sur TOUTES les sections "ink-050" (gris clair)
   utilisées avant dans les patterns services — sans avoir à re-publier
   chaque page depuis l'éditeur. Le contenu DB garde l'ancienne couleur
   mais CSS la neutralise. */
.has-ink-050-background-color,
main .has-ink-050-background-color.has-background {
  background-color: var(--ardes-sand-100) !important;
}

.ardes-cta-section,
section.ardes-cta-section,
.wp-block-group.ardes-cta-section {
  background-color: var(--ardes-sand-100) !important;
  color: var(--ardes-fg-strong) !important;
}
.ardes-cta-section h2 { text-wrap: balance; color: var(--ardes-fg-strong) !important; }
.ardes-cta-section .ardes-eyebrow,
.ardes-cta-section p { color: var(--ardes-fg-muted) !important; }
/* Restaure les eyebrows standard sur fond beige CTA (plus d'inversion) */
.ardes-cta-section .ardes-eyebrow {
  background: #ffffff !important;
  border-color: var(--ardes-border) !important;
  color: var(--ardes-fg-strong) !important;
}
.ardes-cta-section .ardes-eyebrow::before { background: var(--ardes-fg-strong) !important; }
/* Bouton CTA : navy plein avec texte blanc */
.ardes-cta-section .wp-block-button .wp-block-button__link {
  background-color: var(--ardes-navy-800) !important;
  color: #ffffff !important;
}
.ardes-cta-section .wp-block-button .wp-block-button__link:hover {
  background-color: var(--ardes-navy-900) !important;
}

/* =========================================================
   5e avantage spécial (CTA réalisations)
   ========================================================= */
.ardes-trust-cta {
  border-top-color: var(--ardes-accent) !important;
}
.ardes-trust-cta a {
  color: var(--ardes-accent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* =========================================================
   Service hero (pages services — version éditoriale centrée)
   ========================================================= */
.ardes-service-hero .ardes-corner-pill img {
  aspect-ratio: 4/5;
  object-fit: cover;
}

.ardes-service-hero-editorial {
  text-align: center;
}
.ardes-service-hero-editorial .ardes-eyebrow {
  justify-content: center;
}

/* =========================================================
   Galerie photos des pages services
   ========================================================= */
.ardes-service-gallery .ardes-gallery {
  gap: 18px !important;
}
.ardes-service-gallery .wp-block-gallery figure.wp-block-image {
  border-radius: 16px !important;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.ardes-service-gallery .wp-block-gallery figure.wp-block-image img {
  border-radius: 16px !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ardes-ease);
}
.ardes-service-gallery .wp-block-gallery figure.wp-block-image:hover img {
  transform: scale(1.03);
}
@media (max-width: 780px) {
  .ardes-service-gallery .wp-block-gallery {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* =========================================================
   ORIGINAL SHOWCASE (dark cover version — gardé pour pattern)
   ========================================================= */
.ardes-showcase .wp-block-cover.ardes-showcase-slide {
  align-items: flex-end;
}
.ardes-showcase-slide .wp-block-cover__image-background {
  filter: brightness(0.9) contrast(1.06) saturate(0.95);
  transition: transform 1200ms var(--ardes-ease);
}
.ardes-showcase-slide:hover .wp-block-cover__image-background {
  transform: scale(1.03);
}
.ardes-showcase-slide .wp-block-cover__inner-container {
  width: 100%;
}
.ardes-showcase-kicker {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: rgba(255,255,255,.78) !important;
  line-height: 1.4 !important;
}
.ardes-showcase-kicker mark { padding-right: 8px; }
.ardes-showcase-tag {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: rgba(255,255,255,.62) !important;
  text-transform: uppercase;
}
.ardes-showcase-title { color: #fff !important; text-wrap: balance; }
.ardes-showcase-slide p { color: rgba(255,255,255,.82); }

/* =========================================================
   REALISATIONS — native Cover blocks inside CSS grid
   ========================================================= */
.ardes-realisations-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 240px;
  gap: 18px;
}
.ardes-realisations-grid .ardes-tile.span-2 { grid-column: span 2; }
.ardes-realisations-grid .ardes-tile.span-4 { grid-column: span 4; }
.ardes-realisations-grid .ardes-tile.span-6 { grid-column: span 6; }
.ardes-realisations-grid .ardes-tile.row-2  { grid-row: span 2; }
@media (max-width: 1024px) {
  .ardes-realisations-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .ardes-realisations-grid .ardes-tile {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 280px;
  }
}

/* Tile visuals: gradient overlay sharpening bottom for text readability */
.ardes-tile.wp-block-cover {
  overflow: hidden;
  height: 100%;
  /* Neutralise toute max-width venant d'un éventuel layout constrained du parent */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force les enfants directs de la grille à remplir leur cellule */
.ardes-realisations-grid > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* CF7 wrap: le shortcode doit prendre toute la largeur de la colonne */
.ardes-contact-form-wrap > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.ardes-contact-form-wrap .wp-block-shortcode {
  margin: 0;
}
.ardes-tile .wp-block-cover__image-background {
  transition: transform 1200ms var(--ardes-ease);
}
.ardes-tile:hover .wp-block-cover__image-background {
  transform: scale(1.04);
}
.ardes-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 45%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.ardes-tile .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 4px;
}
.ardes-tile-tag {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: rgba(255,255,255,.9) !important;
}
.ardes-tile-title {
  color: #fff !important;
  letter-spacing: -0.01em;
}

/* =========================================================
   AVANTAGES — native Group blocks (trust items)
   ========================================================= */
.ardes-trust-item {
  border-top: 1px solid var(--ardes-border-strong);
  padding-top: 20px !important;
  padding-right: 8px !important;
}
.ardes-trust-head {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  margin-bottom: 10px;
}

/* =========================================================
   LIGHTBOX — Visionneuse photos Réalisations
   ========================================================= */
.ardes-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 16, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms var(--ardes-ease), visibility 280ms;
}
.ardes-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.ardes-lightbox-open { overflow: hidden; }

.ardes-lightbox__stage {
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ardes-lightbox__img {
  max-width: 92vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
  transition: opacity 240ms ease;
}
.ardes-lightbox__close,
.ardes-lightbox__prev,
.ardes-lightbox__next {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-radius: 999px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 180ms ease, transform 180ms ease;
}
.ardes-lightbox__close:hover,
.ardes-lightbox__prev:hover,
.ardes-lightbox__next:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.05);
}
.ardes-lightbox__close { top: 24px; right: 24px; }
.ardes-lightbox__prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.ardes-lightbox__next  { right: 24px; top: 50%; transform: translateY(-50%); }
.ardes-lightbox__prev:hover { transform: translateY(-50%) scale(1.05); }
.ardes-lightbox__next:hover { transform: translateY(-50%) scale(1.05); }

.ardes-lightbox__meta {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.ardes-lightbox__title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.ardes-lightbox__counter {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* Cursor pointer sur les cartes cliquables */
.ardes-realisation-img[data-gallery] { cursor: zoom-in; }

/* Mobile */
@media (max-width: 640px) {
  .ardes-lightbox__close { top: 16px; right: 16px; width: 44px; height: 44px; }
  .ardes-lightbox__prev  { left: 12px; width: 44px; height: 44px; }
  .ardes-lightbox__next  { right: 12px; width: 44px; height: 44px; }
  .ardes-lightbox__meta  { bottom: 20px; font-size: 12px; }
}

/* =========================================================
   PAGES LOCALES SEO (service × ville)
   ========================================================= */
.ardes-local-page .ardes-breadcrumb a {
  color: var(--ardes-fg-muted);
  text-decoration: none;
  transition: color 180ms ease;
}
.ardes-local-page .ardes-breadcrumb a:hover { color: var(--ardes-accent); }
.ardes-local-page .ardes-breadcrumb strong {
  font-weight: 600;
  color: var(--ardes-fg-strong);
}
.ardes-local-page h1 { text-wrap: balance; }
.ardes-local-page h2 { text-wrap: balance; }
.ardes-local-page h3 { color: var(--ardes-fg-strong); }
.ardes-local-page .wp-block-columns { margin-bottom: 24px; }

/* =========================================================
   PAGE RÉALISATIONS — grille pastilles circulaires
   Passage en CSS Grid explicite avec auto-rows + chaque carte
   en flex-column pour éviter tout chevauchement.
   ========================================================= */
.ardes-realisations-page .ardes-realisations-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: auto !important;
  gap: clamp(48px, 6vw, 96px) clamp(24px, 3vw, 48px) !important;
  align-items: start !important;
}
@media (max-width: 880px) {
  .ardes-realisations-page .ardes-realisations-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px 24px !important;
  }
}
@media (max-width: 520px) {
  .ardes-realisations-page .ardes-realisations-grid {
    grid-template-columns: 1fr !important;
    gap: 56px !important;
  }
}
.ardes-realisation-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 20px;
  transition: transform 320ms var(--ardes-ease);
  position: relative;
  z-index: 1;
}
.ardes-realisation-card:hover { transform: translateY(-4px); }
.ardes-realisation-card .ardes-realisation-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 20px 40px rgba(10,11,16,.10), 0 6px 16px rgba(10,11,16,.04);
  flex: 0 0 auto;
}
.ardes-realisation-card .ardes-realisation-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ═════════════════════════════════════════════════════════════
   GALERIE par carte — plug-and-play via bloc Gutenberg natif.
   On n'affiche QUE la première image (en rond comme une pastille)
   et on cache les autres. Elles restent dans le DOM et sont
   accessibles via la lightbox (JS lit toutes les img de la galerie).
   ═════════════════════════════════════════════════════════════ */
.ardes-realisation-card .ardes-realisation-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 20px 40px rgba(10,11,16,.10), 0 6px 16px rgba(10,11,16,.04);
  flex: 0 0 auto;
  display: block !important;
  gap: 0 !important;
}
/* Cache TOUS les enfants de la galerie par défaut */
.ardes-realisation-card .ardes-realisation-gallery > * {
  display: none !important;
}
/* Sauf le premier enfant = l'image de couverture */
.ardes-realisation-card .ardes-realisation-gallery > *:first-child {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: none !important;
  flex: none !important;
}
.ardes-realisation-card .ardes-realisation-gallery > *:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block;
}
/* Cache le pseudo-compteur "+3" que Gutenberg ajoute parfois */
.ardes-realisation-card .ardes-realisation-gallery .blocks-gallery-caption,
.ardes-realisation-card .ardes-realisation-gallery figcaption {
  display: none !important;
}
.ardes-realisation-card .ardes-realisation-meta {
  display: inline-block;
  background: #ffffff;
  border: 1px solid var(--ardes-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardes-fg-muted);
  margin: 0 auto !important;
  box-shadow: 0 2px 4px rgba(10,11,16,.04);
  flex: 0 0 auto;
}
.ardes-realisation-card .ardes-realisation-title {
  color: var(--ardes-fg-strong);
  margin: 0 !important;
  flex: 0 0 auto;
}

/* =========================================================
   À PROPOS / NOTRE HISTOIRE — layout 2 colonnes magazine
   ========================================================= */
.ardes-apropos .ardes-apropos-copy h2 { text-wrap: balance; }
.ardes-apropos .ardes-apropos-kicker {
  color: var(--ardes-fg-strong);
  border-top: 1px solid var(--ardes-border);
  padding-top: 24px;
}
.ardes-apropos .ardes-apropos-photo {
  position: relative;
}
.ardes-apropos .ardes-apropos-img img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 40px 80px rgba(10,11,16,.10), 0 10px 24px rgba(10,11,16,.06);
}
.ardes-apropos .ardes-apropos-badge {
  position: absolute !important;
  top: 28px;
  right: 28px;
  background: #fff;
  border: 1px solid var(--ardes-border);
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 0 8px 20px rgba(10,11,16,.08);
}
@media (max-width: 880px) {
  .ardes-apropos .wp-block-columns { flex-direction: column !important; }
  .ardes-apropos .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
  .ardes-apropos .ardes-apropos-img img { aspect-ratio: 3/4; }
}

/* =========================================================
   FAQ — layout 2 colonnes éditorial
   Col gauche : titre + intro sticky en scroll
   Col droite : liste des questions (details)
   ========================================================= */
.ardes-faq .ardes-faq-intro {
  position: sticky;
  top: calc(var(--ardes-header-h) + 24px);
  align-self: start;
}
.ardes-faq .ardes-faq-intro .ardes-eyebrow { text-align: left; }
.ardes-faq .ardes-faq-intro h2 { text-wrap: balance; }
.ardes-faq .ardes-faq-intro a {
  color: var(--ardes-accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.ardes-faq .ardes-faq-intro a:hover { border-color: transparent; }

/* Sur tablette / mobile : une seule colonne empilée */
@media (max-width: 880px) {
  .ardes-faq .ardes-faq-intro {
    position: static;
    top: auto;
    margin-bottom: 40px;
  }
  .ardes-faq .wp-block-columns {
    flex-direction: column !important;
  }
  .ardes-faq .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* =========================================================
   FAQ — native wp:details blocks
   ========================================================= */
.ardes-faq .wp-block-details {
  border-bottom: 1px solid var(--ardes-border);
  padding: 0;
  margin: 0 !important;
}
.ardes-faq .wp-block-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ardes-fg-strong);
}
.ardes-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.ardes-faq .wp-block-details > summary::after {
  content: '';
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='black' stroke-width='1'><line x1='2' y1='13' x2='24' y2='13'/><line x1='13' y1='2' x2='13' y2='24'/></svg>") center/contain no-repeat;
  flex-shrink: 0;
  transition: transform 320ms var(--ardes-ease);
}
.ardes-faq .wp-block-details[open] > summary::after {
  transform: rotate(45deg);
}
.ardes-faq .wp-block-details > p {
  padding: 0 0 28px;
  color: var(--ardes-fg-muted);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 720px;
  margin: 0;
}

/* =========================================================
   CONTACT SECTION
   ========================================================= */
.ardes-contact { position: relative; overflow: hidden; margin-bottom: 0 !important; }
.ardes-contact + .wp-block-template-part,
.ardes-contact + footer,
main + footer.ardes-footer { margin-top: 0 !important; }
.ardes-contact::before {
  content: '';
  position: absolute;
  right: -120px;
  top: -80px;
  width: 560px;
  height: 560px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23060c8a'><path d='M13 2L4.5 13.5h6L9 22l9.5-11.5h-6L13 2z'/></svg>") center/contain no-repeat;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}
.ardes-contact > * { position: relative; z-index: 1; }
/* Fond blanc : texte foncé par défaut */
.ardes-contact h2,
.ardes-contact h3,
.ardes-contact h4 { color: var(--ardes-fg-strong); }
.ardes-contact p { color: var(--ardes-fg-muted); }

/* Contact rows — native Group blocks */
.ardes-contact-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}
/* Contact-row icons: pastilles blanches avec icône navy (fond beige) */
.ardes-contact-row::before {
  content: "";
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid var(--ardes-border);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(10,11,16,.04);
}
.ardes-contact-row.has-ico-tel::before   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z'/></svg>"); }
.ardes-contact-row.has-ico-mail::before  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M22 6l-10 7L2 6'/></svg>"); }
.ardes-contact-row.has-ico-map::before   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }
.ardes-contact-row.has-ico-clock::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>"); }

.ardes-contact-label {
  font-size: 11px !important;
  color: var(--ardes-fg-muted) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}
.ardes-contact-value {
  font-size: 16px !important;
  color: var(--ardes-fg-strong) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.ardes-contact-value a {
  color: var(--ardes-fg-strong) !important;
  text-decoration: none;
  font-weight: 500;
}
.ardes-contact-value a:hover {
  color: var(--ardes-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   MINI-CARTE ATELIER (section Contact)
   ========================================================= */
.ardes-atelier-map {
  margin: 40px 0 0 !important;
}
.ardes-atelier-map__link {
  display: block;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ardes-border);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(10,11,16,.06), 0 2px 6px rgba(10,11,16,.03);
  transition: transform 240ms var(--ardes-ease), box-shadow 240ms var(--ardes-ease);
}
.ardes-atelier-map__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(10,11,16,.10), 0 4px 10px rgba(10,11,16,.04);
}
.ardes-atelier-map__link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 25/14;
  object-fit: cover;
}
.ardes-atelier-map__cta {
  display: block;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ardes-accent);
  background: #ffffff;
  border-top: 1px solid var(--ardes-border);
  letter-spacing: -0.005em;
}

/* =========================================================
   CONTACT FORM 7 — fond beige, texte foncé, champs blancs
   ========================================================= */
.ardes-contact-form-wrap {
  background: #ffffff;
  border: 1px solid var(--ardes-border);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px) !important;
  box-shadow: 0 20px 40px rgba(10,11,16,.06), 0 4px 10px rgba(10,11,16,.04);
}

/* Placeholder text shown before CF7 shortcode resolves (in editor) */
.ardes-contact-form-wrap .wp-block-shortcode {
  color: var(--ardes-fg-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  margin: 0;
}

/* CF7 form reset + match design */
.ardes-contact-form-wrap .wpcf7 form {
  margin: 0;
  padding: 0;
}
.ardes-contact-form-wrap .wpcf7 p {
  margin: 0 0 16px;
  color: var(--ardes-fg-strong);
}
.ardes-contact-form-wrap .wpcf7 label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ardes-fg-strong);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ardes-contact-form-wrap .wpcf7-form-control-wrap { display: block; width: 100%; }
.ardes-contact-form-wrap .wpcf7 input[type="text"],
.ardes-contact-form-wrap .wpcf7 input[type="email"],
.ardes-contact-form-wrap .wpcf7 input[type="tel"],
.ardes-contact-form-wrap .wpcf7 input[type="url"],
.ardes-contact-form-wrap .wpcf7 input[type="number"],
.ardes-contact-form-wrap .wpcf7 select,
.ardes-contact-form-wrap .wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--ardes-border);
  color: var(--ardes-fg-strong);
  font-family: inherit;
  font-size: 15px;
  padding: 13px 14px;
  border-radius: 10px;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  outline: none;
}
.ardes-contact-form-wrap .wpcf7 input::placeholder,
.ardes-contact-form-wrap .wpcf7 textarea::placeholder {
  color: var(--ardes-fg-subtle);
}
.ardes-contact-form-wrap .wpcf7 input:focus,
.ardes-contact-form-wrap .wpcf7 select:focus,
.ardes-contact-form-wrap .wpcf7 textarea:focus {
  border-color: var(--ardes-accent);
  box-shadow: 0 0 0 3px rgba(6,12,138,0.08);
}
.ardes-contact-form-wrap .wpcf7 select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060c8a' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}
.ardes-contact-form-wrap .wpcf7 .wpcf7-submit {
  margin-top: 8px;
  width: 100%;
  padding: 16px 24px;
  border-radius: 999px;
  border: none;
  background: var(--ardes-navy-800);
  color: #ffffff;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: transform 240ms var(--ardes-ease), box-shadow 240ms var(--ardes-ease);
}
.ardes-contact-form-wrap .wpcf7 .wpcf7-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(6,12,138,0.24);
}
.ardes-contact-form-wrap .wpcf7-not-valid-tip {
  color: #c03030;
  font-size: 12px;
  margin-top: 6px;
}
.ardes-contact-form-wrap .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  background: var(--ardes-navy-050);
  border-color: var(--ardes-border);
  color: var(--ardes-fg-strong);
}
.ardes-contact-form-wrap .wpcf7 .wpcf7-list-item {
  margin: 0 16px 0 0;
}

/* Mise en forme 2 colonnes pour Nom + Email si le formulaire CF7
   utilise la classe .ardes-form-row (voir instructions admin). */
.ardes-contact-form-wrap .ardes-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.ardes-contact-form-wrap .ardes-form-row > * {
  margin: 0 !important;
}
@media (max-width: 600px) {
  .ardes-contact-form-wrap .ardes-form-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
/* Footer blanc — design 4 colonnes, plus léger sur mobile */
.ardes-footer {
  background: #ffffff !important;
  color: var(--ardes-fg-strong);
}
.ardes-footer a {
  color: var(--ardes-fg-strong);
  text-decoration: none;
  transition: color 180ms ease;
}
.ardes-footer a:hover { color: var(--ardes-accent); }
.ardes-footer .ardes-footer-heading {
  color: var(--ardes-fg-muted) !important;
  margin: 0 !important;
}
.ardes-footer .ardes-footer-list {
  list-style: none;
  padding: 0;
}
.ardes-footer .ardes-footer-list li {
  margin: 0;
  padding: 0;
  border: 0;
}
.ardes-footer .ardes-footer-list li a {
  display: inline-block;
  padding: 2px 0;
}
.ardes-footer .ardes-footer-contact a { color: var(--ardes-fg-strong); font-weight: 500; }
.ardes-footer .ardes-footer-contact a:hover { color: var(--ardes-accent); }
.ardes-footer .ardes-footer-bottom { border-top: 1px solid var(--ardes-border); }
.ardes-footer .ardes-footer-bottom p { margin: 0; }
.ardes-footer .ardes-footer-logo img {
  filter: none !important;
  height: auto !important;
  max-height: none !important;
}

/* MOBILE : version ultra-compacte et épurée.
   On ne garde que : logo + citation courte + 2 liens légaux + social.
   Les colonnes Expertises/Maison/Contact sont masquées pour alléger. */
@media (max-width: 760px) {
  .ardes-footer {
    padding-top: 48px !important;
    padding-bottom: 32px !important;
  }
  .ardes-footer .wp-block-columns {
    flex-direction: column !important;
    gap: 28px !important;
  }
  .ardes-footer .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    text-align: center;
  }
  /* Garde uniquement la brand column (1ère) et la contact column (4ème) */
  .ardes-footer .wp-block-columns > .wp-block-column:nth-child(2),
  .ardes-footer .wp-block-columns > .wp-block-column:nth-child(3) {
    display: none !important;
  }
  .ardes-footer .ardes-footer-logo img { margin: 0 auto; }
  .ardes-footer .ardes-footer-contact,
  .ardes-footer .ardes-footer-heading,
  .ardes-footer .ardes-footer-bottom p { text-align: center !important; }
  .ardes-footer .ardes-footer-social { justify-content: center !important; }
  .ardes-footer .ardes-footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
}

/* Social links footer (Facebook / Instagram) */
.ardes-footer .wp-block-social-links.ardes-footer-social {
  gap: 10px !important;
  margin: 0 !important;
}
.ardes-footer .wp-block-social-links.ardes-footer-social .wp-block-social-link {
  background: rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  transition: background 200ms ease, transform 200ms ease;
}
.ardes-footer .wp-block-social-links.ardes-footer-social .wp-block-social-link:hover {
  background: rgba(255,255,255,.18) !important;
  transform: translateY(-1px);
}
.ardes-footer .wp-block-social-links.ardes-footer-social .wp-block-social-link a {
  color: #fff !important;
  fill: #fff !important;
  padding: 8px !important;
}
.ardes-footer .wp-block-social-links.ardes-footer-social svg {
  width: 18px;
  height: 18px;
}

/* Footer mobile + tablette : empilage propre, centré */
@media (max-width: 1024px) {
  .ardes-footer .wp-block-group.alignwide {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    text-align: center;
  }
  .ardes-footer .wp-block-group.alignwide > .wp-block-group {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 14px !important;
  }
  .ardes-footer .wp-block-group.alignwide > .wp-block-group:last-child {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px 20px !important;
  }
  .ardes-footer p {
    text-align: center !important;
    margin: 0 !important;
  }
}
/* Logo footer : hauteur fixée, largeur auto (préserve le ratio) */
.ardes-footer .ardes-footer-logo,
.ardes-footer figure.ardes-footer-logo {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex-shrink: 0;
  line-height: 0;
}
.ardes-footer .ardes-footer-logo img,
.ardes-footer figure.ardes-footer-logo img {
  filter: brightness(0) invert(1);
  height: 36px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 36px !important;
  min-width: 0 !important;
  object-fit: contain;
  display: block;
}

/* =========================================================
   MISC
   ========================================================= */
.ardes-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ardes-fg-strong);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--ardes-border-strong);
  padding-bottom: 4px;
  transition: border-color 200ms ease;
}
.ardes-arrow-link::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/contain no-repeat;
  transition: transform 200ms ease;
}
.ardes-arrow-link:hover { border-color: var(--ardes-fg-strong); }
.ardes-arrow-link:hover::after { transform: translateX(3px); }

/* Smooth-scroll for anchor navigation */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* Column layout fixes */
@media (max-width: 1024px) {
  .ardes-badge-float { left: 12px !important; bottom: 12px; }
  .ardes-contact .wp-block-columns .wp-block-column { flex-basis: 100% !important; }
}

/* =========================================================
   Social links dans l'overlay burger mobile (injectés via JS)
   Cachés sur desktop, affichés en bas de l'overlay en mobile.
   ========================================================= */
.ardes-mobile-social { display: none; }

@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container.is-menu-open .ardes-mobile-social {
    display: flex;
    gap: 12px;
    padding: 32px 0 8px;
    margin-top: 24px;
    border-top: 1px solid var(--ardes-border);
  }
  .ardes-mobile-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ardes-border);
    border-radius: 999px;
    color: var(--ardes-fg-strong);
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }
  .ardes-mobile-social__link:hover,
  .ardes-mobile-social__link:active {
    background: var(--ardes-navy-050);
    color: var(--ardes-accent);
    border-color: var(--ardes-accent);
    transform: translateY(-1px);
  }
  .ardes-mobile-social__link svg {
    width: 20px;
    height: 20px;
    display: block;
  }
}

/* =========================================================
   OVERRIDE FINAL — Sous-menu "Services" dans l'overlay burger
   Placé à la fin du fichier pour garantir qu'il l'emporte sur
   toute autre règle (cascade + spécificité html body).
   ========================================================= */
@media (max-width: 1024px) {
  /* Cible à la fois .has-child ET .wp-block-navigation-submenu
     (certaines versions de WP utilisent l'une ou l'autre).
     Prefixe html body pour bumper la spécificité au-dessus de tout. */

  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu,
  html body .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    border-bottom: 1px solid var(--ardes-border) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* Texte "Services" : largeur naturelle */
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > a.wp-block-navigation-item__content,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu > a.wp-block-navigation-item__content,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu > .wp-block-navigation-item__content {
    order: 1 !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
    width: auto !important;
    max-width: max-content !important;
    padding: 18px 0 !important;
    margin: 0 !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  /* Chevron pastille */
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > button.wp-block-navigation-submenu__toggle,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu > button.wp-block-navigation-submenu__toggle,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle {
    position: static !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid var(--ardes-border) !important;
    border-radius: 999px !important;
    color: var(--ardes-fg-muted) !important;
    cursor: pointer !important;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle:hover,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle:hover,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle:active,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle:active {
    background: var(--ardes-navy-050) !important;
    color: var(--ardes-accent) !important;
    border-color: var(--ardes-accent) !important;
  }

  /* SVG chevron : petit et centré dans la pastille */
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    fill: currentColor !important;
  }

  /* Sous-menu : 3e enfant flex, nouvelle ligne, pleine largeur */
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container,
  html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* =========================================================
   ==========================================================
   ===  PREMIUM MOTION LAYER (v3.5)                       ===
   ==========================================================
   Additions only — nothing above is overwritten.
   Drives assets/js/animations.js :
     - [data-ardes-reveal="up|left|right|scale|blur"]
     - [data-ardes-stagger] with --ardes-stagger-i
     - .ardes-hero.is-entered  (word-by-word + image mask-wipe)
     - .is-pressed             (tactile feedback on buttons)
     - .ardes-header.is-past-hero (stronger backdrop)
   All effects are opt-out via prefers-reduced-motion.
   ========================================================= */

/* --- Motion tokens -------------------------------------- */
:root {
  --ardes-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ardes-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ardes-ease-spring: cubic-bezier(0.34, 1.24, 0.64, 1);
  --ardes-reveal-dur:    900ms;
  --ardes-reveal-offset: 34px;
  --ardes-stagger-step:  70ms;
  --ardes-word-step:     55ms;
}

/* ---------------------------------------------------------
   1. REVEAL — base + directional variants
   --------------------------------------------------------- */
.ardes-anim-ready [data-ardes-reveal],
.ardes-anim-ready [data-ardes-stagger] {
  opacity: 0;
  transform: translate3d(0, var(--ardes-reveal-offset), 0);
  transition:
    opacity var(--ardes-reveal-dur) var(--ardes-ease-out),
    transform var(--ardes-reveal-dur) var(--ardes-ease-out),
    filter var(--ardes-reveal-dur) var(--ardes-ease-out);
  will-change: opacity, transform;
}
.ardes-anim-ready [data-ardes-reveal="left"]  { transform: translate3d(-40px, 0, 0); }
.ardes-anim-ready [data-ardes-reveal="right"] { transform: translate3d( 40px, 0, 0); }
.ardes-anim-ready [data-ardes-reveal="scale"] { transform: translate3d(0, 34px, 0) scale(0.94); }
.ardes-anim-ready [data-ardes-reveal="blur"]  { transform: translate3d(0, 20px, 0); filter: blur(10px); }

.ardes-anim-ready [data-ardes-stagger] {
  --ardes-stagger-i: 0;
  transition-delay: calc(var(--ardes-stagger-i, 0) * var(--ardes-stagger-step));
}

.ardes-anim-ready [data-ardes-reveal].is-visible,
.ardes-anim-ready [data-ardes-stagger].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
  will-change: auto;
}

/* ---------------------------------------------------------
   2. HERO ENTRANCE SEQUENCE
   --------------------------------------------------------- */
/* Word-by-word H1 */
.ardes-anim-ready .ardes-hero h1 .ardes-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 110%, 0) rotate(3deg);
  transition:
    opacity 900ms var(--ardes-ease-out),
    transform 1000ms var(--ardes-ease-spring);
  transition-delay: calc(260ms + var(--ardes-word-i, 0) * var(--ardes-word-step));
  will-change: transform, opacity;
}
/* Critical: wrap masks rotation overflow — we keep .ardes-word inline-block
   but clip at the heading level so translate-y from 110% looks clean. */
.ardes-anim-ready .ardes-hero h1 {
  overflow: hidden;
  padding-bottom: 0.12em; /* room for descenders + rotation */
}
.ardes-anim-ready .ardes-hero.is-entered h1 .ardes-word {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0);
  will-change: auto;
}

/* Generic hero items (eyebrow, paragraph, buttons, stats, image) */
.ardes-anim-ready .ardes-hero .ardes-hero-item {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 900ms var(--ardes-ease-out),
    transform 900ms var(--ardes-ease-out),
    clip-path 1100ms var(--ardes-ease-out);
  transition-delay: calc(160ms + var(--ardes-hero-i, 0) * 90ms);
  will-change: opacity, transform;
}
.ardes-anim-ready .ardes-hero.is-entered .ardes-hero-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Hero image : mask-wipe from bottom, with gentle scale settle */
.ardes-anim-ready .ardes-hero .ardes-hero-image-wrap {
  opacity: 1; /* container always visible; the image does the reveal */
}
.ardes-anim-ready .ardes-hero .ardes-hero-image-wrap .ardes-corner-pill {
  overflow: hidden;
}
.ardes-anim-ready .ardes-hero .ardes-hero-image-wrap .ardes-corner-pill img {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 30px, 0) scale(1.08);
  transition:
    clip-path 1200ms var(--ardes-ease-out),
    transform 1400ms var(--ardes-ease-out);
  transition-delay: 420ms;
  will-change: clip-path, transform;
}
.ardes-anim-ready .ardes-hero.is-entered .ardes-hero-image-wrap .ardes-corner-pill img {
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* Hero badge pops in after the image reveal completes */
.ardes-anim-ready .ardes-hero .ardes-badge-float {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.92);
  transition:
    opacity 700ms var(--ardes-ease-out),
    transform 700ms var(--ardes-ease-spring);
  transition-delay: 980ms;
  will-change: opacity, transform;
}
.ardes-anim-ready .ardes-hero.is-entered .ardes-badge-float {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* Hero scroll hint appears last */
.ardes-anim-ready .ardes-hero::before,
.ardes-anim-ready .ardes-hero::after {
  transition: opacity 800ms var(--ardes-ease-out);
  opacity: 0;
}
.ardes-anim-ready .ardes-hero.is-entered::before,
.ardes-anim-ready .ardes-hero.is-entered::after {
  opacity: 1;
  transition-delay: 1400ms;
}

/* ---------------------------------------------------------
   3. REFINED BUTTONS & CTA SHINE
   --------------------------------------------------------- */
.wp-block-button .wp-block-button__link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background 260ms var(--ardes-ease-out),
    color 260ms var(--ardes-ease-out),
    transform 340ms var(--ardes-ease-spring),
    box-shadow 420ms var(--ardes-ease-out),
    border-color 260ms var(--ardes-ease-out) !important;
}
/* Diagonal shine that sweeps across on hover (primary buttons only) */
.wp-block-button:not(.is-style-ardes-ghost):not(.is-style-ardes-inverse) .wp-block-button__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 700ms var(--ardes-ease-out);
  pointer-events: none;
  z-index: 0;
}
.wp-block-button:not(.is-style-ardes-ghost):not(.is-style-ardes-inverse) .wp-block-button__link:hover::before {
  transform: translateX(120%);
}
.wp-block-button .wp-block-button__link > * { position: relative; z-index: 1; }

.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 20px 48px rgba(6, 12, 138, 0.26),
    0 4px 12px rgba(6, 12, 138, 0.16);
}
.wp-block-button .wp-block-button__link:active,
.wp-block-button .wp-block-button__link.is-pressed {
  transform: translateY(0) scale(0.97);
  transition-duration: 120ms;
  box-shadow:
    0 6px 16px rgba(6, 12, 138, 0.14),
    0 1px 3px rgba(6, 12, 138, 0.08);
}
.wp-block-button.is-style-ardes-ghost .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 11, 16, 0.06);
  border-color: var(--ardes-fg-strong) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}
.wp-block-button.is-style-ardes-inverse .wp-block-button__link:hover {
  box-shadow: 0 20px 48px rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 0, 0, 0.20);
}

/* Header CTA gets a soft glow ring on hover */
.ardes-header .wp-block-button__link:hover {
  box-shadow:
    0 0 0 4px rgba(6, 12, 138, 0.10),
    0 12px 28px rgba(6, 12, 138, 0.22);
}

/* ---------------------------------------------------------
   4. NAV MICRO-INTERACTIONS
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .ardes-header .wp-block-navigation .wp-block-navigation-item__content {
    position: relative;
  }
  .ardes-header .wp-block-navigation .wp-block-navigation-item:not(.has-child) > .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 360ms var(--ardes-ease-out);
  }
  .ardes-header .wp-block-navigation .wp-block-navigation-item:not(.has-child):hover > .wp-block-navigation-item__content::after,
  .ardes-header .wp-block-navigation .wp-block-navigation-item:not(.has-child):focus-within > .wp-block-navigation-item__content::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* ---------------------------------------------------------
   5. HEADER — smoother state changes + past-hero intensity
   --------------------------------------------------------- */
.ardes-header {
  transition:
    background 520ms var(--ardes-ease-out),
    backdrop-filter 520ms var(--ardes-ease-out),
    -webkit-backdrop-filter 520ms var(--ardes-ease-out),
    border-color 520ms var(--ardes-ease-out),
    box-shadow 520ms var(--ardes-ease-out),
    transform 460ms var(--ardes-ease-out) !important;
}
.ardes-header.is-hidden {
  transform: translate3d(0, -110%, 0) !important;
}
/* Once past the hero, strengthen blur and add a hairline border */
.ardes-header.is-past-hero.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow:
    0 1px 0 rgba(10, 11, 16, 0.04),
    0 12px 32px rgba(10, 11, 16, 0.06);
}

/* ---------------------------------------------------------
   6. IMAGE / GRID HOVER SYSTEM
   --------------------------------------------------------- */
/* Tiles : overflow-clipped zoom + dim overlay + title lift */
.ardes-tile.wp-block-cover {
  overflow: hidden;
  transform-style: preserve-3d;
  transition: box-shadow 600ms var(--ardes-ease-out);
}
.ardes-tile.wp-block-cover:hover {
  box-shadow: 0 30px 60px rgba(10, 11, 16, 0.18), 0 10px 22px rgba(10, 11, 16, 0.08);
}
.ardes-tile .wp-block-cover__image-background {
  transition: transform 1000ms var(--ardes-ease-out), filter 600ms var(--ardes-ease-out) !important;
}
.ardes-tile:hover .wp-block-cover__image-background {
  transform: scale(1.08) !important;
  filter: saturate(1.08) brightness(0.96);
}
.ardes-tile .wp-block-cover__inner-container {
  transition: transform 500ms var(--ardes-ease-out);
}
.ardes-tile:hover .wp-block-cover__inner-container {
  transform: translateY(-4px);
}
/* A subtle top-to-bottom gradient that intensifies on hover for readability */
.ardes-tile.wp-block-cover::before {
  transition: opacity 500ms var(--ardes-ease-out) !important;
}
.ardes-tile.wp-block-cover:hover::before {
  opacity: 0.96 !important;
}

/* Showcase slides */
.ardes-showcase-slide .wp-block-cover__image-background {
  transition: transform 1100ms var(--ardes-ease-out) !important;
}
.ardes-showcase-slide:hover .wp-block-cover__image-background {
  transform: scale(1.06) !important;
}

/* Showcase cards : smoother lift + deeper shadow */
.ardes-showcase-card {
  transition:
    transform 480ms var(--ardes-ease-out),
    box-shadow 600ms var(--ardes-ease-out) !important;
}
.ardes-showcase-card:hover {
  box-shadow: 0 30px 60px rgba(10, 11, 16, 0.14), 0 10px 22px rgba(10, 11, 16, 0.06) !important;
}

/* Hero image hover polish (desktop) */
@media (hover: hover) and (pointer: fine) {
  .ardes-hero .ardes-corner-pill {
    transition: box-shadow 700ms var(--ardes-ease-out);
  }
  .ardes-hero .ardes-corner-pill:hover {
    box-shadow: 0 30px 60px rgba(10, 11, 16, 0.14);
  }
}

/* Service gallery zoom */
.ardes-service-gallery .wp-block-gallery figure.wp-block-image img {
  transition: transform 800ms var(--ardes-ease-out), filter 500ms var(--ardes-ease-out) !important;
}
.ardes-service-gallery .wp-block-gallery figure.wp-block-image:hover img {
  transform: scale(1.06) !important;
  filter: saturate(1.06);
}

/* Generic image : soft lift */
.wp-site-blocks figure.wp-block-image:not(.ardes-logo) {
  transition: transform 500ms var(--ardes-ease-out), box-shadow 500ms var(--ardes-ease-out);
}
.wp-site-blocks figure.wp-block-image:not(.ardes-logo):hover {
  transform: translateY(-4px);
}

/* ---------------------------------------------------------
   7. STATS COUNTER COSMETICS
   --------------------------------------------------------- */
.ardes-stats [data-ardes-counter] {
  font-variant-numeric: tabular-nums;
  /* Avoid layout shift while counting */
  display: inline-block;
  min-width: 1ch;
}

/* ---------------------------------------------------------
   8. MAGNETIC TILT HOOKS (JS sets transform inline)
   --------------------------------------------------------- */
.ardes-showcase-card,
.ardes-tile {
  will-change: transform;
  transform-style: preserve-3d;
}

/* ---------------------------------------------------------
   9. SECTION RHYTHM — soft separators on scroll
   --------------------------------------------------------- */
/* A subtle inline-boundary line that fades in on reveal for sections
   that aren't the hero or showcase. Keeps rhythm without being busy. */
.ardes-anim-ready main > section.alignfull + section.alignfull {
  position: relative;
}

/* ---------------------------------------------------------
   10. REDUCED MOTION
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ardes-anim-ready [data-ardes-reveal],
  .ardes-anim-ready [data-ardes-stagger],
  .ardes-anim-ready .ardes-hero .ardes-hero-item,
  .ardes-anim-ready .ardes-hero .ardes-badge-float,
  .ardes-anim-ready .ardes-hero h1 .ardes-word,
  .ardes-anim-ready .ardes-hero .ardes-hero-image-wrap .ardes-corner-pill img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    transition: none !important;
  }
  .ardes-header { transition: none !important; }
  .ardes-tile:hover .wp-block-cover__image-background,
  .ardes-showcase-slide:hover .wp-block-cover__image-background,
  .ardes-service-gallery .wp-block-gallery figure.wp-block-image:hover img,
  .ardes-hero .ardes-corner-pill:hover img,
  .wp-block-button .wp-block-button__link:hover,
  .wp-block-button:not(.is-style-ardes-ghost):not(.is-style-ardes-inverse) .wp-block-button__link:hover::before {
    transform: none !important;
  }
}

/* ---------------------------------------------------------
   11. EDITOR SAFETY — never hide content in the Site Editor
   --------------------------------------------------------- */
body.wp-admin [data-ardes-reveal],
body.wp-admin [data-ardes-stagger],
body.wp-admin .ardes-hero h1 .ardes-word,
body.wp-admin .ardes-hero .ardes-hero-item,
body.wp-admin .ardes-hero .ardes-badge-float,
body.wp-admin .ardes-hero .ardes-hero-image-wrap .ardes-corner-pill img,
.editor-styles-wrapper [data-ardes-reveal],
.editor-styles-wrapper [data-ardes-stagger],
.editor-styles-wrapper .ardes-hero h1 .ardes-word,
.block-editor-block-list__layout [data-ardes-reveal],
.block-editor-block-list__layout [data-ardes-stagger] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}

/* =========================================================
   ==========================================================
   ===  EDITORIAL LAYER (v3.6) — HOMEPAGE REDESIGN         ===
   ==========================================================
   A controlled typography + rhythm system. Minimal chrome,
   strong hierarchy, intentional asymmetry.
     - .ardes-section-label  : numbered editorial marker (replaces pastille eyebrow)
     - .ardes-section-title  : display heading, Fraunces-italic friendly
     - .ardes-lede           : large body paragraph (hero)
     - .ardes-lede-sm        : secondary lede (section intros)
     - .ardes-caption        : image caption with "Fig." marker
     - .ardes-link-under     : animated underline text-link (replaces a second button)
     - .ardes-hero--editorial: hero redesign hooks
     - .ardes-stats-band     : full-width stats strip
   ========================================================= */

/* --- Section label : numbered editorial marker --------------- */
.ardes-section-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardes-fg-subtle);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  line-height: 1;
  max-width: 100%;
}
.ardes-section-label::before { content: none; }
.ardes-section-label__num {
  color: var(--ardes-fg-strong);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: 12px;
  min-width: 1.6em;
}
.ardes-section-label__rule {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  flex-shrink: 0;
}
.ardes-section-label__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kill the old pastille appearance when the legacy eyebrow is still in markup */
.ardes-eyebrow.is-hidden-legacy { display: none !important; }

/* --- Section title : editorial display heading ---------------- */
.ardes-section-title {
  color: var(--ardes-fg-strong);
  text-wrap: balance;
}
.ardes-section-title em {
  /* Fraunces italic accent — already handled by .ardes-fraunces-em,
     but we make sure the weight/spacing feel deliberate */
  font-weight: 300;
  letter-spacing: -0.015em;
}

/* --- Lede paragraph : large, confident body for hero ---------- */
.ardes-lede {
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ardes-fg-muted);
  max-width: 48ch;
  text-wrap: pretty;
}
.ardes-lede em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  color: var(--ardes-fg-strong);
}

/* Smaller lede for section intros (right column of intro row) */
.ardes-lede-sm {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ardes-fg-muted);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
  padding: 0;
}

/* --- Caption : small editorial caption under images ----------- */
.ardes-caption {
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--ardes-fg-subtle);
  font-feature-settings: 'ss01';
}
.ardes-caption p { margin: 0 !important; }
.ardes-caption__marker {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardes-fg-strong);
  font-weight: 500;
  margin-right: 2px;
}

/* --- Animated underline link (secondary hero action) ---------- */
.ardes-link-under,
.ardes-link-under p { margin: 0; padding: 0; }
.ardes-link-under a {
  position: relative;
  display: inline-block;
  color: var(--ardes-fg-strong);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding: 4px 0;
  line-height: 1.2;
}
.ardes-link-under a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 420ms var(--ardes-ease-out);
}
.ardes-link-under a:hover::after,
.ardes-link-under a:focus-visible::after {
  transform-origin: left center;
  transform: scaleX(1);
  animation: ardesLinkUnder 560ms var(--ardes-ease-out);
}
@keyframes ardesLinkUnder {
  0%   { transform-origin: right center; transform: scaleX(1); }
  49%  { transform-origin: right center; transform: scaleX(0); }
  50%  { transform-origin: left center;  transform: scaleX(0); }
  100% { transform-origin: left center;  transform: scaleX(1); }
}
.ardes-link-under a span,
.ardes-link-under a::before {
  /* not used — kept selector-free */
}

/* =========================================================
   HERO — editorial composition
   ========================================================= */

/* Override the 100vh desktop lock: with the new meta row + stats band
   the hero is taller by design. Still full viewport on wide screens. */
@media (min-width: 1025px) and (hover: hover) {
  main > section.alignfull.ardes-hero--editorial,
  main > .wp-block-group.alignfull.ardes-hero--editorial {
    min-height: 100vh;
    height: auto;
    max-height: none;
    display: block;
  }
  body.admin-bar main > section.alignfull.ardes-hero--editorial,
  body.admin-bar main > .wp-block-group.alignfull.ardes-hero--editorial {
    min-height: calc(100vh - 32px);
    height: auto;
    max-height: none;
  }
  /* Bold, confident headline size — deliberately oversized on wide screens */
  .ardes-hero--editorial h1,
  .ardes-hero--editorial .ardes-display {
    font-size: clamp(3.6rem, 10vw, 8.4rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.042em !important;
  }
}
/* Even more expressive on ultra-wide */
@media (min-width: 1600px) {
  .ardes-hero--editorial h1,
  .ardes-hero--editorial .ardes-display {
    font-size: 9rem !important;
    line-height: 0.9 !important;
  }
}

/* Hero meta row (top editorial label + location) */
.ardes-hero-meta {
  width: 100%;
  gap: 16px;
}
.ardes-hero-meta .ardes-section-label {
  flex: 0 1 auto;
}
.ardes-hero-meta__loc {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardes-fg-subtle);
  margin: 0 !important;
  padding: 0;
  text-align: right;
}

/* Display headline : tight tracking, editorial weight */
.ardes-display {
  color: var(--ardes-fg-strong);
  text-wrap: balance;
  font-feature-settings: 'ss01';
}
.ardes-display em {
  color: var(--ardes-fg-strong);
}
.ardes-hero--editorial .ardes-display {
  /* No padding-bottom fight with .ardes-word overflow clipping:
     we explicitly keep room for italic descenders + word reveal */
  padding-bottom: 0.14em;
}

/* Hero column layout — the image column becomes a portrait crop */
.ardes-hero-portrait {
  align-self: flex-start;
}
.ardes-hero-portrait .ardes-hero-figure {
  margin: 0;
  width: 100%;
}
.ardes-hero-portrait .ardes-hero-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px 24px 160px 24px; /* asymmetric rounded — one corner becomes a pill */
  background: var(--ardes-sand-100);
  display: block;
}

/* Fallback for the original corner-pill shape on non-editorial heroes */
@supports not (aspect-ratio: 4 / 5) {
  .ardes-hero-portrait .ardes-hero-figure img {
    height: 560px;
  }
}

/* Stats band : horizontal strip with a hairline on top */
.ardes-stats-band {
  border-top: 1px solid var(--ardes-border);
  width: 100%;
}
.ardes-stats-band .ardes-stat {
  display: flex !important;
  flex-direction: column;
  gap: 6px !important;
}
.ardes-stats-band .ardes-stat-number {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2.4rem, 3.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ardes-fg-strong);
  font-feature-settings: 'ss01';
  font-variant-numeric: tabular-nums;
}
.ardes-stats-band .ardes-stat-label {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ardes-fg-subtle);
  line-height: 1.4;
  text-transform: none;
  font-weight: 400;
}

/* Hero actions row — the primary button + text-underline link side-by-side */
.ardes-hero-actions {
  row-gap: 12px !important;
}
.ardes-hero-actions .wp-block-buttons { margin: 0 !important; }

/* Hide the old floating badge if it's still in any cached copy */
.ardes-hero--editorial .ardes-badge-float { display: none !important; }

/* =========================================================
   SECTION RHYTHM — breath, alternation, hairlines
   ========================================================= */

/* Align the label + title + column block to a consistent grid start */
.ardes-section .ardes-section-label,
.ardes-hero .ardes-section-label {
  margin-bottom: 0;
}

/* Bigger section titles globally (applies wherever .ardes-section-title is used) */
.ardes-section-title {
  font-size: clamp(2.4rem, 5vw, 4.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.032em !important;
}

/* More breathing room between major sections */
main > section.alignfull.ardes-section,
main > section.alignfull.ardes-showcase,
main > section.alignfull.ardes-contact {
  padding-top: clamp(120px, 14vw, 200px) !important;
  padding-bottom: clamp(120px, 14vw, 200px) !important;
}

/* Darker sand for stronger contrast against white sections */
main > section.alignfull.has-sand-100-background-color {
  background-color: #f3f3f1 !important; /* slightly deeper than sand-100 */
}
/* Keep the hero on original sand so it reads as "canvas", not section */
.ardes-hero--editorial.has-sand-100-background-color {
  background-color: var(--ardes-sand-100) !important;
}

/* A thin top hairline marks the start of each section (moment opener) */
main > section.alignfull.ardes-section,
main > section.alignfull.ardes-showcase,
main > section.alignfull.ardes-contact {
  position: relative;
}
main > section.alignfull.ardes-section::before,
main > section.alignfull.ardes-showcase::before,
main > section.alignfull.ardes-contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(20px, 4vw, 48px);
  right: clamp(20px, 4vw, 48px);
  height: 1px;
  background: #0a0b10;
  opacity: 0.08;
  pointer-events: none;
}
main > section.alignfull.has-sand-100-background-color::before {
  opacity: 0.10;
}

/* Give each section intro more breath between label and title */
.ardes-section .ardes-section-label + .ardes-section-title,
.ardes-hero .ardes-section-label + .ardes-section-title {
  margin-top: clamp(32px, 4vw, 56px) !important;
}

/* =========================================================
   RESPONSIVE : clean collapse to one column
   ========================================================= */
@media (max-width: 1024px) {
  .ardes-hero--editorial {
    padding-top: clamp(120px, 18vw, 160px) !important;
  }
  .ardes-hero-meta {
    flex-wrap: wrap;
    gap: 10px 16px;
  }
  .ardes-hero-meta__loc { text-align: left; }
  .ardes-hero-grid {
    margin-top: 40px !important;
  }
  .ardes-hero--editorial h1,
  .ardes-hero--editorial .ardes-display {
    font-size: clamp(2.4rem, 10vw, 3.8rem) !important;
  }
  .ardes-hero-portrait .ardes-hero-figure img {
    aspect-ratio: 4 / 3;
    border-radius: 18px 18px 120px 18px;
  }
  .ardes-stats-band {
    flex-wrap: wrap !important;
    row-gap: 28px;
    column-gap: 32px;
  }
  .ardes-stats-band .ardes-stat { flex: 1 1 140px; }

  /* Section intros : stack label → title → lede cleanly */
  .ardes-section-title { font-size: clamp(2rem, 7vw, 2.75rem) !important; }
}

@media (max-width: 640px) {
  .ardes-section-label {
    font-size: 10px;
    gap: 10px;
  }
  .ardes-section-label__rule { width: 28px; }
  .ardes-lede { font-size: 17px; }
  main > section.alignfull.ardes-section::before { display: none; }
}

/* =========================================================
   EDITOR SAFETY — keep the hero redesign visible & editable
   ========================================================= */
body.wp-admin .ardes-hero-portrait .ardes-hero-figure img,
.editor-styles-wrapper .ardes-hero-portrait .ardes-hero-figure img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
body.wp-admin .ardes-stats-band,
.editor-styles-wrapper .ardes-stats-band {
  flex-wrap: wrap !important;
}


/* =========================================================
 * ARDES v1.5 — Ajouts ciblés
 * Base : zip utilisateur de référence (icônes services conservées)
 * Ajouts : fond gris, footer navy, header sticky, câble hero (symboles sans ligne)
 * ========================================================= */

/* ====== 1. FOND GRIS (double-sécurité en cas de cache) ====== */
:root {
    --ardes-sand-100: #f3f3f1 !important;
}
.has-sand-100-background-color {
    background-color: #f3f3f1 !important;
}

/* ====== 2. FOOTER NAVY + LOGO BLANC ====== */
.ardes-footer,
footer.ardes-footer,
.wp-site-blocks footer.ardes-footer {
    background-color: #04064d !important;
}
.ardes-footer *,
.ardes-footer p,
.ardes-footer li,
.ardes-footer h1, .ardes-footer h2, .ardes-footer h3 {
    color: #e8eaff !important;
}
.ardes-footer a {
    color: #ffffff !important;
    opacity: 0.88;
    transition: opacity 0.3s ease;
}
.ardes-footer a:hover { opacity: 1; }
.ardes-footer .has-ink-500-color,
.ardes-footer .ardes-footer-heading {
    color: #9ea3d8 !important;
}
.ardes-footer .ardes-footer-logo img,
.ardes-footer img[alt*="Ardès"] {
    filter: brightness(0) invert(1) !important;
}
.ardes-footer-social svg {
    fill: #ffffff !important;
}

/* ====== 3. HEADER STICKY TRANSPARENT → BLANC ====== */
.wp-site-blocks > header,
header.wp-block-template-part {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background-color: rgba(243, 243, 241, 0.75);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
body.ardes-scrolled .wp-site-blocks > header,
body.ardes-scrolled header.wp-block-template-part {
    background-color: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 1px 0 rgba(4, 6, 77, 0.08);
}

/* ====== 4. CÂBLE HERO : 4 gros symboles, PAS de ligne ====== */
.ardes-hero,
.ardes-hero--editorial {
    position: relative !important;
    overflow: visible !important;
    padding-bottom: clamp(180px, 16vw, 260px) !important;
}
.ardes-hero::after,
.ardes-hero--editorial::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    width: 100%;
    height: 130px;
    z-index: 5;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    /* 4 symboles gros : panneau solaire · batterie · borne recharge · voiture
       PAS de ligne sinusoïde les reliant, juste alignement visuel */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='xMidYMid meet'><g fill='none' stroke='%2304064d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><!-- Panneau solaire --><g class='solar' transform='translate(120,20)'><rect x='0' y='0' width='110' height='75' rx='4' fill='%23f3f3f1'/><line x1='0' y1='25' x2='110' y2='25'/><line x1='0' y1='50' x2='110' y2='50'/><line x1='37' y1='0' x2='37' y2='75'/><line x1='73' y1='0' x2='73' y2='75'/><line x1='55' y1='75' x2='55' y2='95' stroke-width='3.6'/></g><!-- Batterie --><g class='battery' transform='translate(470,30)'><rect x='0' y='10' width='110' height='60' rx='6' fill='%23f3f3f1'/><rect x='110' y='28' width='10' height='24' fill='%2304064d'/><line x1='22' y1='35' x2='42' y2='35' stroke-width='3.6'/><line x1='52' y1='35' x2='72' y2='35' stroke-width='3.6'/><line x1='32' y1='25' x2='32' y2='45' stroke-width='3.6'/><!-- signe + --><text x='60' y='60' font-family='Arial' font-size='16' font-weight='700' fill='%2304064d' stroke='none' text-anchor='middle'>+</text></g><!-- Borne de recharge --><g class='charger' transform='translate(820,5)'><rect x='0' y='0' width='80' height='120' rx='8' fill='%23f3f3f1'/><rect x='14' y='15' width='52' height='32' rx='3' fill='%2304064d'/><circle cx='40' cy='70' r='11' fill='none'/><path d='M34 70 L38 74 L46 64'/><rect x='22' y='92' width='36' height='16' rx='2'/></g><!-- Voiture électrique --><g class='car' transform='translate(1180,35)'><path d='M14 62 L34 28 L118 28 L150 62 L150 88 L14 88 Z' fill='%23f3f3f1'/><line x1='42' y1='28' x2='42' y2='62'/><line x1='110' y1='28' x2='110' y2='62'/><circle cx='40' cy='88' r='13' fill='%23f3f3f1'/><circle cx='120' cy='88' r='13' fill='%23f3f3f1'/><!-- Prise de charge latérale --><rect x='-18' y='54' width='26' height='20' rx='2' fill='%2304064d'/><line x1='-9' y1='50' x2='-9' y2='54' stroke-width='3.6'/><line x1='1' y1='50' x2='1' y2='54' stroke-width='3.6'/></g></g></svg>");
}

/* Animation : apparition douce séquentielle (pas de tracé de ligne, juste fade-in en cascade via variations opacity sur ::after) */
@keyframes ardesHeroSymbolsFade {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}
.ardes-hero::after,
.ardes-hero--editorial::after {
    opacity: 0;
    animation: ardesHeroSymbolsFade 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}

/* Sur mobile : ne pas afficher le câble (pas la place) */
@media (max-width: 768px) {
    .ardes-hero::after,
    .ardes-hero--editorial::after {
        display: none;
    }
    .ardes-hero,
    .ardes-hero--editorial {
        padding-bottom: clamp(60px, 8vw, 120px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ardes-hero::after,
    .ardes-hero--editorial::after {
        opacity: 1;
        animation: none;
    }
}

/* =========================================================
 * ARDES v1.6 — Hero scène SVG animée
 * ========================================================= */

/* Supprimer le câble bas qui ne servait à rien */
.ardes-hero::after,
.ardes-hero--editorial::after {
    display: none !important;
}

/* Conteneur de la scène hero */
.ardes-hero-scene {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0;
}
.ardes-hero-scene svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* ----- Animation 1 : soleil qui pulse + rayons qui tournent ----- */
.scene-sun .sun-rays {
    transform-origin: 70px 80px;
    animation: ardesSunSpin 18s linear infinite;
}
.scene-sun circle {
    animation: ardesSunPulse 3.8s ease-in-out infinite;
    transform-origin: 70px 80px;
}
@keyframes ardesSunSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes ardesSunPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

/* ----- Animation 2 : fils avec courant qui circule ----- */
.scene-wires .wire {
    stroke-dasharray: 6 10;
    animation: ardesWireFlow 3s linear infinite;
}
.scene-wires .wire-1 { animation-delay: 0s; }
.scene-wires .wire-2 { animation-delay: 0.3s; }
.scene-wires .wire-3 { animation-delay: 0.6s; }
.scene-wires .wire-4 { animation-delay: 0.9s; }
.scene-wires .wire-5 { animation-delay: 1.2s; stroke-dasharray: 0 1; stroke: #04064d; }
@keyframes ardesWireFlow {
    from { stroke-dashoffset: 160; }
    to   { stroke-dashoffset: 0; }
}

/* Le fil 5 (vers la lampe) reste éteint tant que l'interrupteur n'est pas allumé */
.scene-wires .wire-5 { opacity: 0.25; transition: opacity 0.4s; }

/* ----- Animation 3 : LED onduleur clignote ----- */
.scene-inverter .inverter-led {
    animation: ardesLed 2s ease-in-out infinite;
    transform-origin: 320px 185px;
}
@keyframes ardesLed {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.4); }
}

/* ----- Animation 4 : batterie se charge (barres qui apparaissent) ----- */
.scene-battery .battery-bar {
    opacity: 0;
    animation: ardesBatteryFill 4s ease-in-out infinite;
}
.scene-battery .bar-1 { animation-delay: 0s; }
.scene-battery .bar-2 { animation-delay: 0.8s; }
.scene-battery .bar-3 { animation-delay: 1.6s; }
@keyframes ardesBatteryFill {
    0%, 10%  { opacity: 0; }
    30%, 80% { opacity: 1; }
    100%     { opacity: 0; }
}

/* ----- Animation 5 : la main descend, bascule l'interrupteur, la lampe s'allume ----- */
.scene-hand {
    animation: ardesHandMove 7s cubic-bezier(0.22, 1, 0.36, 1) 1.5s infinite;
}
@keyframes ardesHandMove {
    0%              { transform: translate(220px, 0); opacity: 0; }
    8%              { opacity: 1; }
    25%             { transform: translate(0, 0); opacity: 1; }
    32%             { transform: translate(-12px, 6px); opacity: 1; }  /* appui sur bouton */
    38%             { transform: translate(0, 0); opacity: 1; }
    60%             { transform: translate(0, 0); opacity: 1; }
    72%             { transform: translate(220px, 0); opacity: 0; }
    100%            { transform: translate(220px, 0); opacity: 0; }
}

.scene-switch .switch-toggle {
    transform-origin: 140px 508px;
    animation: ardesSwitchFlip 7s ease-in-out 1.5s infinite;
}
@keyframes ardesSwitchFlip {
    0%, 30%   { transform: translateY(0); }
    35%, 68%  { transform: translateY(-16px); }
    72%, 100% { transform: translateY(0); }
}

.scene-lamp .lamp-glow,
.scene-lamp .lamp-rays {
    animation: ardesLampOn 7s ease-in-out 1.5s infinite;
}
@keyframes ardesLampOn {
    0%, 35%   { opacity: 0; }
    40%, 68%  { opacity: 1; }
    72%, 100% { opacity: 0; }
}

/* Le fil vers la lampe devient solide quand la lampe est allumée */
.scene-wires .wire-5 {
    animation: ardesWireToLamp 7s linear 1.5s infinite;
}
@keyframes ardesWireToLamp {
    0%, 35%   { opacity: 0.2; stroke-dasharray: 0 1; }
    40%, 68%  { opacity: 1; stroke-dasharray: 6 10; stroke-dashoffset: 160; }
    72%, 100% { opacity: 0.2; stroke-dasharray: 0 1; }
}

/* ----- Voiture : légère pulsation de la prise quand elle charge ----- */
.scene-car rect[fill="#04064d"] {
    animation: ardesCarPort 2.4s ease-in-out infinite;
    transform-origin: 400px 407px;
}
@keyframes ardesCarPort {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

/* ============ HERO MOBILE ONE-PAGE ============ */
@media (max-width: 768px) {
    .ardes-hero,
    .ardes-hero--editorial {
        padding-top: clamp(90px, 15vh, 130px) !important;
        padding-bottom: 40px !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .ardes-hero-grid {
        flex-direction: column !important;
        gap: 20px !important;
        margin-top: 16px !important;
    }
    .ardes-hero-grid .wp-block-column {
        flex-basis: auto !important;
        width: 100% !important;
    }
    .ardes-display {
        font-size: clamp(2rem, 8vw, 2.75rem) !important;
        line-height: 1.05 !important;
    }
    .ardes-lede {
        font-size: 15px !important;
        margin-top: 18px !important;
    }
    .ardes-hero-actions {
        margin-top: 18px !important;
    }
    .ardes-hero-scene {
        max-width: 260px;
        margin: 0 auto;
    }
    .ardes-stats {
        margin-top: 24px !important;
        gap: 20px !important;
    }
    .ardes-stat-number {
        font-size: 28px !important;
    }
    .ardes-stat-label {
        font-size: 11px !important;
    }
    /* Masquer la meta bar sur mobile pour gagner de la place */
    .ardes-hero-meta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scene-sun .sun-rays,
    .scene-sun circle,
    .scene-wires .wire,
    .scene-inverter .inverter-led,
    .scene-battery .battery-bar,
    .scene-hand,
    .scene-switch .switch-toggle,
    .scene-lamp .lamp-glow,
    .scene-lamp .lamp-rays,
    .scene-car rect {
        animation: none !important;
    }
    .scene-lamp .lamp-glow,
    .scene-lamp .lamp-rays {
        opacity: 1;
    }
}

/* =========================================================
 * ARDES v1.7 — Scène hero refaite
 * ========================================================= */

/* Fils en trait solide (plus de dashes permanents), discret */
.scene-wires { opacity: 0.55; }
.scene-wires path { animation: none !important; stroke-dasharray: none !important; }

/* Particules : point qui circule et pulse */
.scene-particles .particle {
    animation: ardesParticlePulse 0.8s ease-in-out infinite alternate;
}
@keyframes ardesParticlePulse {
    from { opacity: 0.4; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1.2); }
}

/* Fil vers la lampe — reste pâle tant que l'interrupteur n'est pas allumé */
#wire-switch-lamp {
    opacity: 0.15;
    transition: opacity 0.4s;
    animation: ardesLampWire 7s ease-in-out 1.5s infinite;
}
@keyframes ardesLampWire {
    0%, 40%  { opacity: 0.15; }
    45%, 68% { opacity: 0.8; }
    72%, 100% { opacity: 0.15; }
}

/* Particule vers la lampe — n'apparaît que pendant la phase "allumée" */
.particle.p-lamp {
    animation: ardesParticleLamp 7s ease-in-out 1.5s infinite;
}
@keyframes ardesParticleLamp {
    0%, 40%  { opacity: 0; }
    45%, 68% { opacity: 1; }
    72%, 100% { opacity: 0; }
}

/* Soleil : rayons tournent lentement + pulsation douce */
.scene-sun .sun-rays {
    transform-origin: 75px 66px;
    animation: ardesSunSpin 22s linear infinite;
}
.scene-sun circle {
    transform-origin: 75px 66px;
    animation: ardesSunPulse 4s ease-in-out infinite;
}
@keyframes ardesSunSpin { to { transform: rotate(360deg); } }
@keyframes ardesSunPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* LED onduleur clignote doucement */
.inverter-led {
    animation: ardesLed 1.6s ease-in-out infinite;
}
@keyframes ardesLed {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* Barres batterie : se remplissent en cascade */
.battery-bar {
    opacity: 0;
    animation: ardesBatteryFill 4.5s ease-in-out infinite;
}
.battery-bar.bar-1 { animation-delay: 0s; }
.battery-bar.bar-2 { animation-delay: 0.9s; }
.battery-bar.bar-3 { animation-delay: 1.8s; }
@keyframes ardesBatteryFill {
    0%, 8%   { opacity: 0; }
    25%, 78% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

/* ===== SÉQUENCE PRINCIPALE : main → interrupteur → lampe ===== */

/* Main : glisse depuis hors-champ droit, appuie, repart */
.scene-hand {
    animation: ardesHandCycle 8s cubic-bezier(0.5, 0, 0.3, 1) 1.5s infinite;
}
@keyframes ardesHandCycle {
    0%       { transform: translate(260px, 0); opacity: 0; }
    8%       { opacity: 1; }
    28%      { transform: translate(0, 0); opacity: 1; }       /* atteint l'interrupteur */
    32%      { transform: translate(-10px, 4px); opacity: 1; } /* appuie */
    38%      { transform: translate(0, 0); opacity: 1; }       /* relâche */
    62%      { transform: translate(0, 0); opacity: 1; }       /* reste un peu */
    78%      { transform: translate(260px, 0); opacity: 0; }   /* repart */
    100%     { transform: translate(260px, 0); opacity: 0; }
}

/* Interrupteur : bascule qui pivote */
.switch-toggle {
    transform-origin: 141px 491px;
    animation: ardesSwitchFlip 8s ease-in-out 1.5s infinite;
}
@keyframes ardesSwitchFlip {
    0%, 30%   { transform: rotate(0deg); }              /* OFF */
    34%, 70%  { transform: rotate(-12deg) translateY(-2px); }  /* ON */
    74%, 100% { transform: rotate(0deg); }              /* retour OFF */
}

/* Lampe : halo + filaments + rayons s'allument ensemble */
.lamp-glow {
    animation: ardesLampGlow 8s ease-in-out 1.5s infinite;
}
.lamp-filament,
.lamp-rays {
    animation: ardesLampOn 8s ease-in-out 1.5s infinite;
}
@keyframes ardesLampGlow {
    0%, 38%  { opacity: 0; }
    45%, 68% { opacity: 1; }
    75%, 100% { opacity: 0; }
}
@keyframes ardesLampOn {
    0%, 38%  { opacity: 0; }
    45%, 68% { opacity: 1; }
    75%, 100% { opacity: 0; }
}

/* Voiture : prise qui pulse quand elle charge */
.scene-car rect[fill="#04064d"] {
    animation: ardesCarPort 2s ease-in-out infinite;
    transform-origin: 407px 419px;
}
@keyframes ardesCarPort {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .scene-sun .sun-rays, .scene-sun circle, .inverter-led,
    .battery-bar, .scene-hand, .switch-toggle, .lamp-glow,
    .lamp-filament, .lamp-rays, .scene-particles .particle,
    #wire-switch-lamp, .particle.p-lamp, .scene-car rect {
        animation: none !important;
    }
    .lamp-glow, .lamp-filament, .lamp-rays { opacity: 1; }
    .battery-bar { opacity: 1; }
    #wire-switch-lamp { opacity: 0.8; }
}





/* =========================================================
 * ARDES v1.14 — Nuclear CSS reset + full-width guaranteed
 * ========================================================= */

/* RESET TOTAL des paddings/margins parents */
html, body { margin: 0 !important; padding: 0 !important; }

.wp-site-blocks {
  padding: 0 !important;
  margin: 0 !important;
  background: #05083a;
}

body > .wp-site-blocks > main,
.wp-site-blocks > main,
main.wp-block-group,
main.has-global-padding {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* HEADER : sticky top collé en haut, 100vw */
body > .wp-site-blocks > header,
.wp-site-blocks > header,
header.wp-block-template-part {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  z-index: 9999 !important;
  margin: 0 !important;
  background-color: rgba(243, 243, 241, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(4,6,77,0.08);
}

/* SECTION hero : directement full width (pas de wrapper) */
.ardes-light-hero {
  display: block !important;
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: 150vh;
  background: #05083a;
  color: white;
  overflow: clip;
  box-sizing: border-box;
}

/* Wrapper sticky interne : pin l'animation */
.ardes-light-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.ardes-light-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 72%, rgba(242, 194, 0, 0.04), transparent 22%),
    linear-gradient(120deg, #05083a 0%, #10144d 55%, #05083a 100%);
  transition: background 0.2s linear;
  z-index: 1;
}

.ardes-hero-content {
  position: absolute;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  padding: 0 clamp(20px, 5vw, 60px);
  z-index: 3;
  text-align: center;
}

.ardes-light-hero .eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.55;
  margin: 0 0 28px;
  color: #ffffff !important;
}

.ardes-hero-content h1 {
  font-size: clamp(42px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
  font-weight: 800;
  color: #ffffff !important;
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
}

.ardes-hero-content h1 span {
  color: #f2c200;
  text-shadow: 0 0 0 rgba(242, 194, 0, 0);
  transition: text-shadow 0.2s linear, color 0.2s linear;
  font-style: italic;
  font-family: var(--wp--preset--font-family--fraunces, 'Fraunces', serif);
  font-weight: 400;
}

.ardes-light-hero .subtitle {
  max-width: 560px;
  margin: 0 auto 26px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  opacity: 0.78;
  color: #ffffff !important;
}

.ardes-light-hero .hero-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border-radius: 999px;
  background: #f2c200;
  color: #05083a !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: transform 0.25s ease, background 0.25s ease;
}

.ardes-light-hero .hero-btn:hover {
  transform: translateY(-2px);
  background: #e3b800;
}

/* Switch centré horizontalement, 2/3 du haut */
.switch-wrap {
  position: absolute;
  top: 62vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.switch-plate {
  position: relative;
  width: 170px;
  height: 170px;
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 40px 90px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: grid;
  place-items: center;
}

.switch-button {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #ffffff, #d8dae7 55%, #8b90bd 100%);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.32),
    inset 0 6px 10px rgba(255,255,255,0.65),
    inset 0 -10px 16px rgba(0,0,0,0.18);
  transform: translateY(0) scale(1);
  transition: transform 0.2s linear;
}

.switch-inner {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: #090d45;
  opacity: 0.85;
  transition: background 0.2s linear, box-shadow 0.2s linear;
}

.switch-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,194,0,0.45), transparent 62%);
  opacity: 0;
  filter: blur(20px);
  transform: scale(0.7);
  transition: opacity 0.2s linear, transform 0.2s linear;
  pointer-events: none;
}

.scroll-hint {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.22em;
  opacity: 0.42;
  color: #ffffff !important;
  text-align: center;
}

@media (max-width: 900px) {
  .ardes-light-hero {
    height: 170vh;
  }
  .ardes-hero-content {
    top: 10vh;
  }
  .ardes-hero-content h1 {
    font-size: clamp(38px, 9vw, 64px);
  }
  .switch-wrap {
    top: 58vh;
    transform: translateX(-50%) scale(0.85);
  }
  .switch-plate {
    width: 150px;
    height: 150px;
  }
  .switch-button {
    width: 74px;
    height: 74px;
  }
}


/* =========================================================
 * ARDES v1.16 — Menu default pendant hero, navy après
 * ========================================================= */

/* Header par défaut : GARDE le style cream+navy (pas de changement dans le hero) */
/* On ne touche rien de spécifique à in-hero */

/* État PAST-HERO : après avoir scrollé au-delà du hero, menu devient navy foncé */
body.ardes-past-hero .wp-site-blocks > header,
body.ardes-past-hero header.wp-block-template-part {
  background-color: #05083a !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25) !important;
}

body.ardes-past-hero .wp-site-blocks > header a,
body.ardes-past-hero header.wp-block-template-part a,
body.ardes-past-hero .wp-site-blocks > header .wp-block-navigation-item__label,
body.ardes-past-hero header.wp-block-template-part .wp-block-navigation-item__label {
  color: #ffffff !important;
}

body.ardes-past-hero .wp-site-blocks > header .wp-block-site-logo img,
body.ardes-past-hero header.wp-block-template-part img,
body.ardes-past-hero .ardes-logo img,
body.ardes-past-hero .ardes-header img {
  filter: brightness(0) invert(1);
}

/* Bouton "Demander un devis" dans le header navy : devient jaune */
body.ardes-past-hero .wp-site-blocks > header .wp-block-button__link,
body.ardes-past-hero header.wp-block-template-part .wp-block-button__link {
  background-color: #f2c200 !important;
  color: #05083a !important;
}

/* Transition douce sur les changements */
body > .wp-site-blocks > header,
.wp-site-blocks > header,
header.wp-block-template-part {
  transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease !important;
}
body > .wp-site-blocks > header a,
header.wp-block-template-part a,
header.wp-block-template-part img,
.ardes-header img {
  transition: color 0.4s ease, filter 0.4s ease !important;
}

/* Double sécurité : la section after-light cachée si elle existe toujours en DB */
.ardes-after-light {
  display: none !important;
}

/* =========================================================
 * ARDES v1.16.1 — FIX UNIQUE : retour du header navy après hero
 * ========================================================= */
body.ardes-past-hero .ardes-header {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: #05083a !important;
  color: #ffffff !important;
  z-index: 9999 !important;
}
body.ardes-past-hero .ardes-header a,
body.ardes-past-hero .ardes-header .wp-block-navigation-item__label {
  color: #ffffff !important;
}
body.ardes-past-hero .ardes-header img {
  filter: brightness(0) invert(1) !important;
}
body.ardes-past-hero .ardes-header .wp-block-button__link {
  background-color: #f2c200 !important;
  color: #05083a !important;
}

/* =========================================================
 * ARDES v1.16.2 — FIX mobile : burger visible + menu lisible
 * ========================================================= */

/* HAMBURGER : toujours visible, par défaut navy (sur fond clair) */
.ardes-header .wp-block-navigation__responsive-container-open svg,
.ardes-header .wp-block-navigation__responsive-container-open path {
  fill: #04064d !important;
}

/* HAMBURGER : blanc quand past-hero (sur fond navy) */
body.ardes-past-hero .ardes-header .wp-block-navigation__responsive-container-open svg,
body.ardes-past-hero .ardes-header .wp-block-navigation__responsive-container-open path {
  fill: #ffffff !important;
}

/* MODALE MOBILE OUVERTE : fond navy + texte blanc lisible */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.has-modal-open {
  background-color: #05083a !important;
  color: #ffffff !important;
}

/* Texte des liens dans la modale mobile */
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label,
.wp-block-navigation__responsive-container.has-modal-open a,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__label {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}

/* Hover état */
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: #f2c200 !important;
}

/* Bouton fermer (X) en blanc */
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-close path {
  fill: #ffffff !important;
}

/* CTA "Demander un devis" dans la modale mobile : jaune */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-button__link {
  background-color: #f2c200 !important;
  color: #05083a !important;
}

/* Logo dans modale mobile : blanc */
.wp-block-navigation__responsive-container.is-menu-open img {
  filter: brightness(0) invert(1) !important;
}

/* =========================================================
 * ARDES v1.16.3 — FIX modal mobile : fond navy forcé
 * ========================================================= */

/* MODALE MOBILE OUVERTE : multiples sélecteurs pour forcer le fond navy */
html body .wp-block-navigation__responsive-container.is-menu-open,
html body .wp-block-navigation__responsive-container.has-modal-open,
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
html body .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog,
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
html body .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
  background-color: #05083a !important;
  background: #05083a !important;
  color: #ffffff !important;
}

/* TOUT le contenu de la modale en blanc, max specificité */
html body .wp-block-navigation__responsive-container.is-menu-open *,
html body .wp-block-navigation__responsive-container.has-modal-open *,
html body.has-modal-open .wp-block-navigation__responsive-container * {
  color: #ffffff !important;
}

/* Liens et items de menu */
html body .wp-block-navigation__responsive-container.is-menu-open a,
html body .wp-block-navigation__responsive-container.has-modal-open a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}

html body .wp-block-navigation__responsive-container.is-menu-open a:hover,
html body .wp-block-navigation__responsive-container.has-modal-open a:hover {
  color: #f2c200 !important;
}

/* X (bouton fermer) : icône blanche bien visible */
html body .wp-block-navigation__responsive-container-close,
html body .wp-block-navigation__responsive-container-close svg,
html body .wp-block-navigation__responsive-container-close path,
html body .wp-block-navigation__responsive-container-close * {
  fill: #ffffff !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Bouton CTA dans modale : jaune */
html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link,
html body .wp-block-navigation__responsive-container.has-modal-open .wp-block-button__link {
  background-color: #f2c200 !important;
  color: #05083a !important;
}

/* Logo dans modale : blanc */
html body .wp-block-navigation__responsive-container.is-menu-open img {
  filter: brightness(0) invert(1) !important;
}

/* =========================================================
 * ARDES v1.16.4 — Typographie hero + animation par chunks
 * (n'impacte ni le scroll-light, ni le switch, ni le fond, ni le sticky)
 * ========================================================= */

/* === Typographie === */
.ardes-hero-content .hero-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(48px, 6vw, 92px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.045em !important;
  text-align: center !important;
  margin: 0 !important;
  color: #ffffff !important;
}

.ardes-hero-content .hero-line {
  display: block !important;
}

.ardes-hero-content .hero-line-3.hero-accent {
  font-family: 'Fraunces', 'Canela', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: #f2c200 !important;
  font-size: 1.08em !important;
  letter-spacing: -0.035em !important;
  margin-top: 0.12em !important;
  /* glow de base, le scroll-light renforce dynamiquement par-dessus */
  text-shadow: 0 0 18px rgba(242, 194, 0, 0.18);
}

.ardes-hero-content .subtitle {
  max-width: 560px !important;
  margin: 28px auto 26px !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  opacity: 0.76 !important;
}

/* === État initial des chunks (avant animation) === */
.ardes-hero-content .eyebrow,
.ardes-hero-content .hero-line,
.ardes-hero-content .subtitle,
.ardes-hero-content .hero-btn {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  will-change: opacity, transform, filter;
}

/* === Animation : un seul keyframe, multiples delays === */
@keyframes ardesChunkReveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes ardesAccentReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* État initial spécifique pour l'accent (scale en plus) */
.ardes-hero-content .hero-accent {
  transform: translateY(20px) scale(0.98);
}

/* === Timing par chunk (animation auto-play au chargement) === */
.ardes-hero-content .eyebrow {
  animation: ardesChunkReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.20s forwards;
}
.ardes-hero-content .hero-line-1 {
  animation: ardesChunkReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}
.ardes-hero-content .hero-line-2 {
  animation: ardesChunkReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.58s forwards;
}
.ardes-hero-content .hero-line-3,
.ardes-hero-content .hero-accent {
  animation: ardesAccentReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.92s forwards;
}
.ardes-hero-content .subtitle {
  animation: ardesChunkReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.20s forwards;
}
.ardes-hero-content .hero-btn {
  animation: ardesChunkReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.38s forwards;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ardes-hero-content .eyebrow,
  .ardes-hero-content .hero-line,
  .ardes-hero-content .subtitle,
  .ardes-hero-content .hero-btn {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }
}


/* =========================================================
 * ARDES v1.16.6 — UNIQUEMENT position switch (ancien design rond conservé)
 * ========================================================= */
.ardes-light-hero .switch-wrap {
  top: 68vh !important;
}

@media (max-width: 900px) {
  .ardes-light-hero .switch-wrap {
    top: 64vh !important;
  }
}



/* =========================================================
 * ARDES v1.16.11 — Section services COVER (rideau premium)
 * Le panneau navy démarre TOTALEMENT hors-écran (translateY 100vh)
 * et monte pour recouvrir "Notre histoire". Pas de fond bleu vide
 * avant l'animation : le bleu est le panneau lui-même.
 * ========================================================= */

/* Wrapper : 320vh + marge négative -80vh → la section commence
   à recouvrir le bas de "Notre histoire" et offre la zone de scroll
   nécessaire au pin. Transparent : aucun fond visible avant que
   le panneau ne remonte. */
.ardes-services-cover {
  position: relative;
  width: 100%;
  height: 320vh;
  margin-top: -80vh;
  z-index: 20;
  background: transparent;
  overflow: visible;
}

/* PANEL : sticky pendant le pin, démarre TOTALEMENT hors-écran
   (translateY 100vh). C'est lui — et lui seul — qui porte le bleu. */
.ardes-services-cover .services-panel {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #04064d;
  color: #ffffff;
  border-top-left-radius: 140px;
  border-top-right-radius: 140px;
  transform: translateY(100vh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 -40px 100px rgba(0, 0, 0, 0.22);
  will-change: transform, border-radius;
}

/* Conteneur intérieur (kicker + liste + cartes) */
.ardes-services-cover .services-inner {
  position: relative;
  width: min(1180px, calc(100% - 80px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  align-content: center;
}

/* Kicker (petit titre au-dessus) */
.ardes-services-cover .services-kicker {
  margin: 0 0 clamp(24px, 4vh, 56px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Liste de services */
.ardes-services-cover .services-list {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vh, 32px);
}

.ardes-services-cover .service-line {
  display: grid;
  grid-template-columns: 80px 1fr 70px;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: clamp(16px, 2.5vh, 32px);
  transition: padding-left 0.3s ease, color 0.3s ease;
}

.ardes-services-cover .service-line:hover {
  padding-left: 12px;
  color: #f2c200;
}

.ardes-services-cover .service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 5vw, 72px);
  height: clamp(48px, 5vw, 72px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  font-size: clamp(22px, 2.6vw, 32px);
  flex-shrink: 0;
  color: #ffffff;
}

.ardes-services-cover .service-title {
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
}

.ardes-services-cover .service-arrow {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 300;
  opacity: 0.6;
  text-align: right;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ardes-services-cover .service-line:hover .service-arrow {
  opacity: 1;
  transform: translateX(8px);
  color: #f2c200;
}

/* Cartes (light, posées par-dessus pendant l'animation) */
.ardes-services-cover .services-cards {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ardes-services-cover .service-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(820px, 86vw);
  min-height: 380px;
  /* Centrage géré par GSAP (xPercent/yPercent) pour ne pas
     entrer en conflit avec l'animation Y. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px;
  text-align: center;
  pointer-events: auto;
  opacity: 0;
  background: #f3f3f1;
  color: #04064d;
  border-radius: 48px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.25);
}

.ardes-services-cover .service-card h3 {
  font-size: clamp(36px, 6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 24px;
  color: #04064d;
}

.ardes-services-cover .service-card p {
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.5;
  max-width: 700px;
  color: rgba(4, 6, 77, 0.78);
  margin: 0 0 30px;
}

.ardes-services-cover .service-card .card-cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: #04064d;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease;
}

.ardes-services-cover .service-card .card-cta:hover {
  transform: translateY(-2px);
  background: #1c1f8a;
}

/* ===== MOBILE : pas de pin, pas de transform, layout vertical ===== */
@media (max-width: 768px) {
  .ardes-services-cover {
    height: auto;
    min-height: auto;
    margin-top: 0;
  }

  .ardes-services-cover .services-panel {
    position: relative;
    top: auto;
    transform: none !important;
    height: auto;
    min-height: auto;
    padding: 60px 24px;
    border-top-left-radius: 32px !important;
    border-top-right-radius: 32px !important;
    flex-direction: column;
    align-items: stretch;
  }

  .ardes-services-cover .services-kicker {
    margin-bottom: 24px;
  }

  .ardes-services-cover .services-list {
    margin-bottom: 40px;
  }

  .ardes-services-cover .service-line {
    grid-template-columns: 48px 1fr 32px;
    font-size: 22px;
    padding-bottom: 16px;
    gap: 16px;
  }

  .ardes-services-cover .service-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .ardes-services-cover .service-arrow {
    font-size: 22px;
  }

  /* Cartes en flux vertical sur mobile */
  .ardes-services-cover .services-cards {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
    pointer-events: auto;
  }

  .ardes-services-cover .service-card {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 32px 24px;
    border-radius: 24px;
    text-align: left;
    align-items: flex-start;
    box-shadow: none;
  }

  .ardes-services-cover .service-card h3 {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .ardes-services-cover .service-card p {
    font-size: 15px;
    margin-bottom: 18px;
  }
}

/* ===== Fallback no-gsap : tout visible, layout vertical ===== */
body.no-gsap .ardes-services-cover {
  height: auto;
  min-height: auto;
  margin-top: 0;
}

body.no-gsap .ardes-services-cover .services-panel {
  position: relative;
  top: auto;
  height: auto;
  min-height: auto;
  padding: 60px 24px;
  transform: none !important;
  border-top-left-radius: 120px !important;
  border-top-right-radius: 120px !important;
}

body.no-gsap .ardes-services-cover .service-line,
body.no-gsap .ardes-services-cover .service-icon,
body.no-gsap .ardes-services-cover .service-arrow,
body.no-gsap .ardes-services-cover .service-card {
  opacity: 1 !important;
  transform: none !important;
}

body.no-gsap .ardes-services-cover .services-cards {
  position: relative !important;
  inset: auto !important;
  height: auto;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

body.no-gsap .ardes-services-cover .service-card {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  width: 100%;
  min-height: 0;
  height: auto;
  padding: 32px 24px;
  border-radius: 24px;
  box-shadow: none;
}

/* =========================================================
 * ARDES v1.16.12 — FIX FINAL SERVICES COVER
 * Le panneau monte par-dessus "Notre histoire".
 * Important : pas de fond bleu sur le wrapper, seulement sur le panel.
 * ========================================================= */
html, body {
  overflow-x: hidden;
}

.ardes-services-cover {
  position: relative !important;
  width: 100% !important;
  height: 430vh !important;
  margin-top: -100vh !important;
  z-index: 50 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.ardes-services-cover .services-panel {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  background: #04064d !important;
  color: #fff !important;
  border-top-left-radius: 140px;
  border-top-right-radius: 140px;
  transform: translate3d(0, 100vh, 0);
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 -42px 110px rgba(0, 0, 0, 0.24) !important;
  pointer-events: auto !important;
  will-change: transform, border-radius;
}

.ardes-services-cover .services-inner {
  position: relative !important;
  width: min(1180px, calc(100% - 96px)) !important;
  height: 100vh !important;
  margin: 0 auto !important;
  display: grid !important;
  align-content: center !important;
}

.ardes-services-cover .services-kicker {
  margin: 0 0 clamp(26px, 4vh, 54px) !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.58) !important;
}

.ardes-services-cover .services-list {
  position: relative !important;
  z-index: 2 !important;
  width: min(1040px, 100%) !important;
  margin: 0 auto !important;
}

.ardes-services-cover .service-line {
  display: grid !important;
  grid-template-columns: 78px 1fr 70px !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.32) !important;
  color: #f5f2e9 !important;
  text-decoration: none !important;
  opacity: 0;
  transform: translateY(70px);
}

.ardes-services-cover .service-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.08) !important;
  color: #f2c200 !important;
  font-size: 25px !important;
}

.ardes-services-cover .service-title {
  font-size: clamp(42px, 5.7vw, 82px) !important;
  line-height: 0.94 !important;
  font-weight: 850 !important;
  letter-spacing: -0.055em !important;
}

.ardes-services-cover .service-arrow {
  justify-self: end !important;
  font-size: 52px !important;
  line-height: 1 !important;
  color: #f5f2e9 !important;
}

.ardes-services-cover .services-cards {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.ardes-services-cover .service-card {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(860px, 86vw) !important;
  min-height: 390px !important;
  border-radius: 52px !important;
  background: #f3f3f1 !important;
  color: #04064d !important;
  padding: clamp(42px, 6vw, 76px) !important;
  text-align: center !important;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(90px);
  box-shadow: 0 38px 95px rgba(0,0,0,0.26) !important;
}

.ardes-services-cover .service-card h3 {
  margin: 0 0 24px !important;
  font-size: clamp(46px, 6vw, 86px) !important;
  line-height: 0.95 !important;
  font-weight: 850 !important;
  letter-spacing: -0.06em !important;
  color: #04064d !important;
}

.ardes-services-cover .service-card p {
  max-width: 620px !important;
  margin: 0 auto 30px !important;
  font-size: 20px !important;
  line-height: 1.45 !important;
  color: rgba(4,6,77,0.72) !important;
}

.ardes-services-cover .service-card .card-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  background: #04064d !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .ardes-services-cover {
    height: auto !important;
    margin-top: 0 !important;
    background: #04064d !important;
    pointer-events: auto !important;
  }

  .ardes-services-cover .services-panel {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: auto !important;
    transform: none !important;
    border-top-left-radius: 42px !important;
    border-top-right-radius: 42px !important;
    padding: 64px 0 !important;
  }

  .ardes-services-cover .services-inner {
    width: calc(100% - 36px) !important;
    height: auto !important;
    min-height: auto !important;
  }

  .ardes-services-cover .services-list {
    width: 100% !important;
    margin: 0 0 42px !important;
  }

  .ardes-services-cover .service-line {
    opacity: 1 !important;
    transform: none !important;
    grid-template-columns: 44px 1fr 30px !important;
    gap: 14px !important;
    padding: 19px 0 !important;
  }

  .ardes-services-cover .service-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
  }

  .ardes-services-cover .service-title {
    font-size: 31px !important;
    letter-spacing: -0.045em !important;
  }

  .ardes-services-cover .service-arrow {
    font-size: 28px !important;
  }

  .ardes-services-cover .services-cards {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    gap: 18px !important;
  }

  .ardes-services-cover .service-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-height: auto !important;
    opacity: 1 !important;
    transform: none !important;
    border-radius: 28px !important;
    padding: 32px 24px !important;
    text-align: left !important;
  }

  .ardes-services-cover .service-card h3 {
    font-size: 34px !important;
  }

  .ardes-services-cover .service-card p {
    font-size: 16px !important;
    margin-left: 0 !important;
  }
}

/* =========================================================
 * ARDÈS v1.16.13 — HOTFIX Services Cover
 * - le panneau ne démarre plus trop tôt : on voit encore Notre histoire
 * - pas de fond bleu vide avant l'arrivée du panneau
 * - cartes vraiment centrées et visibles dans un encadré clair
 * ========================================================= */
.ardes-services-cover {
  position: relative !important;
  width: 100% !important;
  height: 390vh !important;
  margin-top: 0 !important;
  z-index: 20 !important;
  background: transparent !important;
  overflow: visible !important;
}

.ardes-services-cover .services-panel {
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  background: #04064d !important;
  color: #ffffff !important;
  border-top-left-radius: 140px;
  border-top-right-radius: 140px;
  transform: translateY(105vh);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-shadow: 0 -44px 110px rgba(0, 0, 0, 0.22) !important;
  will-change: transform, border-radius !important;
}

.ardes-services-cover .services-inner {
  position: relative !important;
  width: min(1180px, calc(100% - 80px)) !important;
  height: 100% !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  display: grid !important;
  align-content: center !important;
}

.ardes-services-cover .services-list {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
}

.ardes-services-cover .services-cards {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 6 !important;
}

.ardes-services-cover .service-card {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(820px, 86vw) !important;
  min-height: 380px !important;
  padding: 72px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  opacity: 0;
  visibility: hidden;
  background: #f3f3f1 !important;
  color: #04064d !important;
  border-radius: 48px !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.25) !important;
}

.ardes-services-cover .service-card h3 {
  color: #04064d !important;
  font-size: clamp(36px, 6vw, 88px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
}

@media (max-width: 768px) {
  .ardes-services-cover {
    height: auto !important;
    min-height: auto !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  .ardes-services-cover .services-panel {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: auto !important;
    padding: 72px 20px !important;
    border-top-left-radius: 42px !important;
    border-top-right-radius: 42px !important;
  }

  .ardes-services-cover .services-inner {
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
  }

  .ardes-services-cover .service-line,
  .ardes-services-cover .service-icon,
  .ardes-services-cover .service-arrow,
  .ardes-services-cover .service-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .ardes-services-cover .services-cards {
    position: relative !important;
    display: grid !important;
    gap: 20px !important;
    height: auto !important;
    margin-top: 42px !important;
    pointer-events: auto !important;
  }

  .ardes-services-cover .service-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 32px 24px !important;
    border-radius: 28px !important;
    box-shadow: none !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
}

/* =========================================================
 * ARDÈS v1.16.14 — Services cover final tuning
 * - pas d'écran bleu vide après Câblage réseau
 * - le panneau arrive par-dessus Notre histoire grâce au chevauchement
 * - toutes les règles précédentes sont neutralisées par ces overrides
 * ========================================================= */
.ardes-services-cover {
  position: relative !important;
  width: 100% !important;
  height: 255vh !important;
  min-height: 255vh !important;
  margin-top: -42vh !important;
  z-index: 60 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.ardes-services-cover .services-panel {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  background: #04064d !important;
  color: #fff !important;
  transform: translate3d(0, 104vh, 0);
  border-top-left-radius: 48vw;
  border-top-right-radius: 48vw;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 -44px 110px rgba(0, 0, 0, 0.22) !important;
  will-change: transform, border-radius !important;
  pointer-events: auto !important;
}

.ardes-services-cover .services-inner {
  position: relative !important;
  width: min(1180px, calc(100% - 96px)) !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  display: grid !important;
  align-content: center !important;
}

.ardes-services-cover .services-kicker {
  margin: 0 0 clamp(28px, 4vh, 54px) !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
}

.ardes-services-cover .services-list {
  position: relative !important;
  z-index: 4 !important;
  width: min(1060px, 100%) !important;
  margin: 0 auto !important;
  display: block !important;
}

.ardes-services-cover .service-line {
  display: grid !important;
  grid-template-columns: 78px 1fr 70px !important;
  align-items: center !important;
  gap: 28px !important;
  padding: clamp(16px, 2.3vh, 24px) 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.30) !important;
  color: #f6f3e9 !important;
  text-decoration: none !important;
  opacity: 0;
  transform: translateY(74px);
}

.ardes-services-cover .service-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.08) !important;
  color: #f2c200 !important;
  font-size: 24px !important;
}

.ardes-services-cover .service-title {
  font-size: clamp(42px, 5.6vw, 80px) !important;
  line-height: 0.95 !important;
  font-weight: 850 !important;
  letter-spacing: -0.055em !important;
}

.ardes-services-cover .service-arrow {
  justify-self: end !important;
  font-size: 50px !important;
  line-height: 1 !important;
  color: #f6f3e9 !important;
  opacity: 0;
}

.ardes-services-cover .services-cards {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 8 !important;
  pointer-events: none !important;
}

.ardes-services-cover .service-card {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(840px, 86vw) !important;
  min-height: 370px !important;
  padding: clamp(44px, 6vw, 72px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  opacity: 0;
  visibility: hidden;
  background: #f3f3f1 !important;
  color: #04064d !important;
  border-radius: 48px !important;
  box-shadow: 0 36px 90px rgba(0,0,0,0.25) !important;
}

.ardes-services-cover .service-card h3 {
  margin: 0 0 22px !important;
  color: #04064d !important;
  font-size: clamp(42px, 6vw, 84px) !important;
  line-height: 0.95 !important;
  font-weight: 850 !important;
  letter-spacing: -0.06em !important;
}

.ardes-services-cover .service-card p {
  max-width: 640px !important;
  margin: 0 auto 30px !important;
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.45 !important;
  color: rgba(4,6,77,0.72) !important;
}

.ardes-services-cover .service-card .card-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  background: #04064d !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .ardes-services-cover {
    height: auto !important;
    min-height: auto !important;
    margin-top: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  .ardes-services-cover .services-panel {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: auto !important;
    border-top-left-radius: 42px !important;
    border-top-right-radius: 42px !important;
    padding: 66px 20px !important;
  }

  .ardes-services-cover .services-inner {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  .ardes-services-cover .service-line {
    opacity: 1 !important;
    transform: none !important;
    grid-template-columns: 42px 1fr 28px !important;
    gap: 12px !important;
    padding: 18px 0 !important;
  }

  .ardes-services-cover .service-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
  }

  .ardes-services-cover .service-title {
    font-size: 31px !important;
  }

  .ardes-services-cover .service-arrow {
    opacity: 1 !important;
    font-size: 28px !important;
  }

  .ardes-services-cover .services-cards {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    gap: 18px !important;
    margin-top: 40px !important;
  }

  .ardes-services-cover .service-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    border-radius: 28px !important;
    padding: 32px 24px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .ardes-services-cover .service-card h3 {
    font-size: 34px !important;
  }

  .ardes-services-cover .service-card p {
    font-size: 16px !important;
    margin-left: 0 !important;
  }
}

/* =========================================================
 * ARDÈS v1.16.15 — Services SPLIT architecture
 * - transition visuelle séparée
 * - animation interne pinned séparée
 * ========================================================= */
.ardes-services-transition {
  position: relative !important;
  height: 62vh !important;
  margin-top: -26vh !important;
  z-index: 50 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.ardes-services-transition .services-transition-panel {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  background: #04064d !important;
  color: #fff !important;
  border-top-left-radius: 48vw;
  border-top-right-radius: 48vw;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translate3d(0, 58vh, 0);
  box-shadow: 0 -44px 110px rgba(0,0,0,0.22) !important;
  will-change: transform, border-radius !important;
}

.ardes-services-transition .services-transition-panel p {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.62) !important;
}

.ardes-services-motion {
  position: relative !important;
  z-index: 51 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  background: #04064d !important;
  color: #fff !important;
  overflow: hidden !important;
}

.ardes-services-motion .services-motion-inner {
  position: relative !important;
  width: min(1180px, calc(100% - 96px)) !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  display: grid !important;
  align-content: center !important;
}

.ardes-services-motion .services-kicker {
  margin: 0 0 clamp(28px, 4vh, 54px) !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
}

.ardes-services-motion .services-list {
  position: relative !important;
  z-index: 4 !important;
  width: min(1060px, 100%) !important;
  margin: 0 auto !important;
  display: block !important;
}

.ardes-services-motion .service-line {
  display: grid !important;
  grid-template-columns: 78px 1fr 70px !important;
  align-items: center !important;
  gap: 28px !important;
  padding: clamp(16px, 2.3vh, 24px) 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.30) !important;
  color: #f6f3e9 !important;
  text-decoration: none !important;
  opacity: 0;
  transform: translateY(74px);
}

.ardes-services-motion .service-line:hover {
  color: #ffffff !important;
}

.ardes-services-motion .service-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.08) !important;
  color: #f2c200 !important;
  font-size: 24px !important;
}

.ardes-services-motion .service-title {
  font-size: clamp(42px, 5.6vw, 80px) !important;
  line-height: 0.95 !important;
  font-weight: 850 !important;
  letter-spacing: -0.055em !important;
}

.ardes-services-motion .service-arrow {
  justify-self: end !important;
  font-size: 50px !important;
  line-height: 1 !important;
  color: #f6f3e9 !important;
  opacity: 0;
}

.ardes-services-motion .services-cards {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 8 !important;
  pointer-events: none !important;
}

.ardes-services-motion .service-card {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(840px, 86vw) !important;
  min-height: 370px !important;
  padding: clamp(44px, 6vw, 72px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  opacity: 0;
  visibility: hidden;
  background: #f3f3f1 !important;
  color: #04064d !important;
  border-radius: 48px !important;
  box-shadow: 0 36px 90px rgba(0,0,0,0.25) !important;
}

.ardes-services-motion .service-card h3 {
  margin: 0 0 22px !important;
  color: #04064d !important;
  font-size: clamp(42px, 6vw, 84px) !important;
  line-height: 0.95 !important;
  font-weight: 850 !important;
  letter-spacing: -0.06em !important;
}

.ardes-services-motion .service-card p {
  max-width: 640px !important;
  margin: 0 auto 30px !important;
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.45 !important;
  color: rgba(4,6,77,0.72) !important;
}

.ardes-services-motion .service-card .card-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  background: #04064d !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  .ardes-services-transition {
    height: auto !important;
    margin-top: 0 !important;
  }

  .ardes-services-transition .services-transition-panel {
    height: auto !important;
    min-height: auto !important;
    transform: none !important;
    border-top-left-radius: 42px !important;
    border-top-right-radius: 42px !important;
    padding: 66px 20px 20px !important;
    box-shadow: none !important;
  }

  .ardes-services-motion {
    height: auto !important;
    min-height: auto !important;
    overflow: hidden !important;
    padding: 30px 20px 72px !important;
  }

  .ardes-services-motion .services-motion-inner {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  .ardes-services-motion .service-line,
  .ardes-services-motion .service-icon,
  .ardes-services-motion .service-arrow,
  .ardes-services-motion .service-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .ardes-services-motion .service-line {
    grid-template-columns: 42px 1fr 28px !important;
    gap: 12px !important;
    padding: 18px 0 !important;
  }

  .ardes-services-motion .service-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    font-size: 17px !important;
  }

  .ardes-services-motion .service-title {
    font-size: 31px !important;
  }

  .ardes-services-motion .service-arrow {
    opacity: 1 !important;
    font-size: 28px !important;
  }

  .ardes-services-motion .services-cards {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    gap: 18px !important;
    margin-top: 40px !important;
  }

  .ardes-services-motion .service-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-height: auto !important;
    border-radius: 28px !important;
    padding: 32px 24px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .ardes-services-motion .service-card h3 {
    font-size: 34px !important;
  }

  .ardes-services-motion .service-card p {
    font-size: 16px !important;
    margin-left: 0 !important;
  }
}