/* =========================================================================
   LES ATELIERS DU CERF BLANC — feuille de style
   Palette et typographies reprises de lecerfblanc.ch pour une continuité
   visuelle totale avec le site principal.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Epilogue:wght@300;400;500;600&display=swap');

:root {
  /* --- Couleurs de nuit (fond, panneaux) --- */
  --nuit: #0C1420;
  --nuit-2: #101B2B;
  --panneau: #152234;
  --panneau-clair: #1A2638;
  --pied-fond: #0A111B;

  /* --- Givre (textes clairs sur fond sombre) --- */
  --givre: #EAF0F6;
  --givre-soft: rgba(234, 240, 246, .84);
  --givre-mute: rgba(234, 240, 246, .58);

  /* --- Encre (textes sombres sur fond clair) --- */
  --encre: #16212E;
  --encre-mute: rgba(22, 33, 46, .62);
  --fond-clair: #F3F7FB;
  --fond-carte: #FFFFFF;

  /* --- Or (accent signature du Cerf Blanc) --- */
  --or: #E9B36A;
  --or-clair: #F6D9A8;
  --or-profond: #A97B3F;
  --or-trait: rgba(233, 179, 106, .4);
  --or-trait-fin: rgba(233, 179, 106, .28);
  --sur-or: #221609;

  /* --- Acier (bleu-gris neutre) --- */
  --acier: #8CA3BB;
  --trait: rgba(140, 163, 187, .22);
  --trait-fort: rgba(140, 163, 187, .4);

  /* --- Catégories d'ateliers (harmonisées avec la palette) --- */
  --cat-enfants: #7E9E71;
  --cat-enfants-fonce: #5C7A50;
  --cat-adultes: #C1694A;
  --cat-adultes-fonce: #954E36;
  --cat-famille: #6E8DAE;
  --cat-famille-fonce: #4F6C8A;

  /* --- Structure --- */
  --rayon: 16px;
  --rayon-sm: 10px;
  --rayon-lg: 24px;
  --ombre: 0 18px 40px -18px rgba(4, 8, 14, .45);
  --ombre-douce: 0 10px 30px -14px rgba(4, 8, 14, .3);
  --ease: cubic-bezier(.22, .72, .24, 1);
  --serif: 'Marcellus', Georgia, serif;
  --sans: 'Epilogue', system-ui, -apple-system, "Segoe UI", sans-serif;
  --conteneur: 1180px;
}

/* =========================================================================
   Base
   ========================================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond-clair);
  color: var(--encre);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0 0 .5em;
  color: var(--encre);
  letter-spacing: .04em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); letter-spacing: .09em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: .06em; }
h3 { font-size: 1.3rem; letter-spacing: .03em; }

p { margin: 0 0 1em; }

.conteneur {
  max-width: var(--conteneur);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or-profond);
  margin-bottom: .9em;
}

.eyebrow--clair { color: var(--or-clair); }

.entete-section {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}

.entete-section p { color: var(--encre-mute); font-size: 1.05rem; }

/* visually-hidden util (a11y) */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--or);
  color: var(--sur-or);
  padding: 12px 20px;
  z-index: 999;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--or-profond);
  outline-offset: 3px;
}

/* =========================================================================
   Boutons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: .95em 1.8em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  min-height: 48px;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--or {
  background: linear-gradient(150deg, var(--or-clair), var(--or) 70%);
  color: var(--sur-or);
  box-shadow: 0 14px 30px -14px rgba(233, 179, 106, .55);
}
.btn--or:hover { box-shadow: 0 18px 36px -14px rgba(233, 179, 106, .7); }

.btn--sombre {
  background: var(--nuit);
  color: var(--givre);
  border-color: rgba(234, 240, 246, .12);
}
.btn--sombre:hover { background: var(--panneau); }

.btn--fantome {
  background: transparent;
  color: var(--encre);
  border-color: var(--trait-fort);
}
.btn--fantome:hover { border-color: var(--or-profond); color: var(--or-profond); }

.btn--fantome-clair {
  background: rgba(234, 240, 246, .06);
  color: var(--givre);
  border-color: rgba(234, 240, 246, .28);
}
.btn--fantome-clair:hover { border-color: var(--or); color: var(--or-clair); }

.btn--petit { padding: .6em 1.2em; font-size: .82rem; min-height: 38px; }
.btn--large { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

.btn--icone-seul {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
}

/* =========================================================================
   En-tête / navigation
   ========================================================================= */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(12, 20, 32, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(234, 240, 246, .08);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 20px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--givre);
}

