/* ═══════════════════════════════════════════════════════════════
   WELCOME HOST — Direction 3A
   Base + design tokens, porté fidèlement des maquettes DesignCenter
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Couleurs */
  --wh-cream:#F7F0E3;        /* fond principal (sable) */
  --wh-cream-lt:#FFF6EB;     /* crème clair / texte sur sombre */
  --wh-ink:#0B2B30;          /* encre / texte principal */
  --wh-fir:#071f23;          /* vert sapin : top-bar, footer */
  --wh-dark-2:#103a40;       /* surface sombre secondaire */
  --wh-teal:#008091;         /* teal de marque */
  --wh-teal-dk:#11636F;      /* teal hover */
  --wh-mint:#9BEABC;         /* accent menthe */
  --wh-blue-lt:#f4f9fa;      /* sections alternées */
  --wh-teal-pale:#e6f5f7;    /* badges sur clair */
  --wh-amber:#FFB93E;        /* badges, étoiles */
  --wh-text-2:#4A5A5E;
  --wh-text-3:#7a8a8e;
  /* Layout */
  --wh-container:1320px;
  --wh-gutter:44px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{margin:0}
html{scroll-behavior:smooth}
::selection{background:var(--wh-teal);color:var(--wh-cream-lt)}
a{color:var(--wh-teal)}
a:hover{color:var(--wh-teal-dk)}

body.wh-3a{
  font-family:'Poppins',-apple-system,system-ui,sans-serif;
  background:var(--wh-cream);
  color:var(--wh-ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Animations ── */
@keyframes whDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,34px)}}
@keyframes whDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-44px,26px)}}
@keyframes whFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes whFloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes whPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
@keyframes whKen{from{transform:scale(1.03)}to{transform:scale(1.13)}}
@keyframes whScroll{0%{transform:translateY(0);opacity:.9}60%{transform:translateY(9px);opacity:.25}100%{transform:translateY(0);opacity:.9}}

/* ── Révélation au scroll ── */
.wh-js [data-reveal]{opacity:0;transform:translateY(26px);transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .7s cubic-bezier(.22,.61,.36,1)}
.wh-js [data-reveal].wh-in{opacity:1 !important;transform:none !important}

/* Accessibilité : respecter la préférence système */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .wh-js [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ── Grain subtil ── */
.wh-grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.03;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Liens de navigation (soulignement animé) ── */
.wh-navlink{position:relative;transition:color .2s ease}
.wh-navlink::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--wh-teal);border-radius:2px;transition:width .28s cubic-bezier(.22,.61,.36,1)}
.wh-navlink:hover{color:var(--wh-teal)}
.wh-navlink:hover::after{width:100%}

