/* =========================================================================
   Agence H1 — systeme de design global (charge site-wide)
   Sert les widgets Elementor NATIFS : on pose les memes classes que le design
   (.phead, .lead, .btn, .cpanel...) sur les widgets, cette feuille les habille.
   Les polices sont auto-hebergees (RGPD + vitesse) — voir h1-polices.php.
   ========================================================================= */
:root{
  --blue:#3D41E9; --yellow:#F5C518; --ink:#14141C; --paper:#FFFFFF;
  --mist:#EEEEF6; --lilac:#C9CBF5; --grey:#6E6E82;
  --line:rgba(20,20,28,.12); --dim:rgba(20,20,28,.6);
}

/* ---- primitives partagees ---- */
.h1-disp{font-family:'Overused Grotesk','Inter Tight',sans-serif}
.h1-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(22px,4vw,56px)}
.h1-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em}
.h1-eyebrow{display:flex;align-items:center;gap:13px;margin-bottom:22px;color:var(--blue)}
.h1-eyebrow .ln{height:2px;width:34px;background:var(--yellow);flex:none}
.h1-lead{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--dim)}

.h1-btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:13px;
  padding:16px 26px;transition:transform .25s,background .25s,color .25s;border:none;cursor:pointer;
  font-family:inherit;text-decoration:none}
