/* ==========================================================================
   CYAM — feuille de style unique du site
   --------------------------------------------------------------------------
   Pour changer l'apparence de TOUT le site, il suffit en général de modifier
   les RÉGLAGES ci-dessous (couleurs, polices, largeur).
   Le reste du fichier est rangé par sections numérotées.
   ========================================================================== */


/* 1. RÉGLAGES ============================================================ */
:root {
  /* Couleurs principales */
  --nuit:        #16131c;   /* fond sombre (bandeaux, pied de page) */
  --nuit-2:      #221d2b;   /* fond sombre un peu plus clair */
  --papier:      #faf6ef;   /* fond clair des pages */
  --blanc:       #ffffff;
  --encre:       #1f1b24;   /* couleur du texte */
  --encre-douce: #5d5664;   /* texte secondaire */
  --trait:       #e7dfd2;   /* bordures fines */

  /* Couleurs d'accent */
  --cyan:        #0b9fd0;   /* bleu historique du CYAM */
  --cyan-clair:  #dff3fb;
  --vert:        #5f8e7d;   /* vert evenement atelier */
  --vert-clair:  #bde8d8;
  --vermillon:   #e2582c;   /* orange-rouge des marionnettes en laine */
  --vermillon-clair: #fde7de;
  --ocre:        #e9a83a;
  --ocre-clair:  #fbefd6;

  /* Polices */
  --police-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --police-texte: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Mise en page */
  --largeur:  1160px;       /* largeur maximale du contenu */
  --arrondi:  18px;
  --ombre:    0 1px 2px rgba(22,19,28,.06), 0 8px 24px rgba(22,19,28,.08);
}


/* 2. BASE ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--vermillon); }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 72px 0; }
.section-blanche { background: var(--blanc); }
.section-suite { padding-top: 0; }   /* colle la section à la précédente */

.surtitre {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: .6em;
}

.intro {
  font-size: 1.2rem;
  color: var(--encre-douce);
  max-width: 62ch;
}

.texte { max-width: 68ch; }

.entete-section { margin-bottom: 36px; }


/* 3. BOUTONS ============================================================= */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7em 1.3em;
  border-radius: 999px;
  background: var(--vermillon);
  color: var(--blanc);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .15s, background .15s;
}
.bouton:hover { background: #c94519; color: var(--blanc); transform: translateY(-2px); }

.bouton-clair { background: var(--blanc); color: var(--encre); }
.bouton-clair:hover { background: var(--ocre-clair); color: var(--encre); }

.bouton-contour {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px currentColor;
}
.bouton-contour:hover { background: rgba(255,255,255,.1); color: inherit; }

.boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* Petit lien « fichier PDF » */
.lien-pdf {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  text-decoration: none;
}
.lien-pdf::before {
  content: "PDF";
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .25em .45em;
  border-radius: 5px;
  background: var(--vermillon-clair);
  color: var(--vermillon);
}


/* 4. EN-TÊTE ET MENU (le contenu est dans js/site.js) ==================== */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,246,239,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.entete-logo img { width: 104px; }

.menu ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  display: block;
  padding: .45em .8em;
  border-radius: 999px;
  color: var(--encre);
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}
.menu a:hover { background: var(--ocre-clair); }
.menu a[aria-current="page"] { background: var(--nuit); color: var(--blanc); }

.menu-bouton {
  display: none;
  border: 0;
  background: var(--nuit);
  color: var(--blanc);
  font: inherit;
  font-weight: 700;
  padding: .5em 1em;
  border-radius: 999px;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .menu-bouton { display: block; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--trait);
    box-shadow: var(--ombre);
  }
  .menu.ouvert { display: block; }
  .menu ul { flex-direction: column; align-items: stretch; padding: 12px 20px 20px; }
  .menu a { padding: .75em 1em; font-size: 1.05rem; }
}


/* 5. BANDEAU D'ACCUEIL (page d'accueil) ================================== */
.accueil {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 75% 40%, rgba(233,168,58,.22), transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 100%, rgba(11,159,208,.18), transparent 70%),
    var(--nuit);
  color: var(--blanc);
  padding: 80px 0 96px;
}
.accueil .conteneur {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 48px;
}
.accueil h1 em, .bandeau h1 em { font-style: italic; color: var(--ocre); }
.accueil .intro { color: rgba(255,255,255,.75); margin-bottom: 1.6em; }