/* ── Boutons ── */
.wh-btn{transition:transform .22s cubic-bezier(.22,.61,.36,1),background .25s ease,color .25s ease,box-shadow .25s ease,border-color .25s ease}
.wh-btn:hover{transform:translateY(-3px)}
.wh-btn-teal{box-shadow:0 14px 30px -16px rgba(0,128,145,.8)}
.wh-btn-teal:hover{background:var(--wh-teal-dk) !important;box-shadow:0 20px 40px -14px rgba(0,128,145,.85)}
.wh-btn-white:hover{background:#fff !important;color:var(--wh-ink) !important}
.wh-btn-mint:hover{background:#8fe0b2 !important}
.wh-btn-outline:hover{background:rgba(11,43,48,.06) !important;border-color:rgba(11,43,48,.4) !important}
.wh-btn-outline-l:hover{background:rgba(255,246,235,.12) !important;border-color:var(--wh-mint) !important}

/* ── Cartes / composants ── */
.wh-door{transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.wh-door:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(11,43,48,.4)}
.wh-svc{transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.wh-svc:hover{transform:translateY(-5px);box-shadow:0 26px 54px -34px rgba(11,43,48,.35)}
.wh-svc:hover .wh-svc-ic{transform:scale(1.1) rotate(-4deg)}
.wh-svc-ic{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.wh-rev{transition:transform .3s ease,box-shadow .3s ease}
.wh-rev:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(11,43,48,.32)}
.wh-zone{transition:all .2s ease;cursor:pointer}
.wh-faqbtn:hover{color:var(--wh-teal)}
.wh-plat{transition:color .2s ease,border-color .2s ease,transform .2s ease}
.wh-plat:hover{color:var(--wh-teal);border-color:rgba(0,128,145,.4);transform:translateY(-2px)}

/* ── Accent typographique (DM Serif Display italique) ── */
.wh-accent{font-family:'DM Serif Display',Georgia,serif;font-style:italic;font-weight:400;color:var(--wh-teal)}

/* ── Conteneur ── */
.wh-wrap{max-width:var(--wh-container);margin:0 auto;padding:0 var(--wh-gutter)}

/* ═══ REPRIS DE L'ANCIEN THÈME ENFANT (hello-elementor-child) — À PRÉSERVER ═══ */
/* Titre masqué visuellement mais lu par Google (SEO — ajouté 2026-04-20) */
.wh-sr-only{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;overflow:hidden !important;
  clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;
}
/* Masque le H1 "entry-title" injecté par Hello Elementor
   (chaque page porte déjà son propre titre) */
.entry-title{display:none !important}

/* ═══ CHROME : top-bar / header / menu mobile / footer ═══ */
.wh-topbar{background:var(--wh-fir);color:var(--wh-cream-lt);position:relative;z-index:40}
.wh-topbar-in{max-width:var(--wh-container);margin:0 auto;padding:0 var(--wh-gutter);height:42px;display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:13px;font-weight:500}
.wh-topbar-lbl{color:rgba(255,246,235,.55)}
.wh-topbar-sep{color:rgba(255,246,235,.28);font-weight:400}
.wh-topbar-link{text-decoration:none;color:var(--wh-mint);font-weight:600}

.wh-header{position:sticky;top:0;z-index:50;background:rgba(247,240,227,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(11,43,48,.08)}
.wh-header-in{max-width:var(--wh-container);margin:0 auto;padding:0 var(--wh-gutter);height:82px;display:flex;align-items:center;justify-content:space-between;gap:36px}
.wh-logo{text-decoration:none;display:flex;align-items:center}
.wh-logo img{height:36px;width:auto;display:block}
.wh-nav-tabs{display:flex;align-items:center;gap:36px}
.wh-nav-tabs a{text-decoration:none;color:var(--wh-ink);font-size:15px;font-weight:500}
.wh-nav-cta{text-decoration:none;background:var(--wh-teal);color:var(--wh-cream-lt);font-size:15px;font-weight:600;padding:13px 24px;border-radius:40px;white-space:nowrap}

.wh-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.wh-burger span{display:block;width:26px;height:2.5px;background:var(--wh-ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}

/* Menu mobile plein écran */
.wh-mobile{position:fixed;inset:0;z-index:80;background:var(--wh-cream);display:none;flex-direction:column;padding:24px var(--wh-gutter) 40px}
.wh-mobile.wh-open{display:flex}
body.wh-menu-open{overflow:hidden}
.wh-mobile-top{display:flex;align-items:center;justify-content:space-between;height:58px}
.wh-mobile-close{background:none;border:none;font-size:34px;line-height:1;cursor:pointer;color:var(--wh-ink);padding:0 4px}
.wh-mobile-nav{display:flex;flex-direction:column;gap:6px;margin-top:26px}
.wh-mobile-nav a{text-decoration:none;color:var(--wh-ink);font-size:24px;font-weight:600;padding:14px 0;border-bottom:1px solid rgba(11,43,48,.08)}
.wh-mobile-cta{margin-top:28px;text-decoration:none;background:var(--wh-teal);color:var(--wh-cream-lt);font-size:16px;font-weight:600;padding:16px 26px;border-radius:40px;text-align:center;display:block}

.wh-footer{background:var(--wh-fir);color:rgba(255,246,235,.7)}
.wh-footer-grid{max-width:var(--wh-container);margin:0 auto;padding:80px var(--wh-gutter) 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
.wh-footer-brand{font-size:21px;font-weight:700;color:var(--wh-cream-lt);margin-bottom:18px}
.wh-footer-base{font-size:14.5px;line-height:1.62;max-width:300px}
.wh-footer-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,246,235,.46);font-weight:600;margin-bottom:18px}
.wh-footer-col{display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.wh-footer-col a{text-decoration:none;color:rgba(255,246,235,.7)}
.wh-footer-legal{max-width:var(--wh-container);margin:0 auto;padding:24px var(--wh-gutter);border-top:1px solid rgba(255,246,235,.14);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:rgba(255,246,235,.46)}
.wh-footer-legal a{text-decoration:none;color:rgba(255,246,235,.46)}

/* ── Responsive ── */
@media(max-width:960px){
  :root{--wh-gutter:22px}
  .wh-nav-tabs,.wh-nav-cta{display:none !important}
  .wh-burger{display:flex !important}
  .wh-footer-grid{grid-template-columns:1fr 1fr !important}
  .wh-hero-grid,.wh-doors,.wh-est-grid,.wh-svc-grid,.wh-2col{grid-template-columns:1fr !important}
  .wh-hero-badges{display:none !important}
  .wh-steps{grid-template-columns:1fr 1fr !important}
  .wh-steps .wh-stepline{display:none !important}
  .wh-metrics{grid-template-columns:1fr 1fr !important}
}
@media(max-width:560px){
  .wh-steps,.wh-metrics{grid-template-columns:1fr !important}
  .wh-footer-grid{grid-template-columns:1fr !important}
}

/* ISOLATION-CHROME-3A */
/* ═══════════════════════════════════════════════════════════════
   Le kit global Elementor impose sa couleur à tous les <a> de la page,
   avec une priorité supérieure à nos règles simples : les onglets et le
   bouton du header en héritaient et devenaient illisibles.

   Ces règles reprennent la main sur le seul chrome (top-bar, header, menu
   mobile, footer). Le préfixe body.wh-3a suffirait dans la plupart des cas ;
   le !important garantit le résultat même si Elementor durcit ses règles.
   Portée volontairement limitée aux classes wh-* : le contenu des pages,
   lui, reste entièrement piloté par Elementor.
   ═══════════════════════════════════════════════════════════════ */

/* Top-bar (fond vert sapin) */
body.wh-3a .wh-topbar-lbl{color:rgba(255,246,235,.55) !important}
body.wh-3a .wh-topbar-link{color:var(--wh-mint) !important}
body.wh-3a .wh-topbar-link:hover{color:var(--wh-cream-lt) !important}
body.wh-3a .wh-topbar-sep{color:rgba(255,246,235,.28) !important}

/* Logo : height/max-width explicites, sinon les règles img globales l'écrasent */
body.wh-3a .wh-logo img{height:36px !important;width:auto !important;max-width:none !important}

/* Onglets de navigation (fond crème) */
body.wh-3a .wh-nav-tabs a{color:var(--wh-ink) !important}
body.wh-3a .wh-nav-tabs a:hover{color:var(--wh-teal) !important}

/* Bouton principal du header */
body.wh-3a .wh-nav-cta{background:var(--wh-teal) !important;color:var(--wh-cream-lt) !important}
body.wh-3a .wh-nav-cta:hover{background:var(--wh-teal-dk) !important;color:var(--wh-cream-lt) !important}

/* Menu mobile plein écran */
body.wh-3a .wh-mobile-nav a{color:var(--wh-ink) !important}
body.wh-3a .wh-mobile-cta{background:var(--wh-teal) !important;color:var(--wh-cream-lt) !important}
body.wh-3a .wh-mobile-close{color:var(--wh-ink) !important}
body.wh-3a .wh-burger span{background:var(--wh-ink) !important}

/* Footer (fond vert sapin) */
body.wh-3a .wh-footer-col a{color:rgba(255,246,235,.7) !important}
body.wh-3a .wh-footer-legal a{color:rgba(255,246,235,.46) !important}
body.wh-3a .wh-footer-col a:hover,
body.wh-3a .wh-footer-legal a:hover{color:var(--wh-cream-lt) !important}
body.wh-3a .wh-footer-brand{color:var(--wh-cream-lt) !important}

/* Le soulignement animé ne doit jamais être masqué par un style de lien hérité */
body.wh-3a .wh-navlink{text-decoration:none !important}