/*
Theme Name: Sotteville Run
Template: hello-elementor
Author: Sotteville Run
Description: Thème enfant Hello Elementor pour Sotteville Run — polices et couleurs de la charte.
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ============================================================
   POLICES — charte Sotteville Run (auto-hébergées)
   ============================================================ */
@font-face{
  font-family:'New Nord Extended Heavy';
  src:url('fonts/NewNordExtendedHeavy.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'New Nord';
  src:url('fonts/NewNord-Regular.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Glacial Indifference';
  src:url('fonts/GlacialIndifference-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Glacial Indifference';
  src:url('fonts/GlacialIndifference-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Glacial Indifference';
  src:url('fonts/GlacialIndifference-Italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}

/* ============================================================
   VARIABLES DE MARQUE
   ============================================================ */
:root{
  --srn-blue:#3147d1;
  --srn-pink:#ea39ce;
  --srn-purple:#807fec;
  --srn-cyan:#6accea;
  --srn-dark:#141133;
  --srn-ink:#0d0a26;
  --srn-grad:linear-gradient(120deg,#6accea 0%,#3147d1 34%,#807fec 60%,#ea39ce 100%);
  --srn-grad-diag:linear-gradient(135deg,#3147d1 0%,#807fec 45%,#ea39ce 100%);
}

/* ============================================================
   TYPOGRAPHIE DE BASE
   ============================================================ */
body{
  font-family:'Glacial Indifference',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--srn-dark);
  font-size:18px;line-height:1.7;
}
h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:'New Nord Extended Heavy','New Nord',sans-serif;
  font-weight:400;
  line-height:1.08;
  letter-spacing:.2px;
  color:var(--srn-dark);
  text-transform:uppercase;
  overflow-wrap:break-word;
}
h1{font-size:clamp(2.1rem,4.8vw,3.7rem);}
h2{font-size:clamp(1.5rem,2.9vw,2.25rem);}
h3{font-size:clamp(1.15rem,2vw,1.5rem);}

a{color:var(--srn-blue);text-decoration:none;}
a:hover{color:var(--srn-pink);}

/* ============================================================
   UTILITAIRES DE MARQUE (classes CSS ajoutables sur les sections)
   ============================================================ */
.srn-gradient{background:var(--srn-grad)!important;}
.srn-gradient-diag{background:var(--srn-grad-diag)!important;}
.srn-on-dark, .srn-on-dark .elementor-heading-title,
.srn-on-dark h1,.srn-on-dark h2,.srn-on-dark h3,.srn-on-dark p,
.srn-on-dark .elementor-widget-text-editor{color:#fff!important;}
.srn-grain{position:relative;}
.srn-grain:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Eyebrow / sur-titre */
.srn-eyebrow .elementor-heading-title{
  font-family:'Glacial Indifference',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:3px;font-size:.95rem;color:var(--srn-cyan);
}

/* ============================================================
   BOUTONS
   ============================================================ */
.elementor-button,.srn-btn{
  font-family:'New Nord','Glacial Indifference',sans-serif;
  text-transform:uppercase;letter-spacing:1px;font-weight:700;
  border-radius:999px;padding:.85em 2em;transition:transform .15s ease,box-shadow .15s ease,background .2s ease;
}
.elementor-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(234,57,206,.35);}
.srn-btn-primary .elementor-button,.srn-btn-primary.elementor-button{
  background:var(--srn-pink)!important;color:#fff!important;
}
.srn-btn-ghost .elementor-button,.srn-btn-ghost.elementor-button{
  background:transparent!important;color:#fff!important;border:2px solid #fff!important;
}

/* ============================================================
   FORMULAIRES Contact Form 7
   ============================================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea{
  width:100%;padding:13px 16px;border:1px solid #d9d6ea;border-radius:12px;
  font-family:'Glacial Indifference',sans-serif;font-size:1rem;background:#fff;color:#141133;
  box-sizing:border-box;
}
.wpcf7 textarea{min-height:150px;}
.wpcf7 label{font-weight:700;display:block;color:inherit;}
.wpcf7 input[type="submit"],
.wpcf7-submit{
  background:var(--srn-pink) !important;color:#fff !important;border:none !important;
  font-family:'New Nord','Glacial Indifference',sans-serif;text-transform:uppercase;
  letter-spacing:1px;font-weight:700;font-size:1rem;border-radius:999px;
  padding:.85em 2.6em;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
}
.wpcf7 input[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(234,57,206,.4);}

/* Formulaire newsletter : input + bouton centrés et espacés */
.srn-cf7-inline{max-width:600px;margin:0 auto;text-align:center;}
.srn-cf7-inline input[type="email"]{margin-bottom:20px;}
.srn-cf7-inline input[type="submit"]{display:inline-block;}
.srn-cf7-inline .wpcf7-spinner{display:none;}
.srn-cf7-inline br{display:none;}

/* ============================================================
   CARTES (distances, infos…)
   ============================================================ */
.srn-card{
  background:#fff;border-radius:22px;padding:34px 28px;height:100%;
  box-shadow:0 18px 40px rgba(20,17,51,.10);border:1px solid rgba(128,127,236,.15);
}
.srn-card .elementor-icon-box-title{text-transform:uppercase;}
/* Cartes distances */
.srn-cardnum .elementor-heading-title{font-size:2.7rem;line-height:1;}
.srn-cardsub .elementor-heading-title{
  font-family:'Glacial Indifference',sans-serif;text-transform:uppercase;
  letter-spacing:1.5px;font-size:.78rem;font-weight:700;color:#807fec;margin-top:6px;
}
/* Titres des blocs "infos pratiques" (colonnes étroites) */
.srn-ico .elementor-heading-title{font-size:1.15rem;letter-spacing:0;}

/* ============================================================
   EN-TÊTE (HFE #masthead)
   ============================================================ */
/* En-tête collant (override de la règle HFE .ehf-header #masthead{position:relative}) */
#masthead{background:#0d0a26;position:sticky !important;top:0 !important;z-index:1000 !important;}
#masthead .elementor-section{overflow:visible;}
/* Burger mobile : blanc (sinon invisible sur le fond sombre) */
#masthead div.hfe-nav-menu-icon,
#masthead .hfe-nav-menu__toggle,
#masthead .hfe-nav-menu-icon i,
#masthead .hfe-nav-menu-icon svg{color:#fff !important;fill:#fff !important;}
/* En-tête compact (logo à gauche, burger à droite) + menu déroulant sombre — tablette/mobile */
@media (max-width:1024px){
  #masthead .elementor-container{display:flex !important;flex-wrap:nowrap !important;align-items:center !important;}
  #masthead .elementor-container > .elementor-column.elementor-col-26{width:auto !important;flex:1 1 auto !important;}
  #masthead .elementor-container > .elementor-column.elementor-col-54{width:auto !important;flex:0 0 auto !important;}
  #masthead .elementor-container > .elementor-column.elementor-col-20{display:none !important;}
  #masthead .srn-logo-img img{height:50px !important;}
  /* Burger tout à droite (surcharge le margin:0 auto de HFE) */
  #masthead .hfe-nav-menu__toggle{margin:0 0 0 auto !important;display:flex !important;}
  #masthead .hfe-nav-menu.hfe-layout-horizontal{display:flex !important;justify-content:flex-end !important;}
  /* IMPORTANT : cache le menu horizontal (fermé) sous 1024px, sinon il élargit la
     colonne et pousse le burger hors de l'écran. Il réapparaît quand on ouvre (menu-is-active). */
  #masthead nav.hfe-nav-menu__layout-horizontal:not(.menu-is-active){display:none !important;}
  /* Menu OUVERT = panneau plein écran qui glisse depuis la droite (off-canvas) */
  #masthead nav.hfe-nav-menu__layout-horizontal.menu-is-active{
    position:fixed !important;
    top:var(--srn-hh,78px) !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important; height:auto !important; max-width:none !important; margin:0 !important;
    padding:12px 0 40px !important;
    background:#0d0a26 !important; border-radius:0 !important; box-shadow:none !important;
    overflow-y:auto !important; z-index:995 !important;
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    animation:srnDrawer .30s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes srnDrawer{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
  #masthead nav.menu-is-active ul.hfe-nav-menu{width:100% !important;flex-direction:column !important;background:transparent !important;padding:0 !important;}
  #masthead ul.hfe-nav-menu > li.menu-item{background:transparent !important;border-bottom:1px solid rgba(255,255,255,.10) !important;width:100% !important;text-align:left !important;}
  #masthead ul.hfe-nav-menu > li.menu-item:last-child{border-bottom:none !important;}
  #masthead ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item,
  #masthead ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item:hover{background:transparent !important;color:#fff !important;justify-content:flex-start !important;text-align:left !important;padding:19px 28px !important;font-size:1.05rem !important;}
  #masthead ul.hfe-nav-menu > li.menu-item.current-menu-item > a.hfe-menu-item{color:var(--srn-cyan) !important;}
}
/* Logo image (badge blanc) */
#masthead .srn-logo-img img{height:74px !important;width:auto !important;max-width:none !important;display:block;}
#colophon .srn-logo-img img{height:88px !important;width:auto !important;max-width:none !important;display:block;}
.srn-logo-img .elementor-widget-container{line-height:0;}
.srn-logo .elementor-heading-title{
  font-family:'New Nord Extended Heavy',sans-serif !important;font-size:1.55rem;color:#fff;letter-spacing:1px;line-height:1;text-transform:uppercase;
}
.srn-logo .elementor-heading-title a{color:#fff;}
.srn-logo .elementor-heading-title b{color:var(--srn-cyan);}
#masthead .hfe-nav-menu .menu-item a.hfe-menu-item,
#masthead a.hfe-menu-item{
  color:#fff !important;font-family:'Glacial Indifference',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;font-size:.88rem;
}
#masthead .hfe-nav-menu .menu-item a.hfe-menu-item:hover,
#masthead .hfe-nav-menu .current-menu-item a.hfe-menu-item{color:var(--srn-cyan) !important;}
/* Sous-menus déroulants (desktop + mobile) */
#masthead .hfe-nav-menu .sub-menu{background:#171340 !important;border-radius:0 0 12px 12px;box-shadow:0 18px 34px rgba(0,0,0,.4);padding:6px 0;min-width:220px;}
#masthead .hfe-nav-menu .sub-menu li.menu-item a.hfe-sub-menu-item,
#masthead .hfe-nav-menu .sub-menu li.menu-item a.hfe-menu-item{
  color:#fff !important;background:transparent !important;
  font-family:'Glacial Indifference',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;font-size:.8rem;padding:12px 22px !important;
}
#masthead .hfe-nav-menu .sub-menu li.menu-item a.hfe-sub-menu-item:hover,
#masthead .hfe-nav-menu .sub-menu li.menu-item a.hfe-menu-item:hover{color:var(--srn-cyan) !important;background:rgba(255,255,255,.07) !important;}
#masthead .hfe-nav-menu .sub-menu li.current-menu-item a.hfe-sub-menu-item,
#masthead .hfe-nav-menu .sub-menu li.current-menu-item a.hfe-menu-item{color:var(--srn-cyan) !important;}
/* Hamburger mobile */
#masthead .hfe-nav-menu-icon,#masthead .hfe-menu-toggle{color:#fff !important;}

/* ============================================================
   PIED DE PAGE (HFE #colophon)
   ============================================================ */
#colophon{background:var(--srn-ink);}
#colophon,#colophon p,#colophon a,#colophon li,#colophon .elementor-widget-text-editor{color:#b9b3d6 !important;}
#colophon a:hover{color:var(--srn-cyan) !important;}
#colophon .elementor-heading-title{color:#fff !important;font-size:1.05rem;letter-spacing:1px;}
#colophon .srn-logo .elementor-heading-title{font-size:1.5rem;}
#colophon .hfe-nav-menu .menu-item a.hfe-menu-item{color:#b9b3d6 !important;text-transform:uppercase;font-weight:700;font-size:.85rem;}
#colophon .hfe-nav-menu .menu-item a.hfe-menu-item:hover{color:var(--srn-cyan) !important;}

/* ============================================================
   DÉTAILS
   ============================================================ */
.elementor-section{overflow-x:clip;}
img{max-width:100%;height:auto;}

/* ============================================================
   FOND ANIMÉ « LAVA LAMP » (sections à dégradé) — inspiré de Unknown.jpeg
   Le calque .srn-lava-bg est injecté en JS dans chaque section à dégradé.
   ============================================================ */
.srn-lava-section{position:relative;overflow:hidden;isolation:isolate;}
.srn-lava-section > *:not(.srn-lava-bg){position:relative;z-index:2;}
.srn-lava-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#1e1758;}
.srn-lava-bg .srn-blob{position:absolute;border-radius:50%;filter:blur(74px);mix-blend-mode:screen;will-change:transform;opacity:.72;}
.srn-lava-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(135% 130% at 50% 12%, rgba(14,10,42,0) 42%, rgba(14,10,42,.34) 100%), rgba(14,10,42,.20);}
.srn-lava-bg .b1{width:62vw;height:62vw;background:#6accea;left:-12%;bottom:-28%;animation:srnLavaA 6s ease-in-out infinite alternate;}
.srn-lava-bg .b2{width:56vw;height:56vw;background:#ea39ce;right:-12%;top:-24%;animation:srnLavaB 8s ease-in-out infinite alternate;}
.srn-lava-bg .b3{width:66vw;height:66vw;background:#3147d1;left:22%;top:-22%;animation:srnLavaC 7s ease-in-out infinite alternate;}
.srn-lava-bg .b4{width:52vw;height:52vw;background:#807fec;right:8%;bottom:-26%;animation:srnLavaD 5s ease-in-out infinite alternate;}
.srn-lava-bg .srn-lava-grain{position:absolute;inset:0;opacity:.15;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@keyframes srnLavaA{0%{transform:translate(0,0) scale(1);}100%{transform:translate(28%,-18%) scale(1.25);}}
@keyframes srnLavaB{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-22%,24%) scale(1.18);}}
@keyframes srnLavaC{0%{transform:translate(0,0) scale(1.05);}100%{transform:translate(18%,26%) scale(1.3);}}
@keyframes srnLavaD{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-24%,-16%) scale(1.2);}}
@media (prefers-reduced-motion: reduce){.srn-lava-bg .srn-blob{animation:none;}}