/* ============================================================
   PAGE À PROPOS — surcouche sur le système de l'accueil validé
   Menu et footer repris à l'identique de l'accueil.
   Manifeste, étapes numérotées, cards, témoignages et CTA sont
   les modules déjà validés sur les pages précédentes.
   ============================================================ */

/* --- NAVBAR page interne : crème rosé fixe, dimensions de l'accueil --- */
.nav{
  background:rgba(245,237,232,.94);
  backdrop-filter:blur(14px) saturate(1.05);
  color:var(--encre);
  border-bottom:1px solid rgba(201,164,90,.55);
  animation:none;
}
@supports (animation-timeline: scroll()){
  .nav{
    background:rgba(245,237,232,.94); color:var(--encre);
    border-bottom-color:rgba(201,164,90,.55); animation:none;
  }
}
.nav-links a.is-active{color:var(--or); background-size:100% 1px; font-weight:500}

.sec-head--center .chip,.manifeste .chip,.espace .chip{align-self:center}
/* la citation de cette page est plus longue que celle de l'accueil :
   on l'élargit et on descend d'un cran en taille pour rester sous 4 lignes */
.manifeste blockquote{max-width:22ch}
.manifeste .quote-big{font-size:clamp(27px,3.7vw,43px)}
.manifeste .chip{align-self:center}

/* ============================================================
   2 — HERO À PROPOS : split pleine hauteur
   ============================================================ */
.hero-ap{background:var(--mauve-deep); color:var(--creme); overflow:hidden; padding:0; position:relative}
.hero-ap .blob-1{width:560px; height:560px; top:-22%; right:-12%; background:rgba(196,168,212,.55); z-index:1}
.hero-ap .blob-2{width:430px; height:430px; bottom:-24%; right:16%; background:rgba(201,164,90,.35); z-index:1}
.hero-ap-grid{display:grid; grid-template-columns:.92fr 1.08fr; align-items:stretch;
  min-height:min(86svh,760px); position:relative; z-index:2}
.hero-ap-media{position:relative; z-index:1}
.hero-ap-media .ph{
  position:absolute; inset:0;
  background-image:linear-gradient(150deg,rgba(201,164,90,.22),rgba(107,91,123,.28)),
    url("https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=1000&q=80");
  background-size:cover; background-position:center 24%;
  border-radius:0 220px 220px 0;
}
.hero-ap-media::after{content:""; position:absolute; inset:0; z-index:2; border-radius:0 220px 220px 0;
  background:linear-gradient(270deg,rgba(107,91,123,.55),transparent 40%)}
.hero-ap-txt{
  padding:160px max(32px,calc((100vw - var(--wrap)) / 2)) 110px 76px;
  display:flex; flex-direction:column; justify-content:center; position:relative; z-index:3;
}
.hero-ap-txt .chip{align-self:flex-start}
.hero-ap h1{
  color:var(--creme); font-style:italic; font-weight:600;
  font-size:clamp(30px,4.2vw,50px); letter-spacing:-.03em; line-height:1.06; max-width:15ch;
}
.hero-ap h1 .hl{color:var(--or-clair)}
.hero-ap .lead{color:rgba(245,237,232,.8); margin-top:22px; max-width:46ch; line-height:1.7}
.hero-ap-foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:34px}
.hero-ap-foot .trust{height:44px}
.hero-ap-foot .btn{height:52px; padding:0 8px 0 26px}
.hero-ap-moon{position:absolute; right:44px; bottom:38px; z-index:3; width:96px; height:96px;
  color:var(--or-clair); opacity:.35;
  animation:moonFloat 20s ease-in-out infinite alternate}

/* ============================================================
   4 & 7 — MODULE SPLIT (histoire / espace)
   Un seul composant, deux déclinaisons par modificateur :
   .split--rev (photo à gauche) / .split--card (texte dans une card)
   ============================================================ */
.split{overflow:hidden; padding:104px 0}
.split-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center}
.split--rev .split-media{order:2}
.split--rev .split-body{order:1}
.split-media{position:relative; z-index:1}
.split-photo{
  position:relative; z-index:2; aspect-ratio:4/3; width:100%;
  background-size:cover; background-position:center;
  border-radius:24px 150px 24px 150px;
  box-shadow:0 38px 76px -46px rgba(74,55,40,.8);
}
.split--rev .split-photo{border-radius:150px 24px 150px 24px}

