/* Pages internes en un écran (édition, programme, contact) :
   colonne éditoriale à gauche, visuel à droite */

.page-single{
  display:flex;align-items:center;
  /* « safe » évite que le contenu centré remonte sous le header fixe quand la
     section est plus courte que son contenu : il retombe alors en haut */
  align-items:safe center;
  min-height:0;
  padding:calc(var(--nav-h) + 1.25rem) 0 1.1rem;
  background:
    radial-gradient(120% 90% at 8% 10%, color-mix(in oklab,var(--sand) 42%,transparent), transparent 62%);
}
.page-single .page-grid{
  width:min(100% - 2.5rem,var(--container));
  margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
}

/* COLONNE DE GAUCHE — bloc éditorial */
.intro{position:relative;max-width:36rem}

/* entrée animée de chaque bloc */
.intro > *{animation:intro-up .75s cubic-bezier(.2,.9,.25,1) both}
.intro > *:nth-child(1){animation-delay:.04s}
.intro > *:nth-child(2){animation-delay:.12s}
.intro > *:nth-child(3){animation-delay:.22s}
.intro > *:nth-child(4){animation-delay:.32s}
.intro > *:nth-child(5){animation-delay:.42s}
@keyframes intro-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.intro-lead{
  margin-top:1rem;max-width:42ch;font-size:clamp(.98rem,1.55vh,1.1rem);line-height:1.6;
  color:var(--ink);opacity:.9;
}

/* Feuillage d'ambiance, commun à toutes les pages. Le conteneur doit porter
   position:relative et rogner son débord horizontal. */
/* z-index négatif : le feuillage passe derrière tout le contenu, cartes blanches
   comme texte nu, mais reste au-dessus du fond de page. */
.deco{position:absolute;z-index:-1;opacity:.34;pointer-events:none}
/* largement débordants : seul un fragment entre dans le cadre, et jamais
   au-dessus du titre, qui occupe le coin haut gauche */
.deco--tr{right:-4rem;top:-2.5rem;width:clamp(130px,14vw,210px)}
.deco--bl{left:-4.5rem;bottom:-3rem;width:clamp(140px,15vw,225px)}
@media (max-width:960px){.deco{display:none}}
/* les sections accueillant le décor */
.page-single,.directory,.plan,.hero--single{position:relative;overflow-x:clip}

/* Titre de page : même taille et même écriture partout, sauf l'accueil qui garde
   son grand titre. Le mot mis en avant est surligné comme « SUCCESS » sur
   l'accueil ; le bloc plein porte son propre interligne et déborde à gauche de
   la valeur de son padding, pour rester aligné sur la marge. */
.pagetitle{margin:0;font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1.26;letter-spacing:-.01em;
  color:var(--bark)}
.pagetitle span{display:inline}
.pagetitle-mark{display:inline-block;line-height:1;
  background:var(--clay-soft,#fbd9b4);color:var(--bark);
  border-radius:.32em;padding:.08em .26em .1em;margin-left:-.26em}
/* en fin de ligne, le débord de gauche n'a pas lieu d'être */
.pagetitle-mark--fin{margin-left:0}

/* ---------------- Carrousel ---------------- */
.carousel{position:relative;width:100%;max-width:min(460px,64vh);justify-self:center}
/* L'image de la feuille recouvre l'emplacement ; le titre reste dessus pour
   rester lisible tant qu'aucune photo n'est fournie. */
.carousel-ph img{position:absolute;inset:0;object-fit:cover;border-radius:inherit}
.carousel-ph img[hidden]{display:none}

/* Emplacement photo : le titre s'affiche tant que la feuille ne donne pas
   de lien, et la photo vient le recouvrir ensuite. Le format reste le meme
   dans les deux cas pour que le carrousel ne saute pas. */
.carousel-ph{position:relative;aspect-ratio:3/2;display:grid;place-items:center;
  background:linear-gradient(140deg,color-mix(in oklab,var(--teal) 22%,var(--paper)),
    color-mix(in oklab,var(--lime) 26%,var(--paper)));
  color:var(--moss-deep);font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1rem,2.2vw,1.6rem);letter-spacing:.04em;text-align:center;padding:1rem}
.carousel-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carousel-ph img[hidden]{display:none}
.carousel-viewport{
  overflow:hidden;border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow-lg);background:var(--paper);cursor:grab;
  border:1px solid var(--line);
}
.carousel-viewport.is-dragging{cursor:grabbing}
.carousel-track{display:flex;transition:transform .6s cubic-bezier(.22,1,.28,1);will-change:transform}
.carousel-slide{flex:0 0 100%;position:relative;margin:0}
.carousel-cap{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.2rem .95rem;
  background:linear-gradient(to top,rgba(18,48,36,.92),rgba(18,48,36,.55) 45%,transparent);
  color:var(--paper);
}
.carousel-cap b{display:block;font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.03em;font-size:1.02rem;color:var(--sand)}
.carousel-cap span{display:block;margin-top:.25rem;font-size:.84rem;line-height:1.45;opacity:.9}

