/* Le gabarit des pages intérieures : une colonne éditoriale, un visuel, le
   titre de page et le feuillage d'ambiance. */

.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;
}

/* 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}

/* ---------- Page large : le programme et les infos pratiques ---------- */
.page-single--wide{flex-direction:column;align-items:center;justify-content:flex-start;
  padding:8.4rem 0 2rem}
.page-single{overflow-x:clip}

@media (prefers-reduced-motion:reduce){
  .intro > *{animation:none}
}
@media (max-width:1400px) and (min-width:1081px){}
@media (max-width:1080px){
  .page-single--wide{padding:6rem 0 3rem}
}
@media (max-width:1024px){
  .page-single .page-grid{gap:2rem}
  .intro{max-width:100%}
}
@media (max-width:960px){
  .page-single{min-height:0;padding:2.15rem 0 .45rem}
  .page-single .page-grid{grid-template-columns:minmax(0,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}
}
@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))}
}
/* --- 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}
}
@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}
}
@media (min-width:1400px){
  .page-single .page-grid{width:min(100% - 6rem,var(--container));gap:6rem;
    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}
}
@media (min-width:1700px){
  .intro{max-width:56rem}
  .intro-lead{max-width:62ch}
}
@media (min-width:1400px) and (min-height:820px){
  .page-single--wide{padding:9.6rem 0 3rem}
}