/* ArtiHome · couche animation et ergonomie (Studio Atlas, 2026)
   Ne change ni la mise en page ni les couleurs du site : elle les fait vivre. */

/* Barre de progression de lecture, en or, tout en haut */
.am-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:3000;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* En-tête : se resserre au défilement */
header{transition:box-shadow .3s ease}
header .header-inner{transition:padding .3s ease}
header.am-compact .header-inner{padding-top:8px;padding-bottom:8px}
header.am-compact{box-shadow:0 6px 24px rgba(10,22,40,.16)}

/* Lien actif du menu : soulignement qui glisse */
nav a{position:relative}
nav a::after{content:'';position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
nav a:hover::after{transform:scaleX(1)}

/* Titres découpés en mots pour l'entrée */
.am-line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.am-word{display:inline-block;will-change:transform}

/* Trait d'or sous les titres de section */
.section-header h2,.am-h2{position:relative}
.am-bar{display:block;width:56px;height:3px;background:var(--gold);margin:14px auto 0;transform:scaleX(0);transform-origin:50% 50%}

/* Boutons : appui et brillance */
.btn-primary,.btn-call,.btn-submit,.sticky-mobile-cta a{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after,.btn-call::after,.btn-submit::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.35);transform:translateX(-110%) skewX(-18deg);transition:transform .55s ease}
.btn-primary:hover::after,.btn-call:hover::after,.btn-submit:hover::after{transform:translateX(110%) skewX(-18deg)}
.btn-primary:active,.btn-call:active,.btn-submit:active{transform:scale(.97)!important}

/* L'icône du téléphone qui sonne doucement, une fois de temps en temps */
@keyframes am-ring{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}92%{transform:rotate(-10deg)}94%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
.btn-primary svg,.btn-call svg,.sticky-mobile-cta svg{animation:am-ring 6s ease-in-out 2s infinite;transform-origin:50% 50%}

/* Cartes services : la photo respire au survol */
.service-media img,.service-card img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.service-card:hover .service-media img,.service-card:hover img{transform:scale(1.07)}

/* Halo qui suit la souris dans le hero (bureau) */
.am-glow{position:absolute;width:560px;height:560px;left:0;top:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(245,184,0,.13) 0%,rgba(245,184,0,0) 65%);transform:translate(-50%,-50%);opacity:0;transition:opacity .6s ease;z-index:0}
.hero:hover .am-glow,.page-hero:hover .am-glow{opacity:1}
.hero .container,.page-hero .container{position:relative;z-index:1}

/* Carte de contact du hero : légère inclinaison 3D au survol */
.am-tilt{transform-style:preserve-3d;will-change:transform}

/* FAQ : réponse fluide, signe + qui tourne */
.faq-a{transition:max-height .45s cubic-bezier(.2,.7,.2,1)}
.faq-q svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}

/* Avis : étoiles qui se remplissent */
.am-star{display:inline-block}

