/* Base : éviter les surprises de largeur */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ margin:0; padding:0; overflow-x: hidden; }

@font-face{
  font-family: "Sansplomb";
  src: url("/static/fonts/SansPlomb-98.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Myriad";
  src: url("/static/fonts/MyriadPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.edito{
  position: relative; /* pour l'empilement propre */
  justify-items: center;
  background:#fff;
  margin-left: 110px;
  margin-right: 110px;
  padding: 84px;
  display: grid;      /* empile les enfants en lignes */
  row-gap: 1rem;
  text-align: center;
  margin-bottom: 24px;
}

.edito-portrait{
  width: 160px;                /* diamètre du cercle */
  height: 160px;
  margin: -120px auto 16px;    /* remonte pour donner l'effet "posé" en haut */
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ffffff;   /* anneau bleu (ta couleur #2B2A5E) */
  background: #fff;            /* petit halo blanc derrière l’image */
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  display: grid;
  place-items: center;
  z-index: 1;
}

.edito-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;           /* remplissage propre */
  display: block;
}

/* Section pleine largeur (sans débordement) */
.program{
  position: relative;
  width: 100%;
  background:#fff;
  padding: 24px clamp(16px, 4vw, 48px);
  overflow-x: hidden;                   /* ceinture et bretelles */
}

/* Titres */

.edito-title{
  font-size: 360%;
  margin: 0 0 8px 0;
  color: #2B2A5E;
  font-family: Sansplomb;
}

.page-title{
  font-size: 700%;
  margin: 0 0 8px 0;
  color: #2B2A5E;
  font-family: Myriad;
}

.page-subtitle{
  font-size: 160%;
  margin: 0 0 8px 0;
  color: #2B2A5E;
  font-weight: bold;
  font-family: Myriad;
}

.page-subtitle2{
  font-size: 160%;
  margin: 0 0 8px 0;
  color: #2B2A5E;
  font-family: Myriad;
}

/* Grille */
.program-list{
  --card-min: 230px;                                  /* largeur mini d’une carte (ajuste si besoin) */
  --gap: clamp(16px, 2.5vw, 32px);

  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: var(--gap);
  align-items: start;
  grid-auto-flow: row dense;
}

/* Desktop : 5 colonnes sur grands écrans, 4 sur écrans plus petits */
@media (min-width: 1300px){
  .program-list{ 
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* max 5 par ligne */
  }
}
@media (min-width: 900px) and (max-width: 1299px){
  .program-list{
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* max 4 par ligne */
  }
}

/* Tablette : 2 colonnes (inchangé) */
@media (min-width: 700px) and (max-width: 899px){
  .program-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile : 1 colonne (inchangé) */
@media (max-width: 699px){
  .program-list{ grid-template-columns: 1fr; }
}

/* Carte artiste */
.artist-card{ margin: 0; }

.card-link{
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, filter .15s ease;
}
.card-link:hover{ transform: translateY(-3px); }

/* Visuel : ratio stable, aucun débordement */
.artist-img{
  width: 100%;
  aspect-ratio: 16 / 10;    /* remplace la hauteur fixe */
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Métadonnées */
.card-meta{ margin-top: 10px; }

.card-meta .date{
  font-weight: 800;
  color: #19b7bf;
  font-size: 140%;
  font-family: Myriad;

}

.place{
  margin: 0px 0 0;
  margin-top: 2px;
  font-size: 130%;
  color: #2B2A5E;
  font-family: Myriad;
}

/* Nom */
.name{
  margin: 0px 0 0;
  font-family: Sansplomb;
  font-size: 300%;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #2B2A5E;
}

/* Optionnel : très grands écrans, permettre 5+ cartes en réduisant un peu la largeur mini */
@media (min-width: 1600px){
  .program-list{ --card-min: 220px; }
}

/* --- HOVER ZOOM SANS CADRE --- */

/* La carte devient un vrai "contenant" arrondi qui masque tout débordement */
.card-link{
  display: block;
  color: inherit;
  text-decoration: none;

  border-radius: 12px;        /* arrondi pour tout le bloc */
  overflow: hidden;           /* évite le "halo"/cadre au zoom */
  background: transparent;    /* pas de fond ajouté */

  transform: translateZ(0);   /* anti-bords flous/halo */
  backface-visibility: hidden;

  transition: transform .18s ease;
}

/* Zoom fluide de la carte entière (image + textes) */
.artist-card{
  position: relative;         /* permet le z-index au hover */
  will-change: transform;
}

.artist-card:hover .card-link,
.artist-card:focus-within .card-link{   /* accessibilité au clavier */
  transform: scale(1.04);     /* ajuste l’intensité du zoom ici */
  z-index: 2;                 /* passe au-dessus des voisines */
}

/* On ne fait plus d’animation séparée sur le lien */
.card-link:hover{ transform: none; }

/* L’image hérite des coins arrondis du conteneur */
.artist-img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 10px;           /* inutile désormais (hérité du parent) */
}

/* Optionnel : léger “lift” sans bordure visible sur écrans >=700px */
@media (min-width:700px){
  .artist-card:hover .card-link,
  .artist-card:focus-within .card-link{
    transform: scale(1.04) translateY(-2px);
  }
}

/* --- HEADER --- */
:root{
  --bleu:#2b2a5e;               /* bleu du site */
  --header-h: 80px;             /* hauteur mobile / état réduit */
  --header-h-lg: 80px;         /* hauteur desktop */
}

body{
  padding-top: var(--header-h); /* éviter le recouvrement par header fixe */
}
@media (min-width: 1280px){
  body{ padding-top: var(--header-h-lg); }
}

.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  background: #2B2A5E;
  color: #fff;
}

.header-inner{
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr auto; /* logo | nav | socials/burger */
  height: var(--header-h);
  padding: 0 clamp(16px, 4vw, 48px);
}

@media (min-width: 1280px){
  .header-inner{ height: var(--header-h-lg); }
}

.brand img{
  width: 48px;
  transition: transform .3s ease;
}
.brand:hover img{ transform: scale(1.08); }

/* NAV */
.site-nav{ justify-self: center; }
.menu{
  display: none;                 /* mobile: menu masqué (use burger) */
  gap: clamp(20px, 4vw, 50px);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.menu a{
  color: #fff;
  text-decoration: none;
  font-family: Sansplomb;
  font-weight: bold;
  font-size: clamp(16px, 1.4vw + 10px, 40px); /* grand en desktop */
  position: relative;
  display: inline-block;
}

/* effet souligné */
.link-underline::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px; background:#fff;
  opacity:0; transform: scaleX(0);
  transition: transform .25s ease, opacity .25s ease;
  transform-origin: left;
}
.link-underline:hover::after{ opacity:1; transform: scaleX(1); }

/* rotations “penchées” */
.twist{ transition: transform .25s ease; display:inline-block; }
.twist:hover{ transform: rotate(0deg); }
.twist.n1{ transform: rotate(-3deg); }
.twist.n2{ transform: rotate(-2.5deg); }
.twist.n3{ transform: rotate(-3.5deg); }
.twist.p1{ transform: rotate(3deg); }
.twist.p2{ transform: rotate(2.5deg); }

/* icônes sociales (desktop) */
.socials{
  display: none;                 /* caché en mobile */
  gap: 12px;
  align-items: center;
}
.socials a{ color:#fff; }

/* Burger (mobile) */
.burger{
  justify-self: end;
  width: 40px; height: 40px;
  border: none; background: transparent; color:#fff; cursor:pointer;
  display: grid; place-items: center;
}
.burger span{
  display:block; width:24px; height:2px; background:#fff; margin:3px 0;
  transition: transform .25s ease, opacity .25s ease;
}

/* État ouvert (ajouté via JS) */
.site-header.open .menu{ display:flex; position: fixed; inset: var(--header-h) 0 0 0; background: #2B2A5E; flex-direction: column; justify-content: center; align-items: center; }
.site-header.open .burger span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.site-header.open .burger span:nth-child(2){ opacity:0; }
.site-header.open .burger span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* Desktop */
@media (min-width: 1280px){
  .menu{ display:flex; }
  .burger{ display:none; }
  .socials{ display:flex; }
}

/* Option: header qui “rétrécit” à la scroll (JS ajoute .shrink) */
.site-header.shrink .header-inner{ height: var(--header-h); }

/* =======================
   FOOTER
   ======================= */

.actus {
  display: flex;
  padding: 24px clamp(16px, 4vw, 0px);
}

.article {
  margin: 8;
  flex: 1;
}

.article + .article {
  margin-left: 10px;
}

.article-item {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  vertical-align: top;
  object-position: top center; /* cadrage en haut */

}

.article-titre {
  margin-top: 10px;
  font-family: Sansplomb;
  font-size: 300%;
  line-height: 1.05;
  letter-spacing: .5px;
  color: #ffffff;
}

.article-bouton{
  display: inline-block;
  margin-top: 20px;
  padding: 6px 14px;              /* épaisseur du bouton */
  background-color: #32BAD1;       /* turquoise du visuel */
  color: #fff;                      /* texte blanc */
  font-family: Sansplomb, sans-serif;
  font-weight: 700;                 /* texte bien gras */
  font-size: 28px;                  /* ajuste si besoin */
  border-radius: 999px;             /* forme pilule */
  text-decoration: none;            /* pas de soulignement */
  border: 0;
  transition: transform .15s ease, filter .15s ease;
}

.site-footer{
  width: 100%;
  background: #2B2A5E;
  color: #fff;
  border-top: 1px solid #020F64;    /* proche du snippet */
  overflow: hidden;
  padding-bottom: 40px;              /* confortable (le snippet avait 160px) */
}

/* conteneur centré avec padding horizontal fluide */
.site-footer .container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px clamp(16px, 4vw, 48px) 0;
}

/* rangée de logos */
.site-footer .logos{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;                         /* ≈ gap-x/y-12 du snippet */
  padding-bottom: 24px;
}
.site-footer .logos a{
  display: inline-block;
  line-height: 0;
  color: #fff;                       /* pour les icônes en currentColor */
  transition: transform .25s ease;
}
.site-footer .logos a:hover{ transform: scale(1.05); }
.site-footer .logos svg{ display:block; height:auto; }

/* réseaux sociaux */
.socials-footer{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.socials-footer a{
  color: #fff;
  display: inline-block;
  transition: transform .2s ease;
}
/* petits angles façon "rotate" du snippet */
.socials-footer a:nth-child(1){ transform: rotate(-3deg); }
.socials-footer a:nth-child(2){ transform: rotate(4deg); }
.socials-footer a:nth-child(3){ transform: rotate(-4deg); }
.socials-footer a:hover{ transform: rotate(0deg); }

.socials-footer .ico{
  width: 32px; height: 32px;
  display: block;
}

/* Crédits */
.site-footer .credits{
  text-align: center;
  font-family: Myriad;
  padding: 0 clamp(16px, 4vw, 48px);
  margin-top: 30px;
}
.site-footer .credits a{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,.85);
}
.site-footer .credits a:hover{ border-bottom-color: transparent; }

.logo-footer{
  max-height: 100px;   /* ajuste la taille des logos */
  width: auto;
}

/* =======================
   RESPONSIVE MOBILE
   ======================= */

.homepage-hero{
  min-height: clamp(360px, 72vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 72px);
  overflow: hidden;
}

.homepage-hero-img{
  width: min(1150px, 100%);
  height: auto;
  display: block;
}

.coming-soon-title{
  margin: 24px 0 0;
  font-family: Sansplomb, sans-serif;
  font-size: clamp(34px, 7vw, 60px);
  line-height: 1;
  text-align: center;
  color: #2B2A5E;
}

.festival-news-title{
  margin: 0;
  padding: 24px clamp(16px, 4vw, 48px);
  font-family: Sansplomb, Impact, sans-serif;
  font-size: 700%;
  line-height: .9;
  color: #ffffff;
  background: #2B2A5E;
}

@media (max-width: 899px){
  :root{
    --header-h: 72px;
  }

  .header-inner{
    padding: 0 16px;
  }

  .brand img{
    width: 44px;
  }

  .site-header.open .menu{
    justify-content: flex-start;
    padding-top: 48px;
    gap: 28px;
  }

  .site-header.open .menu a{
    font-size: clamp(28px, 9vw, 44px);
    text-align: center;
  }

  .homepage-hero{
    min-height: 58vh;
    padding: 28px 18px;
  }

  .homepage-hero-img{
    width: 100%;
  }

  .edito{
    margin: 0;
    padding: 72px 18px 42px;
    text-align: left;
  }

  .edito-portrait{
    width: 132px;
    height: 132px;
    margin-top: -112px;
  }

  .edito-title{
    font-size: clamp(38px, 12vw, 58px);
    line-height: .95;
    text-align: center;
  }

  .page-title{
    font-size: clamp(48px, 15vw, 86px);
    line-height: .9;
    overflow-wrap: anywhere;
  }

  .page-subtitle2{
    font-size: 19px;
    line-height: 1.45;
  }

  .program{
    padding: 24px 18px;
  }

  .program-list{
    gap: 30px;
  }

  .artist-img{
    aspect-ratio: 4 / 3;
  }

  .name{
    font-size: clamp(34px, 12vw, 52px);
    overflow-wrap: anywhere;
  }

  .card-meta .date,
  .place{
    font-size: 20px;
  }

  .artist-card:hover .card-link,
  .artist-card:focus-within .card-link{
    transform: none;
  }

  .actus{
    display: grid;
    gap: 34px;
    padding: 8px 18px 42px;
  }

  .article{
    margin: 0;
  }

  .article + .article{
    margin-left: 0;
  }

  .article-titre{
    font-size: clamp(34px, 10vw, 48px);
    overflow-wrap: anywhere;
  }

  .article-bouton{
    font-size: 22px;
    padding: 8px 16px;
  }

  .festival-news-title{
    font-size: clamp(48px, 15vw, 86px);
    padding: 24px 18px;
  }

  .site-footer .container{
    padding-top: 34px;
  }

  .site-footer .logos{
    gap: 24px;
  }

  .logo-footer{
    max-width: min(260px, 78vw);
    max-height: 82px;
  }
}

@media (min-width: 900px) and (max-width: 1279px){
  .edito{
    margin-left: 40px;
    margin-right: 40px;
    padding: 64px;
  }

  .page-title{
    font-size: clamp(72px, 10vw, 110px);
  }

  .article-titre{
    font-size: clamp(34px, 4.4vw, 56px);
  }
}