/* ----------------------------------------------------------------- GALERIE
   Plusieurs photos dans un seul cadre, demandée le 22 septembre sur le bloc
   « L'Espace ». Elle ne s'affiche que si la seconde photo est remplie ; sinon
   le bloc reste exactement ce qu'il était, un cadre et une photo.

   AUCUN JAVASCRIPT. Le thème n'en charge pas côté public sur les cinq pages,
   et ce n'est pas un bandeau de photos qui va ouvrir la porte. Deux boutons
   radio cachés portent l'état, les pastilles sont leurs étiquettes, et le CSS
   traduit l'état en glissement de la piste.

   Ce que cette technique NE FAIT PAS, et qu'il faut savoir : il n'y a pas de
   glissement au doigt. On change de photo en touchant une pastille. Le
   glissement natif demanderait un conteneur qui défile, et des pastilles qui
   commandent un conteneur qui défile demandent du JavaScript.

   Deux photos, pas plus : la piste fait 200 % de large et chaque photo 50 %.
   Une troisième photo demande de reprendre ces deux valeurs, et un champ de
   plus dans l'administration. */
.galerie{position:relative}
.galerie-choix{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.galerie-cadre{
  position:relative; z-index:2; overflow:hidden;
  border-radius:24px 150px 24px 150px;
  box-shadow:0 38px 76px -46px rgba(74,55,40,.8);
}
.split--rev .galerie-cadre{border-radius:150px 24px 150px 24px}
.galerie-piste{
  display:flex; width:200%;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.galerie-piste > .split-photo{
  flex:0 0 50%; width:auto; border-radius:0; box-shadow:none;
}
#esp-1:checked ~ .galerie-cadre .galerie-piste{transform:translateX(0)}
#esp-2:checked ~ .galerie-cadre .galerie-piste{transform:translateX(-50%)}

.galerie-points{display:flex; justify-content:center; gap:12px; margin-top:22px}
.galerie-points label{
  display:block; width:11px; height:11px; border-radius:50%; cursor:pointer;
  background:rgba(74,55,40,.26); transition:background .25s, transform .25s;
}
.galerie-points label:hover{background:var(--mauve); transform:scale(1.2)}
#esp-1:checked ~ .galerie-points label[for="esp-1"],
#esp-2:checked ~ .galerie-points label[for="esp-2"]{background:var(--encre); transform:scale(1.15)}
.galerie-choix:focus-visible ~ .galerie-points label[for="esp-1"],
.galerie-choix:focus-visible ~ .galerie-points label[for="esp-2"]{outline:2px solid var(--encre); outline-offset:3px}

.hors-ecran{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){ .galerie-piste{transition:none} }
.split-body{position:relative; z-index:3}
.split--card .split-body{
  background:var(--creme-hi); border:1px solid rgba(201,164,90,.4);
  border-radius:24px; padding:44px 42px 40px;
  box-shadow:0 30px 64px -40px rgba(107,91,123,.55);
}
.split--card .split-grid{gap:56px}
.split h2{font-size:clamp(28px,3.4vw,42px); font-style:italic; letter-spacing:-.025em}
.split-sub{margin-top:14px; font-size:clamp(16px,1.7vw,18px); color:var(--encre-doux); line-height:1.7; max-width:52ch}
.split-txt{margin-top:22px; font-size:17px; line-height:1.78; color:var(--encre-doux); max-width:56ch}
.split-foot{margin-top:32px}

/* placeholder à remplir avant mise en ligne */
.ph-note{
  margin-top:24px; padding:22px 26px;
  border-left:2px solid rgba(201,164,90,.65);
  background:rgba(196,168,212,.14); border-radius:0 16px 16px 0;
  font-size:15.5px; line-height:1.7; font-style:italic; color:var(--encre-doux); max-width:56ch;
}
.ph-note b{display:block; font-style:normal; font-weight:600; color:var(--encre); margin-bottom:8px; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase}
.ph-note ul{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.ph-note li{padding-left:16px; position:relative}
.ph-note li::before{content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--or)}

.histoire{background:var(--creme)}
.histoire .lotus-wm{width:min(32vw,380px); left:-6%; bottom:-14%; opacity:.09}
.espace{background:var(--rose)}
.espace .lotus-wm{width:min(30vw,360px); left:-5%; bottom:-12%; color:var(--creme); opacity:.32}
.espace-list{display:flex; flex-direction:column; gap:13px; margin:26px 0 32px}
.espace-list li{display:flex; align-items:flex-start; gap:13px; font-size:16.5px; line-height:1.5; color:var(--encre)}
.espace-list svg{width:19px; height:19px; color:var(--mauve); flex:none; margin-top:3px}

/* ============================================================
   5 — LES VALEURS (3 cards)
   ============================================================ */
.valeurs{background:var(--mauve-pale); overflow:hidden; padding:104px 0}
.valeurs .blob-1{width:460px; height:460px; top:-22%; right:-8%; background:rgba(232,180,200,.45)}
.valeurs .blob-2{width:400px; height:400px; bottom:-24%; left:-7%; background:rgba(201,164,90,.28)}
.val-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.val-card{
  position:relative; overflow:hidden;
  background:var(--creme-hi); border:1px solid rgba(201,164,90,.4);
  border-radius:16px; padding:34px 30px 32px;
  box-shadow:var(--shadow-card);
  transition:transform .55s cubic-bezier(.2,.9,.25,1), box-shadow .55s ease, border-color .5s ease;
}
.val-card::after{content:""; position:absolute; inset:auto -30% -60% auto; width:210px; height:210px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(196,168,212,.5),transparent); filter:blur(30px); opacity:0; transition:opacity .6s ease}
.val-card:hover{transform:translateY(-8px); border-color:rgba(201,164,90,.8); box-shadow:0 34px 60px -34px rgba(107,91,123,.6)}
.val-card:hover::after{opacity:1}
.val-card svg{width:34px; height:34px; color:var(--mauve); margin-bottom:20px}
.val-card h3{font-size:24px; margin-bottom:12px; position:relative; z-index:2}
.val-card p{font-size:16px; line-height:1.65; color:var(--encre-doux); position:relative; z-index:2}

/* ============================================================
   6 — FORMATIONS (module « étapes » de l'accueil)
   ============================================================ */
.formations{background:var(--creme); overflow:hidden; padding:104px 0}
.formations .lotus-wm{width:min(34vw,400px); right:-7%; top:12%; opacity:.09}
.formations .step-num{font-size:clamp(46px,5.4vw,64px)}
.form-detail{margin-top:8px; font-size:15.5px; letter-spacing:.03em; color:rgba(74,55,40,.55)}

/* ============================================================
   RESPONSIVE — page À propos
   ============================================================ */
@media (max-width:1080px){
  .split-grid{gap:44px}
  .split--card .split-body{padding:36px 32px 34px}
  .val-grid{grid-template-columns:1fr; gap:16px}
  .hero-ap-txt{padding-left:52px}
}

@media (max-width:768px){
  .hero-ap-grid{grid-template-columns:1fr; min-height:0}
  .hero-ap-media{order:1; height:380px}
  .hero-ap-media .ph,.hero-ap-media::after{border-radius:0 0 120px 120px}
  .hero-ap-media::after{background:linear-gradient(0deg,rgba(107,91,123,.6),transparent 45%)}
  .hero-ap-txt{order:2; padding:52px 22px 66px}
  .hero-ap h1{max-width:none; font-size:clamp(28px,7.6vw,38px)}
  .hero-ap-foot{gap:14px; margin-top:28px}
  .hero-ap-foot .btn{width:100%; justify-content:space-between}
  .hero-ap-moon{right:18px; bottom:auto; top:340px; width:62px; height:62px}

  .split,.valeurs,.formations{padding:64px 0}
  .split-grid{grid-template-columns:1fr; gap:0}
  .split--rev .split-media{order:1}
  .split--rev .split-body{order:2}
  .split-photo,.split--rev .split-photo{border-radius:20px 90px 20px 90px; aspect-ratio:3/2}
  .split-body{margin-top:32px}
  .split--card .split-body{margin:-30px 12px 0; padding:32px 26px 30px}
  .split-txt{font-size:16px}
  .espace-list li{font-size:15.5px}
  .split-foot .btn{width:100%; justify-content:space-between}

  .val-card{padding:28px 24px 26px}
  .val-card h3{font-size:22px}
  .ph-note{padding:18px 20px; font-size:15px}
}