.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);color:var(--bark);box-shadow:var(--shadow-sm);
  border:1px solid var(--line);font-size:1.3rem;line-height:1;
  transition:transform .25s var(--ease),background .25s;z-index:3
}
.carousel-btn:hover{background:var(--sand);transform:translateY(-50%) scale(1.08)}
.carousel-btn--prev{left:-14px}
.carousel-btn--next{right:-14px}

.carousel-dots{display:flex;gap:.45rem;justify-content:center;margin-top:.9rem}
.carousel-dots button{
  width:9px;height:9px;border-radius:999px;background:color-mix(in oklab,var(--moss) 28%,transparent);
  transition:.3s var(--ease)
}
.carousel-dots button.is-active{width:26px;background:var(--clay)}

.carousel-count{
  position:absolute;top:.8rem;right:.8rem;z-index:3;
  background:rgba(18,48,36,.72);color:var(--sand);border-radius:999px;
  padding:.25rem .7rem;font-size:.72rem;font-weight:700;letter-spacing:.08em
}

/* ---------------- Encarts ---------------- */
.panel{
  background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  padding:1.5rem;box-shadow:var(--shadow-lg);
  animation:panel-in .8s .2s cubic-bezier(.2,.9,.25,1) both
}
@keyframes panel-in{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
.panel h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;color:var(--bark);margin:0 0 .9rem}

.panel .tabs{margin:0 0 1rem}
.panel .tab{padding:.5rem 1rem;font-size:.85rem}
.panel .points{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.panel .points li{display:flex;gap:.85rem;align-items:center;font-size:.98rem;line-height:1.45}
.panel .points .ico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--sand);color:var(--bark)}
.panel .points b{display:block;color:var(--moss-deep)}
.panel .points small{color:var(--muted);font-size:.86rem}

.page-single .form{display:grid;gap:.7rem}
.page-single .field input,.page-single .field textarea,.page-single .field select{padding:.7rem .85rem}
.page-single .field textarea{min-height:88px}

/* sélecteur de langue dans la nav */
.langsw{
  display:inline-flex;align-items:center;gap:.1rem;padding:.28rem;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
}
.langsw span{
  font-size:.7rem;font-weight:800;letter-spacing:.06em;color:var(--muted);
  padding:.28rem .55rem;border-radius:999px;transition:.25s var(--ease)
}
.langsw span.is-active{background:var(--teal-deep);color:var(--paper)}
.langsw:hover{border-color:color-mix(in oklab,var(--olive) 60%,transparent)}

/* Les deux parcours partagent la même carte blanche et verte ; le modificateur
   reste comme point d'accroche mais ne change plus rien. */

/* Page programme — trois colonnes */
.page-single--wide{flex-direction:column;align-items:center;justify-content:flex-start;padding:9.2rem 0 2rem}

@media (prefers-reduced-motion:reduce){
  .intro > *,
  .panel{animation:none}

}

@media (max-width:1080px){

  .page-single--wide{padding:6rem 0 3rem}

}
@media (max-width:960px){
  .page-single{min-height:0;padding:2.15rem 0 .45rem}
  .page-single .page-grid{grid-template-columns:1fr;gap:2.2rem}
  .page-single--wide{padding:2.15rem 0 .45rem}
  .intro{max-width:none}

  .intro-lead{margin-top:.9rem;font-size:.95rem;line-height:1.6;max-width:50ch}
  .carousel-btn--prev{left:6px}
  .carousel-btn--next{right:6px}

}

/* ÉDITION 2026 — compléments */
.page-single--ed2{overflow:hidden;position:relative}
.page-single--ed2::before,
.page-single--ed2::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;
}
.page-single--ed2::before{
  width:34vmax;height:34vmax;left:-12vmax;bottom:-16vmax;
  background:radial-gradient(circle at 40% 40%,color-mix(in oklab,var(--olive) 26%,transparent),transparent 68%);
  animation:ed2-float 16s ease-in-out infinite;
}
.page-single--ed2::after{
  width:24vmax;height:24vmax;right:-8vmax;top:-10vmax;
  background:radial-gradient(circle at 60% 60%,color-mix(in oklab,var(--clay) 22%,transparent),transparent 68%);
  animation:ed2-float 21s ease-in-out infinite reverse;
}
@keyframes ed2-float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3vmax,-2.5vmax,0) scale(1.08)}
}
.page-single--ed2 .page-grid{position:relative;z-index:1}