.marque__ecu {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--or-trait);
  display: flex; align-items: center; justify-content: center;
  object-fit: cover;
  background: var(--nuit);
  flex-shrink: 0;
}

.marque__texte { display: flex; flex-direction: column; line-height: 1.2; }
.marque__nom { font-family: var(--serif); letter-spacing: .12em; font-size: 1rem; }
.marque__sous { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or-clair); opacity: .85; }

.nav-public { display: flex; align-items: center; gap: 28px; }
.nav-public a {
  font-size: .85rem;
  letter-spacing: .05em;
  color: var(--givre-soft);
  transition: color .25s var(--ease);
}
.nav-public a:hover { color: var(--or-clair); }

.entete__cta { display: flex; align-items: center; gap: 12px; }
.entete__cta .txt-court { display: none; }

.menu-mobile-bouton {
  display: none;
  background: transparent;
  border: 1px solid rgba(234, 240, 246, .28);
  color: var(--givre);
  border-radius: 10px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer;
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  padding: 108px 24px 88px;
  text-align: center;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(233, 179, 106, .16), transparent 70%),
    linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 60%, var(--nuit) 100%);
  color: var(--givre);
  overflow: hidden;
}

/* Variante avec photo immersive en arrière-plan (voir index.html) : les
   dégradés deviennent un voile semi-transparent posé sur la photo, comme
   sur lecerfblanc.ch, pour garder le texte parfaitement lisible. */
.hero--photo {
  background-image:
    radial-gradient(60% 55% at 50% 0%, rgba(233, 179, 106, .18), transparent 70%),
    linear-gradient(180deg, rgba(12, 20, 32, .72) 0%, rgba(16, 27, 43, .8) 55%, rgba(12, 20, 32, .95) 100%),
    url('assets/experience-hero.webp');
  background-size: auto, auto, cover;
  background-position: center, center, center 32%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(234,240,246,.5) 0, transparent 60%),
                     radial-gradient(1px 1px at 70% 60%, rgba(234,240,246,.35) 0, transparent 60%),
                     radial-gradient(1.5px 1.5px at 85% 20%, rgba(233,179,106,.5) 0, transparent 60%),
                     radial-gradient(1px 1px at 40% 80%, rgba(234,240,246,.3) 0, transparent 60%);
  opacity: .7;
  pointer-events: none;
}

.hero__contenu { position: relative; max-width: 760px; margin: 0 auto; }

.hero h1 { color: var(--givre); margin-bottom: .4em; }
.hero__intro { font-size: 1.15rem; color: var(--givre-mute); max-width: 560px; margin: 0 auto 2.2em; }

.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero__trait {
  width: 64px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or-trait), transparent);
  margin: 1.6em auto;
}

.hero__stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.hero__stat { text-align: center; }
.hero__stat strong { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--or-clair); }
.hero__stat span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--givre-mute); }

/* =========================================================================
   Bandeau démo
   ========================================================================= */

.bandeau-demo {
  background: var(--or-clair);
  color: var(--sur-or);
  text-align: center;
  font-size: .85rem;
  font-weight: 500;
  padding: 10px 20px;
  letter-spacing: .02em;
}
.bandeau-demo strong { text-transform: uppercase; letter-spacing: .1em; margin-right: .5em; }

/* =========================================================================
   Filtres
   ========================================================================= */

.section-filtres {
  background: var(--fond-clair);
  padding: 48px 24px 8px;
}

.filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 8px;
}

.filtre-cat {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .6em 1.15em;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
  background: var(--fond-carte);
  color: var(--encre);
  font-size: .86rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s var(--ease);
}
.filtre-cat:hover { border-color: var(--or-profond); }
.filtre-cat[aria-pressed="true"] {
  background: var(--nuit);
  border-color: var(--nuit);
  color: var(--givre);
}
.filtre-cat .pastille { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.filtres-secondaires {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 18px 0 12px;
}

.select-periode, .champ-recherche {
  font-family: var(--sans);
  font-size: .85rem;
  padding: .65em 1em;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--trait-fort);
  background: var(--fond-carte);
  color: var(--encre);
}