/* Vérifier sa commune (zones) */
.am-check{max-width:640px;margin:0 auto 36px;background:var(--navy);border-radius:var(--radius-lg);padding:26px 28px;border-left:4px solid var(--gold)}
.am-check label{display:block;font-family:'Oswald',sans-serif;font-size:21px;color:#fff;letter-spacing:.3px;margin-bottom:12px}
.am-check-row{display:flex;gap:10px}
.am-check input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:13px 15px;color:#fff;font:600 18px/1.2 'DM Sans',sans-serif;letter-spacing:.08em;outline:none;transition:border-color .2s,background .2s}
.am-check input::placeholder{color:#7a8aa4;letter-spacing:0;font-weight:500}
.am-check input:focus{border-color:var(--gold);background:rgba(245,184,0,.05)}
.am-check-out{min-height:0;margin-top:0;font-size:15px;color:#c8d0de;line-height:1.55;overflow:hidden}
.am-check-out strong{color:var(--gold)}
.am-check-out a{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Formulaire : message d'erreur et de réussite dans la page, plus d'alerte */
.am-form-msg{margin-top:12px;font-size:14px;font-weight:600;border-radius:var(--radius);padding:0 14px;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.am-form-msg.on{max-height:120px;padding:12px 14px}
.am-form-msg.err{background:rgba(220,38,38,.12);color:#fca5a5}
.am-form-msg.ok{background:rgba(34,197,94,.12);color:#86efac}
.form-group input.am-bad,.form-group textarea.am-bad{border-color:#f87171!important}
@keyframes am-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.am-shake{animation:am-shake .4s ease}

/* Bouton d'appel mobile : apparaît une fois le hero dépassé */
@media(max-width:768px){
  .sticky-mobile-cta{transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .sticky-mobile-cta.am-on{transform:translateY(0)}
  .am-check-row{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .am-bar{transform:none}
  .sticky-mobile-cta{transform:none}
}

/* Mobile : l'en-tête tenait sur 386 px pour un écran de 375 (le menu sortait de l'écran) */
@media(max-width:480px){
  .header-inner{padding:10px 14px;gap:10px}
  .header-right{gap:6px}
  .header-right .available-dot{display:none}
  .btn-call{font-size:16px;padding:9px 12px}
  .logo-name{font-size:20px}
  .logo-icon{width:38px;height:38px}
}
/* Les points verts qui clignotent restent, mais immobiles : plus calme, plus sérieux */
.available-dot::before,[style*="pulse-dot"]{animation:none!important}

/* ── Hero téléphone : un titre, un délai, un bouton, un prix. Le reste est ailleurs. ── */
@media(max-width:768px){
  .topbar{display:none}                                   /* numéro et mail déjà dans l'en-tête */
  .hero{padding:34px 0 30px!important}
  .hero-grid>div:last-child{display:none!important}       /* carte qui répétait le numéro : la barre d'appel du bas prend le relais */
  .hero h1{font-size:40px!important;line-height:1.05!important;margin-bottom:14px!important}
  .hero-grid>div:first-child>div:has(.am-delai){margin-bottom:12px!important}
  .hero-grid>div:first-child>div:has(.am-delai)>div{background:none!important;border:0!important;padding:0!important;color:var(--gold)!important;font-size:16px!important;font-weight:600!important}
  .hero-grid>div:first-child>div:has(.am-delai)>div>span:not(.am-delai){display:none!important}
  .hero-grid>div:first-child>p{font-size:16px!important;line-height:1.6!important;margin-bottom:24px!important}
  .hero-ctas{flex-direction:column!important;gap:6px!important;margin-bottom:22px!important}
  .hero-ctas .btn-primary{justify-content:center;width:100%;min-height:58px;font-size:20px!important}
  .hero-ctas .btn-secondary{justify-content:center;background:none!important;border:0!important;color:#c8d0de!important;font-family:'DM Sans',sans-serif!important;font-weight:500!important;font-size:15px!important;text-decoration:underline;text-underline-offset:4px;padding:10px!important}
  /* Les 3 garanties sur une seule rangée, en colonnes */
  .hero-grid>div:first-child>div:has(> span > strong){display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px!important}
  .hero-grid>div:first-child>div:has(> span > strong)>span{flex-direction:column;align-items:center!important;text-align:center;gap:6px!important;font-size:12.5px!important;line-height:1.35}
  .hero-grid>div:first-child>div:has(> span > strong)>span strong{display:block;font-size:13.5px}
  /* Prix : or au lieu de vert */
  .hero .tarif-badge{display:block;width:100%;text-align:center;font-size:15px!important;line-height:1.5;padding:12px 14px!important;background:rgba(245,184,0,.08);border-color:rgba(245,184,0,.28);color:#d8dee8;font-weight:500;margin-top:22px}
  .hero .tarif-badge strong{color:var(--gold)}
  .hero .tarif-badge svg{display:none}
  .hero .tarif-badge strong{white-space:nowrap}
  .hero + .urgence-band{display:none}                             /* répétait les garanties du hero, sur 5 lignes */
}

/* ── Passe du designer sur le hero téléphone (26/10) : le jaune plein est réservé au bouton d'appel ── */
@media(max-width:768px){
  .hero-grid>div:first-child{display:flex;flex-direction:column}
  .hero-grid>div:first-child>h1{order:1}
  .hero-grid>div:first-child>div:has(.am-delai){order:2}
  .hero-ctas{order:3}
  .hero .tarif-badge{order:4}
  .hero-grid>div:first-child>p{order:5}
  .hero-grid>div:first-child>div:has(> span > strong){order:6}
  /* Délai : la phrase en blanc, seul « 20 à 30 minutes » en jaune */
  .hero-grid>div:first-child>div:has(.am-delai)>div{display:block!important;color:#fff!important;font-size:17px!important}
  .am-delai{color:var(--gold)}
  /* Le prix remonte sous le bouton, sans cadre */
  .hero .tarif-badge{background:none!important;border:0!important;padding:0!important;margin:0 0 4px!important;font-size:15px!important;color:#d8dee8}
  .hero .tarif-badge strong{font-weight:700}
  .hero-ctas{margin-bottom:14px!important}
  /* Le paragraphe passe après l'action, plus lisible */
  .hero-grid>div:first-child>p{font-size:15px!important;line-height:1.55!important;color:#B4BFD0!important;margin:22px 0 22px!important}
  /* Garanties : écussons atténués, colonnes alignées en haut, sous-lignes lisibles */
  .hero-grid>div:first-child>div:has(> span > strong){align-items:start}
  .hero-grid>div:first-child>div:has(> span > strong) svg{opacity:.55}
  .hero-grid>div:first-child>div:has(> span > strong)>span{color:#B4BFD0!important;font-size:13px!important}
  /* Le numéro de l'en-tête en contour : un seul aplat jaune à l'écran */
  .header-right .btn-call{background:transparent;border:2px solid var(--gold);color:var(--navy)}
  .header-right .btn-call svg{fill:currentColor}
  /* WhatsApp : plus de vert */
  .wa-float{background:var(--navy);border:2px solid var(--gold);box-shadow:none}
  .wa-float svg{color:#fff}
}

/* ── Scène « la serrure à 4 goupilles » (accueil) : 4 goupilles, 4 promesses ── */
.reassurance-strip.am-scene{padding:0}
.am-lock{min-height:100vh;display:grid;grid-template-columns:1.45fr 1fr;align-items:center;gap:56px;padding:40px 0}
.am-lock__head{grid-column:1/-1;text-align:center;align-self:end}
.am-lock__head h2{font-family:'Oswald',sans-serif;font-size:clamp(28px,3.6vw,42px);color:#fff;letter-spacing:.5px}
.am-lock__head p{color:#a8b4c8;font-size:16px;margin-top:8px}
.am-lock__art{position:relative}
.am-lock__art svg{display:block;width:100%;height:auto;max-height:62vh;overflow:visible}
.am-lock__done{position:absolute;left:0;right:0;top:100%;margin-top:10px;text-align:center;font-family:'Oswald',sans-serif;font-size:clamp(26px,3vw,38px);color:var(--gold);letter-spacing:.5px;opacity:0}
.am-lock .reassurance-grid{grid-template-columns:1fr;gap:10px}
.am-lock .reassurance-item{display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:center;text-align:left;padding:14px 18px;border-radius:12px;opacity:.32;transition:opacity .35s ease,background-color .35s ease}
.am-lock .reassurance-item .reassurance-icon{grid-row:span 2;margin:0}
.am-lock .reassurance-item h4{margin:0}
.am-lock .reassurance-item.is-done{opacity:.7}
.am-lock .reassurance-item.is-on{opacity:1;background:rgba(245,184,0,.07)}
.am-lock .reassurance-item.is-on .reassurance-icon{background:var(--gold)}
.am-lock .reassurance-item.is-on .reassurance-icon svg{color:var(--navy)}
.am-lock__cta{grid-column:1/-1;justify-self:center;opacity:0}
@media(max-width:768px){
  .am-lock{min-height:0;grid-template-columns:1fr;gap:14px;padding:48px 0 40px;align-content:center}
  .am-lock__head h2{font-size:26px}
  .am-lock__head p{font-size:14px}
  .am-lock__art svg{max-height:36vh}
  .am-lock__done{position:static;margin-top:6px;font-size:24px}
  .am-lock__cta{display:none}                             /* la barre d'appel du bas suffit */
  .am-lock .reassurance-grid{min-height:96px}
  .am-lock .reassurance-item{display:none;opacity:1}
  .am-lock .reassurance-item.is-on{display:grid}
  .am-lock .reassurance-item.am-first:not(.is-on):not(.is-done){display:grid;opacity:.32}
}

/* Piège à robots du formulaire : hors de l'écran, jamais visible ni atteignable au clavier */
.am-piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* Sites Oise et Aisne : le bandeau « Serrurier local · Département » reste en tête du hero, sans point clignotant */
@media(max-width:768px){
  .hero-grid>div:first-child>div:not(:has(.am-delai)):not(:has(> span > strong)):not(.hero-ctas):not(.tarif-badge){order:0;margin-bottom:14px!important}
}