/* maxbecq.com : reproduction du site WordPress (thème Arnold), octobre 2026 */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jost-400-latin.woff2') format('woff2');
}

:root {
  --fond: #1f1e1e;
  --texte: #f5f5f5;
  --titres: #dbdbdb;
  --menu: #e0e0e0;
  --cuivre: #c9a888;
  --credit: rgba(255, 255, 255, 0.4);
  --marge: 47px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--fond);
  color: var(--texte);
  font: 16px/24px 'Jost', arial, helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--cuivre); }

h1, h2, h3, h4 { font-weight: normal; color: var(--titres); margin: 0; }
h1, h2, h3 { font-family: Verdana, Geneva, sans-serif; letter-spacing: 0.08em; }
h4 { font-size: 26px; line-height: 1.2; margin-bottom: 0.8em; }

p { margin: 0; }

.credit {
  font-size: 12px;
  line-height: 18px;
  color: var(--credit);
  letter-spacing: 0.05em;
}

/* En-tête */

.entete {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  height: 140px;
  display: flex;
  align-items: center;
  padding: 0 60px;
}

.logo {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 24px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cuivre);
  white-space: nowrap;
}
.logo:hover { color: var(--cuivre); }

.menu {
  display: flex;
  gap: 0 40px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.menu a { font-size: 20px; line-height: 20px; color: var(--menu); }
.menu a:hover { color: var(--cuivre); }
.menu a.actif { color: var(--cuivre); }

.reseaux { display: flex; gap: 0 22px; margin-left: 64px; font-size: 20px; }
.reseaux a { color: var(--menu); }
.reseaux a:hover { color: var(--cuivre); }

.burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--menu);
  font-size: 24px;
  cursor: pointer;
}

/* Contenu : conteneur et grille repris d'Arnold (Bootstrap 3 : 970 px dès 992 px,
   1170 px dès 1200 px, 12 colonnes, gouttière 20 px). */

main {
  width: 100%;
  margin: 0 auto;
  padding: 220px var(--marge) 100px;
  animation: apparition .5s linear both;
}
@media (min-width: 992px) { main { width: 970px; padding-left: 20px; padding-right: 20px; } }
@media (min-width: 1200px) { main { width: 1170px; } }

/* Fondu à chaque chargement de page, comme Arnold (Opacity0to1, 0,5 s) */
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }

.grille { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 20px; }
.c3 { grid-column: span 3; }
.c4 { grid-column: span 4; }
.c6 { grid-column: span 6; }
.c8 { grid-column: span 8; }
.c12 { grid-column: span 12; }

/* Pages à image de fond (accueil, contact) : le fond est dans .fond pour suivre le fondu */

.plein-ecran { position: relative; min-height: 100vh; }
.fond {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 0;
  animation: apparition .5s linear both;
}
.plein-ecran main, .plein-ecran .credit { position: relative; }
.plein-ecran main { min-height: 100vh; padding-bottom: 60px; }

.accueil .fond { background-image: url('/img/accueil.jpg'); }
.accueil .accroche { padding-top: 80px; }
.accueil .accroche p + p { margin-top: 24px; }
.accueil .credit {
  position: absolute;
  right: var(--marge);
  bottom: 40px;
  font-size: 0.65rem;
  animation: apparition .5s linear both;
}

/* Écouter et voir */

.titre-section {
  grid-column: 1 / -1;
  font-size: 22px;
  margin-bottom: 30px;
}
.section-suivante { margin-top: 80px; }

.oeuvres { row-gap: 40px; }
.oeuvre {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 20px;
  align-items: end;
}
.oeuvre .vignette { grid-column: span 3; }
.oeuvre .texte { grid-column: span 2; padding-bottom: 12px; }

/* Vignettes : rognées de 5 % au repos, image entière au survol (effet « zoomed » d'Arnold) */
.vignette { display: block; transform: scale(1.05); transition: .5s; }
.vignette img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  clip-path: inset(5%);
  transition: .5s;
}
.vignette:hover img { clip-path: inset(0); }

/* Pictogramme lecture sur les vignettes vidéo */
.vignette.video { position: relative; }
.vignette.video::after {
  content: '\f04b';
  font: var(--fa-font-solid);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  transition: .5s;
}
.vignette.video:hover::after { color: var(--cuivre); }

/* Fenêtre de lecture */
dialog.lightbox {
  border: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  width: min(1100px, 92vw);
}
dialog.lightbox::backdrop { background: rgba(15, 15, 15, 0.92); }
dialog.lightbox iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
dialog.lightbox button {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: 0;
  color: var(--menu);
  font-size: 26px;
  cursor: pointer;
}
dialog.lightbox button:hover { color: var(--cuivre); }