.legende {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 18px 0 36px;
  font-size: .78rem;
  color: var(--encre-mute);
}
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.legende .pastille { width: 10px; height: 10px; border-radius: 50%; }

/* =========================================================================
   Calendrier
   ========================================================================= */

.section-calendrier { padding: 8px 24px 80px; background: var(--fond-clair); }

.calendrier-cadre {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-douce);
  padding: 20px;
}

.vue-basculer {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.vue-basculer button {
  font-family: var(--sans);
  font-size: .8rem;
  padding: .5em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
  background: transparent;
  cursor: pointer;
  color: var(--encre-mute);
}
.vue-basculer button[aria-pressed="true"] {
  background: var(--or);
  border-color: var(--or);
  color: var(--sur-or);
  font-weight: 600;
}

/* FullCalendar re-thème */
#calendrier {
  --fc-border-color: var(--trait);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgba(140,163,187,.06);
  --fc-today-bg-color: rgba(233,179,106,.09);
  --fc-button-bg-color: var(--nuit);
  --fc-button-border-color: var(--nuit);
  --fc-button-hover-bg-color: var(--panneau);
  --fc-button-active-bg-color: var(--or-profond);
  font-family: var(--sans);
}
.fc { font-size: .88rem; }
.fc .fc-toolbar-title { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .04em; color: var(--encre); }
.fc .fc-button { text-transform: capitalize; border-radius: 999px !important; padding: .5em 1.1em !important; box-shadow: none !important; font-weight: 500; }
.fc .fc-daygrid-day-number, .fc .fc-col-header-cell-cushion { color: var(--encre-mute); text-decoration: none; }
.fc-event { border: none !important; cursor: pointer; padding: 1px 4px; border-radius: 6px !important; font-weight: 500; }
.fc-daygrid-event-dot { display: none; }
.fc-list-event:hover td { background: rgba(233,179,106,.08); }
.fc-list-day-cushion { background: rgba(140,163,187,.08) !important; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--trait); }

/* Vue liste chronologique (mobile / fallback) */
.liste-chronologique { display: none; flex-direction: column; gap: 14px; }
.liste-chronologique.actif { display: flex; }
.liste-chronologique__mois {
  font-family: var(--serif);
  color: var(--or-profond);
  letter-spacing: .08em;
  margin: 18px 0 6px;
  font-size: 1.05rem;
}
.liste-chronologique__mois:first-child { margin-top: 0; }

.ligne-atelier {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.ligne-atelier:hover { border-color: var(--or-profond); transform: translateX(2px); }

.ligne-atelier__date {
  flex-shrink: 0;
  width: 58px;
  text-align: center;
  border-radius: var(--rayon-sm);
  padding: 8px 4px;
  color: #fff;
}
.ligne-atelier__date strong { display: block; font-family: var(--serif); font-size: 1.35rem; line-height: 1; }
.ligne-atelier__date span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }

.ligne-atelier__corps { flex: 1; min-width: 0; }
.ligne-atelier__corps h4 { margin: 0 0 4px; font-size: 1rem; }
.ligne-atelier__meta { font-size: .8rem; color: var(--encre-mute); display: flex; gap: 10px; flex-wrap: wrap; }

.calendrier-vide {
  text-align: center;
  padding: 60px 20px;
  color: var(--encre-mute);
}

/* =========================================================================
   Badges catégories
   ========================================================================= */

.badge-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4em .85em;
  border-radius: 999px;
  color: #fff;
}
.badge-cat .pastille { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.85); }

.cat-enfants { background: var(--cat-enfants); }
.cat-adultes { background: var(--cat-adultes); }
.cat-famille { background: var(--cat-famille); }

.pastille.cat-enfants, .pastille-cat-enfants { background: var(--cat-enfants); }
.pastille.cat-adultes, .pastille-cat-adultes { background: var(--cat-adultes); }
.pastille.cat-famille, .pastille-cat-famille { background: var(--cat-famille); }

/* =========================================================================
   Prochains ateliers (grille de cartes)
   ========================================================================= */

.section-prochains { padding: 80px 24px; background: var(--nuit); color: var(--givre); }
.section-prochains .entete-section p { color: var(--givre-mute); }
.section-prochains h2 { color: var(--givre); }

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}

.carte-atelier {
  background: var(--panneau);
  border: 1px solid rgba(234, 240, 246, .08);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  text-align: left;
}
.carte-atelier:hover {
  transform: translateY(-6px);
  border-color: var(--or-trait);
  box-shadow: var(--ombre);
}

.carte-atelier__image {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  position: relative;
}
.carte-atelier__image .badge-cat { position: absolute; top: 14px; left: 14px; }

.carte-atelier__corps { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-atelier__corps h3 { margin: 0; font-size: 1.15rem; color: var(--givre); }
.carte-atelier__accroche { font-size: .88rem; color: var(--givre-mute); flex: 1; }
.carte-atelier__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .78rem;
  color: var(--or-clair);
  border-top: 1px solid rgba(234,240,246,.1);
  padding-top: 12px;
  margin-top: 4px;
}
.carte-atelier__meta span { display: inline-flex; align-items: center; gap: 6px; }

.vide-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--givre-mute);
}

/* =========================================================================
   Fiche atelier (overlay)
   ========================================================================= */

.overlay-fond {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 16, .72);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
}
.overlay-fond.actif { display: flex; }

.fiche-panneau {
  background: var(--fond-clair);
  width: 100%;
  max-width: 880px;
  min-height: 100vh;
  margin: 0 auto;
  box-shadow: var(--ombre);
  position: relative;
}
@media (min-width: 760px) {
  .fiche-panneau { min-height: 0; margin: 40px auto; border-radius: var(--rayon-lg); overflow: hidden; }
}

.fiche-fermer {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 5;
  background: rgba(12,20,32,.55);
  color: var(--givre);
  border: 1px solid rgba(234,240,246,.3);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
}
.fiche-fermer:hover { background: rgba(12,20,32,.85); }

.fiche-hero {
  aspect-ratio: 16/8;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.fiche-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,20,32,0) 30%, rgba(12,20,32,.85) 100%);
}
.fiche-hero__texte { position: relative; padding: 30px 32px; color: var(--givre); z-index: 2; }
.fiche-hero__texte .badge-cat { margin-bottom: 12px; }
.fiche-hero__texte h2 { color: var(--givre); margin-bottom: .2em; }
.fiche-hero__accroche { color: var(--givre-soft); font-size: 1.05rem; margin: 0; }

.fiche-corps { padding: 32px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; }
@media (max-width: 760px) { .fiche-corps { grid-template-columns: 1fr; padding: 24px 20px 60px; gap: 32px; } }

.fiche-bloc { margin-bottom: 30px; }
.fiche-bloc:last-child { margin-bottom: 0; }
.fiche-bloc h4 {
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or-profond);
  margin-bottom: .9em;
  font-weight: 600;
}
.fiche-bloc p { color: var(--encre); }
.fiche-bloc ul { margin: 0; padding-left: 1.2em; color: var(--encre); }
.fiche-bloc li { margin-bottom: .4em; }

.fiche-lateral {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  padding: 24px;
  align-self: start;
  position: sticky;
  top: 90px;
}
@media (max-width: 760px) { .fiche-lateral { position: static; } }

.fiche-lateral__ligne {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
  font-size: .9rem;
}
.fiche-lateral__ligne:last-of-type { border-bottom: none; }
.fiche-lateral__ligne strong { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-mute); margin-bottom: 2px; }

.fiche-dates { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.fiche-date-item {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem;
  padding: 8px 12px;
  background: var(--fond-clair);
  border-radius: var(--rayon-sm);
}
.fiche-date-item.passee { opacity: .45; text-decoration: line-through; }

.carte-carte { border-radius: var(--rayon-sm); overflow: hidden; border: 1px solid var(--trait); margin: 14px 0; }
.carte-carte iframe { display: block; width: 100%; height: 220px; border: 0; }

.fiche-lateral .btn { margin-top: 10px; }

.fiche-lieu-nom { font-weight: 500; }
.fiche-lieu-adresse { color: var(--encre-mute); font-size: .85rem; }

/* Formulaire d'inscription */
#fiche-inscription-bloc { margin-top: 20px; }
.formulaire-inscription { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.formulaire-inscription label {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-mute);
  font-weight: 600;
}
.formulaire-inscription input,
.formulaire-inscription select {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--encre);
  background: #FFFFFF;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-sm);
  padding: .6em .7em;
  width: 100%;
}
.formulaire-inscription input:focus,
.formulaire-inscription select:focus {
  outline: none;
  border-color: var(--or-profond);
  box-shadow: 0 0 0 3px var(--or-trait-fin);
}
.case-accompagnant {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--encre);
  cursor: pointer;
}
.case-accompagnant input { width: auto; margin-top: 3px; flex-shrink: 0; }
.formulaire-inscription .texte-erreur { color: #A33B2A; font-size: .85rem; min-height: 1.2em; }
.formulaire-inscription button[type="submit"] { margin-top: 6px; width: 100%; }
.formulaire-inscription button[disabled] { opacity: .6; cursor: not-allowed; }
.inscription-confirmation {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--rayon-sm);
  background: rgba(126, 158, 113, .15);
  color: var(--encre);
  font-size: .9rem;
}

