/* Bloc acc-rosace : ouverture de l'accueil */
.acc-rosace {
  --open: 0;
  --S: 600px;  /* côté de la scène = 2 × rayon final (piloté par view.js) */
  --D: 150px;  /* diamètre d'une porte */
  --H: 120px;  /* diamètre du cœur */
  position: relative;
  /* Fond en dégradés doux aux couleurs du logo : ciel et violet derrière la rosace,
     rose et orange en bas à gauche, sur la base crème (retour de Brice du 09/10). */
  background:
    radial-gradient(38vmax 32vmax at 74% 34%, color-mix(in oklab, var(--sky) 10%, transparent), transparent 70%),
    radial-gradient(30vmax 26vmax at 86% 72%, color-mix(in oklab, var(--violet) 8%, transparent), transparent 70%),
    radial-gradient(34vmax 26vmax at 6% 96%, color-mix(in oklab, var(--pink) 8%, transparent), transparent 70%),
    radial-gradient(26vmax 22vmax at 30% 104%, color-mix(in oklab, var(--orange) 7%, transparent), transparent 70%),
    var(--paper);
}
/* Grain papier, statique, par-dessus les dégradés et sous le contenu. */
.acc-rosace::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 220px; opacity: 0.06; mix-blend-mode: multiply;
}
.acc-rosace__pin {
  /* Le texte est dans le flux, centré verticalement sous l'en-tête : avec un texte agrandi
     (module d'accessibilité), le bloc grandit au lieu de passer sous l'en-tête. */
  position: relative; display: grid; align-items: center; box-sizing: border-box;
  min-height: clamp(620px, calc(100vh - 90px), 820px); padding-block: calc(var(--header-h) + 24px) 32px; overflow: hidden;
}

/* Texte d'accroche */
.acc-rosace__copie {
  position: relative; z-index: 3;
  margin-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  width: min(46vw, 760px);
}
.acc-rosace__sur { margin-bottom: var(--space-s); }
.acc-rosace__titre {
  font-size: clamp(2.4rem, 1.5rem + 2.4vw, 4rem);
  line-height: 0.98; letter-spacing: -0.015em;
}
.acc-rosace__titre em { font-style: normal; }
.acc-rosace__titre .k-1 { color: color-mix(in oklab, var(--orange) 82%, var(--navy)); }
.acc-rosace__titre .k-2 { color: color-mix(in oklab, var(--sky) 72%, var(--navy)); }
.acc-rosace__titre .k-3 { color: var(--violet); }
.acc-rosace__vivant { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: var(--space-s); padding: 0.35rem 0.9rem 0.35rem 0.7rem; border-radius: var(--radius-pill); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--step--1); font-weight: 600; }
.acc-rosace__vivant b { font-family: var(--font-display); font-size: 1.25em; font-weight: 800; color: var(--accent-ink); }
.acc-rosace__pouls { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 color-mix(in oklab, var(--teal) 60%, transparent); animation: acc-rosace-pouls 1.8s ease-out infinite; }
@keyframes acc-rosace-pouls { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.acc-rosace__texte { margin-top: var(--space-s); font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 40ch; }
.acc-rosace__cta { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }
.acc-rosace__cta .btn { font-size: var(--step-0); min-height: 44px; }

/* Recherche de formation, visible dès l'arrivée */
.acc-rosace__recherche {
  display: flex; align-items: center; gap: 0.5rem; margin-top: var(--space-m);
  padding: 6px 6px 6px 16px; border-radius: var(--radius-pill); background: var(--bg-raised);
  box-shadow: var(--shadow-2), inset 0 0 0 1.5px var(--line-strong);
  transition: box-shadow var(--dur-fast) linear;
}
.acc-rosace__recherche:focus-within { box-shadow: var(--shadow-2), inset 0 0 0 2px var(--sky); }
.acc-rosace__loupe { width: 20px; height: 20px; flex: none; color: var(--ink-soft); }
.acc-rosace__recherche input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.55rem 0.2rem; font-size: var(--step-0); outline: none; }
.acc-rosace__recherche input::placeholder { color: var(--ink-soft); opacity: 0.85; }
.acc-rosace__recherche .btn { border-radius: var(--radius-pill); }

