/* CécileTeplait – identité visuelle
   Bleu océan et orange terre cuite. Nom de l'artiste en Birthstone Bounce
   (écriture au pinceau), titres en Gloock, texte en Public Sans. */

@font-face {
  font-family: "Birthstone Bounce";
  src: url("/assets/fonts/birthstone-bounce-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ocean: #0a4560;
  --ocean-fonce: #07344a;
  --terre: #e4825a;        /* sur fond océan ou foncé */
  --terre-fonce: #a84c26;  /* pour du texte sur fond clair */
  --blanc: #fbf8f4;
  --encre: #0e2230;
  --pale: #e4eef1;
  --trait: #c9d9df;

  --logo: "Birthstone Bounce", "Brush Script MT", cursive;
  --titre: "Gloock", "DejaVu Serif", Georgia, serif;
  --texte: "Public Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --marge: clamp(1rem, 5vw, 4.5rem);
  --largeur: 72rem;
  --entete: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.05; margin: 0; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--terre); color: var(--encre); padding: 0.6rem 1rem; border-radius: 6px;
}
.skip:focus { top: 1rem; }

/* ----- Boutons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.7rem 1.4rem;
  border-radius: 999px; border: 2px solid transparent;
  font: 700 1rem/1.2 var(--texte); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-terre { background: var(--terre); color: var(--encre); }
.btn-terre:hover { background: var(--ocean); color: var(--blanc); }
.btn-ligne { border-color: var(--ocean); color: var(--ocean); background: transparent; min-height: 2.6rem; padding: 0.5rem 1.1rem; }
.btn-ligne:hover { background: var(--ocean); color: var(--blanc); }
.btn-petit { min-height: 2.4rem; padding: 0.4rem 1rem; font-size: 0.92rem; background: var(--ocean); color: var(--blanc); }
.btn-petit:hover { background: var(--terre); color: var(--encre); }

/* ----- En-tête et onglets ----- */
.entete {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem clamp(1rem, 3vw, 2.5rem);
  min-height: var(--entete);
  padding: 0.5rem var(--marge);
  background: var(--ocean); color: var(--blanc);
}
.marque {
  font-family: var(--logo); font-weight: 500; font-size: 2.1rem; line-height: 1;
  color: var(--terre); text-decoration: none; white-space: nowrap;
  padding-top: 0.15em;
}
.onglets { display: flex; gap: clamp(1rem, 2.5vw, 2rem); margin-left: auto; font-weight: 500; }
.onglets a {
  text-decoration: none; padding: 0.5rem 0;
  border-bottom: 3px solid transparent;
}
.onglets a:hover { border-bottom-color: rgba(251, 248, 244, 0.5); }
.onglets a[aria-current="page"] { border-bottom-color: var(--terre); }
.bouton-jukebox {
  background: var(--terre); color: var(--encre); border-radius: 999px;
  padding: 0.4rem 1rem; font-weight: 700; font-size: 0.95rem; text-decoration: none; white-space: nowrap;
}
.bouton-jukebox:hover { background: var(--blanc); }

@media (max-width: 760px) {
  .entete { flex-wrap: wrap; row-gap: 0.1rem; padding-bottom: 0; }
  .bouton-jukebox { margin-left: auto; }
  .onglets {
    order: 3; width: 100%; margin: 0; gap: 1.3rem;
    overflow-x: auto; scrollbar-width: none; font-size: 0.95rem;
  }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets a { white-space: nowrap; padding: 0.55rem 0 0.5rem; }
}

/* ----- Accueil : une image, le nom ----- */
.accueil {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(62vh, 40rem);
  padding: clamp(2.5rem, 7vw, 5rem) var(--marge);
  background: var(--ocean); color: var(--blanc);
}
.accueil-photo { min-height: calc(100svh - var(--entete) - 4rem); max-height: 58rem; }
.accueil-cadre { position: absolute; inset: 0; }
.accueil-image { width: 100%; height: 100%; object-fit: cover; }
.accueil-cadre::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 52, 74, 0.92) 0%, rgba(7, 52, 74, 0.55) 30%, rgba(7, 52, 74, 0) 62%);
}

/* Dispositions de la photo d'accueil sur ordinateur (choisies dans l'admin).
   « Plein écran » est la disposition de base ci-dessus ; sur mobile, la photo
   est toujours en plein écran. */
