/* ============================================================
   sections.css — toutes les sections du one-page
   (hero, compagnie, spectacles, galerie, dates, references,
    contact, footer)
   ============================================================ */

/* ============================================================
   1. HERO — Rideau de theatre
   ============================================================ */

@keyframes rideau-balancement {
  0%, 100% { background-position: 0 0, 0 0, 0 0; }
  33%       { background-position: 9px 0, 0 0, 0 0; }
  66%       { background-position: -6px 0, 0 0, 0 0; }
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-16) 0 var(--space-12);
  overflow: hidden;
  color: var(--creme-light);

  /* Rideau rouge de theatre — plis verticaux + profondeur */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.40) 0%,
      rgba(0, 0, 0, 0.10) 3.5%,
      rgba(255, 255, 255, 0.06) 7%,
      rgba(0, 0, 0, 0.08) 10.5%,
      rgba(0, 0, 0, 0.38) 14%
    ),
    linear-gradient(180deg,
      #2e0810 0%,
      #7a1824 10%,
      #941f2d 35%,
      #8a1b28 70%,
      #6b1520 90%,
      #2e0810 100%
    ),
    radial-gradient(ellipse at 50% 40%,
      rgba(190, 65, 45, 0.28) 0%,
      transparent 60%
    );

  /* Ombres laterales simulant les panneaux du rideau */
  box-shadow:
    inset 90px 0 130px rgba(0, 0, 0, 0.50),
    inset -90px 0 130px rgba(0, 0, 0, 0.50);

  animation: rideau-balancement 13s ease-in-out infinite;
}

/* Lambrequin — bandeau superieur du rideau */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  z-index: 3;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.16) 3.5%,
      rgba(255, 255, 255, 0.09) 7%,
      rgba(0, 0, 0, 0.14) 10.5%,
      rgba(0, 0, 0, 0.45) 14%
    ),
    linear-gradient(180deg, #1a040b 0%, #5c1122 75%, #7a1824 100%);
  box-shadow:
    0 4px 0 var(--or-deep),
    0 5px 0 var(--or),
    0 9px 28px rgba(0, 0, 0, 0.55);
}

/* Galon dore en bas */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(to right,
    var(--or-deep) 0%,
    var(--or) 50%,
    var(--or-deep) 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.hero__contenu {
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-corps);
  font-style: italic;
  font-size: var(--fs-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--or-light);
  margin-bottom: var(--space-5);
}

.hero__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background-color: var(--or);
}

.hero__titre {
  font-size: var(--fs-4xl);
  line-height: 0.95;
  color: var(--creme-light);
  margin-bottom: var(--space-5);
}

.hero__titre em {
  color: var(--or);
  font-style: italic;
  font-weight: 400;
}

.hero__accroche {
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--creme);
  max-width: 540px;
  margin-bottom: var(--space-8);
}

.hero__ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__ctas .btn-primary {
  background-color: var(--or);
  color: var(--bordeaux-deep);
}

.hero__ctas .btn-primary:hover {
  background-color: var(--or-light);
  color: var(--bordeaux-deep);
}

.hero__ctas .btn-outline {
  border-color: var(--creme-light);
  color: var(--creme-light);
}

.hero__ctas .btn-outline:hover {
  background-color: var(--creme-light);
  color: var(--bordeaux-deep);
}

/* ---- Affiches empilees a droite ---- */
.hero__affiches {
  position: relative;
  height: 540px;
}

.hero__affiche {
  position: absolute;
  width: 240px;
  height: 340px;
  border-radius: var(--radius-md);
  background-color: var(--creme-deeper);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(200, 151, 58, 0.4);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero__affiche:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0,0,0,0.35));
}

