/* =============================================================
   LA CITÉ MISSIONNAIRE HOSANNA — Feuille de style de l'accueil
   Chaque section est isolée par son identifiant (#programmes, #a-propos…)
   et ses @keyframes sont préfixés (pg-, ab-, eg-, se-, ev-, ap-, dn-, ft-)
   ============================================================= */

/* =============================================================
   1. VARIABLES, RESET & GLOBAL
   ============================================================= */

:root{
  --bg:#024870;
  --cyan:#5de0e6;
  --blue:#004aad;
  --deep:#024870;
  --white:#fff;
  --ease:cubic-bezier(.2,.75,.2,1);
  /* Header : hauteurs fixes (aucun saut de mise en page au défilement) */
  --hh:clamp(72px,8.6vw,172px);
  --hh-s:72px;
  --logo:clamp(54px,7.3vw,140px);
  --logo-s:54px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--hh-s);overflow-x:hidden}
html,body{
  background:var(--bg);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* clip (et non hidden) : ne crée pas de 2e conteneur de défilement => plus de double barre à droite */
body{overflow-x:clip}
img{max-width:100%;display:block}

/* =============================================================
   2. HEADER
   ============================================================= */

.site-header{
  position:fixed;top:0;left:0;right:0;width:100%;z-index:50;
  display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);column-gap:clamp(12px,1.6vw,32px);align-items:center;
  height:calc(var(--hh) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) clamp(16px,3.4vw,70px) 0;
  animation:drop 1s var(--ease) backwards;
  transition:height .45s var(--ease);
}
/* Fond flouté sur un pseudo-élément : le header ne devient pas le bloc conteneur du menu mobile fixe */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(2,72,112,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,20,50,.28);
  opacity:0;transition:opacity .4s;
}
.site-header.scrolled{height:calc(var(--hh-s) + env(safe-area-inset-top,0px))}
.site-header.scrolled::before{opacity:1}
@keyframes drop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

.brand{justify-self:start;display:block;line-height:0;border-radius:50%;
  animation:logoIn 1.3s var(--ease) .15s both}
.brand img{width:var(--logo);aspect-ratio:1;border-radius:50%;
  object-fit:cover;transition:transform .6s var(--ease),width .45s var(--ease)}
.site-header.scrolled .brand img{width:var(--logo-s)}
.brand:hover img{transform:rotate(8deg) scale(1.06)}
.brand:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@keyframes logoIn{from{transform:scale(.4) rotate(-120deg);opacity:0}to{transform:none;opacity:1}}

.site-header .nav{position:relative;justify-self:center}
.site-header .nav ul{list-style:none;display:flex;align-items:center;gap:clamp(18px,2.6vw,52px)}
.site-header .nav li{animation:rise .9s var(--ease) both;animation-delay:calc(.45s + var(--i)*.09s)}
@keyframes rise{from{opacity:0;transform:translateY(22px);filter:blur(6px)}
                to{opacity:1;transform:none;filter:blur(0)}}
.site-header .nav a{
  position:relative;display:inline-block;padding:.55em 0 .75em;
  color:#fff;text-decoration:none;white-space:nowrap;
  font-size:clamp(.82rem,1.35vw,1.5rem);font-weight:400;
  transition:transform .35s var(--ease),color .3s;
}
.site-header .nav a:hover,.site-header .nav a:focus-visible{transform:translateY(-2px)}
.site-header .nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px}
.site-header .nav a[aria-current="page"]{font-weight:500}
.site-header .nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:.4em;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.site-header .nav a:hover::after,.site-header .nav a:focus-visible::after,
.site-header .nav a:active::after,.site-header .nav a[aria-current="page"]::after{
  transform:scaleX(1);transform-origin:left;
}

.donate{
  justify-self:end;position:relative;isolation:isolate;display:inline-block;overflow:hidden;
  padding:.8em 1.9em;border:3px solid transparent;border-radius:22px;color:#fff;text-decoration:none;
  font-size:clamp(.82rem,1.35vw,1.5rem);
  background:linear-gradient(var(--bg),var(--bg)) padding-box,
             linear-gradient(135deg,#3aa9c4,#0b5ab5) border-box;
  animation:popIn .9s var(--ease) 1.1s backwards;
  transition:transform .35s var(--ease),box-shadow .35s;
}
.donate::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;
  background:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 100%);
  opacity:0;transition:opacity .4s}
.donate::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg)}
.donate:hover,.donate:focus-visible{transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,74,173,.45);outline:none}
.donate:hover::before,.donate:focus-visible::before{opacity:1}
.donate:hover::after{animation:shine .8s var(--ease)}
.donate:active{transform:scale(.97)}
@keyframes shine{to{left:130%}}
@keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

.burger{display:none;justify-self:end;width:44px;height:44px;background:none;
  border:0;cursor:pointer;position:relative;padding:0}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:#fff;
  border-radius:2px;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:first-child{top:17px}
.burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--cyan);border-radius:8px}

@media (min-width:901px) and (max-width:1180px){
  .site-header .nav ul{gap:clamp(12px,1.8vw,22px)}
  .donate{padding:.65em 1.3em}
}
@media (max-width:900px){
  :root{--hh:72px;--logo:56px;--logo-s:48px}
  .site-header{grid-template-columns:auto 1fr auto auto;gap:12px}
  .actions{grid-column:3}
  .donate{padding:.6em 1.2em;border-radius:16px;font-size:.9rem}
  .burger{display:block;grid-column:4}
  .site-header .nav{
    position:fixed;inset:0 0 auto 0;top:0;justify-self:stretch;z-index:-1;
    padding:calc(env(safe-area-inset-top) + 90px) 24px 32px;
    background:rgba(2,72,112,.97);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transform:translateY(-102%);transition:transform .6s var(--ease);
  }
  .site-header .nav.open{transform:none}
  .site-header .nav ul{flex-direction:column;align-items:flex-start;gap:4px}
  .site-header .nav li{animation:none;opacity:0;transform:translateX(-24px);
    transition:opacity .5s,transform .6s var(--ease);
    transition-delay:calc(.15s + var(--i)*.07s)}
  .site-header .nav.open li{opacity:1;transform:none}
  .site-header .nav a{font-size:1.25rem;padding:.6em 0}
}


/* =============================================================
   2 bis. SÉLECTEUR DE LANGUE FR / EN (header, après « Donner »)
   Icône Lucide « languages » · pastille dégradée qui glisse · flip + reflet au changement
   ============================================================= */
.actions{justify-self:end;display:flex;flex:none;align-items:center;gap:clamp(8px,1vw,16px);white-space:nowrap}
.lang{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;
  padding:3px 3px 3px 12px;border:2px solid transparent;border-radius:999px;color:#fff;
  font-size:clamp(.78rem,.95vw,.92rem);
  background:linear-gradient(var(--bg),var(--bg)) padding-box,
             linear-gradient(135deg,#3aa9c4,#0b5ab5) border-box;
  animation:popIn .9s var(--ease) 1.3s backwards;
  transition:transform .35s var(--ease),box-shadow .35s;
}
.lang:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,74,173,.45)}
.lang::after{                                   /* reflet qui traverse le bouton au changement */
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%) 150% 0/250% 100% no-repeat;
}
.lang.swap::after{opacity:1;animation:lang-shine .9s var(--ease)}

