/*
Theme Name: cellectis
Author: Clément Mille
Author URI: https://www.clement-mille.fr
Description: Specific theme for cellectis
Version: 1.0.0 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cellectis

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

:root {
    --lightblue:   #c5cdd7;
    --light:       #f9f9fa;
    --amber:       #f2b443;
    --navy:        #173860;
    --navy-dark:   #112A47;
    --navy-soft:   #335073;
    --pale:        #e6eef3;
    --pale-2:      #d6e3eb;
    --ink:         #1a2740;
    --mute:        #6e7f95;
    --teal:        #0094B2;
    --teal-2:      #0077B5;
    --white:       #FFFFFF;
    --black:       #000000;
    --gray-line:   #E4E4E4;
    --gray-50:     #F7F7F8;
    --gray-100:    #F5F5F5;

    /* Typography aligned with other site pages (Barlow, smaller scale) */
    --fs-hero:    56px;
    --fs-display: 48px;
    --fs-h2:      34px;
    --fs-h3:      22px;
    --fs-body:    16px;
    --fs-small:   15px;
    --fs-caption: 12px;

    --lh-tight: 1.05;
    --lh-h2:    1.2;
    --lh-body:  1.55;

    --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
    --sp-32: 32px; --sp-52: 52px; --sp-60: 60px; --sp-80: 80px; --sp-100: 100px;
    --sp-120: 120px;

    --line-on-navy: rgba(255,255,255,0.85);
    --line-soft-navy: rgba(255,255,255,0.55);
    --font-sans: 'Barlow', system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ease-out: cubic-bezier(.2,.6,.2,1);
    --ease-soft: cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{ scroll-behavior:smooth; }