.accueil-photos {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  justify-self: center;
  width: 100%;
}
.accueil-photos img {
  position: absolute;
  width: 58%;
  border-radius: var(--arrondi);
  border: 6px solid var(--blanc);
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  transition: transform .3s;
}
.accueil-photos img:nth-child(1) { top: 0;    left: 4%;  transform: rotate(-6deg); }
.accueil-photos img:nth-child(2) { top: 10%;  right: 0;  transform: rotate(5deg); }
.accueil-photos img:nth-child(3) { bottom: 0; left: 22%; transform: rotate(-2deg); }
.accueil-photos img:hover { transform: rotate(0) scale(1.04); z-index: 2; }

@media (max-width: 860px) {
  .accueil { padding: 56px 0 64px; }
  .accueil .conteneur { grid-template-columns: 1fr; }
  .accueil-photos { max-width: 340px; }
}


/* 6. BANDEAU DE TITRE (pages intérieures) ================================ */
.bandeau {
  background:
    radial-gradient(ellipse 50% 90% at 85% 0%, rgba(233,168,58,.2), transparent 70%),
    var(--nuit);
  color: var(--blanc);
  padding: 64px 0 56px;
}
.bandeau .intro { color: rgba(255,255,255,.75); margin: 0; }
.bandeau .surtitre { color: var(--ocre); }


/* 7. GRILLES ET CARTES =================================================== */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille-tuiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.carte {
  background: var(--blanc);
  border-radius: var(--arrondi);
  box-shadow: var(--ombre);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.carte > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carte-corps { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.carte-corps > :last-child { margin-bottom: 0; }
.carte .detail { color: var(--encre-douce); font-size: .95rem; }

/* Tuiles « Explorer » de la page d'accueil */
.tuile {
  position: relative;
  display: block;
  border-radius: var(--arrondi);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  color: var(--blanc);
  text-decoration: none;
  background: var(--nuit);
}
.tuile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .75;
  transition: transform .4s, opacity .4s;
}
.tuile span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px 22px 18px;
  background: linear-gradient(transparent, rgba(22,19,28,.9));
  font-family: var(--police-titre);
  font-size: 1.4rem;
  font-weight: 700;
}
.tuile span::after { content: " →"; color: var(--ocre); }
.tuile:hover { color: var(--blanc); }
.tuile:hover img { transform: scale(1.06); opacity: 1; }


/* 8. AGENDA (page d'accueil) ============================================= */
.agenda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.evenement {
  --couleur: var(--cyan);
  --couleur-clair: var(--cyan-clair);
  background: var(--blanc);
  border-radius: var(--arrondi);
  box-shadow: var(--ombre);
  padding: 24px;
  border-top: 6px solid var(--couleur);
  display: flex;
  flex-direction: column;
}
/* Couleur selon le type : ajouter "stage", "atelier", "famille" ou "festival" dans class="..." */
.evenement.stage    { --couleur: var(--cyan);      --couleur-clair: var(--cyan-clair); }
.evenement.atelier    { --couleur: var(--vert);      --couleur-clair: var(--vert-clair); }
.evenement.famille  { --couleur: var(--vermillon); --couleur-clair: var(--vermillon-clair); }
.evenement.festival { --couleur: var(--ocre);      --couleur-clair: var(--ocre-clair); }

.evenement .etiquette {
  align-self: flex-start;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3em .8em;
  border-radius: 999px;
  background: var(--couleur-clair);
  color: var(--encre);
  margin-bottom: 14px;
}
.evenement .date {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--couleur);
  margin-bottom: .3em;
}
.evenement h3 { margin-bottom: .4em; }
.evenement ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  color: var(--encre-douce);
  font-size: .95rem;
}
.evenement li { padding: 2px 0; }
.evenement .liens {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-top: 16px;
  border-top: 1px solid var(--trait);
}