.lang-ic{
  width:1.4em;height:1.4em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--cyan);
  transition:color .4s,transform .6s var(--ease);
}
.lang-ic path{stroke-dasharray:1;stroke-dashoffset:0}
.lang:hover .lang-ic{transform:rotate(-10deg) scale(1.12);color:#fff}
.lang:hover .lang-ic path{animation:lang-draw .9s var(--ease) both}
.lang:hover .lang-ic path:nth-child(2){animation-delay:.07s}
.lang:hover .lang-ic path:nth-child(3){animation-delay:.14s}
.lang:hover .lang-ic path:nth-child(4){animation-delay:.2s}
.lang:hover .lang-ic path:nth-child(5){animation-delay:.1s}
.lang:hover .lang-ic path:nth-child(6){animation-delay:.2s}
.lang.swap .lang-ic{animation:lang-flip .85s var(--ease)}

.lang-seg{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;border-radius:999px}
.lang-b{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  position:relative;z-index:1;isolation:isolate;min-width:2.9em;padding:.55em .9em;
  border:0;border-radius:999px;background:none;cursor:pointer;
  font:600 .86em/1 Poppins,system-ui,sans-serif;letter-spacing:.08em;color:rgba(255,255,255,.72);
  transition:color .35s;
}
.lang-b::before{                                 /* survol : remplissage dégradé du projet */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(135deg,#3aa9c4,#0b5ab5);
  opacity:0;transform:scale(.55);transition:opacity .35s,transform .5s var(--ease);
}
.lang-b span{display:inline-block;transition:transform .45s var(--ease)}
.lang-b:not(.on):hover,.lang-b:not(.on):focus-visible{color:#fff}
.lang-b:not(.on):hover::before,.lang-b:not(.on):focus-visible::before{opacity:.9;transform:scale(1)}
.lang-b:not(.on):hover span{transform:translateY(-1px) scale(1.1)}
.lang-b:active span{transform:scale(.88)}
.lang-b.on{color:#fff;cursor:default}
.lang-b:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.lang-thumb{                                     /* pastille active : glisse (ressort) et change de couleur */
  position:absolute;z-index:0;top:0;bottom:0;left:0;width:50%;border-radius:999px;
  background:linear-gradient(135deg,#3aa9c4 0%,#0b5ab5 50%,#5de0e6 100%) 0% 50%/220% 220%;
  box-shadow:0 4px 14px rgba(0,74,173,.5);
  transition:translate .6s cubic-bezier(.34,1.56,.64,1),background-position .7s var(--ease);
}
.lang[data-lang="en"] .lang-thumb{translate:100% 0;background-position:100% 50%}
.lang.swap .lang-thumb{animation:lang-squash .6s var(--ease)}

@keyframes lang-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lang-flip{0%{transform:rotate(0) scale(1)}40%{transform:rotate(200deg) scale(1.35);color:#fff}100%{transform:rotate(360deg) scale(1)}}
@keyframes lang-squash{0%,100%{scale:1 1}35%{scale:1.28 .82}65%{scale:.94 1.06}}
@keyframes lang-shine{from{background-position:150% 0}to{background-position:-50% 0}}

/* Changement de langue : fondu du contenu (le header reste fixe) */
main,.footer{transition:opacity .4s ease}
body.lang-out main,body.lang-out .footer{opacity:0;transition-duration:.2s}
/* Visiteur anglophone : on masque la 1re image le temps de traduire (filet de sécurité 0,6 s si le JS échoue) */
html[lang="en"] body:not(.i18n-ready){opacity:0;animation:i18n-show .01s .6s forwards}
@keyframes i18n-show{to{opacity:1}}

@media (min-width:901px) and (max-width:1180px){.lang-ic{display:none}.lang{padding-left:3px}}
@media (max-width:900px){.lang-ic{width:1.3em;height:1.3em}}
@media (max-width:420px){
  .lang-ic{display:none}
  .lang{padding-left:3px}
  .lang-b{min-width:2.5em;padding:.5em .7em}
  .actions{gap:6px}
  .donate{padding:.5em .9em;font-size:.8rem}
}

/* =============================================================
   3. HERO SLIDER
   ============================================================= */

.hero-slider{
  position:relative;width:100%;
  height:100vh;height:100dvh;
  overflow:hidden;touch-action:pan-y;
  background:#024870;
}
.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1s ease,visibility 0s 1s;
  overflow:hidden;background:#024870;
}
.slide.active{opacity:1;visibility:visible;transition:opacity 1s ease}

.hero-slider .photo{position:absolute;inset:-4%;background-size:cover;
  background-position:var(--pos,center);transform:scale(1.12)}
.slide.active .photo{animation:kb 9s ease-out forwards}
@keyframes kb{to{transform:scale(1)}}

.hero-slider .tint{position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(2,72,112,.62) 0%,rgba(2,72,112,.78) 55%,rgba(2,72,112,.92) 100%);
  clip-path:inset(0 100% 0 0)}
.slide.active .tint{animation:wipe 1.2s var(--ease) forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}

.hero-slider h1,.hero-slider h2{
  font-family:Orbitron,sans-serif;font-weight:800;text-transform:uppercase;
  line-height:1.08;text-shadow:0 4px 18px rgba(0,30,90,.35);
}
.hero-slider .line{display:block;overflow:hidden;padding:.06em 0}
.hero-slider .line>span{display:block;transform:translateY(115%)}
.slide.active .line>span{animation:up 1.1s var(--ease) forwards;
  animation-delay:calc(.5s + var(--n)*.18s)}
@keyframes up{to{transform:none}}

.hero-slider .sub{
  font-weight:400;text-transform:uppercase;letter-spacing:.9em;
  font-size:clamp(.6rem,1.45vw,1.55rem);opacity:0;white-space:nowrap;
}
.slide.active .sub{animation:subAnim 1.8s var(--ease) 1.2s forwards}
@keyframes subAnim{from{opacity:0;letter-spacing:1.4em}
                   to{opacity:1;letter-spacing:.9em}}

/* ─── Bloc `.hero-slider .center` — positionnement IDENTIQUE pour s1 & s2 ─── */
.hero-slider .center{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  text-align:center;width:100%;padding:0 6%;
}
.hero-slider .center h1,.hero-slider .center h2{font-size:clamp(2rem,8vw,8.2rem)}
.hero-slider .center .sub{margin-top:clamp(18px,4vw,60px)}
/* ✅ Aucune surcharge par slide : s1 et s2 sont parfaitement alignés */

/* ─── Slide 03 ─── */
#s3 .txt{position:absolute;left:6.2%;top:24%;width:52%}
#s3 h2{font-size:clamp(2rem,6.6vw,7rem)}
#s3 p{margin:clamp(18px,3vw,50px) 0 0 clamp(60px,10vw,160px);
  font-size:clamp(.9rem,1.5vw,1.6rem);font-weight:400;
  opacity:0;transform:translateY(14px)}
.slide.active #s3 p{animation:fadeIn 1s var(--ease) 1.3s forwards}
@keyframes fadeIn{to{opacity:1;transform:none}}

.hero-slider .btn{
  position:absolute;left:7.8%;top:68.5%;
  padding:1.05em 1.9em;border:2px solid rgba(120,200,235,.9);border-radius:18px;
  color:#fff;text-decoration:none;
  font-size:clamp(.85rem,1.3vw,1.4rem);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(14px);
  transition:background .3s,transform .3s;
}
.hero-slider .btn:hover,.hero-slider .btn:focus-visible{
  background:rgba(255,255,255,.22);outline:none;transform:translateY(-3px);
}
.slide.active .btn{animation:fadeIn 1s var(--ease) 1.6s forwards}
.slide.active .btn:hover{transform:translateY(-3px)}

.hero-slider .disc{
  position:absolute;left:54.5%;top:35%;width:32.5%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(120deg,#1b8fb5,#036096);
  transform:scale(0);transform-origin:center;
}
.slide.active .disc{animation:popIn 1.4s var(--ease) .3s forwards}

.hero-slider .cap{position:absolute;border-radius:999px;background-size:cover;background-position:center;
  box-shadow:0 20px 50px rgba(0,25,90,.35);
  transform:translateY(60%);opacity:0}
.hero-slider .cap.a{left:55.3%;top:33%;width:14.2%;height:50.5%;
  background-image:url(../public/assets/sliders/3.jpg);background-position:45% 40%}
.hero-slider .cap.b{left:71.4%;top:21.5%;width:14.2%;height:60.1%;
  background-image:url(../public/assets/sliders/3-1.jpg);background-position:48% 50%}
.slide.active .cap{animation:riseCap 1.5s var(--ease) forwards}
.slide.active .cap.a{animation-delay:.7s}
.slide.active .cap.b{animation-delay:.95s}
@keyframes riseCap{to{transform:none;opacity:1}}

/* ─── Pagination ─── */
#pag{position:absolute;z-index:10;
  right:max(2.2%,env(safe-area-inset-right));
  bottom:max(6%,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:12px}
#pag .track{width:2px;height:clamp(60px,12vh,130px);
  background:rgba(255,255,255,.25);position:relative;overflow:hidden;border-radius:2px}
#pag .fill{position:absolute;left:0;top:0;width:100%;height:0;background:#5cc3e8}
#pag button{
  font:400 clamp(.75rem,1.1vw,1.1rem)/1 Poppins,sans-serif;
  color:rgba(255,255,255,.65);background:none;
  border:2px solid transparent;border-radius:12px;
  width:clamp(36px,3.1vw,56px);aspect-ratio:1;cursor:pointer;
  transition:all .4s var(--ease);padding:0;
}
#pag button:hover{color:#fff}
#pag button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#pag button.on{color:#fff;border-color:rgba(120,200,235,.9);
  background:rgba(255,255,255,.1)}

/* ─── Slide 03 : version 2 lignes desktop / mobile ─── */
#s3 h2.mb{display:none}
#s3 h2.dk{font-size:clamp(1.6rem,4.3vw,5.2rem)}
#s3 h2.dk .line>span{white-space:nowrap}

@media (min-width:821px){
  #s3 .txt{top:27%;width:50%}
  #s3 p{margin:clamp(20px,2.6vw,48px) 0 0 0}
  .hero-slider .btn{left:6.2%;top:70%}
}

@media (max-width:820px){
  #s3 h2.dk{display:none}
  #s3 h2.mb{display:block}
  .hero-slider .sub{letter-spacing:.45em;white-space:normal;padding:0 4%}
  @keyframes subAnim{from{opacity:0;letter-spacing:.9em}
                     to{opacity:1;letter-spacing:.45em}}
  #s3 .txt{left:7%;top:9%;width:86%}
  #s3 p{margin-left:12%}
  .hero-slider .btn{left:7%;top:33%}
  .hero-slider .disc{left:22%;top:50%;width:62%}
  .hero-slider .cap.a{left:25%;top:55%;width:26%;height:30%}
  .hero-slider .cap.b{left:54%;top:46%;width:26%;height:38%}
  /* ⚠️ Aucun override de .hero-slider .center ici → s1 et s2 restent centrés à 50% */
}

/* =============================================================
   4. COLLÈGE PASTORAL
   ============================================================= */

.college-section{
  position:relative;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(90px + env(safe-area-inset-top,0)) 0
          calc(40px + env(safe-area-inset-bottom,0));
  overflow:hidden;background:var(--bg);color:#fff;
}
.college-section .g{position:absolute;border-radius:50%;
  background:linear-gradient(135deg,#5de0e6,#004aad);
  animation:float 6s ease-in-out infinite}
.college-section .g.ring{
  width:min(120px,11vh);height:min(120px,11vh);left:13.8%;top:20%;
  border:min(18px,1.7vh) solid transparent;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,
             linear-gradient(135deg,#5de0e6,#004aad) border-box;
}
.college-section .g.s{width:min(40px,4vh);height:min(40px,4vh);
  right:10%;top:24%;animation-delay:-2s}
.college-section .g.b{width:min(104px,10vh);height:min(104px,10vh);
  left:5.6%;bottom:18%;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-22px) scale(1.06)}}

.college-section h2{
  font-family:'Russo One',Orbitron,Impact,sans-serif;font-weight:400;
  font-size:clamp(34px,min(8vw,12vh),106px);
  text-align:center;line-height:1;position:relative;z-index:2;
  text-shadow:0 4px 30px rgba(93,224,230,.25);
}
.college-section h2 span{
  display:inline-block;opacity:0;
  transform:translateY(40px) rotateX(-70deg);
  animation:colIn .8s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay:calc(var(--i)*45ms);
}
@keyframes colIn{to{opacity:1;transform:none}}

.college-section .sub2{
  font-size:clamp(13px,min(1.8vw,2.6vh),24px);
  margin:1.6vh 0 2vh;opacity:0;
  animation:fadeInS 1s .9s forwards;
  position:relative;z-index:2;text-align:center;padding:0 16px;
}
@keyframes fadeInS{to{opacity:1}}

.college-section .track{
  position:relative;z-index:2;width:100%;
  display:flex;align-items:center;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;
  opacity:0;animation:fadeInS 1s 1s forwards;
}
.college-section .track::-webkit-scrollbar{display:none}
.college-section .track::before,
.college-section .track::after{
  content:"";flex:0 0 calc(50% - var(--w)*.675);
}
.college-section .it{
  --w:clamp(170px,min(20vw,27vh),380px);
  flex:0 0 calc(var(--w)*1.35);
  scroll-snap-align:center;display:flex;justify-content:center;padding:1vh 0;
}
.college-section .w{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .15s linear,opacity .15s linear;
  will-change:transform;width:calc(var(--w)*1.3);
}
.college-section .card{
  width:calc(var(--w)*.85);height:calc(var(--w)*1.22);
  border-radius:999px;overflow:hidden;border:3px solid #fff;
  box-shadow:0 20px 50px rgba(0,0,0,.45);transition:box-shadow .5s;
}
.college-section .card img{
  width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;user-select:none;
  animation:zoomC 7s ease-in-out infinite alternate;
}
@keyframes zoomC{to{transform:scale(1.1)}}
.college-section .it.on .card{box-shadow:0 24px 70px rgba(93,224,230,.35)}

.college-section .cap2{margin-top:1.6vh;min-height:4.2em}
.college-section .cap2 b{display:block;font-weight:600;
  font-size:clamp(17px,min(2.1vw,3.3vh),38px);line-height:1.25}
.college-section .cap2 i{display:block;font-style:normal;
  font-size:clamp(14px,min(1.75vw,2.7vh),30px);margin-top:2px;opacity:.9}
.college-section .it.on .cap2 b,
.college-section .it.on .cap2 i{
  animation:capIn .7s cubic-bezier(.2,.9,.3,1) both;
}
.college-section .it.on .cap2 i{animation-delay:.12s}
@keyframes capIn{from{opacity:0;transform:translateY(16px)}}

.college-section .soc{display:flex;gap:clamp(8px,1vw,14px);
  justify-content:center;margin-top:1.4vh}
.college-section .soc a{
  width:clamp(34px,min(3vw,5vh),52px);height:clamp(34px,min(3vw,5vh),52px);
  border-radius:50%;display:grid;place-items:center;
  color:#024870;background:#fff;
  transition:transform .3s,box-shadow .3s;
}
.college-section .soc a:hover{transform:translateY(-5px) scale(1.12);
  box-shadow:0 8px 22px rgba(255,255,255,.4)}
.college-section .soc svg{width:52%;height:52%;fill:currentColor}
.college-section .it.on .soc a{animation:socPop .6s cubic-bezier(.2,1.4,.4,1) both}
.college-section .it.on .soc a:nth-child(1){animation-delay:.25s}
.college-section .it.on .soc a:nth-child(2){animation-delay:.35s}
.college-section .it.on .soc a:nth-child(3){animation-delay:.45s}
@keyframes socPop{from{opacity:0;transform:translateY(14px) scale(.4)}}

.college-section .bar2{
  position:absolute;bottom:0;left:0;height:3px;
  background:linear-gradient(90deg,#5de0e6,#004aad);z-index:3;
}

@media (max-width:1100px){
  .college-section .it{--w:clamp(180px,min(34vw,28vh),340px)}
}
@media (max-width:700px){
  .college-section .it{--w:clamp(150px,min(56vw,30vh),260px)}
  .college-section .cap2 b{font-size:clamp(17px,5.4vw,26px)}
  .college-section .cap2 i{font-size:clamp(14px,4.4vw,21px)}
  .college-section .g.ring,.college-section .g.b{opacity:.6}
}

/* =============================================================
   5. PROGRAMMES  (#programmes)
   ============================================================= */

#programmes {
  --bg:#024870;
  --cyan:#5de0e6;
  --blue:#004aad;
  --accent:linear-gradient(135deg,#1a8fb8,#004aad);
  --ease:cubic-bezier(.2,.75,.2,1);
}
#programmes {
  background:var(--bg);
  font-family:Poppins,system-ui,sans-serif;
  color:#fff;
}
#programmes.programmes {
  padding:clamp(48px,6vw,90px) 20px clamp(60px,7vw,110px);
}
#programmes .head {
  text-align:center;
  font-family:Montserrat,sans-serif;
}
#programmes .head p {
  font-weight:600;
  font-size:clamp(.85rem,1.05vw,1.1rem);
  letter-spacing:.005em;
  color:#e8f6fa;
}
#programmes .head h2 {
  margin-top:.1em;
  font-weight:500;
  font-size:clamp(1.7rem,2.9vw,2.9rem);
  text-transform:uppercase;
  letter-spacing:.005em;
}
#programmes .grid {
  max-width:1116px;
  margin:clamp(70px,6vw,90px) auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:80px 25px;
  list-style:none;
}
#programmes .card {
  position:relative;
  min-height:242px;
  filter:drop-shadow(0 14px 22px rgba(0,18,55,.28));
  transition:transform .5s var(--ease),filter .5s;
}
#programmes .card:hover,
#programmes .card:focus-within {
  transform:translateY(-8px);
  filter:drop-shadow(0 22px 30px rgba(0,18,55,.4));
}
#programmes .shape {
  position:absolute;
  inset:0;
  border:2px dashed #d9dcde;
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  -webkit-mask:radial-gradient(circle 42px at 50% -30px,#0000 97%,#000 100%),radial-gradient(circle 46px at 50% calc(100% + 35px),#0000 97%,#000 100%);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 42px at 50% -30px,#0000 97%,#000 100%),radial-gradient(circle 46px at 50% calc(100% + 35px),#0000 97%,#000 100%);
  mask-composite:intersect;
  transition:border-color .4s;
}
#programmes .shape::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 100%);
  opacity:0;
  transition:opacity .5s;
}
#programmes .shape::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-70%;
  width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
}
#programmes .card:hover .shape::before,
#programmes .card:focus-within .shape::before {
  opacity:1;
}
#programmes .card:hover .shape::after {
  animation:pg-shine .9s var(--ease);
}
#programmes .card:hover .shape,
#programmes .card:focus-within .shape {
  border-color:rgba(255,255,255,.7);
}
@keyframes pg-shine {
  to {
    left:130%;
  }
}
#programmes .arc {
  position:absolute;
  left:50%;
  overflow:hidden;
  transform:translateX(-50%);
  pointer-events:none;
}
#programmes .arc i {
  position:absolute;
  left:0;
  border:2px dashed #d9dcde;
  border-radius:50%;
  transition:border-color .4s;
}
#programmes .arc.t {
  top:0;
  width:84px;
  height:12px;
}
#programmes .arc.t i {
  width:84px;
  height:84px;
  top:-72px;
}
#programmes .arc.b {
  bottom:0;
  width:92px;
  height:11px;
}
#programmes .arc.b i {
  width:92px;
  height:92px;
  top:0;
}
#programmes .card:hover .arc i,
#programmes .card:focus-within .arc i {
  border-color:rgba(255,255,255,.7);
}
#programmes .icon {
  position:absolute;
  left:50%;
  top:-63px;
  width:66px;
  height:66px;
  margin-left:-33px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid rgba(255,255,255,.85);
  display:grid;
  place-items:center;
  box-shadow:0 6px 16px rgba(0,30,90,.3);
  transition:transform .7s var(--ease);
}
#programmes .icon svg {
  width:30px;
  height:30px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#programmes .card:hover .icon {
  transform:translateY(-4px) rotate(360deg);
}
#programmes .icon::after {
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid rgba(93,224,230,.7);
  opacity:0;
}
#programmes.in .icon::after {
  animation:pg-ping 2.8s ease-out 1.6s infinite;
}
@keyframes pg-ping {
  0% {
    transform:scale(1);
    opacity:.7;
  }
  100% {
    transform:scale(1.7);
    opacity:0;
  }
}
#programmes .body {
  position:relative;
  padding:32px 32px 40px;
}
#programmes .day {
  display:inline-block;
  padding:.7em 1.05em;
  border-radius:6px;
  background:#eceff1;
  color:#5b6168;
  font-size:.88rem;
  font-weight:500;
  transition:background .4s,color .4s;
}
#programmes .body h3 {
  margin-top:clamp(30px,3.2vw,44px);
  font-family:Montserrat,sans-serif;
  font-weight:600;
  font-size:1.28rem;
  line-height:1;
  color:#1c1c1e;
  transition:color .4s;
}
#programmes .time {
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.88rem;
  color:#6a7078;
  transition:color .4s;
}
#programmes .clock {
  flex:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 1px rgba(255,255,255,.8);
}
#programmes .clock line {
  stroke:#fff;
  stroke-width:1.6;
  stroke-linecap:round;
  transform-origin:10px 10px;
}
#programmes .clock .m {
  transition:transform .9s var(--ease);
}
#programmes .card:hover .clock .m {
  transform:rotate(360deg);
}
#programmes .card:hover .day {
  background:rgba(255,255,255,.22);
  color:#fff;
}
#programmes .card:hover h3,
#programmes .card:hover .time {
  color:#fff;
}
#programmes .head p,
#programmes .head h2 {
  opacity:0;
  transform:translateY(22px);
  filter:blur(6px);
}
#programmes.in .head p {
  animation:pg-up 1s var(--ease) .1s forwards;
}
#programmes.in .head h2 {
  animation:pg-up 1s var(--ease) .3s forwards;
}
#programmes .card {
  opacity:0;
  transform:translateY(60px);
}
#programmes.in .card {
  animation:pg-cardin 1s var(--ease) forwards;
  animation-delay:calc(.6s + var(--i)*.15s);
}
@keyframes pg-cardin {
  to {
    opacity:1;
    transform:none;
  }
}
#programmes .icon {
  scale:0;
}
#programmes.in .icon {
  animation:pg-iconin .9s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(1s + var(--i)*.15s);
}
@keyframes pg-iconin {
  to {
    scale:1;
  }
}
#programmes.in .card .day,
#programmes.in .card h3,
#programmes.in .card .time {
  animation:pg-up .9s var(--ease) both;
  animation-delay:calc(1.1s + var(--i)*.15s);
}
#programmes.in .card h3 {
  animation-delay:calc(1.2s + var(--i)*.15s);
}
#programmes.in .card .time {
  animation-delay:calc(1.3s + var(--i)*.15s);
}
@keyframes pg-up {
  to {
    opacity:1;
    transform:none;
    filter:blur(0);
  }
}
#programmes .card .day,
#programmes .card h3,
#programmes .card .time {
  opacity:0;
  transform:translateY(14px);
}
#programmes.in .card .day,
#programmes.in .card h3,
#programmes.in .card .time {
  opacity:0;
}
@media (max-width:980px) {
  #programmes .grid {
    grid-template-columns:repeat(2,1fr);
    max-width:620px;
  }
}
@media (max-width:560px) {
  #programmes .grid {
    grid-template-columns:1fr;
    max-width:340px;
    gap:76px;
  }
}
@media (prefers-reduced-motion:reduce) {
  #programmes .head p,
  #programmes .head h2,
  #programmes .card,
  #programmes .card .day,
  #programmes .card h3,
  #programmes .card .time {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
  #programmes .icon {
    scale:1!important;
    animation:none!important;
  }
  #programmes .icon::after {
    display:none;
  }
}

