/* === COUCHE D'INTERACTION V20 — Grammaire Fondation des États-Unis adaptée Zynapse === */

/* 1. COLOR SWITCH ÉDITORIAL LENT */
body{
  background-color:#eae6da;
  transition:background-color 820ms cubic-bezier(0.65,0,0.35,1);
}
body[data-bg-current="navy"]{background-color:#1c2b4f;}
body[data-bg-current="ivory"]{background-color:#eae6da;}
.site{
  transition:background-color 820ms cubic-bezier(0.65,0,0.35,1);
}

/* La nav adopte la couleur de la section courante */
.nav-bar{
  position:sticky;top:0;z-index:100;
  background:transparent;
  transition:color 600ms cubic-bezier(0.65,0,0.35,1), border-color 600ms cubic-bezier(0.65,0,0.35,1);
}
body[data-bg-current="navy"] .nav-bar{color:#eae6da;}
body[data-bg-current="navy"] .nav-bar .nav-link{color:#eae6da !important;}
body[data-bg-current="navy"] .nav-bar img.nav-logo{filter:brightness(0) invert(1);opacity:0.96;}
body[data-bg-current="ivory"] .nav-bar{color:#1c2b4f;}
body[data-bg-current="ivory"] .nav-bar .nav-link{color:#1c2b4f !important;}
body[data-bg-current="ivory"] .nav-bar img.nav-logo{filter:none;opacity:1;}

/* 2. WORD-BY-WORD REVEAL — geste éditorial signature */
.wr{display:inline;}
.wr-word{
  display:inline-block;
  opacity:0;
  transform:translateY(28px);
  transition:opacity 480ms cubic-bezier(0.22,1,0.36,1), transform 480ms cubic-bezier(0.22,1,0.36,1);
  will-change:opacity,transform;
}
.wr-word.in{opacity:1;transform:translateY(0);}
.wr-space{display:inline-block;width:0.28em;}

/* 3. MARQUEE — bande horizontale de mots-clés italiques avec ornement Z */
.zy-marquee{
  position:relative;
  background:#1c2b4f;
  color:#eae6da;
  padding:36px 0;
  overflow:hidden;
  border-top:0.5px solid rgba(234,230,218,0.18);
  border-bottom:0.5px solid rgba(234,230,218,0.18);
}
.zy-marquee.on-ivory{
  background:#eae6da;
  color:#1c2b4f;
  border-color:rgba(28,43,79,0.18);
}
.zy-marquee-track{
  display:flex;
  align-items:center;
  gap:64px;
  white-space:nowrap;
  width:max-content;
  animation:marqueeSlide 38s linear infinite;
  will-change:transform;
}
.zy-marquee-item{
  font-family:'Bodoni Moda',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:32px;
  line-height:1;
  letter-spacing:-0.005em;
  display:inline-flex;align-items:center;gap:64px;
}
.zy-marquee-orn{
  display:inline-block;
  width:24px;height:24px;
  background-image:url(image/marquee-z.png);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0.78;
  flex-shrink:0;
}
.zy-marquee.on-ivory .zy-marquee-orn{opacity:1;}
.zy-marquee.on-navy .zy-marquee-orn{filter:brightness(0) invert(1);opacity:0.85;}
@keyframes marqueeSlide{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* 4. FOOTER SPLIT — bloc sombre newsletter / bloc couleur soutenir */
.footer-split{
  display:grid;
  grid-template-columns:1fr;
  min-height:auto;
}
.footer-split-left{
  background:#1f1f1f;
  color:#eae6da;
  padding:90px 64px 50px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.footer-split-left h3{
  font-family:'Bodoni Moda',Georgia,serif;
  font-weight:400;
  font-size:27px;
  line-height:1.18;
  margin:0 0 36px;
  color:#eae6da;
  letter-spacing:-0.015em;
}
.footer-split-left h3 em{font-style:italic;}
.footer-newsletter{
  display:flex;
  align-items:stretch;
  border-bottom:0.5px solid rgba(234,230,218,0.5);
  padding-bottom:14px;
  margin-bottom:18px;
}
.footer-newsletter input{
  flex:1;
  background:transparent;border:none;outline:none;
  color:#eae6da;
  font-family:'Source Sans 3',sans-serif;
  font-size:14px;
  font-weight:400;
  padding:8px 0;
}
.footer-newsletter input::placeholder{color:rgba(234,230,218,0.55);}
.footer-newsletter button{
  background:transparent;border:none;cursor:pointer;
  color:#eae6da;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  width:32px;
  transition:transform 0.25s;
}
.footer-newsletter button:hover{transform:translateX(3px);}
.footer-split-left .legal{
  font-family:'Source Sans 3',sans-serif;
  font-weight:300;
  font-size:11px;
  line-height:1.5;
  color:rgba(234,230,218,0.55);
  margin:0 0 28px;
  max-width:420px;
}
.footer-split-left .legal a{color:#eae6da;text-decoration:underline;text-underline-offset:2px;}
.footer-social{
  display:flex;gap:16px;margin-bottom:42px;
}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border:0.5px solid rgba(234,230,218,0.4);
  border-radius:50%;
  color:#eae6da;
  font-family:'Source Sans 3',sans-serif;
  font-size:11px;
  letter-spacing:0.05em;
  text-decoration:none;
  transition:background 0.25s, color 0.25s;
}
.footer-social a:hover{background:#eae6da;color:#1f1f1f;}
.footer-split-left .legal-row{
  font-family:'Source Sans 3',sans-serif;
  font-size:11px;
  letter-spacing:0.03em;
  color:rgba(234,230,218,0.55);
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.footer-split-left .legal-row span{cursor:default;}
.footer-split-left .legal-row .copy{margin-left:auto;}

.footer-split-right{
  background:#1c2b4f;
  color:#eae6da;
  padding:90px 64px 50px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.footer-split-right .tag{
  display:inline-block;
  background:rgba(234,230,218,0.08);
  border:0.5px solid rgba(234,230,218,0.45);
  color:#eae6da;
  padding:8px 18px;
  font-family:'Source Sans 3',sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  align-self:flex-start;
  margin-bottom:0;
}
.footer-split-right h2{
  font-family:'Bodoni Moda',Georgia,serif;
  font-weight:400;
  font-size:46px;
  line-height:1.06;
  margin:auto 0 36px;
  color:#eae6da;
  letter-spacing:-0.022em;
}
.footer-split-right h2 em{font-style:italic;}
.footer-cta-pair{
  display:flex;
  align-items:stretch;
  gap:14px;
  margin-bottom:0;
}
.footer-cta-pair .btn-rect{
  background:#eae6da;
  color:#1c2b4f;
  font-family:'Source Sans 3',sans-serif;
  font-weight:500;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:18px 36px;
  border:none;cursor:pointer;
  display:flex;align-items:center;
  transition:background 0.25s,color 0.25s;
}
.footer-cta-pair .btn-rect:hover{background:#fff;}
.footer-cta-pair .btn-circle{
  width:54px;height:54px;
  border:0.5px solid #eae6da;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#eae6da;
  font-size:18px;
  transition:background 0.25s,color 0.25s,transform 0.25s;
}
.footer-cta-pair .btn-circle:hover{background:#eae6da;color:#1c2b4f;transform:translateX(3px);}
.footer-split-right .footnote{
  position:absolute;bottom:50px;right:64px;
  font-family:'Source Sans 3',sans-serif;
  font-size:11px;
  letter-spacing:0.03em;
  color:rgba(234,230,218,0.55);
}

/* Mobile */
@media (max-width:900px){
  .footer-split{grid-template-columns:1fr;}
  .footer-split-left,.footer-split-right{padding:60px 28px 36px;min-height:auto;}
  .footer-split-right h2{font-size:31px;}
  .zy-marquee-item{font-size:24px;gap:36px;}
  .zy-marquee-track{gap:36px;}
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  body,.site,.nav-bar{transition:none !important;}
  .wr-word{opacity:1 !important;transform:none !important;transition:none !important;}
  .zy-marquee-track{animation:none !important;}
}



/* V21 — Placeholder zones (Lorem ipsum visible mais marqué) */
.placeholder-zone{
  position:relative;
}
.placeholder-zone::before{
  content:"À VALIDER · Lorem ipsum";
  position:absolute;
  top:18px;right:18px;
  z-index:50;
  background:rgba(255,200,50,0.92);
  color:#1c2b4f;
  font-family:'Source Sans 3',sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:2px;
  pointer-events:none;
}
.placeholder-zone[data-bg="navy"]::before{
  background:rgba(255,210,80,0.95);
}
.placeholder-zone--inline::before{
  position:static;display:inline-block;margin:0 0 10px;
}
/* Image placeholders supplémentaires */
.imgph-add{
  position:relative;
  background:repeating-linear-gradient(135deg,#d6d1bf 0px,#d6d1bf 14px,#dcd7c6 14px,#dcd7c6 28px);
  border:0.5px dashed rgba(28,43,79,0.32);
  display:flex;align-items:center;justify-content:center;
}
.imgph-add::before{
  content:"image";
  font-family:'Source Sans 3';font-weight:400;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(28,43,79,0.55);
}
.imgph-add-d{
  position:relative;
  background:repeating-linear-gradient(135deg,#22335e 0px,#22335e 14px,#283b69 14px,#283b69 28px);
  border:0.5px dashed rgba(234,230,218,0.32);
  display:flex;align-items:center;justify-content:center;
}
.imgph-add-d::before{
  content:"image";
  font-family:'Source Sans 3';font-weight:400;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(234,230,218,0.6);
}

/* 7. ACCUEIL — panneaux plein écran, défilement panneau par panneau (desktop) */
@media (min-width:901px){
  html.home-snap{scroll-snap-type:y mandatory;}
  /* overflow:hidden ferait de .site le conteneur de défilement : clip coupe sans créer de défileur */
  body.home-snap .site{overflow:clip;}
  body.home-snap .site > section.panel{
    box-sizing:border-box;
    min-height:100svh;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    display:flex;flex-direction:column;justify-content:center;
    padding-top:110px !important;
    padding-bottom:56px !important;
  }
  /* le hero vient juste sous la nav (100px dans le flux) : il complète l'écran */
  body.home-snap .site > section.panel-hero{
    scroll-margin-top:100px; /* le point de calage du hero est le haut de page, nav comprise */
    min-height:calc(100svh - 100px);
    padding-top:0 !important;
    padding-bottom:40px !important;
  }
  body.home-snap .site > section.panel > *{width:100%;}
  body.home-snap .site > footer{scroll-snap-align:end;}
}
@media (min-width:901px) and (max-height:760px){
  /* petits écrans d'ordinateur portable : on resserre encore */
  body.home-snap .site > section.panel{padding-top:100px !important;padding-bottom:36px !important;}
}

/* 7b. ACCUEIL — les panneaux "piliers" et "laboratoire" doivent tenir dans l'écran */
@media (min-width:901px){
  /* en-tête empilé (titre puis intro sous le titre), bien détaché du tableau */
  body.home-snap #piliers .piliers-head{display:block;margin-bottom:44px !important;}
  body.home-snap #piliers .piliers-intro{margin:16px 0 0 !important;max-width:640px !important;}
  body.home-snap #piliers .pilier:first-of-type{border-top-color:rgba(28,43,79,0.35) !important;}
  body.home-snap #labo h2{margin-bottom:24px !important;}
  body.home-snap #labo > p.zsl{margin-bottom:28px !important;}
}
/* écrans d'ordinateur portable (hauteur ≤ 820 px) : typo et espacements resserrés */
@media (min-width:901px) and (max-height:820px){
  body.home-snap #piliers h2{font-size:38px !important;}
  body.home-snap #piliers .piliers-head{margin-bottom:34px !important;}
  body.home-snap #piliers .piliers-intro{margin-top:12px !important;font-size:14px !important;line-height:1.55 !important;}
  body.home-snap #piliers .pilier{padding-top:13px !important;padding-bottom:11px !important;}
  body.home-snap #piliers .pilier-num{font-size:40px !important;}
  body.home-snap #piliers .pilier-h3{font-size:27px !important;margin-bottom:5px !important;}
  body.home-snap #piliers .pilier-tag{font-size:17px !important;}
  body.home-snap #piliers .pilier-desc{font-size:14.5px !important;line-height:1.5 !important;}
  body.home-snap #labo h2{font-size:36px !important;margin-bottom:18px !important;}
  body.home-snap #labo > p.zsl{font-size:16px !important;line-height:1.55 !important;margin-bottom:22px !important;}
  body.home-snap #labo .labo-tv{max-height:230px !important;}
  body.home-snap #labo h3{font-size:30px !important;margin-bottom:12px !important;}
  body.home-snap #labo > div{padding-top:26px !important;}
}

/* 7c. DÉFILEMENT PAR PANNEAU — toutes les pages */
@media (min-width:901px){
  /* hero des pages intérieures : le wrapper n'impose plus 620px ni ses grandes marges */
  body.home-snap .panel-hero .hero-inner{min-height:auto !important;padding-top:40px !important;padding-bottom:40px !important;justify-content:center !important;width:100%;}
  /* accueil : le panneau "Zynapse 2027" part du haut */
  body.home-snap #labo{justify-content:flex-start !important;}
}
@media (min-width:901px) and (max-height:700px){
  /* très petits portables : titres de hero un cran plus petits pour rester dans l'écran */
  body.home-snap .panel-hero h1{font-size:58px !important;}
}