.h1-btn:hover{transform:translateY(-2px)}
.h1-btn.y{background:var(--yellow);color:var(--ink)}.h1-btn.y:hover{background:var(--ink);color:#fff}
.h1-btn.b{background:var(--blue);color:#fff}.h1-btn.b:hover{background:var(--ink)}

/* ---- NAV (en-tete Theme Builder) ---- */
.h1-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.h1-nav-in{height:74px;display:flex;align-items:center;justify-content:space-between}
.h1-brand{display:flex;align-items:center;gap:11px;font-family:'Overused Grotesk',sans-serif;
  font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.h1-brand svg{width:26px;height:26px;color:var(--blue)}
.h1-navlinks{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.h1-navlinks a{font-size:14px;font-weight:500;color:var(--ink);opacity:.8;transition:.2s;text-decoration:none}
.h1-navlinks a:hover,.h1-navlinks a.on{opacity:1;color:var(--blue)}
.h1-navlinks a.cta{background:var(--yellow);color:var(--ink);font-weight:600;font-size:12.5px;padding:11px 20px;opacity:1}
.h1-navlinks a.cta:hover{background:var(--ink);color:#fff}
@media(max-width:640px){.h1-navlinks a:not(.cta){display:none}}

/* ---- FOOTER (pied Theme Builder) ---- */
.h1-foot{background:var(--ink);color:#fff}
.h1-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;
  padding:clamp(50px,6vw,80px) 0 40px;border-bottom:1px solid rgba(255,255,255,.14)}
.h1-foot-top .h1-brand{color:#fff}.h1-foot-top .h1-brand svg{color:#fff}
.h1-foot-top p{max-width:320px;margin-top:18px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.6)}
.h1-fcol .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:16px}
.h1-fcol a,.h1-fcol div{display:block;font-size:14px;color:rgba(255,255,255,.78);margin-bottom:11px;text-decoration:none}
.h1-fcol a:hover{color:#fff}
.h1-bigfoot{font-family:'Overused Grotesk',sans-serif;font-weight:700;font-size:clamp(60px,15vw,240px);
  line-height:.8;letter-spacing:-.045em;color:var(--blue);padding:clamp(20px,3vw,40px) 0}
.h1-foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:24px 0 44px;
  font-size:12px;color:rgba(255,255,255,.5)}
@media(max-width:760px){.h1-foot-top{grid-template-columns:1fr 1fr}.h1-foot-top .h1-brand{grid-column:1/-1}}

/* ---- CONTACT ----
   On cible la structure Elementor (.elementor-heading-title) avec assez de
   specificite pour battre le kit (sinon le titre sort tout bleu et la
   hauteur de ligne d'Elementor l'emporte). */
.h1-phead .elementor-heading-title,
.h1-phead h1,.h1-phead .phead-t{font-family:'Overused Grotesk',sans-serif !important;font-weight:700;
  font-size:clamp(44px,8vw,120px) !important;line-height:.94 !important;letter-spacing:-.045em;
  color:var(--ink) !important}
.h1-phead .bl{color:var(--blue) !important}

.h1-cpanel{background:var(--blue);color:#fff;padding:clamp(26px,3vw,40px);position:relative;overflow:hidden}
.h1-cpanel .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:20px}
.h1-cpanel .line{display:block;margin-bottom:16px}
.h1-cpanel .line:last-child{margin-bottom:0}
.h1-cpanel .line .t{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.h1-cpanel .line .v{font-family:'Overused Grotesk',sans-serif;font-weight:700;
  font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;margin-top:3px}
.h1-cpanel .wm{position:absolute;right:-10%;bottom:-24%;width:52%;color:rgba(255,255,255,.1)}

.h1-cassure{border:1px solid var(--line);padding:clamp(22px,2.5vw,32px);display:flex;gap:16px;align-items:flex-start}
.h1-cassure .ic{width:44px;height:44px;background:var(--yellow);display:grid;place-items:center;flex:none}
.h1-cassure .ic svg{width:22px;color:var(--ink)}
.h1-cassure .t{font-family:'Overused Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em}
.h1-cassure p{font-size:13.5px;line-height:1.5;color:var(--dim);margin-top:5px}
.h1-cassure .team{margin-top:9px;font-size:13px;color:var(--ink)}
.h1-cassure .team b{font-weight:600}

/* ---- Formulaire Elementor natif habille facon design ----
   !important cible, portee au seul .h1-form : on neutralise les styles internes
   du widget Form (fond, bordures, couleur du bouton) sans deborder ailleurs. */
.h1-form .elementor-field-group > label{font-size:11px !important;font-weight:600 !important;
  text-transform:uppercase;letter-spacing:.12em;color:var(--dim) !important;margin-bottom:8px}
.h1-form .elementor-field-group .elementor-field{width:100%;font-family:inherit;font-size:15px !important;
  color:var(--ink) !important;background:var(--mist) !important;border:1px solid transparent !important;
  padding:14px 15px !important;transition:.2s;outline:none;border-radius:0 !important;box-shadow:none !important}
.h1-form .elementor-field-group .elementor-field:focus{border-color:var(--blue) !important;background:#fff !important}
.h1-form textarea.elementor-field{resize:vertical;min-height:130px}
.h1-form .elementor-button{background:var(--yellow) !important;color:var(--ink) !important;font-weight:600 !important;
  font-size:13px !important;border-radius:0 !important;padding:16px 26px !important;
  transition:transform .25s,background .25s,color .25s;box-shadow:none !important}
.h1-form .elementor-button:hover{transform:translateY(-2px);background:var(--ink) !important;color:#fff !important}
.h1-form .elementor-button .elementor-button-text{color:inherit !important}

/* ---- BANDE CTA (widgets natifs : heading + bouton) ---- */
.h1-ctaband{background:var(--yellow)}
.h1-ctaband .elementor-heading-title{font-family:'Overused Grotesk',sans-serif !important;font-weight:700;
  font-size:clamp(30px,4vw,58px) !important;letter-spacing:-.03em;line-height:1 !important;color:var(--ink) !important}
.h1-ctaband .elementor-button{background:var(--blue) !important;color:#fff !important;border-radius:0 !important;
  font-weight:600;font-size:14px !important;padding:18px 30px !important;box-shadow:none !important;
  transition:background .25s,transform .25s}
.h1-ctaband .elementor-button:hover{background:var(--ink) !important;transform:translateY(-2px)}

/* ---- HERO de page (titre + intro), reutilise sur Realisations ---- */
.h1-phead2 .elementor-heading-title{font-family:'Overused Grotesk',sans-serif !important;font-weight:700;
  font-size:clamp(44px,8vw,120px) !important;line-height:.94 !important;letter-spacing:-.045em;color:var(--ink) !important}
.h1-phead2 .bl{color:var(--blue) !important}

/* ---- ACCUEIL : titres & liens natifs ---- */
.h1-herotitle .elementor-heading-title{font-family:'Overused Grotesk',sans-serif !important;font-weight:700;
  font-size:clamp(40px,6vw,92px) !important;line-height:.98 !important;letter-spacing:-.045em;color:var(--ink) !important}
.h1-herotitle .bl{color:var(--blue) !important}
.h1-h2 .elementor-heading-title{font-family:'Overused Grotesk',sans-serif !important;font-weight:700;
  font-size:clamp(34px,5vw,74px) !important;line-height:.98 !important;letter-spacing:-.04em;color:var(--ink) !important}
.h1-h2 .bl{color:var(--blue) !important}
.h1-mlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:12px;color:var(--blue);
  border-bottom:2px solid var(--yellow);padding-bottom:3px;text-decoration:none}
.h1-herobtns{display:flex;gap:16px;align-items:center;margin-top:34px;flex-wrap:wrap}

/* ---- ACCUEIL : sections en code widgets (scope .h1-home, ne fuit pas) ---- */
.h1-home .heroart{position:relative;aspect-ratio:1;display:grid;place-items:center;width:100%;max-width:430px;margin:0 auto}
.h1-home .heroart .disc{position:absolute;inset:6%;background:radial-gradient(circle at 38% 32%,#585cff,#3D41E9);border-radius:50%}
.h1-home .heroart svg{position:relative;z-index:2;width:52%;height:52%;color:#fff}
.h1-home .heroart .yd{position:absolute;width:22%;height:22%;right:8%;top:10%;background:var(--yellow);border-radius:50%;z-index:1}

.h1-home .hstats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);max-width:1320px;margin:clamp(20px,3vw,40px) auto 0;padding:0 clamp(22px,4vw,56px)}
.h1-home .hstats .st{padding:22px clamp(14px,2vw,26px);border-right:1px solid var(--line)}
.h1-home .hstats .st:last-child{border-right:none}
.h1-home .hstats .st .n{font-family:'Overused Grotesk',sans-serif;font-weight:700;font-size:clamp(26px,3vw,42px);line-height:1;letter-spacing:-.03em;color:var(--blue)}
.h1-home .hstats .st .n em{font-style:normal;color:var(--yellow)}
.h1-home .hstats .st .s{font-size:12px;color:var(--dim);margin-top:8px}
@media(max-width:640px){.h1-home .hstats{grid-template-columns:1fr 1fr}.h1-home .hstats .st:nth-child(2){border-right:none}}

.h1-home .comp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.h1-home .card{border:1px solid var(--line);padding:clamp(24px,2.5vw,34px);display:flex;flex-direction:column;gap:16px;transition:.3s;background:#fff}
.h1-home .card:hover{background:var(--mist);transform:translateY(-3px)}
.h1-home .card .ic{width:52px;height:52px;background:var(--blue);display:grid;place-items:center}
.h1-home .card .ic svg{width:26px;height:26px;color:#fff}
.h1-home .card h3{font-family:'Overused Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em}
.h1-home .card p{font-size:14px;line-height:1.55;color:var(--dim)}
.h1-home .card .go{margin-top:auto;font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.04em;text-transform:uppercase}
@media(max-width:820px){.h1-home .comp{grid-template-columns:1fr}}

.h1-home .works{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.h1-home .work{display:block;transition:.3s}
.h1-home .browser{border:1px solid var(--line);overflow:hidden;background:#fff}
.h1-home .browser .bar{height:30px;background:var(--mist);display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line)}
.h1-home .browser .bar i{width:9px;height:9px;border-radius:50%;background:#cfcfdc}
.h1-home .browser .bar i:first-child{background:var(--yellow)}
.h1-home .browser .shot{aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.h1-home .browser .shot img{width:100%;height:auto;display:block;transform:translateY(0);transition:transform var(--d,7s) ease-in-out}
.h1-home .work:hover .browser .shot img{transform:translateY(var(--ty,-70%))}
.h1-home .work .meta{margin-top:16px}
.h1-home .work .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.h1-home .work .t{font-family:'Overused Grotesk',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.02em;margin-top:6px}
@media(max-width:820px){.h1-home .works{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.h1-home .works{grid-template-columns:1fr}}

.h1-home .state{background:var(--blue);color:#fff;position:relative;overflow:hidden}
.h1-home .state .in{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:clamp(50px,7vw,100px) clamp(22px,4vw,56px)}
.h1-home .state .big{font-family:'Overused Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,4.4vw,64px);line-height:1.02;letter-spacing:-.03em;max-width:20ch}
.h1-home .state .big em{font-style:normal;color:var(--yellow)}
.h1-home .state .lead{color:rgba(255,255,255,.82) !important;max-width:60ch;margin-top:26px}
.h1-home .state .wm{position:absolute;right:-4%;bottom:-30%;width:46%;color:rgba(255,255,255,.08);z-index:1}

.h1-home .avis{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.h1-home .av{border:1px solid var(--line);padding:clamp(26px,3vw,40px);background:#fff}
.h1-home .av .mark{font-family:'Overused Grotesk',sans-serif;font-weight:700;font-size:52px;color:var(--yellow);line-height:.5}
.h1-home .av p{font-family:'Overused Grotesk',sans-serif;font-weight:500;font-size:clamp(18px,1.8vw,24px);line-height:1.32;letter-spacing:-.02em;margin-top:14px}
.h1-home .av .by{margin-top:20px;font-size:13px;color:var(--dim)}.h1-home .av .by b{color:var(--ink);font-weight:600}
@media(max-width:700px){.h1-home .avis{grid-template-columns:1fr}}

/* ---- MENTIONS LEGALES / pages de texte ---- */
.h1-legal-h1 .elementor-heading-title{font-family:'Overused Grotesk',sans-serif !important;font-weight:700;
  font-size:clamp(34px,5vw,66px) !important;line-height:1 !important;letter-spacing:-.03em;color:var(--ink) !important}
.h1-legal{max-width:820px}
.h1-legal .todo{color:var(--blue);font-weight:600}
.h1-legal h2{font-family:'Overused Grotesk',sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.02em;margin:34px 0 12px;color:var(--ink)}
.h1-legal p,.h1-legal li{font-size:15.5px;line-height:1.7;color:var(--dim)}
.h1-legal a{color:var(--blue)}
.h1-legal strong{color:var(--ink);font-weight:600}