/* =============================================================
   6. À PROPOS  (#a-propos)
   ============================================================= */

#a-propos {
  --bg:#024870;
  --cyan:#5de0e6;
  --blue:#004aad;
  --gold:#e0a82e;
  --ease:cubic-bezier(.2,.75,.2,1);
}
#a-propos {
  background:var(--bg);
  color:#fff;
  font-family:Poppins,system-ui,sans-serif;
}
#a-propos .stage {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}
#a-propos .stage>* {
  position:absolute;
}
#a-propos .txt {
  font-size:clamp(.82rem,1.4vw,1.8rem);
  line-height:1.67;
  font-weight:400;
}
#a-propos h2,
#a-propos h3,
#a-propos .name {
  font-family:Anton,Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
}
#a-propos h3 {
  font-size:clamp(1rem,2vw,2.4rem);
  letter-spacing:.01em;
  line-height:1.1;
  background:linear-gradient(90deg,var(--cyan) 0%,#1f7bdc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 3px rgba(0,20,70,.5));
  width:max-content;
}
#a-propos .left {
  left:3.75%;
  top:24.4%;
  width:36%;
}
#a-propos h2 {
  font-size:clamp(3rem,7.7vw,9.5rem);
  line-height:.98;
  letter-spacing:.005em;
}
#a-propos .left h3 {
  margin-top:.15em;
}
#a-propos .left .txt {
  margin-top:.35em;
  width:34vw;
  max-width:100%;
}
#a-propos .cta {
  left:2.6%;
  top:66.2%;
  display:flex;
  align-items:center;
  gap:1.1vw;
}
#a-propos .btn {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-block;
  padding:.8em 1.7em;
  border:3px solid transparent;
  border-radius:22px;
  color:#d6f4f8;
  text-decoration:none;
  font-size:clamp(.85rem,1.45vw,1.8rem);
  background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(135deg,#3aa9c4,#0b5ab5) border-box;
  transition:transform .35s var(--ease),box-shadow .35s,color .3s;
}
#a-propos .btn::before {
  content:"";
  position:absolute;
  inset:-3px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 100%);
  opacity:0;
  transition:opacity .4s;
}
#a-propos .btn::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-60%;
  width:40%;
  z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
}
#a-propos .btn:hover,
#a-propos .btn:focus-visible {
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,74,173,.45);
  outline:none;
}
#a-propos .btn:hover::before,
#a-propos .btn:focus-visible::before {
  opacity:1;
}
#a-propos .btn:hover::after {
  animation:ab-shine .8s var(--ease);
}
#a-propos .btn:active {
  transform:scale(.97);
}
@keyframes ab-shine {
  to {
    left:130%;
  }
}
#a-propos .arrow {
  position:relative;
  display:block;
  width:4.2vw;
  height:1px;
  background:var(--cyan);
  transform-origin:left;
  transition:width .5s var(--ease);
}
#a-propos .arrow::after {
  content:"";
  position:absolute;
  right:0;
  top:-3px;
  width:6px;
  height:6px;
  border:solid var(--cyan);
  border-width:1px 1px 0 0;
  transform:rotate(45deg) translate(-1px,0);
}
#a-propos .btn:hover+.arrow,
#a-propos .btn:focus-visible+.arrow {
  width:6.2vw;
}
#a-propos .portrait {
  left:41.2%;
  top:24.5%;
  width:25.5%;
  height:60.8%;
  margin:0;
}
#a-propos .portrait>* {
  position:absolute;
}
#a-propos .frame {
  left:15.9%;
  top:0;
  width:84.1%;
  height:90.6%;
  overflow:visible;
}
#a-propos .frame rect {
  fill:none;
  stroke:var(--gold);
  stroke-width:2;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
#a-propos .photo {
  left:0;
  top:9.4%;
  width:84.7%;
  height:90.6%;
  border-radius:5vw;
  object-fit:cover;
  object-position:56% 20%;
  clip-path:inset(100% 0 0 0 round 5vw);
  transform:scale(1.15);
}
#a-propos figcaption {
  right:calc(100% + .3vw);
  top:88.7%;
  width:19vw;
  text-align:center;
}
#a-propos .name {
  font-size:clamp(1.1rem,2.2vw,2.8rem);
  line-height:1.1;
  display:block;
  white-space:nowrap;
}
#a-propos .role {
  display:block;
  margin-top:.15em;
  font-size:clamp(.8rem,1.4vw,1.8rem);
  text-transform:uppercase;
  opacity:0;
  transform:translateY(14px);
}
#a-propos .obj {
  left:68.2%;
  top:29.4%;
  width:28%;
}
#a-propos .vis {
  left:68.2%;
  top:59.6%;
  width:28%;
}
#a-propos .obj .txt,
#a-propos .vis .txt {
  margin-top:.35em;
}
#a-propos .wave {
  pointer-events:none;
  overflow:hidden;
  opacity:0;
}
#a-propos .wave path,
#a-propos .wave ellipse {
  fill:none;
  stroke:rgba(93,224,230,.42);
  stroke-width:.8;
  vector-effect:non-scaling-stroke;
}
#a-propos .wave-b {
  left:27%;
  bottom:0;
  width:33%;
  height:12.6%;
}
#a-propos .wave-r {
  right:0;
  top:36.5%;
  width:5.8%;
  height:24.6%;
}
#a-propos .ch {
  display:inline-block;
  transform:translateY(105%);
  opacity:0;
}
#a-propos .mask {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.06em;
}
#a-propos.in .ch {
  animation:ab-ch .9s var(--ease) forwards;
  animation-delay:calc(.2s + var(--i)*50ms);
}
@keyframes ab-ch {
  to {
    transform:none;
    opacity:1;
  }
}
#a-propos .reveal {
  opacity:0;
  transform:translateY(26px);
  filter:blur(6px);
}
#a-propos.in .reveal {
  animation:ab-up 1s var(--ease) forwards;
  animation-delay:var(--d,.8s);
}
@keyframes ab-up {
  to {
    opacity:1;
    transform:none;
    filter:blur(0);
  }
}
#a-propos h3.reveal {
  transform:translateX(-30px);
  clip-path:inset(0 100% 0 0);
}
#a-propos.in h3.reveal {
  animation:ab-sweep 1.1s var(--ease) forwards;
  animation-delay:var(--d,.8s);
}
@keyframes ab-sweep {
  to {
    opacity:1;
    transform:none;
    filter:blur(0);
    clip-path:inset(0 0 -10% 0);
  }
}
#a-propos .cta {
  opacity:0;
  transform:translateX(-40px);
}
#a-propos.in .cta {
  animation:ab-slide 1s var(--ease) 1.3s forwards;
}
@keyframes ab-slide {
  to {
    opacity:1;
    transform:none;
  }
}
#a-propos.in .frame rect {
  animation:ab-draw 2s var(--ease) .5s forwards;
}
@keyframes ab-draw {
  to {
    stroke-dashoffset:0;
  }
}
#a-propos.in .photo {
  animation:ab-photo 1.7s var(--ease) .6s forwards,ab-float 7s ease-in-out 2.4s infinite alternate;
}
@keyframes ab-photo {
  to {
    clip-path:inset(0 0 0 0 round 5vw);
    transform:scale(1);
  }
}
@keyframes ab-float {
  from {
    transform:translateY(0);
  }
  to {
    transform:translateY(-8px);
  }
}
#a-propos.in .role {
  animation:ab-up 1s var(--ease) 1.7s forwards;
}
#a-propos.in .wave {
  animation:ab-fadein 2s ease .9s forwards,ab-drift 10s ease-in-out 2.9s infinite alternate;
}
@keyframes ab-fadein {
  to {
    opacity:1;
  }
}
@keyframes ab-drift {
  from {
    transform:translate(0,0);
  }
  to {
    transform:translate(8px,-6px);
  }
}
@media (max-width:900px) {
  #a-propos .stage {
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:36px;
    padding:clamp(100px,22vw,140px) 7% 90px;
  }
  #a-propos .stage>* {
    position:relative;
    left:auto;
    top:auto;
    right:auto;
    bottom:auto;
    width:auto;
  }
  #a-propos .txt {
    font-size:1rem;
    line-height:1.7;
  }
  #a-propos h2 {
    font-size:clamp(3.4rem,17vw,6rem);
  }
  #a-propos h3 {
    font-size:1.6rem;
  }
  #a-propos .left {
    width:auto;
  }
  #a-propos .left .txt {
    width:auto;
  }
  #a-propos .cta {
    gap:14px;
  }
  #a-propos .btn {
    font-size:1rem;
  }
  #a-propos .arrow {
    width:48px;
  }
  #a-propos .btn:hover+.arrow {
    width:70px;
  }
  #a-propos .portrait {
    width:min(100%,430px);
    height:auto;
    aspect-ratio:490/657;
    margin:20px auto 60px;
  }
  #a-propos .photo {
    border-radius:14vw;
    clip-path:inset(100% 0 0 0 round 14vw);
  }
  @keyframes ab-photo {
    to {
      clip-path:inset(0 0 0 0 round 14vw);
      transform:scale(1);
    }
  }
  #a-propos figcaption {
    right:auto;
    left:0;
    top:100%;
    width:100%;
    margin-top:18px;
  }
  #a-propos .name {
    font-size:1.8rem;
  }
  #a-propos .role {
    font-size:.95rem;
  }
  #a-propos .obj,
  #a-propos .vis {
    width:auto;
  }
  #a-propos .wave-b {
    left:0;
    width:70%;
    height:90px;
    position:absolute;
    bottom:0;
  }
  #a-propos .wave-r {
    position:absolute;
    right:0;
    top:34%;
    width:60px;
    height:160px;
  }
}
@media (prefers-reduced-motion:reduce) {
  #a-propos .ch,
  #a-propos .reveal,
  #a-propos .cta,
  #a-propos .role,
  #a-propos .wave {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    animation:none!important;
  }
  #a-propos .photo {
    clip-path:none!important;
    transform:none!important;
    animation:none!important;
  }
  #a-propos .frame rect {
    stroke-dashoffset:0!important;
    animation:none!important;
  }
}