/* Bio */

.bio img { width: 100%; display: block; }
.bio .credit { text-align: center; }
.bio .texte p + p { margin-top: 24px; }
.bio .texte { padding-bottom: 60px; }
.bio-pied { text-align: center; }
.bio-pied a { color: var(--cuivre); }
.bio-pied .distinctions { margin-top: 24px; font-style: italic; }

/* Performances */

.performances h2 { font-size: min(46px, 4.4vw); line-height: 1.2; white-space: nowrap; }
.performances ul { margin: 20px 0 0; padding-left: 30px; }
.performances li { margin-bottom: 8px; }

/* Contact */

.contact .fond { background-image: url('/img/contact.jpg'); background-position: 50% 50%; }
.contact .fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.contact .colonnes { padding-top: 13px; }
.contact h3 { font-size: 38px; line-height: 76px; }
.contact .liens { list-style: none; margin: 0; padding: 0; }
.contact .liens li { margin-bottom: 12px; }
.contact .liens i { width: 24px; margin-right: 10px; text-align: center; }
.contact .credit { text-align: center; padding-bottom: 40px; margin-top: -60px; }

/* Formulaire MailerLite (injecté par universal.js) : habillage aux couleurs du site.
   Les styles MailerLite sont très spécifiques, d'où les !important. */
.contact .ml-embedded { margin-top: 20px; max-width: 420px; }
.contact .ml-embedded .ml-form-embedWrapper,
.contact .ml-embedded .ml-form-embedBody,
.contact .ml-embedded .ml-form-successBody {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
.contact .ml-embedded .ml-form-embedWrapper { width: 100% !important; }
.contact .ml-embedded .ml-form-embedContent h4,
.contact .ml-embedded .ml-form-embedContent p { display: none !important; }
.contact .ml-embedded .ml-form-successContent h4,
.contact .ml-embedded .ml-form-successContent p,
.contact .ml-embedded .ml-form-embedPermissionsContent p {
  font-family: 'Jost', arial, sans-serif !important;
  color: var(--texte) !important;
}
.contact .ml-embedded .ml-form-embedPermissionsContent p { font-size: 12px !important; color: var(--credit) !important; }
.contact .ml-embedded input.form-control {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--credit) !important;
  border-radius: 0 !important;
  color: var(--texte) !important;
  font-family: 'Jost', arial, sans-serif !important;
  font-size: 14px !important;
  padding: 6px 0 !important;
}
.contact .ml-embedded input.form-control::placeholder { color: #adadad !important; }
.contact .ml-embedded button.primary,
.contact .ml-embedded .ml-mobileButton-horizontal button {
  background: transparent !important;
  border: 2px solid var(--cuivre) !important;
  border-radius: 0 !important;
  color: var(--cuivre) !important;
  font-family: 'Jost', arial, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  height: 50px !important;
  padding: 0 15px !important;
}
.contact .ml-embedded .ml-mobileButton-horizontal button:hover,
.contact .ml-embedded button.primary:hover { background: var(--cuivre) !important; color: var(--fond) !important; }

/* Mobile */

@media (max-width: 991.98px) {
  :root { --marge: 24px; }
  .entete { padding: 0 var(--marge); height: 100px; }
  .logo { font-size: 20px; }
  .burger { display: block; }
  .menu, .reseaux { display: none; }
  .entete.ouvert {
    position: fixed;
    inset: 0;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 36px;
    background: var(--fond);
  }
  .entete.ouvert .burger { position: absolute; top: 34px; right: var(--marge); }
  .entete.ouvert .menu { display: flex; flex-direction: column; gap: 28px; margin: 60px 0 0; }
  .entete.ouvert .menu a { font-size: 26px; line-height: 30px; }
  .entete.ouvert .reseaux { display: flex; margin: 40px 0 0; }

  main { padding-top: 140px; }
  .accueil .accroche { max-width: 340px; padding-top: 40vh; }
  .grille > * { grid-column: 1 / -1; }
  .oeuvre { grid-template-columns: 140px 1fr; align-items: center; }
  .oeuvre .vignette, .oeuvre .texte { grid-column: auto; }
  .bio img { width: 100%; max-width: 400px; }
  .bio .texte { margin-top: 40px; }
  .performances h2 { font-size: 32px; white-space: normal; }
  .contact h3 { font-size: 28px; line-height: 40px; }
  .contact .liens { margin-top: 60px; }
  .contact .credit { margin-top: 0; }
}