*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Outfit",Arial,Helvetica,sans-serif;color:#fff;background:#000}
body{overflow-x:hidden}
.site-header{height:112px;background:#050505;display:flex;align-items:center;justify-content:center;gap:8vw;padding:10px 4vw;position:relative;z-index:5}
.brand{display:flex;align-items:center;width:155px;flex:0 0 155px;height:88px}
.brand img{max-width:100%;max-height:100%;object-fit:contain}
.site-header nav{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.7vw,31px);white-space:nowrap}
.site-header nav a{font-size:14px;color:#f5f5f5;text-decoration:none}
.site-header nav a:hover{color:#f75900}
.ticker{height:26px;overflow:hidden;white-space:nowrap;background:#e91e23;display:flex;align-items:center;font-size:16px}
.ticker span{min-width:max-content;animation:marquee 42s linear infinite}
@keyframes marquee{to{transform:translateX(-45%)}}
.hero{position:relative;isolation:isolate;min-height:calc(100vh - 138px);overflow:hidden;background:#173400;display:flex;flex-direction:column;padding:32px 6.7% 18px}
.hero-background{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(90deg,rgba(8,30,0,.58),rgba(28,52,0,.18) 48%,rgba(0,20,0,.58)),linear-gradient(0deg,rgba(0,22,0,.3),transparent 55%),url("https://yadsa.fr/wp-content/uploads/2025/03/Yadsa.education_Tonnerre.png");background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-top{display:grid;grid-template-columns:minmax(235px,18%) minmax(0,1fr) minmax(245px,22%);column-gap:18px;align-items:start}
.hero-logos{display:flex;align-items:flex-start;gap:9px;padding-top:5px}
.hero-logos img{object-fit:contain}
.thinker{width:72%;max-width:170px;height:auto}
.yadsa-mark{width:58px;max-height:90px;margin-top:35px}
.hero-copy{min-width:0}
.hero-copy h1{font-size:clamp(22px,2vw,35px);line-height:1.2;letter-spacing:.3px;margin:0 0 10px;font-weight:700;white-space:nowrap}
.cta{display:block;background:#087bff;border-radius:30px;color:white;text-decoration:none;font-weight:700;font-size:14px;padding:11px 25px;text-align:center;width:fit-content;max-width:100%;margin:0 auto 18px}
.tagline{font-size:clamp(15px,1.2vw,20px);margin:0;line-height:1.5;white-space:nowrap}
.portrait-wrap{display:flex;flex-direction:column;align-items:center;z-index:1;margin-top:0}
.portrait-frame{width:min(100%,300px);height:clamp(330px,51vh,450px);border:9px solid #f39800;border-radius:48% 48% 45% 45%;overflow:hidden;background:#080808;box-shadow:0 0 0 2px rgba(255,170,0,.35);display:flex;flex-direction:column}
.portrait-frame img{height:83%;width:100%;object-fit:cover;object-position:center 22%;filter:sepia(.55) saturate(.7)}
.portrait-label{height:17%;display:flex;align-items:center;justify-content:center;background:#050505;color:#9c9096;font-size:clamp(30px,3vw,44px);letter-spacing:3px}
.stand{width:72%;height:12px;background:#e99400;box-shadow:0 0 0 2px rgba(255,170,0,.25);margin-top:14px}
.intro{position:absolute;left:6.8%;top:44%;width:61%;font-size:13px;line-height:1.75;letter-spacing:.35px;margin:0}
.hero-footer{margin-top:auto;display:grid;grid-template-columns:170px minmax(350px,1fr) 120px minmax(230px,280px);gap:18px;align-items:center;padding-top:26px}
.yadsa-script{font-family:"Brush Script MT","Segoe Script",cursive;font-size:58px;font-style:italic;line-height:1;color:#f3e8e8;transform:rotate(-7deg)}
.quote-area blockquote{font-family:Georgia,serif;font-weight:300;font-size:clamp(17px,1.4vw,25px);line-height:1.3;letter-spacing:.4px;color:#d8d4cf;margin:0}
.quote-sub{font-size:10px;line-height:1.3;margin:8px 0 0;color:#fff}
.seal{width:110px;height:110px;border-radius:50%;border:3px double #ddd;background:radial-gradient(circle,#ddd 0 2%,#111 4% 50%,#555 52%,#111 56%);font-size:8px;text-align:center;padding-top:8px;transform:rotate(-15deg);color:#fff}
.seal strong{display:block;font-size:18px;margin-top:25px}
.hero-footer audio{width:100%;height:42px;max-width:280px}
.bottom-slogan{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-top:18px;font-family:"Brush Script MT","Segoe Script",cursive;font-size:clamp(20px,1.8vw,30px);line-height:1.25}
.back-top{position:fixed;right:2%;bottom:18px;background:#9860f2;color:#fff;text-decoration:none;border-radius:3px;padding:10px 14px;font-size:22px;z-index:8}
@media(max-width:1100px){.site-header{gap:25px}.hero{padding-left:3%;padding-right:3%}.hero-top{grid-template-columns:150px minmax(0,1fr) 210px;gap:12px}.hero-copy h1{white-space:normal}.tagline{white-space:normal}.intro{left:4%;width:60%;top:46%}.hero-footer{grid-template-columns:120px minmax(250px,1fr) 85px 210px;gap:12px}.seal{width:80px;height:80px}.seal strong{margin-top:15px}}
@media(max-width:760px){.site-header{height:auto;min-height:95px;gap:10px;flex-wrap:wrap}.brand{width:70px;flex-basis:70px;height:54px}.site-header nav{flex:1;flex-wrap:wrap;gap:10px 14px;white-space:normal}.site-header nav a{font-size:12px}.ticker{font-size:13px}.hero{min-height:calc(100vh - 120px);padding:22px 18px 30px;overflow:visible}.hero-top{display:flex;flex-direction:column;gap:18px}.hero-logos{align-items:center}.thinker{max-width:135px}.yadsa-mark{margin-top:0;width:48px}.hero-copy h1{font-size:25px}.cta{font-size:13px;margin:12px 0 18px}.tagline{font-size:15px}.portrait-wrap{align-self:center;width:230px}.portrait-frame{height:330px}.intro{position:static;width:auto;margin:24px 0 0;font-size:13px}.hero-footer{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.yadsa-script{font-size:48px}.quote-area{grid-column:1/-1;grid-row:1}.seal{width:72px;height:72px}.hero-footer audio{max-width:100%}.bottom-slogan{flex-direction:column;align-items:flex-start;font-size:23px}.back-top{right:12px;bottom:12px}}


/* Logo fourni par l'utilisateur : menu principal et section d'accueil */
.brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.provided-logo {
  width: 150px;
  height: auto;
  max-height: 130px;
  object-fit: contain;
  flex: 0 0 auto;
  margin-top: 0;
}
@media (max-width: 760px) {
  .provided-logo {
    width: 105px;
    max-height: 90px;
  }
}


/* Effet Eureka : texte en défilement, visuel sticky synchronisé à la section active */
.longform {
  background: #050505;
  color: #fff;
  padding: 64px clamp(18px, 5vw, 84px) 90px;
}
.longform-heading {
  max-width: 1100px;
  margin: 0 auto 42px;
  border-bottom: 1px solid #303030;
  padding-bottom: 18px;
}
.longform-heading span {
  color: #f75900;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: .08em;
}
.longform-heading p {
  color: #bcbcbc;
  font-size: 14px;
  margin: 12px 0 0;
}
.story-layout {
  display: grid;
  grid-template-columns: minmax(260px, 38%) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
}
.sticky-media {
  position: sticky;
  top: 32px;
  align-self: start;
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sticky-media-frame {
  position: relative;
  min-height: 280px;
  height: min(54vh, 520px);
  background: #0b0b0b;
  border: 1px solid #262626;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sticky-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .45s ease, transform .45s ease;
}
.sticky-visual.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.media-caption {
  margin-top: 12px;
  color: #888;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.story-progress {
  margin-top: 12px;
  height: 3px;
  background: #292929;
}
.story-progress span {
  display: block;
  height: 100%;
  width: 50%;
  background: #f75900;
  transition: width .3s ease;
}
.story-content { min-width: 0; }
.story-panel {
  min-height: 88vh;
  padding: 0 0 70px;
  margin: 0 0 48px;
  border-bottom: 1px solid #292929;
  scroll-margin-top: 32px;
}
.story-kicker {
  color: #f75900;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .16em;
  margin: 0 0 14px;
}
.story-panel h1, .story-panel h2, .story-panel h3, .story-panel h4 {
  color: #f75900;
  line-height: 1.25;
  margin: 0 0 22px;
}
.story-panel p, .story-panel li {
  color: #f75900;
  font-size: 15px;
  line-height: 1.85;
}
.story-panel strong { color: #ff7a2f; }
.story-panel img:not(.sticky-visual) {
  max-width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .longform { padding: 38px 18px 60px; }
  .story-layout { display: flex; flex-direction: column; gap: 24px; }
  .sticky-media {
    position: sticky;
    top: 0;
    z-index: 4;
    width: 100%;
    height: auto;
    background: #050505;
    padding: 10px 0;
  }
  .sticky-media-frame { height: 210px; min-height: 160px; }
  .sticky-visual { padding: 12px; }
  .story-panel { min-height: 0; padding-bottom: 42px; margin-bottom: 38px; }
}

/* Accueil : parcours éditorial Noématique > Noème > Mot */
.story-content{min-width:0}
.story-panel{min-height:88vh;padding:clamp(28px,4vw,64px) 0;border-bottom:1px solid rgba(247,89,0,.28)}
.story-panel h2{color:#fff;font-size:clamp(1.55rem,2.7vw,2.65rem);line-height:1.12;margin:0 0 1.1rem}
.story-panel h3{color:#fff;font-size:clamp(1.1rem,2vw,1.7rem);line-height:1.3;margin:0 0 1.8rem}
.story-panel .yadsa-text-content p{line-height:1.8;margin:0 0 1.15rem;white-space:normal}
.sticky-visual{opacity:0;transition:opacity .65s ease;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sticky-visual.active{opacity:1}
.sticky-media-frame{position:relative}
@media(max-width:800px){.story-panel{min-height:auto;padding:36px 0}.sticky-media{position:sticky;top:0;height:34vh;z-index:2}.story-panel h2{font-size:1.65rem}}

/* Section navigation */
.story-arrows{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px;color:#f75900;font-size:12px;letter-spacing:.08em}
.story-arrows button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #f75900;border-radius:50%;background:transparent;color:#f75900;font-size:23px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.story-arrows button:hover{background:#f75900;color:#000;transform:translateY(-2px)}
.story-arrows button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.longform-heading span{display:block;color:#f75900;font-size:clamp(20px,2.4vw,32px);font-weight:700;letter-spacing:.04em;line-height:1.2}
.story-panel ul,.story-panel ol{padding-left:1.4em;line-height:1.85}
.story-panel li{padding-left:.2em;margin:.25em 0}
@media(max-width:760px){.story-arrows{margin:12px 0 0}.story-arrows button{width:38px;height:38px}}

/* Audio excerpt before each title — standard HTML5 MP3 player */
.section-audio{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 24px;max-width:420px}
.section-audio .audio-label{color:#b9b9b9;font-size:10px;font-weight:700;letter-spacing:.16em}
.section-audio audio{display:block;width:min(100%,360px);height:40px;accent-color:#f75900}
.story-panel[aria-current="step"] h2{text-shadow:0 0 22px rgba(247,89,0,.12)}
.story-arrows button:disabled{opacity:.28;cursor:not-allowed;transform:none}
.story-panel{scroll-margin-top:42px}
@media(max-width:800px){.story-panel{scroll-margin-top:38vh}.section-audio{margin-bottom:18px}.section-audio audio{width:min(100%,100%)}}


/* Audio unique : sous le visuel, au-dessus des flèches. La logique de défilement reste inchangée. */
.sticky-audio{display:flex;flex-direction:column;gap:7px;margin-top:14px;max-width:100%;}
.sticky-audio .audio-label{color:#b9b9b9;font-size:10px;font-weight:700;letter-spacing:.12em;line-height:1.4;}
.sticky-audio audio{display:block;width:100%;max-width:360px;height:40px;accent-color:#f75900;}
@media(max-width:800px){.sticky-audio{margin-top:10px}.sticky-audio audio{max-width:100%;width:100%}.sticky-media-frame{height: min(34vh, 260px);min-height:150px}}

/* Typographie principale : Outfit */
body, button, input, select, textarea { font-family: "Outfit", Arial, Helvetica, sans-serif; }

/* Elementor homepage integration (YADSA Theme 1.1.0) */
.yadsa-elementor-home {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.yadsa-elementor-home > .elementor,
.yadsa-elementor-home .elementor-section-wrap {
  width: 100%;
}
body.yadsa-home-built-with-elementor .site-main {
  min-width: 0;
}


/* YADSA announcement ticker — homepage stylesheet (style.css is not loaded on front page). */
.yadsa-ticker {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 26px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    background: #e91e23;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}
.yadsa-ticker span {
    display: inline-block;
    flex: 0 0 auto;
    min-width: max-content;
    padding-left: 100%;
    animation: yadsa-ticker-marquee 42s linear infinite;
}
.yadsa-ticker:hover span,
.yadsa-ticker:focus-within span {
    animation-play-state: paused;
}
@keyframes yadsa-ticker-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
@media (max-width: 767px) {
    .yadsa-ticker { height: 25px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .yadsa-ticker span { animation: none; padding-left: 12px; }
}


/* Homepage: return-to-top styles are repeated here because front-page.php
   loads yadsa-home.css instead of the main style.css. */
.yadsa-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(247,89,0,.75);
    border-radius: 50%;
    background: rgba(8,8,8,.88);
    color: #f75900;
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .2s ease;
}
.yadsa-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.yadsa-back-to-top:hover {
    background: #f75900;
    color: #050505;
}
@media (max-width: 620px) {
    .yadsa-back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}