/* =============================================================
   7. ÉGLISE — « Pourquoi nous rejoindre ? »  (#eglise)
   ============================================================= */

#eglise {
  --bg:#024870;
  --cream:#fffbe8;
  --ease:cubic-bezier(.2,.75,.2,1);
  --bw:clamp(3px,.31vw,6px);
}
#eglise {
  background:var(--bg);
  color:var(--cream);
  font-family:Archivo,system-ui,sans-serif;
}
#eglise.eg {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg);
}
#eglise.eg>* {
  position:absolute;
}
#eglise .pair {
  display:contents;
}
#eglise .ph {
  position:absolute;
  top:13.7%;
  width:47.9%;
  aspect-ratio:920/480;
  margin:0;
}
#eglise .ph1 {
  left:5.73%;
}
#eglise .ph2 {
  left:46.35%;
}
#eglise .rim,
#eglise .img {
  position:absolute;
}
#eglise .rim {
  inset:0;
  background:var(--cream);
  clip-path:polygon(40% 0,60% 0,60% 100%,40% 100%);
}
#eglise .img {
  inset:var(--bw) 0;
  overflow:hidden;
  background:#1a0a33;
  clip-path:polygon(40% 0,60% 0,60% 100%,40% 100%);
}
#eglise .img i {
  position:absolute;
  inset:-5%;
  display:block;
  background-size:cover;
  background-position:center;
  transform:scale(1.25);
  translate:calc(var(--mx,0)*var(--k,-10)*1px) calc(var(--my,0)*var(--k,-10)*.6px);
  transition:translate .9s var(--ease);
}
#eglise .ph1 .img i {
  background-image:url("../public/assets/img/11.jpg"),linear-gradient(135deg,#2a0d4a,#7a35c4 50%,#1a0a33);
}
#eglise .ph2 .img i {
  --k:12;
  background-image:url("../public/assets/img/10.jpg"),linear-gradient(135deg,#0a0a1c,#5b1d8f 55%,#06060f);
}
#eglise .img::before {
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  left:-60%;
  width:30%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg);
}
#eglise .title {
  left:5.73%;
  top:66.5%;
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.7rem,4.05vw,5rem);
  line-height:1.33;
  letter-spacing:.002em;
  color:var(--cream);
}
#eglise .ln {
  display:block;
  overflow:hidden;
  padding-bottom:.04em;
}
#eglise .ln>span {
  display:block;
  transform:translateY(110%);
}
#eglise .stats {
  list-style:none;
  left:40.9%;
  top:66.5%;
  width:45%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
#eglise .stats li {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
#eglise .icw {
  position:relative;
  width:clamp(48px,4.6vw,92px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.4);
}
#eglise .icw::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px dashed rgba(255,251,232,.4);
}
#eglise .icw svg {
  width:56%;
  height:56%;
  overflow:visible;
  fill:none;
  stroke:var(--cream);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#eglise .icw path,
#eglise .icw circle {
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
#eglise .num {
  margin-top:.1vw;
  font-size:clamp(2.6rem,7vw,8.6rem);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  opacity:0;
  transform:translateY(24px);
  filter:blur(6px);
}
#eglise .lab {
  margin-top:.5vw;
  font-size:clamp(.8rem,1.7vw,2.1rem);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  opacity:0;
  transform:translateY(16px);
}
#eglise.in .rim {
  animation:eg-open 1.4s var(--ease) forwards;
}
#eglise.in .img {
  animation:eg-openp 1.4s var(--ease) .15s forwards;
}
#eglise.in .ph2 .rim {
  animation-delay:.25s;
}
#eglise.in .ph2 .img {
  animation-delay:.4s;
}
@keyframes eg-open {
  to {
    clip-path:polygon(0 0,80.4% 0,100% 100%,19.6% 100%);
  }
}
@keyframes eg-openp {
  to {
    clip-path:polygon(calc(var(--bw)*1.545) 0,calc(80.4% - var(--bw)*.795) 0,calc(100% - var(--bw)*1.545) 100%,calc(19.6% + var(--bw)*.795) 100%);
  }
}
#eglise.in .img i {
  animation:eg-zoom 2.8s var(--ease) .3s forwards,eg-kb 14s ease-in-out 3.3s infinite alternate;
}
#eglise.in .ph2 .img i {
  animation-delay:.55s,3.6s;
}
@keyframes eg-zoom {
  to {
    transform:scale(1.05);
  }
}
@keyframes eg-kb {
  from {
    transform:scale(1.05);
  }
  to {
    transform:scale(1.12);
  }
}
#eglise.in .img::before {
  animation:eg-sweep 1.5s ease-out 1.6s forwards;
}
#eglise.in .ph2 .img::before {
  animation-delay:1.9s;
}
@keyframes eg-sweep {
  to {
    left:140%;
  }
}
#eglise.in .ln>span {
  animation:eg-rise .95s var(--ease) forwards;
  animation-delay:calc(1s + var(--n)*.16s);
}
@keyframes eg-rise {
  to {
    transform:none;
  }
}
#eglise.in .icw {
  animation:eg-pop .8s cubic-bezier(.34,1.56,.64,1) forwards,eg-bob 4s ease-in-out 3.6s infinite alternate;
  animation-delay:calc(1.3s + var(--s)*.22s),calc(3.6s + var(--s)*.4s);
}
@keyframes eg-pop {
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes eg-bob {
  from {
    transform:translateY(0);
  }
  to {
    transform:translateY(-7px);
  }
}
#eglise.in .icw::before {
  animation:eg-spin 24s linear infinite;
}
@keyframes eg-spin {
  to {
    transform:rotate(360deg);
  }
}
#eglise.in .icw path,
#eglise.in .icw circle {
  animation:eg-draw 1.4s var(--ease) forwards;
  animation-delay:calc(1.6s + var(--s)*.22s);
}
@keyframes eg-draw {
  to {
    stroke-dashoffset:0;
  }
}
#eglise.in .num {
  animation:eg-up .9s var(--ease) forwards;
  animation-delay:calc(1.7s + var(--s)*.22s);
}
#eglise.in .lab {
  animation:eg-up .8s var(--ease) forwards;
  animation-delay:calc(2.1s + var(--s)*.22s);
}
@keyframes eg-up {
  to {
    opacity:1;
    transform:none;
    filter:blur(0);
  }
}
#eglise .stats li:hover .icw {
  animation:none;
  opacity:1;
  transform:scale(1.12) rotate(-6deg);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
@media (max-width:900px) {
  #eglise.eg {
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    gap:clamp(32px,7vw,56px);
    padding:clamp(40px,8vw,70px) 5% clamp(40px,8vw,70px);
  }
  #eglise.eg>* {
    position:relative;
    left:auto;
    top:auto;
  }
  #eglise .pair {
    display:flex;
    gap:2.2%;
  }
  #eglise .ph {
    position:relative;
    left:auto;
    top:auto;
    width:48.9%;
    flex:none;
  }
  #eglise .title {
    font-size:clamp(2.2rem,8.4vw,4rem);
    line-height:1.2;
  }
  #eglise .stats {
    width:100%;
    left:auto;
  }
  #eglise .stats li {
    flex:1;
  }
  #eglise .num {
    font-size:clamp(2.6rem,12vw,5.4rem);
  }
  #eglise .lab {
    font-size:clamp(.72rem,2.6vw,1.2rem);
    margin-top:6px;
  }
  #eglise .icw {
    width:clamp(48px,11vw,84px);
  }
}
@media (max-width:560px) {
  #eglise .pair {
    flex-direction:column;
    gap:16px;
  }
  #eglise .ph {
    width:100%;
  }
}
@media (prefers-reduced-motion:reduce) {
  #eglise .rim {
    clip-path:polygon(0 0,80.4% 0,100% 100%,19.6% 100%)!important;
    animation:none!important;
  }
  #eglise .img {
    clip-path:polygon(calc(var(--bw)*1.545) 0,calc(80.4% - var(--bw)*.795) 0,calc(100% - var(--bw)*1.545) 100%,calc(19.6% + var(--bw)*.795) 100%)!important;
    animation:none!important;
  }
  #eglise .ln>span,
  #eglise .icw,
  #eglise .num,
  #eglise .lab {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
  #eglise .icw path,
  #eglise .icw circle {
    stroke-dashoffset:0!important;
    animation:none!important;
  }
  #eglise .img i,
  #eglise .img::before,
  #eglise .icw::before {
    animation:none!important;
  }
  #eglise .img i {
    transform:scale(1.05);
  }
}

/* =============================================================
   8. SERMONS / CMHTV  (#sermons-cmhtv)
   ============================================================= */

