/* =========================================================
   HD Web Digital — base visuelle du site principal (refonte 2026)
   Couleurs : bleu marine à la place du noir, orange en accent.
   Chargé par l'extrait WPCode « HD — Base globale et animations »
   depuis /wp-content/uploads/hd-assets/ (police et scripts auto-hébergés).
   ========================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --hd-navy: #0B1F3A;        /* remplace le noir du template */
  --hd-navy-2: #132B4D;      /* cartes sur fond marine */
  --hd-orange: #ED6C3D;      /* accent, boutons, chiffres */
  --hd-orange-dark: #C9552A; /* survol */
  --hd-bg: #F7F8FA;          /* fond blanc cassé */
  --hd-card: #FFFFFF;
  --hd-line: #E3E7EE;
  --hd-text: #1B2433;
  --hd-text-2: #5B6678;
  --hd-radius: 14px;
  --hd-font: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Police sur tout le site (prend le pas sur Figtree réglé dans Divi).
   Fond et couleur du texte : posés section par section, pas en global,
   pour ne pas casser les anciennes pages pendant la refonte. */
html body, html body input, html body textarea, html body select, html body button,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .et_pb_module, html body #main-header, html body #main-footer {
  font-family: var(--hd-font);
}
.hd-light { background: var(--hd-bg); color: var(--hd-text); }

/* Titres en capitales, serrés, comme le template */
.hd-h-xl { font-size: clamp(56px, 11vw, 168px); line-height: .9; letter-spacing: -.04em; font-weight: 700; text-transform: uppercase; color: var(--hd-navy); }
.hd-h-lg { font-size: clamp(36px, 5.5vw, 76px); line-height: .98; letter-spacing: -.03em; font-weight: 700; text-transform: uppercase; color: var(--hd-navy); }
.hd-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--hd-text-2); }
.hd-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--hd-orange); }

/* Bouton marine + carré flèche orange */
.hd-btn { display: inline-flex; align-items: stretch; background: var(--hd-navy); color: #fff !important; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; border-radius: 6px; overflow: hidden; text-decoration: none; }
.hd-btn span { padding: 14px 18px; }
.hd-btn i { display: grid; place-items: center; width: 44px; background: var(--hd-orange); font-style: normal; transition: transform .35s ease; }
.hd-btn:hover i { transform: translateX(3px) rotate(-45deg); }

/* Sections sombres */
.hd-dark { background: var(--hd-navy); color: #fff; }
.hd-dark .hd-h-lg, .hd-dark .hd-h-xl { color: #fff; }
.hd-dark .hd-card { background: var(--hd-navy-2); border-color: transparent; color: #fff; }

.hd-card { background: var(--hd-card); border: 1px solid var(--hd-line); border-radius: var(--hd-radius); padding: 28px; }
.hd-count { color: var(--hd-orange); font-weight: 700; }

/* Bandeau défilant (remplace les bandes rayées des landing pages) */
.hd-marquee { overflow: hidden; white-space: nowrap; }
.hd-marquee__track { display: inline-flex; gap: 48px; padding-right: 48px; animation: hd-marquee 28s linear infinite; }
.hd-marquee:hover .hd-marquee__track { animation-play-state: paused; }
@keyframes hd-marquee { to { transform: translateX(-50%); } }

/* Cartes projets qui s'empilent (page Réalisations / accueil) */
.hd-stack-item { position: sticky; top: 110px; }

/* Logo géant du pied de page */
.hd-footer-logo { font-size: clamp(64px, 16vw, 260px); line-height: .8; font-weight: 800; letter-spacing: -.05em; color: var(--hd-orange); text-transform: uppercase; white-space: nowrap; }

/* État initial des éléments animés : seulement quand le JS tourne,
   jamais dans le Visual Builder (sinon les blocs restent invisibles) */
html.hd-motion .hd-reveal { opacity: 0; transform: translateY(40px); }
html.hd-motion .hd-split { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hd-marquee__track { animation: none; }
  html.hd-motion .hd-reveal { opacity: 1; transform: none; }
  html.hd-motion .hd-split { visibility: visible; }
}

/* Titres découpés mot par mot : marge invisible pour ne pas rogner
   les accents des majuscules (É, À…) ni les jambages (g, p…) */
.hd-line-mask { padding: .2em 0 .08em; margin: -.2em 0 -.08em; }