@media (min-width: 861px) {
  /* Photo sur le côté, à sa hauteur naturelle ; le titre de l'autre côté, sur le fond océan */
  .dispo-droite, .dispo-gauche {
    --img-h: min(calc(100svh - var(--entete) - 4rem), 58rem);
    --img-w: min(calc(var(--img-h) * var(--ratio)), 52vw);
    --largeur-dispo: calc(100vw - 2 * var(--marge) - var(--img-w) - 2rem);
    display: grid; align-items: end; gap: 2rem;
    min-height: var(--img-h); max-height: none;
  }
  .dispo-droite { grid-template-columns: minmax(0, 1fr) var(--img-w); padding: 0 0 0 var(--marge); }
  .dispo-gauche { grid-template-columns: var(--img-w) minmax(0, 1fr); padding: 0 var(--marge) 0 0; }
  .dispo-droite .accueil-cadre, .dispo-gauche .accueil-cadre { position: relative; inset: auto; grid-row: 1; height: var(--img-h); }
  .dispo-droite .accueil-cadre { grid-column: 2; }
  .dispo-gauche .accueil-cadre { grid-column: 1; }
  .dispo-droite .accueil-texte, .dispo-gauche .accueil-texte { grid-row: 1; padding-block: clamp(2.5rem, 7vw, 5rem); }
  .dispo-droite .accueil-texte { grid-column: 1; }
  .dispo-gauche .accueil-texte { grid-column: 2; }
  /* fondu discret entre la photo et le fond océan */
  .dispo-droite .accueil-cadre::after { background: linear-gradient(to right, rgba(10, 69, 96, 1) 0%, rgba(10, 69, 96, 0) 18%); }
  .dispo-gauche .accueil-cadre::after { background: linear-gradient(to left, rgba(10, 69, 96, 1) 0%, rgba(10, 69, 96, 0) 18%); }

  /* Bandeau : photo sur toute la largeur en haut, titre en dessous */
  .dispo-bandeau { display: block; min-height: 0; max-height: none; padding: 0; }
  .dispo-bandeau .accueil-cadre { position: relative; inset: auto; height: min(58vh, 36rem); }
  .dispo-bandeau .accueil-cadre::after { background: linear-gradient(to top, rgba(10, 69, 96, 1) 0%, rgba(10, 69, 96, 0) 35%); }
  .dispo-bandeau .accueil-texte { padding: 0 var(--marge) clamp(2.5rem, 5vw, 4rem); margin-top: clamp(-5rem, -6vw, -2.5rem); }
}
.accueil-texte { position: relative; z-index: 1; }
.accueil-nom {
  /* Taille de base selon la longueur du titre, puis plafonnée pour que le mot le plus
     long (--mot-max, en em, calculé par la page) tienne dans la largeur de l'écran.
     Le retour à la ligne ne se fait donc qu'entre deux mots, jamais au milieu. */
  --taille: clamp(3.6rem, 15vw, 11rem);
  --mot-max: 5;
  font-family: var(--logo); font-weight: 500;
  color: var(--terre);
  font-size: min(var(--taille), calc((var(--largeur-dispo, calc(100vw - 2 * var(--marge))) - 1rem) / var(--mot-max)));
  line-height: 1.1;
  margin-left: -0.03em;
  overflow-wrap: normal; word-break: normal; hyphens: manual;
  text-wrap: balance;
}
.accueil-nom.titre-moyen { --taille: clamp(3rem, 9vw, 7rem); }
.accueil-nom.titre-long { --taille: clamp(2.5rem, 6vw, 4.8rem); line-height: 1.15; }
.accueil-accroche { margin: 0.4rem 0 0; font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 34rem; }
.accueil-album { margin-top: 1.2rem; }
.accueil-album:hover { background: var(--blanc); color: var(--encre); }

/* ----- Accueil : prochaines dates et merch ----- */
.accueil-blocs {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--marge);
}
.accueil-blocs.un-bloc { grid-template-columns: minmax(0, 46rem); }
@media (max-width: 860px) { .accueil-blocs { grid-template-columns: 1fr; } }
.accueil-blocs h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--ocean); margin-bottom: 1rem; }

.mini-dates { list-style: none; margin: 0; padding: 0; }
.mini-dates li {
  display: grid; grid-template-columns: 5.6rem 1fr auto; gap: 0.3rem 1rem; align-items: center;
  padding: 0.9rem 0; border-top: 2px solid var(--ocean);
}
.mini-dates li:last-child { border-bottom: 2px solid var(--ocean); }
.mini-dates .date-jour { font-size: 2.3rem; }
.mini-lieu { margin: 0; font-family: var(--titre); font-size: 1.3rem; line-height: 1.15; }
.mini-meta { margin: 0.15rem 0 0; font-size: 0.95rem; }
@media (max-width: 480px) {
  .mini-dates li { grid-template-columns: 5.4rem 1fr; }
  .mini-dates .btn { grid-column: 2; justify-self: start; }
}
.lien-suite { display: inline-block; margin-top: 1rem; font-weight: 700; color: var(--terre-fonce); }