#sermons-cmhtv {
  --gold1:#d99a17;
  --gold2:#f3a50c;
  --c1:#5de0e6;
  --c2:#004aad;
  --line:#e0a62a;
}
#sermons-cmhtv .wrap {
  width:100%;
  max-width:1920px;
  container-type:inline-size;
}
#sermons-cmhtv .stage {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg);
}
#sermons-cmhtv .stage>* {
  position:absolute;
}
#sermons-cmhtv .bg {
  inset:0;
  width:100%;
  height:100%;
}
#sermons-cmhtv .bg path {
  fill:none;
  stroke:#5fb4e6;
  stroke-width:1.2;
  opacity:.28;
}
#sermons-cmhtv .ph {
  border-radius:17%;
  animation:se-in 1s cubic-bezier(.2,.8,.2,1) both;
}
#sermons-cmhtv .ph img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  animation:se-fl 7s ease-in-out infinite;
}
#sermons-cmhtv .a {
  left:2.5%;
  top:25.55%;
  width:20.73%;
  height:36.76%;
  animation-delay:.1s;
}
#sermons-cmhtv .b {
  left:27.5%;
  top:26.76%;
  width:21.67%;
  height:54.9%;
  animation-delay:.25s;
}
#sermons-cmhtv .b img {
  animation-delay:-2s;
  border-radius:15% / 10.5%;
}
#sermons-cmhtv .c {
  left:76.6%;
  top:62%;
  width:20.4%;
  height:21.7%;
  animation-delay:.4s;
}
#sermons-cmhtv .c img {
  animation-delay:-4s;
  border-radius:12% / 18%;
}
#sermons-cmhtv .play {
  position:absolute;
  left:23.1%;
  top:82.9%;
  width:52.8%;
  aspect-ratio:1;
  border-radius:50%;
  background:linear-gradient(90deg,var(--gold1),var(--gold2));
  display:grid;
  place-items:center;
  animation:se-pulse 2.6s ease-in-out infinite;
  z-index:2;
}
#sermons-cmhtv .play svg {
  width:36%;
  margin-left:6%;
}
#sermons-cmhtv .tile {
  position:absolute;
  left:100.7%;
  width:26.2%;
  aspect-ratio:1;
  border-radius:14%;
  background:linear-gradient(135deg,var(--gold1),var(--gold2));
  display:grid;
  place-items:center;
  z-index:2;
  animation:se-pop .6s cubic-bezier(.3,1.6,.5,1) both;
}
#sermons-cmhtv .t1 {
  top:10.8%;
  animation-delay:.9s;
}
#sermons-cmhtv .t2 {
  top:55%;
  animation-delay:1.05s;
}
#sermons-cmhtv .tile svg {
  width:56%;
}
#sermons-cmhtv .wave {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9%;
  width:56%;
  height:56%;
}
#sermons-cmhtv .wave i {
  display:block;
  flex:1;
  max-width:9%;
  height:100%;
  background:#1b2a8f;
  border-radius:9px;
  transform:scaleY(.3);
  animation:se-eq 1.1s ease-in-out infinite;
}
#sermons-cmhtv .outline {
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
#sermons-cmhtv .outline path {
  fill:none;
  stroke:var(--line);
  stroke-width:2;
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  animation:se-draw 1.8s .5s ease forwards;
}
#sermons-cmhtv .title {
  left:52.6%;
  top:47.5%;
  font-family:Anton,Impact,'Arial Narrow',sans-serif;
  font-size:6.2cqw;
  line-height:1.2;
  color:#fff;
  white-space:nowrap;
  letter-spacing:.01em;
  animation:se-rise .9s .7s cubic-bezier(.2,.8,.2,1) both;
}
#sermons-cmhtv .title::after {
  content:attr(data-t);
  position:absolute;
  left:0;
  top:0;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  opacity:0;
  transition:opacity .45s ease;
}
#sermons-cmhtv .stage.hl .title::after {
  opacity:1;
}
#sermons-cmhtv .desc {
  left:56.6%;
  top:62%;
  width:19%;
  font:300 1.05cqw/1.65 Poppins,Arial,sans-serif;
  color:#e6f3fa;
  border-left:3px solid var(--line);
  padding-left:1cqw;
  animation:se-rise .9s .95s cubic-bezier(.2,.8,.2,1) both;
}
#sermons-cmhtv .btns {
  left:2.97%;
  top:85.2%;
  width:32%;
  height:7.2%;
  display:flex;
  align-items:center;
  gap:7.5%;
  animation:se-rise .8s 1.1s both;
}
#sermons-cmhtv .btn {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9%;
  border-radius:1.3cqw;
  background:transparent;
  cursor:pointer;
  font:300 1.45cqw Poppins,Arial,sans-serif;
  text-decoration:none;
  transition:background .4s,color .4s,transform .3s,border-color .4s;
}
#sermons-cmhtv .btn:focus-visible {
  outline:3px solid #fff;
  outline-offset:3px;
}
#sermons-cmhtv .s {
  flex:275;
  border:2px solid #3aa7c9;
  color:#1b2a8f;
}
#sermons-cmhtv .s .wave {
  width:20%;
  height:56%;
  gap:5%;
}
#sermons-cmhtv .s .wave i {
  max-width:14%;
  background:#1b2a8f;
}
#sermons-cmhtv .s:hover,
#sermons-cmhtv .s:focus-visible,
#sermons-cmhtv .stage.hl .s {
  background:linear-gradient(135deg,var(--c1),var(--c2));
  color:#fff;
  border-color:transparent;
  transform:translateY(-3px);
}
#sermons-cmhtv .s:hover .wave i,
#sermons-cmhtv .s:focus-visible .wave i,
#sermons-cmhtv .stage.hl .s .wave i {
  background:#fff;
}
#sermons-cmhtv .w {
  flex:294;
  height:91%;
  border:2px solid var(--line);
  color:#fff;
}
#sermons-cmhtv .w:hover {
  transform:translateY(-3px);
  border-color:#fff;
}
#sermons-cmhtv .w b {
  width:13%;
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
}
#sermons-cmhtv .w b svg {
  width:42%;
  margin-left:12%;
}
@keyframes se-in {
  from {
    opacity:0;
    transform:scale(.85) translateY(4%);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes se-fl {
  50% {
    transform:translateY(-2.2%);
  }
}
@keyframes se-pulse {
  50% {
    transform:scale(1.08);
    box-shadow:0 0 0 1.4cqw rgba(243,165,12,.18);
  }
}
@keyframes se-pop {
  from {
    opacity:0;
    transform:scale(0);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes se-eq {
  50% {
    transform:scaleY(1);
  }
}
@keyframes se-draw {
  to {
    stroke-dashoffset:0;
  }
}
@keyframes se-rise {
  from {
    opacity:0;
    transform:translateY(30%);
  }
  to {
    opacity:1;
    transform:none;
  }
}
@media (max-width:1100px) {
  #sermons-cmhtv .stage {
    aspect-ratio:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"t t" "d d" "b a" "b c" "x x";
    gap:clamp(18px,4vw,36px);
    padding:clamp(32px,8vw,64px) max(5vw,calc((100% - 780px)/2)) clamp(40px,10vw,72px);
    overflow:hidden;
  }
  #sermons-cmhtv .stage>* {
    position:relative;
    left:auto;
    top:auto;
  }
  #sermons-cmhtv .outline,
  #sermons-cmhtv .tile {
    display:none;
  }
  #sermons-cmhtv .bg {
    position:absolute;
  }
  #sermons-cmhtv .title {
    grid-area:t;
    font-size:clamp(34px,9vw,68px);
    text-align:center;
    white-space:normal;
    line-height:1.05;
  }
  #sermons-cmhtv .title::after {
    width:100%;
  }
  #sermons-cmhtv .desc {
    grid-area:d;
    width:100%;
    max-width:60ch;
    justify-self:center;
    border-left:0;
    padding-left:0;
    text-align:center;
    font-size:clamp(14px,2.7vw,19px);
    line-height:1.7;
  }
  #sermons-cmhtv .a {
    grid-area:a;
    width:100%;
    height:auto;
    aspect-ratio:1.21;
  }
  #sermons-cmhtv .a img {
    object-position:top;
  }
  #sermons-cmhtv .b {
    grid-area:b;
    width:100%;
    height:auto;
    aspect-ratio:416/593;
    align-self:start;
  }
  #sermons-cmhtv .c {
    grid-area:c;
    width:100%;
    height:auto;
    aspect-ratio:537/322;
  }
  #sermons-cmhtv .play {
    left:auto;
    top:auto;
    position:absolute;
    right:-4%;
    bottom:-8%;
    width:34%;
  }
  #sermons-cmhtv .btns {
    grid-area:x;
    width:100%;
    height:auto;
    gap:4vw;
    justify-content:center;
  }
  #sermons-cmhtv .btn {
    font-size:clamp(14px,2.6vw,18px);
    height:clamp(48px,8vw,64px);
    border-radius:clamp(14px,2.4vw,20px);
    flex:1;
    max-width:260px;
  }
  #sermons-cmhtv .w {
    height:clamp(48px,8vw,64px);
  }
}
@media (max-width:480px) {
  #sermons-cmhtv .btn {
    font-size:4vw;
    height:13vw;
    border-radius:4vw;
  }
  #sermons-cmhtv .w {
    height:13vw;
  }
}
@media (prefers-reduced-motion:reduce) {
  #sermons-cmhtv *,
  #sermons-cmhtv *::before,
  #sermons-cmhtv *::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  #sermons-cmhtv .outline path {
    stroke-dashoffset:0;
  }
}
#sermons-cmhtv .wrap {
  margin-inline: auto;
}
/* L'animation d'entrée ne démarre que lorsque la section devient visible (classe .in ajoutée par main.js) */
#sermons-cmhtv .stage *,
#sermons-cmhtv .stage *::before,
#sermons-cmhtv .stage *::after {
  animation-play-state: paused;
}
#sermons-cmhtv.in .stage *,
#sermons-cmhtv.in .stage *::before,
#sermons-cmhtv.in .stage *::after {
  animation-play-state: running;
}

/* =============================================================
   9. ÉVÉNEMENTS  (#evenements + fenêtre #event-modal)
   ============================================================= */

#evenements {
  --bg:#024870;
  --cyan:#5de0e6;
  --blue:#004aad;
  --peach:#d59a70;
  --cream:#faf7f1;
  --ease:cubic-bezier(.2,.75,.2,1);
}
#evenements {
  background:var(--bg);
  color:#fff;
  font-family:Poppins,system-ui,sans-serif;
}
body.lock {
  overflow:hidden;
}
#evenements.events {
  position:relative;
  padding:clamp(40px,5vw,80px) clamp(14px,4vw,60px);
  isolation:isolate;
}
#evenements.events::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.14;
  pointer-events:none;
  mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#evenements .cal {
  container-type:inline-size;
  max-width:1160px;
  margin:0 auto;
}
#evenements .top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:2cqw;
}
#evenements .script {
  font-family:'Pinyon Script',cursive;
  font-size:clamp(2rem,7.2cqw,5.4rem);
  line-height:1;
  margin-left:24cqw;
  background:linear-gradient(100deg,#a47d2b,#ffa800);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  clip-path:inset(-10% 100% -20% 0);
  padding-right:.1em;
}
#evenements .month {
  font-family:Anton,Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  color:var(--cream);
  font-size:clamp(2.8rem,12.6cqw,9.8rem);
  line-height:1.05;
  letter-spacing:.005em;
  margin-top:.02em;
  display:flex;
  overflow:hidden;
  padding-bottom:.04em;
}
#evenements .month .ch {
  display:inline-block;
  transform:translateY(105%);
}
#evenements .side {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2cqw;
  padding-top:clamp(1.5rem,15cqw,12rem);
}
#evenements .year {
  font-family:Anton,Impact,sans-serif;
  font-size:clamp(1.5rem,4.3cqw,3.4rem);
  color:var(--cream);
  line-height:1;
  opacity:0;
}
#evenements .nav {
  display:flex;
  gap:10px;
  opacity:0;
}
#evenements .nav button {
  width:clamp(36px,4.4cqw,52px);
  aspect-ratio:1;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);
  background:transparent;
  color:#fff;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  place-items:center;
  transition:transform .3s var(--ease),opacity .3s;
}
#evenements .nav button::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  opacity:0;
  transition:opacity .35s;
}
#evenements .nav button:hover:not(:disabled)::before,
#evenements .nav button:focus-visible::before {
  opacity:1;
}
#evenements .nav button:hover:not(:disabled) {
  transform:scale(1.1);
}
#evenements .nav button:disabled {
  opacity:.3;
  cursor:default;
}
#evenements .nav button:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
#evenements .nav svg {
  width:45%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#evenements .grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2cqw;
  margin-top:clamp(18px,4cqw,40px);
  transition:opacity .22s,transform .22s;
}
#evenements .grid.out {
  opacity:0;
  transform:translateX(var(--dx,-30px));
}
#evenements .wd,
#evenements .d {
  border:1.5px solid rgba(255,255,255,.92);
  border-radius:clamp(10px,1.7cqw,20px);
  display:grid;
  place-items:center;
  font-size:clamp(.85rem,2.65cqw,2.2rem);
  font-weight:300;
  color:#fff;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
#evenements .wd {
  aspect-ratio:2/1;
  font-weight:400;
  letter-spacing:.04em;
  opacity:0;
  transform:scale(.7);
}
#evenements .d {
  aspect-ratio:1.66/1;
  background:transparent;
  font-family:inherit;
  opacity:0;
  transform:translateY(18px) scale(.9);
  transition:transform .35s var(--ease),box-shadow .35s,border-color .3s;
}
#evenements .d::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 100%);
  opacity:0;
  transition:opacity .4s;
}
#evenements .d:hover::before,
#evenements .d:focus-visible::before {
  opacity:1;
}
#evenements .d:hover,
#evenements .d:focus-visible {
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 10px 24px rgba(0,25,70,.45);
  border-color:#fff;
  outline:none;
}
#evenements .d.ev {
  background:linear-gradient(135deg,#a47d2b,#ffa800);
  color:#fff;
  font-weight:400;
  cursor:pointer;
}
#evenements .d.ev::after {
  content:"";
  position:absolute;
  inset:-1.5px;
  border-radius:inherit;
  border:2px solid rgba(255,255,255,.9);
  opacity:0;
  animation:ev-pulse 2.6s ease-out 1.8s infinite;
  pointer-events:none;
}
@keyframes ev-pulse {
  0% {
    transform:scale(1);
    opacity:.8;
  }
  100% {
    transform:scale(1.18);
    opacity:0;
  }
}
#evenements .d.void {
  visibility:hidden;
}
#evenements .d:not(.ev) {
  cursor:default;
}
#evenements .d.ev:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
#evenements.in .script {
  animation:ev-write 1.6s var(--ease) .2s forwards;
}
@keyframes ev-write {
  to {
    clip-path:inset(-10% -5% -20% 0);
  }
}
#evenements.in .month .ch {
  animation:ev-rise .9s var(--ease) forwards;
  animation-delay:calc(.35s + var(--i)*60ms);
}
@keyframes ev-rise {
  to {
    transform:none;
  }
}
#evenements.in .year {
  animation:ev-fade .9s var(--ease) .9s forwards;
}
#evenements.in .nav {
  animation:ev-fade .9s var(--ease) 1.1s forwards;
}
@keyframes ev-fade {
  to {
    opacity:1;
  }
}
#evenements.in .wd {
  animation:ev-pop .6s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(.8s + var(--i)*70ms);
}
@keyframes ev-pop {
  to {
    opacity:1;
    transform:none;
  }
}
#evenements.in .d {
  animation:ev-cell .65s var(--ease) forwards;
  animation-delay:calc(var(--base,1.2s) + var(--i)*35ms);
}
@keyframes ev-cell {
  to {
    opacity:1;
    transform:none;
  }
}
#evenements.in .grid.swap .wd {
  animation:none;
  opacity:1;
  transform:none;
}
#event-modal {
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:rgba(1,24,43,.82);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .35s;
}
#event-modal.show {
  display:flex;
}
#event-modal.vis {
  opacity:1;
}
#event-modal .panel {
  position:relative;
  width:min(100%,780px);
  max-height:100%;
  display:flex;
  flex-direction:column;
  background:#02385a;
  border:1.5px solid rgba(255,255,255,.3);
  border-radius:clamp(16px,2.4vw,26px);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,10,30,.55);
  transform:translateY(36px) scale(.92);
  opacity:0;
  transition:transform .55s var(--ease),opacity .4s;
}
#event-modal.vis .panel {
  transform:none;
  opacity:1;
}
#event-modal .media {
  background:#01263d;
  display:flex;
  justify-content:center;
  min-height:0;
  flex:1 1 auto;
  overflow:hidden;
}
#event-modal .media img {
  display:block;
  width:100%;
  max-height:68vh;
  object-fit:contain;
}
#event-modal .info {
  padding:clamp(16px,2.4vw,26px) clamp(18px,3vw,32px) clamp(20px,3vw,32px);
}
#event-modal .info time {
  display:block;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  font-weight:500;
}
#event-modal .info h3 {
  margin-top:.35em;
  font-family:Anton,Impact,sans-serif;
  font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  letter-spacing:.01em;
  line-height:1.1;
  text-transform:uppercase;
}
#event-modal .info p {
  margin-top:.6em;
  font-size:.95rem;
  line-height:1.65;
  color:#d8ecf3;
}
#event-modal .info p:empty {
  display:none;
}
#event-modal .close {
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);
  background:rgba(2,56,90,.7);
  color:#fff;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .3s var(--ease);
}
#event-modal .close::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  opacity:0;
  transition:opacity .35s;
}
#event-modal .close:hover::before,
#event-modal .close:focus-visible::before {
  opacity:1;
}
#event-modal .close:hover {
  transform:rotate(90deg);
}
#event-modal .close:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
#event-modal .close svg {
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  fill:none;
}
@media (max-width:560px) {
  #evenements .script {
    margin-left:8cqw;
  }
  #evenements .month {
    font-size:clamp(2.6rem,17cqw,5rem);
  }
  #evenements .side {
    padding-top:clamp(1rem,11cqw,3rem);
    gap:10px;
  }
  #evenements .grid {
    gap:1.6cqw;
  }
  #evenements .wd {
    aspect-ratio:1.15/1;
  }
  #evenements .d {
    aspect-ratio:1/1.1;
  }
  #evenements .wd,
  #evenements .d {
    font-size:clamp(.78rem,3.6cqw,1.1rem);
    border-radius:10px;
  }
}
@media (prefers-reduced-motion:reduce) {
  #evenements .script {
    clip-path:none!important;
  }
  #evenements .month .ch,
  #evenements .wd,
  #evenements .d,
  #evenements .year,
  #evenements .nav {
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
  #evenements .d.ev::after {
    display:none;
  }
}