/* 9. LISTES PAR ANNÉE (résidences, formations, actions culturelles) ====== */
.annee { margin-bottom: 56px; }
.annee > h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 2rem;
  color: var(--cyan);
  margin-bottom: 20px;
}
.annee > h3::after { content: ""; flex: 1; height: 2px; background: var(--trait); }

/* Petite fiche horizontale : image à gauche, texte à droite
   (compagnies en résidence, ateliers passés) */
.fiche {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--blanc);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--ombre);
}
.fiche img {
  flex: none;
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--papier);
}
.fiche.portrait img { width: 96px; height: 128px; }
.fiche h4 { margin-bottom: .15em; }
.fiche h4 a { color: var(--encre); }
.fiche h4 a:hover { color: var(--vermillon); }
.fiche .origine {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-bottom: .4em;
}
.fiche p { font-size: .95rem; margin-bottom: 0; }
.fiche .projet { color: var(--encre-douce); }


/* 10. TABLEAUX =========================================================== */
.tableau {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--ombre);
  font-size: .95rem;
}
.tableau th, .tableau td { text-align: left; padding: 12px 16px; vertical-align: top; }
.tableau th {
  background: var(--nuit);
  color: var(--blanc);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tableau tr + tr td { border-top: 1px solid var(--trait); }

/* Sur téléphone, chaque ligne devient une petite fiche */
@media (max-width: 700px) {
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; }
  .tableau tr { padding: 12px 0; }
  .tableau tr + tr { border-top: 1px solid var(--trait); }
  .tableau tr + tr td { border-top: 0; }
  .tableau td { padding: 2px 16px; }
  .tableau td:first-child { font-weight: 700; }
}


/* 11. GALERIE (mariothèque) ============================================== */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.galerie figure {
  margin: 0;
  background: #000;
  border-radius: var(--arrondi);
  overflow: hidden;
  box-shadow: var(--ombre);
}
.galerie img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .4s; }
.galerie figure:hover img { transform: scale(1.05); }
.galerie figcaption {
  padding: 12px 18px 16px;
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: 1.2rem;
  font-weight: 600;
}


/* 12. BLOCS DIVERS ======================================================= */
/* Encadré mis en avant (appel à contact, etc.) */
.encadre {
  background: var(--nuit);
  color: var(--blanc);
  border-radius: var(--arrondi);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.encadre h2, .encadre h3 { margin: 0 0 .3em; }
.encadre p { margin: 0; color: rgba(255,255,255,.75); }

/* Deux colonnes texte + image */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.duo img { border-radius: var(--arrondi); box-shadow: var(--ombre); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; gap: 28px; } }

/* Chiffres clés */
.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.chiffres li {
  background: var(--ocre-clair);
  border-radius: 14px;
  padding: 14px 20px;
  font-size: .95rem;
}
.chiffres strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.6rem;
  line-height: 1.1;
}

/* Vidéo et carte qui s'adaptent à la largeur */
.video, .plan {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--arrondi);
  overflow: hidden;
  box-shadow: var(--ombre);
  background: var(--nuit);
}
.video iframe, .plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Fiche contact */
.contact dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vermillon);
  margin-top: 18px;
}
.contact dd { margin: 4px 0 0; font-size: 1.1rem; }
.contact .contact-bouton { margin-top: 24px; }


/* 13. PIED DE PAGE (le contenu est dans js/site.js) ====================== */
.pied {
  background: var(--nuit);
  color: rgba(255,255,255,.75);
  padding: 56px 0 32px;
  font-size: .95rem;
}
.pied a { color: var(--blanc); }
.pied a:hover { color: var(--ocre); }
.pied-grille {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}
.pied h3 { color: var(--blanc); font-size: 1.1rem; }
.pied p { margin: 0 0 .3em; }
.pied-direction img { width: 44px; margin-top: 8px; background: var(--blanc); border-radius: 8px; padding: 4px; }
.pied-bas {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .85rem;
  color: rgba(255,255,255,.5);
}
@media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr; gap: 28px; } }


/* 14. PETITS ÉCRANS ====================================================== */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .section { padding: 52px 0; }
  .conteneur { padding: 0 16px; }
  .encadre { padding: 28px; }
  .agenda, .grille { grid-template-columns: 1fr; }
}

/* Respecte le réglage « réduire les animations » de l'ordinateur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}