.merch { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1.4rem; }
@media (max-width: 480px) { .merch { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); } .article .btn { min-height: 2.6rem; padding: 0.45rem 1.1rem; } }
.article { display: flex; flex-direction: column; gap: 0.7rem; }
.article img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 1rem; background: var(--pale); }
.article-info { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.article-nom { margin: 0; font-weight: 700; }
.article-prix { margin: 0; font-weight: 500; color: var(--terre-fonce); white-space: nowrap; }
.article .btn { align-self: flex-start; }

/* ----- Pages intérieures ----- */
.section { padding: clamp(2.5rem, 7vw, 5.5rem) var(--marge); }
.section h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); color: var(--ocean); margin-bottom: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -0.01em; }
.texte-long { max-width: 38rem; }
.texte-long p { margin: 0 0 1em; }
.vide { font-size: 1.15rem; max-width: 38rem; margin: 0; }

/* Présentation */
.presentation { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.presentation.sans-photo { grid-template-columns: 1fr; }
.presentation .texte-long { font-size: 1.15rem; }
.presentation-photo { margin: 0; }
.presentation-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.2rem; }
@media (max-width: 760px) { .presentation { grid-template-columns: 1fr; } }

/* Vidéos */
.videos-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.video { margin: 0; }
.video figcaption { margin-top: 0.7rem; font-weight: 500; }
.video-lecteur, .video iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 1rem; overflow: hidden;
}
.video-lecteur { position: relative; padding: 0; cursor: pointer; background: var(--ocean-fonce); }
.video-lecteur img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; }
.video-lecteur:hover img { opacity: 0.85; }
.video-play {
  position: absolute; left: 50%; top: 50%; width: 4.2rem; height: 4.2rem; translate: -50% -50%;
  border-radius: 50%; background: var(--terre);
}
.video-play::after {
  content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%;
  border-style: solid; border-width: 0.75rem 0 0.75rem 1.2rem; border-color: transparent transparent transparent var(--encre);
}
.videos-plus { margin: 2rem 0 0; font-weight: 500; }

/* Agenda */
.dates { list-style: none; margin: 0; padding: 0; max-width: var(--largeur); }
.date {
  display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 0.4rem 1.5rem; align-items: center;
  padding: 1.3rem 0; border-top: 2px solid var(--ocean);
}
.date:last-child { border-bottom: 2px solid var(--ocean); }
.date-cal { display: flex; flex-direction: column; color: var(--ocean); line-height: 1; }
.date-jour { font-family: var(--titre); font-size: 3.2rem; }
.date-mois { font-weight: 700; font-size: 0.92rem; margin-top: 0.2rem; white-space: nowrap; }
.date-lieu { margin: 0; font-family: var(--titre); font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.15; }
.date-meta { margin: 0.25rem 0 0; font-weight: 500; }
.date-infos { margin: 0.25rem 0 0; opacity: 0.8; font-size: 0.95rem; }
@media (max-width: 600px) {
  .date { grid-template-columns: 5.2rem 1fr; }
  .date-jour { font-size: 2.6rem; }
  .date .btn { grid-column: 2; justify-self: start; margin-top: 0.4rem; }
}
.passes { margin-top: 2.5rem; max-width: var(--largeur); }
.passes summary { cursor: pointer; font-weight: 700; color: var(--ocean); padding: 0.4rem 0; }
.dates-passees { margin-top: 1rem; opacity: 0.7; }
.dates-passees .date { border-color: var(--trait); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact .texte-long { font-size: 1.15rem; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.reseaux { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.reseaux a {
  display: inline-block; padding: 0.45rem 1.1rem; border: 2px solid var(--ocean); border-radius: 999px;
  color: var(--ocean); text-decoration: none; font-weight: 700;
}
.reseaux a:hover { background: var(--ocean); color: var(--blanc); }

.formulaire { display: grid; gap: 1.1rem; background: var(--pale); padding: clamp(1.2rem, 3vw, 2rem); border-radius: 1.2rem; }
.champ label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.optionnel { font-weight: 400; opacity: 0.75; }
.champ input, .champ textarea {
  width: 100%; padding: 0.8rem 0.95rem; border-radius: 0.6rem; border: 2px solid var(--trait);
  background: #fff; color: var(--encre); font: inherit;
}
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(10, 69, 96, 0.2); }
.champ textarea { resize: vertical; min-height: 9rem; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .btn { justify-self: start; }
.formulaire-retour { margin: 0; min-height: 1.5em; font-weight: 700; color: var(--ocean); }

/* Page simple (mentions légales) */
.page-simple { max-width: 50rem; }

/* ----- Pied de page ----- */
.pied {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: 1.8rem var(--marge); background: var(--encre); color: var(--blanc); font-size: 0.95rem;
}
.pied p { margin: 0; }
.pied nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }