/* ==========================================================================
   Scene Art — Flatsome Global Custom CSS
   À coller dans Flatsome → Advanced → Global Custom CSS
   ========================================================================== */

:root{
  --sa-bg:#08090B;
  --sa-panel:#0D0E11;
  --sa-panel-hover:#12141A;
  --sa-line:rgba(255,255,255,.10);
  --sa-field:rgba(255,255,255,.14);
  --sa-accent:#FF7A18;
  --sa-text:#F4F4F5;
  --sa-muted:rgba(244,244,245,.65);
  --sa-dim:rgba(244,244,245,.45);
}

/* --- Base ---------------------------------------------------------------- */
body,.page-wrapper{background:var(--sa-bg);color:var(--sa-text)}
body{font-family:Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.button,.nav>li>a{font-family:Archivo,sans-serif;text-transform:uppercase}
h1,h2{font-weight:900;line-height:.96;letter-spacing:-.03em;color:var(--sa-text)}
h1{font-size:clamp(52px,6.2vw,88px)}
h2{font-size:clamp(32px,3.6vw,52px)}
h3{font-weight:800;font-size:26px;letter-spacing:-.02em;text-transform:none}
p{color:var(--sa-muted);line-height:1.6}
.sa-lead{font-size:19px;line-height:1.55;color:rgba(244,244,245,.7);max-width:52ch;text-wrap:pretty}
.sa-lead-sm{font-size:17px;line-height:1.6;color:rgba(244,244,245,.6);max-width:44ch}
.sa-accent{color:var(--sa-accent)}
a{color:var(--sa-accent)}
a:hover{color:#fff}
::selection{background:var(--sa-accent);color:var(--sa-bg)}

/* Zéro arrondi, zéro ombre */
.button,.button span,input,textarea,select,.box-image,img,.ux-banner,.col-inner{border-radius:0!important}
.box-shadow,.box-shadow-1,.box-shadow-2,.button{box-shadow:none!important}

/* Kickers & labels majuscules */
.sa-kicker{font-family:Barlow,sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sa-accent);margin-bottom:6px}
.sa-kicker::before{content:"";display:inline-block;width:34px;height:1px;
  background:var(--sa-accent);vertical-align:middle;margin-right:12px}
.sa-label{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(244,244,245,.55)}

/* --- Header -------------------------------------------------------------- */
#masthead{border-bottom:1px solid var(--sa-line)}
.header-wrapper.stuck .header-bg-color{background:rgba(8,9,11,.82)!important;backdrop-filter:blur(14px)}
.header-inner{padding-left:clamp(20px,3vw,48px);padding-right:clamp(20px,3vw,48px)}
.nav>li{white-space:nowrap}
.nav>li>a{font-family:Barlow,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;color:var(--sa-muted)}
.nav>li>a:hover,.nav>li.active>a{color:#fff}
.header-button .button{margin-bottom:0}
.sa-tel{font-family:Archivo,sans-serif;font-weight:800;font-size:22px;color:var(--sa-text)}

/* --- Boutons ------------------------------------------------------------- */
.button{letter-spacing:.09em;font-weight:800;transition:background .25s,color .25s,border-color .25s}
.button.primary{background:var(--sa-accent);color:var(--sa-bg);border:0}
.button.primary:hover{background:#fff;color:var(--sa-bg)}
.button.is-outline,.button.secondary.is-outline{background:none;border:1px solid rgba(255,255,255,.22);color:var(--sa-text)}
.button.is-outline:hover{border-color:#fff;color:#fff;background:none}
.button.larger{height:58px;line-height:56px;padding:0 34px;font-size:15px}

/* --- Filets de grille (gap 2px simulé) ---------------------------------- */
.sa-grid-hair{background:var(--sa-line);gap:0}
.sa-grid-hair>.col{background:var(--sa-panel);margin:1px;padding-top:0}
.sa-grid-hair>.col>.col-inner{background:transparent}

/* --- Chiffres clés ------------------------------------------------------- */
.sa-stats>.col+.col{border-left:1px solid var(--sa-line)}
.sa-stats .sa-num{display:block;font-family:Archivo,sans-serif;font-weight:900;
  font-size:46px;line-height:1;letter-spacing:-.03em;color:var(--sa-text);margin-bottom:8px}
.sa-stats .sa-num em{font-style:normal;font-size:22px;color:rgba(244,244,245,.5);margin-left:6px}

/* --- Cartes technique / prestations ------------------------------------- */
.sa-card{background:var(--sa-panel);transition:background .25s}
.sa-card:hover{background:var(--sa-panel-hover)}
.sa-card h4{font-family:Archivo,sans-serif;font-weight:900;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sa-accent);margin:0 0 12px}
.sa-card p{margin:0;font-size:16px}
.sa-card-title{font-family:Archivo,sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.01em;text-transform:none;margin:0 0 10px;color:var(--sa-text)}
.sa-card--on{border-top:2px solid var(--sa-accent)}
.sa-card--off{border-top:2px solid rgba(255,255,255,.14)}
.sa-cta-tile{background:var(--sa-accent);display:flex;flex-direction:column;justify-content:space-between}
.sa-cta-tile,.sa-cta-tile h3,.sa-cta-tile a{color:var(--sa-bg)}
.sa-cta-tile h3{font-family:Archivo,sans-serif;font-weight:900;font-size:20px;
  line-height:1.15;text-transform:uppercase;margin:0}
.sa-cta-tile:hover{background:#fff}
.sa-sticky{position:sticky;top:110px}

/* --- Étapes ------------------------------------------------------------- */
.sa-step{background:var(--sa-bg)}
.sa-step-num{font-family:Archivo,sans-serif;font-weight:900;font-size:15px;
  letter-spacing:.16em;color:var(--sa-accent);margin:0 0 16px}
.sa-step h3{margin:0 0 16px}

/* --- Galerie ------------------------------------------------------------ */
.sa-mosaic .col{padding:1px}
.sa-mosaic img{transition:transform .5s ease}
.sa-mosaic .col:hover img{transform:scale(1.04)}

/* --- Banners / overlays ------------------------------------------------- */
.sa-hero-banner .bg{filter:saturate(.9) contrast(1.05)}
.sa-hero-banner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#08090B 0%,rgba(8,9,11,.35) 34%,rgba(8,9,11,0) 70%)}
.sa-hero-badge{background:var(--sa-bg);border-top:1px solid var(--sa-line);
  border-right:1px solid var(--sa-line);padding:18px 26px!important}
.sa-num-badge{font-family:Archivo,sans-serif;font-weight:900;font-size:34px;
  line-height:1;color:var(--sa-accent);margin-right:16px}
.sa-reassure{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.sa-reassure li{position:relative;padding-left:18px;font-size:16px;color:rgba(244,244,245,.72)}
.sa-reassure li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--sa-accent)}

/* --- Formulaire de devis ------------------------------------------------ */
.sa-form input[type=text],.sa-form input[type=email],.sa-form input[type=tel],
.sa-form input[type=date],.sa-form textarea,.sa-form select{
  width:100%;background:var(--sa-bg);border:1px solid var(--sa-field);color:var(--sa-text);
  padding:17px 18px;font-family:Barlow,sans-serif;font-size:16px;box-shadow:none;height:auto}
.sa-form input:focus,.sa-form textarea:focus,.sa-form select:focus{
  border-color:var(--sa-accent);outline:none;box-shadow:none}
.sa-form label,.sa-form .ff-el-input--label label{
  font-family:Barlow,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(244,244,245,.55);margin-bottom:9px}
.sa-form ::placeholder{color:rgba(244,244,245,.3)}
.sa-form textarea{resize:vertical}
.sa-form button[type=submit],.sa-form .ff-btn-submit{
  width:100%;background:var(--sa-accent);color:var(--sa-bg);border:0;padding:20px 28px;
  font-family:Archivo,sans-serif;font-weight:800;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;transition:background .25s}
.sa-form button[type=submit]:hover,.sa-form .ff-btn-submit:hover{background:#fff;color:var(--sa-bg)}
.sa-form .sa-legal{font-size:13px;color:var(--sa-dim)}

/* Options en « chips » (Fluent Forms / CF7) */
.sa-form .ff-el-group input[type=checkbox],
.sa-form .wpcf7-checkbox input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.sa-form .ff-el-group input[type=checkbox]+label,
.sa-form .wpcf7-checkbox .wpcf7-list-item-label{
  display:inline-block;padding:11px 16px;border:1px solid rgba(255,255,255,.16);
  font-family:Barlow,sans-serif;font-size:14px;font-weight:400;letter-spacing:0;
  text-transform:none;color:rgba(244,244,245,.8);cursor:pointer;margin:0 8px 8px 0;
  transition:border-color .2s,background .2s,color .2s}
.sa-form .ff-el-group input[type=checkbox]:checked+label{
  border-color:var(--sa-accent);background:rgba(255,122,24,.14);color:var(--sa-accent)}
.sa-form .ff_el_group_two_col,.sa-form .ff-t-cell{gap:18px}

/* --- Contact / carte --------------------------------------------------- */
.sa-contact-cols{display:flex;flex-wrap:wrap;gap:44px;margin-top:26px}
.sa-contact-cols p{font-size:17px;line-height:1.7;color:rgba(244,244,245,.72);margin:4px 0 0}
.ux-google-map,.sa-map{border:1px solid var(--sa-line)}

/* --- Partenaires ------------------------------------------------------- */
.sa-partners-title{font-family:Archivo,sans-serif;font-weight:800;font-size:22px;
  letter-spacing:-.01em;text-transform:none;margin:0;color:var(--sa-text)}
.logo-grid img{filter:grayscale(1) brightness(1.4);opacity:.75;transition:opacity .25s,filter .25s}
.logo-grid img:hover{opacity:1;filter:none}

/* --- Footer ------------------------------------------------------------ */
.footer-wrapper{background:var(--sa-bg);border-top:1px solid var(--sa-line)}
.footer-wrapper p,.absolute-footer{color:var(--sa-dim);font-size:14px}
.absolute-footer{background:var(--sa-bg)}

/* --- Sticky CTA mobile ------------------------------------------------- */
@media(max-width:849px){
  .sa-mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;
    background:var(--sa-bg);border-top:1px solid var(--sa-line)}
  .sa-mobile-cta a{flex:1;height:56px;display:flex;align-items:center;justify-content:center;
    font-family:Archivo,sans-serif;font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
  .sa-mobile-cta a.is-call{color:var(--sa-text);border-right:1px solid var(--sa-line)}
  .sa-mobile-cta a.is-quote{background:var(--sa-accent);color:var(--sa-bg)}
  body{padding-bottom:56px}
}

/* --- Responsive ------------------------------------------------------- */
@media(max-width:849px){
  .sa-stats>.col+.col{border-left:0;border-top:1px solid var(--sa-line)}
  .sa-sticky{position:static}
  .button.larger{width:100%;text-align:center}
  .sa-contact-cols{gap:28px}
  .sa-lead{font-size:17px}
}
@media(min-width:850px) and (max-width:1099px){
  .nav>li>a{letter-spacing:.08em}
  .header-inner{padding-left:20px;padding-right:20px}
}

/* ==========================================================================
   Overrides d'intégration Flatsome — entête, logo texte, topbar, formulaire
   ========================================================================== */

/* --- Entête sombre en permanence (pas seulement au scroll) --------------- */
#masthead .header-main .header-bg-color,
#masthead .header-bg-color{background:rgba(8,9,11,.92)!important}
.header-wrapper.stuck .header-main .header-bg-color,
.header-wrapper.stuck .header-bg-color{background:rgba(8,9,11,.9)!important;backdrop-filter:blur(14px)}
#masthead{border-bottom:1px solid var(--sa-line)}
#masthead .header-main{min-height:74px}
/* liens de nav toujours clairs sur entête sombre */
.header-nav a,.header-nav-main a,.nav>li>a{color:var(--sa-muted)!important}
.header-nav a:hover,.nav>li>a:hover,.nav>li.active>a{color:#fff!important}

/* --- Masquer la barre supérieure de démo Flatsome ----------------------- */
#top-bar,.header-top{display:none!important}

/* --- Logo texte « SCENE ART » (remplace le logo par défaut Flatsome) ----- */
#logo img,#logo svg,.header-logo img,.header-logo svg{display:none!important}
#logo a,.header-logo a{display:flex!important;align-items:center;font-family:Archivo,sans-serif;
  font-weight:900;font-size:26px;letter-spacing:-.02em;text-transform:uppercase;line-height:1;max-height:none}
#logo a::before,.header-logo a::before{content:"SCENE";color:#fff}
#logo a::after,.header-logo a::after{content:"ART";color:var(--sa-accent);margin-left:.12em}

/* Téléphone dans l'entête (si ajouté comme élément) */
.header .sa-tel{margin-right:16px}

/* --- Formulaire Forminator : colonne unique, propre, sur fond sombre ----- */
.sa-form .forminator-row{display:block!important;margin:0!important}
.sa-form .forminator-col{width:100%!important;max-width:100%!important;flex:0 0 100%!important;
  padding:0!important;margin:0 0 18px 0!important;float:none!important}
.sa-form .forminator-field{padding:0!important}
.sa-form label,.sa-form .forminator-label{display:block!important;color:rgba(244,244,245,.55)!important;
  font-family:Barlow,sans-serif;font-size:12px!important;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:8px!important;line-height:1.3}
.sa-form input[type=text],.sa-form input[type=email],.sa-form input[type=tel],
.sa-form input[type=number],.sa-form input[type=date],.sa-form input[type=url],
.sa-form textarea,.sa-form select,
.sa-form .forminator-input,.sa-form .forminator-textarea{
  width:100%!important;background:#08090B!important;border:1px solid rgba(255,255,255,.14)!important;
  color:#F4F4F5!important;border-radius:0!important;padding:15px 16px!important;
  font-family:Barlow,sans-serif;font-size:16px!important;box-shadow:none!important}
.sa-form input:focus,.sa-form textarea:focus,.sa-form select:focus,
.sa-form .forminator-input:focus{border-color:var(--sa-accent)!important;outline:none!important}
.sa-form textarea,.sa-form .forminator-textarea{min-height:90px!important}
.sa-form ::placeholder{color:rgba(244,244,245,.35)!important}
/* cases à cocher / radios en liste lisible */
.sa-form .forminator-checkbox,.sa-form .forminator-radio{display:flex!important;align-items:flex-start;
  gap:10px;margin:0 0 10px 0!important;color:rgba(244,244,245,.72)}
.sa-form .forminator-checkbox-label,.sa-form .forminator-radio-label{color:rgba(244,244,245,.72)!important;
  text-transform:none!important;letter-spacing:0!important;font-size:14px!important}
.sa-form .forminator-checkbox-box,.sa-form .forminator-radio-box{border-radius:0!important;
  border:1px solid rgba(255,255,255,.22)!important;flex:0 0 auto}
/* bouton d'envoi */
.sa-form .forminator-button,.sa-form button[type=submit]{background:var(--sa-accent)!important;
  color:#08090B!important;border:0!important;border-radius:0!important;width:100%!important;
  padding:18px 24px!important;font-family:Archivo,sans-serif!important;font-weight:800!important;
  text-transform:uppercase!important;letter-spacing:.06em;transition:background .25s}
.sa-form .forminator-button:hover,.sa-form button[type=submit]:hover{background:#fff!important;color:#08090B!important}
.sa-form .forminator-required-error,.sa-form .forminator-label--required span{color:var(--sa-accent)!important}

/* --- Carte contact ------------------------------------------------------- */
.sa-map,.sa-map iframe{width:100%;min-height:340px;border:1px solid var(--sa-line);filter:grayscale(.3) contrast(1.05)}

/* --- Barre CTA sticky mobile -------------------------------------------- */
@media(max-width:849px){
  .sa-mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;height:56px}
  .sa-mobile-cta a{flex:1;display:flex;align-items:center;justify-content:center;
    font-family:Archivo,sans-serif;font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.06em}
  .sa-mobile-cta .sa-call{background:#0D0E11;color:#fff;border-top:1px solid var(--sa-line)}
  .sa-mobile-cta .sa-quote{background:var(--sa-accent);color:#08090B}
  body{padding-bottom:56px}
}
@media(min-width:850px){.sa-mobile-cta{display:none}}

/* ==========================================================================
   CORRECTIF GRILLE FILET — margin:1px cassait la largeur des colonnes Flatsome
   (Prestations passait en 3 col au lieu de 4, Étapes en 2 au lieu de 3, etc.)
   On remplace le margin par une bordure box-shadow (n'entre pas dans la largeur).
   ========================================================================== */
.sa-grid-hair{background:var(--sa-bg)!important}
.sa-grid-hair>.col{margin:0!important;box-shadow:inset 0 0 0 1px var(--sa-line)}
/* Dernier bloc Prestations = CTA orange plein (priorité sur le fond panel de la grille) */
.sa-grid-hair>.col.sa-cta-tile{background:var(--sa-accent)!important;box-shadow:inset 0 0 0 1px var(--sa-accent)}
.sa-grid-hair>.col.sa-cta-tile h3,
.sa-grid-hair>.col.sa-cta-tile a,
.sa-grid-hair>.col.sa-cta-tile .sa-label{color:var(--sa-bg)!important}
.sa-grid-hair>.col.sa-cta-tile:hover{background:#fff!important}

/* --- Ancres one-page avec offset pour l'entête sticky ------------------- */
html{scroll-behavior:smooth}
.sa-anchor{display:block;height:0;overflow:hidden;visibility:hidden;scroll-margin-top:90px}
:target{scroll-margin-top:90px}

/* --- Entête desktop : menu + tel + bouton (injectés) -------------------- */
#masthead .header-nav-main{display:flex!important;align-items:center;gap:clamp(14px,1.8vw,30px);margin:0;padding:0}
#masthead .header-nav-main>li{list-style:none;white-space:nowrap;margin:0}
#masthead .header-nav-main>li>a{font-family:Barlow,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sa-muted);padding:0;line-height:74px;display:inline-block}
#masthead .header-nav-main>li>a:hover{color:#fff}
#masthead .sa-header-tel{font-family:Archivo,sans-serif!important;font-weight:800!important;
  font-size:16px!important;color:var(--sa-text)!important;letter-spacing:0!important;line-height:1!important}
#masthead .sa-header-btn.button.primary{background:var(--sa-accent);color:#08090B;border:0;
  padding:12px 22px!important;line-height:1!important;margin:0;font-size:13px}
#masthead .sa-header-btn.button.primary:hover{background:#fff;color:#08090B}
@media(max-width:849px){#masthead .header-nav-main{display:none!important}}

/* ==========================================================================
   PASSE D'ADAPTATIONS LAYOUT (hero / header / grilles / galerie)
   ========================================================================== */

/* --- Header : nav + tél + bouton alignés à droite, centrés verticalement - */
#masthead .header-nav-main{justify-content:flex-end;flex-wrap:nowrap;gap:clamp(16px,1.7vw,30px);height:100%}
#masthead .header-main .flex-col.flex-grow{display:flex;justify-content:flex-end}
#masthead .header-nav-main>li{display:flex;align-items:center}
#masthead .sa-header-btn-li{margin-left:8px}

/* --- Hero : image traitée + dégradé de lisibilité + badge soigné --------- */
.sa-hero-media{position:relative;overflow:hidden}
.sa-hero-banner .bg,.sa-hero-media .bg{filter:saturate(.9) contrast(1.05)}
.sa-hero-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#08090B 0%,rgba(8,9,11,.35) 34%,rgba(8,9,11,0) 70%)}
.sa-hero-badge{position:relative;z-index:2;background:var(--sa-bg);padding:22px 26px;max-width:none;width:auto}
.sa-hero-badge .sa-num-badge{display:block;font-family:Archivo,sans-serif;font-weight:900;
  font-size:34px;line-height:1;color:var(--sa-accent);margin-bottom:4px}
.sa-hero-badge p{margin:0}

/* (retiré : hauteur égale cassait la grille Technique) */

/* --- Galerie : gouttières 2px (effet filet mosaïque) -------------------- */
.sa-mosaic .col,.sa-mosaic .gallery-col{padding:1px!important}
.sa-mosaic .box-image{border-radius:0}

/* --- Espacements : en-têtes de section homogènes ------------------------ */
.sa-kicker{margin-bottom:10px}
.sa-lead-sm{margin-top:6px}
@media(max-width:849px){
  .sa-grid-hair>.col{box-shadow:inset 0 0 0 1px var(--sa-line)}
}

/* --- Titres : séparer les mots courts (le letter-spacing négatif collait
   « SUR LE TERRAIN ») sans perdre le rendu serré et lourd --------------- */
h1,h2,h3,.sa-card-title,.sa-cta-tile h3{word-spacing:.14em}
h1{word-spacing:.1em}

/* --- FORCER Archivo sur tous les titres (Flatsome imposait Lato) -------- */
h1,h2,h3,h4,h5,h6,
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,
#masthead .header-nav-main>li>a,.button{font-family:Archivo,sans-serif!important}
h1,h2{font-weight:900!important;letter-spacing:-.03em!important;text-transform:uppercase!important}

/* --- Grille Technique (imbriquée dans une colonne) : CSS Grid 2 col propre,
   évite le décalage flex dû aux hauteurs de carte différentes ----------- */
.col .sa-grid-hair{display:grid!important;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--sa-line)!important;align-items:stretch}
.col .sa-grid-hair>.col{width:auto!important;max-width:none!important;flex:initial!important;
  margin:0!important;box-shadow:none!important;min-height:0;display:block}
.col .sa-grid-hair>.col:last-child{grid-column:1 / -1}   /* carte Livraison pleine largeur */
@media(max-width:549px){.col .sa-grid-hair{grid-template-columns:1fr}.col .sa-grid-hair>.col:last-child{grid-column:auto}}

/* --- Grille Technique en CSS Grid (HTML brut, fini le row imbriqué qui
   s'aplatissait sous Flatsome) ------------------------------------------ */
.sa-tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--sa-line);border:1px solid var(--sa-line)}
.sa-tech-grid .sa-card{background:var(--sa-panel);padding:34px;margin:0;transition:background .25s}
.sa-tech-grid .sa-card:hover{background:var(--sa-panel-hover)}
.sa-tech-grid .sa-card--wide{grid-column:1 / -1}
.sa-tech-grid .sa-card h4{font-family:Archivo,sans-serif;font-weight:900;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sa-accent);margin:0 0 10px}
.sa-tech-grid .sa-card p{margin:0;font-size:16px}
@media(max-width:549px){.sa-tech-grid{grid-template-columns:1fr}.sa-tech-grid .sa-card--wide{grid-column:auto}}

/* --- Emplacements partenaires vides (placeholder) ----------------------- */
.sa-partner-ph{display:flex;align-items:center;justify-content:center;min-height:60px;
  color:rgba(244,244,245,.4)!important;letter-spacing:.14em}