.intro--ed{position:relative}

/* les trois engagements */
.ed2-facts{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem}
.ed2-facts li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start;
  padding:.6rem .9rem;border-radius:14px;
  background:color-mix(in oklab,var(--paper) 78%,transparent);
  border:1px solid color-mix(in oklab,var(--moss-deep) 12%,transparent);
  opacity:0;animation:ed2-pop .6s var(--ease) forwards;
  transition:transform .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease);
}
.ed2-facts li:nth-child(1){animation-delay:.42s}
.ed2-facts li:nth-child(2){animation-delay:.54s}
.ed2-facts li:nth-child(3){animation-delay:.66s}
.ed2-facts li:hover{transform:translateX(4px);background:var(--paper);
  border-color:color-mix(in oklab,var(--moss-deep) 28%,transparent)}
.ed2-facts-n{
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.06em;
  color:var(--clay);padding-top:.15rem;
}
.ed2-facts b{display:block;font-size:.95rem;color:var(--bark);line-height:1.25}
.ed2-facts span{display:block;margin-top:.15rem;font-size:.82rem;line-height:1.45;color:var(--ink);opacity:.82}
@keyframes ed2-pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

/* pastille de date posée sur le carrousel */
.page-single--ed2 .carousel{animation:ed2-rise .9s .25s var(--ease) both}
@keyframes ed2-rise{from{opacity:0;transform:translateY(26px) rotate(1.6deg)}to{opacity:1;transform:none}}
.ed2-stamp{
  position:absolute;z-index:3;left:-16px;top:-18px;
  width:74px;height:74px;border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:var(--clay);color:var(--paper);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.6);
  transform:rotate(-9deg);animation:ed2-stampin .7s .8s var(--ease) both,ed2-bob 5.5s 1.6s ease-in-out infinite;
}
.ed2-stamp b{display:block;font-family:var(--font-display);font-size:1.6rem;line-height:1}
.ed2-stamp i{display:block;font-style:normal;font-size:.56rem;letter-spacing:.16em;font-weight:800;margin-top:.12rem}
@keyframes ed2-stampin{from{opacity:0;transform:rotate(-40deg) scale(.5)}to{opacity:1;transform:rotate(-9deg) scale(1)}}
@keyframes ed2-bob{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-7px)}}

@media (max-width:960px){

  .ed2-facts{gap:.75rem;margin-top:1.4rem}
  .ed2-facts li{padding:.95rem 1rem;gap:.8rem}
  .ed2-facts b{font-size:.95rem}
  .ed2-facts span{font-size:.86rem;line-height:1.55}
  .ed2-stamp{width:54px;height:54px;left:-8px;top:-10px}
  .ed2-stamp b{font-size:1.15rem}
  .ed2-stamp i{font-size:.46rem}

}
@media (prefers-reduced-motion:reduce){
  .page-single--ed2::before,.page-single--ed2::after,.ed2-facts li,.ed2-stamp,.page-single--ed2 .carousel{animation:none;opacity:1}

}

/* Contrôles du carrousel : posés sur le cadre, jamais rognés */
.carousel-btn{top:calc(50% - 14px)}
.page-single--ed2 .carousel{overflow:visible}
@media (max-width:1024px){
  .page-single .page-grid{gap:2rem}
  .intro{max-width:100%}
  .carousel{max-width:min(100%,400px)}

}
@media (max-width:960px){
  .page-single .page-grid{grid-template-columns:minmax(0,1fr)}
  .page-single--ed2 .carousel{max-width:min(100%,340px);margin-inline:auto}
  .is-landing .page-single--ed2{min-height:0;padding:6.4rem 0 2rem;align-items:flex-start}

}
@media (max-width:640px){
  .page-single{padding:5.2rem 0 1.5rem}
  .page-single--wide{padding:7.6rem 0 1.8rem}
  .page-single .page-grid{width:min(100% - 2.5rem,var(--container))}

  .ed2-stamp{width:46px;height:46px;left:-6px;top:-8px}
  .carousel-btn{width:36px;height:36px;font-size:1.1rem}
  .carousel-cap{padding:1.8rem .8rem .7rem}
  .carousel-cap b{font-size:.88rem}
  .carousel-cap span{font-size:.74rem}

}

.page-single--wide{padding-top:8.4rem}

/* --- aucun débordement latéral --- */
html,body{overflow-x:hidden}
.page-single{overflow-x:clip}