/* =============================================================
   10. APPLICATIONS  (#applis)
   ============================================================= */

#applis {
  --bg:#024870;
  --gold1:#a47d2b;
  --gold2:#ffa800;
  --ease:cubic-bezier(.2,.75,.2,1);
}
#applis {
  background:var(--bg);
  color:#fff;
  font-family:Poppins,system-ui,sans-serif;
}
#applis.applis {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg);
}
#applis.applis>* {
  position:absolute;
}
#applis .wave {
  pointer-events:none;
  opacity:0;
}
#applis .wave path {
  fill:none;
  stroke:rgba(93,224,230,.4);
  stroke-width:.8;
  vector-effect:non-scaling-stroke;
}
#applis .w-top {
  right:0;
  top:0;
  width:31.5%;
  height:13.5%;
}
#applis .w-bot {
  left:36%;
  bottom:0;
  width:20%;
  height:14%;
}
#applis .left {
  left:8.2%;
  top:28%;
  width:52%;
}
#applis h2 {
  font-family:Anton,Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(2.6rem,7.7vw,9.5rem);
  line-height:1.05;
  letter-spacing:.005em;
}
#applis .mask {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.05em;
}
#applis .ch {
  display:inline-block;
  transform:translateY(105%);
}
#applis .sub {
  margin-top:clamp(10px,1.6vw,26px);
  font-size:clamp(.85rem,1.45vw,1.8rem);
  font-weight:400;
  opacity:0;
  transform:translateY(16px);
  filter:blur(5px);
}
#applis .cta {
  left:14.3%;
  top:54.5%;
  width:22.4%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#applis .click {
  font-family:Anton,Impact,sans-serif;
  text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,4.4rem);
  line-height:1.1;
  letter-spacing:.01em;
  background:linear-gradient(100deg,var(--gold1) 0%,var(--gold2) 50%,var(--gold1) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:0;
  transform:scale(.6);
}
#applis .badges {
  width:100%;
  margin-top:clamp(18px,3.4vw,52px);
  display:flex;
  flex-direction:column;
  gap:clamp(12px,1.4vw,26px);
}
#applis .badge {
  display:block;
  line-height:0;
  border-radius:clamp(8px,1.1vw,16px);
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateX(-60px);
  transition:transform .4s var(--ease),box-shadow .4s;
}
#applis .badge svg {
  width:100%;
  height:auto;
  display:block;
}
#applis .badge::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-60%;
  width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-20deg);
  pointer-events:none;
}
#applis .badge:hover,
#applis .badge:focus-visible {
  transform:translateY(-5px) scale(1.03)!important;
  box-shadow:0 14px 30px rgba(0,15,50,.5),0 0 0 2px rgba(93,224,230,.7);
  outline:none;
}
#applis .badge:hover::after {
  animation:ap-shine .9s var(--ease);
}
#applis .badge:active {
  transform:scale(.97)!important;
}
@keyframes ap-shine {
  to {
    left:130%;
  }
}
#applis .phones {
  inset:0;
  --pw:21.4vw;
  pointer-events:none;
}
#applis .pos {
  position:absolute;
  width:var(--pw);
  left:calc(var(--l) - var(--pw)/2);
  top:var(--t);
  transform-origin:50% 0;
  transform:rotate(-22.5deg);
  translate:calc(var(--mx,0)*var(--k2,10)*1px) calc(var(--my,0)*var(--k2,10)*.7px);
  transition:translate .8s var(--ease);
}
#applis .p1 {
  --l:64.4%;
  --t:47.2%;
  --k2:-10;
}
#applis .p2 {
  --l:87.1%;
  --t:29.1%;
  --k2:16;
}
#applis .fly {
  opacity:0;
}
#applis .phone {
  font-size:calc(var(--pw)*.01);
  width:100%;
  aspect-ratio:1/2.05;
  border:1.8em solid #f1f1f4;
  border-radius:19.6em;
  background:#000;
  padding:3.3em;
  box-shadow:0 0 0 .25em #9a9aa3,0 3em 6em rgba(0,10,35,.5);
  position:relative;
}
#applis .phone::before,
#applis .phone::after {
  content:"";
  position:absolute;
  left:-2.9em;
  width:.9em;
  background:#cfcfd6;
  border-radius:.5em;
}
#applis .phone::before {
  top:17%;
  height:5%;
}
#applis .phone::after {
  top:25%;
  height:9%;
  box-shadow:0 12em 0 #cfcfd6;
}
#applis .screen {
  position:relative;
  height:100%;
  border-radius:16em;
  overflow:hidden;
  background:#0a3f66;
}
#applis .screen img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0;
}
#applis .screen .tint {
  position:absolute;
  inset:0;
  background:linear-gradient(160deg,rgba(2,72,112,.35),rgba(0,74,173,.6));
}
#applis .screen .bv {
  position:absolute;
  left:7em;
  bottom:5em;
  font-family:Orbitron,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  color:#fff;
  line-height:1.05;
  white-space:nowrap;
}
#applis .bv b {
  display:block;
  font-size:14.5em;
  text-shadow:0 .1em .5em rgba(0,20,70,.4);
}
#applis .bv small {
  display:block;
  margin-top:2.2em;
  font-size:4.6em;
  letter-spacing:.5em;
  font-weight:800;
  opacity:.95;
}
#applis .screen::after {
  content:"";
  position:absolute;
  top:-10%;
  bottom:-10%;
  left:-70%;
  width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
}
#applis .notch {
  display:none;
  position:absolute;
  z-index:3;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:44%;
  height:5.4em;
  background:#000;
  border-radius:0 0 6.5em 6.5em;
}
#applis .notch::before {
  content:"";
  position:absolute;
  left:24%;
  top:2em;
  width:30%;
  height:1em;
  border-radius:1em;
  background:#2b2b30;
}
#applis .notch::after {
  content:"";
  position:absolute;
  right:15%;
  top:1.6em;
  width:1.7em;
  height:1.7em;
  border-radius:50%;
  background:#26262b;
}
#applis.in .wave {
  animation:ap-fadein 2s ease .6s forwards,ap-drift 10s ease-in-out 2.6s infinite alternate;
}
@keyframes ap-fadein {
  to {
    opacity:1;
  }
}
@keyframes ap-drift {
  from {
    transform:translate(0,0);
  }
  to {
    transform:translate(8px,-6px);
  }
}
#applis.in .ch {
  animation:ap-rise .95s var(--ease) forwards;
  animation-delay:calc(.2s + var(--i)*45ms);
}
@keyframes ap-rise {
  to {
    transform:none;
  }
}
#applis.in .sub {
  animation:ap-up 1s var(--ease) 1.1s forwards;
}
@keyframes ap-up {
  to {
    opacity:1;
    transform:none;
    filter:blur(0);
  }
}
#applis.in .click {
  animation:ap-pop .9s cubic-bezier(.34,1.56,.64,1) 1.5s forwards,ap-shimmer 4s linear 2.6s infinite;
}
@keyframes ap-pop {
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes ap-shimmer {
  to {
    background-position:-220% 0;
  }
}
#applis.in .badge {
  animation:ap-slidein 1s var(--ease) forwards;
}
#applis.in .badge:nth-child(1) {
  animation-delay:1.8s;
}
#applis.in .badge:nth-child(2) {
  animation-delay:2s;
}
@keyframes ap-slidein {
  to {
    opacity:1;
    transform:none;
  }
}
#applis.in .fly {
  animation:ap-fly 1.7s var(--ease) calc(.8s + var(--k,0)*.28s) forwards,ap-float 6s ease-in-out calc(2.8s + var(--k,0)*.28s) infinite alternate;
}
#applis .p2 .fly {
  --k:1;
}
@keyframes ap-fly {
  from {
    translate:20vw 28vw;
    opacity:0;
  }
  to {
    translate:0 0;
    opacity:1;
  }
}
@keyframes ap-float {
  from {
    transform:translateY(0);
  }
  to {
    transform:translateY(-1.3vw);
  }
}
#applis.in .screen img {
  animation:ap-kb 12s ease-in-out infinite alternate;
}
@keyframes ap-kb {
  to {
    transform:scale(1.07);
  }
}
#applis.in .screen::after {
  animation:ap-sheen 5.5s ease-in-out 3s infinite;
}
#applis.in .p2 .screen::after {
  animation-delay:4.4s;
}
@keyframes ap-sheen {
  0% {
    left:-70%;
  }
  45%,100% {
    left:140%;
  }
}
@media (max-width:900px) {
  #applis.applis {
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:clamp(70px,16vw,110px) 7% 0;
    gap:0;
  }
  #applis.applis>* {
    position:relative;
    left:auto;
    top:auto;
    right:auto;
    bottom:auto;
  }
  #applis .left {
    width:auto;
  }
  #applis h2 {
    font-size:clamp(2.8rem,14.5vw,6rem);
  }
  #applis .sub {
    font-size:clamp(.95rem,3.8vw,1.25rem);
  }
  #applis .cta {
    width:min(300px,80vw);
    margin-top:clamp(28px,8vw,46px);
  }
  #applis .click {
    font-size:clamp(1.8rem,8vw,2.8rem);
  }
  #applis .phones {
    position:relative;
    inset:auto;
    width:100%;
    height:clamp(300px,98vw,640px);
    margin-top:clamp(20px,6vw,40px);
    --pw:min(44vw,270px);
    overflow:hidden;
  }
  #applis .p1 {
    --l:36%;
    --t:30%;
  }
  #applis .p2 {
    --l:76%;
    --t:6%;
  }
  #applis .w-top {
    width:60%;
    height:90px;
  }
  #applis .w-bot {
    display:none;
  }
  @keyframes ap-float {
    from {
      transform:translateY(0);
    }
    to {
      transform:translateY(-8px);
    }
  }
  @keyframes ap-fly {
    from {
      translate:16vw 24vw;
      opacity:0;
    }
    to {
      translate:0 0;
      opacity:1;
    }
  }
}
@media (prefers-reduced-motion:reduce) {
  #applis .ch,
  #applis .sub,
  #applis .click,
  #applis .badge,
  #applis .fly,
  #applis .wave {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    translate:none!important;
  }
  #applis .screen img,
  #applis .screen::after {
    animation:none!important;
  }
}

/* =============================================================
   11. DONNER  (#donner)
   ============================================================= */