/* Trois chiffres clés */
.acc-rosace__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s); margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid var(--line-strong); }
.acc-rosace__chiffres li { display: grid; gap: 2px; }
.acc-rosace__chiffres b { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; }
.acc-rosace__chiffres span { font-size: var(--step--1); line-height: 1.35; color: var(--ink-soft); }
.acc-rosace__indice {
  display: flex; align-items: center; gap: 0.7rem; margin-top: var(--space-xl);
  font-size: var(--step--1); font-weight: 600; color: var(--ink-soft);
}
.acc-rosace__souris {
  width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--ink-soft); position: relative; flex: none;
}
.acc-rosace__souris::after {
  content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: var(--pink); animation: acc-rosace-molette 1.6s var(--ease-in-out) infinite;
}
@keyframes acc-rosace-molette { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* Scène */
.acc-rosace__scene { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.acc-rosace__stage {
  position: absolute; left: min(71%, calc(100% - var(--S) / 2 - var(--D) / 2 - 40px)); top: calc(50% + var(--header-h) / 2);
  width: var(--S); height: var(--S); margin: calc(var(--S) / -2) 0 0 calc(var(--S) / -2);
  will-change: transform;
}
.acc-rosace__stage::before { /* orbite qui apparaît à l'ouverture */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px dashed color-mix(in oklab, var(--navy) 22%, transparent);
  opacity: calc(var(--open) * 0.9); transform: scale(calc(0.6 + var(--open) * 0.4));
}
.acc-rosace__stage::after { /* halo doux derrière le cœur */
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--yellow) 30%, transparent), transparent);
  opacity: var(--open); z-index: -1;
}
.acc-rosace__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.acc-rosace__petale path { transition: filter var(--dur-normal) linear; }
.acc-rosace__petale.is-hot path { filter: drop-shadow(0 0 6px rgb(28 29 59 / 0.25)); }

/* Cœur : le 8e pétale, « Ton orientation » */
.acc-rosace__coeur {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: var(--H); height: var(--H); margin: calc(var(--H) / -2) 0 0 calc(var(--H) / -2);
  display: grid; place-content: center; text-align: center; gap: 0.1rem;
  border-radius: 50%; background: var(--navy); color: #fff; text-decoration: none;
  box-shadow: 0 0 0 6px var(--paper), var(--shadow-3);
  pointer-events: auto;
  transform: scale(0); opacity: 0;
  transition: background-color var(--dur-normal) linear, color var(--dur-normal) linear;
}
.acc-rosace__coeur-haut { font-size: calc(var(--H) * 0.085); font-weight: 600; opacity: 0.92; line-height: 1.15; margin-bottom: 0.2em; }
.acc-rosace__coeur strong { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--H) * 0.135); line-height: 1; color: var(--yellow); }
.acc-rosace__coeur { padding: 0 calc(var(--H) * 0.1); }
.acc-rosace__coeur:hover { background: var(--yellow); color: var(--navy); }
.acc-rosace__coeur:hover strong { color: var(--navy); }
.acc-rosace__coeur:focus-visible { outline-color: var(--yellow); outline-offset: 6px; border-radius: 50%; }