/* Ateliers liés */
.section-lies { padding: 60px 32px 10px; }
.section-lies h4 {
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or-profond);
  font-weight: 600;
  margin-bottom: 1em;
}
@media (max-width: 760px) { .section-lies { padding: 40px 20px 10px; } }

.grille-lies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.carte-liee {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--fond-carte);
  cursor: pointer;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.carte-liee:hover { transform: translateY(-3px); border-color: var(--or-profond); }
.carte-liee__image { aspect-ratio: 4/3; background-size: cover; background-position: center; position: relative; }
.carte-liee__image .badge-cat { position: absolute; top: 10px; left: 10px; font-size: .64rem; padding: .3em .7em; }
.carte-liee__corps { padding: 14px 16px 18px; }
.carte-liee__corps h5 { margin: 0 0 4px; font-family: var(--serif); font-size: .98rem; font-weight: 400; }
.carte-liee__corps .date-liee { font-size: .76rem; color: var(--encre-mute); margin-bottom: 10px; }

/* =========================================================================
   Pied de page
   ========================================================================= */

.pied {
  background: var(--pied-fond);
  color: var(--givre-mute);
  padding: 64px 24px 30px;
  text-align: center;
}
.pied a { color: var(--or-clair); }
.pied a:hover { text-decoration: underline; }
.pied__marque { font-family: var(--serif); color: var(--givre); letter-spacing: .1em; margin-bottom: .3em; }
.pied__liens { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 18px 0; font-size: .82rem; }
.pied__note { font-size: .75rem; opacity: .55; margin-top: 20px; }

.pied__grille {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  text-align: left;
  padding-bottom: 40px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(234, 240, 246, .1);
}
@media (max-width: 620px) {
  .pied__grille { grid-template-columns: 1fr; text-align: center; gap: 32px; }
}

.pied__marque-lien { display: inline-block; }
.pied__marque-sous { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--or-clair); opacity: .85; margin-bottom: 1em; }
.pied__accroche { max-width: 380px; font-size: .92rem; color: var(--givre-mute); margin: 0; }
@media (max-width: 620px) { .pied__accroche { max-width: none; margin: 0 auto; } }

.pied__titre {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--or-profond);
  margin: 0 0 1em;
}
.pied__liste-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: .9rem; }
@media (max-width: 620px) { .pied__liste-contact { align-items: center; } }

/* =========================================================================
   Composants génériques
   ========================================================================= */

.chargement {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 60px 20px; color: var(--encre-mute); font-size: .9rem;
}
.chargement .rond {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--trait-fort);
  border-top-color: var(--or-profond);
  animation: tourner 1s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--nuit);
  color: var(--givre);
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid rgba(234,240,246,.15);
  font-size: .85rem;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow: var(--ombre);
}
.toast.actif { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast.toast--erreur { background: #6E3226; border-color: rgba(234,240,246,.15); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   Responsive — navigation mobile
   ========================================================================= */

@media (max-width: 880px) {
  .nav-public { position: fixed; top: 74px; left: 0; right: 0; bottom: 0; background: rgba(10,17,27,.98); flex-direction: column; justify-content: flex-start; padding: 40px 30px; gap: 26px; transform: translateX(100%); transition: transform .4s var(--ease); z-index: 55; }
  .nav-public.ouvert { transform: translateX(0); }
  .nav-public a { font-size: 1.1rem; }
  .menu-mobile-bouton { display: flex; }
  .entete__cta .txt-long { display: none; }
  .entete__cta .txt-court { display: inline; }
}

@media (max-width: 620px) {
  .hero { padding: 88px 20px 64px; }
  .fiche-corps { grid-template-columns: 1fr; }
  .ligne-atelier { flex-wrap: wrap; }
}