#donner {
  --bg:#024870;
  --cyan:#5de0e6;
  --blue:#004aad;
  --cream:#fff8e1;
  --ease:cubic-bezier(.2,.75,.2,1);
}
#donner {
  background:var(--bg);
  color:#fff;
  font-family:Poppins,system-ui,sans-serif;
}
#donner.don {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg);
}
#donner.don>* {
  position:absolute;
}
#donner .fs {
  font-size:clamp(.85rem,1.4vw,1.9rem);
  line-height:1.67;
  font-weight:400;
}
#donner .panel {
  --a:15.4%;
  --b:84.1%;
  left:20.05%;
  width:55.73%;
  top:0;
  height:100%;
}
#donner .panel>* {
  position:absolute;
}
#donner .rim,
#donner .photo {
  inset:0;
  clip-path:polygon(40% 0,60% 0,60% 100%,40% 100%);
}
#donner .rim {
  background:var(--cream);
}
#donner .photo {
  overflow:hidden;
  background:#2a140b;
}
#donner .photo i {
  position:absolute;
  inset:-6%;
  display:block;
  background:url("../public/assets/img/donner.jpg") 50% 70%/cover no-repeat,linear-gradient(165deg,#3b2012 0%,#6e3b1b 48%,#2a140b 100%);
  transform:scale(1.2);
  translate:calc(var(--mx,0)*-14px) calc(var(--my,0)*-9px);
  transition:translate .9s var(--ease);
}
#donner .photo::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 45%,rgba(0,0,0,.15));
}
#donner .photo::before {
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  left:-60%;
  width:35%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-14deg);
}
#donner h2 {
  left:13.1%;
  top:7.5%;
  font-family:Anton,Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(3.4rem,12.2vw,15rem);
  line-height:1.08;
  letter-spacing:.005em;
  color:#fff;
  text-shadow:0 .03em .3em rgba(0,0,0,.25);
}
#donner .sub {
  left:11%;
  top:33%;
  font-size:clamp(.9rem,1.4vw,1.9rem);
  line-height:1.5;
  white-space:nowrap;
}
#donner .cta {
  left:39.3%;
  top:87.2%;
  display:flex;
  align-items:center;
  gap:1.1vw;
}
#donner .wm {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.14em;
  margin-bottom:-.14em;
}
#donner .w {
  display:inline-block;
  transform:translateY(112%);
  opacity:0;
  filter:blur(4px);
}
#donner h2 .w {
  filter:none;
}
#donner .btn {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  place-items:center;
  width:clamp(150px,14.3vw,300px);
  height:clamp(46px,3.3vw,70px);
  border:3px solid transparent;
  border-radius:clamp(14px,1.15vw,24px);
  color:#fff;
  text-decoration:none;
  font-size:clamp(.95rem,1.35vw,1.8rem);
  font-weight:400;
  background:linear-gradient(rgba(2,60,95,.55),rgba(2,60,95,.55)) padding-box,linear-gradient(135deg,#3aa9c4,#0b5ab5) border-box;
  backdrop-filter:blur(3px);
  opacity:0;
  transform:scale(.6);
  transition:transform .35s var(--ease),box-shadow .35s;
}
#donner .btn::before {
  content:"";
  position:absolute;
  inset:-3px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 100%);
  opacity:0;
  transition:opacity .4s;
}
#donner .btn::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-60%;
  width:40%;
  z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
}
#donner .btn:hover,
#donner .btn:focus-visible {
  box-shadow:0 12px 28px rgba(0,74,173,.5);
  outline:none;
}
#donner .btn:hover::before,
#donner .btn:focus-visible::before {
  opacity:1;
}
#donner .btn:hover::after {
  animation:dn-shine .8s var(--ease);
}
@keyframes dn-shine {
  to {
    left:130%;
  }
}
#donner .arrow {
  position:relative;
  display:block;
  width:4.1vw;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan) 30%,var(--cyan));
  background-size:200% 100%;
  opacity:0;
  transform-origin:left;
  transform:scaleX(0);
  transition:width .5s var(--ease);
}
#donner .arrow::after {
  content:"";
  position:absolute;
  right:0;
  top:-3px;
  width:6px;
  height:6px;
  border:solid var(--cyan);
  border-width:1px 1px 0 0;
  transform:rotate(45deg) translate(-1px,0);
}
#donner .btn:hover+.arrow,
#donner .btn:focus-visible+.arrow {
  width:6vw;
}
#donner .t-left {
  left:1%;
  top:46.8%;
  width:23%;
}
#donner .t-tr {
  left:70.8%;
  top:1.2%;
  width:28.6%;
  letter-spacing:.27em;
}
#donner .t-br {
  left:75.6%;
  top:70.4%;
  width:22.6%;
}
#donner.in .rim {
  animation:dn-open 1.5s var(--ease) forwards;
}
#donner.in .photo {
  animation:dn-openp 1.5s var(--ease) .18s forwards;
}
@keyframes dn-open {
  to {
    clip-path:polygon(0 0,var(--b) 0,100% 100%,var(--a) 100%);
  }
}
@keyframes dn-openp {
  to {
    clip-path:polygon(7px 0,calc(var(--b) - 7px) 0,calc(100% - 7px) 100%,calc(var(--a) + 7px) 100%);
  }
}
#donner.in .photo i {
  animation:dn-zoom 3s var(--ease) .2s forwards,dn-kb 14s ease-in-out 3.2s infinite alternate;
}
@keyframes dn-zoom {
  to {
    transform:scale(1.06);
  }
}
@keyframes dn-kb {
  from {
    transform:scale(1.06);
  }
  to {
    transform:scale(1.13);
  }
}
#donner.in .photo::before {
  animation:dn-shine2 1.6s ease-out 1.5s forwards;
}
@keyframes dn-shine2 {
  to {
    left:140%;
  }
}
#donner.in .w {
  animation:dn-wup .85s var(--ease) forwards;
  animation-delay:calc(var(--b0,.8s) + var(--i)*45ms);
}
@keyframes dn-wup {
  to {
    transform:none;
    opacity:1;
    filter:blur(0);
  }
}
#donner .sub {
  --b0:1.5s;
}
#donner .t-left {
  --b0:1.7s;
}
#donner .t-tr {
  --b0:1.4s;
}
#donner .t-br {
  --b0:2s;
}
#donner.in h2 .w {
  animation-duration:1s;
  animation-delay:calc(.9s + var(--i)*70ms);
}
#donner.in .btn {
  animation:dn-pop .9s cubic-bezier(.34,1.56,.64,1) 2.3s forwards,dn-ping 3s ease-out 4s infinite;
}
@keyframes dn-pop {
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes dn-ping {
  0% {
    box-shadow:0 0 0 0 rgba(93,224,230,.55);
  }
  70%,100% {
    box-shadow:0 0 0 18px rgba(93,224,230,0);
  }
}
#donner.in .btn:hover {
  animation:none;
  opacity:1;
  transform:translateY(-3px) scale(1.04);
}
#donner.in .arrow {
  animation:dn-arr 1s var(--ease) 2.7s forwards,dn-flow 2.4s linear 3.7s infinite;
}
@keyframes dn-arr {
  to {
    opacity:1;
    transform:none;
  }
}
@keyframes dn-flow {
  to {
    background-position:-200% 0;
  }
}
@media (max-width:900px) {
  #donner.don {
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    padding-bottom:clamp(30px,8vw,60px);
  }
  #donner.don>* {
    position:relative;
    left:auto;
    top:auto;
    width:auto;
  }
  #donner .panel {
    --a:11%;
    --b:89%;
    width:100%;
    height:clamp(500px,128vw,800px);
    flex:none;
  }
  #donner .panel>* {
    position:absolute;
  }
  #donner .rim,
  #donner .photo {
    inset:0;
  }
  #donner h2 {
    left:0;
    right:0;
    top:9%;
    text-align:center;
    font-size:clamp(3.6rem,25vw,9rem);
  }
  #donner .sub {
    left:0;
    right:0;
    top:34%;
    text-align:center;
    white-space:normal;
    padding:0 14%;
    font-size:clamp(.95rem,3.8vw,1.35rem);
  }
  #donner .cta {
    left:0;
    right:0;
    top:auto;
    bottom:7%;
    justify-content:center;
    gap:12px;
  }
  #donner .btn {
    width:clamp(150px,44vw,220px);
    height:54px;
    font-size:1.05rem;
  }
  #donner .arrow {
    width:42px;
  }
  #donner .btn:hover+.arrow {
    width:60px;
  }
  #donner .fs {
    font-size:1rem;
    line-height:1.7;
  }
  #donner .t-left,
  #donner .t-tr,
  #donner .t-br {
    left:auto;
    top:auto;
    width:auto;
    padding:0 8%;
    margin-top:clamp(24px,6vw,40px);
  }
  #donner .t-tr {
    letter-spacing:.14em;
    font-size:.95rem;
  }
}
@media (prefers-reduced-motion:reduce) {
  #donner .rim {
    clip-path:polygon(0 0,var(--b) 0,100% 100%,var(--a) 100%)!important;
    animation:none!important;
  }
  #donner .photo {
    clip-path:polygon(7px 0,calc(var(--b) - 7px) 0,calc(100% - 7px) 100%,calc(var(--a) + 7px) 100%)!important;
    animation:none!important;
  }
  #donner .w,
  #donner .btn,
  #donner .arrow {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
  #donner .photo i,
  #donner .photo::before {
    animation:none!important;
  }
  #donner .photo i {
    transform:scale(1.06);
  }
}

/* =============================================================
   12. FOOTER  (#footer)
   ============================================================= */

#footer {
  --bg:#024870;
  --cyan:#5de0e6;
  --blue:#004aad;
  --ink:#14082e;
  --ease:cubic-bezier(.2,.75,.2,1);
}
#footer {
  background:var(--bg);
  font-family:Poppins,system-ui,sans-serif;
  color:var(--ink);
}
#footer .demo {
  min-height:130vh;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:1rem;
  opacity:.7;
}
#footer.footer {
  background:var(--bg);
  padding-top:clamp(36px,8.6vw,166px);
}
#footer .card {
  background:#fff;
  border-radius:clamp(26px,2.9vw,56px) clamp(26px,2.9vw,56px) 0 0;
  padding:clamp(40px,3.9vw,76px) 4.06vw clamp(28px,3.6vw,70px);
  transform:translateY(60px);
  opacity:0;
}
#footer .cols {
  display:grid;
  grid-template-columns:747fr 358fr 662fr;
  align-items:start;
}
#footer .col h4 {
  font-size:clamp(1rem,1.4vw,1.7rem);
  font-weight:700;
  line-height:1.3;
  letter-spacing:.005em;
  margin-bottom:clamp(18px,2vw,38px);
}
#footer .spacer {
  height:calc(clamp(1rem,1.4vw,1.7rem)*1.3 + clamp(18px,2vw,38px));
}
#footer .nl-txt {
  max-width:34.6vw;
  font-size:clamp(1.05rem,1.67vw,2.1rem);
  line-height:1.37;
  font-weight:400;
}
#footer .nl {
  position:relative;
  margin-top:clamp(20px,1.6vw,32px);
  width:min(100%,29.7vw);
  height:clamp(54px,4.7vw,92px);
  border:1.3px solid var(--bg);
  border-radius:999px;
  display:flex;
  align-items:center;
  background:#fff;
  transition:box-shadow .4s var(--ease),border-color .4s,transform .4s var(--ease);
}
#footer .nl:focus-within {
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(93,224,230,.4),0 10px 28px rgba(0,74,173,.18);
  transform:translateY(-2px);
}
#footer .nl input {
  flex:1;
  min-width:0;
  height:100%;
  border:0;
  background:transparent;
  outline:none;
  font:400 clamp(.95rem,1.55vw,1.9rem)/1 Poppins,sans-serif;
  color:var(--ink);
  padding:0 clamp(60px,5vw,100px) 0 2vw;
  border-radius:999px;
}
#footer .nl input::placeholder {
  color:#a4a5ad;
  transition:opacity .3s,transform .4s var(--ease);
}
#footer .nl input:focus::placeholder {
  opacity:.35;
  transform:translateX(10px);
}
#footer .nl button {
  position:absolute;
  right:clamp(4px,.4vw,8px);
  top:50%;
  margin-top:calc(clamp(42px,3.85vw,76px)/-2);
  width:clamp(42px,3.85vw,76px);
  aspect-ratio:1;
  border-radius:50%;
  border:0;
  background:var(--bg);
  color:#fff;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  transition:transform .35s var(--ease),box-shadow .35s;
}
#footer .nl button::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  opacity:0;
  transition:opacity .4s;
}
#footer .nl button:hover::before,
#footer .nl button:focus-visible::before {
  opacity:1;
}
#footer .nl button:hover,
#footer .nl button:focus-visible {
  transform:scale(1.08);
  box-shadow:0 8px 20px rgba(0,74,173,.4);
  outline:none;
}
#footer .nl button:active {
  transform:scale(.94);
}
#footer .nl svg {
  width:44%;
  height:44%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#footer .nl .arr {
  transition:transform .5s var(--ease);
}
#footer .nl button:hover .arr {
  animation:ft-nudge .9s var(--ease) infinite;
}
@keyframes ft-nudge {
  0% {
    transform:translateX(0);
  }
  45% {
    transform:translateX(150%);
    opacity:0;
  }
  46% {
    transform:translateX(-150%);
    opacity:0;
  }
  100% {
    transform:none;
    opacity:1;
  }
}
#footer .nl .ok {
  position:absolute;
  opacity:0;
  transform:scale(.4);
}
#footer .nl.done button {
  background:#0a8f5a;
}
#footer .nl.done .arr {
  opacity:0;
}
#footer .nl.done .ok {
  opacity:1;
  transform:none;
  transition:all .5s cubic-bezier(.34,1.56,.64,1) .1s;
}
#footer .nl.shake input {
  animation:ft-shake .5s;
}
@keyframes ft-shake {
  20%,60% {
    transform:translateX(-8px);
  }
  40%,80% {
    transform:translateX(8px);
  }
}
#footer .nl.busy button {
  pointer-events:none;
}
#footer .nl.busy .arr {
  animation:ft-spin .8s linear infinite;
}
@keyframes ft-spin {
  to {
    transform:rotate(360deg);
  }
}
#footer .msg {
  min-height:1.6em;
  margin-top:12px;
  font-size:clamp(.8rem,1vw,1.05rem);
  color:#0a7a4d;
  opacity:0;
  transform:translateY(6px);
  transition:all .4s var(--ease);
}
#footer .msg.show {
  opacity:1;
  transform:none;
}
#footer .msg.err {
  color:#b3261e;
}
#footer .links {
  list-style:none;
}
#footer .links li+li {
  margin-top:clamp(10px,1.05vw,20px);
}
#footer .links a {
  position:relative;
  display:inline-block;
  padding:.12em 0;
  color:var(--ink);
  text-decoration:none;
  font-size:clamp(1rem,1.5vw,1.85rem);
  font-weight:400;
  transition:transform .4s var(--ease),color .3s;
}
#footer .links a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.05em;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--ease);
}
#footer .links a:hover,
#footer .links a:focus-visible {
  transform:translateX(8px);
  color:var(--bg);
  outline:none;
}
#footer .links a:hover::after,
#footer .links a:focus-visible::after {
  transform:scaleX(1);
  transform-origin:left;
}
#footer .contact {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.05vw,20px);
}
#footer .contact li {
  display:flex;
  align-items:flex-start;
  gap:clamp(10px,.9vw,16px);
  font-size:clamp(.95rem,1.4vw,1.7rem);
  line-height:1.45;
  font-style:normal;
  opacity:0;
  transform:translateX(-18px);
}
#footer .contact svg {
  flex:none;
  width:1.35em;
  height:1.35em;
  margin-top:.08em;
  fill:none;
  stroke:var(--bg);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