/* Portes */
.acc-rosace__portes { list-style: none; margin: 0; padding: 0; }
.acc-rosace__porte {
  position: absolute; left: 50%; top: 50%;
  width: var(--D); height: var(--D); margin: calc(var(--D) / -2) 0 0 calc(var(--D) / -2);
  opacity: 0; will-change: transform, opacity;
}
.acc-porte {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 50%;
  text-decoration: none; color: var(--ink); pointer-events: auto;
}
.acc-porte__media {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 0 5px var(--u), 0 0 0 11px var(--paper), var(--shadow-2);
  transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-out);
}
.acc-porte__media img { transition: transform var(--dur-slow) var(--ease-out); }
/* Boucle vidéo au survol : l'atelier s'anime dans la porte */
.acc-porte__video {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  opacity: 0; transform: scale(1.12); transition: opacity var(--dur-slow) var(--ease-out), transform 1.2s var(--ease-out);
  pointer-events: none;
}
.acc-porte__video.is-playing { opacity: 1; transform: scale(1); }
.acc-porte__texte {
  position: absolute; left: 50%; top: calc(100% - 14px); transform: translateX(-50%);
  z-index: 2; display: grid; justify-items: center; gap: 1px; white-space: nowrap;
  padding: 0.38rem 0.95rem 0.42rem; border-radius: var(--radius-pill);
  background: var(--u-fond); color: var(--u-ink); box-shadow: var(--shadow-2);
  transition: transform var(--dur-normal) var(--ease-spring);
}
.acc-porte__nom { font-family: var(--font-display); font-weight: 800; font-size: clamp(1rem, 0.7rem + 0.5vw, 1.35rem); line-height: 1; letter-spacing: 0.005em; }
.acc-porte__nb { font-size: 0.74rem; font-weight: 650; line-height: 1.1; opacity: 0.9; }
.acc-porte:hover .acc-porte__media, .acc-porte:focus-visible .acc-porte__media {
  transform: scale(1.07);
  box-shadow: 0 0 0 8px var(--u), 0 0 0 14px var(--paper), 0 0 0 16px color-mix(in oklab, var(--u) 40%, transparent), var(--shadow-3);
}
.acc-porte:hover .acc-porte__media img { transform: scale(1.12); }
.acc-porte:hover .acc-porte__texte { transform: translateX(-50%) translateY(4px) scale(1.05); }
.acc-porte:focus-visible { outline-offset: 12px; border-radius: 50%; }

/* Légende finale */
.acc-rosace__legende {
  position: absolute; z-index: 3; left: max(var(--gutter), calc((100vw - var(--container)) / 2)); bottom: 6vh;
  max-width: 22ch; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.05; color: var(--ink-soft);
  opacity: 0;
}
.acc-rosace__legende strong { display: block; color: var(--ink); font-weight: 800; }

/* Mouvement réduit : tout est déjà ouvert, le texte passe au-dessus */
/* Mouvement réduit : même mise en page en deux colonnes, la rosace est simplement posée ouverte. */
.acc-rosace.is-static .acc-rosace__legende { position: relative; left: auto; bottom: auto; opacity: 1; text-align: center; margin: 0 auto; }
.acc-rosace.is-static .acc-rosace__indice { display: none; }

/* Téléphone et tablette portrait : le texte d'abord, la rosace ouverte en dessous, dans le flux. */
@media (max-width: 860px) {
  .acc-rosace__pin { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: calc(var(--header-h) + 20px) 24px; }
  .acc-rosace__copie { width: auto; margin-inline: var(--gutter); }
  .acc-rosace__titre { font-size: clamp(2.3rem, 10.5vw, 3.8rem); }
  .acc-rosace__vivant { display: inline-block; font-size: 0.875rem; line-height: 1.4; }
  .acc-rosace__vivant .acc-rosace__pouls { display: inline-block; vertical-align: middle; margin-right: 0.45rem; }
  .acc-rosace__vivant b { white-space: nowrap; }
  .acc-rosace__cta .btn { flex: 1 1 auto; justify-content: center; }
  .acc-rosace__recherche .btn { min-height: 44px; }
  .acc-rosace__recherche input { min-height: 44px; }
  .acc-rosace__chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
  .acc-rosace__chiffres span { font-size: 0.875rem; }
  .acc-rosace__scene { position: relative; inset: auto; height: calc(var(--S) + var(--D) + 72px); margin-top: var(--space-l); }
  .acc-rosace__stage { left: 50%; top: 50%; }
  .acc-porte__texte { white-space: normal; text-align: center; width: max-content; max-width: 8.5em; padding: 0.3rem 0.7rem 0.34rem; }
  .acc-porte__nom { font-size: 0.95rem; }
  .acc-porte__nb { font-size: 0.75rem; }
  .acc-rosace__coeur-haut { font-size: 0.72rem; }
  .acc-rosace__coeur strong { font-size: 1rem; }
  .acc-rosace__indice, .acc-rosace__legende { display: none; }
}
@media (max-width: 420px) {
  .acc-rosace__chiffres b { font-size: 1.6rem; }
}