.hero__affiche-label {
  background-color: rgba(66, 15, 24, 0.86);
  color: var(--or-light);
  font-family: var(--font-titre);
  font-style: italic;
  font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.hero__affiche--1 {
  top: 30px;
  left: 0;
  transform: rotate(-6deg);
  z-index: 1;
}

.hero__affiche--2 {
  top: 90px;
  left: 130px;
  transform: rotate(2deg);
  z-index: 2;
}

.hero__affiche--3 {
  top: 50px;
  right: 0;
  transform: rotate(7deg);
  z-index: 3;
}

@media (max-width: 1000px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__affiches {
    height: 400px;
    margin-top: var(--space-8);
  }
  .hero__affiche { width: 180px; height: 260px; }
  .hero__affiche--1 { left: 8%; }
  .hero__affiche--2 { left: 36%; }
  .hero__affiche--3 { right: 8%; }
}

@media (max-width: 640px) {
  .hero__titre { font-size: var(--fs-2xl); }
  .hero__affiches { height: 320px; }
  .hero__affiche { width: 130px; height: 190px; }
}

/* ============================================================
   2. COMPAGNIE
   ============================================================ */
.compagnie {
  padding: var(--space-16) 0;
  background-color: var(--creme-light);
}

.compagnie__intro {
  max-width: var(--max-width-text);
  margin: 0 auto var(--space-10);
  text-align: center;
  font-size: var(--fs-md);
  color: var(--texte-doux);
  line-height: 1.8;
}

.compagnie__intro p + p { margin-top: var(--space-4); }

.compagnie__valeurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.valeur {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background-color: var(--creme);
  border: 1px solid rgba(200, 151, 58, 0.25);
  border-radius: var(--radius-md);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.valeur:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.valeur__numero {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--or-deep);
  margin-bottom: var(--space-3);
}

.valeur__titre {
  font-family: var(--font-titre);
  font-size: var(--fs-md);
  color: var(--bordeaux-deep);
  margin-bottom: var(--space-2);
}

.valeur__texte {
  font-size: var(--fs-sm);
  color: var(--texte-doux);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .compagnie__valeurs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .compagnie__valeurs { grid-template-columns: 1fr; }
}

/* ============================================================
   3. SPECTACLES — grille 3 colonnes
   ============================================================ */
.spectacles {
  padding: var(--space-16) 0;
  background:
    linear-gradient(180deg, var(--creme-light) 0%, var(--creme-deeper) 100%);
}

.spectacles__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1000px) {
  .spectacles__grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .spectacles__grille { grid-template-columns: 1fr; }
}

/* ============================================================
   4. GALERIE — onglets photos / videos
   ============================================================ */
.galerie {
  padding: var(--space-16) 0;
  background-color: var(--bordeaux-deep);
  color: var(--creme-light);
}

.galerie h2 { color: var(--creme-light); }
.galerie .section-titre .eyebrow { color: var(--or-light); }

.galerie__tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.galerie__tab {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-corps);
  font-size: var(--fs-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--creme);
  background-color: transparent;
  border: 1px solid rgba(200, 151, 58, 0.4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.galerie__tab:hover {
  border-color: var(--or);
  color: var(--or-light);
}

.galerie__tab.is-active {
  background-color: var(--or);
  color: var(--bordeaux-deep);
  border-color: var(--or);
}

.galerie__panel { display: none; }
.galerie__panel.is-active { display: block; }

.galerie__photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.galerie__photo {
  aspect-ratio: 4 / 3;
  background-color: var(--bordeaux);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(200, 151, 58, 0.2);
  transition: transform var(--t-base);
}

.galerie__photo:hover { transform: scale(1.03); }

.galerie__photo-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(66, 15, 24, 0.95), transparent);
  color: var(--creme-light);
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-style: italic;
  font-size: var(--fs-xs);
}

.galerie__videos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.galerie__video {
  aspect-ratio: 16 / 9;
  background-color: var(--bordeaux);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--or-deep);
}

.galerie__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .galerie__photos { grid-template-columns: repeat(2, 1fr); }
  .galerie__videos { grid-template-columns: 1fr; }
}

/* ============================================================
   5. DATES
   ============================================================ */
.dates {
  padding: var(--space-16) 0;
  background-color: var(--creme-light);
}

.dates__liste {
  max-width: 880px;
  margin: 0 auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.date-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  background-color: var(--creme);
  border-left: 4px solid var(--or);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.date-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.date-item__date {
  text-align: center;
}

.date-item__jour {
  font-family: var(--font-titre);
  font-size: var(--fs-2xl);
  color: var(--bordeaux);
  line-height: 1;
}

.date-item__mois {
  font-family: var(--font-corps);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--or-deep);
  margin-top: var(--space-1);
}

.date-item__annee {
  display: block;
  font-size: var(--fs-xs);
  color: var(--texte-doux);
  margin-top: 2px;
}

.date-item__info h3 {
  font-size: var(--fs-md);
  color: var(--bordeaux-deep);
  margin-bottom: var(--space-1);
}

.date-item__info p {
  font-size: var(--fs-sm);
  color: var(--texte-doux);
  margin: 0;
}

.date-item__horaire {
  font-family: var(--font-titre);
  font-size: var(--fs-lg);
  color: var(--or-deep);
}

.dates__vide {
  text-align: center;
  font-style: italic;
  color: var(--texte-doux);
  padding: var(--space-10);
}

@media (max-width: 640px) {
  .date-item {
    grid-template-columns: 80px 1fr;
    grid-template-areas: "date info" "date horaire";
    gap: var(--space-3);
  }
  .date-item__date { grid-area: date; }
  .date-item__info { grid-area: info; }
  .date-item__horaire { grid-area: horaire; font-size: var(--fs-md); }
}