body {background-color: #fff; color:var(--ink);font-family:var(--font-sans);font-style: normal;font-weight: 400;font-size: 16px;line-height: 1.55;-webkit-font-smoothing:antialiased;}
#loading {position: fixed;  display: flex;  justify-content: center;  align-items: center;  width: 100%;  height: 100%;  top: 0;  left: 0;  background-color: #fff; color:var(--navy);}
em, ins {color: inherit;}
a{color:inherit;text-decoration:none;}
a:hover{color:inherit;text-decoration:none;}
.single .after-hero-section a:not(.wp-block-button__link){color:inherit;text-decoration:none;color: var(--teal);border-bottom: 1px solid var(--teal);}
.single .after-hero-section a:not(.wp-block-button__link):hover{text-decoration:none;color: var(--amber);border-bottom: 1px solid var(--amber);}
a.notd, a.wp-element-button, a.wc-block-components-product-name{text-decoration:none;}
footer a, header a{text-decoration:none;}
:focus { outline: none; }
.transitionall, a{-webkit-transition: all 0.3s ease-in-out !important;transition: all 0.3s ease-in-out !important;}
.wp-block-separator {border-top: 1px solid;}
.uk-logo img{height:42px;width:auto;}
b, strong, .fw700 {font-weight: 700;}
.fw400{font-weight: 400;}


/* wp-block-accordion */
.wp-block-accordion-item:first-child {border-top: 1px solid #cccccc;}
.wp-block-accordion-item{border-bottom: 1px solid #cccccc;margin:0;}
.wp-block-accordion-panel{margin:0;padding-bottom:20px;}
.wp-block-accordion-heading{padding:15px 0;}
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {text-decoration: none}
.wp-block-accordion-heading__toggle-icon{color: var(--amber);}


/* bloc wp */
/*.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content{padding:0 8% 0 0;}
.wp-block-media-text.has-media-on-the-left>.wp-block-media-text__content{padding:0 0 0 8%;}*/

/* theme color */
/*.has-darkblue-color{color:var(--navy) !important;}
.has-lightblue-color{color:var(--lightblue) !important;}
.has-light-color{color:var(--light) !important;}
.has-white-color{color:#fff !important;}
.has-amber-color{color:var(--amber) !important;}*/


/* iframe */
iframe[src*="youtube.com"], 
iframe[src*="youtu.be"] {
    width: 100%;       /* Largeur maximale */
    aspect-ratio: 16 / 9; /* Maintient automatiquement le ratio hauteur/largeur */
    height: auto;      /* Laisse le navigateur calculer la hauteur */
    display: block;    /* Évite les espaces vides en bas */
}

.modal-iframe {
    width: 100%;       /* Largeur maximale */
    aspect-ratio: 16 / 9; /* Maintient automatiquement le ratio hauteur/largeur */
    height: auto;      /* Laisse le navigateur calculer la hauteur */
    display: block;    /* Évite les espaces vides en bas */
}



/* hero */
.hero {
    position: sticky; top: 0; z-index: 1;
    overflow: hidden;
    isolation: isolate;
    will-change: transform;
}
.hero .wp-block-cover__inner-container{
    max-width: 1180px;
    margin: 0 auto;
    position: relative;z-index: 3;
}
body:not(.home):not(.page-id-18):not(.page-id-139) .hero::before{
    content:""; position:absolute; inset:0; z-index:2;
    background: linear-gradient(90deg, rgba(8,22,44,.55) 0%, rgba(8,22,44,.25) 55%, rgba(8,22,44,0) 100%);
    pointer-events:none;
}
.after-hero-section {
    position: relative;
    z-index: 2;background:#fff;
}
.hero .lead{
    margin: 28px 0 0; color: #fff; opacity:.92;
    font-size:18px; font-weight:400; line-height:1.6; max-width:62ch;
}
.page-id-18 .breadcrumb a, .page-id-18 .breadcrumb span, .page-id-139 .breadcrumb a, .page-id-139 .breadcrumb span{color: var(--navy);}



/* switcher */
.uk-subnav>*>:first-child{color: #fff;}
.uk-subnav>.uk-active>a {color: #fff;}
.uk-subnav-pill>*{padding-left:1px;padding-bottom:1px;}
.uk-subnav-pill>*>:first-child{background:var(--navy);font-weight: 700;text-transform: uppercase;letter-spacing: .1em;font-size: 0.9rem;padding: 0.6em 1.1em;}
.uk-subnav-pill>.uk-active>a, .filter_fs .active {background-color: var(--amber);}
.uk-subnav-pill>*>a:hover {background-color: var(--amber);color: var(--black);}

.teamfilter .uk-card{background: var(--navy);color: var(--white);}
.teamfilter .uk-card-body h3{color: var(--white);}
.uk-modal-dialog{width:900px;}



/* nav */
.progress-container {width: 100%;height: 3px;background: transparent;}
.progress-bar {height: 2px;background: var(--teal);width: 0%;}
.navczidx{z-index:1000;}
.uk-navbar-container:not(.uk-navbar-transparent){background:#fff;border-bottom: 1px solid rgba(19, 53, 92, 0.08);}
.uk-navbar-container .uk-navbar-nav>li>a, .uk-navbar-container .uk-navbar-item, .uk-navbar-toggle{min-height: auto;padding: 6px 12px;letter-spacing: .04em;font-family:var(--font-sans);font-size:13px;font-weight:500;border-radius: 6px;color:var(--navy-dark);text-transform: initial;position:relative;-webkit-transition: color .2s, font-weight .2s, background-color .2s;transition: color .2s, font-weight .2s, background-color .2s;}
.uk-navbar-container ul.uk-navbar-nav>li> a {text-transform: uppercase;}
.uk-navbar-container .uk-navbar-nav>li>a:hover, .uk-navbar-container .uk-navbar-nav>li>a:focus{font-weight:800;background: var(--pale);}
.uk-navbar-container .uk-navbar-nav>li.uk-active>a{font-weight:700;color: var(--teal);}
.uk-navbar-container .uk-navbar-nav>li.uk-active{border-bottom:2px solid var(--teal);}
.uk-navbar-container .uk-navbar-dropdown{min-width: 280px;background: #fff;border: 1px solid rgba(10, 38, 71, 0.08);box-shadow: 0 18px 40px -12px rgba(10, 38, 71, 0.18), 0 4px 10px rgba(10, 38, 71, 0.06);padding: 18px 0;}
.uk-navbar-container.uk-sticky .uk-navbar-nav > li > .uk-navbar-dropdown {top: 79px !important;}
.uk-navbar-container.uk-sticky.uk-navbar-sticky .uk-navbar-nav > li > .uk-navbar-dropdown {top: 65px !important;}
.uk-navbar-container .uk-navbar-dropdown a{display:block;padding: 8px 16px;font-size: 14px;font-weight: 500;color: #173860;letter-spacing: 0;text-transform: none;line-height: 1.35;}
.uk-navbar-container .uk-navbar-dropdown li:not(.uk-active) a:hover, .uk-navbar-container .uk-navbar-dropdown a:not(.uk-active):hover{background:var(--pale);font-weight: 800}
.uk-navbar-container .uk-navbar-dropdown li.uk-active a, .uk-navbar-container .uk-navbar-dropdown a.uk-active{color: var(--teal);font-weight: 700;}
.uk-navbar-container .tm-navbar{padding:12px 0;-webkit-transition: padding .25s ease !important;transition: padding .25s ease !important;}
.uk-navbar-container.uk-navbar-sticky .tm-navbar{padding:5px 0;}
.investnav .nav_n1 a{font-size: 11px;letter-spacing: .06em; text-transform: uppercase;color:var(--teal);font-weight: 700;}
.uk-navbar-container .uk-navbar-dropdown.investnav .nav_n1 a:hover{background:inherit;font-weight: 700;cursor: default;}
.investnav a{padding: 8px 0;font-size: 14px;line-height: 1.35;}
.uk-navbar-dropdown-width-6:not(.uk-drop-stack) {min-width: 1100px; max-width:calc(100vw - 20px);}
.uk-navbar-dropdown .dropgrid>*{padding-left:0px;}
.investnav .dropgrid > div.uk-first-column{border-right:1px solid #E4E4E4;}
.investnav .dropgrid > div.uk-first-column a{color: var(--navy-dark);font-size: 15px;font-weight: 700;letter-spacing: 0;text-transform: none;line-height: 1.2;}
.investnav .dropgrid > div.uk-first-column a::before{content: "";display: inline-block;width: 24px;height: 24px;background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" overflow="visible" aria-hidden="true" fill="none" stroke="%23F5B800" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"></path><path d="M10 21h4"></path><path d="M12 0v1.5"></path><path d="M3.5 9.5H2"></path><path d="M22 9.5H20.5"></path><path d="M5 4 3.9 2.9"></path><path d="M19 4l1.1-1.1"></path><path d="M12 4a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.1V18h5v-1.1c0-.8.4-1.6 1.1-2.1A6 6 0 0 0 12 4Z"></path></svg>');background-size: contain;background-repeat: no-repeat;margin-right: 8px;vertical-align: middle;}
.lang-code{padding-left:6px;font-size: 13px;font-weight: 600;letter-spacing: .04em;}
.top-icons {display: flex;align-items: center;gap: 18px;}
.top-icons .ti-flag {width: 20px;height: 14px;border-radius: 2px;overflow: hidden;display: flex;box-shadow: 0 0 0 1px rgba(10, 38, 71, 0.1);}
.top-icons .ti-divider {width: 1px;height: 18px;background: rgba(10, 38, 71, 0.2);}
.top-right{gap: 22px;}
.top-icons a:hover{ opacity: .65; }


/* mobile nav */
.uk-navbar-toggle,.uk-navbar-toggle:hover, .uk-navbar-toggle[aria-expanded=true]{color:var(--navy);}
.uk-offcanvas-bar{background: #fff;overflow-y: auto;overflow-y: auto;}
.uk-offcanvas-overlay::before{background:rgba(10, 38, 71, 0.35);}
.uk-offcanvas-bar .uk-close{color:var(--navy-dark);border:1px solid rgba(19, 53, 92, 0.25);top: 18px;right: 24px;padding:10px;}
.uk-offcanvas-flip .uk-open>.uk-offcanvas-bar{box-shadow: -20px 0 50px -20px rgba(10, 38, 71, 0.25);padding:80px 0 30px 0;}
.uk-offcanvas-bar .uk-nav>li>a{padding:18px 28px;font-size: 14px;color:var(--navy-dark);font-weight: 700;letter-spacing: .18em;text-transform: uppercase;}
.uk-offcanvas-bar .uk-navbar-parent-icon{margin-left:auto;}
.uk-offcanvas-bar a{color:var(--navy-dark);padding: 12px 28px 12px 44px;text-decoration: none;font-size: 13px;font-weight: 500;display: flex;}
.uk-offcanvas-bar ul.uk-nav-sub{padding:0;}
.uk-offcanvas-bar .uk-nav > li > ul.uk-nav-sub{padding:0;background:rgba(19, 53, 92, 0.025);}    
.uk-offcanvas-bar .uk-nav>li{border-bottom:1px solid rgba(19, 53, 92, 0.12);}
.uk-offcanvas-bar a:hover, .uk-offcanvas-bar a:focus, .uk-offcanvas-bar .uk-nav-sub .uk-active a, .uk-offcanvas-bar li.uk-parent.uk-open > a{background: rgba(0, 148, 178, 0.06); color: #0094b2;}
.uk-offcanvas-bar .nav_n1 a[href="#"]{color:var(--teal);font-size: 14px;font-weight: 700;letter-spacing: .12em;text-transform: uppercase;font-size: 11px;}
.uk-offcanvas-bar .uk-search-navbar .uk-search-input{color:var(--navy-dark);font-size: 13px;font-weight: 600;letter-spacing: .14em;text-transform: uppercase;}
.uk-offcanvas-bar .lngswitcher a{padding: 18px 28px;border-bottom: 1px solid rgba(19, 53, 92, 0.12);}
.uk-offcanvas-bar .social_networks {display: flex;align-items: center;gap: 22px;padding: 24px 28px;}
.uk-offcanvas-bar .social_networks a{padding:0;}
.uk-offcanvas-bar .lang-code{font-size: 14px;font-weight: 700;letter-spacing: .18em;}
.uk-offcanvas-bar .uk-search-input{color:var(--navy-dark);padding: 16px 8px;font: inherit;font-size: 13px;font-weight: 600;}
.uk-offcanvas-bar .uk-search {display: flex;align-items: center;padding: 6px 16px 6px 28px;border-bottom: 1px solid rgba(19, 53, 92, 0.12);}


/* search */
.uk-search-input{text-transform: uppercase;}
.uk-search-input::placeholder {color: rgba(19, 53, 92, 0.45) !important; font-weight: 600; letter-spacing: .14em;}
.searchbtn{padding:10px;}


/* breadcrumb */
.breadcrumb{position:absolute;top:8px;}
.breadcrumb .sep {opacity: .55;font-size: 14px;}
.breadcrumb a{text-decoration: none;display: inline-flex;opacity: .9;transition: opacity .2s;font-size:12px;}
.breadcrumb a, .breadcrumb span {color:#fff;text-transform: uppercase;letter-spacing: .12em;}
.breadcrumb span {padding-right: 4px;}
/*.breadcrumb a:not(:first-child),.breadcrumb span:not(:first-child) {padding-left: 4px;}*/
.breadcrumb_last{font-weight:700;font-size:12px;}


/* title */
.uk-h1, h1{font-family:var(--font-sans);font-size:54px;font-weight:500;line-height: 1.05;margin-top: 0;letter-spacing: -.01em;}/*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);*/
.uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, h2, h3, h4, h5, h6{font-family:var(--font-sans);color: var(--navy);letter-spacing:-0.005em;font-weight:500;}
h2, .uk-h2{font-size:34px;line-height:1.2}
h3, .uk-h3{font-size:22px;line-height:1.3}
.uk-h1 em, h1 em, .uk-h2 em, .uk-h3 em, .uk-h4 em, .uk-h5 em, .uk-h6 em, h2 em, h3 em, h4 em, h5 em, h6 em {font-style: normal;background: linear-gradient(90deg, #0094B2, #96d1e4);-webkit-background-clip: text;background-clip: text;color: transparent;}


/* header banner */
.header_banner{overflow: hidden;min-height:300px;background: var(--navy);color:#fff;}


/* section */
.wp-site-blocks > *,.entry-content .content-inner > *:not(.hero) { max-width: min(800px, 92%);margin-left: auto;margin-right: auto;}
.entry-content .content-inner .alignfull, .entry-content .content-inner .dna, .entry-content .content-inner #milestones {max-width: 100%;padding-right: 20px !important;padding-left: 20px !important;}
.entry-content .content-inner .alignfull.wp-block-columns{padding-right: 0px !important;padding-left: 0px !important;}




/* table */
.wp-block-table:not(.home_array) thead{background: var(--lightblue);}
.wp-block-table:not(.home_array) table {border-radius: 10px;overflow: hidden;border-collapse: separate !important;border-spacing: 0;}
.wp-block-table:not(.home_array) table tr:first-child th:first-child {border-top-left-radius: 10px;}
.wp-block-table:not(.home_array) table tr:first-child th:last-child {border-top-right-radius: 10px;}
.wp-block-table:not(.home_array) table tr:last-child td:first-child {border-bottom-left-radius: 10px;}
.wp-block-table:not(.home_array) table tr:last-child td:last-child {border-bottom-right-radius: 10px;}



/* ===== Scroll reveals ===== */
.reveal-up{
opacity:0; transform: translateY(22px);
transition: opacity .9s cubic-bezier(.2,.7,.1,1), transform .9s cubic-bezier(.2,.7,.1,1);
transition-delay: var(--anim-delay, 0s);
will-change: opacity, transform;
}
.reveal-up.in-view{opacity:1;transform:none}

.reveal-words .word{display:inline-flex;overflow:hidden;vertical-align:bottom;line-height:1.05}
.reveal-words .word > span{
display:inline-block;transform:translateY(110%);
transition: transform 1.1s cubic-bezier(.2,.7,.1,1);
transition-delay: var(--w-delay, 0s);
will-change: transform;
}
.reveal-words.in-view .word > span{transform:translateY(0)}

.reveal-mask{
clip-path: inset(0 0 100% 0);
transition: clip-path 1.4s cubic-bezier(.7,0,.15,1);
transition-delay: var(--anim-delay, 0s);
}
.reveal-mask.in-view{clip-path: inset(0 0 0 0)}

@media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important}
    .reveal-up,.reveal-words .word>span{opacity:1!important;transform:none!important}
    .reveal-mask{clip-path:inset(0 0 0 0)!important}
  }


  /* =========================================================
     SCROLL REVEAL — Synthorix-inspired
     ========================================================= */
  .reveal{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  }
  .reveal.in-view{
    opacity: 1;
    transform: translateY(0);
  }
  .reveal.delay-1{ transition-delay: .08s; }
  .reveal.delay-2{ transition-delay: .16s; }
  .reveal.delay-3{ transition-delay: .24s; }
  .reveal.delay-4{ transition-delay: .32s; }
  .reveal.delay-5{ transition-delay: .40s; }




@media (prefers-reduced-motion: reduce){
    *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .reveal{ opacity: 1; transform: none; }
}




/* slideshow */
.hero.uk-slideshow {margin-top: -78px; will-change: transform;overflow: hidden;}
.uk-dotnav > * > * {width: 40px;height: 4px;border-radius: 0;background: rgba(255, 255, 255, 0.25);border: none; padding: 0;transition: background .25s var(--ease-out);}
.uk-dotnav .uk-active a{background: var(--teal);}
.slide-title {font-size: 56px;line-height: 1.05;font-weight: 600;color: var(--white);margin-bottom: 32px;letter-spacing: -.01em;max-width: 900px;}
.slide-sub{font-size: 18px;line-height: 1.55;color: rgba(255,255,255,0.78);margin-bottom: 32px;max-width: 560px;}
.slide-ctas{ display: flex; gap: 16px; flex-wrap: wrap; }
.slider-arr{width: 48px;height: 48px;background: transparent;border: 1px solid rgba(255, 255, 255, 0.5);color: var(--white);font-size: 18px;display: flex;align-items: center;justify-content: center;transition: background .2s var(--ease-out), border-color .2s var(--ease-out);border-radius: 0;}
.slider-arrows { display: flex;gap: 12px;}
.slider-arr:hover{ background: var(--teal); border-color: var(--teal); }
.slider-counter{font-family: var(--font-mono);font-size: 12px;letter-spacing: .14em;color: rgba(255,255,255,0.5);}
.slider-counter strong{ color: var(--white); font-weight: 700; }
.slide-meta{display: inline-flex; align-items: center; gap: var(--sp-16);margin-bottom: var(--sp-32);}
.slide-meta-num{font-family: var(--font-mono);font-size: var(--fs-caption);font-weight: 700;color: var(--teal);letter-spacing: .14em;}
.slide-meta-line{width: 48px; height: 1px; background: var(--teal);}
.slide-meta-tag{font-size: var(--fs-caption);font-weight: 700;letter-spacing: .18em;text-transform: uppercase;color: rgba(255,255,255,0.85);  }
.scroll-cue{position: absolute;bottom: 100px; right: 32px;z-index: 2;writing-mode: vertical-rl;font-family: var(--font-mono);font-size: 11px;letter-spacing: .25em;text-transform: uppercase;color: rgba(255,255,255,0.55);display: flex; align-items: center; gap: 12px;}
.scroll-cue::after{content: ""; width: 2px; height: 64px;background: var(--teal);position: relative;animation: scroll-line 2.2s var(--ease-out) infinite;}
@keyframes scroll-line{
0%{ transform: scaleY(0); transform-origin: top; }
50%{ transform: scaleY(1); transform-origin: top; }
50.01%{ transform-origin: bottom; }
100%{ transform: scaleY(0); transform-origin: bottom; }
}
.slide-mask{background: linear-gradient(90deg, #0f172b 0%, rgba(15,23,43,0) 100%);}





/* =========================================================
 HERO ENTRANCE — staggered fade-in on page load (first slide only)
 ========================================================= */
@keyframes heroIntro {
from { opacity: 0; transform: translateY(28px); }
to   { opacity: 1; transform: translateY(0); }
}
/* Lighter fade for the meta-line children (no big Y translation) */
@keyframes heroIntroFade {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}
/* The little teal line draws itself from left to right */
@keyframes heroIntroLine {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
}
/* Slide-meta: staggered entry on its three children
 1) number   2) line draws L→R   3) tag */
.slide:first-child .slide-meta-num   { animation: heroIntroFade .5s var(--ease-out) .15s both; }
.slide:first-child .slide-meta-line  { animation: heroIntroLine .55s var(--ease-out) .45s both; transform-origin: left center; }
.slide:first-child .slide-meta-tag   { animation: heroIntroFade .5s var(--ease-out) .95s both; }
/* Other hero elements animate with progressively later delay to create the cascade */
.slide:first-child .slide-title  { animation: heroIntro .9s var(--ease-out) .30s both; }
.slide:first-child .slide-sub    { animation: heroIntro .9s var(--ease-out) .45s both; }
.slide:first-child .slide-ctas   { animation: heroIntro .9s var(--ease-out) .60s both; }
.scroll-cue                      { animation: heroIntro .9s var(--ease-out) 1.15s both; }





.clinical_pipeline h2{margin:0;}
/*.clinical_pipeline img*/


.p-card{
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: background-color .08s var(--ease-out), transform .09s var(--ease-out), box-shadow .09s var(--ease-out);
position: relative;
overflow: hidden;
}
.p-card:hover{
background: rgba(255, 255, 255, 1) !important;
transform: scale(1.02);
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}

.entry-content img:not([uk-scrollspy]) {
    opacity: 1 !important;
}

/* home array */
.home_array table{border-collapse: separate;border-spacing: 0;font-size:16px;}
.home_array thead{border-bottom: none;}
.home_array td, .home_array th{border:none;}
.home_array th{color:var(--black);}
.home_array th:nth-child(3), .home_array tr:nth-child(3):last-child {height:18px;}
.home_array th:last-child {width:50px;}
.home_array tr:not(:last-child) td{padding:12px 24px;}
.home_array tr:first-child td:not(:nth-last-child(2)){border-top:1px solid #CDD3DA;}
.home_array td:nth-child(3),.home_array th:nth-child(3) {background: var(--navy);color:#fff;}
.home_array tr:not(:last-child) td:first-child{background:#f6f8fb;border-right:1px solid #CDD3DA;color: var(--navy);font-family: var(--font-mono);font-size: 11px;font-weight: 500;letter-spacing: .14em;text-transform: uppercase;}
.home_array tr:not(:last-child):not(:first-child):not(:nth-child(2)) td:first-child{border-top:1px solid #CDD3DA; }
.home_array tr:not(:last-child):not(:first-child) td:nth-child(2){border-top:1px solid #CDD3DA; }
.home_array th:nth-child(3) {border-top-right-radius: 4px;border-top-left-radius: 4px;}
.home_array tr:last-child td:nth-child(3) {border-bottom-right-radius: 4px;border-bottom-left-radius: 4px;}
.home_array tr:not(:last-child) td:first-child {border-left:1px solid #CDD3DA;}
.home_array tr:not(:last-child) td:last-child {border-right:1px solid #CDD3DA;}
.home_array tr:first-child td:first-child {border-top-left-radius: 16px;}
.home_array tr:first-child td:last-child {border-top-right-radius: 16px;}
.home_array tr:nth-last-child(2) td:not(:nth-last-child(2)){border-bottom:1px solid #CDD3DA;}
.home_array tr:nth-last-child(2) td:first-child {border-bottom-left-radius: 16px;}
.home_array tr:nth-last-child(2) td:last-child {border-bottom-right-radius: 16px;}


.home_slider{height: 100vh;max-height: 100%;}
.home_slider_content{min-height: 100vh;}


.talen{
background: #173860; /* base = brand navy (darkest value of the palette) */
color: var(--white);
overflow: hidden;
isolation: isolate;
position: relative;
}
.talen .alignwide{position: relative;z-index: 2}
/* Layer 1: animated colorful blobs that loop infinitely */
.talen::before{
content: "";
position: absolute;
inset: -40%;
background:
  radial-gradient(ellipse 55% 45% at 20% 25%, #2a5688 0%, transparent 60%),
  radial-gradient(ellipse 50% 45% at 80% 20%, #3a6ea5 0%, transparent 60%),
  radial-gradient(ellipse 65% 40% at 60% 70%, #0094B2 0%, transparent 60%),
  radial-gradient(ellipse 45% 45% at 25% 85%, #96d1e4 0%, transparent 60%),
  radial-gradient(ellipse 40% 35% at 90% 80%, #1f4576 0%, transparent 60%);
filter: blur(55px);
animation: meshWave 16s linear infinite;
z-index: 1;
pointer-events: none;
will-change: transform;
opacity: .9;
}
/* Layer 2: very light overlay — almost transparent so motion is fully visible */
.talen::after{
content: "";
position: absolute; inset: 0;
background: rgba(0, 53, 95, 0.18);
z-index: 0;
pointer-events: none;
}
@keyframes meshWave {
    0%   { transform: translate(0%, 0%) scale(1.05) rotate(0deg); }
    20%  { transform: translate(-25%, 12%) scale(1.35) rotate(12deg); }
    40%  { transform: translate(18%, -15%) scale(1.5)  rotate(-10deg); }
    60%  { transform: translate(-15%, -20%) scale(1.3) rotate(14deg); }
    80%  { transform: translate(22%, 18%) scale(1.45) rotate(-6deg); }
    100% { transform: translate(0%, 0%) scale(1.05) rotate(0deg); }
  }


.news-card{
    scroll-snap-align: start;
  }
  .news-card{
    flex-shrink: 0;
    background: var(--white);
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
    cursor: pointer;
  }
  .news-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  }
.pc_date{    font-family: var(--font-mono);
    font-size: 22px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--teal);
    font-weight: 700;
    margin-bottom: 6px;}
.pc_hour{font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--teal);
    opacity: .7;
    font-weight: 700;}
.news-card-content {
    position: relative;
    padding: var(--sp-32);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-card-accent {
    width: 32px;
    height: 2px;
    background: var(--teal);
    margin-bottom: var(--sp-20);
}
.news-card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.25;
    letter-spacing: -.01em;
    margin-bottom: 30px;
}
.news-card-excerpt {
    font-size: var(--fs-small);
    line-height: 1.65;
    color: var(--navy-soft);
    margin-bottom: 12px;
    flex: 1;
}
.news-card-cta .readmore{
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--teal);
    transition: gap .2s var(--ease-out), color .2s var(--ease-out);
  }
  .news-card-cta:hover  .readmore{
    gap: 14px;
    color: var(--teal-2);
    border-bottom-color: var(--teal-2);
  }
  .readmore svg{
    width: 14px; height: 14px;
    flex-shrink: 0;
  }


.nav-links{display: flex;justify-content:center;margin-top:10px; }
.nav-links .page-numbers{display: flex;justify-content: center;text-decoration:none;border:1px solid var(--pale);line-height: 1.2;font-weight: 400;padding: .7em 1.2em;min-width: 1em;color: var(--teal);margin:10px;}
.nav-links a.page-numbers:hover{background:var(--amber);color: var(--ink);}
.nav-links .page-numbers.current{background: var(--teal);color: #fff;}


/* form */
.wpcf7-acceptance input[type="checkbox"], .sib_signup_form input[type="checkbox"] {width: 24px;height: 24px;}
.wpcf7-not-valid{border:1px solid var(--navy);}
.uk-input, .uk-select, .uk-textarea{border:1px solid var(--navy);}
.uk-checkbox, .uk-radio{border:1px solid var(--navy);}
.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked,
.uk-checkbox:checked:focus,.uk-checkbox:indeterminate:focus,.uk-radio:checked:focus {background-color: var(--blue);}
form .label span{color:#ff0000;}


/* button */
.uk-button, .button, .wp-block-button__link, .wp-element-button, .wp-block-post-navigation-link a
{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
font-weight: 600;
border-radius: 0;
border: 1px solid transparent;
transition: background .2s, transform .15s, color .2s, border-color .2s;
white-space: nowrap;
gap: 8px;
position: relative;
overflow: hidden;text-decoration: none;
}
.uk-button::before, .button::before, .wp-block-button__link::before, .wp-element-button::before, .wp-block-post-navigation-link a::before
{content:""; position:absolute; inset:0;background: rgba(255,255,255,.08);transform: translateX(-101%);transition: transform .55s cubic-bezier(.2,.7,.1,1);pointer-events: none;}
.uk-button:hover::before, .button:hover::before, .wp-block-button__link:hover::before, .wp-element-button:hover::before, .wp-block-post-navigation-link a:hover::before{ transform: translateX(0); }

/* Primary — solid teal, used on light AND dark backgrounds for site-wide consistency */
a.wp-block-button__link{background: #0094B2; color: #fff;border-color: #0094B2;}
a.wp-block-button__link:hover{background: #007795; border-color: #007795; color: #fff;transform: translateY(-1px);}

/* Secondary on dark background */
.btn-secondary-on-dark a.wp-block-button__link{background: transparent; color: var(--white);border-color: rgba(255,255,255,0.5);}
.btn-secondary-on-dark a.wp-block-button__link:hover{ background: rgba(255,255,255,0.08); border-color: var(--white);color: var(--white); }

/* Secondary on light background */
.btn-secondary a.wp-block-button__link{background: transparent; color: var(--navy);border-color: var(--navy);}
.btn-secondary a.wp-block-button__link:hover{ background: var(--navy); color: var(--white); }

/* Ghost / inline link button */
.btn-ghost a.wp-block-button__link{color: var(--teal);background: none; border: none;padding: 0;text-transform: none;letter-spacing: 0;font-size: var(--fs-small);font-weight: 700;border-bottom: 1px solid transparent;overflow: visible;}
.btn-ghost a.wp-block-button__link::before{ display: none; }
.btn-ghost a.wp-block-button__link:hover{ color: var(--teal-2); border-bottom-color: var(--teal); transform: none; }

/* card */
.post-article{position:relative;box-shadow: 0 5px 15px rgba(0, 0, 0, .08);-webkit-transition : box-shadow ease-in-out .15s;transition : box-shadow ease-in-out .15s;}
.card .uk-button, .card .wp-element-button{position:absolute;bottom:-25px;right:30px;width:auto;height:auto;}
.post-article:hover{box-shadow: 0 5px 15px rgba(0, 0, 0, .2);}


/* footer */
.tm-footer{background: var(--navy);color:var(--light);}
.footer_description{color:rgba(255, 255, 255, 0.7);font-size:15px;}
.footer_description p{margin:0;}
.footer-mentions{padding:32px 0;border-top:1px solid rgba(255, 255, 255, 0.15);}
.footer-mentions>*, .footer-mentions a{font-size:13px;color:rgba(255, 255, 255, 0.5);text-transform: uppercase;}
.tm-footer-mentions ul li {display: inline-flex;padding: 0 8px 0 0;align-items: center;justify-content: center;margin: 0 !important;}
.tm-footer-mentions ul li:not(:first-child):before {content: "\002022";margin-right: 8px;}
.tm-footer-mentions ul li a:hover, .footer-nav ul li ul.sub-menu a:hover{color: var(--teal);}

.footer-nav .uk-list>li, .footer-nav .uk-list>:nth-child(n+2) {margin:0;padding:0 10px 20px 10px;}
.footer-nav > ul > li > a {color: var(--teal);font-weight: 700;text-transform: uppercase;font-size: 12px;margin-bottom: 22px;display: block;pointer-events: none; /* Désactive le clic sur le # */}
.footer-nav ul.sub-menu {list-style: none;padding: 0;margin: 0;font-weight: 400;font-size: 15px;}
.footer-nav ul.sub-menu li a {color: rgba(255, 255, 255, 0.7);font-size: 15px;padding: 5px 0;display: block;text-decoration: none;}



/* ===== TALEN (fond pâle + calque bleu nuit qui s'efface au scroll) ===== */

  .s-talen > *{ position: relative; z-index: 2; }
  .btn{
    display:inline-block; padding: 12px 28px;
    background: var(--teal-2); color:#fff; font-weight:600;
    letter-spacing:.06em; font-size:12px; text-transform:uppercase;
    transition: background .2s, transform .15s;
  }
  .btn:hover{ background:#007795; transform: translateY(-1px); }
  .btn.ghost{
    background:#fff; color: var(--teal-2);
    border:1px solid rgba(0,0,0,0); box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  }
  .btn.ghost:hover{ background: var(--teal-2); color:#fff; }
  .s-talen .diag-frame{ margin-top: 32px; display:flex; justify-content:center; }





/* ===== Diagram styling ===== */
  .diagram{
    width: 100%;
    height:auto;
    max-width: 100%;
    overflow: visible;
  }
  .diag-frame{
    width:100%;
    position:relative;
  }
  .diag-frame.constrained-sm{ max-width: 230px; margin:0 auto; }
  .diag-frame.constrained-md{ max-width: 360px; margin:0 auto; }
  .diag-frame.constrained-lg{ max-width: 460px; margin:0 auto; }
  .diag-frame.constrained-xl{ max-width: 560px; margin:0 auto; }
  /* (Décalage translateY(140px) retiré : vestige de l'ancien layout "sticky"
     qui poussait le schéma trop bas et le faisait chevaucher le connecteur.) */
  .s-repair .diag-frame.constrained-xl{ transform: none; }
  .s-repair .diagram-gene-correction{
    transform: scale(0.85);
    transform-origin: center center;
  }
  .diag-frame.constrained-xxl{ max-width: 640px; margin:0 auto; }

  /* Stroke-draw animation for shapes that have a stroke */
  .diagram path[stroke],
  .diagram circle[stroke],
  .diagram ellipse[stroke],
  .diagram line[stroke]{
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: var(--len, 1000);
    transition: stroke-dashoffset 1.2s cubic-bezier(.5,.05,.2,1);
  }
  /* TALEN: progressive per-stroke draw (DrawSVG-style) on scroll */
  .diagram-talen path[stroke],
  .diagram-talen circle[stroke],
  .diagram-talen ellipse[stroke],
  .diagram-talen line[stroke]{
    transition-duration: 1.4s;
    transition-delay: calc(var(--draw-i, 0) * 0.12s);
  }
  .diagram-talen path:not([stroke]){
    transition-delay: calc(1.6s + var(--draw-i, 0) * 0.02s) !important;
  }
  /* Filled-only shapes: fade in (delayed) */
  .diagram path:not([stroke]){
    opacity: 0;
    transition: opacity .6s ease;
  }

  /* When section is "drawn" */
  .drawn .diagram path[stroke],
  .drawn .diagram circle[stroke],
  .drawn .diagram ellipse[stroke],
  .drawn .diagram line[stroke]{
    stroke-dashoffset: 0 !important;
  }
  .drawn .diagram path:not([stroke]){
    opacity: 1;
    transition-delay: var(--delay, 0s);
  }

  /* Draw-on-scroll for the four key diagrams (correction, inactivation, talen, pulse-agile) */
  .draw-svg path[stroke],
  .draw-svg circle[stroke],
  .draw-svg ellipse[stroke],
  .draw-svg line[stroke],
  .draw-svg rect[stroke]{
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: var(--len, 1000);
    transition: stroke-dashoffset 1.4s cubic-bezier(.5,.05,.2,1);
  }
  .drawn .draw-svg path[stroke],
  .drawn .draw-svg circle[stroke],
  .drawn .draw-svg ellipse[stroke],
  .drawn .draw-svg line[stroke],
  .drawn .draw-svg rect[stroke]{
    stroke-dashoffset: 0 !important;
  }
  /* gene-inactivation uses filled curves: fade them in after a small delay */
  .diagram-gene-inactivation path:not([stroke]){
    opacity: 0;
    transition: opacity .7s ease;
    transition-delay: var(--delay, 0s);
  }
  .drawn .diagram-gene-inactivation path:not([stroke]){
    opacity: 1;
  }
  /* The 4 long blue sinusoidal helices: draw each in a single continuous
     sweep, overriding any per-segment cascade applied by the JS. */
  .diagram-gene-inactivation .gi-helix{
    stroke-dasharray: var(--len, 1200) !important;
    stroke-dashoffset: var(--len, 1200) !important;
    transition: stroke-dashoffset 1.6s cubic-bezier(.55,.05,.25,1) !important;
    transition-delay: 0s !important;
  }
  .drawn .diagram-gene-inactivation .gi-helix{
    stroke-dashoffset: 0 !important;
  }

  

  /* Insertion : draw paths progressively when section enters viewport.
     We use !important to beat the global JS that sets inline dash values,
     so the lines visibly animate from invisible to fully drawn. */
  .diagram-gene-insertion .gi-stroke{
    stroke-dasharray: 1 !important;
    stroke-dashoffset: 1 !important;
    transition: stroke-dashoffset 1.1s cubic-bezier(.6,.1,.2,1) !important;
    transition-delay: calc(var(--gi-i, 0) * 0.07s) !important;
  }
  .s-insertion.drawn .diagram-gene-insertion .gi-stroke{
    stroke-dashoffset: 0 !important;
  }
  .diagram-gene-insertion .gi-fill{
    opacity: 0;
    transition: opacity .55s ease-out;
    transition-delay: calc(1.4s + var(--gi-i, 0) * 0.018s);
  }
  .s-insertion.drawn .diagram-gene-insertion .gi-fill{
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce){
    .diagram-gene-insertion .gi-stroke,
    .diagram-gene-insertion .gi-fill{
      transition: none !important;
      stroke-dashoffset: 0 !important;
      opacity: 1 !important;
    }
  }
  /* placeholder unused keyframes kept for backward CSS compat */
  @keyframes insertPulse{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-2px); }
  }

  /* Inactivation: scissors cross subtle pulse — wait until draw is done */
  .s-inact.drawn .diagram-gene-inactivation{
    animation: inactPulse 3.5s ease-in-out 3s infinite;
  }

  /* Inactivation scissors: open/close blade animation */
  .diagram-gene-inactivation .inact-blade{
    transform-box: view-box;
    will-change: transform;
  }
  .s-inact.drawn .diagram-gene-inactivation .inact-blade-up{
    animation: inactBladeUp 1.6s ease-in-out 2.6s infinite;
  }
  .s-inact.drawn .diagram-gene-inactivation .inact-blade-lo{
    animation: inactBladeLo 1.6s ease-in-out 2.6s infinite;
  }
  @keyframes inactBladeUp{
    0%   { transform: rotate(0deg); }
    34%  { transform: rotate(-12deg); }
    44%  { transform: rotate(-12deg); }
    63%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes inactBladeLo{
    0%   { transform: rotate(0deg); }
    34%  { transform: rotate(12deg); }
    44%  { transform: rotate(12deg); }
    63%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
  }

  /* Insertion scissors: open/close blade animation */
  .diagram-gene-insertion .gi-blade{
    transform-box: view-box;
    will-change: transform;
  }
  .s-insertion.drawn .diagram-gene-insertion .gi-blade-up{
    animation: giBladeUp 1.6s ease-in-out 2.6s infinite;
  }
  .s-insertion.drawn .diagram-gene-insertion .gi-blade-lo{
    animation: giBladeLo 1.6s ease-in-out 2.6s infinite;
  }
  @keyframes giBladeUp{
    0%   { transform: rotate(0deg); }
    34%  { transform: rotate(-12deg); }
    44%  { transform: rotate(-12deg); }
    63%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes giBladeLo{
    0%   { transform: rotate(0deg); }
    34%  { transform: rotate(12deg); }
    44%  { transform: rotate(12deg); }
    63%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .s-inact.drawn .diagram-gene-inactivation .inact-blade-up,
    .s-inact.drawn .diagram-gene-inactivation .inact-blade-lo,
    .s-insertion.drawn .diagram-gene-insertion .gi-blade-up,
    .s-insertion.drawn .diagram-gene-insertion .gi-blade-lo{
      animation: none !important;
    }
  }

  /* Gene correction: smooth, harmonious progressive draw — all strokes draw
     together in a single continuous sweep (no per-element cascade flicker).
     Fills then fade in once stroke-draw is ~done. */
  .diagram-gene-correction path[stroke],
  .diagram-gene-correction circle[stroke],
  .diagram-gene-correction ellipse[stroke],
  .diagram-gene-correction line[stroke]{
    transition-property: stroke-dashoffset !important;
    transition-duration: 2.4s !important;
    transition-timing-function: cubic-bezier(.6,.05,.25,1) !important;
    transition-delay: 0s !important;
  }
  .diagram-gene-correction path:not([stroke]){
    opacity: 0;
    transition: opacity .6s ease-out;
    transition-delay: 1.6s !important;
  }
  .s-repair.drawn .diagram-gene-correction path:not([stroke]){
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce){
    .diagram-gene-correction path[stroke],
    .diagram-gene-correction circle[stroke],
    .diagram-gene-correction ellipse[stroke],
    .diagram-gene-correction line[stroke]{
      transition: none !important;
    }
    .diagram-gene-correction path:not([stroke]){
      transition: none !important;
      opacity: 1 !important;
    }
  }

  /* Gene-correction scissors: open/close motion matching the hero scissors.
     Each blade is wrapped in a <g> with transform-origin at the crossing point
     (~213.7, 39.8 in SVG units). Rotation swings symmetrically so the blades
     flick open then snap closed, looping. Default starting state is rotated
     and only animates after the section is .drawn so the draw-on doesn't fight. */
  .diagram-gene-correction .repair-blade{
    transform-box: view-box;
    will-change: transform;
  }
  .s-repair.drawn .diagram-gene-correction .repair-blade-up{
    animation: repairBladeUp 1.6s ease-in-out 2.6s infinite;
  }
  .s-repair.drawn .diagram-gene-correction .repair-blade-lo{
    animation: repairBladeLo 1.6s ease-in-out 2.6s infinite;
  }
  @keyframes repairBladeUp{
    0%   { transform: rotate(0deg); }
    34%  { transform: rotate(-11.7deg); }
    44%  { transform: rotate(-11.7deg); }
    63%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes repairBladeLo{
    0%   { transform: rotate(0deg); }
    34%  { transform: rotate(11.7deg); }
    44%  { transform: rotate(11.7deg); }
    63%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .s-repair.drawn .diagram-gene-correction .repair-blade-up,
    .s-repair.drawn .diagram-gene-correction .repair-blade-lo{
      animation: none !important;
    }
  }
  @keyframes inactPulse{
    0%, 100%{ filter: brightness(1); }
    50%{ filter: brightness(1.15); }
  }

  /* TALEN: rotation removed per design feedback — diagram stays static after draw */

  

  /* progress strip on each strategy section */
  .progress-strip{
    position:absolute; left:0; top:0; height:3px;
    background: linear-gradient(90deg, var(--amber), var(--teal-2));
    width:0;
    transition: width .15s linear;
  }
  .s-strategy.light .progress-strip{ background: linear-gradient(90deg, var(--teal-2), var(--navy)); }

  /* Eyebrow tag */
  .eyebrow{
    display:inline-block; font-size:11px; letter-spacing:.24em;
    text-transform:uppercase; color: var(--amber); font-weight:600;
    margin-bottom:14px;
  }
  .s-strategy.light .eyebrow{ color: var(--teal-2); }

  @media (max-width: 880px){
    /* Uniform 24px horizontal padding so content never touches screen edges. */

    .s-hero .grid, .s-strategy .grid, .s-pulse .grid{ grid-template-columns: 1fr; gap: 36px; }
    .nav{ display:none; }
    h1{ font-size: 30px; } h2{ font-size: 26px; } .lead{ font-size:18px; }
    /* Hide inter-section connectors on mobile: their coordinates are tuned
       for the desktop side-by-side layout, so they don't line up when sections
       stack vertically. */
    
    /* TALEN: inline desktop margin (60px 403px 0) pushes the diagram off-screen
       on mobile — center it instead. */
    .s-talen .diag-frame{ margin: 40px auto 0 !important; max-width: 100% !important; }
    /* Breadcrumb: inline desktop "width:1180px; padding:10px 32px 10px 0"
       has 0 left padding — home icon touches edge on mobile. */
    .breadcrumb-inner{
      width: auto !important;
      max-width: 100% !important;
      padding: 10px 24px !important;
    }
    
  }

 /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
    .diagram path[stroke], .diagram circle[stroke], .diagram ellipse[stroke], .diagram line[stroke]{
      stroke-dashoffset: 0 !important;
    }
    .diagram path:not([stroke]){ opacity: 1 !important; }
  }



/* Mask-reveal block — for diagrams or images */
  .reveal-mask{
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.4s cubic-bezier(.7,0,.15,1);
    transition-delay: var(--anim-delay, 0s);
  }
  .reveal-mask.in-view{ clip-path: inset(0 0 0 0); }

  /* Horizontal line that draws in */
  .reveal-line{
    transform: scaleX(0); transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.2,.7,.1,1);
    transition-delay: var(--anim-delay, 0s);
    will-change: transform;
  }
  .reveal-line.in-view{ transform: scaleX(1); }



/* =====================================================================
   FONDS EN COUCHES & PARALLAXE (piloté par scroll-effects.js)
   ===================================================================== */
/* ===== 1. LAYERED BACKGROUNDS ===== */
  /* Each section gets a ::before layer with a subtle grid + a ::after
     blob that parallaxes at a different speed. Pure CSS, GPU-cheap. */

  .s-hero > *, .s-strategy > *, .s-talen > *, .s-pulse > *, .s-vect > *, .s-intro > *, .s-strategies > *{
    position: relative;
    z-index: 2;
  }


  /* ===== 2. PARALLAX on diagrams + content ===== */
  /* The diag-frame floats slightly faster than the section bg.
     The text block floats slightly slower. */
  [data-section] .diag-frame{
    will-change: transform;
    transform: translate3d(0, var(--diag-parallax, 0), 0);
    transition: transform 0.05s linear;
  }
  [data-section] [data-text-parallax]{
    will-change: transform;
    transform: translate3d(0, var(--text-parallax, 0), 0);
    transition: transform 0.05s linear;
  }

  /* ===== 3. 3D TILT ON DIAGRAMS ===== */
  /* As a section enters the viewport, its diagram rotates from a
     pitched-back position (looking up into the screen) to flat. Driven
     by --enter-progress (0 = far below, 1 = settled in middle). */
  [data-section] .diag-frame{
    transform-style: preserve-3d;
    perspective: 1200px;
  }
  [data-section] .diag-frame > *{
    will-change: transform, opacity;
    transform-origin: 50% 70%;
    transform:
      perspective(1400px)
      translate3d(0, calc((1 - var(--enter-progress, 1)) * 40px), 0)
      rotateX(calc((1 - var(--enter-progress, 1)) * 14deg))
      scale(calc(0.94 + 0.06 * var(--enter-progress, 1)));
    opacity: calc(0.4 + 0.6 * var(--enter-progress, 1));
    transition: opacity 0.2s ease;
  }
  

  /* ===== SEQUENTIAL REVEAL — body paragraph lines ===== */
  /* Optional .reveal-stagger: split children into staggered fade-ups */
  .reveal-stagger > *{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(.2,.7,.1,1), transform 0.7s cubic-bezier(.2,.7,.1,1);
    transition-delay: calc(var(--rs-i, 0) * 0.08s);
  }
  .reveal-stagger.in-view > *{
    opacity: 1;
    transform: none;
  }

  /* ===== 6. Diagram glow on enter ===== */
  [data-section] .diagram{
    filter: drop-shadow(0 12px 30px rgba(15, 35, 70, calc(0.08 * var(--enter-progress, 1))));
    transition: filter 0.4s ease;
  }
  .s-strategy.dark [data-section] .diagram,
  .s-pulse [data-section] .diagram,
  .s-strategy.dark .diagram,
  .s-pulse .diagram{
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, calc(0.25 * var(--enter-progress, 1))));
  }

  @media (prefers-reduced-motion: reduce){
    [data-section] .diag-frame,
    [data-section] [data-text-parallax],
    [data-section] .diag-frame > *{
      transform: none !important;
      transition: none !important;
    }
    .s-hero::after, .s-strategy::after, .s-talen::after,
    .s-pulse::after, .s-vect::after{
      transform: none !important;
    }
  }

  

 /* ============= RESPONSIVE ============= */
  @media (max-width: 880px){
    .entry-content .content-inner .alignwide {padding:0 20px !important;}
    .nav{ display:none; }
  }
  @media (max-width: 1200px){
    .stage{ grid-template-columns: 1fr; }
    .stage:nth-of-type(odd) .stage-text,
    .stage:nth-of-type(even) .stage-text{ grid-column: 1; padding: 16px 0 20px 0; text-align:center; justify-self: center; }
    .stage:nth-of-type(odd) .stage-circle,
    .stage:nth-of-type(even) .stage-circle{ grid-column: 1; justify-self: center; }
    .stage-text::before{ display:none; }
    .stage-spacer{ display:none; }
    .stages-svg{ display:none; }
    .phases-wrap{ height: auto; display:flex; flex-direction:column; gap:24px; align-items:center; }
    .phase-node, .phase-text{ position:static; opacity:1; transform: none; transition: none; }
    .phases-svg{ display:none; }
    .phase-node{width:100px;margin:0 auto;}
    .phase-text{padding:16px 0 20px 0;}
    .phases-wrap.is-drawing .phase-node{transform: none;}
  }






/* Layout: ellipse on the left (overflow off-screen), description on the right */
.ms-stage{
display:grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
gap: 40px;
align-items: center;
min-height: 560px;
}

/* The ellipse stage — overflows to the LEFT so only the right half is visible */
.ms-ellipse-wrap{
position:relative;
width: 100%;
height: 560px;
overflow: visible;
}
.ms-ellipse-svg{
position:absolute; inset:0;
width:100%; height:100%;
overflow: visible;
}
/* Center logo — placed at the visual center of the visible right half */
.ms-logo{
opacity: 0.8;
position:absolute;
left: 18%; top: 50%;
transform: translate(-50%, -50%);
width: 320px; height:auto;
z-index: 1;
pointer-events:none;
filter: brightness(2.4) contrast(.9);
user-select:none;
}
/* SVG layers sit on z-index 2; foreground year labels on top */
.ms-ellipse-svg{ z-index: 2; }

/* Caption / right column */
.ms-caption{
position:relative;
color:rgba(255,255,255,.95);
padding: 8px 0;
}
.ms-eyebrow{
font-size:11px; letter-spacing:.22em; text-transform:uppercase;
color: var(--amber); margin-bottom: 12px; font-weight:600;
}
.ms-yearbig{
position: relative;
display: inline-block;
font-size: clamp(64px, 7vw, 96px);
font-weight: 300;
letter-spacing: -.03em;
color: var(--amber);
line-height: 1;
margin-bottom: 18px;
font-feature-settings: "tnum" 1;
text-shadow:
  0 0 18px rgba(242,180,67,.55),
  0 0 42px rgba(242,180,67,.35),
  0 0 80px rgba(242,180,67,.22);
}
.ms-yearbig::before{
content:"";
position:absolute;
left: -18%; right: -18%; top: -25%; bottom: -25%;
background: radial-gradient(closest-side, rgba(242,180,67,.28), rgba(242,180,67,.08) 45%, transparent 75%);
filter: blur(14px);
z-index: -1;
pointer-events: none;
}
.ms-caption h3{
font-size: 20px; line-height: 1.4; font-weight: 500;
color:#fff; margin-bottom: 18px; max-width: 32ch;
transition: opacity .35s ease, transform .45s ease;
}
.ms-body{
font-size: 14.5px; line-height: 1.7;
color: #ffffff; max-width: 46ch;
transition: opacity .35s ease, transform .45s ease;
}
.ms-body, .ms-body p, .ms-body li, .ms-body ul, .ms-body ol, .ms-body span, .ms-body em, .ms-body strong, .ms-body sup, .ms-body sub, .ms-body a{
color:#FFFFFF !important;
}
.ms-caption.flipping .ms-yearbig,
.ms-caption.flipping h3,
.ms-caption.flipping .ms-body{
opacity:0;
transform: translateY(8px);
}
.ms-yearbig{ transition: opacity .35s ease, transform .45s ease; }
.ms-body p + p{ margin-top: 10px; }
.ms-body ul{ margin-top: 8px; padding-left: 18px; }
.ms-body ul li{ margin-bottom: 3px; }
.ms-body strong{ color:#fff; font-weight: 600; }

/* Controls */
.ms-controls{
margin-top: 30px;
display: flex; align-items: center; gap: 14px;
}
.ms-chev{
width:48px; height:48px;
border-radius:50%;
border:1px solid rgba(255,255,255,.30);
background:transparent;
color:#fff; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
transition: background .2s, border-color .2s, transform .2s, color .2s;
font-family:inherit;
}
.ms-chev:hover{
background: var(--amber); border-color: var(--amber);
color: var(--navy);
transform: translateY(-1px);
}
.ms-chev:disabled{ opacity:.35; cursor:default; }
.ms-chev svg{ width:16px; height:16px; display:block; }
.ms-counter{
font-size:12px; letter-spacing:.18em; text-transform:uppercase;
color:rgba(255,255,255,.55); font-variant-numeric: tabular-nums;
margin-left:6px;
}
.ms-counter b{ color: var(--amber); font-weight:600 }

/* Year label DOM nodes positioned absolutely on top of the SVG */
.ms-yearlabel{
position: absolute;
transform: translate(-50%, -50%);
color: #fff;
font-size: 13px;
letter-spacing: .05em;
font-weight: 500;
font-variant-numeric: tabular-nums;
white-space: nowrap;
pointer-events: auto;
cursor: pointer;
user-select: none;
z-index: 3;
padding: 4px 6px;
border-radius: 4px;
/* opacity & color set by JS based on depth */
text-shadow: 0 0 12px rgba(0,0,0,.6);
transition: color .2s ease, text-shadow .2s ease;
will-change: left, top, opacity, color;
}
.ms-yearlabel:hover{
color: var(--amber) !important;
text-shadow: 0 0 14px rgba(242,180,67,.55), 0 0 4px rgba(0,0,0,.6);
}
.ms-yearlabel.is-active{
color: var(--amber);
font-weight: 600;
}
/* Dots clickable too */
#msDotsGroup circle{ cursor: pointer; }


.year-filter{display: flex;overflow-x: scroll}
.year-filter a {text-decoration: none;font-size:1.5rem;padding:0.8em;display: inline-block;color:var(--mute);}
.year-filter a:hover, .year-filter a.active{color:var(--amber);font-weight: 700}


/* teaser */
.teaser_grid{border-top: 1px solid var(--pale);}
/*.teaser_event .teaser_grid:first-child, .teaser_webcast .teaser_grid:first-child{border-top:none;}*/
.teaser_content{border-right: 1px solid var(--pale);border-left: 1px solid var(--pale);padding:32px;}
.teaser_content_event, .teaser_content_webcast{border-right: 1px solid var(--pale);padding:32px;}
.teaser .readmore{font-weight: 700;text-transform: uppercase;letter-spacing: .1em;padding: 0 1.7rem;color: var(--teal);transition-duration: 150ms;transition-property: background-color;transition-timing-function: ease;position: relative;white-space: nowrap;}
.teaser:hover .readmore{background: var(--teal);color:#fff;}
.teaser_date{padding:10px;}
.teaser_date_j{font-weight: 700;font-size: 3.18em;line-height: 1;vertical-align: top;}
.teaser_date_rest, .teaser_date_event{font-size: 1rem;font-weight: 400;text-transform: uppercase;letter-spacing: .1em;line-height: 1.5;}
.teaser_date_event{padding-bottom:5px;}
.teaser{display:block;}
.teaser_tag{color:var(--teal);}
.teaser h2{font-size:26px;}




/*.entry-content .content-inner .alignwide {padding:0 20px !important;}*/
@media only screen and (min-width: 960px) {
    .hero .wp-block-cover__inner-container{ padding-right: 100px;}
    .uk-navbar-nav {gap: 4px;}
    .teaser_date_rest{padding-left:10px;}
    .teaser_archive {border: 1px solid var(--pale);border-radius: 3px;}
    .entry-content .content-inner .alignwide {max-width: min(1260px, 95%);margin-left: auto;margin-right: auto;padding:0 40px;}
}

@media only screen and (max-width: 960px) {
    body.page-template-template-teams .uk-subnav-pill>*{width:100%;}
    .ms-stage{grid-template-columns:1fr;gap:32px;align-items:start;min-height:0}
    .ms-ellipse-wrap{height: 360px}
    .ms-logo{left: 30%; width: 260px; height:auto;}
    .ms-yearbig{font-size: clamp(56px, 12vw, 80px)}
    .footer-nav ul li {padding-left: 0;}
    .footer-nav > ul > li:not(:first-child) > a {margin-top:22px;}
    a.teaser{margin-top:20px;}
    a.teaser .readmore{border: 1px solid var(--pale);padding:10px;}
    .teaser_date{border-left: 1px solid var(--pale);}
    .teaser_content h2{font-size:16px;}
    .teaser_date_rest{font-size:13px;}
    .teaser_date_j{font-size:40px;}
    .year-filter{border: 1px solid var(--pale);}
    .year-filter a {font-size:16px;}
    .uk-modal-dialog{width:100%;}
    .nav-links .page-numbers{margin:10px 5px;}
}

@media only screen and (max-width: 1300px) {
    .ms-logo{left: 30%;}
}

.counter_middle_tab{border-right:1px solid rgba(255, 255, 255, 0.15);border-left:1px solid rgba(255, 255, 255, 0.15);}
@media only screen and (max-width: 780px) {
    .counter_middle_tab{border-right:0;border-left:0;border-top:1px solid rgba(255, 255, 255, 0.15);border-bottom:1px solid rgba(255, 255, 255, 0.15);border-top-style: solid !important;
    border-top-width: 1px !important;border-bottom-style: solid !important;border-bottom-width: 1px !important;}
}

.row {
    max-width: 91.4285714286rem;
    margin-left: auto;
    margin-right: auto;
    padding-right: .8571428571rem;
    padding-left: .8571428571rem;
}