/* --- accueil sur petits écrans --- */
@media (max-width:960px){
  .is-landing .hero--single{min-height:0;padding:5.6rem 0 1rem;align-items:flex-start}
  .hero--single .hero-grid{gap:.4rem;grid-template-columns:minmax(0,1fr)}
  .hero--single .hero-title{font-size:clamp(2.6rem,13.5vw,4.4rem);margin-top:.3rem}
  .hero--single .hero-lead{font-size:.86rem;line-height:1.45;margin-top:.4rem;max-width:44ch}
  .hero--single .hero-cta{margin-top:.6rem;gap:.5rem}
  .hero--single .hero-cta .btn{padding:.6rem 1.05rem;font-size:.8rem}
  .hero--single .stats{margin-top:.4rem;gap:.42rem}
  .hero--single .stats li{padding:.42rem .6rem}
  .hero--single .stat-num{font-size:1.2rem}
  .hero--single .stat-lbl{font-size:.6rem}
  .hero--single .chip{font-size:.6rem;padding:.3rem .7rem;letter-spacing:.16em;margin-top:.2rem}
  .hero--single .hero-right{display:block;max-width:min(100%,68vw);margin:0 auto}

}

/* La liste se déroule en entier : la page défile, plus besoin de la plafonner
   avec sa propre barre. */

/* --- fenêtres peu hautes (portable, navigateur redimensionné) --- */
@media (min-width:961px) and (max-height:780px){
  .page-single{padding-top:5.2rem;padding-bottom:1.2rem}
  .page-single--wide{padding-top:6.9rem;padding-bottom:1rem}

  .page-single--ed2 .carousel{max-width:min(720px,86vh)}

}
@media (max-width:960px) and (max-height:820px){
  .hero--single .hero-right{max-width:min(100%,54vw)}

}
/* tablettes et grands téléphones : le logo se modère, la colonne est large */
@media (min-width:521px) and (max-width:960px){
  .hero--single .hero-right{max-width:min(100%,40vw)}
}
/* téléphones très courts : on resserre, mais le logo reste — sous 961px la
   page défile, quelques pixels de déroulé valent mieux que l'illustration en moins */
@media (max-width:960px) and (max-height:760px){
  .hero--single{padding-bottom:.6rem}
  .hero--single .hero-grid{gap:0}
  .hero--single .hero-right{max-width:min(100%,52vw)}

}

@media (min-width:961px) and (max-height:690px){
  .page-single{padding-top:4.4rem;padding-bottom:.4rem}
  .page-single--wide{padding-top:7rem;padding-bottom:1rem}

  .page-single--ed2 .carousel{max-width:min(460px,58vh)}

}

/* GRANDS ÉCRANS — occuper le navigateur plutôt qu'une colonne étroite */
@media (min-width:1400px){
  :root{--container:1640px}
  .container{width:min(100% - 6rem,var(--container))}

  .page-single .page-grid,
  .hero--single .hero-grid{width:min(100% - 6rem,var(--container));gap:6rem}
  .page-single .page-grid{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr)}
  .intro{max-width:46rem}

  .intro-lead{max-width:54ch;font-size:1.08rem;line-height:1.65}

  .hero--single .hero-title{font-size:clamp(3.4rem,5vw,6rem)}
  .hero--single .hero-lead{max-width:46ch;font-size:1.08rem}
  .hero--single .hero-right{max-width:min(100%,760px,80vh)}
  .carousel,.page-single--ed2 .carousel{max-width:min(1000px,96vh)}
  .ed2-facts b{font-size:1.12rem}
  .ed2-facts span{font-size:1.02rem}

  .stats li{padding:.9rem 1.15rem}
  .stat-num{font-size:1.85rem}

}
@media (min-width:1700px){
  :root{--container:1720px}
  .hero--single .hero-right{max-width:min(100%,860px,84vh)}
  .carousel,.page-single--ed2 .carousel{max-width:min(1120px,98vh)}
  .intro{max-width:56rem}
  .intro-lead{max-width:62ch}

}

@media (min-width:1400px){
  .nav-inner{width:min(100% - 6rem,var(--container))}
  .footer-bar{width:min(100% - 6rem,var(--container));max-width:none}

}

/* --- fenêtres étroites : garder les titres grands --- */
@media (min-width:961px) and (max-width:1399px){
  .hero--single .hero-title{font-size:clamp(2.6rem,5vw,4.2rem)}

}

/* --- très grands écrans : aérer la grille du programme --- */
@media (min-width:1400px) and (min-height:820px){
  .page-single--wide{padding:9.6rem 0 3rem}

}