#footer .contact li:hover svg {
  transform:scale(1.2) rotate(-8deg);
}
#footer .contact a {
  position:relative;
  display:inline-block;
  color:var(--ink);
  text-decoration:none;
  transition:transform .4s var(--ease),color .3s;
}
#footer .contact a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.05em;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--ease);
}
#footer .contact a:hover,
#footer .contact a:focus-visible {
  transform:translateX(6px);
  color:var(--bg);
  outline:none;
}
#footer .contact a:hover::after,
#footer .contact a:focus-visible::after {
  transform:scaleX(1);
  transform-origin:left;
}
#footer.in .contact li {
  animation:ft-li .7s var(--ease) forwards;
  animation-delay:calc(.9s + var(--i)*.12s);
}
#footer .col3 {
  position:relative;
}
#footer .addr {
  min-height:clamp(70px,9.2vw,180px);
  font-style:normal;
  font-size:clamp(1rem,1.5vw,1.85rem);
  line-height:1.6;
}
#footer .addr:empty {
  min-height:clamp(70px,9.2vw,180px);
}
#footer .soc {
  display:flex;
  gap:clamp(8px,.9vw,18px);
  list-style:none;
}
#footer .soc a {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  place-items:center;
  width:clamp(40px,2.95vw,58px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--bg);
  color:#fff;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .4s;
}
#footer .soc a::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  opacity:0;
  transition:opacity .4s;
}
#footer .soc a:hover::before,
#footer .soc a:focus-visible::before {
  opacity:1;
}
#footer .soc a:hover,
#footer .soc a:focus-visible {
  transform:translateY(-6px) rotate(-8deg) scale(1.1);
  box-shadow:0 12px 22px rgba(0,74,173,.4);
  outline:none;
}
#footer .soc svg {
  width:50%;
  height:50%;
  display:block;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
#footer .soc a:hover svg {
  transform:scale(1.15) rotate(8deg);
}
#footer .soc .ig {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
}
#footer .soc .fl {
  fill:currentColor;
}
#footer .top {
  position:absolute;
  right:0;
  bottom:calc(clamp(40px,3.95vw,76px)/-2 + clamp(40px,2.95vw,58px)/2);
  width:clamp(46px,3.9vw,76px);
  aspect-ratio:1;
  border-radius:50%;
  border:0;
  background:var(--bg);
  color:#fff;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  transition:transform .4s var(--ease),box-shadow .4s;
}
#footer .top::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
  opacity:0;
  transition:opacity .4s;
}
#footer .top:hover::before,
#footer .top:focus-visible::before {
  opacity:1;
}
#footer .top:hover,
#footer .top:focus-visible {
  transform:translateY(-6px) scale(1.08);
  box-shadow:0 14px 26px rgba(0,74,173,.4);
  outline:none;
}
#footer .top:active {
  transform:scale(.93);
}
#footer .top.go {
  box-shadow:0 0 0 0 rgba(93,224,230,.7);
  animation:ft-ring .9s ease-out;
}
#footer .top.go .up {
  animation:ft-fly .6s var(--ease);
}
@keyframes ft-ring {
  to {
    box-shadow:0 0 0 22px rgba(93,224,230,0);
  }
}
#footer .top svg {
  width:42%;
  height:42%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#footer .top .up {
  animation:ft-bob 2.2s ease-in-out infinite;
}
#footer .top:hover .up {
  animation:ft-fly .8s var(--ease) infinite;
}
@keyframes ft-bob {
  50% {
    transform:translateY(-3px);
  }
}
@keyframes ft-fly {
  0% {
    transform:none;
  }
  45% {
    transform:translateY(-220%);
    opacity:0;
  }
  46% {
    transform:translateY(220%);
    opacity:0;
  }
  100% {
    transform:none;
    opacity:1;
  }
}
#footer .line {
  margin-top:clamp(36px,6vw,116px);
  height:1px;
  background:#c9c9d1;
  transform:scaleX(0);
  transform-origin:left;
}
#footer .copy {
  margin-top:clamp(16px,1.9vw,36px);
  font-size:clamp(.82rem,1.5vw,1.8rem);
  font-weight:400;
}
#footer.in .card {
  animation:ft-cardin 1.2s var(--ease) forwards;
}
@keyframes ft-cardin {
  to {
    transform:none;
    opacity:1;
  }
}
#footer .rv {
  opacity:0;
  transform:translateY(26px);
  filter:blur(5px);
}
#footer.in .rv {
  animation:ft-up .9s var(--ease) forwards;
  animation-delay:calc(.35s + var(--d,0)*.11s);
}
@keyframes ft-up {
  to {
    opacity:1;
    transform:none;
    filter:blur(0);
  }
}
#footer .nl.rv {
  transform:translateY(26px) scaleX(.82);
  transform-origin:left;
}
#footer.in .nl.rv {
  animation:ft-formin 1.1s var(--ease) forwards;
  animation-delay:.7s;
}
@keyframes ft-formin {
  to {
    opacity:1;
    transform:none;
    filter:blur(0);
  }
}
#footer .nl button {
  scale:0;
}
#footer.in .nl button {
  animation:ft-btnin .8s cubic-bezier(.34,1.56,.64,1) 1.4s forwards;
}
@keyframes ft-btnin {
  to {
    scale:1;
  }
}
#footer .soc li {
  opacity:0;
  transform:translateY(24px) scale(.5);
}
#footer.in .soc li {
  animation:ft-iconin .7s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(1.1s + var(--i)*.09s);
}
@keyframes ft-iconin {
  to {
    opacity:1;
    transform:none;
  }
}
#footer .top {
  scale:0;
}
#footer.in .top {
  animation:ft-btnin .8s cubic-bezier(.34,1.56,.64,1) 1.7s forwards;
}
#footer.in .line {
  animation:ft-draw 1.4s var(--ease) 1.3s forwards;
}
@keyframes ft-draw {
  to {
    transform:scaleX(1);
  }
}
#footer .links li {
  opacity:0;
  transform:translateX(-18px);
}
#footer.in .links li {
  animation:ft-li .7s var(--ease) forwards;
  animation-delay:calc(.6s + var(--i)*.09s);
}
@keyframes ft-li {
  to {
    opacity:1;
    transform:none;
  }
}
@media (max-width:900px) {
  #footer .cols {
    grid-template-columns:1fr 1fr;
    gap:42px 28px;
  }
  #footer .col1 {
    grid-column:1/-1;
  }
  #footer .spacer {
    display:none;
  }
  #footer .nl-txt {
    max-width:560px;
    font-size:1.15rem;
  }
  #footer .nl {
    width:min(100%,560px);
    height:60px;
  }
  #footer .nl input {
    font-size:1rem;
    padding-left:22px;
    padding-right:72px;
  }
  #footer .nl button {
    width:48px;
    margin-top:-24px;
    right:6px;
  }
  #footer .col h4 {
    font-size:1.05rem;
  }
  #footer .links a {
    font-size:1.05rem;
  }
  #footer .addr {
    font-size:1.05rem;
  }
  #footer .soc a {
    width:44px;
  }
  #footer .top {
    width:52px;
    bottom:-4px;
  }
  #footer .copy {
    font-size:.9rem;
  }
}
@media (max-width:560px) {
  #footer .cols {
    grid-template-columns:1fr;
  }
  #footer .col3 {
    padding-right:0;
  }
  #footer .soc {
    gap:9px;
  }
  #footer .soc a {
    width:40px;
  }
  #footer .top {
    width:48px;
  }
}
@media (prefers-reduced-motion:reduce) {
  #footer .card,
  #footer .rv,
  #footer .soc li,
  #footer .links li,
  #footer .contact li {
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
  #footer .line {
    transform:none!important;
    animation:none!important;
  }
  #footer .nl button,
  #footer .top {
    scale:1!important;
    animation:none!important;
  }
  #footer .top .up,
  #footer .nl button:hover .arr,
  #footer .top:hover .up {
    animation:none;
  }
}

/* =============================================================
   13. TITRES DE SECTION, SÉPARATEURS & CORRECTIFS
   ============================================================= */


/* ---- Séparateurs animés entre sections : deux traits, l'un part de la gauche vers la droite,
        l'autre part de la droite vers la gauche, en boucle infinie ---- */
.divider{position:relative;height:4px;overflow:hidden;background:rgba(255,255,255,.1)}
.divider i{position:absolute;top:0;bottom:0;width:30%;border-radius:4px}
.divider i:nth-child(1){left:0;background:linear-gradient(90deg,transparent,#ffa800 70%,#a47d2b);animation:dv-run 4s ease-in-out infinite alternate}
.divider i:nth-child(2){right:0;background:linear-gradient(270deg,transparent,#5de0e6 70%,#004aad);animation:dv-run-rtl 4s ease-in-out infinite alternate}
@keyframes dv-run{from{transform:translateX(0)}to{transform:translateX(233.333%)}}
@keyframes dv-run-rtl{from{transform:translateX(0)}to{transform:translateX(-233.333%)}}

/* ---- Titres de section : police Anton (comme « À propos »), MAJUSCULES,
        couleur or = fond de la date active du calendrier ; descriptions en Poppins ---- */
.college-section h2 span,
#programmes .head h2,
#a-propos h2 .ch,
#eglise .title .ln>span,
#sermons-cmhtv .title,
#evenements .script,
#applis h2 .ch,
#donner h2 .w{
  background:linear-gradient(135deg,#a47d2b,#ffa800);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.college-section h2,#donner h2{text-shadow:none}
.college-section h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(40px,min(8vw,12vh),110px)}
.college-section{padding-top:clamp(48px,7vh,72px)}

#programmes .head p{font-family:Poppins,system-ui,sans-serif;font-weight:400}
#programmes .head h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,5.4vw,5.6rem);line-height:1.05;letter-spacing:.01em}

#eglise{font-family:Poppins,system-ui,sans-serif}
#eglise .title{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(2rem,5vw,6.2rem);line-height:1.1;letter-spacing:.01em}

#evenements .script{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,7.6cqw,5.8rem);line-height:1.05;letter-spacing:.01em;margin-left:0}
#evenements .month{font-family:Poppins,system-ui,sans-serif;font-weight:500;color:#fff;text-transform:uppercase;font-size:clamp(1.5rem,5.4cqw,4.2rem);letter-spacing:.08em;line-height:1.2;margin-top:.35em}
#evenements .side{padding-top:clamp(1rem,6cqw,4.5rem)}

/* ---- Hero, slide 03 : le rond et les photos remontent pour ne plus être coupés ---- */
@media (min-width:821px){
  .hero-slider .disc{top:27%;width:min(32.5%,72vh);width:min(32.5%,72dvh)}
  .hero-slider .cap.a{top:25%}
  .hero-slider .cap.b{top:13.5%}
}
@media (max-width:820px){
  .hero-slider .disc{top:40%;width:min(62%,44vh);width:min(62%,44dvh)}
  .hero-slider .cap.a{top:44%;height:30%}
  .hero-slider .cap.b{top:36%;height:38%}
}

/* ---- Donner collé au footer : plus aucun espace coloré entre les deux ---- */
#footer.footer{padding-top:0}
@media (max-width:900px){
  #eglise .title{font-size:clamp(2.2rem,8.4vw,4.2rem)}
  #donner.don{padding-bottom:0}
  #donner .t-br{padding-bottom:24px}
}
@media (prefers-reduced-motion:reduce){
  .divider i{animation:none}
  .divider i:nth-child(1){left:10%}
  .divider i:nth-child(2){right:10%}
}


/* =============================================================
   14. ACCESSIBILITÉ — mouvement réduit (hero / header / collège)
   ============================================================= */

@media (prefers-reduced-motion:reduce){
  .site-header,.brand,.nav li,.donate,.lang,.lang *{animation:none!important}
  .lang::after{display:none}
  html[lang="en"] body:not(.i18n-ready){opacity:1}
  *{transition-duration:.01s!important}
  .slide,.slide *{animation:none!important;transition:none!important}
  .hero-slider .photo,.hero-slider .disc,.hero-slider .cap,.hero-slider .line>span,.hero-slider .sub,.slide p,.hero-slider .btn{
    transform:none!important;opacity:1!important;
  }
  .hero-slider .tint{clip-path:none!important}
  .college-section *{animation-duration:.01s!important;animation-delay:0s!important}
}