/* ============================================================
   6. REFERENCES
   ============================================================ */
.references {
  padding: var(--space-16) 0;
  background-color: var(--creme-deeper);
  position: relative;
}

.references__temoignages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.temoignage {
  background-color: var(--creme-light);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  position: relative;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(200, 151, 58, 0.2);
}

.temoignage::before {
  content: '“';
  position: absolute;
  top: -22px;
  left: var(--space-4);
  font-family: var(--font-titre);
  font-size: 5rem;
  color: var(--or);
  line-height: 1;
}

.temoignage__texte {
  font-style: italic;
  color: var(--texte);
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

.temoignage__source {
  font-family: var(--font-titre);
  font-size: var(--fs-sm);
  color: var(--bordeaux);
}

.temoignage__commune {
  font-size: var(--fs-xs);
  color: var(--texte-doux);
  font-style: italic;
  margin-top: var(--space-1);
}

.references__communes {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(107, 26, 40, 0.15);
}

.references__communes h3 {
  text-align: center;
  font-size: var(--fs-md);
  color: var(--bordeaux);
  margin-bottom: var(--space-5);
  font-style: italic;
  font-weight: 400;
}

.communes__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  list-style: none;
}

.commune-badge {
  font-family: var(--font-corps);
  font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-4);
  background-color: var(--creme-light);
  border: 1px solid var(--or-deep);
  border-radius: 20px;
  color: var(--bordeaux);
  letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .references__temoignages { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   7. CONTACT
   ============================================================ */
.contact {
  padding: var(--space-16) 0;
  background:
    linear-gradient(135deg, var(--bordeaux) 0%, var(--bordeaux-deep) 100%);
  color: var(--creme-light);
}

.contact h2 { color: var(--creme-light); }
.contact .section-titre .eyebrow { color: var(--or-light); }

.contact__intro {
  max-width: var(--max-width-text);
  margin: 0 auto var(--space-8);
  text-align: center;
  color: var(--creme);
  font-style: italic;
}

.contact__form {
  max-width: 820px;
  margin: 0 auto;
  background-color: var(--creme-light);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  color: var(--texte);
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--or);
}

.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

.contact__field {
  display: flex;
  flex-direction: column;
}

.contact__field label {
  font-family: var(--font-corps);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--bordeaux);
  margin-bottom: var(--space-2);
  letter-spacing: 0.05em;
}

.contact__field label .req {
  color: var(--rouge-erreur);
  margin-left: 2px;
}

.contact__field input,
.contact__field select,
.contact__field textarea {
  font-family: var(--font-corps);
  font-size: var(--fs-base);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--gris-doux);
  background-color: var(--creme-light);
  border-radius: var(--radius-sm);
  color: var(--texte);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.contact__field input:focus,
.contact__field select:focus,
.contact__field textarea:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(200, 151, 58, 0.18);
}

.contact__field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact__field--error input,
.contact__field--error select,
.contact__field--error textarea {
  border-color: var(--rouge-erreur);
}

.contact__error {
  font-size: var(--fs-xs);
  color: var(--rouge-erreur);
  margin-top: var(--space-1);
  font-style: italic;
}

.contact__checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
}

.contact__checkbox input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--bordeaux);
}

.contact__checkbox label {
  font-size: var(--fs-sm);
  color: var(--texte-doux);
  line-height: 1.5;
}

/* Honeypot anti-spam */
.contact__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact__submit {
  display: flex;
  justify-content: center;
}

.contact__direct {
  margin-top: var(--space-8);
  text-align: center;
  color: var(--creme);
  font-size: var(--fs-sm);
}

.contact__direct strong {
  color: var(--or-light);
}

@media (max-width: 640px) {
  .contact__form { padding: var(--space-5); }
  .contact__row { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background-color: var(--bordeaux-deep);
  color: var(--creme);
  padding: var(--space-8) 0 var(--space-5);
  text-align: center;
  font-size: var(--fs-sm);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.footer__logo {
  font-family: var(--font-titre);
  font-size: var(--fs-lg);
  color: var(--or-light);
  letter-spacing: 0.08em;
}

.footer__fusion {
  font-family: var(--font-corps);
  font-size: var(--fs-xs);
  color: var(--gris-doux);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: calc(var(--space-2) * -1);
}

.footer__mentions {
  color: var(--gris-doux);
  font-size: var(--fs-xs);
  font-style: italic;
  margin-top: var(--space-3);
}

.footer__mentions a {
  color: var(--or-light);
}