/* Socle commun aux trois univers. Chaque page définit ses couleurs dans :root. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--texte-police,"Manrope"),system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.c{max-width:1180px;margin:0 auto;padding:0 20px}
.etroit{max-width:760px}

/* La touche manuscrite de la formation : Ms Madi sur les mots en italique des grands titres. */
.titre em,h1 em,h2 em{font-family:"Ms Madi",cursive;font-style:normal;font-weight:400;font-size:1.32em;line-height:.8;
  background:var(--rg-txt);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em;white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:700;font-size:.95rem;text-decoration:none;
  padding:.95em 1.6em;border-radius:999px;transition:transform .25s ease,box-shadow .25s ease,background .25s;cursor:pointer;border:0;font-family:inherit}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-plein{background:var(--metal);color:var(--on-metal,#3B2A26);box-shadow:0 10px 24px -12px rgba(140,80,70,.55),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-plein:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(140,80,70,.6),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-second{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-second:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-ink)}
.btn-rond{width:52px;height:52px;padding:0;background:var(--surface);color:var(--accent);box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
.rappel{font-size:.82rem;color:var(--ink-3);margin-top:.7rem}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Voies de contact */
.voies{display:grid;gap:12px}
.voie{display:flex;gap:16px;align-items:center;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 20px;transition:transform .25s,border-color .25s}
.voie:hover{transform:translateY(-2px);border-color:var(--line-2)}
.voie i{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.voie i svg{width:22px;height:22px}
.voie b{display:block;font-size:1rem}
.voie small{color:var(--ink-3);font-size:.86rem}
.voie.principale{background:var(--metal);border-color:transparent;color:#3B2A26}
.voie.principale i{background:rgba(255,255,255,.55);color:#82443F}
.voie.principale small{color:#6B5550}

/* Questions fréquentes */
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;font-weight:700;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A35E5A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--ink-2);max-width:62ch}

/* Vidéo à venir : n'apparaît que lorsqu'un identifiant est renseigné dans commun.js */
[data-video]{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;margin:0 0 1.6rem}
[data-video] iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.affiche{position:absolute;inset:0;background:center/cover;display:grid;place-items:center}
.affiche .lecture{width:76px;height:76px;border-radius:50%;border:0;background:var(--metal);color:#3B2A26;display:grid;place-items:center;cursor:pointer}
.affiche .lecture svg{width:30px;height:30px;margin-left:4px}

/* Barre d'action sur téléphone */
#barre-mobile{display:none}
@media (max-width:760px){
  #barre-mobile{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;transform:translateY(140%);transition:transform .35s ease}
  #barre-mobile.visible{transform:none}
  #barre-mobile .btn-plein{flex:1}
}

/* Apparitions au défilement */
.apparait{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.apparait.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.apparait{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

.mentions{font-size:.82rem;color:var(--ink-3);max-width:640px}
.mentions a{color:inherit}

/* ───── Mouvement doux (commun aux trois univers) ───── */

/* Fil de lecture en haut de l'écran */
#fil{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--metal);z-index:60;pointer-events:none}

/* Ouverture : les éléments arrivent l'un après l'autre */
@keyframes monte{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes tombe{from{opacity:0;translate:0 -40px}to{opacity:1;translate:0 0}}
.ouverture .sur,.ouverture .etiq,.ouverture .main,.ouverture h1,.ouverture .chapeau,.ouverture .actions,.ouverture .rappel{animation:monte 1s cubic-bezier(.2,.7,.2,1) both}
.ouverture .sur,.ouverture .etiq,.ouverture .main{animation-delay:.1s}
.ouverture h1{animation-delay:.25s}
.ouverture .chapeau{animation-delay:.5s}
.ouverture .actions{animation-delay:.7s}
.ouverture .rappel{animation-delay:.85s}
.collage > *{animation:tombe 1.1s cubic-bezier(.2,.8,.25,1.15) both}
.collage > :nth-child(1){animation-delay:1.1s}
.collage > :nth-child(2){animation-delay:.45s}
.collage > :nth-child(3){animation-delay:.65s}
.collage > :nth-child(4){animation-delay:.85s}

/* Le mot manuscrit des titres scintille doucement */
@keyframes reflet{to{background-position:200% 50%}}
.titre em,h1 em,h2 em{background-size:200% 100%;animation:reflet 6s linear infinite}

/* Bandeau qui défile */
.bandeau{overflow:hidden;padding:22px 0;background:var(--surface-2);border-block:1px solid var(--line)}
.piste{display:flex;width:max-content;animation:defile 38s linear infinite}
.bandeau:hover .piste{animation-play-state:paused}
.piste span{display:flex;align-items:center;gap:28px;padding-right:28px;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:clamp(1.15rem,2vw,1.5rem);white-space:nowrap;color:var(--ink-2)}
.piste span::after{content:"✦";font-style:normal;font-size:.8em;background:var(--rg-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes defile{to{transform:translateX(-50%)}}

/* Photos : léger zoom à l'apparition, parallaxe au défilement */
.apparait img:not([data-parallax]){transform:scale(1.07);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.apparait.vu img:not([data-parallax]){transform:none}
img[data-parallax]{scale:1.12;translate:0 var(--py,0px);will-change:translate}

/* Éléments qui flottent */
@keyframes flotte{50%{translate:0 -10px}}
.flotte{animation:flotte 6s ease-in-out infinite}
.flotte.lent{animation-duration:8s;animation-delay:-3s}

/* Bouton principal : un reflet passe de temps en temps */
.btn-plein{position:relative;overflow:hidden;isolation:isolate}
.btn-plein::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:balaye 4.5s ease-in-out infinite}
@keyframes balaye{0%,62%{left:-60%}100%{left:130%}}

/* Cartes : elles se soulèvent au survol */
.carte,.etiquette,.note-papier,.points li,.piliers div,.libre > div{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.carte:hover,.etiquette:hover,.points li:hover{transform:translateY(-5px)}
.note-papier:hover{transform:rotate(0) translateY(-6px) scale(1.03)}

@media (prefers-reduced-motion:reduce){
  .ouverture *,.collage > *,.piste,.flotte,.btn-plein::after,.titre em,h1 em,h2 em{animation:none!important}
  img[data-parallax]{translate:none}
  .apparait img{transform:none!important}
}