/* =========================================================
   ASSOCIATION AWEN — ANIMATIONS ET HERO (octobre 2026)
   Chargé après style.css sur toutes les pages.
   Tout est désactivé si le visiteur a demandé moins d'animations
   dans les réglages de son appareil.
   ========================================================= */

/* Transitions douces entre les pages (navigateurs récents) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* Apparition de la page */
body { animation: awen-page .6s ease-out both; }
@keyframes awen-page { from { opacity: 0; } to { opacity: 1; } }

/* ---------- En-tête ---------- */
.entete { transition: background-color .3s, box-shadow .3s, border-color .3s; }
.entete.defile { background: rgba(244, 242, 248, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 30px rgba(42, 38, 56, .08); border-bottom-color: transparent; }
.entete .marque img { width: 48px; height: 48px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.entete .marque:hover img { transform: rotate(-6deg) scale(1.06); }
.entete .marque span { white-space: nowrap; }
.menu a { transition: background-color .25s, color .25s; }
@media (max-width: 1080px) {
  .menu.ouvert { animation: awen-menu .3s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes awen-menu { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .entete .marque { font-size: 19px; gap: 8px; }
  .entete .marque img { width: 40px; height: 40px; }
  .bouton-menu { padding: 8px 12px; }
}

/* ---------- Pied de page : logo du nain ---------- */
.pied .marque { align-items: center; }
.pied .marque img { width: 52px; height: 61px; object-fit: contain; }

/* ---------- Hero de l'accueil ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: 96px 0 88px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(55% 75% at 82% 45%, rgba(148, 112, 30, .14), transparent 62%),
    radial-gradient(45% 60% at 8% 12%, rgba(106, 91, 150, .14), transparent 60%),
    radial-gradient(40% 50% at 40% 100%, rgba(220, 212, 236, .6), transparent 70%); }
.hero h1 { font-size: 64px; }
.hero h1 em { background: linear-gradient(100deg, var(--violet) 0%, #8A6FC0 45%, var(--dore) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: awen-reflet 8s ease-in-out infinite alternate; }
@keyframes awen-reflet { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Entrée en cascade du texte du hero */
.hero .pile > * { animation: awen-monte .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero .pile > *:nth-child(1) { animation-delay: .10s; }
.hero .pile > *:nth-child(2) { animation-delay: .22s; }
.hero .pile > *:nth-child(3) { animation-delay: .36s; }
.hero .pile > *:nth-child(4) { animation-delay: .50s; }
.hero .pile > *:nth-child(5) { animation-delay: .62s; }
@keyframes awen-monte { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Le logo dans l'arche : entrée, halo doré qui tourne, léger flottement */
.hero-visuel { isolation: isolate; animation: awen-arche 1.1s cubic-bezier(.2, .8, .2, 1) .2s both; }
@keyframes awen-arche { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
.hero-visuel::before { content: ""; position: absolute; inset: -12% -14%; z-index: -1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 15%, rgba(148, 112, 30, .35) 25%, transparent 40% 60%, rgba(106, 91, 150, .3) 72%, transparent 85%);
  filter: blur(38px); animation: awen-tourne 22s linear infinite; }
@keyframes awen-tourne { to { transform: rotate(360deg); } }
.hero-visuel .arche { box-shadow: 0 30px 60px -20px rgba(79, 66, 117, .28), 0 0 0 8px rgba(255, 255, 255, .5); }
.hero-visuel .arche img { animation: awen-flotte 7s ease-in-out infinite; }
@keyframes awen-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Paillettes dorées ajoutées par js/animations.js */
.paillettes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.paillettes span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #E9CF8A 0%, rgba(148, 112, 30, .6) 45%, transparent 70%); opacity: 0; animation: awen-paillette 7s ease-in-out infinite; }
@keyframes awen-paillette { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 30% { opacity: .9; } 70% { opacity: .6; } 100% { opacity: 0; transform: translateY(-60px) scale(1.1); } }

/* ---------- Apparition au défilement ---------- */
.anim .revele { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--delai, 0ms); }
.anim .revele.visible { opacity: 1; transform: none; }

/* ---------- Survols plus vivants ---------- */
.bouton { transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
.bouton:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(79, 66, 117, .55); }
.bouton:active { transform: translateY(0); }
.carte-ther, .evt-mini, .temoignages figure, .grille-3 > .carte { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.carte-ther:hover, .evt-mini:hover, .temoignages figure:hover, .grille-3 > .carte:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(79, 66, 117, .45); border-color: var(--lavande-soutenu); }
.photo img, .portrait img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.photo:hover img { transform: scale(1.05); }
.lien-souligne { text-decoration-thickness: 1px; transition: text-decoration-thickness .2s, color .2s; }
.lien-souligne:hover { text-decoration-thickness: 2px; }
.bandeau { background: linear-gradient(120deg, var(--violet-fonce), var(--violet) 55%, #7F6AB0); background-size: 160% 160%; animation: awen-bandeau 12s ease-in-out infinite alternate; }
@keyframes awen-bandeau { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .hero { padding: 56px 0 64px; }
  .hero h1 { font-size: 42px; }
}

/* ---------- Moins d'animations demandé ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim .revele { opacity: 1; transform: none; }
  .paillettes { display: none; }
  .hero-visuel::before { animation: none; }
}