/* =========================================================
   EZO FRANCE — Couche "Signature"
   Finitions visuelles + motion design métier BTP.
   Se charge après le style de base, sans le modifier.
   ========================================================= */

/* ---------- Marque : symbole + nom typographié ---------- */
.brand{gap:14px}
.brand .logo-mark.ezo-logo{height:46px;width:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.site-footer .logo-mark.ezo-logo{height:40px}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark b{font-weight:800;font-size:1.32rem;letter-spacing:.14em;color:var(--text)}
.wordmark small{display:block;margin-top:5px;font-size:.6rem;font-weight:700;letter-spacing:.52em;color:var(--orange)!important}
.brand:hover .logo-mark{transform:none!important}

/* Construction du logo au chargement */
.ezo-logo .side,.ezo-logo .sun,.ezo-logo .ray{transform-box:fill-box}
.ezo-logo .side{transform-origin:50% 100%;animation:ezoRoof .9s cubic-bezier(.22,1,.36,1) both}
.ezo-logo .side.r{animation-delay:.08s}
.ezo-logo .ray{stroke-dasharray:160;stroke-dashoffset:160;animation:ezoRay .7s ease-out both;animation-delay:calc(.35s + var(--i)*.04s)}
.ezo-logo .sun{transform-origin:50% 100%;animation:ezoSun .9s cubic-bezier(.34,1.56,.64,1) .75s both}
.ezo-logo .shine{transform:translateX(0) skewX(-18deg)}
.brand:hover .ezo-logo .shine{animation:ezoShine 1s ease}
.brand:hover .ezo-logo .sun{filter:drop-shadow(0 0 6px rgba(255,140,60,.9))}
@keyframes ezoRoof{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
@keyframes ezoRay{to{stroke-dashoffset:0}}
@keyframes ezoSun{from{transform:translateY(60%) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes ezoShine{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(190px) skewX(-18deg)}}

/* ---------- En-tête ---------- */
.site-header{transition:background .4s,box-shadow .4s}
.nav-links a{position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-soft),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links a:not(.nav-cta):hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{background:none!important}
.nav-cta{background:linear-gradient(135deg,var(--orange),#d9530f)!important;border-color:transparent!important;box-shadow:0 8px 24px -10px var(--orange)}
.nav-cta:hover{color:#fff!important;filter:brightness(1.08);transform:translateY(-1px)}

/* ---------- Hero ---------- */
.hero h1,.page-hero h1{font-weight:800;letter-spacing:-.03em}
.hero h1 .accent{font-family:var(--serif);font-style:italic;font-weight:600;background:linear-gradient(100deg,#8fa8ef 0%,#6d8be0 35%,#f59453 75%,#ee6a1f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.hero .eyebrow,.page-hero .eyebrow{padding:7px 14px 7px 12px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(255,255,255,.03);letter-spacing:.22em}
.hero .eyebrow::before,.page-hero .eyebrow::before{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(238,106,31,.18);animation:ezoPulse 2.4s ease-in-out infinite}
@keyframes ezoPulse{50%{box-shadow:0 0 0 8px rgba(238,106,31,0)}}

/* Plan d'architecte qui se trace */
.ezo-blueprint{position:absolute;right:2.5%;top:110px;width:min(22vw,320px);height:auto;z-index:1;pointer-events:none;opacity:.42;color:#8fa8ef;filter:drop-shadow(0 0 12px rgba(109,139,224,.25))}
.ezo-blueprint .ln{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ezoDraw 2.2s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(1.1s + var(--d,0)*.12s)}
.ezo-blueprint .ln.o{stroke:#ee6a1f;stroke-width:1.6}
.ezo-blueprint .ln.dim{stroke-width:.8;opacity:.6;stroke-dasharray:1}
.ezo-blueprint .fill{fill:#ee6a1f;opacity:0;animation:ezoFade .8s ease forwards;animation-delay:3.6s}
.ezo-blueprint .txt{font:600 9px Inter,sans-serif;letter-spacing:.18em;fill:#a4a9b4;opacity:0;animation:ezoFade .8s ease forwards;animation-delay:3.2s}
.ezo-blueprint .hook{transform-box:view-box;transform-origin:452px 52px;animation:ezoSway 5s ease-in-out 3.4s infinite}
@keyframes ezoDraw{to{stroke-dashoffset:0}}
@keyframes ezoFade{to{opacity:1}}
@keyframes ezoSway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.hero .wrap{position:relative;z-index:3}
@media(max-width:1100px){.ezo-blueprint{display:none}}

/* Indicateur de défilement */
.ezo-scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);opacity:0;animation:ezoFade 1s ease 2.4s forwards}
.ezo-scrollcue i{width:1px;height:42px;background:linear-gradient(var(--orange),transparent);position:relative;overflow:hidden}
.ezo-scrollcue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:#fff;animation:ezoDrop 1.8s ease-in-out infinite}
@keyframes ezoDrop{to{top:110%}}

/* ---------- Chiffres clés ---------- */
.stats{background:linear-gradient(var(--line),var(--line));box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.stat{position:relative;background:linear-gradient(180deg,var(--panel),#182340);transition:background .4s}
.stat::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--gold-soft),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.stat:hover::before{transform:scaleX(1)}
.stat:hover{background:linear-gradient(180deg,var(--panel-2),#1b2848)}
.stat b{background:linear-gradient(120deg,#fff 10%,#f59453 120%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:2.6rem}

/* ---------- Pôles ---------- */
.pole{background:linear-gradient(180deg,color-mix(in srgb,var(--p) 7%,var(--panel)) 0%,var(--panel) 45%)}
.pole::before{height:3px;background:linear-gradient(90deg,var(--p),color-mix(in srgb,var(--p) 30%,transparent));transform:scaleX(.25);transform-origin:left;transition:transform .7s var(--ease)}
.pole:hover::before{transform:scaleX(1)}
.pole:hover{border-color:color-mix(in srgb,var(--p) 45%,transparent)!important;box-shadow:0 34px 70px -30px color-mix(in srgb,var(--p) 55%,#000)!important}
.pole:hover .ico{background:color-mix(in srgb,var(--p) 28%,transparent)}
.pole ul li::before{border-radius:2px;transform:rotate(45deg);width:7px;height:7px;top:14px}
.pole .go{padding-top:18px;border-top:1px solid var(--line);width:100%}

/* ---------- Cartes & étapes ---------- */
.step::before{background:linear-gradient(120deg,var(--gold-soft),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.9rem}

/* ---------- Images : ouverture en volet ---------- */
html.ezo-sig .tile.reveal img{clip-path:inset(100% 0 0 0);transform:scale(1.18);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1),transform 1.5s cubic-bezier(.22,1,.36,1)}
html.ezo-sig .tile.reveal.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
html.ezo-sig .tile.reveal.in:hover img{transform:scale(1.08);transition:transform .65s var(--ease)}
.tile figcaption{display:flex;align-items:center;gap:10px}
.tile figcaption::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--accent);flex:0 0 auto}
.split .visual img{transition:transform 1.2s var(--ease)}
.split .visual:hover img{transform:scale(1.04)}

/* ---------- Bloc contact ---------- */
.ezo-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;text-align:left}
.ezo-contact-grid a,.ezo-contact-grid div{display:flex;gap:14px;align-items:center;padding:18px 20px;border:1px solid var(--line-strong);border-radius:14px;background:rgba(10,16,32,.35);transition:transform .35s var(--ease),border-color .35s,background .35s}
.ezo-contact-grid a:hover{transform:translateY(-3px);border-color:var(--orange);background:rgba(238,106,31,.08)}
.ezo-contact-grid svg{flex:0 0 auto;width:40px;height:40px;padding:10px;border-radius:11px;background:rgba(238,106,31,.14);color:var(--orange-soft)}
.ezo-contact-grid small{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
.ezo-contact-grid span{font-weight:600;font-size:.94rem;color:var(--text);line-height:1.35}
@media(max-width:860px){.ezo-contact-grid{grid-template-columns:1fr}}

/* ---------- Pied de page ---------- */
.site-footer{position:relative;background:radial-gradient(800px 260px at 15% 0%,rgba(37,70,176,.16),transparent 70%),var(--black-2)}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-soft),var(--orange),transparent)}
.site-footer h4{color:var(--text);letter-spacing:.24em}
.site-footer a{transition:color .25s,transform .25s}
.site-footer .footer-grid a:not(.brand):hover{color:var(--orange-soft);transform:translateX(4px)}
.socials a:hover{transform:translateY(-3px)!important;background:rgba(238,106,31,.1)}

/* ---------- Retour en haut avec jauge ---------- */
.ezo-top{position:fixed;right:22px;bottom:22px;z-index:250;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;background:rgba(17,26,48,.85);backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .4s,transform .4s var(--ease)}
.ezo-top.show{opacity:1;transform:none;pointer-events:auto}
.ezo-top:hover{background:var(--orange)}
.ezo-top svg.ring{position:absolute;inset:0;transform:rotate(-90deg)}
.ezo-top svg.ring circle{fill:none;stroke-width:2.5}
.ezo-top svg.ring .bg{stroke:rgba(255,255,255,.1)}
.ezo-top svg.ring .fg{stroke:url(#ezoTopG);stroke-linecap:round;stroke-dasharray:150.8;stroke-dashoffset:150.8}
.ezo-top .arr{width:18px;height:18px;position:relative}

/* ---------- Accessibilité ---------- */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  .ezo-logo *,.ezo-blueprint *,.ezo-scrollcue,.hero .eyebrow::before{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
  html.ezo-sig .tile.reveal img{clip-path:none!important;transform:none!important}
}

/* ---------- Correctifs ---------- */
/* Débordement horizontal causé par les effets décoratifs */
html,body{overflow-x:clip}
/* Volet sur l'image et non sur le cadre (sinon l'élément n'est jamais détecté à l'écran) */
.reveal.ezo-wipe{clip-path:none!important}
.split .visual.ezo-wipe img{clip-path:inset(0 0 100% 0);transform:scale(1.12);transition:clip-path 1.15s cubic-bezier(.77,0,.18,1),transform 1.6s cubic-bezier(.22,1,.36,1)!important}
.split .visual.ezo-wipe.in img{clip-path:inset(0 0 0 0);transform:none}
.split .visual.ezo-wipe.in:hover img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.split .visual.ezo-wipe img{clip-path:none;transform:none}}
.split h2.head{font-size:clamp(1.9rem,3.6vw,2.7rem);max-width:none;margin:16px 0 18px!important;line-height:1.1}
.site-footer a.brand{display:inline-flex;align-items:center;gap:14px}
.ezo-top svg.ring{width:100%;height:100%}
@media(max-width:640px){.hero .eyebrow,.page-hero .eyebrow{letter-spacing:.12em;font-size:.64rem}.nav-links a:not(.nav-cta)::after{right:auto;width:28px}}

/* Bandeau défilant des métiers : créé après l'observateur d'apparition, on l'affiche directement */
.ezo-marquee.reveal{opacity:1!important;transform:none!important;filter:none!important}
.ezo-scrollcue{display:none!important}

/* Logo officiel : pastille blanche pour la lisibilité sur fond sombre */
.brand .logo-mark.ezo-logo{background:#fff;border-radius:10px;padding:5px 7px;box-sizing:content-box;height:40px;width:auto;filter:none;animation:none}
.site-footer .logo-mark.ezo-logo{height:36px}